/* ════════════════════════════════════════════════════════════════════════════════════════════
   Страница клиента. Тот же язык, что у кабинета, но ничего лишнего: только разговор.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.chat-page{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:0}
.window{width:min(720px,100%);height:100dvh;max-height:100dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(16,23,36,.92),rgba(7,11,19,.96));
  border-left:1px solid var(--edge);border-right:1px solid var(--edge);
  backdrop-filter:blur(18px) saturate(1.4)}
@media(min-width:760px){
  .window{height:min(88vh,860px);border-radius:var(--rp);border:1px solid var(--edge);
    box-shadow:var(--shadow)}
}
.top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--edge);
  padding-top:max(16px,env(safe-area-inset-top))}
.top .ava{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04121c;
  font:700 15px var(--numbers);letter-spacing:-.03em}
.top .who-2 b{display:block;font:650 15px Inter,sans-serif;letter-spacing:-.02em}
.top .who-2 span{display:block;font-size:12px;color:var(--green)}
.chat-page .feed{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat-page .reply{max-width:78%;padding:11px 15px;border-radius:17px;font-size:14.5px;
  line-height:1.5}
.chat-page .reply.their{align-self:flex-start;background:var(--sheet3);border-bottom-left-radius:6px}
.chat-page .reply.our-2{align-self:flex-end;color:#04121c;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,var(--accent),#38bdf8)}
.chat-page .input{display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--edge);
  padding-bottom:max(14px,env(safe-area-inset-bottom))}
.chat-page .input input{border-radius:999px;font-size:16px}
.chat-page .input .btn{border-radius:50%;width:46px;height:46px;padding:0;flex:none}
.chat-page .input .btn svg{width:18px;height:18px}
.trouble-line{align-self:center;color:var(--red);font-size:12.5px;padding:6px 12px;
  border-radius:999px;background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3)}

.ava{position:relative;overflow:hidden}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── облик 30.09: стекло и свет ───────────────────────────────────────────────────────────── */
.chat-page{padding:clamp(0px,2.5vh,28px) 0}
/* Свет под окном: стеклу нужно что преломлять, иначе оно читается серым прямоугольником. */
.chat-page::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 18% 6%,rgba(77,214,255,.16),transparent 62%),
    radial-gradient(40vw 36vw at 84% 2%,rgba(99,102,241,.16),transparent 60%),
    radial-gradient(44vw 34vw at 70% 98%,rgba(61,220,151,.09),transparent 64%);
  filter:blur(8px)}

.window{height:min(calc(100dvh - clamp(0px,5vh,56px)),980px);max-height:100dvh;border-radius:clamp(0px,2.4vh,26px);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 46%,
    rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -26px 34px -30px rgba(0,0,0,.9),
    0 40px 90px -40px rgba(0,0,0,.95);overflow:hidden}

.top{border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.top .ava{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px -12px rgba(0,0,0,.95)}

/* Пузыри: чужой — стекло, свой — акцент с мягким свечением. */
.chat-page .reply{border-radius:20px;box-shadow:0 12px 26px -20px rgba(0,0,0,.9);
  animation:reply-entry .28s cubic-bezier(.22,1,.36,1) both}
.chat-page .reply.their{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chat-page .reply.our-2{background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 16px 34px -20px rgba(77,214,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
@keyframes reply-entry{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.chat-page .input{border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(0deg,rgba(255,255,255,.04),transparent)}
.chat-page .input input{background:rgba(6,10,18,.5);border:1px solid rgba(255,255,255,.09);
  height:46px;padding:0 18px;transition:border-color .22s ease,box-shadow .22s ease}
.chat-page .input input:focus{border-color:rgba(77,214,255,.55);
  box-shadow:0 0 0 4px rgba(77,214,255,.12);outline:0}
.chat-page .input .btn{background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#04202b;border:0;box-shadow:0 12px 26px -14px rgba(77,214,255,.9),
    inset 0 1px 0 rgba(255,255,255,.35);transition:transform .14s ease,box-shadow .22s ease}
.chat-page .input .btn:hover{transform:translateY(-1px);
  box-shadow:0 16px 32px -12px rgba(77,214,255,1),inset 0 1px 0 rgba(255,255,255,.45)}
.chat-page .input .btn:active{transform:scale(.94)}

@media(prefers-reduced-motion:reduce){
  .chat-page .reply{animation:none}
}

/* Окно чата тоже без обводки: только заливка-стекло, фаска и тень. */
.window,.top,.chat-page .input,.chat-page .reply,.chat-page .reply.their,
.chat-page .input input{border:0}
.top{box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.chat-page .input{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.chat-page .input input{box-shadow:inset 0 1px 2px rgba(0,0,0,.5),
  inset 0 0 0 1px rgba(255,255,255,.05)}
.chat-page .input input:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.5),
  0 0 0 4px rgba(77,214,255,.16),inset 0 0 0 1px rgba(77,214,255,.45)}

/* ── 10.10: language and theme top right, files, copy. Dark is the chat as it was; light is its twin. ─────── */
[hidden]{display:none!important}
.top .who-2{flex:1;min-width:0}
.top .who-2 b{overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;align-items:center;gap:8px;flex:none}
.pick-btn,.theme-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;
  border:0;border-radius:12px;cursor:pointer;color:var(--quiet-2);font:500 13px Inter,sans-serif;letter-spacing:-.01em;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.pick-btn{padding:0 10px 0 11px}
.theme-btn{width:36px;padding:0}
.pick-btn:hover,.theme-btn:hover,.pick-btn[aria-expanded=true]{color:var(--text-3);background:rgba(255,255,255,.1)}
.pick-btn:active,.theme-btn:active{transform:scale(.96)}
.pick-btn:focus-visible,.theme-btn:focus-visible,.clip:focus-visible,.cp:focus-visible,.lang-menu li:focus-visible,
.tray .x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pick-btn .zn{width:16px;height:16px}
.pick-btn .chev{width:13px;height:13px;flex:none;transition:transform .2s ease}
.pick-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.pick-btn .short{display:none}
.theme-btn svg{width:17px;height:17px}
.lang-pick{position:relative}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;min-width:184px;
  max-height:min(60vh,360px);overflow-y:auto;border-radius:16px;
  background:rgba(17,24,38,.97);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -18px rgba(0,0,0,.9);
  transform-origin:top right;animation:menu-in .16s cubic-bezier(.22,1,.36,1) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.lang-menu li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;
  cursor:pointer;color:var(--text-3);font:500 14px Inter,sans-serif;outline:none;transition:background .14s ease}
.lang-menu li:hover,.lang-menu li:focus{background:rgba(255,255,255,.07)}
.lang-menu li svg{width:15px;height:15px;color:var(--accent);opacity:0;margin-left:auto;flex:none}
.lang-menu li[aria-selected=true]{color:var(--accent)}
.lang-menu li[aria-selected=true] svg{opacity:1}

/* paperclip */
.chat-page .input{align-items:center}
.clip{flex:none;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--quiet-2);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
  transition:color .18s ease,background .18s ease,transform .12s ease}
.clip:hover{color:var(--accent);background:rgba(77,214,255,.1)}
.clip:active{transform:scale(.94)}
.clip svg{width:20px;height:20px}
.chat-page .input input[type=text]{flex:1;min-width:0}

/* files waiting to be sent */
.tray{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 0}
.tray .it{position:relative;display:flex;align-items:center;gap:9px;max-width:220px;padding:6px 32px 6px 6px;border-radius:14px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px;color:var(--text-3)}
.tray .it img,.tray .it .pdf{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.tray .it .pdf{display:grid;place-items:center;background:rgba(251,113,133,.16);color:#fb7185;font:700 9.5px Inter,sans-serif;letter-spacing:.04em}
.tray .it span{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tray .it b{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray .it small{color:var(--quieter);font-size:11.5px}
.tray .it.err{box-shadow:inset 0 0 0 1px rgba(251,113,133,.6)}
.tray .it.err small{color:var(--red)}
.tray .it.up::after{content:"";position:absolute;left:18px;top:50%;width:16px;height:16px;margin:-10px 0 0 -2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
.tray .it.up img,.tray .it.up .pdf{filter:brightness(.55)}
@keyframes spin{to{transform:rotate(360deg)}}
.tray .x{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--quiet-2);background:rgba(255,255,255,.08)}
.tray .x:hover{color:var(--text-3);background:rgba(255,255,255,.16)}
.tray .x svg{width:11px;height:11px}
.window.drop{box-shadow:inset 0 0 0 2px rgba(77,214,255,.6),0 40px 90px -40px rgba(0,0,0,.95)}

/* files inside a message */
.chat-page .reply{position:relative;overflow-wrap:anywhere}
.chat-page .reply .att{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:-4px -8px 0}
.chat-page .reply .att + .tx{display:block;margin-top:8px}
.chat-page .reply .att img{display:block;width:240px;max-width:100%;height:auto;max-height:240px;border-radius:14px;object-fit:cover}
.chat-page .reply.only-att{padding:5px}
.chat-page .reply.only-att .att{margin:0}
.chat-page .reply.only-att .doc{padding:8px 14px 8px 8px}
.chat-page .reply .doc{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:13px;
  background:rgba(255,255,255,.3);max-width:260px}
.chat-page .reply.their .doc{background:rgba(255,255,255,.07)}
.chat-page .reply .doc i{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(4,18,28,.14);font:700 9.5px Inter,sans-serif;letter-spacing:.04em;font-style:normal}
.chat-page .reply .doc span{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.chat-page .reply .doc b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-page .reply .doc small{font-size:11.5px;opacity:.75}

/* copy a message */
.cp{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border:0;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:var(--quiet-2);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;pointer-events:none;
  transition:opacity .16s ease,color .16s ease,background .16s ease,transform .12s ease}
.reply.their .cp{right:-38px}
.reply.our-2 .cp{left:-38px}
.cp svg{width:14px;height:14px}
.cp:hover{color:var(--text-3);background:rgba(255,255,255,.13)}
.cp:active{transform:scale(.92)}
.cp.done{color:var(--green)}
.reply:hover .cp,.reply.on .cp,.cp:focus-visible,.cp.done{opacity:1;pointer-events:auto}
@media(hover:none){.reply:hover .cp{opacity:0;pointer-events:none}.reply.on .cp,.reply .cp.done{opacity:1;pointer-events:auto}}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,10px);
  padding:9px 16px;border-radius:999px;font:500 13px Inter,sans-serif;color:var(--text-3);pointer-events:none;opacity:0;
  background:rgba(17,24,38,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 16px 34px -14px rgba(0,0,0,.8);
  transition:opacity .2s ease,transform .2s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:560px){
  .top{gap:10px;padding-left:14px;padding-right:14px}
  .tools{gap:6px}
  .pick-btn{padding:0 8px 0 9px;gap:5px}
  .pick-btn .full{display:none}
  .pick-btn .short{display:inline;font-weight:600;font-size:12.5px}
  .chat-page .input{gap:8px;padding-left:12px;padding-right:12px}
  .tray{padding:10px 12px 0}
}
@media(prefers-reduced-motion:reduce){.lang-menu,.tray .it.up::after{animation:none}}

/* ── light theme ──────────────────────────────────────────────────────────────────────────── */
html[data-theme=light]{color-scheme:light;
  --text-3:#0f172a; --quiet-2:#475569; --quieter:#7b879a; --green:#059669; --red:#e11d48;
  --edge:rgba(15,23,42,.1); --edge2:rgba(15,23,42,.16); --sheet2:#fff; --sheet3:#eef2f7}
html[data-theme=light] body.chat-page{background:
  radial-gradient(900px 600px at 8% -6%,rgba(77,214,255,.16),transparent 62%),
  radial-gradient(760px 520px at 98% 0%,rgba(99,102,241,.13),transparent 58%),#eef2f8}
html[data-theme=light] .chat-page::before{background:
  radial-gradient(46vw 40vw at 18% 6%,rgba(77,214,255,.18),transparent 62%),
  radial-gradient(40vw 36vw at 84% 2%,rgba(99,102,241,.14),transparent 60%),
  radial-gradient(44vw 34vw at 70% 98%,rgba(61,220,151,.1),transparent 64%)}
html[data-theme=light] .window{background:linear-gradient(158deg,rgba(255,255,255,.86),rgba(255,255,255,.7) 46%,rgba(255,255,255,.64));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,42,.06),0 40px 90px -40px rgba(15,23,42,.35)}
html[data-theme=light] .top{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  box-shadow:inset 0 -1px 0 rgba(15,23,42,.07)}
html[data-theme=light] .top .ava{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -12px rgba(15,23,42,.45)}
html[data-theme=light] .chat-page .reply{box-shadow:0 12px 26px -20px rgba(15,23,42,.45)}
html[data-theme=light] .chat-page .reply.their{background:#fff;color:var(--text-3);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06),0 10px 24px -18px rgba(15,23,42,.4)}
html[data-theme=light] .chat-page .reply.our-2{box-shadow:0 16px 30px -20px rgba(56,130,246,.7),inset 0 1px 0 rgba(255,255,255,.35)}
html[data-theme=light] .chat-page .reply.their .doc{background:#f1f5f9}
html[data-theme=light] .typing{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
html[data-theme=light] .chat-page .input{background:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(15,23,42,.07)}
html[data-theme=light] .chat-page .input input[type=text]{background:#fff;color:var(--text-3);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.1),0 2px 6px -4px rgba(15,23,42,.25)}
html[data-theme=light] .chat-page .input input[type=text]:focus{background:#fff;
  box-shadow:inset 0 0 0 1px rgba(2,132,199,.5),0 0 0 4px rgba(77,214,255,.18)}
html[data-theme=light] .pick-btn,html[data-theme=light] .theme-btn,html[data-theme=light] .clip,html[data-theme=light] .cp,
html[data-theme=light] .tray .x{background:#fff;color:var(--quiet-2);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.1),0 2px 6px -4px rgba(15,23,42,.25)}
html[data-theme=light] .pick-btn:hover,html[data-theme=light] .theme-btn:hover,html[data-theme=light] .pick-btn[aria-expanded=true],
html[data-theme=light] .cp:hover,html[data-theme=light] .tray .x:hover{background:#f6f8fb;color:var(--text-3)}
html[data-theme=light] .clip:hover{color:#0284c7;background:#f0f9ff}
html[data-theme=light] .cp.done{color:var(--green)}
html[data-theme=light] .lang-menu{background:rgba(255,255,255,.98);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08),0 24px 50px -18px rgba(15,23,42,.35)}
html[data-theme=light] .lang-menu li:hover,html[data-theme=light] .lang-menu li:focus{background:#f1f5f9}
html[data-theme=light] .lang-menu li[aria-selected=true],html[data-theme=light] .lang-menu li svg{color:#0284c7}
html[data-theme=light] .tray .it{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08),0 4px 12px -8px rgba(15,23,42,.3)}
html[data-theme=light] .tray .it.err{box-shadow:inset 0 0 0 1px rgba(225,29,72,.5)}
html[data-theme=light] .trouble-line{background:rgba(225,29,72,.07);color:#be123c}
html[data-theme=light] .toast{background:#0f172a;color:#fff;box-shadow:0 16px 34px -14px rgba(15,23,42,.6)}
html[data-theme=light] ::selection{background:rgba(2,132,199,.2)}
/* 10.10 night: calm «one moment, trying again» while the platform restarts (not red: nothing is wrong for the guest) */
.calm-line{align-self:center;color:var(--muted,#94a3b8);font-size:12.5px;padding:6px 12px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.25)}
html[data-theme=light] .calm-line{color:#475569;background:rgba(71,85,105,.07)}

/* 13.10 qa_touch: the language and theme buttons were 36 px on a phone; the look stays, the finger area grows to 44 */
@media (pointer:coarse){.pick-btn,.theme-btn{position:relative}.pick-btn::after,.theme-btn::after{content:"";position:absolute;inset:-4px}}