/* Страница собеседника по QR — β2 (design/handoff-v2/beta2/guest, пакет дизайнера 09.10.2026; источник правды — prototype/index.html).
   Токены «Фиесты» = приложение β2 (тег beta2-accepted). Шрифты — свои файлы (OFL), без внешних запросов. */

@font-face { font-family: 'Golos Text'; font-weight: 400; font-display: swap; src: url('/fonts/GolosText-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-display: swap; src: url('/fonts/GolosText-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Golos Text'; font-weight: 600; font-display: swap; src: url('/fonts/GolosText-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Golos Text'; font-weight: 700 800; font-display: swap; src: url('/fonts/GolosText-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat Alternates'; font-weight: 700; font-display: swap; src: url('/fonts/MontserratAlternates-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat Alternates'; font-weight: 800; font-display: swap; src: url('/fonts/MontserratAlternates-ExtraBold.ttf') format('truetype'); }

*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
textarea{font:inherit;color:inherit;border:0;outline:none;resize:none;background:none}
html{color-scheme:light dark;-webkit-text-size-adjust:100%}
html,body{height:100%}
body{background:var(--page-bg,#FFF8F3);font-family:"Golos Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
html.dk body{--page-bg:#0D0716;background:var(--page-bg)} /* = --bg тёмной «контраст»; страница рисует .pg */

/* ── токены: Сиеста (светлая) / Ночь фиесты (тёмная) / крупный шрифт ── */
.pg{--bg:#FFF8F3;--glowA:rgba(255,196,140,.30);--glowB:rgba(61,219,176,.12);--ink:#2B1840;--sec:#6A5875;--ter:#94839E;--line:rgba(43,24,64,.09);--acc:#B23A54;--onAcc:#fff;
  --bubMe:#FFFFFF;--onBubMe:#2B1840;--bubThem:#FFFFFF;--onBubThem:#2B1840;--trMe:#FFE0B3;--onTrMe:#2B1840;--trThem:#C9F3E6;--onTrThem:#2B1840;
  --btnMe:#FFA62B;--btnThem:#3DDBB0;--onBtnThem:#2B1840;--haloThem:rgba(61,219,176,.30);--fill:rgba(43,24,64,.05);--card:#FFFFFF;--warnBg:rgba(255,166,43,.18);--warnInk:#7A4300;--okDot:#1FA67F;--danger:#B4233A;--dim:rgba(43,24,64,.30);
  --glassBg:rgba(255,255,255,.52);--glassEdge:rgba(255,255,255,.75);--glassSh:0 10px 28px -12px rgba(43,24,64,.35);--calBg:rgba(255,255,255,.88);--calInk:#2B1840;--shTr:0 10px 26px -14px rgba(0,0,0,.5);
  --fBody:17px;--fTr:22px;--lTr:29px;--fTrM:19px;--lTrM:26px;--fTrL:17px;--lTrL:25px;--fMeta:12px;--fMic:21px;--fTag:12px;--fH:24px;--fP:15px;--micH:64px;--rB:24px;--rTail:8px;
  position:fixed;left:0;right:0;top:0;height:var(--vh,100%);background:var(--bg);color:var(--ink);overflow:hidden;font-family:"Golos Text",system-ui,sans-serif}
/* тёмная «Ночь фиесты — контраст» + Liquid Glass (решение Мурата 10.10, design/handoff-v2/chats/spec.md §1.1, прототип .app.dk.va) */
html.dk .pg{--bg:#0D0716;--glowA:rgba(255,150,40,.34);--glowB:rgba(69,227,184,.22);--glowC:rgba(255,96,110,.26);--ink:#FFFFFF;--sec:#DCCFE9;--ter:#B3A3C6;--line:rgba(255,255,255,.12);--acc:#FF7A76;--onAcc:#1A0B26;
  --bubMe:rgba(255,166,43,.17);--onBubMe:#FFFFFF;--bubThem:rgba(61,219,176,.15);--onBubThem:#FFFFFF;--trMe:#FFAA33;--onTrMe:#1A0B26;--trThem:#45E3B8;--onTrThem:#08201A;
  --btnMe:#FFAA33;--btnThem:#45E3B8;--onBtnThem:#08201A;--haloThem:rgba(69,227,184,.26);--fill:rgba(255,255,255,.10);--card:rgba(255,255,255,.09);--warnBg:rgba(255,170,51,.20);--warnInk:#FFD39A;--okDot:#45E3B8;--danger:#FF8C88;--dim:rgba(0,0,0,.6);
  --glassBg:rgba(255,255,255,.10);--glassEdge:rgba(255,255,255,.55);--glassSh:0 18px 40px -14px rgba(0,0,0,.85);--calBg:linear-gradient(160deg,rgba(60,48,78,.78),rgba(28,22,40,.82));--calInk:#FFFFFF}
html.xl .pg{--fBody:23px;--fTr:28px;--lTr:36px;--fTrM:24px;--lTrM:32px;--fTrL:22px;--lTrL:31px;--fMeta:17px;--fMic:26px;--fTag:15px;--fH:30px;--fP:20px;--micH:84px}
.pg::before{content:"";position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(60% 40% at 15% 5%,var(--glowA),transparent 70%),radial-gradient(55% 40% at 95% 95%,var(--glowB),transparent 70%)}
html.dk .pg::before{background:radial-gradient(70% 38% at 0% 0%,var(--glowA),transparent 70%),radial-gradient(70% 40% at 105% 60%,var(--glowB),transparent 70%),radial-gradient(60% 35% at 10% 105%,var(--glowC),transparent 70%);inset:0}
html.dk .gl{background:linear-gradient(160deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.10) 100%);-webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.08);backdrop-filter:blur(26px) saturate(210%) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.10),inset 1px 0 0 rgba(255,255,255,.10),inset -1px 0 0 rgba(255,255,255,.06),inset 0 0 0 .5px rgba(255,255,255,.16),0 18px 40px -14px rgba(0,0,0,.85)}
html.dk .callout,html.dk .sheet,html.dk .alert,html.dk .langmenu{-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.16),0 24px 50px -12px rgba(0,0,0,.9)}
/* плотное стекло (spec §1.1): окно и лист поверх ленты — текст реплик не просвечивает даже без размытия (QA: WebKit) */
html.dk .alert,html.dk .sheet{background:linear-gradient(160deg,rgba(52,42,68,.95),rgba(24,19,34,.97))}
html.dk .pg{--win:#1E1430}
@media (prefers-reduced-transparency: reduce){html.dk .gl,html.dk .callout,html.dk .sheet,html.dk .alert,html.dk .langmenu{background:var(--win,#1E1430);-webkit-backdrop-filter:none;backdrop-filter:none}}
.gl{background:var(--glassBg);-webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.04);backdrop-filter:blur(14px) saturate(190%) brightness(1.04);box-shadow:inset 0 1px 0 var(--glassEdge),var(--glassSh)}
[lang="es"].tx,.es{font-family:"Montserrat Alternates","Golos Text",sans-serif}
.shell{position:relative;height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* шапка со стеклом — как в приложении: капли */
.top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px 6px;position:relative;z-index:5}
.endc{height:36px;border-radius:18px;padding:0 13px 0 11px;display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--acc);white-space:nowrap}
.endc i{width:9px;height:9px;border-radius:2.5px;background:currentColor}
.pair{height:36px;border-radius:18px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;font:800 14px/1 "Montserrat Alternates",sans-serif;white-space:nowrap}
.pair .d{width:8px;height:8px;border-radius:50%;background:var(--okDot);box-shadow:0 0 0 3px color-mix(in srgb,var(--okDot) 22%,transparent)}
.pair.wait .d{background:var(--ter);box-shadow:none;animation:blink 1s infinite}.pair.warn .d{background:#FFA62B;animation:blink 1s infinite}
.pair.done .d{background:var(--ter);box-shadow:none}
.lang{height:36px;border-radius:18px;padding:0 10px 0 12px;display:inline-flex;align-items:center;gap:4px;font:800 14px/1 "Golos Text",sans-serif;letter-spacing:.03em}
.lang svg{width:14px;height:14px;color:var(--sec)}
.spacer{width:10px}
html.xl .endc,html.xl .pair,html.xl .lang{height:44px;border-radius:22px;font-size:18px}
@keyframes blink{50%{opacity:.25}}
.feedwrap{flex:1;min-height:0;position:relative}
.feed{position:absolute;inset:0;overflow:auto;padding:14px 16px 16px;display:flex;flex-direction:column;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 8px),transparent)}
.feed::-webkit-scrollbar{display:none}
.feed .fill{flex:1}

/* облачки — те же, что в приложении */
.turn{display:flex;flex-direction:column;gap:5px;margin-top:12px;position:relative}
.turn.me{align-items:flex-end}.turn.them{align-items:flex-start}
.bub{max-width:84%;padding:10px 15px 11px;border-radius:var(--rB);font-size:var(--fBody);line-height:1.34;font-weight:500;overflow-wrap:anywhere;text-align:left;transition:box-shadow .25s,opacity .25s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bub.src[lang="es"]{font-family:"Montserrat Alternates",sans-serif;font-weight:700;letter-spacing:0}
.me .bub.src{background:var(--bubThem);color:var(--onBubThem);border-bottom-right-radius:var(--rTail)}
html:not(.dk) .bub.src{box-shadow:0 6px 18px -10px rgba(43,24,64,.25)}
.bub.tr{font-size:var(--fTr);line-height:var(--lTr);font-weight:700;padding:13px 18px 14px;max-width:90%;box-shadow:var(--shTr)}
.bub.tr.m{font-size:var(--fTrM);line-height:var(--lTrM)}.bub.tr.l{font-size:var(--fTrL);line-height:var(--lTrL)}
.bub.tr[lang="es"]{font-family:"Montserrat Alternates",sans-serif}
.me .bub.tr{background:var(--trThem);color:var(--onTrThem);border-top-right-radius:var(--rTail)}
.them .bub.tr{background:var(--trMe);color:var(--onTrMe);border-top-left-radius:var(--rTail)}
.meta{display:flex;align-items:center;gap:6px;font-size:var(--fMeta);color:var(--sec);padding:0 6px;max-width:100%;min-width:0;text-wrap:pretty}
.meta i{width:7px;height:7px;border-radius:50%;flex:none}
.me .meta i{background:var(--btnThem)}.them .meta i{background:var(--btnMe)}
.focus .turn:not(.sel) .bub{opacity:.42}
.turn.sel .bub.tr{box-shadow:0 16px 36px -12px color-mix(in srgb,var(--btnThem) 70%,transparent)}
.them.sel .bub.tr{box-shadow:0 16px 36px -12px color-mix(in srgb,var(--btnMe) 70%,transparent)}
.me.sel .bub.src{box-shadow:0 12px 28px -14px rgba(0,0,0,.45)}
.bub .orig{display:block;margin-top:9px;padding-top:9px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font:500 calc(var(--fBody) - 2px)/1.38 "Golos Text",sans-serif;opacity:.82}
.bub .orig b{font-weight:700}
/* три точки цвета говорящего */
.ldots{display:inline-flex;gap:4px;vertical-align:middle;margin-left:4px}
.ldots i{width:6px;height:6px;border-radius:50%;animation:dt 1.1s infinite}.ldots i:nth-child(2){animation-delay:.15s}.ldots i:nth-child(3){animation-delay:.3s}
.me .ldots i{background:var(--btnThem)}.them .ldots i{background:var(--btnMe)}
.bub .tx:empty+.ldots{margin-left:0}
html.xl .ldots i{width:8px;height:8px}
@keyframes dt{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.live .raw{opacity:.92}
/* спокойное превращение (короткая версия): размытие → чёткость, 0.45 с */
.morph .tx{animation:calm .45s ease-out both}
@keyframes calm{0%{filter:blur(5px);opacity:.35}100%{filter:blur(0);opacity:1}}
.bub.tr.in{animation:trIn .38s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes trIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.bub.wait{padding:13px 18px}
.them .bub.tr.wait{background:var(--bubMe);box-shadow:0 6px 18px -10px rgba(43,24,64,.25)}
.turn .meta.in{animation:fadeIn .3s .2s both}

/* меню над облачком — как в приложении */
.callout{position:absolute;z-index:8;display:flex;border-radius:14px;overflow:hidden;background:var(--calBg);color:var(--calInk);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px 0 var(--glassEdge),0 14px 34px -10px rgba(0,0,0,.4);white-space:nowrap}
.callout button{height:42px;padding:0 13px;font-size:15px;font-weight:600}
.callout button+button{border-left:.5px solid color-mix(in srgb,var(--calInk) 22%,transparent)}
.callout button.fl{color:var(--danger)}
.callout.stack{flex-direction:column;width:max-content;max-width:calc(100% - 16px)}
.callout.stack button{text-align:left;padding:0 16px}
.callout.stack button+button{border-left:0;border-top:.5px solid color-mix(in srgb,var(--calInk) 22%,transparent)}
html.xl .callout{flex-direction:column;min-width:220px}html.xl .callout button{height:50px;font-size:19px;text-align:left;padding:0 18px}
html.xl .callout button+button{border-left:0;border-top:.5px solid color-mix(in srgb,var(--calInk) 22%,transparent)}

/* подсказка на пустой ленте */
.hint{margin:auto 0 8px;padding:18px 18px 16px;border-radius:24px;display:flex;flex-direction:column;gap:10px;text-align:left}
.hint h2{font:800 var(--fH)/1.15 "Montserrat Alternates",sans-serif;letter-spacing:-.01em}
.hint p{font-size:var(--fP);line-height:1.42;color:var(--sec)}
.hint .who2{display:flex;gap:8px;flex-wrap:wrap}
.hint .who2 span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fMeta);font-weight:700;color:var(--sec);padding:6px 10px;border-radius:99px;background:var(--fill)}
.hint .who2 i{width:9px;height:9px;border-radius:5px}
.hint.micc{margin-top:14px}
.hint.micc .ico{width:52px;height:52px;border-radius:18px}
.hint.micc h2{font-size:calc(var(--fH) - 4px)}
.hint.micc .btn2{align-self:flex-start}

/* одна большая кнопка */
.dock{flex:none;padding:10px 16px 10px;position:relative;z-index:5}
.mbtn{position:relative;width:100%;min-height:var(--micH);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;font-size:var(--fMic);font-weight:800;background:var(--btnThem);color:var(--onBtnThem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.08),0 12px 26px -12px var(--btnThem);transition:transform .2s,opacity .25s;touch-action:manipulation}
.mbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 48%)}
.mbtn svg{width:24px;height:24px;flex:none}html.xl .mbtn svg{width:30px;height:30px}
.mbtn .tag{font:800 var(--fTag)/1 "Golos Text",sans-serif;padding:3px 7px;border-radius:7px;background:color-mix(in srgb,currentColor 14%,transparent);letter-spacing:.04em}
html.dk .bub.tr{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.10),0 14px 30px -14px rgba(0,0,0,.9)}
html.dk .mbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(0,0,0,.12),0 0 0 .5px rgba(255,255,255,.2),0 16px 34px -12px var(--btnThem)}
.mbtn .w{white-space:nowrap}.mbtn .w[lang="es"]{font-family:"Montserrat Alternates",sans-serif}
.mbtn:active{transform:scale(.97)}
.mbtn.rec{animation:halo 1.2s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 5px var(--haloThem),0 12px 26px -12px var(--btnThem)}50%{box-shadow:0 0 0 14px var(--haloThem),0 12px 26px -12px var(--btnThem)}}
.mbtn.off{opacity:.3;pointer-events:none;box-shadow:none}.mbtn.busy{opacity:.5;pointer-events:none}
.consent{font-size:12px;color:var(--ter);text-align:center;margin-top:8px;line-height:1.35}html.xl .consent{font-size:15px}
.consent svg{width:11px;height:11px;vertical-align:-1px;margin-right:4px}
.banner{margin:2px 16px 0;padding:10px 14px;border-radius:18px;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;flex:none;background:var(--warnBg);color:var(--warnInk);position:relative;z-index:5}
html.xl .banner{font-size:18px}
.banner .sp{width:16px;height:16px;border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* центр: подключение / ошибка / конец */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 26px;gap:14px;position:relative;z-index:2;overflow:auto}
.center h2{font:800 var(--fH)/1.16 "Montserrat Alternates",sans-serif;letter-spacing:-.01em;text-wrap:balance}
.center p{font-size:var(--fP);line-height:1.45;color:var(--sec);max-width:320px;text-wrap:balance}
.ico{width:80px;height:80px;border-radius:28px;display:grid;place-items:center;flex:none}
.ico svg{width:36px;height:36px}
.ico.mint{background:var(--btnThem);color:var(--onBtnThem);box-shadow:0 16px 34px -14px var(--btnThem)}
.ico.warn{background:var(--warnBg);color:var(--warnInk)}
.link2{display:flex;align-items:center}.link2 i{width:24px;height:24px;border-radius:50%}.link2 i.a{background:var(--btnMe)}.link2 i.b{background:var(--btnThem)}
.link2 span{width:60px;height:4px;margin:0 6px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sec) 0 6px,transparent 6px 12px);background-size:24px 4px;animation:flow .7s linear infinite;opacity:.6}
@keyframes flow{to{background-position:24px 0}}
.btn2{min-height:50px;border-radius:25px;padding:0 22px;font-size:16.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:9px}
html.xl .btn2{min-height:60px;font-size:20px}
.btn2 svg{width:20px;height:20px}
.btn2.mint{background:var(--btnThem);color:var(--onBtnThem)}
.btn2.glass{color:var(--ink)}
.howto{font-size:calc(var(--fP) - 1px);line-height:1.5;color:var(--ink)}

/* конец разговора */
.endcard{width:100%;max-width:420px;padding:18px 18px 16px;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-top:6px}
.endcard h3{font:800 calc(var(--fH) - 4px)/1.2 "Montserrat Alternates",sans-serif;text-wrap:balance}
.endcard p{font-size:var(--fP);color:var(--sec);line-height:1.4}
.asb{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 12px;border-radius:11px;background:#000;color:#fff;box-shadow:inset 0 0 0 1px #A6A6A6;text-align:left;font-family:-apple-system,"Helvetica Neue",sans-serif;text-decoration:none}
.asb .gly{width:22px;height:26px;border:1.5px dashed rgba(255,255,255,.6);border-radius:5px}
.asb span{display:block;font-size:10px;line-height:1.1}.asb b{display:block;font-size:20px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
html.xl .asb{height:58px}html.xl .asb b{font-size:24px}

/* листы и окна */
.dim{position:fixed;inset:0;background:var(--dim);z-index:20}
.sheet{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:21;border-radius:32px;padding:20px 18px 18px;background:var(--calBg);color:var(--calInk);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 var(--glassEdge),0 -10px 40px -10px rgba(0,0,0,.35);max-height:calc(var(--vh,100%) - 80px);overflow:auto}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--ter);opacity:.5;margin:-8px auto 12px}
.sheet h2{font:800 20px/1.2 "Montserrat Alternates",sans-serif;margin-bottom:12px}html.xl .sheet h2{font-size:25px}
.sheet .q{padding:12px 14px;border-radius:16px;background:var(--fill);margin-bottom:12px}
.sheet .q b{display:block;font:700 16px/1.3 "Montserrat Alternates",sans-serif}.sheet .q b[lang="ru"]{font-family:"Golos Text",sans-serif}
.sheet .q span{display:block;font-size:14px;color:var(--sec);margin-top:5px}
html.xl .sheet .q b{font-size:20px}html.xl .sheet .q span{font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.chips button{min-height:36px;padding:0 13px;border-radius:18px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;background:var(--fill)}
html.xl .chips button{min-height:44px;font-size:18px}
.chips button.on{background:var(--btnThem);color:var(--onBtnThem)}
.ta{display:block;width:100%;border-radius:14px;background:var(--fill);padding:11px 13px;font-size:15px;margin-bottom:10px;min-height:44px}.ta::placeholder{color:var(--ter)}html.xl .ta{font-size:19px}
.sheet .nt{font-size:12.5px;color:var(--ter);line-height:1.4;margin-bottom:14px}html.xl .sheet .nt{font-size:15px}
.sheet .err{font-size:13px;color:var(--danger);margin:-4px 0 8px;min-height:0}.sheet .err:empty{display:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 button{min-height:52px;border-radius:26px;font-size:17px;font-weight:700;background:var(--fill)}.row2 button.pri{background:var(--btnThem);color:var(--onBtnThem)}
html.xl .row2 button{font-size:20px;min-height:60px}
.alert{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;max-width:calc(100% - 32px);z-index:21;border-radius:30px;padding:22px 20px 16px;text-align:center;background:var(--calBg);color:var(--calInk);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 var(--glassEdge),0 20px 50px -14px rgba(0,0,0,.45)}
html.xl .alert{width:340px}
.alert h2{font:800 19px/1.25 "Montserrat Alternates",sans-serif;margin-bottom:8px}html.xl .alert h2{font-size:23px}
.alert p{font-size:14.5px;color:var(--sec);line-height:1.4;margin-bottom:16px}html.xl .alert p{font-size:18px}
.alert .col{display:flex;flex-direction:column;gap:8px}
.alert .col button{min-height:50px;border-radius:25px;font-size:17px;font-weight:700;background:var(--fill)}html.xl .alert .col button{font-size:20px;min-height:58px}
.alert .col button.dang{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom));z-index:22;padding:10px 16px;border-radius:22px;font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center;white-space:nowrap;color:var(--ink)}
.toast svg{width:17px;height:17px;color:var(--okDot)}
.langmenu{position:absolute;right:16px;top:calc(env(safe-area-inset-top) + 50px);z-index:9;border-radius:14px;overflow:hidden;background:var(--calBg);color:var(--calInk);box-shadow:inset 0 1px 0 var(--glassEdge),0 14px 34px -10px rgba(0,0,0,.4);min-width:180px;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)}
html.xl .langmenu{top:calc(env(safe-area-inset-top) + 58px)}
.langmenu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;height:44px;padding:0 14px;font-size:15px;font-weight:600}
.langmenu button+button{border-top:.5px solid color-mix(in srgb,var(--calInk) 18%,transparent)}
.langmenu svg{width:16px;height:16px;color:var(--okDot)}
html.xl .langmenu button{height:52px;font-size:19px}

/* компьютер: колонка до 720, кнопка до 520 */
html.desk .shell{max-width:720px;margin:0 auto;padding-left:20px;padding-right:20px}
html.desk .top{padding:16px 4px 8px}
html.desk .feed{padding:16px 8px}
html.desk .bub{max-width:70%}html.desk .bub.tr{max-width:76%}
html.desk .dock{max-width:520px;width:100%;margin:0 auto;padding:12px 0 20px}
html.desk .center{padding:0 40px}
html.desk .langmenu{right:calc(50% - 344px);top:62px}
html.desk .sheet{left:50%;right:auto;width:520px;transform:translateX(-50%);bottom:24px}
.kbh{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--line);background:var(--fill);font-size:11.5px;font-weight:700;color:var(--sec)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.ldots i,.mbtn.rec,.link2 span,.pair .d{animation:none}.morph .tx{animation:fadeIn .2s both}.bub.tr.in{animation:fadeIn .2s both}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet:focus,.alert:focus{outline:none}

/* чаты по ссылке (макеты chats 46 «Seguir en contacto», 48 «Enlace revocado») */
.center:has(.keepcard) h2{font-size:calc(var(--fH) + 4px)}
.center .lead{font-family:"Montserrat Alternates",sans-serif;font-weight:700;font-size:calc(var(--fP) + 1px);color:var(--sec);max-width:34ch;text-wrap:balance}
.keepcard{width:100%;max-width:420px;padding:22px 20px 18px;border-radius:28px;display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:left;margin-top:14px}
.keepcard h3{font:800 calc(var(--fH) - 1px)/1.2 "Montserrat Alternates",sans-serif;text-wrap:balance}
.keepcard p{font-size:var(--fP);color:var(--sec);line-height:1.4;text-wrap:pretty}
.keepcard small{font-size:calc(var(--fP) - 2px);color:var(--sec);line-height:1.4;margin-top:2px}
.btn2.acc{background:var(--acc);color:var(--onAcc);box-shadow:0 10px 22px -12px var(--acc);text-decoration:none;min-height:52px}
.btn2.actb{background:var(--card);color:var(--ink);box-shadow:0 8px 20px -12px rgba(43,24,64,.35);text-decoration:none;min-height:52px}
html.dk .btn2.actb{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.18)}
html:not(.dk) .keepcard{background:var(--card)}
.btn2.acc svg,.btn2.actb svg{width:22px;height:22px}
.ico.plain{background:none;color:var(--ter)}.ico.plain svg{width:56px;height:56px}

/* 7 «Чат по ссылке» (макет 47): мои облачка — мята справа, его — манго слева; подпись под облачком; поле текста над «Hablar» */
.endc.back{width:44px;padding:0;justify-content:center;color:var(--acc)}.endc.back svg{width:22px;height:22px}
.feed.wc{gap:6px}.feed.wc .fill{display:none}   /* макет 47: история начинается сверху */
.wcev{align-self:center;max-width:88%;font-size:var(--fMeta);color:var(--sec);padding:6px 12px;border-radius:12px;background:var(--fill);margin:8px 0;text-align:center}
.wcev svg{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px}
.wcday{align-self:center;font-size:var(--fMeta);font-weight:700;color:var(--ter);margin:10px 0 4px}
.wcm{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-width:100%}
.wcm.me{align-items:flex-end}.wcm.them{align-items:flex-start}
.wcm .bub.tr{max-width:82%;padding:12px 16px 8px;border-radius:var(--rB)}
.wcm.me .bub.tr{background:var(--trThem);color:var(--onTrThem);border-bottom-right-radius:var(--rTail);border-top-right-radius:var(--rB)}
.wcm.them .bub.tr{background:var(--trMe);color:var(--onTrMe);border-bottom-left-radius:var(--rTail);border-top-left-radius:var(--rB)}
.wcm .ft{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:4px;font:600 var(--fMeta)/1 "Golos Text",sans-serif;opacity:.62}
.wcm .ft svg{width:16px;height:16px}
.wcm .who{font-size:var(--fMeta);font-weight:700;color:var(--sec);padding:0 8px}
.dock.wc{display:flex;flex-direction:column;gap:10px}
.wcrow{display:flex;gap:10px;align-items:center}
.wcin{flex:1;min-width:0;min-height:52px;border-radius:26px;border:0;padding:0 20px;font:500 var(--fBody) "Golos Text",sans-serif;color:var(--ink);background:var(--card);box-shadow:0 8px 20px -12px rgba(43,24,64,.35);outline:none}
.wcin[lang="es"]{font-family:"Montserrat Alternates","Golos Text",sans-serif;font-weight:700}
.wcin::placeholder{color:var(--ter)}
html.dk .wcin{background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 .5px rgba(255,255,255,.10)}
.wcsend{width:52px;height:52px;border-radius:26px;flex:none;display:grid;place-items:center;color:var(--ter);background:var(--fill)}
.wcsend svg{width:22px;height:22px}.wcsend.on{background:var(--acc);color:var(--onAcc)}

.wcfail{align-self:flex-end;font-size:var(--fMeta);font-weight:700;color:var(--danger);padding:2px 8px}

/* QA #37 (S3/S4): на узких экранах (до 380 px) кнопки «Seguir en contacto» — в одну строку и одной высоты; кнопка — без переноса */
@media (max-width:380px){
  .center:has(.keepcard){padding:0 14px}
  .keepcard{padding:20px 14px 16px}
  .keepcard .btn2{padding:0 14px;font-size:15.5px;gap:8px}
}
.keepcard .btn2,.center > .btn2.acc{white-space:nowrap}

/* QA #38 (S3): длинная подпись не сжимает значок — он фиксированного размера */
.btn2 svg{flex:none}
@media (max-width:380px){ html.xl .keepcard .btn2{font-size:17px;padding:0 12px} }

/* приглашение /i/<код>: две кнопки одной ширины */
.center > a.btn2{min-width:260px;max-width:100%;box-sizing:border-box;text-align:center}
.center > a.btn2.acc,.center > a.btn2.actb{white-space:normal;padding-top:8px;padding-bottom:8px}

/* плотное стекло окна и листов в светлой теме (QA #52: правило выше перекрывалось .alert/.sheet) */
html:not(.dk) .alert,html:not(.dk) .sheet{background:rgba(255,255,255,.97)}