/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:     #7B2FBE;
  --purple-dim: #5a1f8e;
  --purple-glow: rgba(123, 47, 190, .35);
  --bg:         #0e0e12;
  --surface:    #1a1a24;
  --surface-2:  #242434;
  --text:       #e8e6f0;
  --text-dim:   #9590a8;
  --user-bg:    #2a1f48;
  --bot-bg:     #1e1e2c;
  --radius:     14px;
  --header-h:   56px;
  --input-h:    72px;
}

html { font-size: 15px; }

/* CRITICAL: generic hidden utility — without this, every element that
   toggles class="hidden" (auth fields, error bar, app layout) stays visible. */
.hidden { display: none !important; }

body {
  /* System Hebrew faces only - no web fonts.
     Order matters: a Hebrew-capable face must come before Segoe UI,
     which has no Hebrew glyphs at all. */
  font-family: 'Segoe UI', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh; /* dynamic viewport: excludes mobile browser chrome so the input bar stays visible */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  direction: rtl;
}

/* ===== Header ===== */
.header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid #2a2a3a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 10;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.logo-circle {
  animation: gentle-bounce 3s ease-in-out infinite;
}

@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text);
}

.header-controls { display: flex; gap: 8px; }

.ctrl-btn {
  background: var(--surface-2);
  border: 1px solid #333348;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .2s;
}
.ctrl-btn:hover {
  border-color: var(--purple);
  color: var(--text);
  background: rgba(123,47,190,.12);
}

/* Transient "searching the web" note - disappears when the answer starts */
.searching-note {
  font-size: .78rem;
  color: var(--text-dim);
  padding: 4px 10px;
  margin-top: 4px;
  align-self: flex-start;
  animation: fade-in .25s ease;
}
.searching-note .dots span {
  animation: dot-pulse 1.2s ease-in-out infinite;
  display: inline-block;
}
.searching-note .dots span:nth-child(2) { animation-delay: .15s; }
.searching-note .dots span:nth-child(3) { animation-delay: .3s; }

/* ===== Chat container ===== */
.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.chat-container::-webkit-scrollbar { width: 6px; }
.chat-container::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Welcome */
.welcome-msg {
  text-align: center;
  margin: auto;
  padding: 40px 20px;
}
.welcome-smiley { margin-bottom: 16px; animation: gentle-bounce 3s ease-in-out infinite; }
.welcome-msg h2 { font-size: 1.4rem; margin-bottom: 8px; }
.welcome-msg p  { color: var(--text-dim); font-size: .95rem; line-height: 1.6; }

/* Message bubbles */
.msg-row {
  display: flex;
  gap: 10px;
  max-width: min(88%, 48rem);
  animation: fade-slide-in .35s ease both;
}
/* short questions shouldn't stretch to full width */
.msg-row.user .msg-bubble { max-width: 100%; }
/* Both speakers align to the same edge - the conversation reads as one column
   instead of ping-ponging between sides. Speaker is distinguished by the
   avatar and the bubble colour, not by position. */
.msg-row.user  { align-self: flex-start; }
.msg-row.bot   { align-self: flex-start; }

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-top: 4px;
}
.msg-row.bot .msg-avatar  { background: var(--purple); }
.msg-row.user .msg-avatar { background: var(--surface-2); }

.msg-bubble {
  padding: 14px 18px;
  border-radius: var(--radius);
  line-height: 1.7;
  font-size: .95rem;
  font-weight: 400;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== FIX 5: rendered markdown inside bubbles ===== */
.msg-bubble.md { white-space: normal; }

/* Text still streaming in - shown plain until it is complete */
.md-pending {
  white-space: pre-wrap;
  display: inline;
}
.md-done > *:first-child { margin-top: 0; }
.md-done > *:last-child  { margin-bottom: .35em; }

.msg-bubble.md > *:first-child { margin-top: 0; }
/* keep the first line clear of the copy pill */
.msg-row.bot .msg-bubble { padding-top: 16px; }
.msg-bubble.md > *:last-child  { margin-bottom: 0; }

.msg-bubble.md p {
  margin: 0 0 .85em;           /* real paragraph spacing */
}

.msg-bubble.md strong {
  font-weight: 600;
  color: #fff;                 /* emphasis actually reads as emphasis */
}

.msg-bubble.md em { font-style: italic; opacity: .95; }

.msg-bubble.md h1,
.msg-bubble.md h2,
.msg-bubble.md h3 {
  font-weight: 600;
  line-height: 1.35;
  margin: 1.1em 0 .5em;
  color: #fff;
}
.msg-bubble.md h1 { font-size: 1.25rem; }
.msg-bubble.md h2 { font-size: 1.15rem; }
.msg-bubble.md h3 { font-size: 1.05rem; }

.msg-bubble.md ul,
.msg-bubble.md ol {
  margin: .3em 0 .9em;
  padding-inline-start: 1.4em;
}
.msg-bubble.md li { margin: .3em 0; }

.msg-bubble.md hr {
  border: none;
  border-top: 1px solid rgba(123, 47, 190, .3);
  margin: 1.1em 0;
}

.msg-bubble.md blockquote {
  margin: .6em 0;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--purple);
  color: var(--text-dim);
}

.msg-bubble.md code {
  background: rgba(0, 0, 0, .35);
  border: 1px solid #33334a;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: .88em;
  direction: ltr;
  display: inline-block;
}

.msg-bubble.md pre {
  background: #12121b;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: .7em 0;
  direction: ltr;
  text-align: left;
}
.msg-bubble.md pre code {
  background: none;
  border: none;
  padding: 0;
  display: block;
  line-height: 1.55;
}

.msg-bubble.md a { color: #c89bff; text-decoration: underline; }
.msg-bubble.md a:hover { color: #e0bbff; }

.msg-bubble.md table {
  border-collapse: collapse;
  margin: .7em 0;
  font-size: .92em;
  width: 100%;
}
.msg-bubble.md th,
.msg-bubble.md td {
  border: 1px solid #33334a;
  padding: 6px 10px;
  text-align: start;
}
.msg-bubble.md th { background: rgba(123, 47, 190, .15); font-weight: 600; }
/* Both bubbles sit on the same side, so the speaker is signalled by colour
   and by a purple edge on the user's side rather than by position. */
.msg-row.user .msg-bubble {
  background: var(--user-bg);
  border-top-right-radius: 4px;
  border-inline-start: 2px solid var(--purple);
}
.msg-row.bot .msg-bubble {
  background: var(--bot-bg);
  border-top-right-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Copy button - matches the pill styling used by suggestion chips and controls */
.copy-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  background: var(--surface-2);
  border: 1px solid rgba(123, 47, 190, .4);
  color: var(--text-dim);
  border-radius: 14px;
  padding: 4px 11px;
  cursor: pointer;
  font-size: .74rem;
  font-family: inherit;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .2s ease, border-color .2s ease,
              color .2s ease, background .2s ease, box-shadow .2s ease;
}
.msg-bubble:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover {
  color: var(--text);
  border-color: var(--purple);
  background: rgba(123, 47, 190, .16);
  box-shadow: 0 0 10px rgba(123, 47, 190, .3);
}
.copy-btn:active { transform: scale(.95); }

/* LTR: the button sits on the other side */
body[dir="ltr"] .copy-btn { left: auto; right: 10px; }

/* Typing indicator */
.typing-dots {
  display: inline-flex;
  gap: 5px;
  padding: 14px 18px;
}
.typing-dots span {
  width: 8px; height: 8px;
  background: var(--purple);
  border-radius: 50%;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ===== Input bar ===== */
.input-bar {
  flex-shrink: 0;
  padding: 12px 20px 18px;
  background: var(--surface);
  border-top: 1px solid #2a2a3a;
}

.input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid #333348;
  border-radius: 14px;
  padding: 8px 14px;
  transition: border-color .25s;
}
.input-wrap:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); }

#userInput {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  max-height: 140px;
  font-family: inherit;
  direction: rtl;
}
#userInput::placeholder { color: var(--text-dim); }

.send-btn {
  width: 40px; height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
.send-btn:hover { background: var(--purple-dim); }
.send-btn:active { transform: scale(.93); }

/* ===== Memory Modal ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in .2s ease;
}
.overlay.hidden { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border: 1px solid #333;
  border-radius: 16px;
  width: 420px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modal-pop .25s ease;
}
@keyframes modal-pop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2a2a3a;
}
.modal-header h3 { font-size: 1.05rem; }
.close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
}
.close-btn:hover { color: var(--text); }

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.memory-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.mem-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9rem;
  animation: fade-slide-in .25s ease both;
}
.mem-item .mem-key {
  color: var(--purple);
  font-weight: 600;
  min-width: 60px;
}
.mem-item .mem-val { flex: 1; color: var(--text); }
.mem-item .mem-del {
  background: none;
  border: none;
  color: #c44;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.mem-item .mem-del:hover { background: rgba(200,60,60,.15); }

.mem-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 20px;
  font-size: .9rem;
}

.memory-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.memory-add input {
  flex: 1;
  min-width: 80px;
  border: 1px solid #333;
  background: var(--bg);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .88rem;
  outline: none;
}
.memory-add input:focus { border-color: var(--purple); }

.add-mem-btn {
  background: var(--purple);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
  white-space: nowrap;
  transition: background .2s;
}
.add-mem-btn:hover { background: var(--purple-dim); }

/* ===== HTML file action bar ===== */
.html-file-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: -6px 0 10px;
  margin-inline-start: 42px;
  background: var(--surface-2);
  border: 1px solid #333348;
  border-radius: 12px;
  animation: fade-slide-in .3s ease both;
  flex-wrap: wrap;
}
.html-file-label {
  font-size: .85rem;
  color: var(--text-dim);
  margin-inline-start: auto;
}
.html-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .84rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.html-file-btn.open {
  background: var(--purple);
  color: #fff;
}
.html-file-btn.open:hover {
  background: var(--purple-dim);
}
.html-file-btn.download {
  background: var(--surface);
  color: var(--text);
  border: 1px solid #444;
}
.html-file-btn.download:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* ===== Arcs section ===== */
.arcs-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2a2a3a;
}
.arcs-title {
  font-size: .92rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.arcs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.arc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .88rem;
  animation: fade-slide-in .25s ease both;
}
.arc-arrow {
  color: var(--purple);
  font-weight: 700;
  flex-shrink: 0;
}
.arc-from, .arc-to {
  color: var(--text);
}
.arc-date {
  color: var(--text-dim);
  font-size: .78rem;
  margin-right: auto;
  margin-left: 8px;
}
.arc-del {
  background: none;
  border: none;
  color: #c44;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.arc-del:hover { background: rgba(200,60,60,.15); }
.arc-add { margin-top: 4px; }

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .msg-row { max-width: 92%; }
  .brand-name { font-size: .88rem; }
  .ctrl-btn span.ctrl-icon + span { display: none; }
  .modal { width: 96vw; }
  /* the header controls can overflow on narrow screens — let the row scroll
     horizontally instead of clipping buttons off the edge */
  .header { gap: 8px; }
  .header-controls {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* hide the scrollbar (Firefox) */
    max-width: 100%;
    /* subtle fade on the leading edge as a hint that the row scrolls.
       purely visual (mask only affects painting, not layout or scrolling).
       RTL: content continues to the LEFT, so fade the left edge. */
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
            mask-image: linear-gradient(to left, #000 82%, transparent 100%);
  }
  .header-controls::-webkit-scrollbar { display: none; }  /* hide (WebKit) */
  .header-controls .ctrl-btn,
  .header-controls .streak-chip { flex: 0 0 auto; }        /* don't shrink/clip */
}
/* LTR: content continues to the RIGHT, fade the right edge instead */
@media (max-width: 600px) {
  body[dir="ltr"] .header-controls {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
}

/* ===== Auth screen ===== */
.auth-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.auth-card {
  background: var(--surface);
  border: 1px solid #2a2a3a;
  border-radius: 20px;
  padding: 36px 32px;
  width: 360px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: modal-pop .3s ease;
}
.auth-logo { animation: gentle-bounce 3s ease-in-out infinite; margin-bottom: 4px; }
.auth-card h2 { font-size: 1.25rem; margin-bottom: 4px; }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #333348;
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  font-size: .95rem;
  outline: none;
  font-family: inherit;
}
.auth-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); }
.auth-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
.auth-submit:hover { background: var(--purple-dim); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-error {
  width: 100%;
  background: rgba(200,60,60,.12);
  border: 1px solid rgba(200,60,60,.35);
  color: #e58;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .85rem;
  text-align: center;
}
.auth-switch { font-size: .85rem; color: var(--text-dim); }
.auth-switch a { color: var(--purple); text-decoration: none; margin-right: 4px; }
.auth-switch a:hover { text-decoration: underline; }

/* ===== App layout with sidebar ===== */
.app-layout { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar {
  width: 260px;
  flex-shrink: 0;
  /* use theme variables so the sidebar matches the selected theme */
  background: var(--surface);
  /* logical property: becomes left border in RTL, right border in LTR */
  border-inline-end: 1px solid var(--surface-2);
  display: flex;
  flex-direction: column;
  transition: margin-inline-start .25s ease;
}
.sidebar.collapsed { margin-inline-start: -260px; }

.sidebar-top { padding: 14px; }
.new-chat-btn {
  width: 100%;
  padding: 11px;
  border: 1px solid #333348;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font-size: .92rem;
  font-family: inherit;
  transition: all .2s;
}
.new-chat-btn:hover { border-color: var(--purple); background: rgba(123,47,190,.12); }

.conv-list { flex: 1; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 3px;
  /* subtle bottom fade hints there are more conversations to scroll to.
     mask affects painting only — scrolling and layout are untouched. */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.conv-list::-webkit-scrollbar { width: 5px; }
.conv-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.conv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text-dim);
  transition: all .15s;
}
.conv-item:hover { background: var(--surface-2); color: var(--text); }
.conv-item.active { background: rgba(123,47,190,.18); color: var(--text); }
.conv-item .conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .conv-del {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: .9rem; opacity: 0; padding: 2px 4px; border-radius: 4px;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-item .conv-del:hover { color: #c44; background: rgba(200,60,60,.15); }

.sidebar-bottom {
  padding: 12px 14px;
  border-top: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-chip { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--purple); display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.user-name { font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn {
  background: none; border: 1px solid #333348; color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; flex-shrink: 0;
}
.logout-btn:hover { border-color: #c44; color: #c44; }

.main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.sidebar-toggle {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.3rem; cursor: pointer; padding: 0 4px; margin-left: 4px;
}
.sidebar-toggle:hover { color: var(--text); }

@media (max-width: 700px) {
  /* Mobile: sidebar is an overlay. Use PHYSICAL right/left + explicit pixel
     translate so RTL/LTR both hide correctly (translateX(%) flips under RTL,
     so we use fixed px values tied to the physical edge instead). */
  .sidebar { position: fixed; inset-block: 0; right: 0; left: auto;
             width: 260px;
             z-index: 150; box-shadow: -4px 0 20px rgba(0,0,0,.4);
             transition: transform .25s ease; margin-inline-start: 0;
             transform: translateX(0); }
  /* collapsed = pushed off the RIGHT edge by its own width */
  .sidebar.collapsed { transform: translateX(280px); margin-inline-start: 0; }
  /* backdrop: tap outside the open sidebar to close it */
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 140; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}
/* LTR mobile: sidebar sits on the LEFT, hides to the left */
@media (max-width: 700px) {
  body[dir="ltr"] .sidebar { left: 0; right: auto; }
  body[dir="ltr"] .sidebar.collapsed { transform: translateX(-280px); }
}

/* ===== Language toggle ===== */
.lang-toggle-auth {
  position: fixed;
  top: 18px;
  left: 18px;
  background: var(--surface-2);
  border: 1px solid #333348;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  font-family: inherit;
  z-index: 210;
  transition: all .2s;
}
.lang-toggle-auth:hover { border-color: var(--purple); color: var(--text); }

/* LTR (English) overrides — body[dir] drives direction */
body[dir="ltr"] .lang-toggle-auth { left: auto; right: 18px; }
body[dir="ltr"] .msg-row.user { align-self: flex-start; flex-direction: row; }
body[dir="ltr"] .header { direction: ltr; }
body[dir="ltr"] .msg-bubble { text-align: left; }
body[dir="ltr"] .chat-container { direction: ltr; }
body[dir="ltr"] .input-bar,
body[dir="ltr"] .sidebar,
body[dir="ltr"] .modal { direction: ltr; }
body[dir="ltr"] .auth-card { direction: ltr; }
body[dir="ltr"] #userInput { direction: ltr; text-align: left; }

@media (max-width: 700px) {
  body[dir="ltr"] .sidebar { box-shadow: 4px 0 20px rgba(0,0,0,.4); }
}

/* ===== Prompt suggestions (memory-aware conversation starters) ===== */
.suggestions-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  animation: suggestions-in .4s ease both;
}

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

.suggestion-chip {
  background: var(--surface-2);
  border: 1px solid rgba(123, 47, 190, .4);
  color: var(--text-dim);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .22s ease;
  animation: chip-pop .35s ease both;
  box-shadow: 0 0 0 rgba(123, 47, 190, 0);
}

.suggestion-chip:nth-child(1) { animation-delay: 0s; }
.suggestion-chip:nth-child(2) { animation-delay: .05s; }
.suggestion-chip:nth-child(3) { animation-delay: .1s; }
.suggestion-chip:nth-child(4) { animation-delay: .15s; }
.suggestion-chip:nth-child(5) { animation-delay: .2s; }

@keyframes chip-pop {
  from { opacity: 0; transform: scale(.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.suggestion-chip:hover {
  color: var(--text);
  border-color: var(--purple);
  background: rgba(123, 47, 190, .14);
  box-shadow: 0 0 14px rgba(123, 47, 190, .35);
  transform: translateY(-1px);
}

.suggestion-chip:active { transform: scale(.96); }

/* subtle neon breathing so it reads as "alive", matching the logo bounce */
.suggestions-box.glow .suggestion-chip {
  animation: chip-pop .35s ease both, chip-breathe 3.5s ease-in-out infinite;
}

@keyframes chip-breathe {
  0%, 100% { border-color: rgba(123, 47, 190, .4); }
  50%      { border-color: rgba(123, 47, 190, .75); }
}

/* =====================================================================
   v16 — Interactive extras: themes, mascot, streak, fun & settings,
   choice chips, message reactions. All additive; nothing above changed.
   ===================================================================== */

/* ---- Theme accent recolours every smiley face (logo, avatars, mascot) ---- */
svg circle[fill="#7B2FBE"] { fill: var(--purple); transition: fill .3s ease; }

/* ---- Alternate themes (midnight = default :root, no override needed) ---- */
body[data-theme="sunset"] {
  --purple: #e0724a; --purple-dim: #b8552f; --purple-glow: rgba(224,114,74,.35);
  --bg: #17110f; --surface: #241a16; --surface-2: #2f231d;
  --text: #f2e9e3; --text-dim: #b6a091; --user-bg: #3a251b; --bot-bg: #241a16;
}
body[data-theme="forest"] {
  --purple: #3fa06b; --purple-dim: #2c7d50; --purple-glow: rgba(63,160,107,.35);
  --bg: #0d1310; --surface: #16211b; --surface-2: #1f2d25;
  --text: #e6f0ea; --text-dim: #8fae9c; --user-bg: #1c3327; --bot-bg: #16211b;
}
body[data-theme="mono"] {
  --purple: #8a8fa3; --purple-dim: #6a6f82; --purple-glow: rgba(138,143,163,.30);
  --bg: #0f1013; --surface: #191a20; --surface-2: #23242c;
  --text: #e7e8ee; --text-dim: #9a9ba8; --user-bg: #262832; --bot-bg: #191a20;
}
body { transition: background .3s ease, color .3s ease; }

/* ---- Streak chip in header ---- */
.streak-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid rgba(255,150,40,.35);
  color: var(--text); padding: 6px 11px; border-radius: 8px;
  cursor: pointer; font-size: .85rem; font-family: inherit; transition: all .2s;
}
.streak-chip:hover { border-color: #ff9a28; box-shadow: 0 0 12px rgba(255,150,40,.3); }
.streak-fire { filter: saturate(1.2); }
.streak-chip.pulse { animation: streak-pop .5s ease; }
@keyframes streak-pop { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }

/* ---- Floating mascot ---- */
.mascot {
  position: fixed; inset-inline-start: 20px; bottom: 20px;
  width: 58px; height: 58px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer; z-index: 90;
  background: transparent; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
  transition: transform .2s ease, filter .2s ease;
  animation: mascot-float 4s ease-in-out infinite;
}
.mascot:hover { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 8px 18px var(--purple-glow)); }
.mascot:active { transform: scale(.94); }
.mascot .mascot-face { display: block; width: 100%; height: 100%; }
.mascot .mascot-face svg { width: 100%; height: 100%; display: block; }
@keyframes mascot-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

/* thinking: quick eager bounce while Chattly is answering */
.mascot.thinking { animation: mascot-think .5s ease-in-out infinite; }
@keyframes mascot-think { 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-8px) scale(1.05);} }

/* happy: a little joyful pop (e.g. after copy) */
.mascot.happy { animation: mascot-happy .6s ease; }
@keyframes mascot-happy { 0%{transform:scale(1);} 30%{transform:scale(1.2) rotate(8deg);} 60%{transform:scale(1.1) rotate(-6deg);} 100%{transform:scale(1);} }

/* sleepy: dim + floating Zzz after a long idle */
.mascot.sleepy { animation: none; opacity: .72; }
.mascot .mascot-zzz {
  position: absolute; top: -6px; inset-inline-end: -4px;
  font-size: .8rem; color: var(--text-dim); opacity: 0; font-style: italic;
}
.mascot.sleepy .mascot-zzz { animation: zzz 2.2s ease-in-out infinite; }
@keyframes zzz { 0%{opacity:0; transform:translateY(0) scale(.8);} 40%{opacity:.9;} 100%{opacity:0; transform:translateY(-14px) scale(1.1);} }

/* blink: eyes close briefly at rest */
.mascot .m-eye { animation: mascot-blink 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mascot-blink { 0%,92%,100%{ transform: scaleY(1);} 96%{ transform: scaleY(.1);} }
.mascot.thinking .m-eye, .mascot.sleepy .m-eye { animation: none; }

@media (max-width: 700px) {
  .mascot { width: 48px; height: 48px; inset-inline-start: 14px; bottom: 84px; }
}

/* ---- Fun corner ---- */
.fun-sub { color: var(--text-dim); font-size: .85rem; margin-bottom: 14px; }
.pay-monthly-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(123, 47, 190, .10);
  border-inline-start: 3px solid var(--purple);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 12px;
}
.fun-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fun-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: start; background: var(--surface-2); border: 1px solid #333348;
  border-radius: 12px; padding: 14px; cursor: pointer; font-family: inherit;
  color: var(--text); transition: all .18s ease;
}
.fun-card:hover { border-color: var(--purple); background: rgba(123,47,190,.12);
  transform: translateY(-2px); box-shadow: 0 6px 16px var(--purple-glow); }
.fun-card:active { transform: scale(.97); }
.fun-card-emoji { font-size: 1.5rem; }
.fun-card-title { font-weight: 600; font-size: .95rem; }
.fun-card-desc { font-size: .78rem; color: var(--text-dim); }

/* vibe picker */
.vibe-picker { margin-top: 16px; border-top: 1px solid #2a2a3a; padding-top: 14px; }
.vibe-prompt { font-size: .9rem; margin-bottom: 10px; color: var(--text); }
.vibe-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.vibe-mood {
  font-size: 1.6rem; line-height: 1; background: var(--surface-2);
  border: 1px solid #333348; border-radius: 12px; width: 52px; height: 52px;
  cursor: pointer; transition: all .16s ease;
}
.vibe-mood:hover { border-color: var(--purple); transform: translateY(-2px) scale(1.06);
  box-shadow: 0 4px 12px var(--purple-glow); }
.vibe-mood:active { transform: scale(.94); }

/* ---- Settings ---- */
.settings-block { margin-bottom: 20px; }
.settings-block:last-child { margin-bottom: 4px; }
.settings-label { font-size: .95rem; margin-bottom: 10px; color: var(--text); }

.settings-streak {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid rgba(255,150,40,.3);
  border-radius: 12px; padding: 14px;
}
.settings-streak-fire { font-size: 1.8rem; }
.settings-streak-count { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.settings-streak-best { font-size: .8rem; color: var(--text-dim); }

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-swatch {
  display: flex; align-items: center; gap: 9px; background: var(--surface-2);
  border: 1px solid #333348; border-radius: 10px; padding: 9px 11px;
  cursor: pointer; font-family: inherit; color: var(--text-dim); font-size: .85rem;
  transition: all .16s ease;
}
.theme-swatch:hover { color: var(--text); border-color: var(--purple); }
.theme-swatch.active { color: var(--text); border-color: var(--purple);
  background: rgba(123,47,190,.14); box-shadow: 0 0 0 2px var(--purple-glow); }
.theme-swatch .sw { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); }
.sw-midnight { background: linear-gradient(135deg,#7B2FBE,#0e0e12); }
.sw-sunset   { background: linear-gradient(135deg,#e0724a,#17110f); }
.sw-forest   { background: linear-gradient(135deg,#3fa06b,#0d1310); }
.sw-mono     { background: linear-gradient(135deg,#8a8fa3,#0f1013); }

/* toggle switch */
.settings-switch { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; font-size: .9rem; color: var(--text); user-select: none; }
.settings-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 44px; height: 24px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid #333348; position: relative; transition: all .2s ease; flex-shrink: 0; }
.switch-thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-dim); transition: all .2s ease; }
.settings-switch input:checked + .switch-track { background: rgba(123,47,190,.4); border-color: var(--purple); }
.settings-switch input:checked + .switch-track .switch-thumb { inset-inline-start: 22px; background: var(--purple); }

.face-label { font-size: .82rem; color: var(--text-dim); margin: 14px 0 8px; }
.face-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.face-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid #333348; border-radius: 10px;
  padding: 9px 4px; cursor: pointer; font-family: inherit; color: var(--text-dim);
  font-size: .72rem; transition: all .16s ease;
}
.face-opt:hover { border-color: var(--purple); color: var(--text); }
.face-opt.active { border-color: var(--purple); color: var(--text);
  background: rgba(123,47,190,.14); box-shadow: 0 0 0 2px var(--purple-glow); }
.face-preview { width: 30px; height: 30px; display: block; }
.face-preview svg { width: 100%; height: 100%; }

/* ---- Active mode banner (above the input) ---- */
.mode-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(123,47,190,.14); border: 1px solid var(--purple);
  border-radius: 12px; padding: 7px 12px; margin-bottom: 10px;
  animation: suggestions-in .3s ease both;
}

/* Free-tier FOMO strip: thin, non-blocking, under the header. */
.fomo-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text);
  background: rgba(123, 47, 190, .16);
  border-bottom: 1px solid var(--purple);
  animation: suggestions-in .28s ease both;
}
.fomo-banner.hidden { display: none; }
.fomo-text { flex: 1; min-width: 0; }
.fomo-upgrade {
  flex-shrink: 0;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.fomo-upgrade:hover { background: var(--purple-dim); }
.fomo-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  opacity: .7;
}
.fomo-close:hover { opacity: 1; color: var(--text); }
/* Urgent (<=3 left): red-orange, insistent. */
.fomo-banner.urgent {
  background: rgba(255, 92, 46, .16);
  border-bottom-color: #ff5c2e;
  color: #ffd9cc;
  font-weight: 600;
}
.fomo-banner.urgent .fomo-upgrade { background: #ff5c2e; }
.fomo-banner.urgent .fomo-upgrade:hover { background: #e64a1f; }
.mode-banner-text { font-size: .85rem; color: var(--text); font-weight: 600; }
.mode-exit-btn {
  background: none; border: 1px solid #333348; color: var(--text-dim);
  border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: .8rem; font-family: inherit;
  transition: all .16s ease;
}
.mode-exit-btn:hover { border-color: #c44; color: #c44; }

/* ---- Choice chips (story / would-you-rather branches) ---- */
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px;
  align-self: flex-start; margin-block: 4px; margin-inline-start: 46px; max-width: min(88%, 48rem); }
.choice-chip {
  background: var(--surface-2); border: 1px solid rgba(123,47,190,.5);
  color: var(--text); padding: 8px 15px; border-radius: 14px; font-size: .86rem;
  font-family: inherit; cursor: pointer; transition: all .18s ease;
  animation: chip-pop .35s ease both;
}
.choice-chip:hover { border-color: var(--purple); background: rgba(123,47,190,.16);
  box-shadow: 0 0 14px var(--purple-glow); transform: translateY(-1px); }
.choice-chip:active { transform: scale(.96); }

/* ---- Message reactions (sibling row, hugs its message) ---- */
.msg-reactions { display: flex; align-items: center; gap: 5px;
  align-self: flex-start; margin-top: -6px; min-height: 18px; padding-inline-start: 46px; }
body[dir="ltr"] .msg-reactions { align-self: flex-start; }
.react-toggle {
  background: none; border: none; cursor: pointer; font-size: .8rem;
  color: var(--text-dim); opacity: 0; transition: opacity .15s ease; padding: 2px 4px; border-radius: 6px;
}
.msg-row:hover .react-toggle { opacity: .7; }
.react-toggle:hover { opacity: 1; background: var(--surface-2); }
.react-picker {
  display: none; gap: 3px; background: var(--surface-2); border: 1px solid #333348;
  border-radius: 12px; padding: 3px 6px;
}
.react-picker.open { display: inline-flex; animation: chip-pop .2s ease both; }
.react-picker button { background: none; border: none; cursor: pointer; font-size: 1rem;
  padding: 2px; border-radius: 6px; transition: transform .12s ease; }
.react-picker button:hover { transform: scale(1.3); }
.react-badge {
  display: inline-flex; align-items: center; gap: 3px; background: rgba(123,47,190,.14);
  border: 1px solid rgba(123,47,190,.4); border-radius: 12px; padding: 1px 8px;
  font-size: .85rem; cursor: pointer;
}
.react-badge:hover { border-color: var(--purple); }

/* =====================================================================
   V17 — Saga (ספר המסע), proactive outreach, and the crisis card.
   All additive; nothing above is changed. Uses the existing theme vars,
   so it recolours automatically with every theme.
   ===================================================================== */

/* ---- Saga modal content ---- */
.saga-content { display: flex; flex-direction: column; gap: 6px; }
.saga-section-title {
  font-size: .82rem; color: var(--text-dim); font-weight: 700;
  letter-spacing: .3px; margin: 14px 0 8px;
}
.saga-content .saga-section-title:first-child { margin-top: 4px; }

.saga-arcs { display: flex; flex-direction: column; gap: 8px; }
.saga-arc {
  background: var(--surface-2); border: 1px solid rgba(123,47,190,.22);
  border-radius: 12px; padding: 10px 13px;
  animation: fade-slide-in .25s ease both;
}
.saga-arc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.saga-arc .arc-from { color: var(--text-dim); }
.saga-arc .arc-to { color: var(--purple); font-weight: 600; }
.saga-arc .arc-arrow { color: var(--text-dim); }
.saga-arc .arc-date { margin-inline-start: auto; font-size: .72rem; color: var(--text-dim); opacity: .8; }
.saga-arc-sum { margin-top: 5px; font-size: .82rem; color: var(--text-dim); line-height: 1.4; }

.saga-insights { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.saga-insights li {
  position: relative; padding: 9px 13px 9px 30px;
  background: var(--surface-2); border-radius: 10px;
  font-size: .87rem; line-height: 1.45; color: var(--text);
  animation: fade-slide-in .25s ease both;
}
body[dir="ltr"] .saga-insights li { padding: 9px 30px 9px 13px; }
.saga-insights li::before {
  content: "💡"; position: absolute; inset-inline-start: 9px; top: 8px; font-size: .82rem;
}

.saga-lang { display: flex; flex-direction: column; gap: 7px; }
.saga-lang-item {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(123,47,190,.10); border: 1px solid rgba(123,47,190,.28);
  border-radius: 10px; padding: 9px 13px;
  animation: fade-slide-in .25s ease both;
}
.saga-term { color: var(--purple); font-weight: 700; font-size: .88rem; }
.saga-mean { color: var(--text-dim); font-size: .8rem; line-height: 1.4; }

/* ---- Proactive outreach: Chattly opened the conversation itself ---- */
.msg-row.proactive-msg .msg-bubble { position: relative; }
.msg-row.proactive-msg .msg-bubble::before {
  content: attr(data-proactive-label);
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .2px;
  color: var(--purple); opacity: .95; margin-bottom: 7px;
}
.msg-row.proactive-msg .msg-bubble {
  border: 1px solid rgba(123,47,190,.35);
  box-shadow: 0 0 16px rgba(123,47,190,.14);
}

/* ---- Crisis response: calm, supportive, never alarming ----
   A soft teal accent (not red) so it reads as care, not danger. */
.msg-row.crisis-msg .msg-bubble {
  border-inline-start: 3px solid #4db6a4;
  background: linear-gradient(180deg, rgba(77,182,164,.08), var(--bot-bg));
}
.msg-row.crisis-msg .msg-bubble a { color: #6fd3c1; }

/* =====================================================================
   The Daily Question card + the brand orb
   Appended only. Nothing above this line is modified.
   ===================================================================== */

/* ---- the card ---- */
.daily-card {
  max-width: 460px;
  margin: 18px auto 0;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(123,47,190,.10), var(--surface));
  border: 1px solid rgba(123,47,190,.28);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  animation: daily-in .45s ease both;
}
@keyframes daily-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.daily-head { display: flex; justify-content: center; margin-bottom: 10px; }
.daily-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: #c9a8ff;
  background: rgba(123,47,190,.18);
  border: 1px solid rgba(123,47,190,.3);
  padding: 3px 10px; border-radius: 999px;
}
.daily-q {
  text-align: center; font-size: 1.12rem; font-weight: 600;
  color: var(--text); line-height: 1.45; margin-bottom: 14px;
}

/* ---- the two big taps ---- */
.daily-opts { display: flex; gap: 10px; }
.daily-opt {
  flex: 1; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.daily-opt:hover {
  border-color: rgba(123,47,190,.55);
  background: rgba(123,47,190,.14);
  box-shadow: 0 0 18px rgba(123,47,190,.18);
}
.daily-opt:active { transform: scale(.95); }
.daily-opt-emoji { font-size: 1.7rem; line-height: 1; }
.daily-opt-label { opacity: .92; }
.daily-card.daily-answering .daily-opt { opacity: .5; pointer-events: none; }

/* ---- the reveal ---- */
.daily-result { animation: daily-reveal .5s ease both; }
@keyframes daily-reveal { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.daily-bar {
  display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,.07);
}
.daily-bar-a { background: linear-gradient(90deg, #7B2FBE, #a45ce0); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.daily-bar-b { background: linear-gradient(90deg, #2f7bbe, #5ca4e0); transition: width .7s cubic-bezier(.2,.8,.2,1); }

.daily-legend {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 8px; font-size: .85rem; color: var(--text);
}
.daily-leg-a b, .daily-leg-b b { font-size: .95rem; }
.daily-leg-a b { color: #c9a8ff; }
.daily-leg-b b { color: #8fc4ef; }
.daily-total { text-align: center; margin-top: 10px; font-size: .78rem; color: var(--text-dim); }
.daily-mine  { text-align: center; margin-top: 3px; font-size: .82rem; color: var(--text); opacity: .85; }

/* ---- a mystery shard ---- */
.daily-shard {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 11px 12px;
  background: rgba(201,168,255,.07);
  border: 1px dashed rgba(201,168,255,.35);
  border-radius: 10px;
  font-size: .84rem; line-height: 1.5; color: #d9c9ff;
  animation: daily-in .6s .25s ease both;
}
.daily-shard-icon { flex: 0 0 auto; }

/* ---- yesterday, which you no longer get to answer ---- */
.daily-missed {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.07);
  opacity: .55;
}
.daily-missed-q { font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; text-align: center; }
.daily-missed .daily-bar { height: 10px; }
.daily-missed .daily-legend { font-size: .74rem; margin-top: 6px; }

/* ---- the orb breathes, and its rings expand while thinking ---- */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 4px 12px rgba(123,47,190,.28)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 6px 20px rgba(123,47,190,.5)); }
}
@keyframes orb-ring {
  0%   { transform: scale(.86); opacity: .8; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.mascot .m-ring { transform-origin: center; transform-box: fill-box; }
.mascot.thinking .m-ring-2 { animation: orb-ring 1.5s ease-out infinite; }
.mascot.thinking .m-ring-1 { animation: orb-ring 1.5s ease-out .45s infinite; }

/* The idle breath is opt-in per face (class set in JS), so the cat and the
   other faces keep behaving exactly as they did before. */
.mascot.has-orb:not(.thinking):not(.sleepy):not(.happy):not(:hover) .mascot-face svg {
  animation: orb-breathe 4.2s ease-in-out infinite;
  transform-origin: center;
}
.mascot.mascot-unlock { animation: mascot-happy .6s ease 2; }

/* ---- locked face option in Settings ---- */
.face-opt.face-locked { opacity: .38; filter: grayscale(1); cursor: not-allowed; }
.face-opt.face-locked:hover { border-color: inherit; background: inherit; }

/* ---- mobile ---- */
@media (max-width: 700px) {
  .daily-card { margin: 14px 12px 0; padding: 14px 14px 16px; }
  .daily-q { font-size: 1.02rem; }
  .daily-opt { min-height: 68px; font-size: .88rem; }
  .daily-opt-emoji { font-size: 1.5rem; }
}

/* Respect users who asked the system for less motion. */
@media (prefers-reduced-motion: reduce) {
  .daily-card, .daily-result, .daily-shard { animation: none; }
  .mascot .mascot-face svg { animation: none !important; }
  .mascot.thinking .m-ring-1, .mascot.thinking .m-ring-2 { animation: none; }
}

/* The welcome orb breathes too, so the first thing a visitor sees is alive. */
.welcome-smiley svg { animation: orb-breathe 4.2s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .welcome-smiley svg { animation: none; } }

/* =====================================================================
   Share button + share sheet
   The copy button is absolutely positioned at the TOP of the bubble.
   This one sits in normal flow at the BOTTOM, so the two can never
   overlap each other and neither can cover the message text.
   ===================================================================== */
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 5px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(123, 47, 190, .4);
  border-radius: 14px;
  color: var(--text-dim);
  font-family: inherit; font-size: .74rem; line-height: 1.4;
  cursor: pointer;
  opacity: .65;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease,
              background .2s ease, box-shadow .2s ease, transform .1s ease;
}
.msg-bubble:hover .share-btn { opacity: 1; }
.share-btn:hover {
  opacity: 1; color: var(--text);
  border-color: var(--purple);
  background: rgba(123, 47, 190, .16);
  box-shadow: 0 0 10px rgba(123, 47, 190, .3);
}
.share-btn:active { transform: scale(.95); }
.share-btn:focus-visible { opacity: 1; outline: 2px solid var(--purple); outline-offset: 2px; }
/* On touch devices there is no hover, so keep it permanently legible. */
@media (hover: none) { .share-btn { opacity: 1; } }

/* One-time nudge after a long answer: a slow shimmer, not a flashing badge. */
@keyframes share-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,47,190,0); border-color: rgba(123,47,190,.4); }
  50%      { box-shadow: 0 0 14px 2px rgba(123,47,190,.45); border-color: var(--purple); }
}
.share-btn.share-nudge { opacity: 1; color: var(--text); animation: share-nudge 2s ease-in-out 3; }

@media (prefers-reduced-motion: reduce) {
  .share-btn.share-nudge { animation: none; }
  .share-overlay, .share-sheet { transition: none; }
}

/* ---- Chattly offering to save a good exchange ----
   Appears inside the bubble under the reply, once per session. It sits in
   normal flow like the share button, so it cannot cover the message. */
.share-offer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 11px; padding: 9px 11px;
  background: rgba(123, 47, 190, .12);
  border: 1px dashed rgba(123, 47, 190, .45);
  border-radius: 11px;
  animation: offer-in .4s ease both;
}
@keyframes offer-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.share-offer-text { flex: 1; min-width: 130px; font-size: .78rem; color: #d9c9ff; line-height: 1.4; }
.share-offer-yes {
  padding: 5px 12px; border: none; border-radius: 9px;
  background: linear-gradient(135deg, var(--purple), #a45ce0);
  color: #fff; font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.share-offer-yes:active { transform: scale(.95); }
.share-offer-no {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.share-offer-no:hover { color: var(--text); }

/* ---- share the daily result ---- */
.daily-share {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px auto 0;
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px solid rgba(123, 47, 190, .4);
  border-radius: 14px;
  color: var(--text-dim);
  font-family: inherit; font-size: .76rem; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .1s ease;
}
.daily-result { display: flex; flex-direction: column; }
.daily-share:hover {
  color: var(--text); border-color: var(--purple);
  background: rgba(123, 47, 190, .16);
}
.daily-share:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) { .share-offer { animation: none; } }

/* ---- My data: access + correction rights ---- */
.mydata-hint { font-size: .78rem; color: var(--text-dim); line-height: 1.55; margin: 4px 0 10px; }
.mydata-btn {
  width: 100%; padding: 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid rgba(123,47,190,.35);
  color: var(--text); font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.mydata-btn:hover { background: rgba(123,47,190,.16); border-color: var(--purple); }
.mydata-panel { margin-top: 12px; }
.mydata-loading, .mydata-empty {
  padding: 14px; text-align: center; font-size: .8rem; color: var(--text-dim);
}
.mydata-group { margin-bottom: 14px; }
.mydata-group h5 {
  font-size: .76rem; font-weight: 700; color: #c9a8ff;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 7px;
}
.mydata-list { list-style: none; padding: 0; margin: 0; }
.mydata-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 10px; font-size: .8rem;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 5px;
}
.mydata-list li span { color: var(--text-dim); }
.mydata-list li b { color: var(--text); font-weight: 600; text-align: end; word-break: break-word; }
.mydata-facts { list-style: none; padding: 0; margin: 0; }
.mydata-facts li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 5px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 8px;
  transition: border-color .3s ease, background .3s ease;
}
.mydata-facts li.mdf-ok  { border-color: #4db6a4; background: rgba(77,182,164,.1); }
.mydata-facts li.mdf-bad { border-color: #e05a5a; background: rgba(224,90,90,.1); }
.mdf-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mdf-key { flex: 0 0 auto; font-size: .74rem; color: var(--text-dim); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdf-val {
  flex: 1; min-width: 0; padding: 5px 8px;
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; color: var(--text); font-family: inherit; font-size: .78rem;
}
.mdf-val:focus { outline: none; border-color: var(--purple); }
.mdf-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.mdf-save, .mdf-del {
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.09);
  background: transparent; color: var(--text-dim); cursor: pointer; font-size: .8rem;
}
.mdf-save:hover { color: #4db6a4; border-color: #4db6a4; }
.mdf-del:hover  { color: #e05a5a; border-color: #e05a5a; }
.mydata-foot { font-size: .73rem; color: var(--text-dim); text-align: center; padding-top: 6px; }

/* ===== Memory panel — "what Chattly learned about you" ===== */
.mem-count {
  font-size: .82rem; color: var(--purple); font-weight: 700;
  text-align: center; margin-bottom: 12px;
}
.mem-group { margin-bottom: 14px; }
.mem-group-title {
  font-size: .72rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
  padding-inline-start: 2px;
}
.mem-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-bottom: 5px;
  background: var(--surface-2);
  border: 1px solid rgba(123,47,190,.14);
  border-radius: 10px;
  transition: border-color .18s ease;
}
.mem-item:hover { border-color: rgba(123,47,190,.4); }
.mem-item .mem-val { color: var(--text); font-size: .9rem; flex: 1; word-break: break-word; }
.mem-item .mem-del {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: .85rem; opacity: .5; flex: 0 0 auto;
}
.mem-item:hover .mem-del { opacity: 1; }
.mem-item .mem-del:hover { color: #e05a5a; }
.mem-intro { padding: 22px 16px; text-align: center; }
.mem-intro-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mem-intro-body { font-size: .84rem; color: var(--text-dim); line-height: 1.65; }

/* ===== Saga panel — the emotional journey ===== */
.arc-intro { padding: 26px 18px; text-align: center; }
.arc-intro-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: .9; }
.arc-intro-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.arc-intro-body { font-size: .86rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 14px; }
.arc-intro-hint {
  font-size: .8rem; color: var(--purple); font-weight: 600;
  background: rgba(123,47,190,.1); border: 1px dashed rgba(123,47,190,.35);
  border-radius: 10px; padding: 9px; display: inline-block;
}
.arc-item {
  background: var(--surface-2);
  border: 1px solid rgba(123,47,190,.16);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
  position: relative;
}
.arc-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arc-from { color: var(--text-dim); font-size: .88rem; }
.arc-arrow { color: var(--purple); font-weight: 700; }
.arc-to { color: var(--text); font-weight: 700; font-size: .92rem; }
.arc-del {
  margin-inline-start: auto; background: none; border: none;
  color: var(--text-dim); cursor: pointer; opacity: .5; font-size: .8rem;
}
.arc-item:hover .arc-del { opacity: 1; }
.arc-del:hover { color: #e05a5a; }
.arc-summary { font-size: .83rem; color: var(--text-dim); line-height: 1.55; margin-top: 7px; }
.arc-date { font-size: .72rem; color: var(--text-dim); opacity: .7; margin-top: 6px; display: block; }

/* Recommended plan highlight — the tier we steer a capped free user toward */
.fun-card.plan-recommended {
  border-color: var(--purple) !important;
  background: rgba(123,47,190,.14) !important;
  box-shadow: 0 0 18px rgba(123,47,190,.4);
  position: relative;
}
.fun-card.plan-recommended::before {
  content: "★";
  position: absolute; top: 6px; inset-inline-end: 8px;
  color: var(--purple); font-size: .8rem;
}

/* Continue-on-free way out of the quota upgrade modal — friendly, not hidden */
.continue-free {
  display: block; width: 100%; margin-top: 14px; padding: 11px;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: var(--text-dim);
  font-family: inherit; font-size: .86rem; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.continue-free:hover { color: var(--text); border-color: rgba(255,255,255,.28); }

/* ---- Gentle mobile install nudge (in-chat, phones only) ---- */
.install-nudge { margin: 10px 0; display: flex; justify-content: flex-start; }
.nudge-inner {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 88%; padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid rgba(123,47,190,.28);
  border-radius: 16px 16px 16px 4px;
}
.nudge-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(123,47,190,.4);
}
.nudge-body { flex: 1; min-width: 0; }
.nudge-text { font-size: .88rem; line-height: 1.55; color: var(--text); }
.nudge-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nudge-yes, .nudge-later {
  padding: 7px 14px; border-radius: 20px; font-family: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.nudge-yes {
  background: var(--purple); color: #fff;
}
.nudge-yes:hover { filter: brightness(1.1); }
.nudge-later {
  background: transparent; border-color: rgba(255,255,255,.16); color: var(--text-dim);
}
.nudge-later:hover { border-color: rgba(255,255,255,.3); color: var(--text); }
.nudge-done { font-size: .85rem; color: var(--purple); font-weight: 600; }

/* ---- Desktop install-button gentle hint (one-time) ---- */
@keyframes installHintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,47,190,0); opacity: 1; }
  50%      { box-shadow: 0 0 12px 2px rgba(123,47,190,.55); opacity: .82; }
}
.install-hint-pulse {
  animation: installHintPulse 1.6s ease-in-out 3;
  border-color: rgba(123,47,190,.5) !important;
}
.install-hint-tip {
  position: fixed; z-index: 6500; width: 260px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--surface-2, #1c1830);
  border: 1px solid rgba(123,47,190,.4);
  color: var(--text, #e8e6f0); font-size: .78rem; line-height: 1.5;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none; text-align: center;
}
.install-hint-tip.show { opacity: 1; transform: translateY(0); }

/* ---- Gender selector in settings ---- */
.gender-opts { display: flex; gap: 8px; }
.gender-opt {
  flex: 1; padding: 10px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim); font-family: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
}
.gender-opt:hover { border-color: rgba(123,47,190,.4); color: var(--text); }
.gender-opt.active {
  background: rgba(123,47,190,.18); border-color: var(--purple); color: var(--text);
}

/* ---- Typing indicator with rotating status text ---- */
.typing-wrap { display: flex; align-items: center; gap: 10px; }
.typing-label {
  font-size: .78rem; color: var(--text-dim); opacity: .85;
  animation: typingLabelFade .5s ease;
}
@keyframes typingLabelFade { from { opacity: 0; } to { opacity: .85; } }

/* ---- Model selector ---- */
.model-opts { display: flex; flex-direction: column; gap: 8px; }
.model-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; padding: 11px 13px; border-radius: 12px; text-align: start;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim); font-family: inherit; cursor: pointer;
  transition: all .18s ease;
}
.model-opt:hover { border-color: rgba(123,47,190,.45); color: var(--text); }
.model-opt.active {
  background: rgba(123,47,190,.18); border-color: var(--purple); color: var(--text);
}
.model-name { font-size: .88rem; font-weight: 700; }
.model-desc { font-size: .76rem; opacity: .8; line-height: 1.45; }

/* ---- Conversation list day grouping ---- */
.conv-daygroup {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim); opacity: .7; text-transform: uppercase;
  padding: 12px 10px 4px;
}

/* ---- Model picker on the header title ---- */
.brand-model-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  color: inherit; font: inherit; border-radius: 8px;
}
.brand-model-btn:hover { background: rgba(255,255,255,.06); }
.brand-caret { font-size: .7em; opacity: .6; }
.model-popover {
  position: absolute; top: 100%; margin-top: 8px; z-index: 500;
  min-width: 260px; max-width: 300px; padding: 12px;
  background: var(--surface-2, #1c1830);
  border: 1px solid rgba(123,47,190,.35); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.model-popover.hidden { display: none; }
.model-popover-title {
  font-size: .74rem; font-weight: 700; opacity: .7; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 8px; padding: 0 2px;
}

/* ---- In-conversation date divider (Today / Yesterday / date) ---- */
.date-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 18px 0 10px; position: relative;
}
.date-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,.08);
}
.date-divider span {
  position: relative; z-index: 1;
  background: var(--surface, #14121f);
  color: var(--text-dim, #9a94b0);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: 3px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
}

/* ===== Install strip on the login screen ===== */
.auth-install{
  display:flex; align-items:center; gap:9px;
  margin-top:16px; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.03);
  font-size:12.5px; line-height:1.4;
}
.auth-install.hidden{display:none}
.auth-install .ai-icon{
  flex-shrink:0; width:20px; height:20px; border-radius:6px;
  background:radial-gradient(circle at 30% 30%,#fff,var(--purple) 45%,var(--purple-dim));
  box-shadow:0 0 10px rgba(168,85,247,.5);
}
.auth-install .ai-text{flex:1; min-width:0; color:var(--text-dim)}
.auth-install .ai-btn{
  flex-shrink:0; background:transparent; color:var(--purple);
  border:1px solid var(--purple); border-radius:100px;
  padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.auth-install .ai-btn:hover{background:rgba(123,47,190,.15)}
.auth-install .ai-close{
  flex-shrink:0; background:transparent; border:none; color:var(--text-dim);
  font-size:13px; line-height:1; padding:2px 3px; cursor:pointer; opacity:.6;
}
.auth-install .ai-close:hover{opacity:1}
@media (max-width:420px){
  .auth-install{flex-wrap:wrap}
  .auth-install .ai-text{flex:1 1 100%; order:1}
  .auth-install .ai-icon{order:0}
  .auth-install .ai-btn{order:2; margin-inline-start:auto}
}

/* ===== Image attachments ===== */
.attach-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.attach-btn:hover { color: var(--purple); background: rgba(123,47,190,.12); }
.input-wrap.drag-over { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); }

.img-preview {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 8px;
  margin-inline-start: auto;   /* opposite side from the floating mascot, in both directions */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #333348;
  background: var(--surface-2);
  line-height: 0;
}
.img-preview.hidden { display: none; }
.img-preview img { max-height: 84px; max-width: 160px; object-fit: cover; display: block; }
.img-preview-x {
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 12px; line-height: 24px; text-align: center;
  cursor: pointer; padding: 0;
}
.img-preview-x:hover { background: rgba(0,0,0,.85); }

.msg-img {
  display: block;
  max-width: min(260px, 100%);
  max-height: 260px;
  border-radius: 10px;
  margin-bottom: 6px;
  object-fit: cover;
}
@media (max-width: 480px) {
  .attach-btn { width: 36px; height: 36px; }
  .msg-img { max-width: 100%; max-height: 220px; }
}

/* ===== Voice input ===== */
.mic-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s, transform .15s;
}
.mic-btn.hidden { display: none; }
.mic-btn:hover { color: var(--purple); background: rgba(123,47,190,.12); }
.mic-btn:active { transform: scale(.92); }
@media (max-width: 480px) { .mic-btn { width: 36px; height: 36px; } }

/* While recording, the bar takes the input row's place. */
.input-bar.recording .input-wrap { display: none; }

.voice-bar {
  background: var(--surface-2);
  border: 1px solid var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
  border-radius: 14px;
  padding: 8px 10px;
  animation: vb-in .18s ease-out;
}
.voice-bar.hidden { display: none; }
@keyframes vb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vb-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }

.vb-cancel {
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, background .2s;
}
.vb-cancel:hover { color: #ff6b81; background: rgba(224,68,92,.12); }

.vb-rec { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.vb-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d67;
  box-shadow: 0 0 0 0 rgba(255,77,103,.6);
  animation: vb-dot 1.4s ease-in-out infinite;
}
@keyframes vb-dot {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(255,77,103,.55); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(255,77,103,0); }
}
.vb-time {
  font-variant-numeric: tabular-nums;
  font-size: .95rem; font-weight: 600;
  color: var(--text);
  min-width: 2.6em;
}

.vb-wave {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 28px; overflow: hidden;
  padding: 0 4px;
}
.vb-wave i {
  display: block; flex: 0 0 3px; height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #c28bff, var(--purple));
  transform: scaleY(calc(var(--h, .5) * .3));
  transform-origin: center;
  animation: vb-bar 1.3s ease-in-out infinite;
  opacity: .75;
}
@keyframes vb-bar {
  0%, 100% { transform: scaleY(calc(var(--h, .5) * .25)); }
  50%      { transform: scaleY(calc(var(--h, .5) * .55)); }
}
.voice-bar.speaking .vb-wave i { animation-name: vb-bar-hi; animation-duration: .6s; opacity: 1; }
@keyframes vb-bar-hi {
  0%, 100% { transform: scaleY(calc(var(--h, .5) * .35)); }
  50%      { transform: scaleY(var(--h, .5)); }
}

/* The floating mascot steps aside so it never sits on the recording bar. */
body.voice-recording .mascot { opacity: 0; pointer-events: none; transition: opacity .15s; }

.vb-done {
  width: 40px; height: 40px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .15s;
}
.vb-done:hover { background: var(--purple-dim); }
.vb-done:active { transform: scale(.92); }

.vb-text {
  margin: 4px 4px 2px;
  font-size: .85rem; line-height: 1.4;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-text[data-live] { color: var(--text); }

@media (max-width: 480px) {
  .vb-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-dot, .vb-wave i, .voice-bar { animation: none; }
  .vb-wave i { transform: scaleY(.4); }
}

/* ===== Tap to enlarge ===== */
.msg-img { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: 99999;   /* above every hint, toast and modal */
  display: none; align-items: center; justify-content: center;
  background: rgba(5,5,10,.88);
  padding: 24px;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  object-fit: contain;
  cursor: zoom-out;
}
.img-lightbox-x {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline-end: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff;
  font-size: 18px; cursor: pointer;
}
.img-lightbox-x:hover { background: rgba(255,255,255,.26); }

/* ===== Guest trial ===== */
/* A guest has no account, so anything account-shaped is out of the way.
   Only the chat, the trial banner and the way to sign up remain. */
body.guest-mode #sidebar,
body.guest-mode #sidebarToggle,
body.guest-mode #logoutBtn,
body.guest-mode #memoryBtn,
body.guest-mode #sagaBtn,
body.guest-mode #funBtn,
body.guest-mode #personaBtn,
body.guest-mode #settingsBtn,
body.guest-mode #streakChip,
body.guest-mode #modelPickerBtn .brand-caret,
body.guest-mode .sidebar-backdrop { display: none !important; }
body.guest-mode #modelPickerBtn { pointer-events: none; }

.guest-banner {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  font-size: 12.5px; line-height: 1.35;
  color: var(--text);
  background: rgba(123, 47, 190, .18);
  border-bottom: 1px solid var(--purple);
  animation: suggestions-in .28s ease both;
}
.guest-banner.hidden { display: none; }
.guest-banner .gb-text { flex: 1; min-width: 0; }
.guest-banner .gb-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guest-banner .gb-terms { font-size: 11px; opacity: .72; line-height: 1.3; }
body[dir="ltr"] .guest-banner { direction: ltr; }
/* English UI: the free-tier strip (messages left / renew) reads left to right too. */
body[dir="ltr"] .fomo-banner { direction: ltr; }
.guest-banner .gb-btn {
  flex-shrink: 0;
  background: var(--purple); color: #fff;
  border: none; border-radius: 100px;
  padding: 6px 16px; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.guest-banner .gb-btn:hover { background: var(--purple-dim); }
.guest-banner.urgent {
  background: rgba(255, 92, 46, .16);
  border-bottom-color: #ff5c2e;
}
.guest-banner.urgent .gb-btn { background: #ff5c2e; }

.guest-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 5, 12, .78);
  backdrop-filter: blur(6px);
  padding: 22px;
}
.guest-modal.hidden { display: none; }
.guest-modal .gm-card {
  width: 100%; max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--line-2, #333348);
  border-radius: 20px;
  padding: 30px 26px 24px;
  text-align: center;
  animation: suggestions-in .25s ease both;
}
.guest-modal .gm-orb {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--purple) 46%, #4A1670);
  box-shadow: 0 0 26px var(--purple-glow);
}
.guest-modal h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text); }
.guest-modal p { font-size: .92rem; line-height: 1.6; color: var(--text-dim); margin-bottom: 22px; }
.guest-modal .gm-primary {
  width: 100%; padding: 13px;
  background: var(--purple); color: #fff;
  border: none; border-radius: 12px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  margin-bottom: 10px;
}
.guest-modal .gm-primary:hover { background: var(--purple-dim); }
.guest-modal .gm-ghost {
  width: 100%; padding: 11px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line, #2a2a3c); border-radius: 12px;
  font-size: .9rem; cursor: pointer;
}
.guest-modal .gm-ghost:hover { color: var(--text); }

/* ==========================================================================
   Kara 2.0 hologram mascot — real portrait (kara-holo.webp) as a live hologram
   Only while the model is Kara 2.0. States on #mascot:
   idle · .kh-listen · .thinking · .kh-positive · .kh-concern · .sleepy · .kh-glitch
   ========================================================================== */
.mascot.kara-holo {
  width: 110px; height: 132px; border-radius: 16px;
  filter: drop-shadow(0 0 12px rgba(110,231,255,.30)) drop-shadow(0 0 22px rgba(139,92,246,.28)) drop-shadow(0 8px 18px rgba(0,0,0,.5));
  animation: kh2-float 6s ease-in-out infinite;
}
.mascot.kara-holo:hover { transform: none; }
.mascot.kara-holo.thinking, .mascot.kara-holo.happy, .mascot.kara-holo.sleepy { animation: kh2-float 6s ease-in-out infinite; }
.mascot.kara-holo .mascot-zzz { top: -12px; color: #a5b4fc; }
@media (max-width: 700px) { .mascot.kara-holo { width: 84px; height: 101px; border-radius: 13px; } }
@keyframes kh2-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Kara stands in the chat area (script.js placeKara sets her size/position).
   The chat keeps room for her so she never covers text. */
.chat-container.kara-room-side   { padding-inline-end: calc(20px + var(--kara-room, 0px)); }
.chat-container.kara-room-bottom { padding-bottom: calc(12px + var(--kara-room, 0px)); }
.mascot.kara-holo { transition: width .3s ease, height .3s ease, left .3s ease, top .3s ease; border-radius: 18px; }
.mascot.kara-holo .kh2 { border-width: 1.5px; box-shadow: inset 0 0 24px rgba(139,92,246,.25); }

.kh2 { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, #1b1550 0%, #0c0a26 70%, #07061a 100%);
  border: 1px solid rgba(167,139,250,.55); box-sizing: border-box; isolation: isolate; }
.kh2-stage { position: absolute; inset: 0; perspective: 420px; transform-origin: 50% 82%;
  animation: kh2-breathe 4.4s ease-in-out infinite; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.kh2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  filter: saturate(1.08) contrast(1.05) brightness(1.02);
  -webkit-mask-image: radial-gradient(135% 105% at 50% 40%, #000 62%, rgba(0,0,0,.55) 82%, transparent 100%);
          mask-image: radial-gradient(135% 105% at 50% 40%, #000 62%, rgba(0,0,0,.55) 82%, transparent 100%);
  transform-origin: 50% 82%; transition: transform .6s cubic-bezier(.3,.7,.3,1), filter .6s ease; }
.kh2-stage > .kh2-img:first-child { animation: kh2-tilt 9s ease-in-out infinite; }
.kh2-rgb { opacity: 0; mix-blend-mode: screen; animation: none; }
.kh2-c { filter: sepia(1) saturate(6) hue-rotate(150deg) brightness(.9); }
.kh2-m { filter: sepia(1) saturate(6) hue-rotate(260deg) brightness(.9); }
.kh2-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  transform-origin: 50% 82%; animation: kh2-tilt 9s ease-in-out infinite; }
.kh2-fx * { transform-box: fill-box; }
.kh2-ring { fill: none; stroke: #a78bfa; stroke-width: 7; stroke-dasharray: 60 38; opacity: .55;
  animation: kh2-ring 12s linear infinite, kh2-ringpulse 3.6s ease-in-out infinite; }
.kh2-ring-glow { stroke: #8b5cf6; stroke-width: 22; stroke-dasharray: none; opacity: .28; animation: kh2-ringpulse 3.6s ease-in-out infinite; }
.kh2-dot { fill: #e0e7ff; filter: drop-shadow(0 0 10px #a78bfa); }
.kh2-logo { opacity: .35; animation: kh2-logo 3.2s ease-in-out infinite; mix-blend-mode: screen; }
.kh2-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(96,165,250,.35), rgba(139,92,246,.30) 60%, rgba(34,211,238,.25)); }
.kh2-scan { position: absolute; inset: -6px 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(180deg, rgba(190,235,255,.28) 0 1px, transparent 1px 3px);
  animation: kh2-scan 1.1s linear infinite; }
.kh2-sweep { position: absolute; left: 0; right: 0; top: -40%; height: 34%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(110,231,255,.16) 45%, rgba(167,139,250,.22) 55%, transparent);
  animation: kh2-sweep 6.5s linear infinite; }
.kh2-grain { position: absolute; inset: -20%; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: kh2-grain .45s steps(3) infinite; }
.kh2-gbar { position: absolute; left: -10%; right: -10%; height: 3px; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.kh2-gbar1 { top: 38%; background: rgba(110,231,255,.8); }
.kh2-gbar2 { top: 71%; height: 2px; background: rgba(232,121,249,.8); }
.kh2-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 14px rgba(110,231,255,.35), inset 0 0 3px rgba(167,139,250,.8);
  animation: kh2-edge 3.6s ease-in-out infinite; }
.kh2-hud { position: absolute; inset: 4px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(#6ee7ff,#6ee7ff) top left / 12px 1.5px no-repeat,
    linear-gradient(#6ee7ff,#6ee7ff) top left / 1.5px 12px no-repeat,
    linear-gradient(#6ee7ff,#6ee7ff) top right / 12px 1.5px no-repeat,
    linear-gradient(#6ee7ff,#6ee7ff) top right / 1.5px 12px no-repeat,
    linear-gradient(#a78bfa,#a78bfa) bottom left / 12px 1.5px no-repeat,
    linear-gradient(#a78bfa,#a78bfa) bottom left / 1.5px 12px no-repeat,
    linear-gradient(#a78bfa,#a78bfa) bottom right / 12px 1.5px no-repeat,
    linear-gradient(#a78bfa,#a78bfa) bottom right / 1.5px 12px no-repeat; }

@keyframes kh2-breathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.012) translateY(-1px); } }
@keyframes kh2-tilt { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.3deg); } }
@keyframes kh2-ring { to { stroke-dashoffset: -980; } }
@keyframes kh2-ringpulse { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes kh2-logo { 0%,100% { opacity: .25; } 50% { opacity: .6; } }
@keyframes kh2-scan { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes kh2-sweep { 0% { transform: translateY(0); } 100% { transform: translateY(420%); } }
@keyframes kh2-grain { 0% { transform: translate(0,0); } 33% { transform: translate(-6%,4%); } 66% { transform: translate(5%,-5%); } 100% { transform: translate(0,0); } }
@keyframes kh2-edge { 0%,100% { box-shadow: inset 0 0 12px rgba(110,231,255,.30), inset 0 0 3px rgba(167,139,250,.75); }
  50% { box-shadow: inset 0 0 18px rgba(110,231,255,.45), inset 0 0 4px rgba(167,139,250,.95); } }
/* a faint idle glitch every few seconds keeps the hologram alive */
.kh2-stage > .kh2-c { animation: kh2-idleglitch 7.3s infinite; }
@keyframes kh2-idleglitch { 0%,96%,100% { opacity: 0; transform: translateX(0); } 97% { opacity: .35; transform: translateX(2px); } 98% { opacity: .2; transform: translateX(-2px); } }

/* glitch burst on every state change */
.mascot.kh-glitch .kh2-rgb { animation: kh2-rgb .42s steps(2) 1; }
.mascot.kh-glitch .kh2-m { animation-delay: .05s; }
.mascot.kh-glitch .kh2-gbar1 { animation: kh2-bar .42s steps(2) 1; }
.mascot.kh-glitch .kh2-gbar2 { animation: kh2-bar .42s .08s steps(2) 1; }
.mascot.kh-glitch .kh2-stage > .kh2-img:first-child { filter: saturate(1.3) contrast(1.15) brightness(1.1); }
@keyframes kh2-rgb {
  0% { opacity: .55; transform: translateX(-3px); clip-path: inset(10% 0 55% 0); }
  35% { opacity: .5; transform: translateX(3px); clip-path: inset(48% 0 20% 0); }
  70% { opacity: .4; transform: translateX(-2px); clip-path: inset(70% 0 5% 0); }
  100% { opacity: 0; transform: translateX(0); clip-path: inset(0); } }
@keyframes kh2-bar { 0% { opacity: .9; transform: translateX(-6%); } 50% { opacity: .6; transform: translateX(5%); } 100% { opacity: 0; } }

/* listening (typing): leans in toward the user and tilts, ring brightens */
.mascot.kh-listen .kh2-stage { animation: none; transform: scale(1.045) translateY(-1px); }
.mascot.kh-listen .kh2-stage > .kh2-img:first-child, .mascot.kh-listen .kh2-fx { animation: none; transform: rotate(3.2deg); }
.mascot.kh-listen .kh2-ring { opacity: .85; }
.mascot.kh-listen .kh2-logo { opacity: .7; }

/* thinking (waiting for the answer): turns slightly aside, digital flicker, fast ring */
.mascot.kara-holo.thinking .kh2-stage { animation: kh2-think 2.6s ease-in-out infinite; }
.mascot.kara-holo.thinking .kh2-stage > .kh2-img:first-child { animation: kh2-flicker 2.2s infinite; }
.mascot.kara-holo.thinking .kh2-ring { animation-duration: 2.4s, 1.2s; opacity: .9; }
.mascot.kara-holo.thinking .kh2-gbar1 { animation: kh2-bar .3s steps(2) infinite 1.1s; }
.mascot.kara-holo.thinking .kh2-scan { animation-duration: .45s; opacity: .7; }
.mascot.kara-holo.thinking .kh2-rgb.kh2-c { animation: kh2-rgb 2.2s steps(2) infinite; }
@keyframes kh2-think { 0%,100% { transform: rotateY(0) rotateX(0); } 30% { transform: rotateY(-9deg) rotateX(4deg); } 65% { transform: rotateY(6deg) rotateX(3deg); } }
@keyframes kh2-flicker { 0%,100% { opacity: 1; } 7% { opacity: .78; } 9% { opacity: 1; } 51% { opacity: .85; } 53% { opacity: 1; } }

/* positive (answer arrived / agreement): a real nod, glow pulse on ring, logo and edge */
.mascot.kh-positive .kh2-stage { animation: kh2-nod 1.2s ease-in-out 1; }
.mascot.kh-positive .kh2-ring, .mascot.kh-positive .kh2-ring-glow { animation: kh2-flash 1.2s ease-out 1; }
.mascot.kh-positive .kh2-logo { animation: kh2-flash 1.2s ease-out 1; }
.mascot.kh-positive .kh2-edge { box-shadow: inset 0 0 24px rgba(167,139,250,.75), inset 0 0 4px #c4b5fd; }
@keyframes kh2-nod { 0%,100% { transform: rotateX(0) translateY(0); } 22% { transform: rotateX(11deg) translateY(1.5px); } 45% { transform: rotateX(-2deg); } 66% { transform: rotateX(7deg) translateY(1px); } }
@keyframes kh2-flash { 0% { opacity: .45; } 30% { opacity: 1; } 100% { opacity: .45; } }

/* concern (user frustrated / crisis): slow head shake, cooler and dimmer light */
.mascot.kh-concern .kh2-stage { animation: kh2-shake 2.8s ease-in-out 1; }
.mascot.kh-concern .kh2-stage > .kh2-img:first-child { filter: saturate(.8) contrast(1.05) brightness(.9) hue-rotate(-8deg); }
.mascot.kh-concern .kh2-ring { animation-duration: 20s, 4s; opacity: .35; }
.mascot.kh-concern .kh2-tint { background: linear-gradient(180deg, rgba(96,165,250,.45), rgba(59,130,246,.35)); }
@keyframes kh2-shake { 0%,100% { transform: rotateY(0) rotateZ(0); } 20% { transform: rotateY(-10deg) rotateZ(-1.5deg); } 45% { transform: rotateY(9deg) rotateZ(1.2deg); } 70% { transform: rotateY(-5deg) rotateZ(-.6deg); } }

/* sleepy (long idle): eyes half closed, dimmer projection, slow ring */
.mascot.kara-holo.sleepy { opacity: 1; }
.mascot.kara-holo.sleepy .kh2-ring { animation-duration: 30s, 7s; }
.mascot.kara-holo.sleepy .kh2-stage > .kh2-img:first-child { filter: saturate(.85) brightness(.82); }

@media (prefers-reduced-motion: reduce) {
  .mascot.kara-holo, .mascot.kara-holo * { animation: none !important; transition: none !important; }
}

/* layers: video clips (default) -> first still while loading -> face rig / photo as fallback */
.kh2-canvas, .kh2-fallback { display: none; }
.kh2-vid { opacity: 0; transition: opacity .3s ease; }
.kh2-vid.on { opacity: 1; }
.kh2.kh2-novideo .kh2-vid, .kh2.kh2-novideo .kh2-poster { display: none; }
.kh2.kh2-novideo .kh2-fallback { display: block; animation: kh2-tilt 9s ease-in-out infinite; }
.kh2.kh2-novideo.kh2-gl .kh2-canvas { display: block; }
.kh2.kh2-novideo.kh2-gl .kh2-fallback { display: none; }
/* the still-photo overlays (ring, logo glow, RGB copies) only fit the fallback photo */
.kh2:not(.kh2-novideo) .kh2-fx, .kh2:not(.kh2-novideo) .kh2-rgb { display: none; }
/* The scan sweep only while she is thinking; at rest (idle, talking, smiling)
   the video plays clean. The image fallback keeps its full hologram effects. */
.kh2:not(.kh2-novideo) .kh2-sweep { display: none; }
.mascot.thinking .kh2:not(.kh2-novideo) .kh2-sweep { display: block; animation-duration: 2.2s; }
/* with real video the face already moves: keep breathing and the listening lean,
   drop the 3D nod/shake/turn that the rig needed */
.mascot.kara-holo .kh2:not(.kh2-novideo) .kh2-stage { animation: kh2-breathe 4.4s ease-in-out infinite; }
.mascot.kh-listen .kh2:not(.kh2-novideo) .kh2-stage { animation: none; transform: scale(1.04) translateY(-1px); }
.mascot.kh-glitch .kh2-vid.on { animation: kh2-vglitch .42s steps(2) 1; }
@keyframes kh2-vglitch { 0% { transform: translateX(-2px); filter: hue-rotate(25deg) saturate(1.4); } 50% { transform: translateX(2px); } 100% { transform: none; filter: none; } }

/* ===== Guest trial: Kara in the signup popup and on the signup screen ===== */
/* The popup's orb becomes Kara's portrait. */
.guest-modal .gm-orb.gm-kara {
  width: 96px; height: 96px;
  background: #1a1030;
  overflow: hidden;
  border: 2px solid var(--purple);
  box-shadow: 0 0 0 4px rgba(123, 47, 190, .18), 0 0 30px var(--purple-glow);
}
.guest-modal .gm-orb.gm-kara img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  display: block;
}

/* Signup screen: hidden unless the visitor came from the trial. */
.auth-kara { display: none; }
body.from-guest .auth-kara {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
body.from-guest .auth-kara img {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  border: 2px solid var(--purple);
  box-shadow: 0 0 0 4px rgba(123, 47, 190, .18), 0 0 26px var(--purple-glow);
}
body.from-guest .auth-kara span {
  font-size: .88rem; line-height: 1.5; color: var(--text-dim); max-width: 280px;
}
body.from-guest .auth-logo { display: none; }
/* Google first, then the e-mail form. Order only - same buttons, same handlers. */
body.from-guest .auth-card > * { order: 5; }
body.from-guest .auth-card > #authKara { order: 0; }
body.from-guest .auth-card > #authTitle { order: 1; }
body.from-guest .auth-card > #authError { order: 2; }
body.from-guest .auth-card > #googleSignIn { order: 3; }
body.from-guest .auth-card > #googleDivider { order: 4; }
/* The from-trial card is taller: let the screen scroll (never cut off the
   signup button on short phones) and keep it clear of the language button. */
body.from-guest .auth-screen {
  overflow-y: auto;
  align-items: flex-start;
  padding: 60px 0 24px;
}
body.from-guest .auth-screen .auth-card { margin: auto; padding-top: 26px; padding-bottom: 26px; }
@media (max-height: 760px) {
  body.from-guest .auth-kara img { width: 68px; height: 68px; }
  body.from-guest .auth-card { gap: 10px; }
}