/* Лад: экран целиком; на телефоне один столбец за раз, на компьютере списки слева */
:root{
  --bg:#eef3f1; --panel:#ffffff; --ink:#1f2d2a; --muted:#5d6e6a; --line:#d5e0dc;
  --accent:#1f7a68; --accent-ink:#ffffff; --mine:#d9f0e8; --theirs:#ffffff; --sun:#f2b632; --warn:#c0392b;
  --display:"PT Serif",Georgia,serif; --body:"PT Sans",Roboto,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14201d; --panel:#1c2a27; --ink:#e6efec; --muted:#9db0ab; --line:#2e403b;
  --accent:#4fb39c; --accent-ink:#0f1a17; --mine:#24463d; --theirs:#22322e; --sun:#f2c255; --warn:#e5675a; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);display:flex;flex-direction:column;
  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)}
button,input,select,textarea{font:inherit;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.muted{color:var(--muted)}
.center{text-align:center;margin:auto;padding:24px;max-width:36ch}
.bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--accent);color:var(--accent-ink);flex:none}
.logo{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;font:700 16px/1 var(--display);flex:none}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs button{border:0;background:none;color:inherit;opacity:.75;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;white-space:nowrap;position:relative}
.tabs button[aria-selected="true"]{opacity:1;background:rgba(0,0,0,.18)}
.dot{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sun);color:#3a2a00;font-size:12px;line-height:18px;margin-left:6px;text-align:center}
main{flex:1;min-height:0;display:flex}
.split{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0;min-width:0}
.split.nb{grid-template-columns:92px 280px 1fr}
.col{min-width:0;min-height:0;overflow:auto;border-right:1px solid var(--line);background:var(--panel)}
.room{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.top{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;min-height:54px;background:var(--panel);flex-wrap:wrap}
.top b{font:700 18px var(--display)}
.back{border:0;background:none;color:var(--accent);cursor:pointer;font-size:26px;line-height:1;padding:0 6px;display:none}
@media (max-width:760px){.back{display:block}}
.item{display:flex;gap:12px;align-items:center;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%}
.item[aria-current="true"]{background:var(--mine)}
.item.off{opacity:.55}
.item .txt{min-width:0;flex:1}
.item small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .ti{font-size:22px;width:28px;text-align:center;flex:none}
.item.over{box-shadow:inset 0 3px 0 var(--accent)}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--accent);color:var(--accent-ink);flex:none}
.av.sun{background:var(--sun);color:#3a2a00}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.m{max-width:min(85%,560px);padding:8px 12px;border-radius:14px;background:var(--theirs);border:1px solid var(--line);overflow-wrap:anywhere;white-space:pre-wrap}
.m.me{align-self:flex-end;background:var(--mine)}
.m .from{font-size:13px;color:var(--accent);font-weight:700}
.m .time{font-size:11px;color:var(--muted);text-align:right;margin-top:2px;white-space:nowrap}
.m img.pic{display:block;border-radius:8px;margin-top:4px;max-width:100%;max-height:320px;cursor:zoom-in}
.m video{display:block;max-width:100%;max-height:320px;margin-top:4px;border-radius:8px}
.m audio{display:block;margin-top:6px;width:260px;max-width:100%}
.m.stkm{background:none;border:0;padding:0}
.file{display:flex;gap:8px;align-items:center;margin-top:4px;color:inherit;text-decoration:none}
.file .ic{width:36px;height:42px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.file small{display:block;color:var(--muted)}
.lnk{border:0;background:none;padding:0;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;margin-top:6px;margin-right:10px}
.acts{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;white-space:normal}
.acts button{font-size:13px;border:0;background:none;color:var(--muted);padding:3px 7px;border-radius:6px;cursor:pointer}
.acts button:hover{background:var(--bg);color:var(--ink)}
.acts button[aria-pressed="true"]{color:var(--accent);font-weight:700}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--sun);color:#3a2a00;margin-bottom:4px}
.badge.done{background:var(--line);color:var(--muted)}
.where{font-size:12px;color:var(--muted);margin-bottom:2px}
.pinbar{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel);font-size:14px;cursor:pointer}
.pinbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.send{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);align-items:flex-end;background:var(--panel)}
.send textarea{flex:1;min-width:0;padding:10px 12px;border-radius:20px;border:1px solid var(--line);background:var(--bg);resize:none;max-height:140px;line-height:1.35}
.btn{font-weight:700;border:0;border-radius:999px;padding:10px 14px;background:var(--accent);color:var(--accent-ink);cursor:pointer;flex:none}
.btn.round{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:19px}
.btn.y{background:var(--sun);color:#3a2a00}
.btn.ghost{background:none;color:var(--accent);border:1px solid var(--line)}
.btn.warn{background:var(--warn);color:#fff}
.btn.small{padding:6px 12px;font-size:14px}
.btn.rec{background:var(--warn);color:#fff;animation:pulse 1s infinite}
.btn:disabled{opacity:.45;cursor:not-allowed}
@keyframes pulse{50%{opacity:.6}}
.chip{font-size:14px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 12px;cursor:pointer}
.chip.first{margin-left:auto}
.panel{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.shr{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
select,.field{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.rail{background:var(--accent);display:flex;flex-direction:column;overflow:auto;border:0}
.rail button{font-size:12px;line-height:1.2;border:0;background:none;color:var(--accent-ink);padding:9px 3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.78;overflow-wrap:anywhere;text-align:center}
.rail button span{font-size:22px}
.rail button[aria-current="true"]{opacity:1;background:rgba(0,0,0,.2)}
.rail .add{opacity:1;background:rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.3)}
.rail .add small{font-size:11px;opacity:.85}
.rail .sep{margin-top:auto;border-top:1px solid rgba(255,255,255,.3)}
.thead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 8px 14px;border-bottom:1px solid var(--line)}
.thead b{display:block}
.cnt{color:var(--muted);font-size:13px}
.cnt.full{color:var(--warn);font-weight:700}
.hint{margin:8px 12px;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:14px}
.search{margin:10px 12px;display:block;width:calc(100% - 24px);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.ord{margin-left:auto;display:flex;gap:2px}
.ord button{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:2px 8px;cursor:pointer}
.ov{position:fixed;inset:0;background:rgba(10,25,20,.5);display:grid;place-items:center;padding:16px;z-index:20}
.dlg{background:var(--panel);border-radius:14px;padding:18px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.dlg h3{font:700 19px var(--display);margin:0}
.dlg label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.dlg img.full{max-width:100%;border-radius:8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:30;max-width:90vw;text-align:center}
.page{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;align-items:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px}
.card h2{font:700 19px var(--display);margin:0}
.card p{margin:0}
.copy{display:flex;gap:6px}
.copy input{flex:1;min-width:0}
.ppl{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
/* реакции */
.rxs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center;white-space:normal}
.rx{font-size:14px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:1px 8px;cursor:pointer}
.rx.mine{border-color:var(--accent);background:var(--mine);font-weight:700}
.rx.add{color:var(--muted);border-style:dashed;opacity:.7}
.rx img{height:18px;vertical-align:middle}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:4px;margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);white-space:normal;min-width:240px}
.pal button{border:0;background:none;border-radius:8px;padding:4px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:1.15}
.pal button span{font-size:22px;height:28px;display:grid;place-items:center}
.pal button img{height:26px}
.pal button:hover{background:var(--bg)}
/* стикеры */
.stk{width:150px;height:150px;display:grid;place-items:center;position:relative}
.stk img{max-width:150px;max-height:130px;border-radius:18px;display:block}
.stk img.fly{border-radius:0;animation:bob 2.4s ease-in-out infinite}
.stk .cap{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 15px/1 var(--display);color:#b3261e;background:#fff8e6;border:2px solid #e9b949;border-radius:999px;padding:4px 10px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tst{width:146px;height:146px;border-radius:22px;background:radial-gradient(circle at 50% 38%,#fff6d8,#ffe6a8 70%);border:3px double #c8402f;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px;gap:4px;position:relative;overflow:hidden;color:#b3261e}
.tst b{font:700 21px/1.05 var(--display);text-align:center;text-shadow:0 1px 0 #fff;position:relative;white-space:normal}
.tst .orn{position:absolute;inset:auto 0 0 0;height:8px;background:repeating-linear-gradient(90deg,#c8402f 0 8px,#e9b949 8px 16px)}
.tst .sun{width:62px;height:62px;border-radius:50%;margin-bottom:auto;margin-top:2px;position:relative;background:radial-gradient(circle,#ffd23f 0 45%,transparent 46%)}
.tst .sun::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:repeating-conic-gradient(#f5a623 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 43%);mask:radial-gradient(circle,transparent 0 42%,#000 43%);animation:spin 12s linear infinite}
.tst.night{background:radial-gradient(circle at 50% 35%,#3c4f86,#1f2a52 75%);color:#ffe9a8;border-color:#e9b949}
.tst.night b{text-shadow:none}
.tst.night .sun{background:radial-gradient(circle at 35% 40%,transparent 0 38%,#ffe28a 39%)}
.tst.night .sun::before{display:none}
.tst .heart{font-size:40px;margin-bottom:auto;animation:beat 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(6px,-8px) rotate(3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.stk img.fly,.tst .sun::before,.tst .heart,.btn.rec{animation:none}}
.stp{border-top:1px solid var(--line);background:var(--bg);max-height:260px;display:flex;flex-direction:column;flex:none}
.sttabs{display:flex;gap:4px;padding:6px 8px 0}
.sttabs button{font-weight:700;font-size:14px;border:0;border-radius:8px 8px 0 0;padding:6px 10px;background:none;color:var(--muted);cursor:pointer}
.sttabs button[aria-selected="true"]{background:var(--panel);color:var(--accent)}
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;padding:8px;overflow:auto;background:var(--panel)}
.stgrid button{border:0;background:none;padding:2px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.stgrid button:hover{background:var(--bg)}
.stgrid .stk{transform:scale(.56);margin:-33px}
/* телефон: по одному столбцу */
@media (max-width:760px){
  .split,.split.nb{grid-template-columns:1fr}
  .split.nb.lists{grid-template-columns:76px 1fr}
  .split.showroom>.col{display:none}
  .split:not(.showroom)>.room{display:none}
  .tabs button{padding:8px 9px}
}