/* Shared assistant, themed by the page it stands on.
   These were fixed greys, on the reasoning that self-contained colours work
   everywhere. True in the sense that they never break; false in the sense that
   they never match. Infrastructure is blue (#4F9BFF on #0a1322) and
   Cybersecurity is amber (#FBBF24 on #1a1408), and the card stayed the same
   blue-grey on both — which is what made it read as something bolted on rather
   than part of the page.
   Every value now derives from the page's own tokens, with the previous
   constant as the fallback, so a page that defines none of them looks exactly
   as it did before. */
:is(#ai-fab, #ai-panel, #ai-voice) {
  --assistant-accent: var(--cyan, var(--acc, #5eead4));
  /* One rgb triple drives every hairline and tint, exactly as the division
     pages do it: --division-line is rgb(var(--pearl-rgb) / 0.12). */
  --av-fg-rgb: var(--pearl-rgb, 232 251 246);
  --fg: var(--pearl, #f2f6fa);
  --fg2: rgb(var(--av-fg-rgb) / 0.74);
  --fg3: rgb(var(--av-fg-rgb) / 0.56);
  --hud: rgb(var(--av-fg-rgb) / 0.12);
  /* 0.32 and 0.07 are not arbitrary: they are what the division language
     control settled on after a 0.12 border "read as empty space and was
     reported missing twice". */
  --av-edge: rgb(var(--av-fg-rgb) / 0.32);
  --av-fill: rgb(var(--av-fg-rgb) / 0.07);
  --surface2: var(--panel, #101e2b);
  --bg0: var(--ink, #09131d);
  --bg1: var(--panel, #0d1823);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--fg);
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] :is(#ai-fab, #ai-panel, #ai-voice) { font-family: 'IBM Plex Sans Arabic', sans-serif; }
:is(#ai-panel, #ai-voice) *, #ai-fab * { box-sizing: border-box; }
:is(#ai-fab, #ai-panel, #ai-voice)[hidden], :is(#ai-panel, #ai-voice) [hidden] { display: none !important; }
:is(#ai-fab, #ai-panel button, #ai-panel input, #ai-voice button, #ai-voice input):focus-visible {
  outline: 2px solid var(--assistant-accent); outline-offset: 4px;
}
#ai-fab {
  inset: auto;
  inset-inline-end: max(20px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: auto; height: 56px; min-width: 146px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 8px 19px 8px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--assistant-accent) 35%, #354557);
  background: linear-gradient(140deg, #1c3040, #101b28 80%);
  box-shadow: 0 8px 30px #0005, inset 0 1px #ffffff0f;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease;
}
#ai-fab::after { display: none; }
#ai-fab .ai-fab-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--assistant-accent); }
#ai-fab svg { width: 24px; height: 24px; }
#ai-fab .ai-fab-label {
  position: static; inset: auto; transform: none; padding: 0; border: 0;
  background: none; backdrop-filter: none; opacity: 1; color: #f2f6fa;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none; pointer-events: none;
}
#ai-fab.is-menu-covered { visibility: hidden; opacity: 0; pointer-events: none; }
@media (hover: hover) { #ai-fab:hover { transform: translateY(-3px); border-color: var(--assistant-accent); } }
#ai-fab:active { transform: scale(.97); }

/* Native dialogs contain keyboard focus and make the page behind them inert. */
:is(#ai-panel, #ai-voice) {
  margin: 0; padding: 0; border: 0; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  background: transparent; overflow: hidden; pointer-events: auto;
}
:is(#ai-panel, #ai-voice)::backdrop { background: #030a13a6; backdrop-filter: blur(6px); }
#ai-panel .ai-scrim { background: transparent; }
#ai-panel .ai-console {
  inset-inline-end: 24px; bottom: 24px;
  width: min(420px, calc(100vw - 48px)); height: min(660px, calc(100dvh - 48px));
  border: 1px solid #344555; border-radius: 24px;
  background: linear-gradient(160deg, #152636 0%, #0c1824 60%);
  box-shadow: 0 24px 100px #0009, inset 0 1px #ffffff08;
  transition: transform .22s ease, opacity .22s ease;
}
#ai-panel .ai-head { padding: 20px 16px 18px 22px; gap: 8px; border-bottom: 1px solid #ffffff0d; }
#ai-panel .ai-head-id { gap: 12px; min-width: 0; }
/* The ATCL icon (white mark on alpha) in place of the old "A·" text monogram. */
.ai-monogram { display: block; flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
#ai-panel .ai-title { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
#ai-panel .ai-status { font: inherit; font-size: 12px; line-height: 1.55; letter-spacing: 0; color: var(--fg3); margin-top: 3px; }
:is(#ai-panel, #ai-voice) .ai-close {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 11px; border: 1px solid #ffffff12; border-radius: 50%; color: var(--fg2); background: #ffffff04; cursor: pointer;
}
:is(#ai-panel, #ai-voice) .ai-close svg { width: 20px; height: 20px; }
.ai-voice-entry { padding: 16px 20px 4px; }
.ai-voice-entry:has([hidden]) { display: none; }
#ai-panel .ai-mic {
  width: 100%; height: auto; min-height: 76px; padding: 14px; margin: 0;
  display: flex; align-items: center; gap: 13px; text-align: start;
  border: 1px solid color-mix(in srgb, var(--assistant-accent) 30%, #273c4a);
  border-radius: 16px; background: color-mix(in srgb, var(--assistant-accent) 7%, #132333);
  color: var(--fg); cursor: pointer; box-shadow: inset 0 1px #ffffff05;
  transition: background .2s ease, border-color .2s ease;
}
#ai-panel .ai-mic:hover { border-color: var(--assistant-accent); background: color-mix(in srgb, var(--assistant-accent) 12%, #132333); }
.ai-mic-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; background: var(--assistant-accent); color: #091923; border-radius: 13px; box-shadow: 0 4px 16px #0002; }
.ai-mic-icon svg { width: 22px; height: 22px; }
.ai-mic-copy { display: grid; gap: 4px; }
.ai-mic-copy strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ai-mic-copy > span { color: var(--fg2); font-size: 12px; line-height: 1.4; }
.ai-mic-arrow { margin-inline-start: auto; color: var(--assistant-accent); font-size: 21px; }
[dir="rtl"] .ai-mic-arrow { transform: scaleX(-1); }
#ai-panel .ai-log { padding: 22px 20px; min-height: 0; flex: 1; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #35485a transparent; }
#ai-panel .ai-msg { margin-bottom: 14px; }
#ai-panel .ai-bubble { font: inherit; font-size: 15px; line-height: 1.75; max-width: 94%; border-radius: 16px; padding: 13px 16px; overflow-wrap: anywhere; }
#ai-panel .ai-msg--assistant .ai-bubble { background: #ffffff05; color: var(--fg2); border: 1px solid #ffffff0d; }
#ai-panel .ai-msg--user .ai-bubble { color: #eaf8ff; background: color-mix(in srgb, var(--assistant-accent) 13%, #172738); border-color: color-mix(in srgb, var(--assistant-accent) 22%, transparent); }
#ai-panel .ai-form { padding: 10px; margin: 0 20px; gap: 8px; border: 1px solid #344857; border-radius: 17px; background: #081420; }
#ai-panel .ai-form:focus-within { border-color: var(--assistant-accent); }
#ai-panel .ai-input { min-width: 0; width: 100%; padding: 0 4px; height: 44px; background: transparent; border: 0; box-shadow: none; border-radius: 4px; color: var(--fg); font: inherit; font-size: 16px; }
#ai-panel .ai-input::placeholder { color: #8f9dad; }
#ai-panel .ai-send { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; color: #081923; background: var(--assistant-accent); font-size: 23px; }
#ai-panel .ai-foot { padding: 14px 20px 20px; font: inherit; font-size: 10px; line-height: 1.5; letter-spacing: 0; color: var(--fg3); text-align: center; border: 0; }
#ai-panel .ai-foot a { color: var(--fg2); }

#ai-voice { display: grid; place-items: center; backdrop-filter: none; transition: opacity .2s ease; }
#ai-voice .av-stage {
  width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding: 18px 28px 24px;
  border: 1px solid #344555; border-radius: 28px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--assistant-accent) 8%, #122231), #0c1824 65%);
  box-shadow: 0 30px 100px #0008; transition: transform .22s ease;
}
.av-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
#ai-voice .av-brand { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--fg2); }
/* The circle takes the space the control card used to: 220px of stacked chrome
   on a phone became one 44px row, so the spectrum can finally be read. */
#ai-voice .av-orbit { flex: 0 0 auto; width: min(280px, 68vw); height: min(280px, 68vw); margin: -8px 0 -14px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--assistant-accent); }
#ai-voice .av-canvas { position: absolute; inset: 0; }
.av-mic-symbol { position: relative; width: 34px; height: 34px; filter: drop-shadow(0 0 14px #0008); }
#ai-voice .av-state { text-align: center; font-size: 24px; font-weight: 550; line-height: 1.3; letter-spacing: -.02em; text-transform: none; }
#ai-voice .av-caption { color: var(--fg2); font-size: 15px; line-height: 1.65; min-height: 48px; max-height: 150px; overflow-y: auto; overflow-wrap: anywhere; }
/* The controls keep their own 44px chrome inside the dialog; only End is wide,
   because with a live microphone the way out should never be hunted for. */
#ai-voice .av-controls { flex-shrink: 0; }
#ai-voice :is(.av-close, .av-retry) {
  position: static; inset: auto; width: 100%; height: auto; min-height: 48px; padding: 11px 12px;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--hud);
  border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0;
  color: var(--fg2); background: var(--av-fill); cursor: pointer; flex-shrink: 0;
}
#ai-voice .av-close { border-color: #91435366; color: #ffbec6; background: #5c26353d; }
#ai-voice .av-retry { background: var(--assistant-accent); border-color: transparent; color: var(--bg0); }
#ai-voice :is(.av-docs, .av-num) { width: 100%; margin-top: 0; flex-shrink: 0; }
#ai-voice .av-num-input { min-width: 0; width: 100%; height: 48px; font-size: 16px; }
#ai-voice .av-num-go { min-height: 48px; font-size: 14px; }
#ai-voice.is-inplace { opacity: 0; pointer-events: none; visibility: hidden; }
.cc-meta :is(#av-retry, #av-text) {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center;
  position: static; min-height: 44px; margin: 10px 4px 0; padding: 10px 16px;
  border: 1px solid #344656; border-radius: 12px; background: #182837;
  color: #edf6ff; font: inherit; font-size: 13px; line-height: 1.45; cursor: pointer;
}
.cc-meta #av-retry { background: var(--cyan, #5eead4); color: #091923; border-color: transparent; }
.cc-meta :is(#av-retry, #av-text)[hidden] { display: none; }
.cc-meta :is(#av-retry, #av-text):focus-visible { outline: 2px solid var(--cyan, #5eead4); outline-offset: 4px; }
#ai-voice[data-state="blocked"] .av-mic-symbol, #ai-voice[data-state="error"] .av-mic-symbol { color: #ffbec6; }

@media (max-width: 640px) {
  #ai-fab { inset-inline-end: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); height: 52px; min-width: 134px; gap: 7px; }
  #ai-panel { top: var(--assistant-view-top, 0px); bottom: auto; height: var(--assistant-view-height, 100dvh); }
  #ai-panel .ai-console { inset-inline: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: min(690px, calc(100% - 20px)); max-height: calc(100% - 20px); border-radius: 24px; }
  #ai-panel .ai-head { padding: 16px 12px 14px 16px; }
  #ai-panel .ai-status { font-size: 11px; }
  .ai-voice-entry { padding: 14px 16px 0; }
  #ai-panel .ai-log { padding: 18px 16px; }
  #ai-panel .ai-form { margin-inline: 14px; }
  #ai-panel .ai-foot { padding-bottom: 16px; }
  #ai-voice { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  #ai-voice .av-stage { width: 100%; max-height: 100%; border-radius: 24px; padding: 16px 22px 22px; gap: 14px; }
  /* 176px was sized around a control card that stacked 220px beneath it. With
     that card gone the circle takes the room back; the spectrum needs it. */
  #ai-voice .av-orbit { width: min(280px, 68vw); height: min(280px, 68vw); }
  #ai-voice .av-state { font-size: 23px; }
}
@media (max-height: 600px) {
  #ai-panel .ai-voice-entry, #ai-panel .ai-foot { display: none; }
  #ai-voice .av-orbit { width: min(150px, 42vh); height: min(150px, 42vh); }
  #ai-voice .av-stage { gap: 10px; }
  #ai-voice .av-caption { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #ai-fab, #ai-panel *, #ai-voice, #ai-voice * { animation: none !important; transition: none !important; }
}

/* While a reply is in flight the composer refuses new messages. Show it:
   silently dropping the text read as a broken Enter key. */
.ai-form.is-busy { opacity: 0.55; }
.ai-form.is-busy .ai-input { cursor: progress; }
.ai-form.is-busy .ai-send { cursor: progress; }

/* The same confirmation and language controls remain usable in both layouts. */
.ai-callback { padding: 12px; border: 1px solid var(--line, #344858); border-radius: 14px; background: #101d29; color: #e8f0f7; }
.ai-callback p { margin: 0 0 8px; overflow-wrap: anywhere; }
.ai-callback button, .av-heard button { min-height: 44px; padding: 8px 12px; margin: 3px; border: 1px solid #526376; border-radius: 10px; color: inherit; background: #203344; font: inherit; cursor: pointer; }
.ai-callback button:disabled { opacity: .5; cursor: wait; }
.ai-callback [data-callback-action="confirm"] { background: #a78bfa; color: #100c21; }
.ai-callback [data-callback-action="cancel"] { color: #ffbdc7; }
.ai-callback button:focus-visible, .av-heard button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
#ai-callback { margin: 8px 16px; max-height: 190px; overflow-y: auto; flex-shrink: 0; }
.av-heard { padding: 10px; border: 1px solid #344858; border-radius: 12px; width: 100%; box-sizing: border-box; color: #d6e3ee; background: #101d29; }
.av-heard p { margin: 6px 0; max-height: 60px; overflow-y: auto; overflow-wrap: anywhere; }
.av-heard strong { font-size: 12px; }
#av-num-error { margin: 6px 0 0; color: #ffbdc7; font: 13px/1.5 sans-serif; }
#av-num-error:empty { display: none; }
#av-num-input[aria-invalid="true"] { border-color: #ff8499; }
/* Moved under the ecosystem core during a desktop call, the controls leave the
   #ai-voice subtree and would lose its tokens; re-declare only those. */
.cc-meta {
  --assistant-accent: var(--cyan, var(--acc, #5eead4));
  --av-fg-rgb: var(--pearl-rgb, 232 251 246);
  --hud: rgb(var(--av-fg-rgb) / 0.12);
  --av-edge: rgb(var(--av-fg-rgb) / 0.32);
  --av-fill: rgb(var(--av-fg-rgb) / 0.07);
}
.cc-meta :is(#av-lang, .av-controls, .av-heard, .ai-callback) { pointer-events: auto; }
.cc-meta :is(.av-heard, .ai-callback) { width: min(100%, 380px); }
@media (min-width: 1081px) {
  #hub.is-conversing #cst-stepper { visibility: hidden; }
  #hub.is-conversing .cst-center { z-index: 8; }
  /* The card only earns its borders when it holds something: a transcript to
     correct, a number to type, a document. With just the control row it is a
     row, and the diagram stays visible behind it. */
  #hub.is-conversing .cc-meta {
    width: min(380px, 34vw); box-sizing: border-box; padding: 0;
    max-height: calc(50dvh - var(--core-d, 150px) / 2 - 38px);
    overflow-y: auto; overscroll-behavior: contain; pointer-events: none;
    border: 1px solid transparent; border-radius: 20px; background: transparent;
    scrollbar-width: thin; transition: background 220ms, border-color 220ms, padding 220ms;
  }
  #hub.is-conversing .cc-meta.has-context {
    padding: 14px; pointer-events: auto;
    border-color: var(--hud, #344858); background: var(--bg1, #101d29f5);
    box-shadow: 0 18px 60px #0006;
  }
  #hub.is-conversing .cc-meta > * { max-width: 100%; }
  /* Beneath the core: a single chip on its own line, and the row only while it
     is open — the three buttons no longer sit permanently under the diagram. */
  /* One 44px row beneath the core, not a card. The panel it replaces measured
     380x372 against a 188px core — four times the area of the thing the visitor
     is meant to be watching, and it covered the constellation. */
  .cc-meta .av-controls { margin: 12px 0 0; }
  .cc-meta .av-lang-opts { bottom: auto; top: calc(100% + 10px); }
}
html[lang="ar"] .cd-title, html[lang="ar"] .cd-lead, html[lang="ar"] .cd-summary { letter-spacing: normal; }