/* TCT glass skin for Talky (Toms, 2026-10-17), from his "液态玻璃感" note. Skin only: the layout,
   the two big buttons, the record button and the red unheard marks keep their size and place,
   because this is used one-handed on a phone to find someone fast. Loaded after style.css; it
   works by re-pointing style.css's own colour variables, then adding glass to the surfaces.
   Light and dark both, because Talky already follows the phone's setting. */
:root{
  --bg:#d4b8ac; --card:rgba(255,255,255,.55); --ink:#2a211c; --mute:#7b6a60; --line:rgba(255,255,255,.7);
  --brand:#b66d44; --brand-ink:#ffffff; --soft:rgba(182,109,68,.16);
  --g-edge:rgba(255,255,255,.65); --g-shadow:0 14px 40px rgba(120,70,40,.16),0 2px 6px rgba(120,70,40,.08);
  --g-glow:rgba(231,164,113,.55); --g-dark:#1b1b19;
  --g-sheet:rgba(250,244,240,.8);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1d1a22; --card:rgba(255,255,255,.08); --ink:#f3ebe6; --mute:#b9a9a0; --line:rgba(255,255,255,.16);
    --brand:#e7a471; --brand-ink:#1b1b19; --soft:rgba(231,164,113,.22);
    --g-edge:rgba(255,255,255,.16); --g-shadow:0 14px 40px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.25);
    --g-glow:rgba(182,109,68,.5); --g-dark:#0f0e0d; --g-sheet:rgba(34,29,40,.86);
  }
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(900px 600px at 8% -8%,#e4c0a6 0,transparent 60%),
    radial-gradient(800px 560px at 100% 30%,rgba(255,255,255,.5) 0,transparent 62%),
    radial-gradient(900px 640px at 40% 108%,#ebd7cc 0,transparent 60%),
    linear-gradient(160deg,#e4c0a6,#d4b8ac 52%,#ebd7cc);
  background-attachment:fixed; color:var(--ink);
}
@media (prefers-color-scheme: dark){
  body{background:
    radial-gradient(900px 600px at 8% -8%,rgba(182,109,68,.35) 0,transparent 60%),
    radial-gradient(800px 560px at 100% 30%,rgba(120,100,170,.22) 0,transparent 62%),
    radial-gradient(900px 640px at 40% 108%,rgba(182,109,68,.18) 0,transparent 60%),
    linear-gradient(160deg,#2a1f24,#1d1a22 55%,#211c28);
    background-attachment:fixed}
}
h1{font-weight:750;letter-spacing:-.6px}
a{color:var(--brand)}

/* ---- glass surfaces ---- */
.card,.tabs,input,select,textarea,button,.btn{-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.card{background:var(--card);border:1px solid var(--g-edge);border-radius:24px;padding:14px 16px;box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.5)}
.card.unheard{border-left:6px solid var(--red)}
button,.btn{background:rgba(255,255,255,.5);border:1px solid var(--g-edge);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);font-weight:650}
@media (prefers-color-scheme: dark){button,.btn{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}}
button.primary,.btn.primary{background:linear-gradient(160deg,#e7a471,#b66d44);color:#fff;border:0;box-shadow:0 8px 20px rgba(182,109,68,.38),inset 0 1px 0 rgba(255,255,255,.35)}
@media (prefers-color-scheme: dark){button.primary,.btn.primary{color:#1b1b19}}
button.link{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
button.sel,.answers button.sel{background:var(--soft);border-color:var(--brand)}
input,select,textarea{border-radius:18px;border:1px solid var(--g-edge);background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
@media (prefers-color-scheme: dark){input,select,textarea{background:rgba(255,255,255,.08);box-shadow:none}}
input:focus,select:focus,textarea:focus{outline:2px solid var(--g-glow);outline-offset:1px}
.tag{background:var(--soft);color:var(--ink);border-radius:999px}

/* ---- the two big buttons: same size and place, glass colours ---- */
.big-btn{border-radius:30px;box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.3)}
.big-btn.inbox{background:linear-gradient(160deg,#e7a471,#b66d44);color:#fff}
.big-btn.send{background:radial-gradient(120% 90% at 50% -20%,var(--g-glow),transparent 58%),var(--g-dark);color:#fff}
.mic{border-radius:30px}
.live,.micbar{background:var(--red)}

/* ---- the bottom bar: a floating glass dock, same two big tabs ---- */
.tabs{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding-bottom:0;border:1px solid var(--g-edge);border-radius:28px;background:var(--g-sheet);box-shadow:var(--g-shadow);overflow:hidden}
.tabs button{background:none;border:0;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.tabs button.on{color:var(--brand);background:rgba(255,255,255,.4)}
@media (prefers-color-scheme: dark){.tabs button.on{background:rgba(255,255,255,.1)}}
#app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.micbar{border-radius:0 0 22px 22px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.tabs{background:var(--g-sheet)}}