/* AI chat: orb avatar + Siri-like glass theme (added 2026-09-30, Joseph's request). Overlay only: the compiled chatbot component is untouched.
   The panel is dark glass with a slow multi-colour glow along the bottom, gradient user bubbles and a gradient ring on the input.
   Switch off for testing: add class chat-siri-off to <html> (document.documentElement.classList.add('chat-siri-off')). Rollback: remove the <link> in index.html.
   Specificity: the component's own rules are class + [_ngcontent] (0,2,0), so every rule here starts with "app-ai-chatbot .ai-chatbot-panel" (0,2,1) or better. */

/* ---- one look for the orb: same gradient disc on the chat button, the panel header and the reply avatars ---- */
html:not(.chat-siri-off) { --cs-a: #0a84ff; --cs-b: #7d5cff; --cs-c: #bf5af2; --cs-d: #ff375f; --cs-e: #64d2ff; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-fab.ai-chatbot-fab,
html:not(.chat-siri-off) app-ai-chatbot .chatbot-header-avatar.chatbot-header-avatar,
html:not(.chat-siri-off) app-ai-chatbot .message-avatar--ai.message-avatar--ai {
  background: radial-gradient(circle at 30% 24%, #8f8cff 0%, #5b53ea 42%, #2c2a8f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 6px 22px rgba(99,102,241,.45);
  color: #fff;
}
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-fab.ai-chatbot-fab:hover { background: radial-gradient(circle at 30% 24%, #a09eff 0%, #6a62f2 42%, #35339f 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 8px 28px rgba(125,92,255,.6); }
html:not(.chat-siri-off) app-ai-chatbot .chatbot-header-avatar[data-orb="avatar"],
html:not(.chat-siri-off) app-ai-chatbot .message-avatar--ai[data-orb="avatar"] { position: relative; }
html:not(.chat-siri-off) app-ai-chatbot [data-orb="avatar"] > mat-icon { display: none; }
.orb-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.chatbot-header-avatar .orb-avatar { width: 34px; height: 34px; }
.message-avatar--ai .orb-avatar { width: 24px; height: 24px; }

/* ---- panel: dark glass, always (the Siri overlay is dark in both app modes) ---- */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel.ai-chatbot-panel {
  background: linear-gradient(180deg, #0f1020 0%, #0a0a14 100%);
  color: #f5f5f7;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 70px rgba(99,102,241,.2);
}
/* slow drifting glow along the bottom edge */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel::before {
  content: ""; position: absolute; left: -15%; right: -15%; bottom: -34%; height: 62%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 60% at 22% 60%, rgba(10,132,255,.55), transparent 70%),
    radial-gradient(34% 58% at 50% 70%, rgba(191,90,242,.5), transparent 70%),
    radial-gradient(30% 56% at 76% 62%, rgba(255,55,95,.34), transparent 70%),
    radial-gradient(28% 50% at 92% 72%, rgba(100,210,255,.32), transparent 70%);
  filter: blur(38px); opacity: .62;
  animation: cs-drift 14s ease-in-out infinite alternate;
}
@keyframes cs-drift { 0% { transform: translateX(-4%) scale(1); } 100% { transform: translateX(4%) scale(1.08); } }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel > * { position: relative; z-index: 1; }

html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-backdrop.visible { background: rgba(0,0,0,.36); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* header */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-panel-header { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-header-name { color: #fff; font-weight: 600; letter-spacing: .1px; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-header-status { color: rgba(255,255,255,.62); opacity: 1; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .status-dot { background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,.8); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-header-btn { color: rgba(255,255,255,.7); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-header-btn:hover { color: #fff; }

/* conversations list */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-sessions-pane { background: rgba(255,255,255,.03); border-right: 1px solid rgba(255,255,255,.08); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-pane-header { border-bottom: 1px solid rgba(255,255,255,.08); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-pane-title { color: rgba(255,255,255,.5); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .new-chat-icon-btn { color: var(--cs-e); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-item:hover { background: rgba(255,255,255,.06); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-item.active { background: linear-gradient(90deg, rgba(10,132,255,.22), rgba(191,90,242,.18)); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-title { color: rgba(255,255,255,.82); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-item.active .session-title { color: #fff; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-date { color: rgba(255,255,255,.4); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-icon { color: var(--cs-e); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .session-delete-btn { color: #ff6b81; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-empty,
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-loading { color: rgba(255,255,255,.45); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-empty-icon mat-icon { color: rgba(255,255,255,.3); }

/* empty state: big orb, glass suggestion chips */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .conversation-empty { color: rgba(255,255,255,.6); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .conversation-empty h3 { color: #fff; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .conversation-empty p { color: rgba(255,255,255,.55); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .conversation-empty-icon mat-icon { color: #b9b6ff; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .suggestion-chip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); color: #e9e8ff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .suggestion-chip:hover { background: rgba(125,92,255,.24); border-color: rgba(191,178,255,.5); }

/* messages */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .message-row--user .message-bubble { background: linear-gradient(135deg, var(--cs-a) 0%, var(--cs-b) 55%, var(--cs-c) 100%); color: #fff; box-shadow: 0 6px 20px rgba(99,102,241,.32); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .message-row--assistant .message-bubble { background: rgba(255,255,255,.08); color: #f2f2f7; border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .message-avatar--user { background: rgba(255,255,255,.14); color: #fff; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .typing-dot { background: linear-gradient(135deg, var(--cs-e), var(--cs-c)); }

/* input: glass field, gradient ring on focus, gradient send button */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-input-area { background: transparent; border-top: 1px solid rgba(255,255,255,.08); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-input-wrapper {
  border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(#141425, #141425) padding-box, linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.16)) border-box;
  transition: box-shadow .25s ease, background .25s ease;
}
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-input-wrapper:focus-within {
  background: linear-gradient(#141425, #141425) padding-box, linear-gradient(120deg, var(--cs-a), var(--cs-c), var(--cs-d), var(--cs-e)) border-box;
  box-shadow: 0 0 22px rgba(125,92,255,.35);
}
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-textarea { color: #f5f5f7; caret-color: var(--cs-e); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-textarea::placeholder { color: rgba(255,255,255,.4); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-send-btn { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); border-radius: 10px; }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-send-btn.active { background: linear-gradient(135deg, var(--cs-a), var(--cs-b) 55%, var(--cs-c)); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.5); }
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-input-hint { color: rgba(255,255,255,.36); }

/* thin dark scrollbars */
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .chatbot-messages,
html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel .sessions-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }

@media (prefers-reduced-motion: reduce) { html:not(.chat-siri-off) app-ai-chatbot .ai-chatbot-panel::before { animation: none; } }