styles.css

:root{
  --bg:#0e0f13;
  --surface:#171922;
  --surface-2:#1f2230;
  --text:#eef0f6;
  --muted:#9aa1b2;
  --line:#262a38;
  --rec:#ff5d5d;
  --play:#2dd4bf;
  --speed:#f5b14c;
  --radius:18px;
  --maxw:520px;
  /* Per-person bubble accents (overridden at runtime by applyAccents). Default: you teal, them red. */
  --mine-bg:rgba(45,212,191,.11); --mine-bd:rgba(45,212,191,.26); --mine-play-bg:rgba(45,212,191,.16); --mine-play-fg:#2dd4bf;
  --theirs-bg:rgba(255,93,93,.11); --theirs-bd:rgba(255,93,93,.30); --theirs-play-bg:rgba(255,93,93,.18); --theirs-play-fg:#ff8a8a;
  --theirs-unread-bg:rgba(255,93,93,.22); --theirs-unread-bd:#ff6b6b; --theirs-glow:rgba(255,93,93,.20);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
}
#app{
  width:100%; max-width:var(--maxw); min-height:100%;
  display:flex; flex-direction:column; position:relative;
  padding-top:env(safe-area-inset-top);
}

.app-header{
  padding:22px 20px 12px; position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg), rgba(14,15,19,.82)); backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:34px; height:34px; display:block}
.app-header h1{margin:0; font-size:24px; letter-spacing:.3px}
/* the inside joke: "Sight" is crossed out, leaving "and Sound" */
.struck{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--rec); color:var(--muted); font-weight:inherit}
.tagline{margin:2px 0 0; color:var(--muted); font-size:13px}
.banner{margin:10px 0 0; color:var(--muted); font-size:12px; min-height:14px}
.banner a{color:var(--play); text-decoration:none}
/* connection / sync status dot */
.sync-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:0; background:var(--muted)}
.sync-dot.ok{background:var(--play)}
.sync-dot.busy{background:var(--speed); animation:syncpulse 1s ease-in-out infinite}
.sync-dot.off{background:#6b7180}
.sync-dot.err{background:var(--rec); animation:syncpulse 1s ease-in-out infinite}
@keyframes syncpulse{0%,100%{opacity:1}50%{opacity:.35}}
.link-btn{background:none; border:none; color:var(--play); font-size:12px; cursor:pointer; padding:0; text-decoration:underline}

/* sign-in screen */
.login{position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{width:100%; max-width:360px; text-align:center}
.login-mark{width:52px; height:52px; margin:0 auto 6px; display:block}
.login-card h2{margin:0 0 4px}
.login-sub{color:var(--muted); margin:0 0 22px}
.login-form{display:flex; flex-direction:column; gap:12px}
.login-form input{
  width:100%; padding:15px 16px; border-radius:14px; font-size:16px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
}
.login-form input:focus{outline:none; border-color:var(--play)}
.login-form button{margin-top:4px}
.login-error{color:var(--rec); font-size:13px; min-height:16px; margin:4px 0 0}

.library{
  flex:1; overflow-y:auto; padding:8px 14px 160px;
  display:flex; flex-direction:column; gap:10px;
}
.lib-note,.note{color:var(--muted); font-size:12px; text-align:center; margin:6px 4px}

/* ---- chat bubbles: your memos right (your accent, default teal), theirs left (their accent, default red).
   The accent tints are CSS vars set by applyAccents() in app.js from each person's chosen color. ---- */
.memo{
  flex:none; max-width:84%;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--surface);
  transition:opacity .15s, background .15s, border-color .15s;
}
.memo.mine{ align-self:flex-end; background:var(--mine-bg); border-color:var(--mine-bd) }
.memo.mine .memo-play{ background:var(--mine-play-bg); color:var(--mine-play-fg) }
.memo.theirs{ align-self:flex-start; background:var(--theirs-bg); border-color:var(--theirs-bd) }
.memo.theirs .memo-play{ background:var(--theirs-play-bg); color:var(--theirs-play-fg) }
.memo.heard{ opacity:.5 }                       /* a received memo you've already heard → minimized */
.memo.theirs.unread{ opacity:1; background:var(--theirs-unread-bg); border-color:var(--theirs-unread-bd); box-shadow:0 1px 14px var(--theirs-glow) }
.memo.unread .memo-title{ font-weight:700; color:#fff }
.memo.selected{ align-self:stretch; max-width:100%; opacity:1; background:var(--surface-2); border-color:#33384a; box-shadow:none }
.memo.selected .memo-play{ background:var(--play); color:#06231f }
.unread-pill{ display:inline-block; background:var(--rec); color:#fff; border-radius:999px; padding:2px 9px; font-weight:700; font-size:11px }
.memo-main{
  width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:none; color:inherit; text-align:left; padding:14px 16px; cursor:pointer;
}
.memo-play{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:rgba(45,212,191,.14); color:var(--play);
  display:grid; place-items:center; font-size:15px;
}
.memo.selected .memo-play{background:var(--play); color:#06231f}
.memo-meta{display:flex; flex-direction:column; gap:3px; min-width:0}
.memo-title{font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px}
.memo-sub{color:var(--muted); font-size:13px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--rec); display:inline-block; flex:none}

.player{padding:8px 16px 16px; border-top:1px solid var(--line)}
.wave-player{width:100%; height:54px; display:block; cursor:pointer; touch-action:none; margin:4px 0 2px}
.chips{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:8px 13px; font-size:13px; cursor:pointer; transition:all .12s;
}
.chip:active{transform:scale(.96)}
.chip.on{background:rgba(45,212,191,.16); border-color:rgba(45,212,191,.4); color:var(--play)}
.ico-c{width:15px; height:15px; display:inline-block; flex:none}

/* ---- reactions (v-next) ---- */
.reactions{display:flex; gap:8px; margin-top:10px}
.rbtn{
  flex:1; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:9px 0; cursor:pointer; color:inherit; transition:transform .08s, background .12s, border-color .12s;
}
.rbtn:active{transform:scale(.9)}
.rbtn svg{width:22px; height:22px; opacity:.55; transition:opacity .12s}
.rbtn.on{background:color-mix(in srgb, currentColor 14%, var(--surface)); border-color:currentColor}
.rbtn.on svg{opacity:1}
.memo-reacts{display:inline-flex; gap:4px; margin-top:3px}
.react-badge{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.06)}
.react-badge svg{width:13px; height:13px}
.react-badge.mine{box-shadow:0 0 0 1.5px currentColor inset}

/* ---- reply-to-a-timestamp (v-next) ---- */
.reply-line{
  display:flex; align-items:center; gap:6px; width:100%; text-align:left;
  background:rgba(45,212,191,.08); border:none; border-bottom:1px solid var(--line);
  color:var(--play); font-size:12.5px; padding:9px 16px; cursor:pointer;
}
.reply-line .ico-c{width:13px; height:13px; flex:none}
.rec-reply{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(45,212,191,.12); color:var(--play); border-radius:12px;
  padding:9px 12px; font-size:13px; margin:0 0 14px;
}
.rec-reply .ico-c{width:14px; height:14px}
.scrub{
  width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px;
  background:#2a2f40; margin:14px 0 6px; cursor:pointer;
}
.scrub::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--play); border:3px solid #0e0f13}
.scrub::-moz-range-thumb{width:18px; height:18px; border:none; border-radius:50%; background:var(--play)}
.times{display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.player-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
.pbtn{
  flex:1; background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:14px; padding:12px 0; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:3px;
}
.pbtn small{font-size:11px; opacity:.8}
.pbtn.play{flex:0 0 64px; background:var(--play); color:#06231f; font-size:18px; border:none}
.pbtn.speed{flex:0 0 70px; background:rgba(245,177,76,.16); color:var(--speed); border-color:rgba(245,177,76,.3); font-weight:700}

/* inline icons (replace emoji) */
.ico{width:22px; height:22px; display:inline-block; vertical-align:middle; flex:none}
.ico-sm{width:13px; height:13px; display:inline-block; vertical-align:-2px; flex:none}
.memo-play .ico{width:18px; height:18px}
.pbtn.play .ico{width:24px; height:24px}
.ctrl-btn .ico{width:18px; height:18px; margin-right:6px}

.empty{margin:auto; text-align:center; color:var(--muted); padding:48px 24px; max-width:320px}
.empty-art{width:60px; height:60px; margin:0 auto 10px; display:block}
.empty h2{color:var(--text); margin:0 0 6px}

.record-dock{
  position:fixed; left:0; right:0; bottom:0; margin:auto; max-width:var(--maxw);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 0 calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(14,15,19,0), var(--bg) 38%); pointer-events:none;
}
.record-btn{
  pointer-events:auto; width:78px; height:78px; border-radius:50%;
  background:var(--rec); border:5px solid #2a1416;
  box-shadow:0 8px 30px rgba(255,93,93,.35); cursor:pointer; display:grid; place-items:center;
  transition:transform .1s;
}
.record-btn:active{transform:scale(.94)}
.record-dot{width:26px; height:26px; border-radius:8px; background:#fff}
.record-hint{pointer-events:none; color:var(--muted); font-size:12px; margin:0}

.overlay{
  position:fixed; inset:0; z-index:20; background:rgba(8,9,12,.82); backdrop-filter:blur(10px);
  display:flex; align-items:flex-end; justify-content:center;
}
.overlay.hidden,.hidden{display:none !important}
.rec-card{
  width:100%; max-width:var(--maxw); background:var(--surface); border:1px solid var(--line);
  border-radius:24px 24px 0 0; padding:22px 20px calc(26px + env(safe-area-inset-bottom));
}
.wave{width:100%; height:120px; display:block}
.rec-timer{text-align:center; font-size:34px; font-variant-numeric:tabular-nums; margin:6px 0 6px; letter-spacing:1px}
.rec-hint{text-align:center; color:var(--play); font-size:13px; margin:0 0 16px}
.rec-controls{display:flex; gap:12px; justify-content:center}
.ctrl-btn{
  flex:1; padding:16px 0; border-radius:16px; font-size:16px; font-weight:600;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); cursor:pointer;
}
.ctrl-btn.stop{background:var(--rec); border:none; color:#fff}
.ctrl-btn.save{background:var(--play); border:none; color:#06231f}
.ctrl-btn.ghost{background:none; color:var(--muted)}
.ctrl-btn:disabled{opacity:.45; cursor:default}
#sb-send{width:100%}
.review-controls{display:flex; flex-direction:column; gap:14px}
.review-actions{display:flex; gap:10px}
.review-actions .ctrl-btn{flex:1 1 0; min-width:0; font-size:15px; padding:15px 4px}
#review-audio{display:none}

/* ---- rich preview: scrub + speed before sending ---- */
.rev-times{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; margin:0 2px -4px}
.rev-seek{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:var(--surface-2); outline:none; cursor:pointer; margin:0;
}
.rev-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--play); border:3px solid var(--bg); cursor:pointer;
}
.rev-seek::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--play); border:3px solid var(--bg); cursor:pointer;
}
.rev-row{display:flex; gap:8px}
.rev-row .ctrl-btn{flex:1 1 0; min-width:0; padding:13px 0; font-size:15px}
#rev-play{background:var(--surface-2); font-weight:700}
#rev-speed{color:var(--speed); font-variant-numeric:tabular-nums}
#rev-back, #rev-fwd{color:var(--muted); font-variant-numeric:tabular-nums}
#rev-continue{color:var(--play)}

/* ---- toolbar / search / filters (Phase 2) ---- */
.toolbar{display:flex; align-items:center; gap:10px; padding:2px 14px 8px}
.search{flex:1; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 12px; color:var(--muted)}
.search input{flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px; padding:11px 0; min-width:0}
.search input::placeholder{color:var(--muted)}
.icon-btn{flex:none; width:42px; height:42px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.icon-btn svg{width:20px; height:20px}
.filters{display:flex; gap:8px; padding:0 14px 10px; overflow-x:auto}
.filter{flex:none; background:var(--surface); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:7px 15px; font-size:13px; cursor:pointer}
.filter.on{background:var(--text); color:#0e0f13; border-color:var(--text); font-weight:600}
.day-head{color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:10px 4px 2px}
.empty-search{color:var(--muted); text-align:center; padding:30px 16px}

/* ---- memo row + star ---- */
.memo-row-top{display:flex; align-items:stretch}
.memo-row-top .memo-main{flex:1; min-width:0}
.star-btn{flex:none; background:none; border:none; color:#4a5160; padding:0 16px; cursor:pointer; display:grid; place-items:center}
.star-btn .ico-c{width:19px; height:19px}
.star-btn.on{color:var(--speed)}
.star-btn.on .ico-c{fill:var(--speed)}
.has-tx{display:inline-flex; vertical-align:-2px; color:var(--play); opacity:.85}
.has-tx .ico-c{width:13px; height:13px}

/* ---- settings sheet ---- */
.sheet{
  width:100%; max-width:var(--maxw); background:var(--surface); border:1px solid var(--line);
  border-radius:24px 24px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  transition:transform .22s cubic-bezier(.32,.72,0,1); will-change:transform;
  /* cap to the viewport and scroll inside — long sheets (e.g. Settings) were overflowing off the top
     with no way to reach the controls. */
  max-height:90vh; overflow-y:auto; overscroll-behavior:contain;
}
/* The grab-handle is a real drag target now (pull down to dismiss) — give it a big touch area. */
.sheet-handle{
  width:44px; height:5px; border-radius:3px; background:#3a4050; margin:2px auto 12px;
  position:relative; cursor:grab; touch-action:none;
}
.sheet-handle::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120px; height:30px}
.sheet-handle:active{cursor:grabbing; background:#4a5163}
.sheet h3{margin:0 0 8px}
.setting{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.setting > span{display:flex; flex-direction:column; gap:2px; font-size:15px}
.setting small{color:var(--muted); font-size:12px; font-weight:400}
.switch{appearance:none; -webkit-appearance:none; width:46px; height:28px; border-radius:999px; background:#2a2f40; position:relative; cursor:pointer; flex:none; transition:background .15s; border:none}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s}
.switch:checked{background:var(--play)}
.switch:checked::after{transform:translateX(18px)}
.seg{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.seg-cap{color:var(--muted); font-size:12px; margin-right:2px}
.seg-btn{background:var(--surface-2); border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:7px 12px; font-size:14px; cursor:pointer; font-variant-numeric:tabular-nums}
.seg-btn.on{background:rgba(245,177,76,.18); color:var(--speed); border-color:rgba(245,177,76,.4); font-weight:700}
/* setting that stacks its control under the label (for the color swatch rows) */
.setting.col{flex-direction:column; align-items:stretch; gap:10px}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; outline:2px solid var(--line); outline-offset:-2px}
.swatch.on{border-color:var(--text); outline-color:var(--text); transform:scale(1.06)}
#set-close{margin-top:18px; width:100%}
.set-version{text-align:center; color:var(--muted); font-size:11px; margin:14px 0 0; opacity:.7}

/* ---- studio: soundboard + remix (Phase 5) ---- */
.sheet-sub{color:var(--muted); font-size:13px; margin:-4px 0 14px}
.pad-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:16px}
.pad{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  border-radius:16px; padding:16px 6px 12px; font-size:13px; cursor:pointer; transition:transform .08s, border-color .12s;
}
.pad:active{transform:scale(.94)}
.pad.on{border-color:var(--play); background:rgba(45,212,191,.12)}
.pad-icon{display:grid; place-items:center; color:var(--play)}
.pad-icon svg{width:30px; height:30px}
.fx-group{margin:6px 0 12px}
.fx-group label{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px}
.seg-wrap{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; transition:all .1s;
}
.pill.on{background:rgba(45,212,191,.16); border-color:rgba(45,212,191,.45); color:var(--play); font-weight:600}
.fx-actions{display:flex; gap:12px; margin-top:18px}
.fx-actions .ctrl-btn{flex:1}

/* ---- transcript (Phase 4) ---- */
.sheet.tall{max-height:82vh; display:flex; flex-direction:column}
.tx-head{display:flex; align-items:center; justify-content:space-between}
.tx-head h3{margin:0}
.tx-body{flex:1; overflow-y:auto; line-height:1.7; font-size:16px; padding:10px 0; color:var(--text)}
.tx-seg{cursor:pointer; border-radius:4px; padding:1px 2px; transition:background .1s}
.tx-seg:hover{background:rgba(45,212,191,.12)}
.tx-seg.cur{background:rgba(45,212,191,.22); color:#fff}
.tx-edit-area{flex:1; min-height:200px; width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; color:var(--text); font-size:16px; line-height:1.6; padding:14px; resize:none; outline:none; font-family:inherit}
.tx-empty{text-align:center; padding:24px 8px; color:var(--muted)}
.tx-empty .ctrl-btn{margin:14px auto 8px; width:auto; padding-left:24px; padding-right:24px}
.tx-status{text-align:center; color:var(--play); padding:24px 8px; font-size:15px}

.toast{
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%);
  background:#000; color:#fff; padding:12px 18px; border-radius:999px; font-size:14px;
  z-index:40; border:1px solid #2c3142; max-width:90%; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.5);
}