/* ═══════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════ */

:root, [data-theme="serenity"] {
  --bg:             #EEF4FB;
  --bg-warm:        #E6ECFA;
  --surface:        #FFFFFF;
  --surface-soft:   #E6ECFA;
  --surface-modal:  rgba(238,244,251,0.92);
  --border:         rgba(0,0,0,0.07);
  --border-mid:     rgba(0,0,0,0.11);
  --nav-bg:         rgba(238,244,251,0.82);
  --nav-border:     rgba(0,0,0,0.06);
  --drawer-bg:      #E6ECFA;
  --drawer-item-hover: #DEE6F8;

  --teal:           #A8C3EE;
  --teal-hover:     #8FB5E8;
  --accent-rgb:     168, 195, 238;

  --ink:            #1C1917;
  --ink-mid:        #57524D;
  --ink-soft:       #9A958F;
  --ink-faint:      #C2BDB7;

  --user-bg:        #1A2E48;
  --user-text:      #EDE8DF;

  --doc-bg:         #0F2040;
  --doc-text:       #EDE8DF;
  --doc-teal:       #A8C3EE;

  --btn-neutral-bg:    rgba(0,0,0,0.06);
  --btn-neutral-hover: rgba(0,0,0,0.10);
  --btn-neutral-text:  #57524D;

  --micro-bg:       rgba(255,255,255,0.95);
  --micro-border:   rgba(0,0,0,0.09);
  --micro-shadow:   0 2px 12px rgba(0,0,0,0.10);
}

[data-theme="vitality"] {
  --bg:             #F8F6FF;
  --bg-warm:        #F0EBFB;
  --surface:        #FFFFFF;
  --surface-soft:   #F0EBFB;
  --surface-modal:  rgba(248,246,255,0.92);
  --border:         rgba(0,0,0,0.07);
  --border-mid:     rgba(0,0,0,0.11);
  --nav-bg:         rgba(248,246,255,0.82);
  --nav-border:     rgba(0,0,0,0.06);
  --drawer-bg:      #F0EBFB;
  --drawer-item-hover: #E8E0F7;

  --teal:           #9B8FE8;
  --teal-hover:     #8A7DDA;
  --accent-rgb:     155, 143, 232;

  --ink:            #1C1917;
  --ink-mid:        #57524D;
  --ink-soft:       #9A958F;
  --ink-faint:      #C2BDB7;

  --user-bg:        #1A2E48;
  --user-text:      #EDE8DF;

  --doc-bg:         #0F2040;
  --doc-text:       #EDE8DF;
  --doc-teal:       #9B8FE8;

  --btn-neutral-bg:    rgba(0,0,0,0.06);
  --btn-neutral-hover: rgba(0,0,0,0.10);
  --btn-neutral-text:  #57524D;

  --micro-bg:       rgba(255,255,255,0.95);
  --micro-border:   rgba(0,0,0,0.09);
  --micro-shadow:   0 2px 12px rgba(0,0,0,0.10);
}

[data-theme="balance"] {
  --bg:             #FEF5F2;
  --bg-warm:        #F5EDEA;
  --surface:        #FFFFFF;
  --surface-soft:   #F5EDEA;
  --surface-modal:  rgba(254,245,242,0.92);
  --border:         rgba(0,0,0,0.07);
  --border-mid:     rgba(0,0,0,0.11);
  --nav-bg:         rgba(254,245,242,0.82);
  --nav-border:     rgba(0,0,0,0.06);
  --drawer-bg:      #F5EDEA;
  --drawer-item-hover: #EDE5E0;

  --teal:           #E0699A;
  --teal-hover:     #CA5884;
  --accent-rgb:     224, 105, 154;

  --ink:            #1C1917;
  --ink-mid:        #57524D;
  --ink-soft:       #9A958F;
  --ink-faint:      #C2BDB7;

  --user-bg:        #1A2E48;
  --user-text:      #EDE8DF;

  --doc-bg:         #0F2040;
  --doc-text:       #EDE8DF;
  --doc-teal:       #E0699A;

  --btn-neutral-bg:    rgba(0,0,0,0.06);
  --btn-neutral-hover: rgba(0,0,0,0.10);
  --btn-neutral-text:  #57524D;

  --micro-bg:       rgba(255,255,255,0.95);
  --micro-border:   rgba(0,0,0,0.09);
  --micro-shadow:   0 2px 12px rgba(0,0,0,0.10);
}

[data-theme="dark"] {
  --bg:             #0A1628;
  --bg-warm:        #0F2040;
  --surface:        #1A2E48;
  --surface-soft:   #213550;
  --surface-modal:  rgba(15,32,64,0.96);
  --border:         rgba(255,255,255,0.10);
  --border-mid:     rgba(255,255,255,0.16);
  --nav-bg:         rgba(10,22,40,0.92);
  --nav-border:     rgba(255,255,255,0.08);
  --drawer-bg:      #132338;
  --drawer-item-hover: #1E3550;

  --teal:           #12A09F;
  --teal-hover:     #0E8B8A;

  --ink:            #F0EBE0;
  --ink-mid:        #C8C0B4;
  --ink-soft:       #9A9088;
  --ink-faint:      #6E6860;

  --user-bg:        #1E3A58;
  --user-text:      #EDE8DF;

  --doc-bg:         #1A2E48;
  --doc-text:       #EDE8DF;
  --doc-teal:       #12A09F;

  --btn-neutral-bg:    rgba(255,255,255,0.10);
  --btn-neutral-hover: rgba(255,255,255,0.16);
  --btn-neutral-text:  #C8C0B4;

  --micro-bg:       rgba(25,42,68,0.98);
  --micro-border:   rgba(255,255,255,0.14);
  --micro-shadow:   0 2px 16px rgba(0,0,0,0.50);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { outline: none; }

html, body {
  height: 100%;
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════ */

#cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 16px;
  padding: 20px 22px;
  z-index: 9000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  animation: slideUp 0.4s cubic-bezier(0.16,1,0.3,1);
}

#cookie-banner.hidden { display: none; }

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cookie-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.cookie-header svg {
  width: 18px; height: 18px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.cookie-text {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 16px;
}

.cookie-text a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-btns {
  display: flex;
  gap: 10px;
}

.cookie-btn-primary {
  flex: 1;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cookie-btn-primary:hover { opacity: 0.85; }

.cookie-btn-secondary {
  flex: 1;
  background: var(--btn-neutral-bg);
  color: var(--btn-neutral-text);
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.cookie-btn-secondary:hover { background: var(--btn-neutral-hover); }

/* ═══════════════════════════════════════════
   SETUP SCREEN
═══════════════════════════════════════════ */

#setup {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

#setup.hidden { display: none; }

.setup-ambient {
  position: absolute;
  top: -120px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(12,124,123,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.setup-ambient-2 {
  position: absolute;
  bottom: -80px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(184,125,58,0.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* Morphing blobs */
.blob {
  position: absolute;
  filter: blur(45px);
  pointer-events: none;
  mix-blend-mode: lighten;
  opacity: 0.5;
}

.blob.primary {
  top: 10%;
  right: 5%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 35% 35%, rgb(var(--accent-rgb)), transparent 70%);
  animation: blobMorph1 8s ease-in-out infinite, blobFloat1 6s ease-in-out infinite;
}

.blob.secondary {
  bottom: 15%;
  left: 8%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 65% 65%, rgb(var(--accent-rgb)), transparent 70%);
  animation: blobMorph2 10s ease-in-out infinite, blobFloat2 8s ease-in-out infinite;
}

@keyframes blobMorph1 {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 70% 30% 66% 33% / 33% 66% 33% 66%; }
  75% { border-radius: 100% 60% 52% 37% / 72% 88% 12% 20%; }
}

@keyframes blobMorph2 {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  25% { border-radius: 70% 30% 46% 66% / 30% 74% 58% 42%; }
  50% { border-radius: 56% 44% 34% 66% / 66% 34% 66% 34%; }
  75% { border-radius: 45% 45% 34% 66% / 66% 34% 66% 34%; }
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(25px, -35px); }
  66% { transform: translate(-15px, 20px); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-30px, 25px); }
  66% { transform: translate(20px, -15px); }
}

/* Mindful blob pulse animations for theme onboarding */
@keyframes blobFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(40px, -50px) scale(1.35); }
  30% { transform: translate(-30px, 35px) scale(1.4); }
  50% { transform: translate(50px, -25px) scale(1.4); }
  70% { transform: translate(-45px, 45px) scale(1.32); }
  85% { transform: translate(25px, -40px) scale(1.35); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes blobFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(-50px, 40px) scale(1.38); }
  30% { transform: translate(35px, -45px) scale(1.4); }
  50% { transform: translate(-60px, 30px) scale(1.4); }
  70% { transform: translate(45px, -35px) scale(1.3); }
  85% { transform: translate(-35px, 50px) scale(1.35); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes blobFloat3 {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(30px, 50px) scale(1.35); }
  30% { transform: translate(-45px, -40px) scale(1.4); }
  50% { transform: translate(55px, 20px) scale(1.4); }
  70% { transform: translate(-40px, -50px) scale(1.33); }
  85% { transform: translate(35px, 35px) scale(1.35); }
  100% { transform: translate(0, 0) scale(1); }
}

.setup-blob-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.setup-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
}

.setup-blob.blob-1 {
  width: 280px;
  height: 280px;
  top: -80px;
  right: -60px;
  opacity: 0.25;
  animation: blobFloat1 8s ease-in-out infinite;
}

.setup-blob.blob-2 {
  width: 220px;
  height: 220px;
  bottom: -60px;
  left: -40px;
  opacity: 0.20;
  animation: blobFloat2 9s ease-in-out infinite 0.7s;
}

.setup-blob.blob-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 15%;
  opacity: 0.18;
  animation: blobFloat3 8.5s ease-in-out infinite 1.2s;
}

/* Theme-specific blob colors */
[data-theme="serenity"] .setup-blob.blob-1,
[data-theme="serenity"] .setup-blob.blob-3 {
  background: #A8C3EE;
}

[data-theme="serenity"] .setup-blob.blob-2 {
  background: #6E63C3;
}

[data-theme="vitality"] .setup-blob.blob-1,
[data-theme="vitality"] .setup-blob.blob-3 {
  background: #9B8FE8;
}

[data-theme="vitality"] .setup-blob.blob-2 {
  background: #8860D0;
}

[data-theme="balance"] .setup-blob.blob-1,
[data-theme="balance"] .setup-blob.blob-3 {
  background: #E0699A;
}

[data-theme="balance"] .setup-blob.blob-2 {
  background: #9B7FD9;
}

/* Skip button */
.onboard-skip {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  padding: 8px;
  z-index: 10;
}
.onboard-skip:hover { color: var(--ink); }

/* Cards container */
.onboard-cards {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Individual card */
.onboard-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 36px 60px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.onboard-card.active {
  opacity: 1;
  pointer-events: auto;
}

/* Illustration */
.onboard-illustration {
  width: 280px;
  height: 280px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboard-illustration lottie-player {
  width: 280px;
  height: 280px;
}

/* Card text */
.onboard-h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.25;
}

.onboard-h4 {
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}

.onboard-body {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.65;
  max-width: 280px;
}

.onboard-disclaimer {
  font-size: 11px;
  color: var(--ink-faint, var(--ink-soft));
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
  margin-top: 24px;
  opacity: 0.7;
}

.onboard-disclaimer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.onboard-card[data-card="3"] {
  padding-top: 90px;
}

/* Progress dots */
.onboard-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 20px 0 12px;
  flex-shrink: 0;
}

.onboard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-mid);
  transition: background 0.3s, transform 0.3s;
}

.onboard-dot.active {
  background: var(--teal);
  transform: scale(1.2);
}

/* Bottom area — name input on last card, next button on others */
.onboard-footer {
  padding: 0 36px max(28px, env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.onboard-next-btn {
  width: 100%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  padding: 15px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  letter-spacing: 0.2px;
}
.onboard-next-btn:hover { opacity: 0.85; }
.onboard-next-btn:active { transform: scale(0.98); }

/* Theme picker — minimal */
.theme-picker-minimal {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 12px;
}

.theme-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.theme-dot input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.theme-dot .dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  transition: all 0.2s ease;
  position: relative;
}

.theme-dot[data-theme="serenity"] .dot {
  background: linear-gradient(135deg, #A8C3EE 0%, #A8C3EE 100%);
}

.theme-dot[data-theme="vitality"] .dot {
  background: linear-gradient(135deg, #E0699A 0%, #E0699A 100%);
}

.theme-dot[data-theme="balance"] .dot {
  background: linear-gradient(135deg, #9B8FE8 0%, #9B8FE8 100%);
}

.theme-dot input:checked + .dot {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
}

.theme-dot:hover .dot {
  border-color: var(--ink);
}

.theme-dot .name {
  font-size: 13px;
  color: var(--ink-mid);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.theme-dot[data-theme="serenity"] .name {
  color: #A8C3EE;
}

.theme-dot[data-theme="vitality"] .name {
  color: #E0699A;
}

.theme-dot[data-theme="balance"] .name {
  color: #9B8FE8;
}

.theme-dot input:checked + .dot + .name {
  font-weight: 600;
}

/* Name card specifics */
.onboard-name-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.onboard-name-input:focus { border-color: var(--teal); }
.onboard-name-input::placeholder { color: var(--ink-faint); }

.setup-begin-btn {
  background: var(--btn-neutral-bg);
  color: var(--btn-neutral-text);
  border: 1px solid var(--border-mid);
  border-radius: 100px;
  padding: 13px 40px;
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.2px;
  animation: beginBreathe 3.2s ease-in-out infinite;
}
.setup-begin-btn:hover {
  background: var(--btn-neutral-hover);
  animation: none;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 0 18px 6px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.setup-begin-btn:active { transform: scale(0.97); animation: none; }

@keyframes beginBreathe {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0),    0 2px 8px rgba(0,0,0,0.04); }
  50%  { box-shadow: 0 0 18px 6px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0),    0 2px 8px rgba(0,0,0,0.04); }
}

.setup-label {
  font-size: 14px;
  color: var(--ink-mid);
  margin-bottom: 14px;
  text-align: center;
  font-weight: 400;
  width: 100%;
  max-width: 360px;
}

.setup-input {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 400;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 12px;
  -webkit-appearance: none;
}

.setup-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(12,124,123,0.10);
}
.setup-input::placeholder { color: var(--ink-faint); }
.setup-input[type="password"] { letter-spacing: 2px; font-size: 14px; }

.setup-btn {
  width: 100%;
  max-width: 360px;
  background: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.1s;
  margin-top: 4px;
}
.setup-btn:hover { opacity: 0.85; }
.setup-btn:active { transform: scale(0.98); }

.setup-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 18px;
  text-align: center;
  line-height: 1.6;
  max-width: 320px;
}

.setup-link {
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.error-msg {
  font-size: 13px;
  color: #C0504A;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 10px;
  max-width: 360px;
}

/* ═══════════════════════════════════════════
   LEFT DRAWER
═══════════════════════════════════════════ */

#drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

#drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(300px, 82vw);
  background: var(--drawer-bg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
  border-right: 1px solid var(--border);
}

#drawer.open { transform: translateX(0); }

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

.drawer-title {
  font-family: 'BIZ UDPMincho', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
}

.drawer-close {
  width: 30px; height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ink-soft);
  transition: background 0.15s;
}
.drawer-close:hover { background: var(--surface-soft); }
.drawer-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.drawer-new-chat {
  margin: 14px 16px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: none;
  color: var(--ink-mid);
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.drawer-new-chat:hover { background: var(--drawer-item-hover); }
.drawer-new-chat svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }

.drawer-section-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 20px 6px;
  flex-shrink: 0;
}

.drawer-chats {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 20px;
}

.drawer-chats::-webkit-scrollbar { width: 2px; }
.drawer-chats::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }

.drawer-bottom {
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

/* Sidebar/drawer nav — visible in both mobile drawer and persistent sidebar */
#drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 2px;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-mid);
  font-size: 14px;
  font-family: inherit;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
  opacity: 0.65;
}

.drawer-nav-item:hover {
  background: var(--drawer-item-hover);
  color: var(--ink);
  opacity: 1;
}

.drawer-nav-item.active {
  background: var(--drawer-item-hover);
  color: var(--ink);
  opacity: 1;
  font-weight: 500;
}

.drawer-nav-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-footer .theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
}

.drawer-footer .theme-toggle:hover { background: var(--drawer-item-hover); }

.drawer-chat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.drawer-chat-item:hover { background: var(--drawer-item-hover); }
.drawer-chat-item.active { background: var(--drawer-item-hover); }
.drawer-chat-item.active .drawer-chat-icon svg { fill: var(--ink); stroke: var(--ink); }
.drawer-chat-item.active .drawer-chat-text { color: var(--ink); font-weight: 600; }

/* Active conversation pill — floats above chat messages */
.convo-chip {
  display: none;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 5;
}
.convo-chip.visible {
  display: flex;
}
.convo-chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--surface-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 4px 12px 4px 10px;
  font-size: 11.5px;
  color: var(--ink-mid);
  max-width: 85%;
  overflow: hidden;
}
.convo-chip-label {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.convo-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-chat-icon {
  width: 16px; height: 16px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
  margin-top: 2px;
}

.drawer-chat-text {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drawer-chat-date {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.drawer-placeholder {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════ */

#app {
  display: none;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

#app.visible { display: flex; }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 12px;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger */
.hamburger {
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-mid);
  transition: background 0.15s;
  flex-shrink: 0;
}
.hamburger:hover { background: var(--surface-soft); }
.hamburger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.header-logo {
  font-family: 'BIZ UDPMincho', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.5px;
}

/* Presence indicator — grey tones, slightly larger */
.header-presence {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.1px;
}

.presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  animation: presencePulse 3.5s ease-in-out infinite;
  flex-shrink: 0;
  transition: background 0.3s;
}

.presence-dot.thinking {
  animation: presenceThinking 0.8s ease-in-out infinite;
}

@keyframes presencePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

@keyframes presenceThinking {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.35); }
}

#presence-label {
  transition: opacity 0.2s;
}
}

/* Theme toggle in header */
.theme-toggle {
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-soft);
  transition: background 0.15s;
  margin-left: 6px;
  gap: 6px;
  font-size: 13px;
}
.theme-toggle:hover { background: var(--surface-soft); }
.theme-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* ═══════════════════════════════════════════
   JOURNAL
═══════════════════════════════════════════ */

.journal-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--surface-soft);
  cursor: pointer;
  transition: background 0.15s;
}
.journal-entry:hover { background: var(--surface-soft); }
.journal-entry:hover .journal-entry-icon { background: #fff; }

.journal-entry-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.journal-entry-date {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.journal-entry-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-entry-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.journal-entry-action {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  transition: color 0.2s, opacity 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.journal-entry-action:hover { color: var(--teal); opacity: 1; }
.journal-entry-action.danger:hover { color: #C0504A; opacity: 1; }
.journal-entry-action.pin { color: var(--ink-soft); opacity: 0.4; }
.journal-entry-action.pin:hover { color: var(--ink-mid); opacity: 1; }
.journal-entry-action.pin.pinned { color: var(--teal); opacity: 1; }
.journal-entry-action.pin.pinned:hover { color: var(--teal); opacity: 1; }

.journal-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.journal-calendar-day.other-month {
  color: var(--ink-faint);
  opacity: 0.4;
}

.journal-calendar-day.has-entry {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--teal);
  font-weight: 600;
}

.journal-calendar-day.has-chat {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--teal);
  font-weight: 600;
  border-color: var(--teal);
}

.journal-calendar-day.today {
  border-color: var(--teal);
}

.journal-calendar-day:hover {
  border-color: var(--teal);
}

.journal-calendar-header-cell {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 8px 0;
}

.journal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

/* ═══════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════ */

#chat-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  position: relative;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

#messages::-webkit-scrollbar { width: 2px; }
#messages::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }

.message {
  display: flex;
  flex-direction: column;
  animation: messageIn 0.28s ease;
  margin-bottom: 10px;
  position: relative;
}

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

.message.sol  { align-self: flex-start; max-width: 100%; width: 100%; }
.message.user { align-self: flex-end; max-width: 82%; }

.message-sender {
  font-size: 11px;
  color: var(--teal);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.message.user .message-sender { display: none; }

/* Sol — no bubble, subtle left anchor */
.message.sol .bubble {
  background: none;
  border: none;
  border-left: 2px solid var(--surface-soft);
  padding: 0 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink);
}

/* Extra bottom clearance so absolute micro menu doesn't clip next message */
.message.sol {
  padding-bottom: 18px;
}

.message.sol .bubble p { margin-bottom: 8px; }
.message.sol .bubble p:last-child { margin-bottom: 0; }
.message.sol .bubble em { font-style: italic; color: var(--ink-mid); }

/* Action bubble */
.message.sol .bubble.action {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--teal);
  border-radius: 4px 12px 12px 4px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.65;
}

/* User bubble */
.message.user .bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 18px 4px 18px 18px;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

[data-theme="dark"] .message.user .bubble {
  background: var(--user-bg);
  color: var(--user-text);
  border-color: rgba(255,255,255,0.06);
}

/* Thinking phrase */
.thinking-phrase {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
  font-weight: 400;
  font-style: italic;
  animation: messageIn 0.25s ease;
  padding-left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.thinking-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  display: inline-block;
  animation: thinkingBounce 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── STATUS NOTE ─── */
.status-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.2px;
  padding: 2px 0 16px;
  animation: messageIn 0.28s ease;
}
.status-note::before,
.status-note::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  max-width: 48px;
}

/* ─── MICRO MENU ─── */
.message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: -26px;
  left: 60px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  height: 26px;
  z-index: 20;
  background: var(--bg);
  border-radius: 6px;
  padding: 0 2px;
}

.message.sol:hover .message-actions,
.message.sol:focus-within .message-actions,
.message.sol.show-actions .message-actions {
  opacity: 1;
  pointer-events: auto;
}

.msg-action-btn {
  width: 28px; height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.msg-action-btn:hover { background: var(--surface-soft); color: var(--ink); }
.msg-action-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.msg-action-btn.voted-up   { color: var(--teal); }
.msg-action-btn.voted-down { color: #C0504A; }

.msg-action-divider {
  width: 1px; height: 14px;
  background: var(--border-mid);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Toast */
#toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 400;
  padding: 9px 18px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  z-index: 5000;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Document output */
.message.sol .bubble.doc-output {
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px 16px 16px 16px;
  padding: 20px 22px;
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--teal);
  max-width: 100%;
}

.doc-output h1 { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; color: var(--ink); margin-bottom: 14px; font-weight: 400; }
.doc-output h2 { font-size: 11px; color: var(--teal); letter-spacing: 1.5px; text-transform: uppercase; margin: 16px 0 8px; font-weight: 500; }
.doc-output p  { margin-bottom: 10px; font-size: 14px; line-height: 1.65; color: var(--ink); }

.print-btn {
  margin-top: 14px;
  background: rgba(12,124,123,0.07);
  border: 1px solid rgba(12,124,123,0.22);
  border-radius: 8px;
  padding: 9px 16px;
  color: var(--teal);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.print-btn:hover { background: rgba(12,124,123,0.13); }

/* Session timestamp */
.session-timestamp {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  padding: 4px 0 20px;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════
   INPUT AREA
═══════════════════════════════════════════ */

#input-area {
  padding: 10px 16px max(20px, env(safe-area-inset-bottom));
  flex-shrink: 0;
  background: linear-gradient(to top, var(--bg) 75%, transparent);
  position: relative;
  z-index: 10;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 22px;
  padding: 10px 10px 10px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 3px rgba(var(--accent-rgb), 0.07);
}

#user-input {
  flex: 1;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  resize: none;
  max-height: 120px;
  line-height: 1.5;
  padding: 0;
}

#user-input::placeholder { color: var(--ink-faint); }

.input-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

#mic-btn {
  width: 36px; height: 36px;
  border-radius: 50%; background: none; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); transition: color 0.2s, background 0.2s;
}
#mic-btn:hover { color: var(--teal); background: rgba(12,124,123,0.08); }
#mic-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#send-btn {
  width: 36px; height: 36px;
  border-radius: 50%; background: var(--ink); border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity 0.2s, transform 0.1s;
}
#send-btn:hover { opacity: 0.8; }
#send-btn:active { transform: scale(0.92); }
#send-btn:disabled {
  background: transparent;
  border: 1.5px solid var(--border-mid);
  cursor: not-allowed;
}
#send-btn:disabled svg { opacity: 0.45; fill: var(--ink-soft); }
#send-btn svg {
  width: 14px; height: 14px;
  fill: var(--bg);
  display: block;
  margin: auto;
}

/* ─────────────────────────────────────────
   THREE-DOT BUTTON
───────────────────────────────────────── */
.dots-menu-btn {
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
  margin-left: 2px;
}
.dots-menu-btn:hover { background: var(--surface-soft); color: var(--ink); }
.dots-menu-btn svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────
   BOTTOM SHEET
───────────────────────────────────────── */
#bottom-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#bottom-sheet-overlay.open { opacity: 1; pointer-events: auto; }

#bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  z-index: 301;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
#bottom-sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-mid);
  border-radius: 2px;
  margin: 12px auto 4px;
}

.sheet-header {
  padding: 10px 20px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.sheet-title {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 3px;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
}
.sheet-item:hover { background: var(--surface-soft); }
.sheet-item svg { width: 18px; height: 18px; stroke: var(--ink-soft); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sheet-item.danger { color: #C0504A; }
.sheet-item.danger svg { stroke: #C0504A; }

/* Rename input — appears inside bottom sheet */
.rename-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 12px;
}
.rename-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}
.rename-input:focus { border-color: var(--teal); }
.rename-confirm-btn {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.rename-confirm-btn:active { opacity: 0.85; }

.sheet-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════
   BOTTOM NAV — translucent, understated
═══════════════════════════════════════════ */

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 20px;
  cursor: pointer;
  opacity: 0.38;
  transition: opacity 0.2s;
  position: relative;
  border-radius: 10px;
}

.nav-item:hover { opacity: 0.65; }
.nav-item.active { opacity: 1; }

.nav-item svg {
  width: 22px; height: 22px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Active nav: icon darkens, no dot */

.nav-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════
   PLACEHOLDER SCREENS
═══════════════════════════════════════════ */

.screen { display: none; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
.screen.active { display: flex; }
.screen-icon svg { width: 40px; height: 40px; stroke: var(--ink-faint); fill: none; stroke-width: 1; }
.screen-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; color: var(--ink); opacity: 0.4; }
.screen-sub { font-size: 13px; color: var(--ink-soft); opacity: 0.45; }

/* ═══════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Inline form inputs (memory/password offers) */
.inline-input {
  background: var(--surface-soft);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
  box-sizing: border-box;
  display: block;
  transition: border-color 0.2s;
}
.inline-input:focus { border-color: var(--teal); }

.inline-btn-row { display: flex; gap: 8px; }

.inline-btn-primary {
  background: var(--ink); border: none; border-radius: 8px;
  padding: 9px 16px; color: var(--bg); font-size: 13px;
  cursor: pointer; flex: 1; font-family: inherit; font-weight: 500;
  transition: opacity 0.2s;
}
.inline-btn-primary:hover { opacity: 0.82; }

.inline-btn-secondary {
  background: transparent; border: 1px solid var(--border-mid);
  border-radius: 8px; padding: 9px 16px; color: var(--ink-soft);
  font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background 0.2s;
}
.inline-btn-secondary:hover { background: var(--surface-soft); }

@media print {
  #setup, header, #input-area, nav, .message.user,
  .print-btn, .message-sender, .message-actions, #cookie-banner, #drawer, #drawer-overlay { display: none !important; }
  body { background: white; overflow: auto; }
  #app, #chat-screen, #messages { overflow: visible; height: auto; }
  .message.sol .bubble { color: black; }
  .doc-output { background: white !important; color: black !important; border: 1px solid #ccc !important; }
  .doc-output h1, .doc-output h2, .doc-output p { color: black !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── AUTH NUDGE BUBBLE ── */
#auth-nudge {
  padding: 0 16px 6px;
  animation: fadeIn 0.4s ease;
  display: flex;
  justify-content: center;
}

.auth-nudge-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 8px 10px 8px 14px;
  max-width: 360px;
  width: 100%;
}

.auth-nudge-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
}

.auth-nudge-google {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.auth-nudge-google:hover { background: #f8f8f8; }

.auth-nudge-dismiss {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.auth-nudge-dismiss:hover { color: var(--ink-soft); }

#auth-nudge.locked .auth-nudge-dismiss { display: none; }

/* ── DRAWER AUTH SECTION ── */
.drawer-auth {
  padding: 12px 16px 8px;
}

.drawer-auth-anon {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  line-height: 1.5;
}

.drawer-auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.drawer-auth-google-btn:hover { background: #f8f8f8; }

.drawer-auth-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.drawer-auth-info {
  flex: 1;
  min-width: 0;
}

.drawer-auth-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-auth-email {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-signout-btn {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0;
  flex-shrink: 0;
}
.drawer-signout-btn:hover { color: var(--ink-soft); }


.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
  transition: background 0.15s, transform 0.1s;
}
.google-btn:hover { background: #f8f8f8; }
.google-btn:active { transform: scale(0.98); }
.google-btn svg { flex-shrink: 0; }

/* ── SAVE PROMPT SKIP LINK ── */
.save-skip-btn {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 8px 0 2px;
  width: 100%;
  text-align: center;
  font-family: inherit;
}
.save-skip-btn:hover { color: var(--ink-soft); }

/* ── HEADER LOGO MARK ── */
.header-logo {
  display: flex;
  align-items: center;
  gap: 7px;
}

.header-mark {
  width: 20px;
  height: 20px;
  color: var(--teal);
  flex-shrink: 0;
  opacity: 0.9;
}

/* ── CONNECTION ERROR ── */
#connection-error {
  margin: 4px 16px 8px;
  animation: fadeIn 0.3s ease;
}

.connection-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 10px 12px 10px 14px;
}

.connection-error-icon {
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.connection-error-msg {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
}

.connection-error-retry {
  background: var(--btn-neutral-bg);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--btn-neutral-text);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.connection-error-retry:hover { background: var(--btn-neutral-hover); }


/* ─────────────────────────────────────────
   ACTIVITY SUGGESTION CARD
───────────────────────────────────────── */
.activity-suggestion-card {
  margin: 8px 0 4px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.activity-suggestion-inner {
  background: var(--surface-soft);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--teal);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-suggestion-icon {
  color: var(--teal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.activity-suggestion-text {
  flex: 1;
}

.activity-suggestion-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.activity-suggestion-sub {
  font-size: 12px;
  color: var(--ink-soft);
}

.activity-suggestion-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.activity-try-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.activity-try-btn:hover { background: var(--teal-dark, #00a896); }

.activity-dismiss-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s;
}
.activity-dismiss-btn:hover { color: var(--ink); }

/* ─────────────────────────────────────────
   ACTIVITY PANEL
───────────────────────────────────────── */
.activity-panel {
  margin: 12px 0;
  background: var(--surface-soft);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  overflow: hidden;
}

.activity-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--surface);
}

.activity-panel-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.activity-panel-progress {
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.activity-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.activity-panel-close:hover { color: var(--ink); }

.activity-panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-panel-prompt {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  font-weight: 500;
}

.activity-panel-textarea {
  width: 100%;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  resize: none;
  line-height: 1.6;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.activity-panel-textarea:focus {
  outline: none;
  border-color: var(--teal);
}

.activity-panel-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-mid);
  justify-content: flex-end;
}

.activity-nav-btn {
  border: none;
  border-radius: 20px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.activity-nav-btn.primary {
  background: var(--teal);
  color: #fff;
}
.activity-nav-btn.primary:hover { background: var(--teal-dark, #00a896); }
.activity-nav-btn.secondary {
  background: var(--btn-neutral-bg);
  color: var(--btn-neutral-text);
}
.activity-nav-btn.secondary:hover { background: var(--btn-neutral-hover); }

/* ─────────────────────────────────────────
   ACTIVITY COMPLETE CARD
───────────────────────────────────────── */
.activity-complete-card {
  margin: 12px 0;
  background: var(--surface-soft);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--teal);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.activity-complete-icon {
  width: 28px;
  height: 28px;
  background: var(--teal);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.activity-complete-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.activity-complete-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────
   PWA Banners — Update + Install
───────────────────────────────────────── */

.pwa-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0 16px max(16px, env(safe-area-inset-bottom)) 16px;
  pointer-events: none;
}

.pwa-banner.visible {
  transform: translateY(0);
  pointer-events: all;
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.pwa-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  line-height: 1.3;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-btn-primary {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.pwa-btn-primary:hover { opacity: 0.85; }
.pwa-btn-primary:active { opacity: 0.7; }

.pwa-btn-dismiss {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 9px 4px;
  white-space: nowrap;
  transition: color 0.15s;
}

.pwa-btn-dismiss:hover { color: var(--ink); }

/* ─────────────────────────────────────────
   RESPONSIVE — iPad / Desktop (≥768px)
   Drawer becomes persistent sidebar.
   Bottom nav hides. Hamburger hides.
───────────────────────────────────────── */

@media (min-width: 768px) {

  /* Pin the drawer open — no overlay, no transform */
  #drawer {
    position: fixed;
    transform: translateX(0) !important;
    width: 260px;
    border-right: 1px solid var(--border);
    z-index: 10;
  }

  /* Hide overlay and close/hamburger controls */
  #drawer-overlay { display: none !important; }
  .drawer-close   { display: none; }
  .hamburger      { display: none; }

  /* Shift the app shell to the right of the sidebar */
  #app {
    margin-left: 260px;
  }

  /* Also shift drawers/sheets that sit outside #app */
  #toast {
    left: calc(260px + 16px);
  }

  /* Hide bottom nav — navigation lives in sidebar */
  nav {
    display: none;
  }

  /* At wide breakpoint, drawer-nav already has correct padding from global styles */
  #drawer-nav {
    border-top: none; /* border is on drawer-bottom instead */
  }


  /* Constrain chat content width on large screens */
  #messages {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  #input-area {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ── Wider desktop — a little more sidebar breathing room ── */
@media (min-width: 1200px) {
  #drawer { width: 280px; }
  #app    { margin-left: 280px; }
  #toast  { left: calc(280px + 16px); }
}

/* ─────────────────────────────────────────
   DRAWER — See all / See less toggle
───────────────────────────────────────── */
.drawer-see-all {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 20px 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}
.drawer-see-all:hover { color: var(--ink); }

/* ─────────────────────────────────────────
   AUTH MODAL
───────────────────────────────────────── */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.auth-modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.auth-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(420px, 92vw);
  background: var(--surface);
  border-radius: 20px;
  padding: 36px 32px 32px;
  z-index: 501;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.auth-modal.visible {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%);
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-soft);
  transition: background 0.15s;
}
.auth-modal-close:hover { background: var(--surface-soft); }
.auth-modal-close svg { width: 16px; height: 16px; }

.auth-modal-logo {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
}

.auth-modal-tagline {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 24px;
}

.auth-modal-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  border: none;
}
.auth-modal-btn:active { transform: scale(0.98); }

.auth-modal-google {
  background: white;
  color: #1f1f1f;
  border: 1px solid var(--border-mid) !important;
}
.auth-modal-google:hover { opacity: 0.85; }

.auth-modal-apple {
  background: #000;
  color: white;
}
.auth-modal-apple:hover { opacity: 0.85; }

.auth-modal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--ink-faint);
  font-size: 12px;
}
.auth-modal-divider::before,
.auth-modal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-modal-input {
  width: 100%;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.auth-modal-input:focus { border-color: var(--teal); }
.auth-modal-input::placeholder { color: var(--ink-faint); }

.auth-modal-email-btn {
  background: var(--teal);
  color: white;
  margin-top: 4px;
  margin-bottom: 14px;
}
.auth-modal-email-btn:hover { opacity: 0.88; }
.auth-modal-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-modal-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.auth-modal-toggle-btn {
  background: none;
  border: none;
  color: var(--teal);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.auth-modal-toggle-btn:hover { text-decoration: underline; }

.auth-modal-error {
  font-size: 13px;
  color: #e05252;
  text-align: center;
  margin-top: 10px;
  min-height: 18px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════
   SPACES
═══════════════════════════════════════════ */

/* Spaces screen header */
.spaces-header {
  width: 100%;
  padding: 24px 20px 12px;
  border-bottom: 1px solid var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.spaces-header-left {
  flex: 1;
  min-width: 0;
}
.spaces-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.spaces-header-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.spaces-new-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  height: 36px;
  padding: 0 14px;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.spaces-new-btn svg {
  width: 14px;
  height: 14px;
  stroke: white;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  flex-shrink: 0;
}

/* Space card */
.space-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.space-card:hover { background: var(--surface-soft); }
.space-card:active { background: var(--surface-soft); }

.space-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.space-card-icon svg {
  width: 20px; height: 20px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.space-card-body { flex: 1; min-width: 0; }
.space-card-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.space-card-count {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.space-card-menu {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.15s;
}
.space-card-menu:hover { background: var(--surface-soft); }
.space-card-menu svg { width: 16px; height: 16px; }

/* Spaces empty state */
.spaces-empty {
  padding: 60px 32px;
  text-align: center;
}
.spaces-empty-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Space selector sheet */
#space-selector-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
#space-selector-overlay.open { opacity: 1; pointer-events: auto; }

#space-selector-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 901;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  max-height: 70vh;
  overflow-y: auto;
}
#space-selector-sheet.open { transform: translateY(0); }

.space-selector-empty {
  padding: 20px 20px 8px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Drawer chat item three-dot button */
.drawer-chat-menu-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.drawer-chat-item:hover .drawer-chat-menu-btn { opacity: 1; }
.drawer-chat-menu-btn svg { width: 14px; height: 14px; }

/* Always show on touch devices */
@media (hover: none) {
  .drawer-chat-menu-btn { opacity: 0.4; }
}

/* Inline floating menu (space card actions) */
.inline-menu {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  min-width: 150px;
  overflow: hidden;
}
.inline-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.inline-menu-item:hover { background: var(--surface-soft); }
.inline-menu-item.danger { color: #C0504A; }

/* Space detail view */
#space-detail-view {
  display: none;
}

/* New conversation button inside a Space detail */
.space-new-convo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 20px;
  padding: 13px 16px;
  background: var(--surface-soft);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--teal);
  cursor: pointer;
  transition: background 0.15s;
}
.space-new-convo-btn:hover { background: var(--border-mid); }
.space-new-convo-btn:active { background: var(--border-mid); }
.space-new-convo-btn svg {
  width: 16px; height: 16px;
  stroke: var(--teal);
  flex-shrink: 0;
}

/* Dedicated drawer conversation context sheet */
#drawer-ctx-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
#drawer-ctx-sheet-overlay.open { opacity: 1; pointer-events: auto; }

#drawer-ctx-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 401;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#drawer-ctx-sheet.open { transform: translateY(0); }

/* Spaces create sheet */
#spaces-create-overlay,
#spaces-premium-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 402;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
#spaces-create-overlay.open,
#spaces-premium-overlay.open { opacity: 1; pointer-events: auto; }

#spaces-create-sheet,
#spaces-premium-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 403;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#spaces-create-sheet.open,
#spaces-premium-sheet.open { transform: translateY(0); }