/* Aikarthya brand theme for the Agent guest app (plan Task 8).
   Loaded AFTER upstream stylesheets (boot.html for the canvas side,
   panel.html for the agent panel), so same-specificity rules win.
   Palette + fonts: aikarthya-docs/brand/ (teal #00A3CE primary, navy
   #13203C text, gold #FBA211 accent-only, cream #F0F0E7 surfaces,
   soft blue #4F79C3 secondary; Poppins headings / Montserrat labels).
   Fonts use local stacks — the guest must never network-fetch fonts. */

:root {
  --aik-teal: #00a3ce;
  --aik-teal-soft: rgba(0, 163, 206, 0.16);
  --aik-navy: #13203c;
  --aik-navy-soft: rgba(19, 32, 60, 0.08);
  --aik-gold: #fba211;
  --aik-cream: #f0f0e7;
  --aik-blue: #4f79c3;
  --aik-font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --aik-font-label: "Montserrat", "Segoe UI", system-ui, sans-serif;

  /* Framework semantic tokens (framework/css/colors.css is dark-only) —
     re-pointed at the Aikarthya palette so every accent, focus ring,
     selection, and glow across the guest app picks up the brand.
     Canvas stays deep (dark theme), tinted navy instead of near-black. */
  --color-canvas: #0a1020;
  --color-canvas-elevated: #101a30;
  --color-canvas-deep: #060b16;
  --color-surface-1: #14203a;
  --color-surface-2: #1a2947;
  --color-surface-3: #21324f;
  --color-surface-glass: rgba(16, 26, 48, 0.82);
  --color-accent-primary: var(--aik-teal);
  --color-accent-primary-strong: #33b8dc;
  --color-accent-primary-soft: var(--aik-teal-soft);
  --color-accent-secondary: var(--aik-blue);
  --color-accent-ink: #04101d;
  --color-backdrop-glow-primary: rgba(0, 163, 206, 0.18);
  --color-backdrop-glow-secondary: rgba(79, 121, 195, 0.16);
  --color-backdrop-glow-depth: rgba(19, 32, 60, 0.4);
  --color-backdrop-star-accent: rgba(0, 163, 206, 0.48);
  --color-backdrop-star-halo-accent: rgba(0, 163, 206, 0.16);
}

/* Managed LLM settings: provider/endpoint/key are owned by the agent-llm
   edge, so those controls are hidden — only the model name, token budget,
   and params stay editable. :has() is fine here (Chromium webview host).
   The Local provider panel rides on the hidden switch's x-show wrapper. */
.onscreen-agent-provider-switch,
#onscreen-agent-settings-dialog .field:has(input[type="url"]),
#onscreen-agent-settings-dialog .field:has(input[type="password"]) {
  display: none !important;
}

/* Owl mascot: keep the whole illustration visible in circular frames.
   The source PNG is already background-transparent — never paint a backdrop
   behind it (a light square reads as an un-removed background on the dark
   canvas). */
.onscreen-agent-avatar-button img,
.agent-page-avatar-image {
  object-fit: contain;
}

/* ---- Onscreen agent panel chrome ---- */

.onscreen-agent-shell {
  font-family: var(--aik-font-label);
}

.onscreen-agent-composer textarea:focus,
.onscreen-agent-settings-dialog input:focus,
.onscreen-agent-settings-dialog select:focus,
.onscreen-agent-settings-dialog textarea:focus {
  outline-color: var(--aik-teal);
}

.onscreen-agent-send-button {
  color: var(--aik-teal);
}

.onscreen-agent-send-button:hover {
  color: var(--aik-navy);
}

.onscreen-agent-set-api-key-button {
  color: var(--aik-teal);
  border-color: var(--aik-teal);
}

.onscreen-agent-avatar-button:hover .onscreen-agent-avatar-orbit {
  border-color: var(--aik-teal);
}

.onscreen-agent-model-button,
.onscreen-agent-inline-button {
  font-family: var(--aik-font-label);
}

.onscreen-agent-ui-bubble-text strong {
  color: var(--aik-teal);
}

/* Message + thread accents */
.onscreen-agent-root .agent-thread-surface {
  --agent-thread-accent: var(--aik-teal);
}

/* ---- Agent Space canvas chrome ---- */

.space-theme-canvas {
  font-family: var(--aik-font-label);
}

.space-top-bar,
.space-canvas-toolbar,
.space-create-button,
.space-card-title {
  font-family: var(--aik-font-heading);
}

.space-create-button,
.space-primary-action {
  background: var(--aik-teal);
  border-color: var(--aik-teal);
  color: #ffffff;
}

.space-create-button:hover,
.space-primary-action:hover {
  background: var(--aik-navy);
  border-color: var(--aik-navy);
}

.space-card.selected,
.space-card:focus-visible {
  outline-color: var(--aik-teal);
}

/* ---- Widget content base ---- */

.widget-content,
.widget-content-body {
  font-family: var(--aik-font-label);
}

.widget-title,
.widget-header-title {
  font-family: var(--aik-font-heading);
  color: var(--aik-navy);
}

/* ---- Host panel-embed mode (?aik_embed=panel, Task 9 + panel redesign
   29-Aug) ----
   The Flutter side panel hosts the guest as a PURE chat screen: strip every
   piece of guest chrome (the onscreen-menu router bar with New Space /
   Welcome / Home / menu, the dashboard view, any overlay payload that is not
   the agent itself) and re-theme the agent to the light Aikarthya palette. */
html.aik-embed-panel .onscreen-menu,
html.aik-embed-panel .dashboard-view,
html.aik-embed-panel .router-overlay-layer > *:not(:has(.onscreen-agent-root)) {
  display: none !important;
}

html.aik-embed-panel body {
  background: var(--aik-cream) !important;
}

/* The starfield lives in body's own pseudo-elements (inside the body's
   isolated stacking context, so they paint over its background) and in the
   .space-backdrop layer — kill all of them, the panel has no cosmos. */
html.aik-embed-panel body.space-theme-canvas::before,
html.aik-embed-panel body.space-theme-canvas::after,
html.aik-embed-panel .space-backdrop {
  display: none !important;
}

/* Light brand theme for the embedded agent: the framework ships the onscreen
   agent dark-only; these are the same tokens it defines, re-pointed at the
   Aikarthya palette (panel, thread bubbles, composer, dialogs). */
html.aik-embed-panel .onscreen-agent-root {
  color-scheme: light;
  color: var(--aik-navy);
  --color-text-primary: var(--aik-navy);
  --color-text-secondary: rgba(19, 32, 60, 0.66);
  --onscreen-agent-border: rgba(19, 32, 60, 0.14);
  --onscreen-agent-border-strong: rgba(19, 32, 60, 0.26);
  --onscreen-agent-panel-bg: rgba(255, 255, 255, 0.94);
  --onscreen-agent-panel-bg-strong: #ffffff;
  --onscreen-agent-panel-shadow: 0 12px 32px rgba(19, 32, 60, 0.14);
  --onscreen-agent-inline-ring: rgba(0, 163, 206, 0.28);
  --space-button-primary-bg: var(--aik-teal);
  --space-button-primary-bg-hover: var(--aik-navy);
  --space-button-secondary-bg: rgba(19, 32, 60, 0.04);
  --space-button-secondary-bg-hover: var(--aik-teal-soft);
  --space-dialog-surface: #ffffff;
  --space-field-bg: #ffffff;
  --space-option-hover-bg: var(--aik-teal-soft);
  --space-composer-attachment-bg: var(--aik-teal-soft);
  --agent-thread-user-bubble-bg: var(--aik-teal-soft);
  --agent-thread-avatar-user-bg: #dff2f9;
  --agent-thread-markdown-inline-bg: #eef3f8;
  --agent-thread-markdown-block-bg: #f5f8fb;
  --agent-thread-attachment-user-bg: rgba(0, 163, 206, 0.12);
  --agent-thread-execution-bg: #f5f8fb;
  --agent-thread-execution-pane-bg: #ffffff;
}

/* The footer icon buttons hardcode a dark navy pill upstream — rest for the
   light panel. */
html.aik-embed-panel .onscreen-agent-footer-icon {
  background: rgba(19, 32, 60, 0.06);
  color: rgba(19, 32, 60, 0.72);
}

html.aik-embed-panel .onscreen-agent-footer-icon:hover:not(:disabled) {
  background: var(--aik-navy);
  color: #ffffff;
}

/* Full-frame chat layout: the shell — which normally wraps the draggable
   avatar cluster — stretches over the whole panel, the cluster becomes the
   layout root, and the agent body turns into a flex column (thread on top,
   composer pinned to the bottom). !important stylesheet declarations beat
   the inline left/top/height the drag positioner and resize handle write.
   The mascot and its hint bubble stay on the canvas page, not in the chat. */
html.aik-embed-panel .onscreen-agent-shell.is-full {
  inset: 0 !important;
}

html.aik-embed-panel .onscreen-agent-shell.is-full .onscreen-agent-cluster {
  width: 100%;
  height: 100%;
}

html.aik-embed-panel .onscreen-agent-avatar-button,
html.aik-embed-panel .onscreen-agent-ui-bubble {
  display: none !important;
}

html.aik-embed-panel .onscreen-agent-shell.is-full .onscreen-agent-body {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  transform: none !important;
}

html.aik-embed-panel .onscreen-agent-history-shell {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(19, 32, 60, 0.12);
  box-shadow: 0 4px 18px rgba(19, 32, 60, 0.1);
}

html.aik-embed-panel .onscreen-agent-panel {
  flex: 0 0 auto;
  width: auto;
  border-radius: 16px;
}