/* AskSary control icon system
   Neutral by default; accent and status colour belong to explicit state. */
:root {
  --ui-icon-ink: #111318;
  --ui-icon-ink-muted: #34383f;
  --ui-icon-surface: rgba(255, 255, 255, .88);
  --ui-icon-surface-hover: #ffffff;
  --ui-icon-border: rgba(17, 19, 24, .14);
  --ui-icon-border-hover: rgba(17, 19, 24, .28);
  --ui-icon-shadow: 0 1px 2px rgba(17, 19, 24, .08), 0 5px 14px rgba(17, 19, 24, .06);
  --ui-icon-shadow-hover: 0 2px 4px rgba(17, 19, 24, .10), 0 8px 18px rgba(17, 19, 24, .09);
  --ui-icon-size: 36px;
  --ui-icon-size-compact: 30px;
  --ui-icon-glyph-size: 15px;
  --ui-icon-radius: 10px;
  --ui-icon-radius-compact: 8px;
  --ui-icon-transition: color .16s ease, background-color .16s ease,
    border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

html:not(.light-mode) {
  --ui-icon-ink: #f5f5f4;
  --ui-icon-ink-muted: #d6d6d3;
  --ui-icon-surface: rgba(17, 19, 24, .82);
  --ui-icon-surface-hover: rgba(28, 31, 37, .96);
  --ui-icon-border: rgba(255, 255, 255, .15);
  --ui-icon-border-hover: rgba(255, 255, 255, .28);
  --ui-icon-shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 5px 14px rgba(0, 0, 0, .18);
  --ui-icon-shadow-hover: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 18px rgba(0, 0, 0, .22);
}

/* Reusable primitive for new controls. Existing controls are adapted below. */
.icon-control,
html body :is(
  .header-icon-btn,
  .history-icon-btn,
  .gvs-icon-btn,
  .cl-icon-btn,
  .mv2-icon-btn,
  .mobile-sidebar-rail-btn,
  .tips-unpin-btn,
  .tab-close-btn,
  .notepad-close-btn,
  .prompt-close-btn,
  .speech-close-btn,
  .us-close-btn,
  .dg-close,
  .visual-close,
  .modeler-close,
  .org-modal-close,
  .orb-close-btn,
  #close-sidebar,
  #search-close-btn,
  #close-settings-btn,
  #close-tracker,
  #close-agents-btn,
  #close-cmd-btn,
  #img-flow-close,
  #notepad-tts-close,
  #coding-lab-search-prev,
  #coding-lab-search-next,
  #coding-lab-search-close,
  #quick-speech-lang-btn
) {
  box-sizing: border-box !important;
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--ui-icon-size) !important;
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface) !important;
  border: 1px solid var(--ui-icon-border) !important;
  border-radius: var(--ui-icon-radius) !important;
  box-shadow: var(--ui-icon-shadow) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: var(--ui-icon-transition) !important;
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}

/* Catch dynamically mounted controls only when their markup explicitly says
   they are icon-only. CSS :only-child ignores text nodes, so it cannot safely
   infer this contract for buttons such as "Upload" or "Create Organisation". */
html body button.icon-only,
html body button.icon[aria-label],
html body button[data-close][aria-label],
html body button[class*="icon-btn"]:not(.primary):not(.danger):not(.delete),
html body button[class$="-close"][aria-label],
html body button[class*="-close "][aria-label],
html body button[id$="-close"][aria-label],
html body button[id*="-close-"][aria-label] {
  box-sizing: border-box !important;
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--ui-icon-size) !important;
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface) !important;
  border: 1px solid var(--ui-icon-border) !important;
  border-radius: var(--ui-icon-radius) !important;
  box-shadow: var(--ui-icon-shadow) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transition: var(--ui-icon-transition) !important;
}

html body button.icon-only:hover,
html body button.icon[aria-label]:hover,
html body button[data-close][aria-label]:hover,
html body button[class*="icon-btn"]:not(.primary):not(.danger):not(.delete):hover,
html body button[class$="-close"][aria-label]:hover,
html body button[class*="-close "][aria-label]:hover,
html body button[id$="-close"][aria-label]:hover,
html body button[id*="-close-"][aria-label]:hover {
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface-hover) !important;
  border-color: var(--ui-icon-border-hover) !important;
  box-shadow: var(--ui-icon-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

html body button.icon-only > :is(i, svg),
html body button.icon[aria-label] > :is(i, svg),
html body button[data-close][aria-label] > :is(i, svg),
html body button[class*="icon-btn"]:not(.primary):not(.danger):not(.delete) :is(i, svg),
html body :is(button[class$="-close"][aria-label], button[class*="-close "][aria-label], button[id$="-close"][aria-label], button[id*="-close-"][aria-label]) :is(i, svg) {
  width: var(--ui-icon-glyph-size) !important;
  min-width: var(--ui-icon-glyph-size) !important;
  height: var(--ui-icon-glyph-size) !important;
  font-size: var(--ui-icon-glyph-size) !important;
  color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.icon-control:hover,
html body :is(
  .header-icon-btn,
  .history-icon-btn,
  .gvs-icon-btn,
  .cl-icon-btn,
  .mv2-icon-btn,
  .mobile-sidebar-rail-btn,
  .tips-unpin-btn,
  .tab-close-btn,
  .notepad-close-btn,
  .prompt-close-btn,
  .speech-close-btn,
  .us-close-btn,
  .dg-close,
  .visual-close,
  .modeler-close,
  .org-modal-close,
  .orb-close-btn,
  #close-sidebar,
  #search-close-btn,
  #close-settings-btn,
  #close-tracker,
  #close-agents-btn,
  #close-cmd-btn,
  #img-flow-close,
  #notepad-tts-close,
  #coding-lab-search-prev,
  #coding-lab-search-next,
  #coding-lab-search-close,
  #quick-speech-lang-btn
):hover {
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface-hover) !important;
  border-color: var(--ui-icon-border-hover) !important;
  box-shadow: var(--ui-icon-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.icon-control:active,
html body :is(
  .header-icon-btn,
  .history-icon-btn,
  .gvs-icon-btn,
  .cl-icon-btn,
  .mv2-icon-btn,
  .mobile-sidebar-rail-btn,
  .tips-unpin-btn,
  .tab-close-btn,
  .notepad-close-btn,
  .prompt-close-btn,
  .speech-close-btn,
  .us-close-btn,
  .dg-close,
  .visual-close,
  .modeler-close,
  .org-modal-close,
  .orb-close-btn,
  #close-sidebar,
  #search-close-btn,
  #close-settings-btn,
  #close-tracker,
  #close-agents-btn,
  #close-cmd-btn,
  #img-flow-close,
  #notepad-tts-close,
  #coding-lab-search-prev,
  #coding-lab-search-next,
  #coding-lab-search-close,
  #quick-speech-lang-btn
):active {
  transform: translateY(0) scale(.97) !important;
  box-shadow: 0 1px 2px rgba(17, 19, 24, .10) !important;
}

/* One glyph scale and weight across Font Awesome and inline SVG controls. */
.icon-control :is(i, svg),
html body :is(
  .header-icon-btn,
  .history-icon-btn,
  .gvs-icon-btn,
  .cl-icon-btn,
  .mv2-icon-btn,
  .mobile-sidebar-rail-btn,
  .tips-unpin-btn,
  .tab-close-btn,
  .notepad-close-btn,
  .prompt-close-btn,
  .speech-close-btn,
  .us-close-btn,
  .dg-close,
  .visual-close,
  .modeler-close,
  .org-modal-close,
  .orb-close-btn,
  #close-sidebar,
  #search-close-btn,
  #close-settings-btn,
  #close-tracker,
  #close-agents-btn,
  #close-cmd-btn,
  #img-flow-close,
  #notepad-tts-close,
  #coding-lab-search-prev,
  #coding-lab-search-next,
  #coding-lab-search-close,
  #quick-speech-lang-btn
) :is(i, svg) {
  width: var(--ui-icon-glyph-size) !important;
  min-width: var(--ui-icon-glyph-size) !important;
  height: var(--ui-icon-glyph-size) !important;
  font-size: var(--ui-icon-glyph-size) !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Dense row controls use the same geometry at a compact scale. */
html body :is(.history-icon-btn, .tab-close-btn) {
  width: var(--ui-icon-size-compact) !important;
  min-width: var(--ui-icon-size-compact) !important;
  height: var(--ui-icon-size-compact) !important;
  min-height: var(--ui-icon-size-compact) !important;
  flex-basis: var(--ui-icon-size-compact) !important;
  border-radius: var(--ui-icon-radius-compact) !important;
}

/* Header/navigation glyphs are neutral. Active/selected state may opt back in. */
html body .hamburger,
html body .hamburger i,
html body .sidebar .sidebar-btn i,
html body .sidebar .sidebar-search-container .search-icon,
html body #workspace-suite-switch-wrap > i,
html body .workspace-tool > i,
html body #workspace-toolbar-customise i,
html body #quick-actions-toggle i,
html body :is(.tool-btn, .canvas-tool-btn, .control-btn):not(.primary):not(.danger) > i {
  color: var(--ui-icon-ink) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html body :is(.sidebar-btn, .workspace-tool, .tool-btn, .canvas-tool-btn, .control-btn):not(.active):not([aria-pressed="true"]):hover > i {
  color: var(--ui-icon-ink) !important;
}

/* The command-center stylesheet uses two IDs; match that specificity. */
html body #cmd-overlay #close-cmd-btn,
html body #cmd-overlay #close-cmd-btn > i {
  color: var(--ui-icon-ink) !important;
}

/* Labelled controls must keep their label inside the button. These adapters
   cover dense flex toolbars where flex-shrink previously squeezed the box
   down to the icon width. */
html body :is(#gallery-drive-upload, #gallery-drive-cancel) {
  width: max-content !important;
  min-width: max-content !important;
  height: 36px !important;
  min-height: 36px !important;
  padding-inline: 13px !important;
  flex: 0 0 auto !important;
}

html body #lib-filter-row {
  min-width: 0;
  overflow-x: auto;
}

/* Preserve the Gallery cancel button's native hidden contract even when
   legacy button rules set a display mode with !important. */
html body #visual-lib-overlay #lib-filter-row #gallery-drive-cancel[hidden] {
  display: none !important;
}

html body #visual-lib-overlay #lib-filter-row #gallery-drive-cancel:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: max-content !important;
  height: 36px !important;
  padding-inline: 13px !important;
  flex: 0 0 auto !important;
}

html body #welcome-message-card .tips-controls button.tips-dismiss.tips-dismiss {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: max-content !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 8px 16px !important;
  flex: 0 0 auto !important;
}

/* Content-bearing controls may share icon classes with compact controls, but
   they must never inherit a square aspect ratio. */
html body :is(
  .org-btn,
  .fas-btn:not(.icon),
  .bar-btn:not(.icon-only),
  .v-tab,
  .tips-dismiss,
  .gallery-drive-upload,
  .pod-btn
) {
  aspect-ratio: auto !important;
}

html body #lib-context-actions {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

html body #lib-context-actions .bar-btn:not(.icon-only) {
  width: auto !important;
  min-width: max-content !important;
  height: auto !important;
  min-height: 36px !important;
  padding-inline: 12px !important;
  flex: 0 0 auto !important;
}

/* Header action visibility is entitlement-driven. Regenerate remains available
   internally for compatibility, but is intentionally absent from the app UI. */
html body #regenerate-btn {
  display: none !important;
}

html body:not(.logged-in) #controls-header-content #org-btn,
html body #controls-header-content #org-btn:not([data-org-member="true"]) {
  display: none !important;
}

/* Toolbars that already expose icon-only buttons inherit the square primitive. */
html body :is(.tool-btn, .canvas-tool-btn, .control-btn):has(> i:only-child):not(.primary):not(.danger),
html body .sp-toolbar-size button,
html body .sp-toolbar-remove {
  width: var(--ui-icon-size) !important;
  min-width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  min-height: var(--ui-icon-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface) !important;
  border: 1px solid var(--ui-icon-border) !important;
  border-radius: var(--ui-icon-radius) !important;
  box-shadow: var(--ui-icon-shadow) !important;
  transition: var(--ui-icon-transition) !important;
}

/* Composer utilities use the same neutral square; send remains primary. */
html body :is(#mic-btn, #speech-lang-btn) {
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface) !important;
  border: 1px solid var(--ui-icon-border) !important;
  border-radius: var(--ui-icon-radius) !important;
  box-shadow: var(--ui-icon-shadow) !important;
}

html body :is(#mic-btn, #speech-lang-btn):hover {
  color: var(--ui-icon-ink) !important;
  background: var(--ui-icon-surface-hover) !important;
  border-color: var(--ui-icon-border-hover) !important;
  box-shadow: var(--ui-icon-shadow-hover) !important;
}

html body :is(
  .history-icon-btn.pinned,
  .history-icon-btn.pin-chat-btn.pinned,
  .mv2-icon-btn.is-fav,
  button[aria-pressed="true"],
  button[aria-selected="true"]
) {
  color: var(--theme-primary, #4a90e2) !important;
  background: rgba(var(--theme-primary-rgb, 74, 144, 226), .10) !important;
  border-color: rgba(var(--theme-primary-rgb, 74, 144, 226), .38) !important;
}

html body :is(
  .history-icon-btn.delete-chat-btn,
  .sp-toolbar-remove,
  .voice-btn.close,
  .pod-btn.close
):hover {
  color: #c62828 !important;
  background: rgba(198, 40, 40, .10) !important;
  border-color: rgba(198, 40, 40, .34) !important;
}

/* Semantic exceptions: state colour is information, not decoration. */
html body :is(
  .active,
  [aria-pressed="true"],
  [aria-selected="true"],
  .is-active,
  .is-fav,
  .pinned,
  .recording,
  .listening,
  .success,
  .warning,
  .danger,
  .delete,
  .primary,
  #send-btn,
  #discard-btn
) > i {
  color: inherit !important;
}

html body :is(button, [role="button"]):focus-visible {
  outline: 2px solid var(--theme-primary, #4a90e2) !important;
  outline-offset: 2px !important;
}

html body :is(button, [role="button"]):disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Text-and-icon controls can still have a single element child because their
   label is a text node. Keep those suite controls out of the icon-only square
   geometry while retaining the shared glyph treatment. */
html body #suite-panel-overlay button.sp-tier-tab.sp-tier-tab[data-tier]:not(#send-btn),
html body #suite-panel-overlay button.sp-wallet-btn.sp-wallet-btn:not(#send-btn) {
  width: auto !important;
  min-width: max-content !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 7px 9px !important;
  flex: 0 0 auto !important;
  border-radius: 8px !important;
}

html body #suite-panel-overlay button.sp-tier-tab.sp-tier-tab[data-tier]:not(#send-btn) {
  font-size: 10.5px !important;
}

html body #suite-panel-overlay button.sp-wallet-btn.sp-wallet-btn:not(#send-btn) {
  padding-inline: 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}

@media (max-width: 768px) {
  :root {
    --ui-icon-size: 34px;
    --ui-icon-size-compact: 30px;
    --ui-icon-glyph-size: 14px;
    --ui-icon-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-control,
  html body :is(button, [role="button"]) {
    transition-duration: .01ms !important;
  }
}

/* The two black presets use true-black controls. Keep every interactive
   control label white, including legacy controls with inline dark-ink styles.
   This does not affect light themes or ordinary content links. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) body :is(button, [role="button"]) {
  color: #fff !important;
}

html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) body :is(button, [role="button"]) * {
  color: #fff !important;
}

/* Premium control finish -------------------------------------------------
   Existing tools keep their own colours and geometry; this layer gives every
   real control the same physical state language: raised, hovered, pressed,
   selected/on and recessed/off. */
:root {
  --ui-control-depth:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(15,23,42,.10),
    0 1px 1px rgba(15,23,42,.10),
    0 5px 13px rgba(15,23,42,.09);
  --ui-control-depth-hover:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(15,23,42,.12),
    0 2px 2px rgba(15,23,42,.10),
    0 8px 18px rgba(15,23,42,.12);
  --ui-control-depth-pressed:
    inset 0 2px 5px rgba(15,23,42,.20),
    inset 0 -1px 0 rgba(255,255,255,.55),
    0 1px 1px rgba(15,23,42,.08);
  --ui-control-depth-off:
    inset 0 1px 3px rgba(15,23,42,.14),
    0 1px 0 rgba(255,255,255,.55);
  --ui-control-ring: color-mix(in srgb, var(--theme-primary,#7c3aed) 58%, transparent);
}

html:not(.light-mode) {
  --ui-control-depth:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 1px 1px rgba(0,0,0,.55),
    0 5px 14px rgba(0,0,0,.30);
  --ui-control-depth-hover:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.78),
    0 2px 2px rgba(0,0,0,.48),
    0 8px 20px rgba(0,0,0,.34);
  --ui-control-depth-pressed:
    inset 0 3px 7px rgba(0,0,0,.76),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 1px rgba(0,0,0,.42);
  --ui-control-depth-off:
    inset 0 2px 5px rgba(0,0,0,.58),
    0 1px 0 rgba(255,255,255,.05);
}

html body :is(button, [role="button"]):not(.text-link-danger):not(.profile-link-btn) {
  box-shadow: var(--ui-control-depth) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
    box-shadow .16s ease, filter .16s ease, translate .12s ease !important;
  translate: 0 0;
  -webkit-tap-highlight-color: transparent;
}

html body :is(button, [role="button"]):not(:disabled):not(.text-link-danger):not(.profile-link-btn):hover {
  box-shadow: var(--ui-control-depth-hover) !important;
  translate: 0 -1px;
  filter: saturate(1.03) brightness(1.025);
}

html body :is(button, [role="button"]):not(:disabled):not(.text-link-danger):not(.profile-link-btn):active {
  box-shadow: var(--ui-control-depth-pressed) !important;
  translate: 0 1px;
  filter: brightness(.97);
}

html body :is(
  button.active,
  button.selected,
  button.is-active,
  button[aria-pressed="true"],
  button[aria-selected="true"],
  button[data-state="on"],
  [role="button"].active,
  [role="button"].selected,
  [role="button"][aria-pressed="true"],
  [role="button"][aria-selected="true"]
) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px var(--ui-control-ring),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 5px 14px rgba(0,0,0,.18) !important;
}

html body :is(button[aria-pressed="false"],button[aria-selected="false"],button[data-state="off"],[role="button"][aria-pressed="false"]) {
  box-shadow: var(--ui-control-depth-off) !important;
}

html body :is(button, [role="button"]):disabled,
html body :is(button, [role="button"])[aria-disabled="true"] {
  box-shadow: var(--ui-control-depth-off) !important;
  translate: 0 0 !important;
  filter: grayscale(.2) saturate(.55) !important;
}

/* Strong call-to-action controls get a deeper lower edge, while their own
   established brand fill and billing meaning remain untouched. */
html body :is(button.primary,.btn-primary,[data-primary="true"],[data-generate],[data-apply],#send-btn):not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(0,0,0,.23),
    0 2px 2px rgba(0,0,0,.20),
    0 8px 18px rgba(0,0,0,.20) !important;
}

html body :is(button.primary,.btn-primary,[data-primary="true"],[data-generate],[data-apply],#send-btn):not(:disabled):active {
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.30),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 1px 1px rgba(0,0,0,.18) !important;
}

/* Serenity remains colour-free and intentionally flatter: a restrained inset
   emboss communicates state without reintroducing the glow the preset avoids. */
html.theme-stealth:not(.light-mode) body :is(button,[role="button"]):not(.text-link-danger):not(.profile-link-btn) {
  filter:grayscale(1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.9) !important;
}
html.theme-stealth:not(.light-mode) body :is(button,[role="button"]):not(:disabled):active {
  box-shadow:inset 0 3px 7px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.06) !important;
}
html.theme-stealth:not(.light-mode) body :is(button.active,button.selected,button.is-active,button[aria-pressed="true"],button[aria-selected="true"],[role="button"].active,[role="button"][aria-pressed="true"]) {
  border-color:#8a8a8a !important;
  outline-color:#a3a3a3 !important;
  box-shadow:inset 0 0 0 1px #707070,inset 0 2px 5px rgba(0,0,0,.88) !important;
}