/* Sary-OS's standard controls: Chat's layout made the site's (owner, 2026-10-30: "use the new chat temaplate as the
   standard for all buttons, effort meters, model choice etc across the whole site"; "the tool bar in chat needs to be
   consisetent across the entire site", both its header and its composer; "use the same file manager layout across teh
   whole site", a new one in Chat's style). Request 644.

   The values are Chat's (public/chat-layout.css, request 643). Every tool builds from these tokens and classes:
     --ss-*            colours, Dark by default, Light under html.light-mode only (the plain white page)
     --ss-surface-*    the big surfaces; thinned under the menu's Translucent (body without .portal-solid)
     .ss-pill          a flat round pill (a mode, a filter); .is-on / [aria-pressed="true"] when chosen
     .ss-icon-btn      a round icon button; .ss-icon-btn.ss-ring adds the outline the header's ⋯ has
     .ss-primary       the filled white (Light: black) action; .ss-secondary the outlined one
     .ss-pop           a popover; .ss-menu-item its rows; .ss-menu-title a small heading inside
     .ss-header        a tool's title bar: .ss-header-main (.ss-title, .ss-meta) and .ss-header-actions
   Nothing here talks to the network or changes what a control does. Social (#ind-tool-social-overlay) and Support
   (#saryos-support) name their own parts ss-* (ss-pill, ss-title, ss-meta...), so none of these rules reach inside them. */
:root {
  --ss-bg: #09090b; --ss-side: #18181b; --ss-top: #121214; --ss-card: #222225; --ss-border: #27272b;
  --ss-text: #ededee; --ss-muted: #92929c; --ss-faint: #666670; --ss-button: #fff; --ss-button-text: #161618;
  --ss-danger: #f87171; --ss-pill-h: 34px; --ss-radius-pop: 10px; --ss-radius-row: 7px;
  --ss-font: Arial, Helvetica, sans-serif;
}
/* Light means the plain white page only (html.light-mode: Light with the wallpaper None). Light over a wallpaper or
   the menu's Default keeps the site's glass look, white letters on the wallpaper as Code Lab and the top bar have it
   (liquid-glass.js keeps theme-contrast-dark there), so these keep Dark's colours (owner, 2026-10-30: "chat background
   and side bar should match code lab background, right now its too pale"; "the tool bar should match top tool bar in
   aurura"). Translucent: the page is clear over the wallpaper and the side and top bars take the top bar's wash. */
:root.light-mode {
  --ss-bg: #fafafa; --ss-side: #f0f0f2; --ss-top: #f5f5f6; --ss-card: #e5e5e9; --ss-border: #d7d7dc;
  --ss-text: #202024; --ss-muted: #6b6b75; --ss-faint: #7c7c87; --ss-button: #202024; --ss-button-text: #fff;
  --ss-danger: #dc2626;
}
:root { --ss-surface-bg: var(--ss-bg); --ss-surface-side: var(--ss-side); --ss-surface-top: var(--ss-top); --ss-surface-blur: none; }
/* Over a wallpaper the outlines and grey letters are white tints, so pills and keys read on Aurora's colours
   (owner, 2026-10-30: "in auraro mode its not very clear the buttons etc"). */
:root:not(.light-mode) body:not(.portal-solid) { --ss-muted: rgba(255, 255, 255, .82); --ss-faint: rgba(255, 255, 255, .62); --ss-border: rgba(255, 255, 255, .26); --ss-card: rgba(255, 255, 255, .14); }
:root body:not(.portal-solid) { --ss-surface-bg: rgba(0, 0, 0, .1); --ss-surface-side: rgba(0, 0, 0, .32); --ss-surface-top: rgba(0, 0, 0, .32); --ss-surface-blur: blur(24px) saturate(1.8); }
:root.light-mode body:not(.portal-solid) { --ss-surface-bg: rgba(250, 250, 250, .6); --ss-surface-side: rgba(240, 240, 242, .72); --ss-surface-top: rgba(245, 245, 246, .64); }

/* ------------------------------------------------------------------ controls
   Two id weights and !important: the tools' own rules and the glass skin paint buttons with id-weighted rules. */
:root:root body:is(*, #ss):is(*, #ss) .ss-pill:not(#ind-tool-social-overlay *, #saryos-support *) {
  height: var(--ss-pill-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px !important; margin: 0;
  border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; background-image: none !important;
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 12px/1 var(--ss-font) !important; white-space: nowrap;
  box-shadow: none !important; cursor: pointer; min-height: 0 !important; min-width: 0 !important; filter: none !important; animation: none !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-pill:not(#ind-tool-social-overlay *, #saryos-support *):hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-pill:not(#ind-tool-social-overlay *, #saryos-support *):is(.is-on, .active, [aria-pressed="true"], [aria-checked="true"]) { border-color: var(--ss-text) !important; background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-pill:not(#ind-tool-social-overlay *, #saryos-support *) :is(i, svg, span, strong) { color: inherit !important; -webkit-text-fill-color: currentColor !important; }

:root:root body:is(*, #ss):is(*, #ss) .ss-icon-btn:not(#ind-tool-social-overlay *, #saryos-support *) {
  width: var(--ss-pill-h); height: var(--ss-pill-h); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; color: var(--ss-muted) !important;
  box-shadow: none !important; cursor: pointer; min-height: 0 !important; min-width: 0 !important; filter: none !important; animation: none !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-icon-btn.ss-ring:not(#ind-tool-social-overlay *, #saryos-support *) { border: 1px solid var(--ss-border) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-icon-btn:not(#ind-tool-social-overlay *, #saryos-support *):is(:hover, .is-open, [aria-expanded="true"]) { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-icon-btn:not(#ind-tool-social-overlay *, #saryos-support *) :is(i, svg) { color: inherit !important; -webkit-text-fill-color: currentColor !important; }

:root:root body:is(*, #ss):is(*, #ss) :is(.ss-primary, .ss-secondary):not(#ind-tool-social-overlay *, #saryos-support *) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0 !important; height: auto; padding: 9px 16px !important;
  border-radius: 999px !important; font: 500 13px/1.2 var(--ss-font) !important; cursor: pointer; box-shadow: none !important; filter: none !important; animation: none !important;
  background-image: none !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-primary:not(#ind-tool-social-overlay *, #saryos-support *) { background: var(--ss-button) !important; color: var(--ss-button-text) !important; -webkit-text-fill-color: currentColor !important; border: 0 !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-primary:not(#ind-tool-social-overlay *, #saryos-support *):not(:disabled):hover { opacity: .88; }
:root:root body:is(*, #ss):is(*, #ss) .ss-secondary:not(#ind-tool-social-overlay *, #saryos-support *) { background: transparent !important; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid var(--ss-border) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-secondary:not(#ind-tool-social-overlay *, #saryos-support *):not(:disabled):hover { background: var(--ss-card) !important; }
:root:root body:is(*, #ss):is(*, #ss) :is(.ss-primary, .ss-secondary, .ss-pill, .ss-icon-btn):not(#ind-tool-social-overlay *, #saryos-support *):disabled { opacity: .4; cursor: default; }

/* ------------------------------------------------------------------ popovers */
:root:root body:is(*, #ss):is(*, #ss) .ss-pop:not(#ind-tool-social-overlay *, #saryos-support *) {
  padding: 6px; border: 1px solid var(--ss-border) !important; background: var(--ss-side) !important; background-image: none !important; color: var(--ss-text) !important;
  box-shadow: 0 8px 25px #0003 !important; border-radius: var(--ss-radius-pop) !important; z-index: 100500; font: 12px var(--ss-font);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-pop:not(#ind-tool-social-overlay *, #saryos-support *)[hidden] { display: none !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-pop:not(#ind-tool-social-overlay *, #saryos-support *) hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--ss-border); }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-title:not(#ind-tool-social-overlay *, #saryos-support *) { display: block; margin: 4px 6px 8px; color: var(--ss-muted) !important; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *) {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px !important; margin: 0; border: 0 !important; border-radius: var(--ss-radius-row) !important;
  background: none !important; background-image: none !important; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; text-align: left;
  font: 13px/1.3 var(--ss-font) !important; cursor: pointer; box-shadow: none !important; min-height: 0 !important; justify-content: flex-start !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *):hover { background: var(--ss-card) !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *) :is(i, svg) { color: var(--ss-muted) !important; width: 16px; text-align: center; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *) small { margin-left: auto; color: var(--ss-faint) !important; font-size: 11px; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *):is(.selected, [aria-checked="true"], [aria-pressed="true"], .active) { font-weight: 600 !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *):is(.selected, [aria-checked="true"], [aria-pressed="true"], .active)::after { content: '✓'; margin-left: auto; color: var(--ss-text); font-weight: 400; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item:not(#ind-tool-social-overlay *, #saryos-support *):disabled { opacity: .45; cursor: default; background: none !important; }
:root:root body:is(*, #ss):is(*, #ss) .ss-menu-item.danger:not(:disabled) { color: var(--ss-danger) !important; }

/* -------------------------------------------------------------------- header */
:root:root body:is(*, #ss):is(*, #ss) .ss-header:not(#ind-tool-social-overlay *, #saryos-support *) {
  min-height: 63px; display: flex; align-items: center; gap: 8px; padding: 0 15px; box-sizing: border-box; flex-shrink: 0;
  background: var(--ss-surface-top) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--ss-border) !important;
  box-shadow: none !important; color: var(--ss-text); backdrop-filter: var(--ss-surface-blur) !important; -webkit-backdrop-filter: var(--ss-surface-blur) !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-header-main:not(#ind-tool-social-overlay *, #saryos-support *) { min-width: 0; flex: 1 1 auto; padding-left: 6px; }
:root:root body:is(*, #ss):is(*, #ss) .ss-title:not(#ind-tool-social-overlay *, #saryos-support *) {
  margin: 0 0 2px; font: 500 16px/1.3 var(--ss-font) !important; letter-spacing: -.3px; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; background: none !important; text-transform: none !important;
}
:root:root body:is(*, #ss):is(*, #ss) .ss-meta:not(#ind-tool-social-overlay *, #saryos-support *) { margin: 0; font: 12px/1.3 var(--ss-font) !important; color: var(--ss-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
:root:root body:is(*, #ss):is(*, #ss) .ss-header-actions:not(#ind-tool-social-overlay *, #saryos-support *) { display: flex; align-items: center; gap: 6px; margin-left: auto; position: relative; flex-shrink: 0; }

/* ------------------------------------------------- model menu and effort meter
   public/saryos-standard.js draws these over a tool's own <select> or slider, which stays in the page, hidden. */
.ss-native-hidden { display: none !important; }
.ss-control { position: relative; flex: 0 0 auto; min-width: 0; }
.ss-trigger strong { font: 12px/1 var(--ss-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ss-control-model .ss-trigger strong { font-weight: 600; }
.ss-trigger .asksary-composer-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ss-control-model .ss-trigger .asksary-composer-icon { width: 15px; height: 15px; }
body > .ss-control-menu { position: fixed; min-width: 210px; max-height: min(60vh, 460px); overflow-y: auto; }
/* A tool's own hidden state always wins over the shapes above (they set display at two id weights). */
:root:root body:is(*, #ss):is(*, #ss):is(*, #ss) :is(.ss-pill, .ss-icon-btn, .ss-primary, .ss-secondary, .ss-menu-item):not(#ind-tool-social-overlay *, #saryos-support *):is([hidden], .hidden) { display: none !important; }