/* ===================================================================
   CHAT A.I+ — 3allemni Design System
   =================================================================== */

:root {
  /* Palette — 3allemni brand tokens */
  --bg-page:          #F5F7FA;
  --sidebar-bg:       #ffffff;
  --sidebar-border:   #e4e7ec;
  --surface:          #ffffff;

  /* Brand blue (#356DF1 = 500) */
  --primary:          #356DF1;
  --primary-600:      #2458d0;
  --primary-700:      #1c44aa;
  --primary-200:      #a9c5f7;
  --primary-300:      #7aa3f3;
  --primary-50:       #eaf0fd;
  --primary-25:       #f4f7fe;

  /* Accent orange */
  --accent-500:       #F57F2A;
  --accent-600:       #d96414;

  /* Neutral grays (slate-leaning, from design system) */
  --text-900:         #101828;
  --text-700:         #344054;
  --text-500:         #667085;
  --text-400:         #98a2b3;
  --text-300:         #d0d5dd;

  --divider:          #e4e7ec;
  --divider-soft:     #f2f4f7;
  --black-btn:        #070C12;

  --upgrade-bg:       #356DF1;
  --upgrade-star:     #F57F2A;

  /* Radii — per design brief */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* Shadows — neutral rgba(16,24,40,x) per design system */
  --shadow-xs:       0 1px 2px 0 rgba(16,24,40,0.05);
  --shadow-sm:       0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-md:       0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg:       0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-focus:    0 0 0 4px rgba(53,109,241,0.12);
  --shadow-composer: 0 8px 24px -4px rgba(16,24,40,0.10), 0 2px 6px -2px rgba(16,24,40,0.06);

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Motion — 3allemni standard */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-normal: 200ms;

  /* Typography */
  --font-display: 'Syne', system-ui, sans-serif;
  --font:         'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--text-900);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }

/* ===============================================================
   APP LAYOUT
   =============================================================== */
.app {
  display: flex;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: var(--bg-page);
}

/* ===============================================================
   SIDEBAR — light
   =============================================================== */
.sidebar {
  width: 270px;
  flex: 0 0 270px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-top {
  padding: 22px 18px 8px;
  flex: 0 0 auto;
}

/* Brand wordmark — "3alim+" in Space Grotesk + tiny "powered by 3allemni" tagline */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  line-height: 1;
  color: var(--text-900);
}
.brand-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #6AA8FF, var(--primary) 60%, #1c44aa);
  box-shadow: 0 0 0 3px rgba(53,109,241,0.12);
  flex: 0 0 20px;
}
.brand-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.brand-name {
  font-family: 'Space Grotesk', 'Syne', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-plus {
  color: var(--accent-500);
  font-weight: 700;
  margin-left: 1px;
}
.brand-tagline {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-400);
  text-transform: uppercase;
  line-height: 1;
}

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.btn-new-chat {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast);
  box-shadow: 0 4px 14px rgba(53,109,241,0.35);
}
.btn-new-chat:hover { background: var(--primary-600); }
.btn-new-chat:active { transform: translateY(0.5px); }

.btn-search-round {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--divider-soft);
  color: var(--text-500);
  border: 1px solid var(--divider);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.btn-search-round:hover { background: var(--divider); }
.btn-search-round:active { transform: translateY(0.5px); }

.conv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
  margin-bottom: 8px;
}
.conv-head-label {
  font-size: 11px;
  color: var(--text-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.conv-clear-all {
  background: none;
  border: none;
  color: var(--accent-500);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.conv-clear-all:hover {
  background: rgba(245,127,42,0.10);
  color: var(--accent-600);
}

/* History scroll */
.history-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 8px;
}
.history-scroll::-webkit-scrollbar { width: 3px; }
.history-scroll::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 2px;
}
.history-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-300);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-group-label {
  font-size: 10.5px;
  color: var(--text-400);
  font-weight: 600;
  padding: 12px 8px 4px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  color: var(--text-700);
  font-size: 13.5px;
  line-height: 1.2;
  user-select: none;
  border-left: 3px solid transparent;
}
.history-item:hover { background: var(--divider-soft); }
.history-item.active {
  background: var(--primary-25);
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--accent-500);
}

.history-item-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-400);
  display: inline-flex;
}
.history-item.active .history-item-icon { color: var(--primary); }

.history-item-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.history-item:hover .history-item-actions,
.history-item.active .history-item-actions { opacity: 1; }

.history-action-btn {
  background: transparent;
  border: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.history-action-btn:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.history-item.disabled {
  color: var(--text-400);
  cursor: not-allowed;
}

/* Sidebar footer */
.sidebar-footer {
  flex: 0 0 auto;
  padding: 10px 14px 16px;
  border-top: 1px solid var(--divider-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text-500);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn-settings:hover {
  background: var(--divider-soft);
  border-color: var(--text-300);
  color: var(--text-700);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 0;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(245,127,42,0.12);
  flex: 0 0 32px;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===============================================================
   MAIN — chat canvas with warm ambient brand glows
   =============================================================== */
.main {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(900px 500px at 85% 105%, rgba(245,127,42,0.06), transparent 60%),
    radial-gradient(800px 500px at 12% -10%, rgba(53,109,241,0.07), transparent 62%),
    var(--bg-page);
}

.messages-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 56px 140px;
  scroll-behavior: smooth;
}
.messages-scroll::-webkit-scrollbar { width: 8px; }
.messages-scroll::-webkit-scrollbar-thumb {
  background: rgba(16,24,40,0.08);
  border-radius: 4px;
}

.messages {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ===== Message row ===== */
.msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 28px;
  background: var(--primary-50);
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.msg-author {
  font-size: 13.5px;
  color: var(--text-500);
  font-weight: 500;
}
.msg-author-brand {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.msg-verified {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  margin-left: 2px;
}

.msg-edit {
  background: transparent;
  border: none;
  color: var(--text-400);
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.msg-edit:hover { background: var(--primary-50); color: var(--primary); }

.msg.user .msg-text {
  font-size: 14.5px;
  color: var(--text-700);
  font-weight: 500;
}
.msg.user .msg-author { display: none; }

/* Bot text */
.msg-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-900);
  word-wrap: break-word;
}
.msg-text p { margin: 0 0 12px; }
.msg-text p:last-child { margin-bottom: 0; }
.msg-text strong { color: var(--text-900); font-weight: 700; }
.msg-text ol, .msg-text ul {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.msg-text ol { list-style: decimal; }
.msg-text ol li { padding-left: 4px; margin-bottom: 10px; }
.msg-text ul li { margin-bottom: 8px; }

/* ===== Message actions row ===== */
.msg-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.feedback-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  padding: 2px 4px;
  gap: 2px;
}
.feedback-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  width: 36px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.feedback-btn + .feedback-btn::before {
  content: none;
}
.feedback-btn:hover { background: var(--primary-50); color: var(--primary); }
.feedback-btn.active.up   { color: #22C55E; }
.feedback-btn.active.down { color: #EF4444; }
.feedback-btn.copied { color: var(--primary); }

.regenerate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-700);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  box-shadow: var(--shadow-xs);
}
.regenerate-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-50);
  color: var(--primary);
}
.regenerate-btn svg { width: 14px; height: 14px; }

/* ===============================================================
   COMPOSER (floating bar)
   =============================================================== */
.composer-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  justify-content: center;
  padding: 0 56px;
  pointer-events: none;
  z-index: 5;
}
.composer {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 12px;
  box-shadow: var(--shadow-composer);
  transition: box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal);
}
.composer:focus-within {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-composer), var(--shadow-focus);
}
.composer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #FDE68A 0%, #F472B6 50%, #8B5CF6 100%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}
.composer-avatar-emoji {
  font-size: 18px;
  line-height: 1;
}
.composer-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  color: var(--text-900);
  padding: 8px 4px;
  min-width: 0;
  font-family: inherit;
}
.composer-input::placeholder { color: var(--text-400); }

.composer-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 4px 14px rgba(53,109,241,0.40);
}
.composer-send:hover {
  background: var(--primary-600);
  box-shadow: 0 6px 18px rgba(53,109,241,0.45);
}
.composer-send:active { transform: translateY(0.5px); }
.composer-send svg { margin-left: 2px; margin-top: -1px; }

/* ===============================================================
   UPGRADE TAB
   =============================================================== */
.upgrade-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--upgrade-bg);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 22px 10px;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: -4px 0 20px rgba(53,109,241,0.30);
  transition: background var(--dur-fast), padding var(--dur-fast);
  z-index: 20;
}
.upgrade-tab:hover { background: var(--primary-600); }

.upgrade-tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.upgrade-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================================================
   MESSAGES CONTAINER
   =============================================================== */
#messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  scroll-behavior: smooth;
}
#messages-container::-webkit-scrollbar { width: 8px; }
#messages-container::-webkit-scrollbar-thumb {
  background: rgba(16,24,40,0.08);
  border-radius: 4px;
}
#messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(16,24,40,0.14);
}

/* ===============================================================
   MESSAGE ROWS + BUBBLES
   =============================================================== */
.message-row {
  width: 100%;
  max-width: 760px;
  display: flex;
  animation: msgEnter var(--dur-normal) var(--ease-out) both;
}

/* User = right-aligned, no avatar, gradient pill bubble */
.message-row.user {
  flex-direction: column;
  align-items: flex-end;
}

/* Bot = left aligned, avatar column + content column */
.message-row.bot {
  gap: 12px;
  align-items: flex-start;
}

/* Bot avatar — full mascot inside a soft circle (no crop, head centered) */
.message-row.bot .msg-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  background: var(--primary-25);
  border: 1px solid var(--divider-soft);
  box-shadow: var(--shadow-xs);
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
}
.message-row.bot .msg-avatar img {
  width: 118%;
  height: 118%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  pointer-events: none;
  user-select: none;
  transform: translateY(2px);
}

.msg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.msg-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  font-family: var(--font-display);
}
.msg-author-name { font-weight: 700; }
.msg-verified {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
}

.message-bubble {
  font-size: 14.5px;
  line-height: 1.65;
  word-wrap: break-word;
}

/* USER — gradient pill with asymmetric tail */
.message-bubble.user {
  background: linear-gradient(135deg, var(--primary) 0%, #4B7EF5 100%);
  color: #fff;
  padding: 11px 18px;
  border-radius: 18px 18px 6px 18px;
  max-width: 75%;
  box-shadow: 0 6px 16px -4px rgba(53,109,241,0.30), 0 2px 4px rgba(53,109,241,0.18);
  letter-spacing: -0.005em;
}

/* BOT — soft card with subtle border + shadow, brand-blue corner tail */
.message-bubble.bot {
  background: var(--surface);
  color: var(--text-900);
  padding: 12px 16px;
  border-radius: 6px 18px 18px 18px;
  max-width: 100%;
  border: 1px solid var(--divider-soft);
  box-shadow: var(--shadow-xs);
}

@keyframes msgEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===============================================================
   TYPING INDICATOR — mascot pops up out of the composer top edge,
   bobs while thinking, then retracts back into the input.
   Anchored at the composer's top edge (bottom: 88px) so its base
   sits on the input rim. z-index 4 < composer z-index 5 so the
   downward/retract animation clips behind the input field.
   =============================================================== */
.typing-indicator {
  position: absolute;
  /* Align with the composer's left edge: composer is max-width 720px centered,
     so on wide screens we pull in from 50% by 360px (= half composer width).
     On narrower screens where the composer fills the available width, the
     outer padding (56px) wins. Mobile media query overrides below. */
  left: max(56px, calc(50% - 360px));
  bottom: 92px; /* composer bottom (24px) + composer height (~58px) + 10px breathing room */
  right: auto;
  transform: none;
  width: auto;
  max-width: calc(100% - 112px);
  height: 40px;
  z-index: 4;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  pointer-events: none;
}
.typing-indicator.visible {
  display: inline-flex;
  animation: typingIn 260ms var(--ease-out) both;
}

.typing-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--primary-25, #EEF3FF);
  border: 1px solid var(--divider-soft, #E8ECF2);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
}
.typing-mascot {
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--divider-soft, #E8ECF2);
  border-radius: 999px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
  line-height: 1;
  white-space: nowrap;
}
.typing-name {
  font-family: var(--font, 'Instrument Sans', system-ui, sans-serif);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-500, #667085);
  letter-spacing: 0.01em;
}
.typing-dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }
.typing-dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary, #356DF1);
  opacity: 0.35;
  animation: dotFade 1.3s infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }

.typing-indicator.visible .typing-avatar { animation: mascotPeekUp 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.typing-indicator.visible .typing-mascot { animation: thinkingBob 2.4s 420ms ease-in-out infinite; }
.typing-indicator.visible .typing-bubble { animation: fadeInUp 240ms 160ms var(--ease-out) both; }

@keyframes typingIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mascotPeekUp {
  0%   { transform: translateY(8px) scale(0.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dotFade  { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } }
@keyframes thinkingBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* ===============================================================
   SCROLL TO BOTTOM BUTTON
   =============================================================== */
.scroll-to-bottom-btn {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  color: var(--text-500);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-normal) var(--ease-out);
  z-index: 6;
  opacity: 0;
}
.scroll-to-bottom-btn.visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.scroll-to-bottom-btn:hover { background: var(--primary-50); color: var(--primary); }

/* ===============================================================
   COMPOSER — LOCKED STATE + ICON BUTTONS
   =============================================================== */
.composer.locked {
  opacity: 0.6;
  pointer-events: none;
}

.composer-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.composer-btn:hover { background: var(--primary-50); color: var(--primary); }

#mic-btn.is-recording {
  color: #EF4444;
  animation: pulseRecord 1.2s infinite;
}
@keyframes pulseRecord {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.35); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ===============================================================
   OPTION BUTTONS
   =============================================================== */
.chat-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chat-opt-btn {
  background: var(--primary-25);
  border: 1.5px solid var(--primary-50);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  font-family: inherit;
}
.chat-opt-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  transform: translateY(-1px);
}
.chat-opt-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ===============================================================
   MESSAGE ACTIONS ROW
   =============================================================== */
.message-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.feedback-row {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  padding: 2px;
  gap: 0;
}

.message-actions-row .feedback-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  width: 36px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.message-actions-row .feedback-btn:hover { background: var(--primary-50); color: var(--primary); }
.message-actions-row .feedback-btn.active-positive { color: #22C55E; background: rgba(34,197,94,0.08); }
.message-actions-row .feedback-btn.active-negative { color: #EF4444; background: rgba(239,68,68,0.08); }
.message-actions-row .feedback-btn.copied { color: var(--primary); }

/* ===============================================================
   MARKDOWN OUTPUT STYLES
   =============================================================== */
.cv-answer { font-size: 14.5px; line-height: 1.7; color: var(--text-900); }
.cv-answer p { margin: 0 0 12px; }
.cv-answer p:last-child { margin-bottom: 0; }
.cv-answer strong { font-weight: 700; }
.cv-answer em { font-style: italic; }

.cv-title-lg {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-900);
  margin: 16px 0 8px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cv-title-sm {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-700);
  margin: 12px 0 6px;
  line-height: 1.3;
}

.cv-list {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.cv-list li { margin-bottom: 6px; line-height: 1.6; }

.cv-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-xs);
}
.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cv-table th, .cv-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--divider-soft);
}
.cv-table th {
  background: var(--primary-25);
  font-weight: 600;
  color: var(--primary-700);
}
.cv-table tr:last-child td { border-bottom: none; }
.cv-table tr:hover td { background: var(--primary-25); }

.cb-code-block {
  background: #F8F9FE;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  margin: 12px 0;
  overflow: hidden;
  font-size: 13px;
  box-shadow: var(--shadow-xs);
}
.cb-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--primary-25);
  color: var(--primary-700);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  border-bottom: 1px solid var(--primary-50);
}
.cb-copy-btn {
  background: transparent;
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  color: var(--primary-600);
  font-size: 11.5px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cb-copy-btn:hover {
  background: var(--primary-50);
  color: var(--primary);
}
.cb-copy-btn.copied { color: #22C55E; border-color: #22C55E; }

.cv-code {
  display: block;
  padding: 14px;
  color: var(--text-700);
  overflow-x: auto;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
code { font-family: var(--font-mono); }

.cv-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.cv-link:hover { border-bottom-color: var(--primary); }

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-25);
  border: 1.5px solid var(--primary-50);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  margin: 4px 0;
}
.video-link:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  transform: translateY(-1px);
}

.cv-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-900);
}

/* ===============================================================
   HISTORY EMPTY STATE + DELETE BTN
   =============================================================== */
.history-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-400);
  font-size: 13px;
}

.history-item-delete {
  background: transparent;
  border: none;
  color: var(--text-400);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
}
.history-item:hover .history-item-delete { opacity: 1; }
.history-item-delete:hover { color: #EF4444; background: rgba(239,68,68,0.12); }

/* ===============================================================
   USER AVATAR INITIAL + QUOTA BADGE
   =============================================================== */
.user-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-500);
  background: rgba(245,127,42,0.12);
  border-radius: 50%;
  text-transform: uppercase;
}

.user-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.quota-badge {
  font-size: 11.5px;
  color: var(--text-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quota-badge.low { color: #EF4444; font-weight: 600; }

/* ===============================================================
   MOBILE TOP BAR
   =============================================================== */
.main-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider-soft);
  flex: 0 0 auto;
  box-shadow: var(--shadow-xs);
}

.topbar-btn {
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-500);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.topbar-btn:hover { background: var(--primary-50); color: var(--primary); }

.topbar-brand {
  font-family: 'Space Grotesk', 'Syne', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-900);
}

/* ===============================================================
   SIDEBAR OVERLAY (mobile)
   =============================================================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,12,18,0.60);
  z-index: 99;
}
.sidebar-overlay.visible { display: block; }

/* ===============================================================
   VIDEO DRAWER
   =============================================================== */
.video-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  background: var(--surface);
  box-shadow: -4px 0 32px rgba(16,24,40,0.14);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.video-drawer.open { transform: translateX(0); }

.video-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  flex: 0 0 auto;
}

.video-drawer-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-900);
  letter-spacing: -0.01em;
}

.video-drawer-close {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.video-drawer-close:hover { background: var(--primary-50); color: var(--primary); }

#video-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #000;
}

.video-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,12,18,0.45);
  z-index: 199;
}
.video-drawer-overlay.visible { display: block; }

/* ===============================================================
   LOGIN WALL — 3alim Chatbot
   "Knowledge mesh" — cool canvas with a scattered network of
   connected nodes (AI / learning connections motif)
   =============================================================== */
.login-wall {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
  font-family: var(--font);

  background:
    radial-gradient(1100px 700px at 18% 42%, rgba(53,109,241,0.14), transparent 60%),
    radial-gradient(900px 700px at 82% 72%, rgba(245,127,42,0.12), transparent 62%),
    linear-gradient(180deg, #F5F8FD 0%, #EAEFF9 100%);

  overflow: hidden;
  isolation: isolate;
}

/* Knowledge mesh: scattered nodes + connecting thin lines.
   Reads as a neural / knowledge graph — thematically tied to the
   chatbot without being the usual dot-grid or noise. */
.login-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g stroke='%23356DF1' stroke-opacity='0.11' stroke-width='0.8' fill='none' stroke-linecap='round'><line x1='50' y1='80' x2='130' y2='30'/><line x1='130' y1='30' x2='220' y2='80'/><line x1='220' y1='80' x2='310' y2='40'/><line x1='310' y1='40' x2='370' y2='120'/><line x1='130' y1='30' x2='175' y2='100'/><line x1='175' y1='100' x2='80' y2='180'/><line x1='175' y1='100' x2='180' y2='220'/><line x1='80' y1='180' x2='180' y2='220'/><line x1='180' y1='220' x2='290' y2='190'/><line x1='290' y1='190' x2='370' y2='260'/><line x1='180' y1='220' x2='275' y2='270'/><line x1='275' y1='270' x2='290' y2='190'/><line x1='30' y1='290' x2='140' y2='330'/><line x1='140' y1='330' x2='240' y2='310'/><line x1='240' y1='310' x2='340' y2='360'/><line x1='140' y1='330' x2='180' y2='220'/><line x1='240' y1='310' x2='275' y2='270'/><line x1='220' y1='80' x2='175' y2='100'/><line x1='310' y1='40' x2='290' y2='190'/><line x1='370' y1='120' x2='370' y2='260'/></g><g fill='%23356DF1' fill-opacity='0.32'><circle cx='50' cy='80' r='2.2'/><circle cx='130' cy='30' r='2.6'/><circle cx='220' cy='80' r='2.2'/><circle cx='310' cy='40' r='2.2'/><circle cx='370' cy='120' r='2.6'/><circle cx='80' cy='180' r='2.2'/><circle cx='180' cy='220' r='2.8'/><circle cx='290' cy='190' r='2.2'/><circle cx='370' cy='260' r='2.6'/><circle cx='30' cy='290' r='2.2'/><circle cx='140' cy='330' r='2.6'/><circle cx='240' cy='310' r='2.2'/><circle cx='340' cy='360' r='2.6'/></g><g fill='%23F57F2A' fill-opacity='0.4'><circle cx='175' cy='100' r='2.8'/><circle cx='275' cy='270' r='2.8'/></g></svg>");
  background-size: 480px 480px;
  background-repeat: repeat;
  /* soften toward edges so the pattern reads as atmosphere, never wallpaper */
  mask-image: radial-gradient(ellipse at 50% 45%, black 35%, rgba(0,0,0,0.55) 72%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 35%, rgba(0,0,0,0.55) 72%, transparent 96%);
  pointer-events: none;
  z-index: 0;
}

/* subtle, large brand glows that fill negative space */
.login-wall .blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
  animation: blobDrift 18s var(--ease-out) infinite alternate;
}
.login-wall .blob-blue {
  top: -180px;
  left: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(53,109,241,0.22), transparent 70%);
}
.login-wall .blob-orange {
  bottom: -200px;
  right: -140px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245,127,42,0.18), transparent 70%);
  animation-duration: 22s;
  animation-delay: -7s;
}
.login-wall .blob-soft {
  top: 38%;
  right: 28%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(53,109,241,0.10), transparent 70%);
  animation-duration: 26s;
  animation-delay: -12s;
}

/* ============ LEFT: mascot hero ============ */
.login-hero-pane {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px 40px 72px;
}

.login-hero-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}

/* glowing halo behind the mascot */
.login-hero-stage::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(53,109,241,0.28), rgba(53,109,241,0) 60%),
    radial-gradient(circle at 65% 60%, rgba(245,127,42,0.22), rgba(245,127,42,0) 62%);
  filter: blur(20px);
  animation: heroGlow 6s var(--ease-out) infinite alternate;
  z-index: 0;
}

/* orbit ring — sized to match the chip orbit, so chips sit ON it */
.login-hero-stage::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(53,109,241,0.28);
  animation: alimOrbit 18s linear infinite;
  animation-play-state: running !important;
  z-index: 0;
  pointer-events: none;
}

/* the 3alim photo — the star */
.login-hero-img {
  position: relative;
  z-index: 2;
  width: 85%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  /* fade the bottom into transparency — hides the cropped legs edge of the PNG
     so the mascot visually dissolves into the canvas instead of ending flat */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0.6) 88%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0.6) 88%, transparent 98%);
  filter:
    drop-shadow(0 30px 40px rgba(16,24,40,0.18))
    drop-shadow(0 10px 18px rgba(53,109,241,0.18));
  animation: heroFloat 6s var(--ease-out) infinite alternate;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition:
    filter 400ms var(--ease-out),
    transform 400ms var(--ease-out);
  will-change: transform, filter;
}

/* ==== ORBIT SYSTEM — chips sit ON the ring (tangent), rotate with it ==== */
.login-hero-stage {
  /* 44% of stage width puts the chips exactly on the dashed ring (inset 6%) */
  --orbit-radius: 44cqw;
}

.login-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: alimOrbit 18s linear infinite;
  animation-play-state: running !important;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Each slot places its chip at the given angle on the ring.
   Inner rotate(-angle) keeps the chip upright at rest; the chip center
   lands exactly on the circle (translateY = orbit-radius). */
.orbit-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform:
    rotate(var(--angle))
    translateY(calc(-1 * var(--orbit-radius)))
    rotate(calc(-1 * var(--angle)));
}

/* Counter-rotates the chip during the orbit spin so text stays horizontal
   while the whole orbit (and its dashed ring) rotates around the mascot. */
.chip-counter {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  animation: alimChipCounter 18s linear infinite;
  animation-play-state: running !important;
  transform-origin: center;
  will-change: transform;
}

.login-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--divider);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  pointer-events: auto;
  transition:
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
}
.login-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(53,109,241,0.14);
}
.login-chip.accent  .chip-dot {
  background: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(245,127,42,0.14);
}
.login-chip.success .chip-dot {
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.14);
}

/* hover-stage interaction: speed up orbit + ring + counter-rotation in lockstep,
   expand halo, wiggle mascot, pop chips */
.login-hero-stage:hover .login-orbit,
.login-hero-stage:focus-within .login-orbit {
  animation-duration: 8s;
}
.login-hero-stage:hover .chip-counter,
.login-hero-stage:focus-within .chip-counter {
  animation-duration: 8s;
}
.login-hero-stage:hover .login-chip,
.login-hero-stage:focus-within .login-chip {
  transform: scale(1.08);
  background: #fff;
  border-color: rgba(53,109,241,0.35);
  box-shadow: 0 16px 28px -8px rgba(16,24,40,0.18), 0 4px 10px -2px rgba(53,109,241,0.20);
}

.login-hero-stage:hover .login-hero-img,
.login-hero-stage:focus-within .login-hero-img {
  animation: heroWiggle 1.6s var(--ease-out) infinite;
  filter:
    drop-shadow(0 40px 56px rgba(16,24,40,0.24))
    drop-shadow(0 16px 28px rgba(53,109,241,0.32))
    saturate(1.08) brightness(1.03);
}

.login-hero-stage:hover::before {
  opacity: 1;
  transform: scale(1.12);
  filter: blur(28px);
}

.login-hero-stage:hover::after {
  border-color: rgba(53,109,241,0.5);
  animation-duration: 8s;
}

/* ============ RIGHT: login panel ============ */
.login-auth-pane {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px 40px 40px;
}

.login-auth {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  animation: loginFadeUp 700ms 120ms var(--ease-out) both;
}

.login-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--divider);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--text-900);
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-xs);
}
.login-auth-brand .brand-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #6AA8FF, var(--primary) 60%, #1c44aa);
  box-shadow: 0 0 0 3px rgba(53,109,241,0.12);
}
.login-auth-brand .brand-plus { color: var(--accent-500); margin-left: 2px; }

.login-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

.login-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-900);
}
.login-title .accent { color: var(--accent-500); }
.login-title .line { white-space: nowrap; }
/* Wrapper keeps the line-height exactly as the surrounding text (0.8em box)
   so the spacing between "Bonjour" and "Apprends avec 3alim." never shifts.
   The image is absolutely positioned inside and its bottom sits on the baseline. */
.login-title .wave-wrap {
  position: relative;
  display: inline-block;
  width: 2.8em;
  height: 0.8em;
  vertical-align: baseline;
  margin: 0 0.08em;
}
.login-title .wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.8em;
  height: 2.8em;
  object-fit: contain;
  transform-origin: 70% 80%;
  animation: wave 2.6s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}

.login-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-700);
  margin: 0;
  max-width: 420px;
}

.login-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 28px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--primary) 0%, #4B7EF5 50%, var(--primary-600) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(53,109,241,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    box-shadow var(--dur-normal) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    filter var(--dur-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.login-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 800ms var(--ease-out);
}
.login-cta:hover {
  filter: brightness(1.04);
  box-shadow:
    0 14px 30px rgba(53,109,241,0.45),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.login-cta:hover::after { transform: translateX(130%); }
.login-cta:active { transform: translateY(0.5px); }
.login-cta:focus-visible {
  outline: none;
  box-shadow:
    var(--shadow-focus),
    0 10px 24px rgba(53,109,241,0.35);
}
.login-cta svg { transition: transform var(--dur-normal) var(--ease-out); }
.login-cta:hover svg { transform: translateX(4px); }

.login-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-500);
}
.login-trust .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: loginPulse 1.8s var(--ease-out) infinite;
}

.login-legal {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  color: var(--text-400);
}

/* ============ Animations ============ */
@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFloat {
  0%   { transform: translateY(0) rotate(-0.6deg); }
  100% { transform: translateY(-18px) rotate(0.6deg); }
}
@keyframes heroWiggle {
  0%, 100% { transform: translateY(-20px) rotate(0deg) scale(1.04); }
  20%      { transform: translateY(-24px) rotate(-3deg) scale(1.05); }
  40%      { transform: translateY(-22px) rotate(0deg) scale(1.06); }
  60%      { transform: translateY(-24px) rotate(3deg) scale(1.05); }
  80%      { transform: translateY(-22px) rotate(0deg) scale(1.04); }
}
@keyframes heroGlow {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.05); }
}
@keyframes alimOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes alimChipCounter {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.08); }
}
@keyframes loginPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* ============ Responsive ============ */
@media (max-width: 1200px) {
  .login-hero-pane { padding-left: 40px; }
  .login-auth-pane { padding-right: 40px; }
  .login-title { font-size: 44px; }
}

@media (max-width: 960px) {
  .login-wall {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .login-hero-pane {
    padding: 32px 24px 32px;
  }
  .login-hero-stage { max-width: 440px; }
  .login-auth-pane {
    padding: 16px 24px 48px;
    justify-content: center;
  }
  .login-auth { align-items: center; text-align: center; }
  .login-sub { margin-inline: auto; }
  .login-title { font-size: 36px; }
  .login-chip { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 520px) {
  .login-hero-pane { padding: 24px 20px 16px; }
  .login-hero-stage { max-width: 300px; }
  .login-title { font-size: 30px; }
  .login-cta { padding: 16px 22px; font-size: 15px; }
  .login-chip { font-size: 11px; padding: 7px 10px; }
  .login-chip .chip-dot { width: 6px; height: 6px; }
  /* keep only diagonals — avoids bottom chip colliding with auth panel */
  .orbit-slot:nth-child(1),
  .orbit-slot:nth-child(3),
  .orbit-slot:nth-child(5),
  .orbit-slot:nth-child(7) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable jerky / flashing animations only — keep the calm continuous
     orbit rotation since it's decorative and non-jarring. */
  .login-hero-img,
  .login-hero-stage::before,
  .login-chip,
  .login-wall .blob,
  .login-trust .dot,
  .login-title .wave,
  .login-auth {
    animation: none !important;
  }
  .login-hero-stage:hover .login-hero-img,
  .login-hero-stage:focus-within .login-hero-img {
    animation: none !important;
    transform: scale(1.02);
  }
}

/* ===============================================================
   CHAT EMPTY STATE — mascot says hi + starter prompts
   =============================================================== */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 40px;
  max-width: 720px;
  width: 100%;
  margin: 8% auto 0;
  animation: msgEnter 500ms var(--ease-out) both;
}

.chat-empty-mascot {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 18px;
}
.chat-empty-mascot::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(53,109,241,0.20), transparent 65%),
    radial-gradient(circle at 60% 50%, rgba(245,127,42,0.15), transparent 68%);
  filter: blur(14px);
  z-index: 0;
  animation: heroGlowSoft 4.5s ease-in-out infinite alternate;
}
.chat-empty-mascot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(16,24,40,0.16));
  animation: emptyFloat 5s ease-in-out infinite alternate;
  user-select: none;
  -webkit-user-drag: none;
}

.chat-empty-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-900);
  letter-spacing: -0.02em;
  margin: 6px 0 6px;
  line-height: 1.1;
}
.chat-empty-title .accent { color: var(--accent-500); }

.chat-empty-sub {
  font-size: 15px;
  color: var(--text-500);
  margin: 0 0 28px;
  max-width: 440px;
  line-height: 1.55;
}

.chat-empty-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 580px;
}

.starter-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.starter-prompt:hover {
  border-color: var(--primary-300);
  background: var(--primary-25);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.starter-prompt:active { transform: translateY(0); }
.starter-prompt:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

.starter-prompt-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.starter-prompt-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-900);
  line-height: 1.35;
}

@keyframes emptyFloat {
  0%   { transform: translateY(0) rotate(-0.5deg); }
  100% { transform: translateY(-10px) rotate(0.5deg); }
}
@keyframes heroGlowSoft {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-empty-mascot img,
  .chat-empty-mascot::before,
  .typing-mascot { animation: none !important; }
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 960px) {
  .messages-scroll { padding: 20px 24px 140px; }
  .composer-wrap { padding: 0 24px; }
  #messages-container { padding: 20px 24px 140px; }
  .typing-indicator { left: max(24px, calc(50% - 360px)); }
}

@media (max-width: 720px) {
  .chat-empty { margin-top: 4%; }
  .chat-empty-mascot { width: 140px; height: 140px; }
  .chat-empty-title { font-size: 26px; }
  .chat-empty-prompts { grid-template-columns: 1fr; }
  .typing-indicator { left: 24px; bottom: 78px; max-width: calc(100% - 48px); }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-out);
    width: 82%;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  .main-topbar { display: flex; }
  .upgrade-tab { display: none; }
  #messages-container { padding: 16px 16px 140px; }
  .composer-wrap { padding: 0 12px; bottom: 16px; }
  .message-bubble { max-width: 100%; }

  .video-drawer { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .video-drawer { transition: none; }
  .sidebar { transition: none; }
  @keyframes msgEnter { from { opacity: 1; transform: none; } }
  @keyframes dotBounce { 0%, 100% { transform: none; opacity: 0.6; } }
}