/*
 * Image → text toggle + global mode control.
 * Ported from help.domotz.com globals.css. Uses the theme's design tokens when
 * present, with hard fallbacks so it also looks right on any other theme.
 */
.img-transform,
.img-mode-control {
  --dz-fg: var(--foreground, 220 33% 12%);
  --dz-bg: var(--background, 210 40% 98%);
  --dz-primary: var(--primary, 217 91% 50%);
  --dz-primary-fg: var(--primary-foreground, 0 0% 100%);
  --dz-border: var(--border, 214 32% 88%);
  --dz-secondary: var(--secondary, 214 32% 94%);
  --dz-muted-fg: var(--muted-foreground, 215 20% 40%);
  --dz-destructive: var(--destructive, 0 70% 45%);
}

.article-content figure.img-transform { position: relative; margin: 0; }

.article-content figure.img-transform .img-transform-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--dz-fg));
  background: hsl(var(--dz-bg) / 0.9);
  border: 1px solid hsl(var(--dz-border));
  border-radius: 9999px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.article-content figure.img-transform .img-transform-toggle:hover {
  background: hsl(var(--dz-primary));
  color: hsl(var(--dz-primary-fg));
  border-color: hsl(var(--dz-primary));
}
.article-content figure.img-transform[data-state="text"] > img { display: none; }
/* In image state the transcript is never shown (independent of the hidden attr). */
.article-content figure.img-transform[data-state="image"] .img-transform-text { display: none; }
.article-content figure.img-transform[data-state="text"] .img-transform-toggle {
  position: static;
  margin-top: 0.75rem;
}

.article-content .img-transform-text {
  border: 1px solid hsl(var(--dz-border));
  border-left: 3px solid hsl(var(--dz-primary));
  border-radius: 0.6rem;
  background: hsl(var(--dz-secondary));
  padding: 1rem 1.1rem;
}
.article-content .img-transform-text > * + * { margin-top: 0.7em; }
.article-content .img-transform-status { color: hsl(var(--dz-muted-fg)); font-style: italic; }
.article-content .img-transform-error { color: hsl(var(--dz-destructive)); }

/* Global mode control above the article body */
.img-mode-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid hsl(var(--dz-border));
  border-radius: 0.7rem;
  background: hsl(var(--dz-secondary) / 0.5);
}
.img-mode-control-label { font-size: 0.8rem; font-weight: 600; color: hsl(var(--dz-muted-fg)); }
.img-mode-control-buttons { display: inline-flex; align-items: center; gap: 0.3rem; }
.img-mode-control-buttons button,
.img-mode-control-md {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid hsl(var(--dz-border));
  background: hsl(var(--dz-bg));
  color: hsl(var(--dz-fg));
  cursor: pointer;
  text-decoration: none;
}
.img-mode-control-buttons button[data-active="true"] {
  background: hsl(var(--dz-primary));
  color: hsl(var(--dz-primary-fg));
  border-color: hsl(var(--dz-primary));
}
.img-mode-control-md:hover,
.img-mode-control-buttons button:hover { border-color: hsl(var(--dz-primary)); color: hsl(var(--dz-primary)); }
.img-mode-control-md:hover { background: hsl(var(--dz-primary) / 0.08); }