:root{
  --paper:#fcfbf8;
  --ink:#111;
  --faint:#b9b5ac;
  --line:#efede7;
  --bad:#d1503f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--paper);color:var(--ink);overflow:hidden;
  font:17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.pager{
  display:flex;height:100vh;height:100dvh;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pager::-webkit-scrollbar{display:none}
.page{
  flex:0 0 100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.list{
  padding:calc(env(safe-area-inset-top) + 86px) 26px calc(150px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:20px;
}
.note{white-space:pre-wrap;word-break:break-word}
.note.pending{color:var(--faint)}

.modes{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:center;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 0 10px;
  background:var(--paper);
}
.modes-inner{display:flex;gap:2px;padding:3px;border-radius:999px;background:#efece4}
.modes button{
  border:0;background:transparent;color:#8b877e;
  font:inherit;font-size:13px;line-height:1;
  padding:7px 15px;border-radius:999px;min-width:0;
  transition:background .16s ease,color .16s ease;
}
.modes button.on{background:var(--ink);color:var(--paper)}

.add{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(38px + env(safe-area-inset-bottom));
  width:74px;height:74px;border-radius:50%;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  font-size:34px;font-weight:300;line-height:0;
  display:grid;place-items:center;padding:0 0 4px;cursor:pointer;
  transition:transform .12s ease,opacity .12s ease;
}
.add:active{transform:translateX(-50%) scale(.93)}
.add[hidden]{display:none}
.add svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#plus[hidden],#mic[hidden]{display:none !important}
.add.listening{border-color:#2f6df0;color:#2f6df0;animation:breathe 1.4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(47,109,240,.20)}50%{box-shadow:0 0 0 14px rgba(47,109,240,0)}}
.live{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(140px + env(safe-area-inset-bottom));
  width:78vw;max-height:34vh;overflow:hidden;
  text-align:center;color:#6f6b63;font-size:15px;line-height:1.6;
  white-space:pre-wrap;
}
.live[hidden]{display:none}

.bar{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line);
}
.bar[hidden]{display:none}
#text{
  flex:1;min-height:48px;max-height:42vh;resize:none;
  border:1.5px solid #e6e3db;border-radius:24px;background:#fff;
  padding:12px 18px;font:inherit;line-height:1.5;color:var(--ink);outline:none;
  transition:border-color .15s;
}
#text:focus{border-color:var(--ink)}
#text::placeholder{color:#c8c4ba}
#send{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;
  background:var(--ink);color:#fff;font-size:19px;line-height:0;
  display:grid;place-items:center;cursor:pointer;
  transition:opacity .12s,transform .1s,background .15s;
}
#send:active{transform:scale(.93)}
#send:disabled{background:#e6e3db;color:#fff}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(142px + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--paper);
  font-size:13px;line-height:1.4;padding:9px 16px;border-radius:999px;
  max-width:84vw;text-align:center;opacity:0;transition:opacity .16s ease;
  pointer-events:none;
}
.toast.show{opacity:1}
.authhint{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(196px + env(safe-area-inset-bottom));
  background:#fff3f1;color:#b0463a;border:1px solid #f0cfc9;
  font-size:12.5px;line-height:1.4;padding:8px 14px;border-radius:12px;
  max-width:80vw;text-align:center;
}
.authhint[hidden]{display:none}
.authhint button{
  border:0;background:none;color:#b0463a;font:inherit;font-size:12.5px;
  text-decoration:underline;padding:0 0 0 2px;min-width:0;
}
.bar.bad #text{border-color:var(--bad)}
.bar.bad #send{background:var(--bad)}