/* ============================================================
   «Хаб» — стили PWA. Токены и компоненты — по prototype.html.
   Тёмная тема; мобильный приоритет; на десктопе контейнер
   max-width 430px по центру. Без inline-стилей (CSP: style-src 'self').
   ============================================================ */

/* ================= ТОКЕНЫ ================= */
:root{
  --bg:#0c0e12; --phone:#0b0e13; --card:#141922; --card2:#1b222d; --line:#232b38;
  --ink:#e9edf4; --muted:#8d97a8; --faint:#5f6979;
  --accent:#e6a63c; --accent-ink:#221605; --accent-soft:rgba(230,166,60,.15);
  --tg:#2aabee; --vk:#0077ff; --max:#8b5cf6; --mail:#8b95a7;
  --danger:#ef6a58; --ok:#4cc38a;
  --bubble-in:#1b222d; --bubble-out:#e6a63c; --bubble-out-ink:#231705;
  --shadow:0 30px 70px rgba(0,0,0,.55);
  color-scheme:dark;
}
/* Светлая тема (переключатель: «Ещё» → Тема оформления) */
[data-theme="light"]{
  --bg:#e9edf3; --phone:#ffffff; --card:#f3f5f9; --card2:#e9edf4; --line:#e0e5ee;
  --ink:#12161f; --muted:#68717f; --faint:#9aa4b2;
  --accent:#c88a1e; --accent-ink:#fffaf0; --accent-soft:rgba(200,138,30,.14);
  --bubble-in:#eef1f6; --bubble-out:#f3c568; --bubble-out-ink:#2a1d05;
  --shadow:0 30px 70px rgba(40,50,70,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%; overflow:hidden; overscroll-behavior:none}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 520px at 92% 112%, rgba(43,171,238,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  display:flex; justify-content:center;
  position:fixed; inset:0; width:100%;
}
[hidden]{display:none !important}
.hidden{display:none !important}
.hiddenfile{display:none}

/* ================= КАРКАС ================= */
#app{
  width:100%; max-width:430px; height:100vh; height:100dvh;
  background:var(--phone); position:relative; display:flex; flex-direction:column;
  overflow:hidden;
}
@media (min-width:520px){
  #app{border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:var(--shadow)}
}
.screens{position:relative; flex:1; min-height:0; overflow:hidden}
.screen{position:absolute; inset:0; display:none; flex-direction:column; background:var(--phone)}
.screen.active{display:flex}

/* ================= ЛОГИН ================= */
.loginwrap{flex:1; display:flex; align-items:center; justify-content:center; padding:24px 20px}
.logincard{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px 18px 20px; display:flex; flex-direction:column; gap:6px;
}
.logincard form{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.lgerr{color:var(--danger); font-size:13px; min-height:18px; margin-top:6px}

/* ================= БАЗОВЫЕ ЭЛЕМЕНТЫ ================= */
.libhead{padding:calc(6px + env(safe-area-inset-top)) 16px 10px}
.apptitle{font-size:26px; font-weight:800; letter-spacing:-.4px}
.libsub{font-size:12.5px; color:var(--muted); margin-top:2px}
.list{flex:1; overflow-y:auto; min-height:0}
.sechead{padding:14px 16px 4px; font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px}
.sechead.first{padding-top:4px}
.emptynote{padding:26px 16px; color:var(--muted); font-size:13.5px}
.iconbtn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; flex:0 0 auto; user-select:none;
}
.iconbtn:active{background:var(--card)}
.iconbtn svg{width:22px; height:22px}
.iconbtn.busy{opacity:.5; pointer-events:none}

/* поиск */
.search{
  margin:0 16px 8px; display:flex; gap:8px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:13px; padding:9px 12px; color:var(--faint);
}
.search svg{width:17px; height:17px; flex:0 0 auto}
.search input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-size:16px; font-family:inherit}

/* чипсы */
.chips{display:flex; gap:8px; padding:2px 16px 10px; overflow-x:auto; scrollbar-width:none}
.chips.wrap{flex-wrap:wrap; overflow:visible}
.chips.plain{padding:0}
.chips::-webkit-scrollbar{display:none}
.chip{
  white-space:nowrap; padding:6px 12px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); color:var(--muted); font-size:12.5px; cursor:pointer;
  display:flex; gap:6px; align-items:center; user-select:none;
}
.chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.dot.tg,.dd.tg{background:var(--tg)}
.dot.vk,.dd.vk{background:var(--vk)}
.dot.max,.dd.max{background:var(--max)}
.dot.mail,.dd.mail{background:var(--mail)}
.dd.accent{background:var(--accent)}

/* аватары и бейджи источников */
.ava{
  width:52px; height:52px; border-radius:50%; position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff;
  overflow:visible;
}
.ava img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.ava.sm{width:38px; height:38px; font-size:14px}
.avc1{background:#c07b6b} .avc2{background:#4f7bd9} .avc3{background:#8a63d2} .avc4{background:#5f7d95}
.avc5{background:#5aa88f} .avc6{background:#c95d8a} .avc7{background:#c9a15f} .avc8{background:#6b8f5e}
.badge{
  position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; border:2.5px solid var(--phone);
  color:#fff; font-size:10px; font-weight:800;
}
.badge svg{width:11px; height:11px}
.badge.tg{background:var(--tg)}
.badge.vk{background:var(--vk); font-size:8px; letter-spacing:.3px}
.badge.max{background:var(--max)}
.badge.mail{background:var(--mail)}
.badge.mini{position:static; width:16px; height:16px; border-radius:5px; border:none; font-size:8.5px; flex:0 0 auto; padding:0}
.badge.mini svg{width:9px; height:9px}

/* строки списка чатов */
.crow{display:flex; gap:12px; padding:9px 16px; align-items:center; cursor:pointer}
.crow:active{background:var(--card)}
.cbody{flex:1; min-width:0}
.cname{font-size:15.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cprev{
  font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px; margin-top:1px;
}
.cprev svg{width:13px; height:13px; flex:0 0 auto; opacity:.85}
.cmeta{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto}
.ctime{font-size:11.5px; color:var(--faint)}
.vspace{height:20px}
.unread{
  min-width:20px; height:20px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px;
}

/* ================= ЭКРАН ЧАТА ================= */
.chead{
  display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 10px 10px 6px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.chead .cname{font-size:15.5px}
.chead .cprev{margin-top:0; font-size:12px}
.msgs{flex:1; overflow-y:auto; min-height:0; padding:12px 14px 10px; display:flex; flex-direction:column; gap:7px}
.daychip{align-self:center; font-size:11px; color:var(--faint); background:var(--card); padding:3px 10px; border-radius:999px; margin:4px 0 6px}
.msg{
  max-width:78%; padding:8px 11px 6px; border-radius:16px; font-size:14.5px; line-height:1.35;
  position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  cursor:pointer; word-break:break-word; flex:0 0 auto;
}
.msg.in{align-self:flex-start; background:var(--bubble-in); border-bottom-left-radius:6px}
.msg.out{align-self:flex-end; background:var(--bubble-out); color:var(--bubble-out-ink); border-bottom-right-radius:6px}
.msg.pending{opacity:.55}
.msg .t{font-size:10.5px; opacity:.6; float:right; margin:7px 0 0 9px}
.msg.kind-photo{padding:5px 5px 4px}
.msg .mailbody{min-width:190px; max-width:250px}
.msg .mailh{font-weight:700; font-size:13.5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtxt{font-size:14.5px}
.mauthor{font-weight:700; font-size:12px; opacity:.75; margin-bottom:2px}
.ph-img{max-width:230px; max-height:320px; border-radius:10px; display:block}
.ph-ph{
  width:186px; height:122px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px;
  background:linear-gradient(135deg,#3d4f6b 0%,#223245 55%,#2e4358 100%);
}
.vb{display:flex; align-items:center; gap:8px; min-width:150px}
.vb.clickable{cursor:pointer}
.vb .play{width:30px; height:30px; border-radius:50%; background:rgba(127,127,127,.18); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.vb .play svg{width:16px; height:16px}
.wave{display:flex; gap:2.5px; align-items:center; flex:1}
.wave i{width:2.5px; border-radius:2px; background:currentColor; opacity:.55}
.wave i:nth-child(4n+1){height:5px}
.wave i:nth-child(4n+2){height:9px}
.wave i:nth-child(4n+3){height:6px}
.wave i:nth-child(4n+4){height:11px}
.msg.playing .wave i{animation:wavepulse 1s ease-in-out infinite}
@keyframes wavepulse{50%{opacity:1}}
.vdur{font-size:11px; opacity:.7}
.fname{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* панель ввода */
.cbar{
  display:flex; align-items:flex-end; gap:6px; padding:8px 8px calc(14px + env(safe-area-inset-bottom)) 8px;
  border-top:1px solid var(--line); flex:0 0 auto; background:var(--phone);
}
.cinput{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:9px 13px; color:var(--ink); font-size:16px; font-family:inherit; outline:none; resize:none;
  max-height:92px; min-height:38px;
}
.sendbtn{background:var(--accent); color:var(--accent-ink)}
.sendbtn:active{filter:brightness(.94)}
.emojis{
  position:absolute; bottom:calc(80px + env(safe-area-inset-bottom)); left:10px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:10px; display:none;
  grid-template-columns:repeat(6,1fr); gap:4px; z-index:15; box-shadow:var(--shadow);
}
.emojis.show{display:grid}
.emojis span{font-size:20px; cursor:pointer; padding:3px 5px; border-radius:8px}
.emojis span:active{background:var(--card2)}

/* ================= ФОРМА ЗАДАЧИ ================= */
.formbody{flex:1; overflow-y:auto; min-height:0; padding:12px 16px 22px; display:flex; flex-direction:column; gap:15px}
.frow{display:flex; flex-direction:column; gap:7px}
.fld{font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.5px}
input.tf, textarea.tf{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  color:var(--ink); font:inherit; font-size:16px; outline:none; width:100%; min-width:0;
}
input.tf:focus, textarea.tf:focus{border-color:var(--accent)}
.srccard{display:flex; gap:10px; padding:11px 12px; background:var(--card); border:1px solid var(--line); border-radius:14px; align-items:center}
.srccard .cname{font-size:13.5px}
.srccard .cprev{
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:2px;
}
.primary{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:14px; padding:13px 16px;
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; width:100%;
}
.primary:active{filter:brightness(.95)}
.primary:disabled{opacity:.6}
.ghost{
  background:var(--card2); color:var(--ink); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;
}
.ghost:active{filter:brightness(1.1)}

/* ================= ЗАДАЧИ ================= */
.trow{display:flex; gap:12px; padding:10px 16px; align-items:flex-start; cursor:pointer}
.trow:active{background:var(--card)}
.cbx{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--faint); margin-top:1px; flex:0 0 auto;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:transparent;
}
.cbx svg{width:12px; height:12px}
.trow.done .cbx{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.trow.done .ttitle{text-decoration:line-through; color:var(--faint)}
.tbody{flex:1; min-width:0}
.ttitle{font-size:14.5px; line-height:1.3}
.tmeta{font-size:12px; color:var(--muted); display:flex; gap:7px; align-items:center; margin-top:3px; flex-wrap:wrap}
.tmeta svg{width:13px; height:13px}
.metai{display:flex; gap:4px; align-items:center}
.overdue{color:var(--danger)}
.tnote{font-size:12.5px; color:var(--faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmtcount{
  flex:0 0 auto; margin-top:1px; background:var(--card2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; font-size:11px; font-weight:700; padding:2px 8px;
}
.fab{
  position:absolute; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); width:54px; height:54px; border-radius:17px;
  background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35); cursor:pointer; z-index:5;
}
.fab svg{width:24px; height:24px}

/* ================= КАЛЕНДАРЬ ================= */
.calhead{display:flex; align-items:center; justify-content:space-between; padding:0 12px 8px}
.callabel{font-weight:700; font-size:16px}
.calw{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--faint); padding:0 10px 6px}
.calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 10px 6px}
.calcell{
  height:47px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; cursor:pointer; font-size:13.5px; user-select:none;
}
.calcell.blank{cursor:default}
.calcell.sel{background:var(--accent); color:var(--accent-ink); font-weight:700}
.calcell.today{outline:1.5px solid var(--accent)}
.dots{display:flex; gap:2.5px; height:5px}
.dd{width:5px; height:5px; border-radius:50%; background:var(--accent)}

/* ================= ЕЩЁ ================= */
.mrow{padding:13px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.mleft{flex:1; min-width:0}
.mname{font-size:14.5px; font-weight:600}
.msub{font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; margin-top:2px; flex-wrap:wrap; line-height:1.45}
.st{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--faint)}
.st.ok{background:var(--ok)}
.st.warn{background:var(--accent)}
.st.off{background:var(--faint)}
.mbtn{
  border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:10px;
  padding:7px 10px; font-size:12px; cursor:pointer; font-family:inherit; white-space:nowrap; flex:0 0 auto;
}
.mbtn:active{background:var(--card2)}
.tg-sw{width:46px; height:27px; border-radius:999px; background:var(--card2); border:1px solid var(--line); position:relative; cursor:pointer; flex:0 0 auto; transition:.15s}
.tg-sw::after{content:""; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--faint); transition:.15s}
.tg-sw.on{background:var(--accent); border-color:var(--accent)}
.tg-sw.on::after{left:20px; background:#fff}
.tg-sw.dis{opacity:.45; pointer-events:none}
.mfoot{padding:18px 16px 26px; font-size:11.5px; color:var(--faint); text-align:center}

/* ================= ТАББАР ================= */
.tabbar{
  height:calc(62px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--line); display:flex; background:var(--phone); flex:0 0 auto;
}
.tabbar.hidden{display:none}
.tab{flex:1; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; color:var(--faint); font-size:10.5px; cursor:pointer; user-select:none}
.tab.active{color:var(--accent)}
.tab svg{width:22px; height:22px}

/* ================= ОВЕРЛЕИ ================= */
.backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-end; z-index:20}
.backdrop.show{display:flex}
.sheetbox{
  width:100%; max-height:88%; overflow-y:auto; background:var(--card);
  border-top-left-radius:20px; border-top-right-radius:20px; padding:10px 10px 16px;
  animation:up .16s ease-out;
}
@keyframes up{from{transform:translateY(14px); opacity:.4} to{transform:translateY(0); opacity:1}}
.shtitle{font-size:11.5px; color:var(--faint); padding:8px 14px 4px; text-transform:uppercase; letter-spacing:.5px}
.shitem{display:flex; gap:12px; align-items:center; padding:13px 14px; border-radius:12px; font-size:15px; cursor:pointer}
.shitem:active{background:var(--card2)}
.shitem svg{width:19px; height:19px; flex:0 0 auto; opacity:.9}
.shitem.danger{color:var(--danger)}
.shitem.danger.armed{font-weight:700}
.shitem.accent{color:var(--accent); font-weight:700}
.cancel{margin-top:6px; text-align:center; padding:12px; color:var(--muted); cursor:pointer; font-size:14px; border-top:1px solid var(--line)}
.rec{padding:20px 16px 16px; display:flex; flex-direction:column; gap:13px}
.rechead{display:flex; gap:10px; align-items:center; font-size:16px; font-weight:700}
.recdot{width:12px; height:12px; border-radius:50%; background:var(--danger); animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.3}}
.recnote{font-weight:500; font-size:13px; opacity:.7}
.rechint{font-size:12.5px; color:var(--muted)}
.recbtns{display:flex; gap:10px}
.recbtns button{flex:1}

/* поп-ап задачи */
.tpop{padding:0 2px}
.tptitle{font-size:17px; font-weight:700; padding:4px 12px 6px; line-height:1.3; word-break:break-word}
.tpmeta{padding:0 12px 10px; font-size:12.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tpmeta svg{width:13px; height:13px}
.tpmeta .tpdone{color:var(--ok); font-weight:700}
.tpnote{padding:0 12px 10px; font-size:13.5px; opacity:.85; white-space:pre-wrap; word-break:break-word}
.tpsrc{padding:0 12px 10px; font-size:12.5px; color:var(--faint); word-break:break-word}
.btnrow{display:flex; gap:8px; padding:2px 10px 10px}
.btnrow button{flex:1; padding:11px 12px; font-size:14px; border-radius:13px}
.postpone{padding:0 10px 8px; display:flex; flex-direction:column; gap:8px}
.dtrow{display:flex; gap:8px; align-items:center}
.dtrow .tf{flex:1}
.dtrow .ghost{padding:10px 12px; font-size:13.5px; border-radius:12px; white-space:nowrap}
.cmtlist{padding:0 14px; max-height:190px; overflow-y:auto}
.cmtrow{padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; word-break:break-word}
.cmtrow:first-child{border-top:none}
.cmttext{white-space:pre-wrap}
.cmttime{font-size:11px; color:var(--faint); margin-top:2px}
.cmtempty{padding:10px 0; font-size:12.5px; color:var(--faint)}
.cmtadd{display:flex; gap:8px; padding:8px 10px 4px}
.cmtadd .tf{flex:1}
.cmtadd .ghost{padding:10px 12px; font-size:13.5px; border-radius:12px}

/* тост */
.toast{
  position:absolute; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  background:var(--card2); border:1px solid var(--line); color:var(--ink); padding:9px 14px;
  border-radius:12px; font-size:13px; opacity:0; pointer-events:none; transition:.2s; z-index:30;
  max-width:82%; text-align:center;
}
.toast.show{opacity:1}
/* прокрутка без полос на мобильных */
.msgs, .list{scrollbar-width:thin}

/* ============ ПОВЕДЕНИЕ КАК У НАТИВНОГО ПРИЛОЖЕНИЯ ============ */
/* без зума по двойному тапу и «синей» подсветки тапов */
*{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
/* без всплывающего iOS-меню по долгому нажатию на интерфейс */
.ava, .crow, .trow, .msg, .chip, .tab, .iconbtn, .mbtn, .calcell, .btnrow button{-webkit-touch-callout:none}
/* без выделения интерфейсного текста и «резинки» pull-to-refresh */
body{-webkit-user-select:none; user-select:none; overscroll-behavior-y:none}
input, textarea{-webkit-user-select:text; user-select:text}
/* переключатель темы в «Ещё» */
.chips.seg{padding:0; overflow:visible; flex:0 0 auto}
.chips.seg .chip{padding:5px 10px; font-size:12px}
/* дни рождения */
.brow{display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--line)}
.brow:active{background:var(--card2)}
.ava.l{width:56px; height:56px; font-size:20px}
.bbody{flex:1 1 auto; min-width:0}
.bname{font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bsub{font-size:12.5px; color:var(--muted); margin-top:2px}
.bcake{font-size:12px; color:var(--accent); background:var(--accent-soft); padding:3px 8px; border-radius:999px; flex:0 0 auto; white-space:nowrap}
.bdayempty{padding:28px 16px; color:var(--muted); font-size:13.5px; text-align:center}