/* Audacord skin for the embedded ArskaSoft chat widget (#aw-widget).
   Loaded AFTER /hub/chat-widget.css on Audacord pages; re-colours the widget to
   follow the active Audacord theme variables and uses the app's system font.
   Scoped by #aw-widget — there's only one per page, and this file loads only on
   Audacord pages, so plain selectors are safe. */
#aw-widget { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--text); }

/* Launcher */
#aw-widget .aw-launcher {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
}
#aw-widget .aw-launcher:hover { box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 60%, transparent); }

/* Greeting bubble */
#aw-widget .aw-greeting { background: var(--bg2); border-color: var(--border); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#aw-widget .aw-greeting:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#aw-widget .aw-greeting::after { border-top-color: var(--border); }
#aw-widget .aw-greeting::before { border-top-color: var(--bg2); }
#aw-widget .aw-greeting-cursor { color: var(--accent); }

/* Panel — drop the synthwave pixel-grid overlay, use theme surfaces */
#aw-widget .aw-panel { background: var(--bg2); border-color: var(--border); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
#aw-widget .aw-panel::before { display: none; }

/* Header + toolbar buttons + branding */
#aw-widget .aw-header { background: var(--bg3); border-bottom-color: var(--border); }
#aw-widget .aw-title { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .3px; color: var(--accent); text-shadow: none; -webkit-user-select: text; user-select: text; }
#aw-widget .aw-logo { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; object-fit: contain; }
#aw-widget .aw-launcher-logo { width: 34px; height: 34px; object-fit: contain; }
#aw-widget .aw-mode-btn, #aw-widget .aw-close, #aw-widget .aw-clear, #aw-widget .aw-attach, #aw-widget .aw-fullscreen { color: var(--dim); border-color: var(--border); }
#aw-widget .aw-mode-btn:hover, #aw-widget .aw-close:hover, #aw-widget .aw-clear:hover, #aw-widget .aw-attach:hover { color: var(--text); border-color: var(--accent); }
#aw-widget .aw-mode-btn.active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent); }

/* Messages */
#aw-widget .aw-messages { background: var(--bg2); }
#aw-widget .aw-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); }
#aw-widget .aw-msg.user { background: var(--accent); color: #fff; border: none; }
#aw-widget .aw-msg.assistant { background: var(--bg3); color: var(--text); border-color: var(--border); }
/* Per-message author label — green, readable font (was tiny cyan "ARSKA.AI").
   The content fallback shows "AudaBot" even if the widget JS is cached. */
#aw-widget .aw-msg.assistant::before { content: var(--aw-name, 'AudaBot'); display: flex; align-items: center; gap: 7px; color: var(--accent); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .2px; text-shadow: none; margin-bottom: 6px;
  background: url("/audacord/icon.png") no-repeat left center / 18px 18px; padding-left: 24px; }
#aw-widget .aw-msg a { color: var(--accent); }
#aw-widget .aw-msg code, #aw-widget .aw-msg pre { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
#aw-widget .aw-status { color: var(--dim); }

/* Input + send (override the pink/cyan bottom segment) */
#aw-widget .aw-input-row { background: var(--bg2); border-top-color: var(--border); }
#aw-widget .aw-input { background: var(--bg); border-color: var(--border); color: var(--text); caret-color: var(--accent); }
#aw-widget .aw-input:focus { border-color: var(--accent); }
/* Use the browser's default caret (green), not the custom block overlay. */
#aw-widget .aw-input-cursor { display: none !important; }
#aw-widget .aw-send { background: var(--accent); color: #fff; border: none; }
#aw-widget .aw-send:hover { filter: brightness(1.08); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ── Message markdown formatting — special formatting in (light) green ── */
#aw-widget .aw-msg strong { color: color-mix(in srgb, var(--accent) 55%, #fff); }
#aw-widget .aw-msg em { color: color-mix(in srgb, var(--accent) 55%, #fff); font-style: italic; }
/* Headings: the darker accent green + larger than the cramped 11–13px defaults. */
#aw-widget .aw-msg h3, #aw-widget .aw-msg h4, #aw-widget .aw-msg h5 { color: var(--accent); }
#aw-widget .aw-msg h3 { font-size: 17px; }
#aw-widget .aw-msg h4 { font-size: 15px; }
#aw-widget .aw-msg h5 { font-size: 13.5px; }
#aw-widget .aw-msg th { color: var(--accent); }
#aw-widget .aw-msg.system { color: var(--dim); }
#aw-widget .aw-msg pre { color: var(--text); border-color: var(--border); }
#aw-widget .aw-msg code { color: var(--accent); }
#aw-widget .aw-msg blockquote { color: var(--dim); border-left-color: var(--accent); }
#aw-widget .aw-msg a:hover { color: var(--accent2, var(--accent)); }
/* The product name highlighted in answers — light green. */
#aw-widget .aw-hl { color: color-mix(in srgb, var(--accent) 55%, #fff); font-weight: 600; }

/* ── Hovers (were cyan/pink) ── */
#aw-widget .aw-close:hover, #aw-widget .aw-clear:hover { color: var(--accent); }
#aw-widget .aw-attach:hover { color: var(--accent); }
#aw-widget .aw-input::-webkit-scrollbar-thumb:hover { background: var(--accent); box-shadow: none; }
#aw-widget .aw-preview-remove:hover { background: var(--accent); }
/* Button hover tooltip — appended to <body> (outside #aw-widget), so it's targeted
   without the #aw-widget prefix. This skin only loads on Audacord pages, so it's safe. */
.aw-floating-tip { --tip-color: var(--accent); }

/* ── Status / typing indicator (was orange) ── */
#aw-widget .aw-status { color: var(--dim); }
#aw-widget .aw-status::before { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }

/* ── Citations + sources (only appear with web search, but keep on-theme) ── */
#aw-widget .aw-cite { color: var(--accent); }
#aw-widget .aw-sources-header, #aw-widget .aw-sources-icon { color: var(--dim); }
#aw-widget .aw-sources-header:hover { color: var(--accent); }
#aw-widget .aw-source-item { border-left-color: var(--accent); }
#aw-widget .aw-source-host, #aw-widget .aw-source-num { color: var(--accent); }
#aw-widget .aw-source-title { color: var(--text); }

/* ── Thinking-mode reasoning block (was purple) ── */
#aw-widget .aw-think { border-color: var(--border); }
#aw-widget .aw-think-header { color: var(--dim); }
#aw-widget .aw-think-icon { color: var(--accent); }
#aw-widget .aw-think-body { color: var(--dim); }

/* In the app, the widget is hidden (gated in styles.css) until the user opens it
   from Settings → "Ask AudaBot". Then body.aw-show reveals it, lifted above the
   player bar so the launcher doesn't sit on the controls. */
body.aw-show #aw-widget { display: block !important; bottom: 96px; }

/* Mobile: the floating launcher is oversized at 68px — shrink it so it doesn't
   crowd the screen / chat. */
@media (max-width: 600px) {
  #aw-widget { right: 14px; bottom: 14px; }
  #aw-widget .aw-launcher { width: 52px; height: 52px; }
  #aw-widget .aw-launcher svg { width: 24px; height: 24px; }
  #aw-widget .aw-launcher-logo { width: 28px; height: 28px; }
  #aw-widget .aw-greeting { bottom: 64px; }
}