/* ════════════════════════════════════════════════════════════════════════
   Sync — Dark UI
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:        #09090f;
  --surface:   #111120;
  --surface2:  #191928;
  --surface3:  #21213a;

  /* Borders */
  --border:    #2a2a48;
  --border2:   #38385a;

  /* Brand */
  --accent:    #7c6af7;
  --accent-h:  #9a8bff;
  --accent-dim:rgba(124, 106, 247, 0.14);
  --accent-glow:rgba(124, 106, 247, 0.25);

  /* Status */
  --green:     #22c55e;
  --green-dim: rgba(34, 197, 94, 0.12);
  --amber:     #f97316;
  --amber-dim: rgba(249, 115, 22, 0.12);
  --red:       #ef4444;
  --red-dim:   rgba(239, 68, 68, 0.12);

  /* Text */
  --text:      #f0f0fc;
  --text-2:    #9090b8;
  --text-3:    #555575;

  /* Radii */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill:999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px  rgba(0,0,0,.35);
  --shadow-md: 0 8px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  height: 100%;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(124,106,247,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(99,102,241,.04) 0%, transparent 70%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* ── App shell ───────────────────────────────────────────────────────── */
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* ── Screen management ───────────────────────────────────────────────── */
.screen {
  display:        none;
  flex-direction: column;
  width:          100%;
  max-width:      420px;
  padding:        2rem 1.5rem;
  gap:            1.5rem;
  animation:      fadeUp .22s ease both;
}
.screen.active { display: flex; }

/* Session screen is full-viewport, no centering */
#screen-session {
  max-width:  100%;
  height:     100dvh;
  padding:    0;
  gap:        0;
  overflow:   hidden; /* contain all children within 100dvh */
}

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

/* ── Brand / Landing ─────────────────────────────────────────────────── */
.brand {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .4rem;
  position:       relative;
  padding-top:    .5rem;
}
.brand-glow {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -65%);
  width:         200px;
  height:        200px;
  background:    radial-gradient(var(--accent-glow), transparent 70%);
  pointer-events:none;
}
.brand-icon {
  width:  52px;
  height: 52px;
  color:  var(--accent);
  filter: drop-shadow(0 0 16px var(--accent-glow));
  margin-bottom: .25rem;
}
.brand-name {
  font-size:      2.4rem;
  font-weight:    800;
  letter-spacing: -.04em;
  background:     linear-gradient(135deg, #c4b9ff 0%, var(--accent) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-tag {
  font-size:  .88rem;
  color:      var(--text-2);
  text-align: center;
}

/* ── Plan comparison ─────────────────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.plan {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       1rem;
  display:       flex;
  flex-direction:column;
  gap:           .75rem;
}
.plan-pro {
  border-color: var(--accent-dim);
  background:   color-mix(in srgb, var(--accent-dim) 35%, var(--surface));
  position:     relative;
  overflow:     hidden;
}
.plan-pro::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(135deg, rgba(124,106,247,.06) 0%, transparent 60%);
  pointer-events: none;
}
.plan-header {
  display:     flex;
  align-items: baseline;
  gap:         .4rem;
}
.plan-name {
  font-size:   .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:       var(--text-2);
}
.plan-pro .plan-name { color: var(--accent-h); }
.plan-price {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--accent-h);
  margin-left: auto;
}
.plan-price small { font-size: .68rem; font-weight: 500; color: var(--text-2); }
.plan-features {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap: .4rem;
}
.plan-features li {
  font-size:   .78rem;
  color:       var(--text-2);
  display:     flex;
  align-items: center;
  gap:         .35rem;
}
.plan-pro .plan-features li { color: var(--text); }
.feat-icon { font-size: .8rem; flex-shrink: 0; }

/* ── Landing CTAs ────────────────────────────────────────────────────── */
.landing-ctas { display: flex; flex-direction: column; gap: .65rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .45rem;
  padding:         .7rem 1.3rem;
  border-radius:   var(--r-sm);
  font-size:       .9rem;
  font-weight:     600;
  cursor:          pointer;
  border:          none;
  transition:      background .15s, color .15s, box-shadow .15s, transform .1s, opacity .15s;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space:     nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-lg { padding: .85rem 1.5rem; font-size: .95rem; border-radius: var(--r-md); }
.btn-sm { padding: .45rem .9rem;  font-size: .8rem; }
.btn-xs { padding: .3rem .65rem;  font-size: .75rem; border-radius: var(--r-xs); }

.btn-primary {
  background: var(--accent);
  color:      #fff;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-h);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-secondary {
  background: var(--surface2);
  color:      var(--text);
  border:     1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface3); border-color: var(--border2); }

.btn-ghost {
  background: transparent;
  color:      var(--text-2);
  border:     1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface2); color: var(--text); }
.btn-ghost.danger       { color: var(--red);  border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.btn-ghost.danger:hover { background: var(--red-dim); color: var(--red); }

/* Icon-only back button */
.btn-icon {
  background:    none;
  border:        none;
  color:         var(--text-2);
  cursor:        pointer;
  padding:       .3rem;
  border-radius: var(--r-xs);
  display:       flex;
  align-items:   center;
  transition:    color .15s;
}
.btn-icon:hover { color: var(--text); }
.btn-icon svg { width: 20px; height: 20px; }

/* ── Screen header ───────────────────────────────────────────────────── */
.screen-header { display: flex; align-items: center; gap: .65rem; }
.screen-title  { font-size: 1.1rem; font-weight: 700; }

/* ── Waiting pill ────────────────────────────────────────────────────── */
.waiting-pill {
  display:       flex;
  align-items:   center;
  gap:           .55rem;
  align-self:    center;
  padding:       .45rem 1.1rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  font-size:     .8rem;
  color:         var(--text-2);
}
.pulse-dot {
  width:    8px;
  height:   8px;
  border-radius: 50%;
  background: var(--accent);
  position:  relative;
  flex-shrink: 0;
}
.pulse-dot::after {
  content:    '';
  position:   absolute;
  inset:      -4px;
  border-radius: 50%;
  border:     2px solid var(--accent);
  animation:  pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* ── QR card ─────────────────────────────────────────────────────────── */
.qr-card {
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           .75rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       1.5rem;
}
.qr-img {
  width:         200px;
  height:        200px;
  border-radius: var(--r-sm);
  display:       block;
}
.qr-hint {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  font-size:   .78rem;
  color:       var(--text-3);
}
.qr-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── OR divider ──────────────────────────────────────────────────────── */
.or-divider {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  color:       var(--text-3);
  font-size:   .75rem;
  letter-spacing: .04em;
}
.or-divider::before, .or-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

/* ── Code panel ──────────────────────────────────────────────────────── */
.code-panel {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .65rem;
}
.code-label {
  font-size:   .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--text-3);
}
.big-code {
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size:   2.4rem;
  font-weight: 800;
  letter-spacing: .4em;
  padding-right: .4em; /* optical compensation for letter-spacing on last char */
  color:       var(--text);
  line-height: 1.1;
}
.code-expiry {
  font-size:  .75rem;
  color:      var(--text-3);
  min-height: 1.1em;
  text-align: center;
}
.code-expiry.expiring { color: var(--amber); }

/* ── Join screen ─────────────────────────────────────────────────────── */
.join-hint {
  font-size:   .88rem;
  color:       var(--text-2);
  line-height: 1.6;
}
.code-input {
  width:          100%;
  background:     var(--surface);
  border:         2px solid var(--border);
  border-radius:  var(--r-md);
  color:          var(--text);
  font-family:    'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size:      2.2rem;
  font-weight:    800;
  letter-spacing: .3em;
  text-align:     center;
  text-transform: uppercase;
  padding:        .85rem 1rem;
  outline:        none;
  transition:     border-color .15s, box-shadow .15s;
  caret-color:    var(--accent);
}
.code-input::placeholder { color: var(--text-3); letter-spacing: .2em; }
.code-input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-dim);
}

/* ── Error message ───────────────────────────────────────────────────── */
.error-msg {
  font-size:   .82rem;
  color:       var(--red);
  text-align:  center;
  min-height:  1.1em;
  line-height: 1.5;
}
.error-msg.hidden { visibility: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   SESSION SCREEN
   ════════════════════════════════════════════════════════════════════════ */

/* ── Top bar ─────────────────────────────────────────────────────────── */
.session-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.5rem;
  background:      var(--surface);
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
  height:          48px;
  min-height:      48px;
  gap:             .75rem;
  z-index:         10;
}
.bar-left {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  min-width:   0;
  flex:        1;
}
.bar-right {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-shrink: 0;
}

/* ── Peer dot ────────────────────────────────────────────────────────── */
.peer-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--border2);
  flex-shrink:   0;
  transition:    background .3s;
}
.peer-dot.connected { background: var(--green); }
.peer-dot.waiting   { background: var(--accent);
  box-shadow: 0 0 0 0 rgba(124,106,247,.7);
  animation:  peerPulse 2s infinite; }
.peer-dot.offline   { background: var(--red); }
.peer-dot.typing    { background: var(--accent); animation: typingBounce .65s ease-in-out infinite alternate; }

@keyframes peerPulse {
  0%  { transform: scale(.95); box-shadow: 0 0 0 0 rgba(124,106,247,.7); }
  70% { transform: scale(1);   box-shadow: 0 0 0 6px rgba(124,106,247,0); }
  100%{ transform: scale(.95); box-shadow: 0 0 0 0 rgba(124,106,247,0); }
}
@keyframes typingBounce {
  from { transform: scale(.7); opacity: .5; }
  to   { transform: scale(1.3); opacity: 1; }
}

.peer-label {
  font-family:   'Space Grotesk', system-ui, sans-serif;
  font-size:     .72rem;
  font-weight:   500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:         var(--text-2);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ── Timer pill ──────────────────────────────────────────────────────── */
.timer-pill {
  display:       flex;
  align-items:   center;
  gap:           .35rem;
  padding:       .22rem .75rem;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  transition:    border-color .3s;
}
.timer-icon {
  font-size:   14px !important;
  color:       var(--text-3);
  line-height: 1;
}
.session-timer {
  font-family:          'Space Grotesk', 'SF Mono', monospace;
  font-size:            .75rem;
  font-weight:          700;
  font-variant-numeric: tabular-nums;
  color:                var(--text-2);
  white-space:          nowrap;
  transition:           color .3s;
}
.session-timer.pending { color: var(--text-3); opacity: .65; }
.session-timer.warn    { color: var(--amber); }
.session-timer.urgent  { color: var(--red); animation: blink .7s step-end infinite; }
.timer-pill.warn   { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); }
.timer-pill.urgent { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
@keyframes blink { 50% { opacity: .35; } }

/* ── Sync badge (compound pill) ──────────────────────────────────────── */
.sync-badge {
  display:        flex;
  align-items:    center;
  gap:            .3rem;
  padding:        .22rem .55rem;
  border-radius:  var(--r-xs);
  font-family:    'Space Grotesk', system-ui, sans-serif;
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition:     background .2s, color .2s;
}
.sync-badge.synced  { background: rgba(34,197,94,.1);  color: var(--green); }
.sync-badge.syncing { background: var(--accent-dim);   color: var(--accent-h); }
.sync-dot {
  width:       6px;
  height:      6px;
  border-radius: 50%;
  background:  currentColor;
  flex-shrink: 0;
}

/* ── Session body ────────────────────────────────────────────────────── */
.session-body {
  flex:       1;
  min-height: 0;  /* allow shrinking below content size */
  display:    flex;
  overflow:   hidden;
}

/* ── Writing canvas ──────────────────────────────────────────────────── */
.session-main {
  flex:            1;
  min-height:      0;  /* allow shrinking */
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         2rem 1.5rem;
}

/* Stitch-style card that holds the textarea */
.notepad-card {
  width:          100%;
  max-width:      720px;
  flex:           1;
  min-height:     0;   /* allow shrinking */
  display:        flex;
  flex-direction: column;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--r-lg);
  padding:        1.5rem 2rem;
  box-shadow:     var(--shadow-lg);
}

/* ── Notepad textarea ────────────────────────────────────────────────── */
.notepad {
  flex:        1;
  min-height:  0;  /* shrink with flex parent */
  width:       100%;
  background:  transparent;
  border:      none;
  outline:     none;
  resize:      none;
  color:       var(--text);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size:   1.05rem;
  line-height: 1.8;
  caret-color: var(--accent);
}
.notepad::placeholder { color: var(--text-3); opacity: .8; }
.notepad:disabled     { opacity: .35; cursor: not-allowed; }

/* ── Attached Files side panel ───────────────────────────────────────── */
.files-panel {
  width:          320px;
  min-width:      320px;
  background:     var(--surface);
  border-left:    1px solid var(--border);
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
}
.files-panel-head {
  padding:         1rem;
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.files-panel-title {
  display:        flex;
  align-items:    center;
  gap:            .45rem;
  font-family:    'Space Grotesk', system-ui, sans-serif;
  font-size:      .7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--text-2);
}
.files-panel-head-right {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.files-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   var(--r-xs);
  border:          none;
  background:      transparent;
  color:           var(--text-3);
  cursor:          pointer;
  transition:      background .15s, color .15s;
}
.files-close-btn:hover { background: var(--surface2); color: var(--text); }
.files-close-btn .material-symbols-outlined { font-size: 18px; }
.pro-badge-sm {
  background:    var(--accent-dim);
  color:         var(--accent-h);
  font-family:   'Space Grotesk', system-ui, sans-serif;
  font-size:     .6rem;
  font-weight:   700;
  padding:       2px 6px;
  border-radius: 3px;
}
.pro-badge-xs {
  background:    var(--accent);
  color:         #fff;
  font-size:     .55rem;
  font-weight:   700;
  padding:       1px 4px;
  border-radius: 2px;
  margin-left:   2px;
  line-height:   1.4;
}
.files-list {
  flex:           1;
  overflow-y:     auto;
  padding:        1rem;
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}
.file-item {
  display:       flex;
  align-items:   center;
  gap:           .65rem;
  padding:       .5rem;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  transition:    border-color .15s;
}
.file-item:hover { border-color: rgba(199,191,255,.35); }
.file-icon {
  width:           32px;
  height:          32px;
  min-width:       32px;
  border-radius:   var(--r-xs);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.file-icon-pdf { background: rgba(239,68,68,.1);  color: var(--red); }
.file-icon-img { background: rgba(34,197,94,.1);  color: var(--green); }
.file-icon-zip { background: var(--accent-dim);   color: var(--accent-h); }
.file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.file-name {
  font-size:     .78rem;
  font-weight:   700;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.file-meta {
  font-size:      .65rem;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.file-actions { display: flex; align-items: center; gap: .1rem; }
.file-btn {
  padding:       .3rem;
  background:    none;
  border:        none;
  color:         var(--text-2);
  cursor:        pointer;
  border-radius: var(--r-xs);
  display:       flex;
  transition:    color .15s, background .15s;
}
.file-btn:hover     { background: var(--accent-dim); color: var(--accent-h); }
.file-btn-del:hover { background: var(--red-dim);    color: var(--red); }
.files-upload-zone {
  padding:        1rem;
  border-top:     1px solid var(--border);
  display:        flex;
  flex-direction: column;
  gap:            .65rem;
}
.upload-drop {
  border:         2px dashed var(--border);
  border-radius:  var(--r-lg);
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .5rem;
  cursor:         pointer;
  transition:     border-color .15s, background .15s;
}
.upload-drop:hover { border-color: var(--accent); background: var(--accent-dim); }
.upload-icon { font-size: 24px; color: var(--text-3); transition: color .15s; }
.upload-drop:hover .upload-icon { color: var(--accent-h); }
.upload-label {
  font-family:    'Space Grotesk', system-ui, sans-serif;
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-3);
  text-align:     center;
}
.upload-btn { width: 100%; justify-content: center; }

/* ── Session footer ──────────────────────────────────────────────────── */
.session-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          44px;
  min-height:      44px;
  padding:         0 1.5rem;
  flex-shrink:     0;
  background:      var(--surface);
  border-top:      1px solid var(--border2); /* slightly brighter border */
  gap:             .5rem;
  z-index:         10;
}
.footer-left {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  min-width:   0;
}
.footer-right {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  flex-shrink: 0;
}
.text-stat {
  font-family:          'Space Grotesk', system-ui, sans-serif;
  font-size:            .68rem;
  color:                var(--text-3);
  font-variant-numeric: tabular-nums;
  text-transform:       uppercase;
  letter-spacing:       .06em;
  white-space:          nowrap;
}
.stat-sep {
  color:       var(--border);
  flex-shrink: 0;
  user-select: none;
}
.footer-sep {
  width:       1px;
  height:      14px;
  background:  var(--border);
  flex-shrink: 0;
  margin:      0 .2rem;
}

/* Attach PRO button */
.btn-attach-pro {
  color:      var(--accent-h) !important;
  border:     1px solid rgba(199,191,255,.3) !important;
  background: var(--accent-dim) !important;
}
.btn-attach-pro:hover { background: rgba(124,106,247,.22) !important; }

/* ── Stitch-style banner ad / promo strip ────────────────────────────── */
.banner-ad {
  flex-shrink:     0;
  height:          60px;
  min-height:      60px;
  background:      #111120;
  border-top:      1px solid var(--border2);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1.5rem;
  gap:             1rem;
}
.banner-inner {
  display:    flex;
  align-items:center;
  gap:        1rem;
  flex:       1;
  min-width:  0;
}
.banner-icon {
  width:           40px;
  height:          40px;
  min-width:       40px;
  background:      linear-gradient(135deg, var(--accent) 0%, #c3c3ed 100%);
  border-radius:   var(--r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #2b009e;
  flex-shrink:     0;
}
.banner-copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.banner-title-row { display: flex; align-items: center; gap: .5rem; }
.banner-sponsored {
  font-family:    'Space Grotesk', system-ui, sans-serif;
  font-size:      .58rem;
  font-weight:    700;
  letter-spacing: .06em;
  color:          var(--text-3);
  border:         1px solid var(--border2);
  border-radius:  3px;
  padding:        1px 5px;
  flex-shrink:    0;
}
.banner-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size:   .85rem;
  font-weight: 700;
  color:       var(--text);
  white-space: nowrap;
}
.banner-desc {
  font-size:     .72rem;
  color:         var(--text-2);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Tablet — hide files panel */
@media (max-width: 1023px) {
  .files-panel    { display: none !important; }
  .session-main   { padding: 1.25rem 1rem; }
  .notepad-card   { padding: 1.25rem 1.5rem; }
  .banner-desc    { display: none; }
}

/* Mobile — compact everything */
@media (max-width: 640px) {
  /* Top bar */
  .session-bar    { padding: 0 .875rem; }
  .peer-label     { font-size: .68rem; letter-spacing: .04em; }

  /* Writing area — zero padding so card fills edge-to-edge */
  .session-main   { padding: .5rem; }
  .notepad-card   {
    padding:       .875rem 1rem;
    border-radius: var(--r-md);
    max-width:     none;
  }
  .notepad        { font-size: .97rem; line-height: 1.75; }

  /* Footer — hide Attach (Pro) on mobile, tighten spacing */
  .session-footer { padding: 0 .75rem; gap: .15rem; }
  .btn-attach-pro { display: none !important; }
  .btn.btn-ghost.btn-xs { padding: .3rem .5rem; font-size: .72rem; }
  .footer-sep     { margin: 0 .1rem; }

  /* Banner — tighter */
  .banner-ad      { padding: 0 .875rem; }
  .banner-icon    { width: 32px; height: 32px; min-width: 32px; }
}

/* ── Mobile Attach FAB ───────────────────────────────────────────────── */
.attach-fab {
  display:         none; /* hidden on desktop */
  position:        absolute;
  bottom:          116px; /* 44px footer + 60px banner + 12px gap */
  right:           16px;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      var(--accent-dim);
  border:          1px solid rgba(199,191,255,.35);
  color:           var(--accent-h);
  box-shadow:      0 4px 16px rgba(124,106,247,.35);
  cursor:          pointer;
  align-items:     center;
  justify-content: center;
  transition:      transform .15s, box-shadow .15s, background .15s;
  z-index:         20;
}
.attach-fab:hover {
  background:   rgba(124,106,247,.22);
  box-shadow:   0 6px 22px rgba(124,106,247,.45);
  transform:    translateY(-2px);
}
.attach-fab:active { transform: scale(.94); }
.attach-fab .material-symbols-outlined { font-size: 22px; }

/* PRO badge on the FAB */
.attach-fab-badge {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size:   .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  color:       var(--accent-h);
  background:  var(--surface2);
  border:      1px solid rgba(199,191,255,.3);
  border-radius: var(--r-pill);
  padding:     1px 4px;
  line-height: 1.4;
}

/* Show FAB only on mobile */
@media (max-width: 640px) {
  .attach-fab { display: flex; }
  /* If banner is hidden (Pro user), drop FAB lower */
  #banner-ad.hidden ~ #btn-attach-fab,
  .attach-fab.banner-hidden { bottom: 56px; }
}

/* Very small phones — icon-only Copy, hide word count */
@media (max-width: 400px) {
  .copy-label     { display: none; }
  .word-count-stat{ display: none; }
  .stat-sep       { display: none; }
  .btn.btn-ghost.btn-xs { padding: .3rem .4rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position:    fixed;
  inset:       0;
  background:  rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     1.25rem;
  z-index:     100;
  animation:   fadeIn .2s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       2rem 1.5rem;
  width:         100%;
  max-width:     380px;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           1rem;
  box-shadow:    var(--shadow-lg);
  animation:     scaleIn .22s ease both;
  position:      relative;
}

/* Modal dismiss (×) button */
.modal-close-btn {
  position:   absolute;
  top:        .75rem;
  right:      .75rem;
  width:      32px;
  height:     32px;
  border-radius: 50%;
  background: transparent;
  border:     1px solid transparent;
  color:      var(--text-3);
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-close-btn:hover {
  background:   var(--surface2);
  border-color: var(--border);
  color:        var(--text);
}
.modal-close-btn .material-symbols-outlined { font-size: 18px; }
@keyframes scaleIn {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.modal-close-btn {
  position: absolute;
  top: .85rem; right: .85rem;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--r-xs);
  display: flex;
  transition: color .15s;
}
.modal-close-btn:hover { color: var(--text); }
.modal-close-btn svg { width: 14px; height: 14px; }

.modal-icon-wrap { font-size: 2.4rem; line-height: 1; }
.modal-title { font-size: 1.1rem; font-weight: 700; text-align: center; }
.modal-desc  { font-size: .83rem; color: var(--text-2); text-align: center; line-height: 1.55; }

/* ── Option list (upgrade modal) ─────────────────────────────────────── */
.option-list {
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  width:          100%;
}
.option-btn {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  width:         100%;
  padding:       .85rem 1rem;
  border-radius: var(--r-md);
  cursor:        pointer;
  border:        1px solid var(--border);
  background:    var(--surface2);
  color:         var(--text);
  gap:           .65rem;
  transition:    background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  text-align:    left;
}
.option-btn:active { transform: scale(.98); }
.option-btn:disabled { opacity: .35; pointer-events: none; }

.option-ad:hover     { background: var(--surface3); }
.option-pro          { border-color: var(--accent-dim); }
.option-pro:hover    { background: color-mix(in srgb, var(--accent-dim) 50%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.option-restore:hover{ background: var(--surface3); }

.option-lead {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  min-width:   0;
}
.option-emoji { font-size: 1.25rem; flex-shrink: 0; }
.option-copy  { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.option-copy strong { font-size: .88rem; font-weight: 600; }
.option-copy span   { font-size: .76rem; color: var(--text-2); }
.option-meta  { font-size: .75rem; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.option-price { color: var(--accent-h); font-weight: 700; font-size: .85rem; }

.upgrade-end-btn { margin-top: .25rem; }

/* ── Ad overlay ──────────────────────────────────────────────────────── */
.ad-card { gap: 1.1rem; }
.ad-card-eyebrow {
  font-size:   .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:       var(--text-3);
}
.ad-video-wrap {
  position:   relative;
  width:       100%;
  display:     flex;
  align-items: center;
  justify-content: center;
}
.ad-video-sim {
  width:         100%;
  height:        155px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  display:       flex;
  flex-direction:column;
  align-items:   center;
  justify-content:center;
  gap:           .5rem;
}
.ad-play-svg  { width: 52px; height: 52px; color: var(--text-2); }
.ad-sim-label { font-size: .7rem; color: var(--text-3); text-align: center; padding: 0 1rem; }

.ad-ring-wrap {
  position:      absolute;
  bottom:        .5rem;
  right:         .5rem;
  width:         44px;
  height:        44px;
  display:       flex;
  align-items:   center;
  justify-content:center;
}
.ad-ring-svg { position: absolute; width: 44px; height: 44px; }
.ad-countdown-num {
  position:    relative;
  font-size:   .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ad-reward-msg { font-size: .83rem; color: var(--text-2); text-align: center; }

/* ── OTP modal ───────────────────────────────────────────────────────── */
.otp-card { padding-top: 2.5rem; }

.phone-field {
  display:       flex;
  align-items:   center;
  width:         100%;
  background:    var(--surface2);
  border:        2px solid var(--border);
  border-radius: var(--r-md);
  overflow:      hidden;
  transition:    border-color .15s, box-shadow .15s;
}
.phone-field:focus-within {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-dim);
}
.phone-prefix {
  padding:      0 .85rem;
  font-size:    .95rem;
  font-weight:  600;
  color:        var(--text-2);
  border-right: 1px solid var(--border);
  height:       100%;
  display:      flex;
  align-items:  center;
  flex-shrink:  0;
  user-select:  none;
  min-height:   50px;
}
.phone-input {
  flex:        1;
  background:  transparent;
  border:      none;
  outline:     none;
  padding:     .75rem .9rem;
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--text);
  letter-spacing: .06em;
  caret-color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.phone-input::placeholder { color: var(--text-3); letter-spacing: .02em; font-weight: 400; }

.otp-code-input {
  width:         100%;
  background:    var(--surface2);
  border:        2px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-family:   'SF Mono', 'Fira Code', monospace;
  font-size:     2rem;
  font-weight:   800;
  letter-spacing:.4em;
  text-align:    center;
  padding:       .75rem 1rem;
  outline:       none;
  transition:    border-color .15s, box-shadow .15s;
  caret-color:   var(--accent);
}
.otp-code-input::placeholder { color: var(--text-3); letter-spacing: .2em; }
.otp-code-input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-dim);
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position:    fixed;
  bottom:      2rem;
  left:        50%;
  transform:   translateX(-50%);
  background:  var(--surface2);
  border:      1px solid var(--border2);
  border-radius: var(--r-md);
  padding:     .7rem 1.3rem;
  font-size:   .85rem;
  font-weight: 500;
  box-shadow:  var(--shadow-md);
  z-index:     200;
  white-space: nowrap;
  pointer-events: none;
  animation:   toastIn .3s ease both;
}
.toast.success { border-color: var(--green);  color: var(--green); }
.toast.error   { border-color: var(--red);    color: var(--red); }
.toast.info    { border-color: var(--accent); color: var(--accent-h); }

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

/* ── Focus visible ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Utility ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .big-code    { font-size: 2rem; letter-spacing: .3em; }
  .code-input  { font-size: 1.8rem; }
  .plans       { grid-template-columns: 1fr; }
  .modal-card  { padding: 1.75rem 1.1rem; }
  .plan-price  { font-size: .88rem; }
}

@media (min-width: 640px) {
  .screen { padding: 2.5rem 2rem; }
  .session-bar { padding: .6rem 1.5rem; }
  .notepad { padding: 2rem 2.5rem; font-size: 1.05rem; }
  .session-footer { padding: 0 1rem 0 1.5rem; }
}

/* ── Ad slots ─────────────────────────────────────────────────────────── */

/* Prevent CLS: the banner container is already 60px in CSS; force the
   AdSense <ins> to fill it before the ad slot is loaded.               */
#banner-ad ins.adsbygoogle {
  display: block !important;
}

/* Waiting-screen display ad — centred, transparent background.
   min-height reserves space so the layout doesn't jump on fill.        */
.waiting-ad-container {
  width:         100%;
  max-width:     420px;
  min-height:    100px;
  margin-top:    1.5rem;
  background:    transparent;
  align-self:    center;
}