/* Shared UI primitives. Dashboard is canonical; run scripts/sync-ui-assets.mjs after edits.
 * .ui-panel: shared card surface with --ui-panel-* variants.
 * .ui-control: text input/select/textarea; tune --ui-control-* on the owning component.
 * .ui-button: standard button; --ui-button-* handles spacing/color variants.
 * .ui-scroll: bounded scroll region; scrolling axis/layout stays component-owned.
 * .custom-dropdown: shared enhanced select, paired with js/custom-dropdown.js.
 * Existing semantic selectors below are compatibility adapters, not separate implementations.
 */
:root {
  --ui-scroll-size: 8px;
  --ui-scroll-thumb: rgba(128,128,128,.65);
  --ui-scroll-thumb-hover: rgba(160,160,160,.8);
  --ui-scroll-track: transparent;
  color-scheme: dark;
}

/* Native pickers inherit the surrounding theme, including dynamically added selects. */
select { min-width: 0; max-width: 100%; }
select option, select optgroup { background-color: Canvas; color: CanvasText; }
@supports (appearance: base-select) {
  select:not(.custom-dropdown__native):not([multiple]):not([size]),
  select:not(.custom-dropdown__native):not([multiple]):not([size])::picker(select) { appearance: base-select; }
  /* The browser supplies the picker icon; avoid legacy SVG/gradient arrows doubling it. */
  select:not(.custom-dropdown__native):not([multiple]):not([size]) { background-image: none; }
  select:not(.custom-dropdown__native):not([multiple]):not([size])::picker(select) {
    max-block-size: min(240px, 50dvh);
    max-inline-size: calc(100vw - 24px);
    min-inline-size: anchor-size(width);
    overflow: auto;
    overscroll-behavior: contain;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }
  select:not(.custom-dropdown__native):not([multiple]):not([size]) option {
    padding: 9px 10px;
    border-radius: 8px;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  select:not(.custom-dropdown__native) option:checked { background: rgba(128,128,128,.18); }
  select:not(.custom-dropdown__native) option:focus-visible { outline: 2px solid #a9d9c1; outline-offset: -2px; }
}


.ui-panel,
.card {
  background: var(--ui-panel-background, var(--panel, rgba(255,255,255,.04)));
  border: 1px solid var(--ui-panel-border, var(--border, rgba(255,255,255,.12)));
  border-radius: var(--ui-panel-radius, 16px);
  padding: var(--ui-panel-padding, 18px);
}

.ui-button,
.btn {
  padding: var(--ui-button-padding, 12px 18px);
  border-radius: var(--ui-button-radius, 12px);
  border: 1px solid var(--ui-button-border, var(--border, rgba(255,255,255,.12)));
  background: transparent;
  color: var(--ui-button-text, var(--text, #f2f2f2));
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ui-button--primary,
.btn.primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.btn.disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


.ui-control,
.admin-voice input,
.admin-voice select,
.modal-form__field input,
.modal-form__field select,
.modal-form__field textarea,
.knowledge-library__toolbar input,
.knowledge-library__toolbar select,
.history-toolbar input,
.history-toolbar select,
.history-rename-dialog input,
.field input,
.field select,
.invite-row input,
.invite-row select,
.knowledge-form input,
.knowledge-form select,
.knowledge-form textarea,
.input-row input,
.input-row--stack textarea {
  background: var(--ui-control-background, var(--panel, rgba(255,255,255,.04)));
  border: 1px solid var(--ui-control-border, var(--border, rgba(255,255,255,.12)));
  border-radius: var(--ui-control-radius, 12px);
  padding: var(--ui-control-padding, 10px 12px);
  color: var(--ui-control-text, var(--text, #f2f2f2));
}

.ui-control { width: 100%; min-width: 0; font: inherit; }
.ui-control:focus-visible { outline: 2px solid var(--ui-focus, #a9d9c1); outline-offset: 2px; }
.ui-control:disabled { opacity: .6; cursor: not-allowed; }
.modal-form__field, .admin-voice { --ui-control-radius: 10px; }
.knowledge-library__toolbar, .history-toolbar, .history-rename-dialog { --ui-control-background: #191b1e; }

/* All surfaces share scrollbar paint; component CSS retains overflow and hidden-bar rules. */
* { scrollbar-width: thin; scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track); }
*::-webkit-scrollbar { width: var(--ui-scroll-size); height: var(--ui-scroll-size); }
*::-webkit-scrollbar-track { background: var(--ui-scroll-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: var(--ui-scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--ui-scroll-thumb-hover); }
.ui-scroll { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; }

.custom-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
}

.custom-dropdown__native {
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-dropdown__trigger {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  padding: 11px 38px 11px 12px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-dropdown__trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: translateY(-60%) rotate(45deg);
  transition: transform 0.15s ease;
}

.custom-dropdown.is-open .custom-dropdown__trigger {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.custom-dropdown.is-open .custom-dropdown__trigger::after {
  transform: translateY(-35%) rotate(225deg);
}

.custom-dropdown__trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.custom-dropdown__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0f1014;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0;
  box-sizing: border-box;
}

/* Popovers stay above clipped panels while their position follows the trigger. */
.custom-dropdown__menu[popover] { position: fixed; right: auto; bottom: auto; }
.custom-dropdown__menu::backdrop { background: transparent; pointer-events: none; }

/* Keep topic/select dropdowns compact inside modal forms */
.modal .modal-form .custom-dropdown__menu {
  max-height: 160px;
}

.custom-dropdown.is-open .custom-dropdown__menu {
  display: grid;
  gap: 4px;
}

.custom-dropdown__option {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
  line-height: 1.2;
  padding: 9px 10px;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.custom-dropdown__option:focus-visible { outline: 2px solid #a9d9c1; outline-offset: -2px; background: rgba(255,255,255,.08); }

.custom-dropdown__option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.custom-dropdown__option.is-selected {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

.custom-dropdown__option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}