/* The appearance switch on Dyad's UI: the button, the popover, the three looks. Layout and behaviour
   only: every colour, font and radius comes from brand.css, generated from the Hologram brand kit's
   tokens, through the same variables Dyad's own components read. Immersive is brand.css's business too
   (the photo behind a transparent main surface, glass on the panels); this file only places the switch. */

/* The switch: a sun at the top right, above Dyad's UI; the popover under it. */
.appearance {
  position: fixed; top: 6px; right: 14px; z-index: 60; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--popover); color: var(--popover-foreground); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0.85; transition: opacity 0.15s, transform 0.15s;
}
.appearance:hover { opacity: 1; transform: translateY(1px) scale(1.04); }
.popover {
  position: fixed; top: 42px; right: 14px; z-index: 61; width: 236px; padding: 6px; border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border); background: var(--popover); color: var(--popover-foreground);
  font-family: var(--font-sans); font-size: 14px;
}
.popover[hidden] { display: none; }
.mode { display: flex; align-items: center; justify-content: space-between; gap: 13px; width: 100%; text-align: left; padding: 8px 13px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mode svg { flex: none; opacity: 0.8; }
.mode:hover { background: var(--accent); color: var(--accent-foreground); }
.mode[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); font-weight: 500; }
.walls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 2px 5px 8px; }
.walls:not(.on) { display: none; }
.wall { aspect-ratio: 1.618; border-radius: calc(var(--radius) - 2px); border: 1.5px solid transparent; background-size: cover; background-position: center; cursor: pointer; }
.wall[aria-pressed="true"] { border-color: var(--brand); }

/* Electron's title bar (the logo, "Manage app", the window controls) is window chrome, not the
   product: hidden, and the layout's offset for it set to zero so the page starts at the top. */
:root { --layout-title-bar-offset: 0px !important; }
.app-region-drag { display: none !important; }

/* Voice to text is Dyad's Pro feature: the button and its recording states are not offered here. */
button[aria-label^="Voice to text"], button[aria-label="Stop recording"], button[aria-label^="Transcribing"] { display: none !important; }