/* Talk — redesign layer on the chat page (2026-10-08). Loaded after
   chat-redesign.css; everything is scoped to body.chat-page.dr-talk so removing
   the class restores the old look. Light text only.
   The prototype's Talk screen (.dr-tk, built by /js/talk-redesign.js) —
   Voice and Type — over the chat, on phones and (since 2026-10-09) desktop,
   where it sits under the top tab bar in a centred column. */
body.chat-page.dr-talk { background: #0b0d12; color: #ece9e2; font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
body.chat-page.dr-talk::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 75vh; pointer-events: none; z-index: 0;
  background: radial-gradient(110% 55% at 50% -10%, rgba(var(--dr-c), .22) 0%, rgba(11,13,18,0) 65%); transition: background .6s ease; }
body.chat-page.dr-talk .chat-container, body.chat-page.dr-talk .header { position: relative; z-index: 1; }

/* headings + stage head */
body.chat-page.dr-talk .stage-head h1, body.chat-page.dr-talk .welcome-title { font-family: 'Fraunces', Georgia, serif; font-weight: 400; color: #ece9e2; }
body.chat-page.dr-talk .session-meta { color: #8f8b84; }
body.chat-page.dr-talk .end-session-btn { color: #ece9e2; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); border-radius: 999px; }

/* messages: coach replies read like spoken captions, yours as light glass */
body.chat-page.dr-talk .message.companion { background: transparent; border: none; box-shadow: none; color: #f1eee8;
  font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; line-height: 1.55; padding-left: 14px; border-left: 2px solid rgba(var(--dr-c), .7); border-radius: 0; }
body.chat-page.dr-talk .message.companion * { color: inherit; }
body.chat-page.dr-talk .message.user { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 20px 20px 6px 20px; }
body.chat-page.dr-talk .message.user * { color: inherit; }
body.chat-page.dr-talk .message.system { color: #b4b0a8; }
body.chat-page.dr-talk .step-saved-note { color: rgb(var(--dr-c)) !important; opacity: 1 !important; font-family: 'Manrope', sans-serif; font-weight: 700; }
body.chat-page.dr-talk .session-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #ece9e2; }
body.chat-page.dr-talk .session-card-actions .btn-primary { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* voice dock */
body.chat-page.dr-talk .voice-dock { background: rgba(18,20,27,.86); border: 1px solid rgba(255,255,255,.08); border-radius: 28px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.chat-page.dr-talk .voice-dock .hint { color: #b4b0a8; font-family: 'Manrope', sans-serif; font-style: normal; }
body.chat-page.dr-talk .voice-dock .text-input { color: #fff; }
body.chat-page.dr-talk .voice-dock .mic-btn { background: rgb(var(--dr-c-deep)); border: 2px solid rgb(var(--dr-c)); color: #fff;
  box-shadow: 0 0 30px rgba(var(--dr-c), .45); }
body.chat-page.dr-talk .voice-dock .mic-btn * { color: #fff; stroke: #fff; }
body.chat-page.dr-talk .voice-dock .mode-btn, body.chat-page.dr-talk .voice-dock .send-btn { color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); }

/* ── the prototype's Talk screen (all widths; desktop sizing below) ───── */
#drTalk { display: none !important; }   /* the old layer (pre-themes); talk-redesign.js no longer builds it */
@media all {
  body.chat-page.dr-talk { overflow: hidden; }
  body.chat-page.dr-talk.dr-has-tabbar { padding-bottom: 0; }
  body.chat-page.dr-talk .m-comp-strip-wrap,
  body.chat-page.dr-talk .stage-head,
  body.chat-page.dr-talk .welcome-message,
  body.chat-page.dr-talk .mood-gutter,
  body.chat-page.dr-talk .step-saved-note { display: none !important; }

  /* History sheet */
  .dr-tk-sheet { position: fixed; inset: 0; z-index: 60; }
  .dr-tk-sheet[hidden] { display: none; }
  .dr-tk-sheetbg { position: absolute; inset: 0; background: rgba(5,6,9,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .dr-tk-sheetin { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; display: flex; flex-direction: column; gap: 12px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #12141b;
    border-top: 1px solid rgba(255,255,255,.1); animation: drTkRise .35s cubic-bezier(.2,.8,.2,1) both; }
  .dr-tk-sheethead { display: flex; align-items: center; justify-content: space-between; }
  .dr-tk-sheethead b { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; color: #ece9e2; }
  .dr-tk-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #ece9e2; font-size: 15px; cursor: pointer; }
  .dr-tk-now { display: flex; gap: 8px; flex-wrap: wrap; }
  .dr-tk-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a7a39b; margin-top: 4px; }
  .dr-tk-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding-bottom: 4px; }
  .dr-tk-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 16px; text-align: left;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #ece9e2; cursor: pointer; }
  .dr-tk-item.on { border-color: rgba(var(--dr-c), .6); background: rgba(var(--dr-c), .1); }
  .dr-tk-dots { display: flex; flex: none; }
  .dr-tk-dots .dr-tk-dot + .dr-tk-dot { margin-left: -8px; }
  .dr-tk-dot { position: relative; width: 22px; height: 22px; flex: none; }
  .dr-tk-dot .dr-orb { position: absolute; inset: 0; width: auto; height: auto; box-shadow: none; }
  .dr-tk-itxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dr-tk-ititle { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dr-tk-imeta { font-size: 12px; color: #b4b0a8; }
  .dr-tk-empty { padding: 18px 4px; color: #b4b0a8; font-size: 14px; text-align: center; }

  .dr-tk-card { border-radius: 22px; padding: 14px 16px; background: rgba(16,18,24,.92); border: 1px solid rgb(var(--dr-c)); display: flex; flex-direction: column; gap: 10px; animation: drTkRise .5s cubic-bezier(.2,.8,.2,1) both; }
  .dr-tk-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--dr-c)); }
  .dr-tk-kicker svg { width: 14px; height: 14px; }
  .dr-tk-cardtext { color: #ece9e2; font-size: calc(15px * var(--dr-ts, 1)); line-height: 1.45; }
  .dr-tk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .dr-tk-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: none; background: rgb(var(--dr-c-deep)); color: #fff;
    box-shadow: inset 0 0 0 1.5px rgb(var(--dr-c)); font-weight: 700; font-size: 13px; cursor: pointer; }
  .dr-tk-btn.ghost { background: transparent; box-shadow: none; border: 1px solid rgba(255,255,255,.16); color: #c9c5bd; font-weight: 600; }
  .dr-tk-btn:disabled { opacity: 1; cursor: default; }
  .dr-tk-saved { font-size: 13px; font-weight: 700; color: rgb(var(--dr-c)); }

  body.chat-page.dr-talk .voice-dock .mic-btn { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* push-to-talk is a long press */
  body.chat-page.dr-talk main.chat-container { display: none !important; }
  body.chat-page.dr-talk.dr-tk-typing main.chat-container { display: flex !important; position: fixed; left: 0; right: 0;
    top: calc(env(safe-area-inset-top, 0px) + 122px); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 4; background: transparent; }
  body.chat-page.dr-talk.dr-tk-typing .chat-stage { background: transparent; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages { display: flex !important; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 20px !important; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages > * { max-width: 100%; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .msg-role { display: none; }
  /* a different coach than the reply before (a handoff): say who's speaking now */
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.companion.dr-coach-change .msg-role {
    display: block; margin: 0 0 4px 36px; font: 700 11px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--dr-c)); }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message { margin: 0; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.user { align-self: flex-end; max-width: 78%; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.user .bubble { background: rgba(255,255,255,.16); border: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #fff;
    padding: 11px 15px; border-radius: 20px 20px 6px 20px; font-size: calc(15px * var(--dr-ts, 1)); line-height: 1.45; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.companion { align-self: flex-start; position: relative; max-width: 92%; font-family: 'Manrope', system-ui, sans-serif; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.companion::before { content: ''; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, rgb(var(--dr-c)) 45%, rgb(var(--dr-c-deep)) 100%); }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.companion .bubble { background: none; border: none; border-radius: 0; padding: 0 0 0 36px; font-size: calc(15px * var(--dr-ts, 1)); line-height: 1.55; color: #ece9e2; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.system .bubble { border: none; background: none; color: #b4b0a8; padding: 0; text-align: center; font-size: 13px; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .session-card { align-self: stretch; }
  .dr-tk-tstep { margin: 10px 0 0 36px; border-radius: 18px; padding: 12px 14px; background: rgba(255,255,255,.05); border: 1px solid rgb(var(--dr-c));
    display: flex; flex-direction: column; gap: 6px; }
  .dr-tk-tstep .dr-tk-actions { margin-top: 4px; }
  .dr-tk-tstep .dr-tk-btn { min-height: 36px; padding: 0 14px; }

  body.chat-page.dr-talk.dr-tk-typing .voice-dock { margin: 0 !important; padding: 8px 16px 12px !important; display: flex; align-items: flex-end; gap: 10px;
    background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; max-width: none; width: auto; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .mic-btn, body.chat-page.dr-talk.dr-tk-typing .voice-dock .mode-btn { display: none !important; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .voice-field { flex: 1; display: flex; align-items: center; min-height: 52px; border-radius: 26px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 0 18px; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .text-input { display: block; width: 100%; background: none; border: none; outline: none; color: #ece9e2;
    font-size: calc(16px * var(--dr-ts, 1)); font-family: inherit; padding: 0; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .text-input::placeholder { color: #a7a39b; font-style: normal; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .send-btn { display: flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none;
    border-radius: 50%; border: 2px solid rgb(var(--dr-c)); background: rgb(var(--dr-c-deep)); color: #fff; opacity: .55; pointer-events: none; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock.has-text .send-btn { opacity: 1; pointer-events: auto; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock .send-btn svg { width: 20px; height: 20px; }
}
/* ── desktop: under the 64px top bar, a centred column ─────────────────── */
@media (min-width: 761px) {
  body.chat-page.dr-talk.dr-has-tabbar { padding-top: 0; }
  /* History: a panel on the right instead of a bottom sheet */
  .dr-tk-sheetin { left: auto; top: 64px; width: min(420px, 100%); max-height: none; border-radius: 0; border-top: none;
    border-left: 1px solid rgba(255,255,255,.1); padding: 20px; animation: drTkSlide .3s cubic-bezier(.2,.8,.2,1) both; }

  /* Type: the thread and input in the same centred column */
  body.chat-page.dr-talk.dr-tk-typing main.chat-container { top: calc(64px + 140px); bottom: 0; left: max(0px, calc(50% - 400px)); right: max(0px, calc(50% - 400px));
    height: auto; min-height: 0; }
  body.chat-page.dr-talk.dr-tk-typing .left-rail { display: none !important; }
  body.chat-page.dr-talk.dr-tk-typing .chat-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  body.chat-page.dr-talk.dr-tk-typing .voice-dock { padding: 8px 20px 24px !important; }
  body.chat-page.dr-talk.dr-tk-typing .chat-messages .message.user { max-width: 70%; }
}
/* ── suggestion pop-ups (healing.js .dsp-notification: practice, habit,
   pattern, ripple) in the Talk card style, 2026-10-09: coach orb instead of
   the emoji, frosted buttons with white text. Above the mic and tab bar. ── */
body.chat-page.dr-talk .dsp-notification { right: 24px; bottom: 32px; max-width: 380px; padding: 16px 18px; gap: 12px; border-radius: 22px;
  background: rgba(16,18,24,.94); border: 1px solid rgb(var(--dr-c)); box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #ece9e2; font-family: 'Manrope', system-ui, sans-serif; }
body.chat-page.dr-talk .dsp-notification .notification-icon { font-size: 0; width: 30px; height: 30px; flex: none; border-radius: 50%; margin-top: 2px;
  background: radial-gradient(circle at 35% 30%, #fff 0%, rgb(var(--dr-c)) 42%, rgb(var(--dr-c-deep)) 100%); box-shadow: 0 0 18px rgba(var(--dr-c), .45); }
body.chat-page.dr-talk .dsp-notification .notification-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--dr-c)); margin-bottom: 6px; }
body.chat-page.dr-talk .dsp-notification .notification-body { color: #ece9e2; font-size: 15px; }
body.chat-page.dr-talk .dsp-notification .notification-body strong { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 18px; }
body.chat-page.dr-talk .dsp-notification .ritual-duration { background: rgba(255,255,255,.08); color: #c9c5bd; border: 1px solid rgba(255,255,255,.12);
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
body.chat-page.dr-talk .dsp-notification p, body.chat-page.dr-talk .dsp-notification .notification-message { color: #c9c5bd; font-size: 14px; line-height: 1.45; }
body.chat-page.dr-talk .dsp-notification .notification-actions { padding-left: 42px; margin-top: 10px; }
body.chat-page.dr-talk .dsp-notification .notification-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font: 700 13px 'Manrope', sans-serif; }
body.chat-page.dr-talk .dsp-notification .notification-btn.primary { background: rgb(var(--dr-c-deep)); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(var(--dr-c)); }
body.chat-page.dr-talk .dsp-notification .notification-btn.primary:hover { transform: none; box-shadow: inset 0 0 0 1.5px rgb(var(--dr-c)), 0 0 18px rgba(var(--dr-c), .35); }
body.chat-page.dr-talk .dsp-notification .notification-btn.secondary { background: transparent; color: #ece9e2; border: 1px solid rgba(255,255,255,.16); }
@media (max-width: 760px) {
  body.chat-page.dr-talk .dsp-notification { left: 12px; right: 12px; max-width: none;
    bottom: calc(84px + 96px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes drTkSlide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes drTkMorph { 0%,100% { border-radius: 43% 57% 61% 39% / 47% 42% 58% 53%; } 33% { border-radius: 58% 42% 40% 60% / 55% 61% 39% 45%; }
  66% { border-radius: 40% 60% 52% 48% / 38% 52% 48% 62%; } }
@keyframes drTkSpin { to { transform: rotate(360deg); } }
@keyframes drTkRing { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes drTkPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes drTkShimmer { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.35) saturate(1.3); } }
@keyframes drTkBar { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes drTkPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes drTkDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,40px); } }
@keyframes drTkDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-60px); } }
@keyframes drTkCapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drTkRise { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dr-tk *, .dr-tk { animation: none !important; } }

/* ── Sign-in (redesign 2026-10-08) — #loginScreen.dr-login, all widths ───── */
.login-screen.dr-login { background: #0b0d12; overflow-y: auto; align-items: flex-start; font-family: 'Manrope', system-ui, -apple-system, sans-serif; color: #ece9e2; }
.login-screen.dr-login::before { background: radial-gradient(110% 55% at 50% -10%, rgba(143,199,154,.24) 0%, rgba(11,13,18,0) 65%); }
.login-screen.dr-login::after { display: none; }
.dr-login-in { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: auto; box-sizing: border-box;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.dr-login-orbit { position: relative; width: min(230px, 60vw); aspect-ratio: 1; margin-bottom: 6px; }
.dr-login-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); animation: drTkSpin 90s linear infinite; }
.dr-login-ring .dr-orb { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; box-shadow: 0 0 18px rgba(var(--dr-c), .5);
  animation: drTkSpin 90s linear infinite reverse; }
.dr-login-mark { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; filter: drop-shadow(0 0 22px rgba(255,255,255,.18)); }
.dr-login-mark img { width: 100%; height: 100%; }
.dr-login-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 2.6rem; line-height: 1; color: #ece9e2; letter-spacing: -.01em; }
.dr-login-sub { margin: 0; font-size: 1.05rem; font-weight: 600; color: #ece9e2; }
.dr-login-text { margin: 4px 0 10px; font-size: .95rem; line-height: 1.6; color: #c9c5bd; }
.dr-login-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 20px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14); color: #fff;
  font: 700 1rem 'Manrope', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: background .2s ease, transform .15s ease; }
.dr-login-google:hover { background: rgba(255,255,255,.2); }
.dr-login-google:active { transform: scale(.98); }
.dr-login-google:focus-visible { outline: 2px solid #ece9e2; outline-offset: 3px; }
.dr-login-fine { margin: 0; font-size: .8rem; line-height: 1.55; color: #a7a39b; }
.dr-login-fine a { color: #ece9e2; }
@media (prefers-reduced-motion: reduce) { .dr-login-ring, .dr-login-ring .dr-orb { animation: none; } }

/* ══ Themes (2026-10-10): Tariq's three themes are the Talk screen ═══════
   /js/talk-themes.js draws it in a shadow root (#drThemes); the old layer
   above (#drTalk) stays hidden and only runs the voice/thread logic. Type
   mode: the app's thread and text box sit over the theme's dimmed scene. */
#drThemes { position: fixed; inset: 0; z-index: 2; }
#drThemes.raised { z-index: 60; }
body.dr-themed.spa-overlay #drThemes { visibility: hidden; }
body.chat-page.dr-talk.dr-themed #drTalk { display: none !important; }
body.chat-page.dr-talk.dr-themed { background: #0a0710; }
body.chat-page.dr-talk.dr-themed::before { display: none; }

/* tab bar: History + Change view on the right (desktop) */
.dr-th-tools { display: none; }
@media (min-width: 761px) {
  body.dr-themed .dr-th-tools { display: flex; gap: 8px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
  body.dr-themed.spa-overlay .dr-th-tools { display: none; }
  .dr-th-tbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; justify-content: center; padding: 0 10px;
    border-radius: 999px; color: #ece9e2; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); font: 500 14px 'Inter', system-ui, sans-serif; cursor: pointer; }
  .dr-th-tbtn.wide { padding: 0 16px; }
  .dr-th-tbtn:hover { border-color: rgba(var(--dr-c), .8); }
  .dr-th-tbtn svg { width: 18px; height: 18px; }
  .dr-th-tbtn:focus-visible { outline: 2px solid #ece9e2; outline-offset: 2px; }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar { background: rgba(255,255,255,.82); border-bottom-color: rgba(40,20,70,.1); }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar .dr-tab { color: rgba(36,26,51,.72); }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar .dr-tab.on { color: #241a33; }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar::before { color: #241a33; }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-th-tbtn { color: #241a33; background: rgba(255,255,255,.6); border-color: rgba(40,20,70,.16); }
}
@media (max-width: 760px) {
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar { background: rgba(255,255,255,.88); border-color: rgba(40,20,70,.1); }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar .dr-tab { color: rgba(36,26,51,.62); }
  body.dr-themed.dr-theme-light:not(.spa-overlay) .dr-tabbar .dr-tab.on { color: #241a33; }
}

/* Type: thread + text box under the theme's coach header */
body.chat-page.dr-talk.dr-themed.dr-tk-typing main.chat-container { z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 112px); }
@media (min-width: 761px) {
  body.chat-page.dr-talk.dr-themed.dr-tk-typing main.chat-container { top: calc(64px + 82px); }
}
body.dr-themed.dr-theme-light.dr-tk-typing .chat-messages .message.companion .bubble,
body.dr-themed.dr-theme-light.dr-tk-typing .chat-messages .message.companion { color: #241a33; }
body.dr-themed.dr-theme-light.dr-tk-typing .chat-messages .message.user .bubble { color: #241a33; background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(40,20,70,.14); }
body.dr-themed.dr-theme-light.dr-tk-typing .chat-messages .message.system .bubble { color: rgba(36,26,51,.6); }
body.dr-themed.dr-theme-light.dr-tk-typing .chat-messages .session-card { background: rgba(255,255,255,.85); color: #241a33; border-color: rgba(40,20,70,.12); }
body.dr-themed.dr-theme-light.dr-tk-typing .voice-dock .voice-field { background: rgba(255,255,255,.85); border-color: rgba(40,20,70,.14); }
body.dr-themed.dr-theme-light.dr-tk-typing .voice-dock .text-input { color: #241a33; }
body.dr-themed.dr-theme-light.dr-tk-typing .voice-dock .text-input::placeholder { color: rgba(36,26,51,.5); }
body.dr-themed.dr-theme-light.dr-tk-typing .dr-tk-tstep { color: #241a33; }
/* #app is its own stacking layer (z 1): in Type mode lift it over the theme
   but let taps through everywhere except the thread and the text box. */
body.chat-page.dr-talk.dr-themed.dr-tk-typing #app { z-index: 3; pointer-events: none; }
body.chat-page.dr-talk.dr-themed.dr-tk-typing #app main.chat-container { pointer-events: auto; }
/* The session prompt is the themes' popup; not a card in the thread too. */
body.dr-themed .chat-messages .session-card { display: none !important; }