/*
  App furniture: the rules that are neither Tailwind nor a component, expressed in theme variables.

  These came out of `globals.css` with hardcoded greys baked in — `#444` scrollbars, `rgb(128 128 128 / .3)`
  thumbs. Small, but exactly the kind of thing that makes a light theme look broken in the code editor and
  that a theme author has no way to reach. Now every value here is a variable a theme owns.
*/

/* Sonner renders at the document root, above everything the app draws. */
[data-sonner-toaster] {
  z-index: 700 !important;
}

/* Code editor — thin scrollbars. Dark by default under Duck, because the editor surface is dark in both
   Duck themes; a theme with a light editor sets these to suit. */
.code-editor-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.code-editor-scrollable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-editor-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.code-editor-scrollable::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

.code-editor-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Chat — the background-task strip. A default horizontal scrollbar is ~15px tall and is laid out INSIDE
   the row, so it stole most of the chips' breathing room and made the tray read as squeezed. */
.task-strip {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thin-thumb) transparent;
}

.task-strip::-webkit-scrollbar {
  height: 4px;
}

.task-strip::-webkit-scrollbar-track {
  background: transparent;
}

.task-strip::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thin-thumb);
  border-radius: 2px;
}

.task-strip:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thin-thumb-hover);
}

/* File browser — while a context menu is open, the rest of the grid stops responding. Behaviour, not
   appearance, but it lives with the other furniture rather than in a component's stylesheet. */
.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) {
  pointer-events: none;
}

.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) .file-item-ellipsis {
  opacity: 0 !important;
}

.file-grid [data-file-item][data-state='open'] .file-item-ellipsis {
  opacity: 1 !important;
}

/* The header's own ink. A class rather than a variable at the call site, because `EditableTitle` accepts a
   className and not a style — the token is still the source of truth. */
.header-ink {
  color: var(--header-fg);
}

.header-ink-border {
  border-color: color-mix(in srgb, var(--header-fg) 40%, transparent);
}