/* Telegram-like UI inside the phone: dark theme «Ночная степь» (Yelumio Dawn).
   Coral — actions and highlights (send, outgoing, chips, badges); lilac — links, checks, data. */
.screen{
  --top:54px; --bottom:26px;
  --bg:#171A3F; --panel:rgba(29,33,80,.88); --field:#232861; --line:rgba(174,179,217,.14);
  --text:#EEF0F7; --muted:#AEB3D9; --muted-2:#9398C6; --accent:#A9B4EE; --accent-soft:rgba(140,155,230,.16);
  --action:#F2775A; --action-hi:#F9A77E; --action-soft:rgba(242,119,90,.14);
  --in:#232861; --out:#F2775A; --out-ink:#12142E;
}
@media (max-width:520px),(max-height:560px) and (max-width:900px){
  html:not(.embed) .screen{--top:env(safe-area-inset-top); --bottom:env(safe-area-inset-bottom)}
}

.view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  transition:transform .42s cubic-bezier(.3,.8,.25,1),filter .42s,opacity .42s;will-change:transform}
.view[hidden]{display:none}
.phone[data-state=open] .list{animation:listIn .7s var(--ease) .12s both}
@keyframes listIn{from{opacity:0;transform:scale(.94)}}

/* avatar: generated monogram, never a photo */
.ava{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:block;color:var(--fg,#fff);
  background:linear-gradient(170deg,var(--a1),var(--a2));box-shadow:inset 0 0 0 1px rgba(238,240,247,.14)}
.ava svg{position:absolute;left:30%;top:24%;width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ava::after{content:"";position:absolute;left:24%;right:24%;top:72%;height:2px;border-radius:2px;background:var(--line-c,#F9A77E)}
.ava-sm{width:38px;height:38px}
.ava-sm::after{height:1.5px}
.ava.on::before{content:"";position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#6FD6A0;box-shadow:0 0 0 2.5px var(--bg);z-index:1}

/* chat list */
.list{padding-top:var(--top)}
.nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 16px}
.nav-l{color:var(--accent);font-size:17px;font-weight:500}
.nav-title{margin:0;font:700 18px/1 var(--pliant);letter-spacing:.005em;word-spacing:.2em}
.nav-r{justify-self:end;color:var(--accent);display:flex}
.search{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;margin:4px 16px 8px;border-radius:11px;
  background:var(--field);color:var(--muted);font-size:16px}
.folders{flex:none;display:flex;gap:22px;padding:0 18px;border-bottom:.5px solid var(--line);font:600 15px/1 var(--sans);color:var(--muted)}
.folders span{padding:10px 0 11px;position:relative}
.folders .on{color:var(--text)}
.folders .on::after{content:"";position:absolute;left:0;right:0;bottom:-.5px;height:3px;border-radius:3px 3px 0 0;background:var(--action)}
.folders b{display:inline-block;min-width:20px;padding:3px 6px;margin-left:4px;border-radius:10px;background:var(--action);color:var(--out-ink);font-size:12px;text-align:center}
.rows{flex:1;margin:0;padding:0 0 calc(var(--bottom) + 58px);list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.rows::-webkit-scrollbar{display:none}
.row{display:flex;gap:12px;align-items:center;width:100%;padding:8px 14px 8px 12px;border:0;background:none;text-align:left;cursor:pointer;
  transition:background .2s;animation:rowIn .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms + 250ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
.row:hover{background:rgba(140,155,230,.06)}
.row:active{background:rgba(140,155,230,.12)}
.row:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
.row-b{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:3px;padding-right:2px;
  border-bottom:.5px solid var(--line);margin-bottom:-8px;padding-bottom:8px}
.row:last-child .row-b{border-bottom:0}
.row-t{display:flex;align-items:center;gap:6px}
.row-n{font:600 16px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot{flex:none;font:700 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 5px;border-radius:5px}
.row-time{margin-left:auto;flex:none;display:flex;align-items:center;gap:3px;font-size:14px;color:var(--muted-2)}
.row-time svg{color:var(--accent)}
.row-p{display:flex;align-items:flex-start;gap:8px}
.row-x{flex:1;min-width:0;font-size:15px;font-weight:400;line-height:1.3;color:var(--muted-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-x i{font-style:normal;color:var(--text)}
.badge{flex:none;min-width:22px;height:22px;padding:0 7px;margin-top:6px;border-radius:11px;background:var(--action);color:var(--out-ink);
  font:700 13px/22px var(--sans);text-align:center;animation:pop .4s var(--spring)}
@keyframes pop{from{transform:scale(0)}}

.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:7px 8px calc(var(--bottom) + 4px);
  background:var(--panel);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-top:.5px solid var(--line)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px/1 var(--sans);color:var(--muted);width:72px}
.tabbar svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar .on{color:var(--accent)}
.tabbar .on svg{fill:var(--accent-soft)}

/* push navigation */
.screen.in-chat .list{transform:translateX(-28%);filter:brightness(.6)}
.chat{transform:translateX(100%);box-shadow:-10px 0 40px rgba(13,15,38,.6)}
.screen.in-chat .chat{transform:none}
.screen.dragging .view{transition:none}

/* chat */
.chat{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%238C9BE6' stroke-width='1.2' stroke-linecap='round' opacity='.07'%3E%3Cpath d='M14 40h36M24 40a8 8 0 0 1 16 0'/%3E%3Cpath d='M86 104h36M96 104a8 8 0 0 1 16 0'/%3E%3Cpath d='M104 22v4M102 24h4M30 96v4M28 98h4M70 64v3M68.5 65.5h3'/%3E%3C/svg%3E"),
  radial-gradient(130% 55% at 50% 118%,rgba(242,119,90,.22),rgba(138,86,135,.14) 45%,transparent 75%),
  linear-gradient(180deg,#171A3F,#1B1E4A)}
.chat-head{position:absolute;top:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:calc(var(--top) + 2px) 12px 8px 8px;background:var(--panel);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:.5px solid var(--line)}
.back{justify-self:start;display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--accent);cursor:pointer;padding:6px 8px;border-radius:12px}
.back:hover{background:var(--accent-soft)}
.back:focus-visible{outline:2px solid var(--action)}
.back-count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--action);color:var(--out-ink);font:700 13px/22px var(--sans);text-align:center}
.back-count:empty{display:none}
.chat-title{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.chat-title b{font:600 16px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.status{font-size:13px;color:var(--muted);height:16px}
.status.typing{color:var(--accent)}
.status.typing::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.chat-head .ava{justify-self:end}

.wall{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-top:calc(var(--top) + 58px)}
.wall::-webkit-scrollbar{display:none}
.msgs{display:flex;flex-direction:column;gap:3px;min-height:100%;justify-content:flex-end;padding:8px 8px 10px}
.day{align-self:center;margin:6px 0 10px;padding:5px 11px;border-radius:12px;background:rgba(18,20,46,.55);color:var(--muted);
  font:600 13px/1 var(--sans);backdrop-filter:blur(8px)}

.msg{max-width:84%;padding:7px 10px 7px 12px;border-radius:18px;font-size:15.5px;font-weight:400;line-height:1.38;overflow-wrap:anywhere;
  animation:msgIn .38s var(--spring) both;position:relative}
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.94)}}
.msg.in{align-self:flex-start;background:var(--in);color:var(--text);transform-origin:0 100%}
.msg.out{align-self:flex-end;background:var(--out);color:var(--out-ink);transform-origin:100% 100%}
.msg.in.tail{border-bottom-left-radius:6px;margin-bottom:6px}
.msg.out.tail{border-bottom-right-radius:6px;margin-bottom:6px}
.msg.wide{max-width:92%}
.msg p{margin:0}
.msg p+p,.msg p+.tbl-wrap,.msg .tbl-wrap+p,.msg ul+p,.msg p+ul,.msg .tbl-wrap+ul,.msg ul+.tbl-wrap{margin-top:8px}
.msg b{font-weight:600}
.msg ul{margin:0;padding:0;list-style:none}
.msg li{position:relative;padding-left:14px}
.msg li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lilac,#8C9BE6)}
.msg.out li::before{background:var(--out-ink)}
.meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px -2px -5px 12px;font-size:11.5px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.msg.out .meta{color:var(--out-ink);opacity:.85}
.checks{display:inline-block;width:17px;height:11px;position:relative}
.checks svg{position:absolute;inset:0}
.checks .c2{opacity:0;transform:translateX(-3px);transition:opacity .25s,transform .25s var(--spring)}
.checks.read .c2{opacity:1;transform:none}

.tbl{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:0 10px 5px 0}
.tbl td{padding:5px 10px 5px 0;border-top:.5px solid var(--line);vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:right;white-space:nowrap}
.tbl-wrap{overflow-x:auto;margin:0 -2px;scrollbar-width:none}

.tools{margin-top:10px;padding-top:9px;border-top:.5px solid var(--line)}
.tools small{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.tools div{display:flex;flex-wrap:wrap;gap:5px}
.tools span{font:600 12.5px/1 var(--sans);color:var(--accent);background:var(--accent-soft);padding:6px 8px;border-radius:8px;
  animation:msgIn .4s var(--spring) both;animation-delay:calc(var(--i) * 45ms + 150ms)}

.typing-b{display:flex;gap:4px;padding:13px 14px}
.typing-b i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite ease-in-out}
.typing-b i:nth-child(2){animation-delay:.15s}
.typing-b i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.composer{flex:none;position:relative;z-index:4;background:var(--panel);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:.5px solid var(--line);padding-bottom:calc(var(--bottom) + 2px)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:9px 10px 1px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}
.chip{flex:none;border:1px solid rgba(242,119,90,.6);background:var(--action-soft);color:var(--action-hi);border-radius:16px;padding:7px 12px;
  font:600 13.5px/1.1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--ease);
  animation:msgIn .4s var(--spring) both;animation-delay:calc(var(--i) * 60ms)}
.chip:hover{background:rgba(242,119,90,.24)}
.chip:active{transform:scale(.95)}
.chip:disabled{opacity:.45;cursor:default}
.inputbar{display:flex;align-items:flex-end;gap:8px;padding:8px 10px 6px}
.clip{color:var(--muted);display:flex;padding-bottom:6px}
.field{flex:1;position:relative;display:flex;background:var(--field);border-radius:19px;box-shadow:inset 0 0 0 .5px var(--line);min-height:36px}
.field textarea{flex:1;border:0;background:none;resize:none;color:var(--text);font:500 16px/20px var(--sans);padding:8px 14px;max-height:104px;outline:none}
.field textarea::placeholder{color:var(--muted)}
.field:focus-within{box-shadow:inset 0 0 0 1px rgba(242,119,90,.55)}
.count{position:absolute;right:10px;top:-18px;font-size:11px;color:var(--muted)}
.send{flex:none;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--action);color:var(--out-ink);transition:transform .25s var(--spring),opacity .2s,background .2s}
.send:disabled{opacity:.3;transform:scale(.86);cursor:default}
.send:not(:disabled):hover{transform:scale(1.06);background:var(--action-hi)}
.chat{touch-action:pan-y}