/* ============================================================
   IGNIS · Material Design 3  — style.css  v2
   Mobile-first dark, Ember palette, no-emoji edition
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ============================================================
   M3 DESIGN TOKENS — Dark, Custom Ember Scheme
   ============================================================ */
:root {
  /* Primary — Ember Orange */
  --md-primary:             #c2c2c2;
  --md-on-primary:          #252525;
  --md-primary-container:   #373737;
  --md-on-primary-container:#e1e1e1;

  /* Secondary — Warm Rose */
  --md-secondary:             #c5c5c5;
  --md-on-secondary:          #2d2d2d;
  --md-secondary-container:   #444444;
  --md-on-secondary-container:#e1e1e1;

  /* Tertiary — Amber Gold */
  --md-tertiary:              #c4c4c4;
  --md-on-tertiary:           #2e2e2e;
  --md-tertiary-container:    #434343;
  --md-on-tertiary-container: #e0e0e0;

  /* Error */
  --md-error:             #c3c3c3;
  --md-error-container:   #202020;
  --md-on-error-container:#e2e2e2;

  /* Surfaces */
  --md-surface:             #131313;
  --md-surface-dim:         #0f0f0f;
  --md-surface-container-lowest:  #0b0b0b;
  --md-surface-container-low:     #1c1c1c;
  --md-surface-container:         #202020;
  --md-surface-container-high:    #2a2a2a;
  --md-surface-container-highest: #343434;

  --md-on-surface:          #e2e2e2;
  --md-on-surface-variant:  #c1c1c1;
  --md-outline:             #8b8b8b;
  --md-outline-variant:     #464646;
  --md-inverse-surface:     #e2e2e2;
  --md-inverse-on-surface:  #303030;

  /* Elevation overlays (dark tonal) */
  --md-elev1: rgba(220,220,220,0.05);
  --md-elev2: rgba(220,220,220,0.08);
  --md-elev3: rgba(220,220,220,0.11);

  /* Shape */
  --shape-xl:   28px;
  --shape-lg:   16px;
  --shape-md:   12px;
  --shape-sm:   8px;
  --shape-xs:   4px;
  --shape-full: 999px;

  /* Motion */
  --ease-std:     cubic-bezier(0.2, 0, 0, 1);
  --ease-decel:   cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accel:   cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-short2:   100ms;
  --dur-short4:   200ms;
  --dur-med1:     250ms;
  --dur-med2:     300ms;
  --dur-long:     400ms;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  height: 100%;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}
body {
  min-height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Noto Sans SC', 'Roboto', system-ui, sans-serif;
  font-size: 14px;
  background: var(--md-surface-dim);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
::selection { background: color-mix(in srgb, var(--md-primary) 25%, transparent); }

/* ── SVG icon size helpers ── */
.icon-sm { width: 20px; height: 20px; flex-shrink: 0; }
.icon-xs { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Ripple ── */
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: 0.12;
  transform: scale(0);
  animation: rippleExpand 500ms var(--ease-std) forwards;
  pointer-events: none;
}

/* ── Embers ── */
.ember-container {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ember {
  position: absolute; border-radius: 50%;
  background: var(--md-primary); opacity: 0;
  animation: floatEmber linear infinite;
}
@keyframes floatEmber {
  0%   { transform: translateY(100vh) scale(0.4); opacity: 0; }
  10%  { opacity: 0.45; }
  90%  { opacity: 0.08; }
  100% { transform: translateY(-10vh) translateX(15px) scale(0.2); opacity: 0; }
}

/* ============================================================
   M3 TYPOGRAPHY
   ============================================================ */
.m3-display-small   { font-size: 36px; font-weight: 400; letter-spacing: -.25px; line-height: 1.2; }
.m3-headline-medium { font-size: 28px; font-weight: 400; line-height: 1.3; }
.m3-title-large     { font-size: 22px; font-weight: 500; line-height: 1.35; }
.m3-title-medium    { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: .1px; }
.m3-body-large      { font-size: 16px; font-weight: 400; line-height: 1.5; }
.m3-body-medium     { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .25px; }
.m3-body-small      { font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: .4px; }
.m3-label-large     { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: .1px; }
.m3-label-small     { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .5px; }

/* ============================================================
   SCREEN TRANSITIONS
   ============================================================ */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition:
    opacity var(--dur-med2) var(--ease-std),
    transform var(--dur-med2) var(--ease-std);
  transform: translateY(8px);
}
.screen.active  { opacity: 1; pointer-events: all; transform: none; }
.screen.exit {
  opacity: 0; transform: translateY(-8px);
  transition:
    opacity var(--dur-short4) var(--ease-accel),
    transform var(--dur-short4) var(--ease-accel);
}

/* ============================================================
   M3 TOP APP BAR
   ============================================================ */
.m3-top-bar {
  display: flex; align-items: center;
  height: 64px; padding: 0 4px; gap: 4px;
  background: var(--md-surface-container-low);
  flex-shrink: 0; z-index: 2;
}
.top-bar-leading { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.top-bar-trail   { margin-left: auto; padding-right: 8px; }

/* Logo */
.logo-flame-icon { width: 28px; height: 28px; color: var(--md-primary); flex-shrink: 0; }
.app-logo-name {
  font-size: 22px; font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(135deg, var(--md-primary), var(--md-tertiary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Status chip */
.status-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-full);
  padding: 4px 12px; font-size: 12px;
  color: var(--md-on-surface-variant);
}
.status-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-chip-dot.initializing { background: var(--md-outline); animation: dotPulse 1.4s ease-in-out infinite; }
.status-chip-dot.ready        { background: #939393; box-shadow: 0 0 6px #93939388; }
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ============================================================
   LANDING SCREEN
   ============================================================ */
.landing-scroll {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 12px; padding: 12px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Hero */
.hero-section {
  display: flex; flex-direction: column;
  align-items: center; padding: 20px 0 8px; gap: 8px; text-align: center;
}
.hero-icon-wrap { position: relative; width: 72px; height: 72px; }
.hero-flame {
  width: 72px; height: 72px;
  color: var(--md-primary);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--md-primary) 55%, transparent));
  animation: heroFlicker 3s ease-in-out infinite;
}
@keyframes heroFlicker {
  0%,100%{ filter: drop-shadow(0 0 14px color-mix(in srgb,var(--md-primary) 55%,transparent)); }
  50%    { filter: drop-shadow(0 0 24px color-mix(in srgb,var(--md-primary) 85%,transparent)); }
}
.hero-subtitle { color: var(--md-on-surface-variant); max-width: 280px; }

/* M3 Card */
.m3-card {
  background: var(--md-surface-container-low);
  background-image: linear-gradient(var(--md-elev1), var(--md-elev1));
  border-radius: var(--shape-xl);
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.m3-card--filled {
  background: var(--md-surface-container);
  background-image: none;
}
.m3-card-header { display: flex; align-items: center; gap: 10px; color: var(--md-on-surface-variant); }

/* ID Card */
.id-card { gap: 12px; }
.id-value-row { display: flex; align-items: center; gap: 8px; }
.id-value {
  flex: 1; min-height: 48px;
  background: var(--md-surface-container-highest);
  border-radius: var(--shape-md);
  padding: 12px 14px;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px; font-weight: 500;
  color: var(--md-primary);
  letter-spacing: .04em;
  word-break: break-all;
  display: flex; align-items: center; flex-wrap: wrap;
  user-select: all; -webkit-user-select: all;
}
.id-hint { color: var(--md-on-surface-variant); }

/* Loading dots */
.id-loading    { display: flex; gap: 6px; align-items: center; }
.m3-progress-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-outline);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.m3-progress-dot:nth-child(2){ animation-delay: .2s; }
.m3-progress-dot:nth-child(3){ animation-delay: .4s; }
@keyframes dotBounce {
  0%,80%,100%{ transform:scale(.6); opacity:.4; }
  40%        { transform:scale(1); opacity:1; }
}

/* Section label row */
.section-label {
  display: flex; align-items: center; gap: 8px;
  color: var(--md-on-surface-variant);
}

/* ── M3 Icon Button ── */
.m3-icon-btn {
  width: 48px; height: 48px;
  border-radius: var(--shape-full);
  border: none; background: transparent;
  color: var(--md-on-surface-variant);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition:
    background-color var(--dur-short4) var(--ease-std),
    color var(--dur-short4) var(--ease-std);
  flex-shrink: 0;
}
.m3-icon-btn:hover  { background: color-mix(in srgb,var(--md-on-surface-variant) 8%,transparent); color: var(--md-on-surface); }
.m3-icon-btn:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.top-bar-btn { color: var(--md-on-surface); }

.footer-icon-btn { color: var(--md-on-surface-variant); }

/* ── M3 Text Field (Filled) ── */
.m3-text-field { position: relative; display: flex; flex-direction: column; }
.m3-input {
  width: 100%;
  background: var(--md-surface-container-highest);
  border: none;
  border-radius: var(--shape-sm) var(--shape-sm) 0 0;
  color: var(--md-on-surface);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
  font-size: 16px; line-height: 1.5;
  padding: 24px 16px 8px;
  outline: none; resize: none;
  transition: background var(--dur-short4);
  -webkit-appearance: none; appearance: none;
}
.m3-input[type=number]::-webkit-inner-spin-button,
.m3-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.m3-input[type=number] { -moz-appearance: textfield; }
.m3-input:hover { background: color-mix(in srgb,var(--md-surface-container-highest) 92%,var(--md-on-surface)); }

.m3-label {
  position: absolute; left: 16px; top: 16px;
  font-size: 16px; color: var(--md-on-surface-variant);
  transform-origin: left top;
  transition:
    transform var(--dur-med1) var(--ease-std),
    font-size var(--dur-med1) var(--ease-std),
    color var(--dur-short4) var(--ease-std);
  pointer-events: none; letter-spacing: .5px;
}
.m3-input:focus ~ .m3-label,
.m3-input:not(:placeholder-shown) ~ .m3-label {
  transform: translateY(-10px); font-size: 12px; color: var(--md-primary);
}
.m3-input:not(:focus):not(:placeholder-shown) ~ .m3-label {
  color: var(--md-on-surface-variant);
}
.m3-active-indicator {
  height: 2px; background: var(--md-outline-variant);
  transition: background var(--dur-short4), height var(--dur-short4);
}
.m3-text-field:focus-within .m3-active-indicator {
  background: var(--md-primary); height: 3px;
}

/* ── Filter Chips ── */
.m3-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-filter-chip {
  display: inline-flex; align-items: center; gap: 0;
  min-height: 32px; padding: 0 16px;
  border-radius: var(--shape-full);
  border: 1px solid var(--md-outline);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; position: relative; overflow: hidden;
  transition:
    background var(--dur-short4) var(--ease-std),
    border-color var(--dur-short4) var(--ease-std),
    color var(--dur-short4) var(--ease-std),
    padding var(--dur-med1) var(--ease-decel);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
/* check icon – injected via pseudo with a custom property trick */
.m3-filter-chip .chip-check {
  width: 0; overflow: hidden;
  transform: scale(0);
  transition:
    width var(--dur-med1) var(--ease-decel),
    transform var(--dur-med1) var(--ease-decel);
  display: flex; align-items: center;
}
.m3-filter-chip.selected .chip-check { width: 20px; transform: scale(1); }
.m3-filter-chip.selected {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
}
.m3-filter-chip:hover:not(.selected) {
  background: color-mix(in srgb,var(--md-on-surface-variant) 8%,transparent);
}

/* ── Filled Button ── */
.m3-filled-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border-radius: var(--shape-full);
  border: none;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; position: relative; overflow: hidden;
  transition:
    box-shadow var(--dur-short4) var(--ease-std),
    background var(--dur-short4) var(--ease-std);
}
.m3-filled-btn--large { height: 48px; font-size: 15px; }
.m3-filled-btn svg { flex-shrink: 0; }
.m3-filled-btn:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.15);
  background: color-mix(in srgb,var(--md-primary) 92%,var(--md-on-primary));
}
.m3-filled-btn:active { box-shadow: none; background: color-mix(in srgb,var(--md-primary) 88%,var(--md-on-primary)); }
.m3-filled-btn:disabled {
  background: color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color: color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  box-shadow: none; pointer-events: none;
}

/* ── Text Button ── */
.m3-text-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 12px;
  border-radius: var(--shape-full);
  border: none; background: transparent;
  color: var(--md-primary);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: background var(--dur-short4);
}
.m3-text-btn:hover { background: color-mix(in srgb,var(--md-primary) 8%,transparent); }

/* ── Assist Chips ── */
.info-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 4px 0 8px; }
.m3-assist-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 16px;
  border-radius: var(--shape-full);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
  font-size: 13px; letter-spacing: .25px;
}
.m3-assist-chip svg { color: var(--md-on-surface-variant); }

/* ============================================================
   CONNECTING SCREEN
   ============================================================ */
.connecting-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; padding: 32px; text-align: center;
}
.m3-circular-progress {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.progress-svg { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-track { fill: none; stroke: var(--md-surface-container-highest); stroke-width: 4; }
.progress-fill {
  fill: none; stroke: var(--md-primary); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 125.6; stroke-dashoffset: 125.6;
  animation: spinProgress 1.4s var(--ease-std) infinite;
}
@keyframes spinProgress {
  0%  { stroke-dashoffset:125.6; }
  50% { stroke-dashoffset:25; }
  100%{ stroke-dashoffset:125.6; transform:rotate(360deg); }
}
.progress-icon-svg { width: 28px; height: 28px; color: var(--md-primary); z-index: 1; }
.connecting-title { color: var(--md-on-surface); }
.connecting-sub   { color: var(--md-on-surface-variant); max-width: 260px; }

/* ============================================================
   CHAT SCREEN
   ============================================================ */
.chat-layout {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

/* Chat Top App Bar */
.chat-top-bar { box-shadow: 0 1px 0 var(--md-outline-variant); }
.chat-top-bar-title {
  flex: 1; display: flex; align-items: center;
  gap: 10px; padding: 0 4px; min-width: 0;
}
.peer-avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.peer-info-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.peer-name { color: var(--md-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-status-row { display: flex; align-items: center; gap: 5px; }
.status-dot-sm {
  width: 6px; height: 6px; border-radius: 50%;
  background: #939393; flex-shrink: 0;
  animation: dotPulse 2.5s ease-in-out infinite;
}
#peerStatusText { color: #939393; }

/* Burn badge button */
.burn-badge-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border: none; border-radius: var(--shape-full);
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; flex-shrink: 0; margin-right: 4px;
  position: relative; overflow: hidden;
  transition: background var(--dur-short4) var(--ease-std), filter var(--dur-short4);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
}
.burn-badge-btn:hover { filter: brightness(1.12); }

/* ── Messages ── */
.chat-messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* System message */
.m3-system-msg {
  align-self: center;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  border-radius: var(--shape-md);
  padding: 8px 16px;
  font-size: 12px; letter-spacing: .4px;
  text-align: center; max-width: 90%;
  margin: 4px 0; line-height: 1.5;
}

/* Message row */
.msg-row {
  display: flex; align-items: flex-end; gap: 8px; margin-bottom: 2px;
  animation: msgSlideIn var(--dur-med2) var(--ease-decel) both;
}
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.msg-row.mine   { flex-direction: row-reverse; }
.msg-group      { display: flex; flex-direction: column; gap: 2px; max-width: 80%; }
.msg-row.mine   .msg-group { align-items: flex-end; }
.msg-row.theirs .msg-group { align-items: flex-start; }

/* Bubble */
.msg-bubble {
  position: relative; overflow: hidden;
  padding: 10px 14px 22px;
  border-radius: var(--shape-lg);
  font-size: 15px; line-height: 1.55;
  word-break: break-word; white-space: pre-wrap; max-width: 100%;
}
.mine   .msg-bubble {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-bottom-right-radius: var(--shape-xs);
}
.theirs .msg-bubble {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-bottom-left-radius: var(--shape-xs);
}

/* Image bubble */
.msg-bubble.image-bubble {
  padding: 4px 4px 22px;
  overflow: hidden;
}
.bubble-image {
  display: block; width: 100%; max-width: 240px; max-height: 260px;
  object-fit: cover; border-radius: 10px;
  cursor: zoom-in;
}

/* Burn progress bar */
.burn-bar-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.burn-bar-fill {
  height: 100%; border-radius: 0;
  transition: width 1s linear;
}
.mine   .burn-bar-fill { background: var(--md-tertiary); }
.theirs .burn-bar-fill { background: var(--md-primary); }

/* Countdown label */
.burn-meta {
  position: absolute; bottom: 5px; right: 10px;
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; opacity: .7; white-space: nowrap;
}
.burn-meta svg { flex-shrink: 0; }
.burn-meta.urgent { color: var(--md-error); opacity: 1; animation: urgentBlink .5s ease-in-out infinite; }
@keyframes urgentBlink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* Timestamp */
.msg-timestamp {
  font-size: 11px; color: var(--md-on-surface-variant);
  padding: 0 2px; opacity: .7;
}

/* Burn-out animation */
@keyframes burnDissolve {
  0%   { opacity:1; filter:brightness(1); transform:scale(1); }
  30%  { opacity:.8; filter:brightness(1.6) saturate(2); transform:scale(1.02); }
  70%  { opacity:.2; filter:brightness(2) blur(3px); transform:scale(.95); }
  100% { opacity:0; filter:brightness(0) blur(10px); transform:scale(.88) translateY(-6px); }
}
.msg-row.burning { animation: burnDissolve .75s var(--ease-accel) forwards; }

/* ── Typing indicator ── */
.typing-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin-bottom: 2px;
  animation: msgSlideIn var(--dur-med2) var(--ease-decel) both;
}
.typing-bubble {
  background: var(--md-surface-container-high);
  border-radius: var(--shape-lg) var(--shape-lg) var(--shape-lg) var(--shape-xs);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 5px;
}
.typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--md-on-surface-variant);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce {
  0%,60%,100%{ transform:translateY(0); opacity:.4; }
  30%        { transform:translateY(-6px); opacity:1; }
}

/* ── Chat Footer ── */
.chat-footer {
  padding: 8px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--md-surface-container-low);
  box-shadow: 0 -1px 0 var(--md-outline-variant);
  flex-shrink: 0;
}
.input-row { display: flex; align-items: flex-end; gap: 4px; }

/* Chat textarea (no floating label, simpler) */
.chat-input-wrap {
  flex: 1; display: flex; flex-direction: column;
  background: var(--md-surface-container-highest);
  border-radius: var(--shape-sm) var(--shape-sm) 0 0;
}
.chat-textarea {
  flex: 1; resize: none;
  background: transparent;
  border: none; outline: none;
  color: var(--md-on-surface);
  font-family: 'Noto Sans SC','Roboto',sans-serif;
  font-size: 16px; line-height: 1.5;
  padding: 12px 12px 8px;
  max-height: 112px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-textarea::placeholder { color: var(--md-on-surface-variant); }
.chat-input-indicator {
  height: 2px; background: var(--md-outline-variant);
  transition: background var(--dur-short4), height var(--dur-short4);
}
.chat-input-wrap:focus-within .chat-input-indicator {
  background: var(--md-primary); height: 3px;
}

/* Send FAB */
.m3-fab {
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--dur-short4) var(--ease-std),
    background var(--dur-short4);
  flex-shrink: 0;
}
.m3-fab--small {
  width: 48px; height: 48px;
  border-radius: var(--shape-md);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.15);
}
.m3-fab--small:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.2);
  background: color-mix(in srgb,var(--md-primary-container) 92%,var(--md-on-primary-container));
}
.m3-fab--small:disabled {
  background: color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color: color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  box-shadow: none; pointer-events: none;
}

.footer-meta-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 4px 4px 0;
}
.char-count, .security-note { color: var(--md-on-surface-variant); }
.security-note { display: flex; align-items: center; gap: 4px; }

/* ============================================================
   BURN TIME BOTTOM SHEET
   ============================================================ */
.bottom-sheet-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--md-scrim, rgba(0,0,0,.5));
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med2) var(--ease-std);
}
.bottom-sheet-overlay.open { opacity: 1; pointer-events: all; }

.bottom-sheet {
  width: 100%; max-width: 600px; margin: 0 auto;
  background: var(--md-surface-container-low);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 16px;
  transform: translateY(100%);
  transition: transform var(--dur-long) var(--ease-decel);
  box-shadow: 0 -4px 16px rgba(0,0,0,.4);
}
.bottom-sheet-overlay.open .bottom-sheet { transform: translateY(0); }

.sheet-handle {
  width: 32px; height: 4px; border-radius: 2px;
  background: var(--md-outline-variant);
  align-self: center; margin-bottom: 4px;
}
.sheet-header {
  display: flex; align-items: center; gap: 10px;
  color: var(--md-on-surface-variant);
}
.sheet-header .m3-title-medium { flex: 1; color: var(--md-on-surface); }
.sheet-close-btn { width: 40px; height: 40px; }
.sheet-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
.sheet-chips { margin-bottom: 4px; }

/* ============================================================
   IMAGE LIGHTBOX
   ============================================================ */
.img-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med1) var(--ease-std);
}
.img-lightbox.open { opacity: 1; pointer-events: all; }
.img-lightbox img {
  max-width: 92vw; max-height: 88dvh;
  object-fit: contain; border-radius: var(--shape-md);
  animation: lightboxIn var(--dur-med2) var(--ease-decel);
}
@keyframes lightboxIn {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-short4);
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ============================================================
   M3 SNACKBAR
   ============================================================ */
.m3-snackbar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(calc(100% + 24px));
  z-index: 9999;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  border-radius: var(--shape-xs);
  padding: 14px 20px;
  font-size: 14px; letter-spacing: .25px;
  box-shadow: 0 3px 5px rgba(0,0,0,.3), 0 7px 14px rgba(0,0,0,.2);
  opacity: 0;
  min-width: 240px; max-width: calc(100vw - 32px);
  text-align: center;
  transition:
    opacity var(--dur-short4) var(--ease-std),
    transform var(--dur-med1) var(--ease-decel);
  pointer-events: none; white-space: nowrap;
}
.m3-snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   FOCUS VISIBLE
   ============================================================ */
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   RESPONSIVE — tablet+
   ============================================================ */
@media (min-width: 600px) {
  .landing-scroll { max-width: 480px; align-self: center; width: 100%; }
  #screenLanding  { align-items: center; }
  .msg-group      { max-width: 65%; }
  .bottom-sheet   { border-radius: 28px 28px 0 0; }
}

/* Nightcord entry and monochrome finish */
[hidden] { display: none !important; }
.screen:not(.active):not(.exit) { visibility: hidden; }
:root { --md-primary: #e0e0e0; --md-on-primary: #161616;
  --md-primary-container: #383838; --md-on-primary-container: #f0f0f0;
  --md-surface-dim: #101010; --md-surface: #161616;
  --md-surface-container-low: #1b1b1b; --md-surface-container: #222222;
  --md-surface-container-high: #2b2b2b; --md-surface-container-highest: #333333;
  --md-on-surface: #eeeeee; --md-on-surface-variant: #bcbcbc;
  --md-outline: #888888; --md-outline-variant: #444444; }
.entry-screen { align-items: center; justify-content: center; padding: 24px; }
.entry-card { width: min(100%, 400px); padding: 32px; border: 1px solid #343434; border-radius: 24px; background: #1b1b1b; }
.entry-brand { color: #aaa; font-size: 14px; letter-spacing: 2px; margin-bottom: 28px; }
.entry-card h1 { font-size: 30px; font-weight: 500; margin-bottom: 28px; }
.entry-card label { display: block; color: #bcbcbc; margin-bottom: 8px; }
.entry-card input { width: 100%; padding: 14px 16px; background: #292929; color: #eee; border: 1px solid #555; border-radius: 12px; font: inherit; outline: none; }
.entry-card input:focus { border-color: #eee; }
.entry-error { min-height: 24px; margin: 8px 0 16px; color: #ccc; font-size: 13px; }
.entry-card button { width: 100%; justify-content: center; }
.landing-top-bar { margin-bottom: 24px; }

/* Connection status accents */
:root { --status-connected: #66bb6a; --status-reconnecting: #ffa726; }
.status-chip-dot.ready { background: var(--status-connected); box-shadow: 0 0 6px #66bb6a66; }
.status-chip-dot.reconnecting { background: var(--status-reconnecting); box-shadow: 0 0 6px #ffa72655; animation: dotPulse 1.4s ease-in-out infinite; }
.status-dot-sm { background: var(--status-connected); }
#peerStatusText { color: var(--status-connected); }
.entry-reload { margin-top: 12px; min-height: 44px; }
.reload-status { color: #aaa; font-size: 12px; text-align: center; }

.connection-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:0 0 16px; }
#retryChatBtn { flex-shrink:0; min-height:40px; padding:0 12px; }
@media (max-width:420px) { .chat-top-bar { gap:2px; } #retryChatBtn { font-size:12px; padding:0 8px; } }

/* Typing keepalives must not restart the bubble entrance or move the message list. */
.typing-row { animation: none; }
.peer-connection-detail { color: var(--md-on-surface-variant); font-size: 11px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.chat-top-bar { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }

/* Resolved theme: selection is applied before the stylesheet is painted. */
:root[data-theme="light"] {
  color-scheme: light;
  --md-primary:#252525; --md-on-primary:#ffffff;
  --md-primary-container:#e2e2e2; --md-on-primary-container:#202020;
  --md-secondary:#545454; --md-on-secondary:#ffffff;
  --md-secondary-container:#e9e9e9; --md-on-secondary-container:#242424;
  --md-tertiary:#555555; --md-on-tertiary:#ffffff;
  --md-tertiary-container:#e7e7e7; --md-on-tertiary-container:#242424;
  --md-error:#555555; --md-error-container:#e5e5e5; --md-on-error-container:#292929;
  --md-surface:#ffffff; --md-surface-dim:#f4f4f4;
  --md-surface-container-lowest:#ffffff; --md-surface-container-low:#fafafa;
  --md-surface-container:#ffffff; --md-surface-container-high:#ededed;
  --md-surface-container-highest:#e9e9e9;
  --md-on-surface:#202020; --md-on-surface-variant:#606060;
  --md-outline:#828282; --md-outline-variant:#d6d6d6;
  --md-inverse-surface:#292929; --md-inverse-on-surface:#fafafa;
  --md-elev1:rgba(0,0,0,.025); --md-elev2:rgba(0,0,0,.04); --md-elev3:rgba(0,0,0,.06);
  --status-connected:#27823b; --status-reconnecting:#a96000;
}
:root[data-theme="dark"] { color-scheme:dark; }
html { padding:0; height:100%; overflow:hidden; overscroll-behavior:none; }
body { position:fixed; inset:0; width:100%; height:100%; min-height:0; overflow:hidden; overscroll-behavior:none; }
.screen {
  inset:auto 0 auto 0; top:var(--app-top,0px);
  height:var(--app-height,100dvh); min-height:0; max-height:none;
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
}
.entry-screen { padding:24px; padding-top:max(24px,env(safe-area-inset-top,0px)); padding-bottom:max(24px,env(safe-area-inset-bottom,0px)); overflow-y:auto; }
.entry-card { flex-shrink:0; width:min(100%,420px); margin:auto; border-color:var(--md-outline-variant); background:var(--md-surface-container); }
.entry-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:30px; }
.entry-brand { margin-bottom:0; color:var(--md-on-surface-variant); }
.entry-card label,.entry-error,.reload-status { color:var(--md-on-surface-variant); }
.entry-card input { background:var(--md-surface-container-high); color:var(--md-on-surface); border-color:var(--md-outline); font-size:16px; }
.entry-card input:focus { border-color:var(--md-primary); }
.theme-picker { display:inline-flex; align-items:center; gap:6px; color:var(--md-on-surface-variant); flex-shrink:0; }
.theme-picker svg { width:16px; height:16px; flex-shrink:0; }
.theme-select { max-width:110px; min-height:40px; border:1px solid var(--md-outline-variant); border-radius:10px; padding:6px 8px; font:inherit; font-size:12px; color:var(--md-on-surface); background:var(--md-surface-container-low); cursor:pointer; }
.top-bar-trail { display:flex; align-items:center; gap:8px; }
.landing-scroll { width:100%; min-height:0; max-width:540px; align-self:center; gap:14px; padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); overscroll-behavior:contain; }
.landing-top-bar { margin-bottom:8px; border-radius:16px; }
.app-logo-name { background:none; -webkit-text-fill-color:currentColor; color:var(--md-on-surface); }
.connection-actions { margin-bottom:0; }
.chat-layout { width:100%; min-height:0; max-height:100%; flex:1 1 0; }
.chat-messages { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; scroll-behavior:auto; -webkit-overflow-scrolling:touch; }
.chat-top-bar { flex:0 0 auto; }
.chat-footer { flex:0 0 auto; padding:10px 12px; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
.chat-textarea { min-height:46px; height:46px; max-height:min(112px,25vh); font-size:16px; }
.chat-input-wrap { min-width:0; border-radius:14px; overflow:hidden; }
.chat-input-wrap:focus-within .chat-input-indicator { height:2px; }
.footer-meta-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.footer-meta-row .theme-select { min-height:30px; padding:3px 6px; }
.msg-group { max-width:min(78%,560px); overflow-wrap:anywhere; }
.keyboard-open .chat-footer { padding-bottom:8px; }
.keyboard-open .footer-meta-row { display:none; }
.keyboard-open .chat-textarea { max-height:88px; }
.keyboard-open .entry-screen { justify-content:flex-start; }
.keyboard-open .entry-card { margin-top:0; }
.bottom-sheet-overlay,.img-lightbox { top:var(--app-top,0px); bottom:auto; height:var(--app-height,100dvh); }
@media (min-width:900px) {
  #screenChat { padding:24px; padding-top:max(24px,env(safe-area-inset-top,0px)); padding-bottom:max(24px,env(safe-area-inset-bottom,0px)); align-items:center; }
  .chat-layout { max-width:1040px; border:1px solid var(--md-outline-variant); border-radius:24px; background:var(--md-surface); box-shadow:0 16px 48px rgba(0,0,0,.07); }
  .chat-top-bar { padding:12px 16px; }
  .chat-messages { padding:24px; }
  .chat-footer { padding:14px 18px 10px; }
  .landing-scroll { padding-top:40px; }
  .entry-card { padding:36px; }
}
@media (max-width:420px) {
  .entry-screen { padding:16px; }
  .entry-card { padding:24px; border-radius:20px; }
  .entry-header { gap:8px; margin-bottom:24px; }
  .entry-brand { font-size:13px; letter-spacing:1.4px; }
  .theme-picker { gap:4px; }
  .theme-select { max-width:94px; padding:6px; }
  .top-bar-trail { gap:6px; padding-right:4px; }
  .top-bar-trail .theme-picker svg { display:none; }
  .top-bar-trail .theme-select { max-width:86px; }
  .status-chip { padding:4px 8px; }
  .app-logo-name { font-size:19px; letter-spacing:.06em; }
  .top-bar-leading { padding:0 6px; }
  .chat-top-bar-title { gap:6px; }
  .chat-messages { padding:12px; }
  .chat-footer { padding-left:8px; padding-right:8px; }
  .msg-group { max-width:84%; }
}
@media (max-height:500px) and (orientation:landscape) {
  .chat-top-bar { min-height:48px; padding-top:4px; padding-bottom:4px; }
  .chat-footer { padding-top:6px; }
  .footer-meta-row { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.entry-screen { justify-content:flex-start; }
.entry-header .theme-picker { margin-bottom:0; }

/* One continuous rotation; stroke geometry stays constant across every frame. */
.progress-svg {
  transform-origin:50% 50%; transform-box:view-box;
  animation:nightcord-spinner-turn 1s linear infinite;
  will-change:transform;
}
.progress-track { stroke:var(--md-outline-variant); stroke-width:3; opacity:.45; }
.progress-fill { stroke-width:3; stroke-dasharray:84 125.664; stroke-dashoffset:0; animation:none; transform:none; }
@keyframes nightcord-spinner-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .progress-svg { animation:nightcord-spinner-turn 2.8s linear infinite !important; }
}

/* Apple: translucent control layers over a quiet, monochrome backdrop. */
:root[data-design="liquid-glass"] {
  --glass-fill:rgba(38,38,40,.64); --glass-control:rgba(255,255,255,.075);
  --glass-line:rgba(255,255,255,.16); --glass-highlight:rgba(255,255,255,.22);
  --glass-shadow:0 16px 48px rgba(0,0,0,.22),inset 0 1px 0 var(--glass-highlight);
  --shape-xl:30px; --shape-lg:22px; --shape-md:16px; --shape-sm:12px;
}
:root[data-design="liquid-glass"][data-theme="light"] {
  --glass-fill:rgba(255,255,255,.68); --glass-control:rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.85); --glass-highlight:rgba(255,255,255,.95);
  --glass-shadow:0 16px 48px rgba(30,30,40,.09),inset 0 1px 0 var(--glass-highlight);
}
:root[data-design="liquid-glass"] body {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Noto Sans SC',sans-serif;
  background:radial-gradient(ellipse at 10% 0%,rgba(255,255,255,.10),transparent 52%),radial-gradient(ellipse at 95% 90%,rgba(255,255,255,.06),transparent 45%),var(--md-surface-dim);
}
:root[data-design="liquid-glass"][data-theme="light"] body {
  background:radial-gradient(ellipse at 8% 0%,#ffffff,transparent 55%),radial-gradient(ellipse at 95% 90%,#dddddf,transparent 55%),#eeeef0;
}
:root[data-design="liquid-glass"] :is(.entry-card,.m3-card,.landing-top-bar,.chat-layout,.bottom-sheet) {
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 55%),var(--glass-fill);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  border-radius:28px;
}
:root[data-design="liquid-glass"] .landing-top-bar { border-radius:22px; }
:root[data-design="liquid-glass"] :is(.chat-top-bar,.chat-footer) {
  background:var(--glass-fill); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 var(--glass-line);
}
:root[data-design="liquid-glass"] .chat-messages { background:color-mix(in srgb,var(--md-surface-dim) 90%,transparent); }
:root[data-design="liquid-glass"] :is(.theme-select,.entry-card input,.id-value-row,.chat-input-wrap,.m3-filter-chip,.burn-badge-btn) {
  background:var(--glass-control); border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-highlight); border-radius:16px;
}
:root[data-design="liquid-glass"] :is(.theme-select,.burn-badge-btn,.m3-filter-chip) { border-radius:999px; }
:root[data-design="liquid-glass"] .entry-card input { border-color:var(--md-outline-variant); }
:root[data-design="liquid-glass"] .entry-card input:focus { border-color:var(--md-primary); }
:root[data-design="liquid-glass"] .m3-filled-btn { border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 12px rgba(0,0,0,.12); }
:root[data-design="liquid-glass"] .m3-fab--small { border-radius:18px; border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-highlight); }
:root[data-design="liquid-glass"] .app-logo-name { letter-spacing:.02em; font-weight:650; }
:root[data-design="liquid-glass"] .entry-card h1 { font-weight:600; letter-spacing:-.025em; }
:root[data-design="liquid-glass"] .connecting-center { max-width:460px; width:100%; margin:auto; flex:0 1 auto; padding:40px 28px; border-radius:32px; border:1px solid var(--glass-line); background:var(--glass-fill); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
:root[data-design="liquid-glass"] #screenConnecting { padding:24px; justify-content:center; }
@media (max-width:899px) {
  :root[data-design="liquid-glass"] .chat-layout { border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Windows: Fluent 2 typography, restrained elevation and layered surfaces. */
:root[data-design="fluent2"] { --shape-xl:12px; --shape-lg:8px; --shape-md:6px; --shape-sm:4px; --shape-xs:2px; }
:root[data-design="fluent2"] body { font-family:'Segoe UI Variable Text','Segoe UI','Microsoft YaHei UI',sans-serif; }
:root[data-design="fluent2"] :is(.entry-card,.m3-card,.chat-layout) {
  border-radius:12px; border:1px solid var(--md-outline-variant);
  background:var(--md-surface-container); box-shadow:0 8px 24px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.10);
}
:root[data-design="fluent2"] :is(.landing-top-bar,.chat-top-bar) { border-radius:8px; background:linear-gradient(120deg,var(--md-surface-container-low),var(--md-surface-container-high)); box-shadow:inset 0 -1px 0 var(--md-outline-variant); }
:root[data-design="fluent2"] .chat-top-bar { border-radius:0; }
:root[data-design="fluent2"] .app-logo-name { font-size:21px; font-weight:600; letter-spacing:0; }
:root[data-design="fluent2"] .entry-card h1 { font-size:30px; font-weight:600; letter-spacing:-.02em; }
:root[data-design="fluent2"] :is(.m3-filled-btn,.m3-text-btn,.m3-filter-chip,.theme-select,.burn-badge-btn,.m3-fab--small) { border-radius:4px; }
:root[data-design="fluent2"] .m3-filled-btn { border:1px solid color-mix(in srgb,var(--md-primary) 80%,var(--md-on-primary)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.1); font-weight:600; }
:root[data-design="fluent2"] :is(.entry-card input,.m3-text-field,.chat-input-wrap) { border-radius:4px; border:1px solid var(--md-outline-variant); border-bottom-color:var(--md-outline); background:var(--md-surface-container-low); }
:root[data-design="fluent2"] .chat-input-wrap:focus-within { border-bottom-color:var(--md-primary); }
:root[data-design="fluent2"] .msg-bubble { border-radius:8px; }
:root[data-design="fluent2"] .bottom-sheet { border:1px solid var(--md-outline-variant); border-radius:12px 12px 0 0; box-shadow:0 8px 32px rgba(0,0,0,.18); background:color-mix(in srgb,var(--md-surface-container-high) 94%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
:root[data-design="fluent2"] :focus-visible { outline-width:2px; outline-offset:2px; border-radius:4px; }
@media (max-width:899px) {
  :root[data-design="fluent2"] .chat-layout { border-radius:0; border:0; box-shadow:none; }
}

/* Android and other browsers: Material 3 tonal surfaces and rounded controls. */
:root[data-design="md3"] { --shape-xl:28px; --shape-lg:16px; --shape-md:12px; --shape-sm:8px; }
:root[data-design="md3"] body { font-family:'Roboto','Noto Sans SC',system-ui,sans-serif; }
:root[data-design="md3"] :is(.entry-card,.m3-card) { border-radius:28px; background:var(--md-surface-container); }
:root[data-design="md3"] .m3-filled-btn { border-radius:999px; }
:root[data-design="md3"] :is(.entry-card input,.chat-input-wrap) { border-radius:8px 8px 0 0; background:var(--md-surface-container-highest); }
:root[data-design="md3"] .m3-fab--small { border-radius:16px; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root[data-design="liquid-glass"] :is(.entry-card,.m3-card,.landing-top-bar,.chat-layout,.bottom-sheet,.chat-top-bar,.chat-footer,.connecting-center) { background:var(--md-surface-container); }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root[data-design="liquid-glass"] :is(.entry-card,.m3-card,.landing-top-bar,.chat-layout,.bottom-sheet,.chat-top-bar,.chat-footer,.connecting-center) { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--md-surface-container); border-color:var(--md-outline); }
}

/* Compact toolbar trigger; the choice lives in a platform-specific menu. */
.theme-toggle,.entry-card .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-width:44px; flex:0 0 44px; padding:0;
  border:0; border-radius:50%; color:var(--md-on-surface-variant);
  background:transparent; cursor:pointer; box-shadow:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.theme-toggle svg { width:20px; height:20px; pointer-events:none; }
.theme-toggle:hover,.theme-toggle[aria-expanded="true"] { background:var(--md-surface-container-high); color:var(--md-on-surface); }
.theme-toggle:active { background:var(--md-surface-container-highest); }
.theme-menu {
  position:fixed; z-index:12000; width:200px; padding:8px;
  border-radius:12px; border:0; background:var(--md-surface-container-high);
  color:var(--md-on-surface); box-shadow:0 6px 18px rgba(0,0,0,.16),0 1px 4px rgba(0,0,0,.08);
}
.theme-option { display:grid; grid-template-columns:20px 1fr 18px; align-items:center; gap:12px; width:100%; min-height:48px; border:0; border-radius:6px; padding:10px 12px; text-align:left; font:inherit; font-size:14px; line-height:1.35; color:inherit; background:transparent; cursor:pointer; }
.theme-option svg { width:20px; height:20px; }
.theme-option .theme-check { width:18px; height:18px; opacity:0; }
.theme-option[aria-checked="true"] .theme-check { opacity:1; }
.theme-option:hover,.theme-option:focus-visible { background:color-mix(in srgb,var(--md-on-surface) 8%,transparent); outline:0; }
.theme-option:focus-visible { box-shadow:inset 0 0 0 2px var(--md-outline); }
:root[data-design="fluent2"] .theme-toggle { border-radius:4px; }
:root[data-design="fluent2"] .theme-menu { padding:4px; border-radius:8px; border:1px solid var(--md-outline-variant); background:var(--md-surface-container); box-shadow:0 8px 24px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.08); font-family:'Segoe UI Variable Text','Segoe UI',sans-serif; }
:root[data-design="fluent2"] .theme-option { min-height:40px; border-radius:4px; padding:8px 12px; }
:root[data-design="fluent2"] .theme-option[aria-checked="true"] { background:color-mix(in srgb,var(--md-on-surface) 5%,transparent); }
:root[data-design="liquid-glass"] .theme-toggle { border-radius:50%; color:var(--md-on-surface); }
:root[data-design="liquid-glass"] .theme-toggle:hover,:root[data-design="liquid-glass"] .theme-toggle[aria-expanded="true"] { background:var(--glass-control); box-shadow:inset 0 0 0 1px var(--glass-line); }
:root[data-design="liquid-glass"] .theme-menu { padding:6px; border-radius:20px; border:1px solid var(--glass-line); background:var(--glass-fill); -webkit-backdrop-filter:blur(28px) saturate(1.2); backdrop-filter:blur(28px) saturate(1.2); box-shadow:var(--glass-shadow); font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
:root[data-design="liquid-glass"] .theme-option { border-radius:14px; min-height:44px; }
:root[data-design="md3"] .theme-menu { border-radius:12px; background:var(--md-surface-container-high); }
:root[data-design="md3"] .theme-option { min-height:48px; border-radius:4px; }
:root[data-design="md3"] .theme-option[aria-checked="true"] { background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) { :root[data-design="liquid-glass"] .theme-menu { background:var(--md-surface-container); -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--md-outline); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { :root[data-design="liquid-glass"] .theme-menu { background:var(--md-surface-container); } }

:root[data-design="md3"] .theme-toggle { width:48px; height:48px; min-width:48px; flex-basis:48px; }
@media (pointer:fine) { :root[data-design="fluent2"] .theme-toggle { width:36px; height:36px; min-width:36px; flex-basis:36px; } }

/* User-provided gradient, scoped to entry and peer matching screens. */
#entryScreen,#screenLanding,#screenConnecting {
  background-color:var(--md-surface-dim);
  background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),url("assets/entry-gradient.webp");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
:root[data-theme="dark"] :is(#entryScreen,#screenLanding,#screenConnecting) {
  background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)),url("assets/entry-gradient.webp");
}
#screenConnecting .connecting-center {
  flex:0 1 auto; width:min(100%,420px); margin:auto; padding:36px 28px;
  border:1px solid var(--md-outline-variant); border-radius:var(--shape-xl);
  background:color-mix(in srgb,var(--md-surface-container) 95%,transparent);
}
#screenConnecting { padding:24px; justify-content:center; }
:root[data-design="liquid-glass"] #screenConnecting .connecting-center {
  background:var(--glass-fill); border-color:var(--glass-line); border-radius:32px;
  -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
}
:root[data-design="fluent2"] #screenConnecting .connecting-center { border-radius:12px; }
:root[data-design="md3"] #screenConnecting .connecting-center { border-radius:28px; }
@media (max-width:420px) { #screenConnecting { padding:16px; } }

/* Transparent ID surfaces over the matching-page background. */
#screenLanding .id-value-row,
#screenLanding .id-value,
#screenLanding .m3-text-field,
#screenLanding .m3-input,
#screenLanding .m3-input:hover,
#screenLanding .m3-input:focus {
  background: transparent;
}