:root{--bg:#070707;--panel:#141012;--panel2:#1b1618;--line:#2b2327;--fg:#f2eceb;--muted:#a79da1;--red:#d40f2a;--red2:#ff3b52;--display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--red2)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:#0c0a0b;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red2);outline-offset:1px}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.9rem}
label input,label select{margin-top:.35rem;color:var(--fg);font-size:1rem}
label.check{display:flex;gap:.7rem;align-items:flex-start;color:var(--fg);font-size:.92rem}
label.check input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--red);flex:none}
.btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:999px;padding:.75rem 1.5rem;font-weight:500;cursor:pointer}
.btn:hover{background:var(--red2)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--red)}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red2)}
.btn.danger:hover{background:var(--red);color:#fff}
.icon{background:none;border:1px solid var(--line);border-radius:50%;width:2.6rem;height:2.6rem;display:grid;place-items:center;cursor:pointer;font-size:1.1rem;flex:none}
.icon:hover{border-color:var(--red)}
.muted,.hint{color:var(--muted);font-size:.85rem}
.msg{min-height:1.4em;font-size:.92rem;margin:.8rem 0 0}
.msg.ok{color:#7fd69a}.msg.err{color:#ff7a8a}

/* přihlášení */
.login{max-width:480px;margin:0 auto;padding:max(1.2rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 3rem max(1rem,env(safe-area-inset-left))}
.login h1{font-family:var(--display);font-weight:400;font-size:4rem;letter-spacing:.03em;margin:1rem 0 .2rem;line-height:1}
.login .lead{color:var(--muted);margin:0 0 1.4rem}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.9rem}
.card{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--red);border-radius:14px;padding:1.4rem}
.card.small{margin-top:1.2rem;border-top-width:1px;font-size:.9rem;color:var(--muted)}
.card.small summary{cursor:pointer;color:var(--fg)}

/* chat */
.app{height:100dvh;display:flex;flex-direction:column;max-width:820px;margin:0 auto;border-inline:1px solid var(--line);background:var(--bg)}
.top{display:flex;align-items:center;gap:.8rem;padding:max(.7rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .7rem max(1rem,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#0b0909}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--fg);margin-right:auto;font-family:var(--display);font-size:1.6rem;letter-spacing:.06em}
.brand img{height:3.6rem;width:auto;border:0;border-radius:0;margin:-.7rem -.2rem -.7rem -.4rem}
.conn{width:.65rem;height:.65rem;border-radius:50%;background:#555}
.conn.on{background:#3ddc84}.conn.off{background:var(--red)}
.list{flex:1;overflow-y:auto;padding:1rem max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left));scroll-behavior:smooth;overscroll-behavior:contain}
.older{display:block;margin:0 auto 1rem;background:none;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;color:var(--muted);cursor:pointer}
.empty{text-align:center;color:var(--muted);margin-top:3rem}
.day{text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:1.2rem 0 .6rem}
.row-m{display:flex;margin:.25rem 0}
.row-m.me{justify-content:flex-end}
.bub{max-width:min(78%,34rem);padding:.55rem .8rem;border-radius:16px;background:var(--panel2);border:1px solid var(--line);overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
.me .bub{background:var(--red);border-color:var(--red);border-bottom-right-radius:4px}
.them .bub{border-bottom-left-radius:4px}
.bub img,.bub video{display:block;max-width:100%;max-height:340px;border-radius:10px;cursor:zoom-in;background:#000}
.bub .cap{margin-top:.4rem}
.bub .meta{display:block;font-size:.7rem;opacity:.7;text-align:right;margin-top:.2rem;white-space:normal}
.pending{padding:.4rem 1rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.composer{display:flex;align-items:flex-end;gap:.5rem;padding:.6rem max(.8rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left));border-top:1px solid var(--line);background:#0b0909}
.composer textarea{resize:none;max-height:8rem;border-radius:20px;line-height:1.4}
.send{background:var(--red);border:0;border-radius:50%;width:2.6rem;height:2.6rem;cursor:pointer;color:#fff;font-size:1rem;flex:none}
.send:disabled{opacity:.5}

/* nastavení */
.settings{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;justify-content:flex-end;z-index:30}
.panel{width:min(100%,420px);height:100%;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:max(1rem,env(safe-area-inset-top)) 1.2rem 2rem}
.phead{display:flex;justify-content:space-between;align-items:center}
.phead h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0;letter-spacing:.04em}
.panel h3{font-size:1rem;margin:1.4rem 0 .6rem}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.panel hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.panel .btn{margin:.3rem .3rem .3rem 0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:40;display:grid;place-items:center;padding:1rem}
.lightbox .icon{position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem;background:#000}
.lightbox img,.lightbox video{max-width:100%;max-height:92dvh;border-radius:6px}
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--red);color:#fff;padding:.55rem 1.1rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90%;text-align:center}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.list{scroll-behavior:auto}}

.tabs{display:flex;gap:.5rem;margin:0 0 1rem}
.tab{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;cursor:pointer;color:var(--muted)}
.tab.on{background:var(--red);border-color:var(--red);color:#fff}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.85rem;margin-top:1rem;padding:0;text-align:left}
.linkbtn:hover{color:var(--fg)}

.brand{line-height:1.05}
.bname{display:flex;flex-direction:column}
.bname small{font-family:var(--body);font-size:.72rem;letter-spacing:0;color:var(--muted);font-weight:400;min-height:1em}
.bname small.on{color:#3ddc84}
.tick{letter-spacing:-.18em;margin-left:.3em}
.tick.read{color:#7fd8ff;opacity:1}
.me .tick.read{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7)}
.typing-row{display:flex;margin:.25rem 0}
.typing-row .bub{display:flex;gap:.28rem;align-items:center;padding:.7rem .9rem}
.dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.up{min-width:12rem}
.up .thumb{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:10px;opacity:.55;filter:blur(1px)}
.up .vid{display:grid;place-items:center;height:110px;border-radius:10px;background:#000;opacity:.7;font-size:2rem}
.up .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:.55rem}
.up .bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .15s}
.up .bar.ind i{width:40%;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}
.up .st{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;margin-top:.4rem;opacity:.9}
.up .x{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:.8rem;padding:0}
.up.fail .bar i{background:#ffb3bb}

.nbanner{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));background:linear-gradient(90deg,rgba(212,15,42,.35),rgba(212,15,42,.12));border-top:1px solid var(--red);font-size:.88rem}
.nb-btns{display:flex;align-items:center;gap:.4rem;flex:none}
.nb-btn{background:var(--red);border:0;border-radius:999px;color:#fff;padding:.35rem .9rem;cursor:pointer;font-size:.85rem}
.nb-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:.2rem .4rem}
.guide{margin:.4rem 0 1rem;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;background:#0c0a0b}
.guide summary{cursor:pointer;color:var(--red2);font-weight:500}
.guide h4{margin:1.1rem 0 .4rem;font-size:1rem}
.guide ol{margin:0;padding-left:1.3rem}
.guide li{margin:.5rem 0;line-height:1.45}
.guide.flash{animation:gflash 1.6s ease 2}
@keyframes gflash{50%{box-shadow:0 0 0 3px var(--red)}}