:root{color-scheme:dark;--bg:#0a1323;--surface:#142338;--surface2:#182d46;--border:#304763;--ink:#eef6ff;--muted:#9fb4ce;--accent:#2dc9e3;--accent-hover:#16b6d1;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(ellipse 85% 48% at 50% -15%,#1e4365 0%,#0a1323 70%) fixed;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #67e8fa;outline-offset:3px}
.topbar{background:#0d1a2cde;border-bottom:1px solid #253950;position:sticky;top:0;z-index:20;backdrop-filter:blur(18px)}.topbar-inner,.shell{width:min(100% - 56px,1400px);margin-inline:auto}.topbar-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid #367b99;border-radius:13px;font-size:31px;color:var(--accent);background:#143048}.brand strong{display:block;font-size:17px;letter-spacing:.075em}.brand small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.top-actions,.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:11px;border:1px solid transparent;padding:11px 17px;font-size:15px;font-weight:700;text-decoration:none;transition:background .16s,border-color .16s,transform .16s;white-space:normal;text-align:center}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn-primary{background:#138fae;color:#fff;border-color:#259eb6}.btn-primary:hover{background:#18a5c6}.btn-secondary{background:#1e324c;color:#e7f5ff;border-color:#405b76}.btn-secondary:hover{background:#284564}.btn-subtle{background:#18354b;color:#93e8f3;border-color:#2b6173}.btn-subtle:hover{background:#254961}
.shell{padding:36px 0 56px}.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:27px}.eyebrow{font-size:11px;color:#76d8e5;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.version{color:var(--muted);letter-spacing:0;margin-left:10px;text-transform:none}h1{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.045em;line-height:1.12;margin:10px 0 12px}.heading-accent{color:#79cce0;font-weight:450}.lead{font-size:16px;line-height:1.62;color:var(--muted);max-width:750px;margin:0}.top-status{display:flex;align-items:center;gap:12px;background:#13283e;border:1px solid var(--border);border-radius:13px;padding:15px 18px;min-width:185px}.top-status small{font-size:12px;display:block;color:var(--muted);margin-bottom:5px}.top-status strong{font-size:15px;display:block}.status-dot{width:12px;height:12px;border-radius:50%;background:#f5a66b;box-shadow:0 0 0 5px #db9e3924;flex:none}.status-dot.ok{background:#39d4a4;box-shadow:0 0 0 5px #38d1a42b}
.main-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:24px}.control-stack{display:grid;gap:17px;min-width:0}.card{background:linear-gradient(155deg,#182a41,#132238);border:1px solid #35506c;border-radius:var(--radius);box-shadow:0 18px 50px #0002;padding:23px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head h2{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:7px 0 4px}.section-hint{color:var(--muted);font-size:13px;margin:0}.chip{padding:8px 11px;border-radius:8px;background:#1c4256;border:1px solid #327088;font-size:12px;color:#93e8f2;font-weight:700}.help{font-size:13px;color:var(--muted);line-height:1.55;margin:14px 0 0}.button-row .btn{flex:0 1 auto}.usb-section .button-row .btn{flex:1}
.phonewrap{border-radius:14px;overflow:hidden;background:#0d1b2b}.phone{display:flex;flex-direction:column;height:min(660px,calc(100dvh - 238px));min-height:420px;border:1px solid #2c455c;border-radius:14px;overflow:hidden;background:#0e1f32}.phoneheader{min-height:64px;flex:none;padding:14px 19px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1a3047;border-bottom:1px solid #2d4a60}.phoneheader .title{font-size:17px;font-weight:750;display:flex;align-items:center;gap:8px}.online-ring{display:block;width:10px;height:10px;border:2px solid #4dd3c6;border-radius:50%}.indicator{color:#a6cce0;font-size:13px;text-align:right;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.messages{display:flex;flex-direction:column;gap:13px;overflow:auto;padding:22px;flex:1;min-height:0;overscroll-behavior:contain}.empty-note{margin:auto;max-width:340px;text-align:center;color:#87a8be;line-height:1.65;padding:18px;border:1px dashed #365267;border-radius:14px}.bubble{max-width:82%;padding:12px 15px;border-radius:15px;line-height:1.52;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 5px 16px #0002}.bubble.mine{align-self:flex-end;background:#146a85;color:#f2fdff;border-bottom-right-radius:4px}.bubble.other{align-self:flex-start;background:#283d54;color:#f4faff;border-bottom-left-radius:4px}.delivery{display:block;text-align:right;font-size:12px;color:#c0e9f3;margin-top:5px}.composer{display:flex;gap:10px;padding:13px;background:#162c43;border-top:1px solid #2d435b}.composer input{flex:1;min-width:0;border:1px solid #496582;border-radius:11px;background:#0e1e30;padding:13px 15px;color:white;font-size:16px}.composer input::placeholder{color:#8ca6bd}.composer button{border:0;border-radius:11px;background:#1999b4;color:white;font-size:15px;font-weight:700;min-height:47px;padding:10px 16px}.composer button:not(:disabled):hover{background:#0bb1d1}.keyboard{background:#203449;padding:12px;display:none;flex-direction:column;gap:6px}.phone.typing .keyboard{display:flex}.keys{display:flex;gap:4px;justify-content:space-between}.key{background:#3b5570;border:1px solid #52708c;border-radius:7px;color:white;flex:1;min-width:0;height:34px;font-size:14px;padding:0 2px}.key.wide{flex:2.5}.key.lang{background:#176d86}.chat-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#8eafc6;font-size:12px;margin-top:14px}
.display-sync{display:flex;align-items:center;gap:13px;margin-top:18px;background:#0e2237;border:1px solid #31536b;border-radius:12px;padding:14px}.display-icon{display:grid;place-items:center;background:#19415a;border-radius:10px;width:45px;height:45px;flex:none;color:#75e2f1;font-size:26px}.display-sync strong{display:block;font-size:14px;margin-bottom:3px}.display-sync small{display:block;color:#a6bcd1;font-size:12px;line-height:1.55}
.detail-card{padding:0;overflow:hidden}.detail-card summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 23px;cursor:pointer;list-style:none}.detail-card summary::-webkit-details-marker{display:none}.detail-card summary strong{display:block;font-size:19px;margin-top:6px;letter-spacing:-.015em}.chevron{font-size:22px;color:#86c6dc;transition:transform .16s}.detail-card[open] .chevron{transform:rotate(180deg)}.detail-body{border-top:1px solid #304763;padding:21px 23px 24px}.detail-body h3{font-size:16px;margin:24px 0 14px}.detail-body h3:first-child{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:20px}.field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:650;color:#c2d8e9;min-width:0}.field.wide{grid-column:1/-1}.field input,.field select{background:#0c1b2d;color:#eff7ff;border:1px solid #49627d;border-radius:10px;padding:11px 12px;min-height:47px;font-size:16px;width:100%;max-width:100%}.field select{cursor:pointer}.field .button-row .btn{flex:1}.action-field .button-row{flex:1}.result-strip{background:#0d2032;border:1px solid #2d4b63;border-radius:10px;padding:13px;color:#a3d6e4;line-height:1.5;font-size:14px;margin:15px 0}.result-code{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}#log{white-space:pre-wrap;background:#091a2a;border:1px solid #284159;padding:16px;color:#b5d8ed;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:120px;max-height:380px;overflow:auto;border-radius:12px}.site-footer{text-align:center;color:#8aa6c0;font-size:13px;padding-top:35px}
/* Pop-out chat: one parent window owns Web Serial, this view is a local mirror. */
.chat-page .shell{max-width:900px;padding:18px 0}.chat-page .topbar-inner{min-height:69px}.chat-page .standalone-wrap{margin-inline:auto}.chat-page .phone{height:calc(100dvh - 220px);min-height:300px}.chat-page .card{padding:16px}.chat-page .standalone-info{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b8cad8;font-size:13px;margin-bottom:12px;flex-wrap:wrap}.chat-page .standalone-info strong{color:#f5fafe}.chat-page .chat-footer{color:#97b7cb;margin:10px 2px 0;font-size:12px;line-height:1.5}
@media(max-width:1050px){.main-layout{grid-template-columns:minmax(0,1fr)}.phone{height:min(580px,75dvh)}.control-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.usb-section{grid-column:1/-1}}
@media(max-width:720px){.topbar-inner,.shell{width:min(100% - 28px,1400px)}.topbar-inner{min-height:75px}.brand strong{font-size:13px}.brand small{font-size:10px}.brand-mark{width:37px;height:37px;font-size:23px}.top-actions{gap:6px}.top-actions .btn{font-size:12px;min-height:42px;padding:8px 10px}.shell{padding-top:24px}.page-intro{align-items:stretch;flex-direction:column;gap:16px}.main-layout,.control-stack{display:flex;flex-direction:column;gap:16px}.main-layout>*,.control-stack>*{width:100%}.card{padding:17px}.section-head{flex-wrap:wrap}.section-head h2{font-size:20px}.phone{min-height:390px;height:60dvh}.messages{padding:15px}.chat-foot{font-size:11px}.bubble{font-size:16px}.detail-card summary{padding:17px}.detail-body{padding:17px}.page-intro h1{font-size:32px}.top-status{width:100%}.chat-page .phone{height:calc(100dvh - 215px);min-height:290px}}
@media(max-width:400px){.topbar-inner{gap:8px}.top-actions .btn{padding:8px;font-size:11px}.brand{gap:6px}.brand strong{letter-spacing:0}.brand small{display:none}.btn{padding:10px 12px}.phoneheader{padding:10px 12px}.indicator{font-size:11px}.composer{gap:6px;padding:8px}.composer button{padding:9px 10px}.field input,.field select{font-size:16px}.form-grid{gap:10px}.key{font-size:12px}}
@media(hover:none),(pointer:coarse){.phone .composer input{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Main site is fully responsive; the 240x320 limit belongs ONLY to the separate chat. */
.main-layout{grid-template-columns:minmax(360px,.9fr) minmax(490px,1.1fr)}
.chat-launch-visual{display:grid;place-items:center;min-height:305px;margin:16px 0;background:radial-gradient(circle at 50% 35%,#1d4864,transparent 65%),#101f32;border-radius:16px;border:1px solid #34536a}
.chat-illustration{width:215px;height:268px;background:#0f2134;border:1px solid #48657f;border-radius:13px;display:flex;flex-direction:column;gap:11px;padding:10px;box-shadow:0 15px 30px #0004}
.chat-illustration-bar{display:flex;justify-content:space-between;border-bottom:1px solid #35516c;padding-bottom:9px;font-size:12px;font-weight:700;color:#cde8f2}.chat-illustration-bar span:last-child{font-size:10px;color:#9bb5ca}
.chat-illustration-message{border-radius:9px;padding:9px;font-size:12px;max-width:85%;background:#263c55}.chat-illustration-message.received{align-self:start}.chat-illustration-message.outgoing{align-self:end;background:#15728c}
.chat-illustration-composer{margin-top:auto;padding:9px;font-size:11px;background:#152d44;color:#a9bed2;border:1px solid #385b74;border-radius:8px;display:flex;justify-content:space-between}.chat-illustration-composer span{color:#50d9ed}
.chat-launch-details{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0;color:#9fbad0;font-size:13px}.btn-open-chat{width:100%}
@media(max-width:1150px){.main-layout{grid-template-columns:minmax(0,1fr)}.chat-launch-visual{min-height:250px}.chat-illustration{transform:scale(.9);margin:-12px 0}.control-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.control-stack{display:flex}.chat-launch-visual{min-height:220px}}
/* Separate chat window: default chat viewport is EXACTLY 240 x 320 CSS pixels.
 * Browser popup chrome adds its own frame; it is not part of this viewport.
 * CSS resize handle and browser window are both resizable on desktop. */
.chat-page{min-width:260px;background:#0b1626}
.chat-page .topbar{position:static}.chat-page .topbar-inner{width:calc(100% - 24px);min-height:54px}
.chat-page .brand strong{font-size:13px}.chat-page .brand small{font-size:10px}
.chat-page .brand-mark{width:31px;height:31px;font-size:22px}
.chat-page .shell{width:calc(100% - 24px);max-width:none;margin:auto;padding:12px 0 20px}
.chat-page .standalone-wrap{width:fit-content;max-width:100%;padding:10px;margin:auto}
.chat-page .standalone-info{max-width:550px;font-size:11px;line-height:1.4;margin:0 0 8px}
.chat-page .phone{width:240px;height:320px;min-width:220px;min-height:250px;max-width:100%;max-height:calc(100dvh - 155px);resize:both;overflow:hidden;border-radius:10px;container-type:inline-size}
.chat-page .phone.expanded{width:min(560px,calc(100vw - 52px));height:min(700px,calc(100dvh - 160px))}
.chat-page .phoneheader{min-height:37px;padding:6px 9px}.chat-page .phoneheader .title{font-size:12px}.chat-page .indicator{font-size:10px}
.chat-page .messages{padding:8px;gap:7px}.chat-page .bubble{padding:8px 10px;font-size:13px;max-width:93%;line-height:1.4}
.chat-page .empty-note{padding:8px;font-size:12px}.chat-page .delivery{font-size:10px}
.chat-page .composer{padding:6px;gap:5px}.chat-page .composer input{padding:7px 8px;border-radius:7px;font-size:14px;min-width:0;min-height:34px}
.chat-page .composer button{padding:5px 9px;min-height:34px;border-radius:7px;font-size:14px}
.chat-page .chat-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:8px}
.chat-page .chat-actions button{background:#19364c;border:1px solid #37617b;color:#d2eef8;border-radius:7px;padding:5px 8px;font-size:12px;cursor:pointer}
.chat-page .chat-footer{margin:8px 0 0;font-size:11px;max-width:550px}
.chat-page .resize-hint{font-size:11px;color:#8bacc3}
.chat-page .resize-grip{position:absolute;bottom:1px;right:2px;pointer-events:none;color:#8fc9de;font-size:13px}
.chat-page .phone{position:relative}
@media(max-width:720px){.chat-page .topbar-inner{gap:5px}.chat-page .top-actions .btn{font-size:11px;padding:5px 8px;min-height:32px}.chat-page .shell{padding-top:8px}.chat-page .standalone-wrap{padding:8px}.chat-page .phone{max-height:calc(100dvh - 160px)}}

/* Optional RU/EN/123 keyboard belongs to the chat viewport, not site layout. */
.chat-page .keyboard{padding:5px;gap:4px;flex:none}.chat-page .key{height:27px;font-size:11px;padding:0 1px}
.chat-page .key.wide{flex:2}.chat-page .phone.typing .keyboard{display:flex}
@media (hover:none),(pointer:coarse){.chat-page #kbdToggle{display:none}.chat-page .phone.typing .keyboard{display:none}}


/* 2026-11-04: Station controls fill the page; only one button opens the chat. */
.main-layout{grid-template-columns:minmax(0,1fr);max-width:1320px}
.control-stack{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.chat-launch-toolbar{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.chat-launch-toolbar .btn{min-width:200px;min-height:53px;font-size:17px}
.usb-section{grid-column:1/-1}
.chat-connection-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px;margin-top:14px;color:#a8d5e2;font-size:13px}
@media(max-width:720px){.control-stack{display:flex;flex-direction:column}.chat-launch-toolbar,.chat-launch-toolbar .btn{width:100%}}

/* Floating in-page chat. Default OUTER dimensions 240×320px; drag the header,
 * resize from the bottom-right grip. Clicking the site outside does NOT close it.
 * No backdrop so the station controls remain available for debugging. */
.chat-float{position:fixed;z-index:1000;display:flex;flex-direction:column;width:240px;height:320px;
  min-width:160px;min-height:180px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);
  background:#102136;border:1px solid #5a819d;border-radius:11px;
  box-shadow:0 24px 75px #0009,0 0 0 1px #0e3852;overflow:hidden}
.chat-float[hidden]{display:none!important}
.chat-float:focus-visible{outline:2px solid #67e8fa;outline-offset:3px}
.chat-float-titlebar{min-height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:5px;padding:5px 7px 5px 11px;background:#1b354e;border-bottom:1px solid #365875;
  cursor:grab;user-select:none;touch-action:none}
.chat-float-titlebar:active{cursor:grabbing}
.chat-float-titlebar strong{font-size:13px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-float-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.chat-float-actions button{border:1px solid #4c718b;background:#264862;color:#e5f6ff;padding:6px;border-radius:6px;font-size:11px;min-height:30px}
.chat-float-actions #chatClose{background:#8f3548;border-color:#b35a69;color:white;font-weight:750}
.chat-float-surface.phone{width:100%;height:auto;flex:1 1 auto;min-width:0;min-height:0;max-width:none;max-height:none;
  border:0;border-radius:0;background:#0e1f32;overflow:hidden}
.chat-float-surface .phoneheader{min-height:30px;padding:5px 8px}
.chat-float-surface .phoneheader .title{font-size:12px}
.chat-float-surface .indicator{font-size:10px;max-width:55%}
.chat-float-surface .messages{padding:9px;gap:7px;min-height:0}
.chat-float-surface .bubble{padding:8px 10px;font-size:13px;max-width:95%;border-radius:10px}
.chat-float-surface .empty-note{font-size:12px;padding:8px;line-height:1.45}
.chat-float-surface .composer{padding:6px 28px 6px 6px;gap:5px;flex:0 0 auto}
.chat-float-surface .composer input{min-height:33px;padding:7px 8px;border-radius:7px;font-size:14px}
.chat-float-surface .composer button{min-height:33px;padding:5px 9px;border-radius:7px;font-size:14px}
.chat-float-surface .keyboard{padding:5px 28px 5px 5px;gap:4px;flex:0 0 auto;max-height:54%;overflow:auto}
.chat-float-surface .key{height:26px;font-size:11px;padding:0 1px}
.chat-float-surface.typing .keyboard{display:flex}
.chat-float-resize{position:absolute;right:0;bottom:0;width:24px;height:24px;display:flex;align-items:end;
  justify-content:end;padding:3px;color:#98dfec;font-size:17px;cursor:nwse-resize;touch-action:none;
  user-select:none;z-index:2}
@media(max-width:720px){.chat-float-surface.phone{height:auto;min-height:0}.chat-float-surface .messages{padding:9px}
  .chat-float-surface .bubble{font-size:13px}.chat-float-surface .composer{padding:6px 28px 6px 6px}
  .chat-float-surface .composer button{min-height:33px}.chat-float-surface .keyboard{max-height:52%}}
@media (hover:none),(pointer:coarse){.chat-float-surface .composer input{touch-action:manipulation}}


/* v0.4.3 UI correction: station is a regular responsive control panel.
 * Chat is NOT a graphic on the dashboard; it is a movable 240×320 window. */
@media (min-width: 721px) {
  .topbar-inner, .shell { width: min(calc(100% - 48px), 1180px); }
  .control-stack { gap: 20px; }
  .chat-launch-toolbar { margin-bottom: 2px; }
  .chat-launch-toolbar .btn { min-width: 236px; }
  .card { box-shadow: 0 12px 30px #00000022; }
}
.page-intro { align-items: center; }
.page-intro .lead { max-width: 72ch; }
.chat-launch-toolbar .btn { box-shadow: 0 5px 16px #0a80993d; }
.detail-card[open] { border-color: #446a86; }
.button-row .btn:disabled { box-shadow: none; }

/* The floating chat has only ONE title bar and no redundant nested header. */
.chat-float {
  border-color:#4f7897;
  border-radius: 12px;
  background:#0d1d2f;
  box-shadow:0 25px 65px #000a,0 0 0 1px #0d263c;
}
.chat-float-titlebar {
  min-height:44px;
  padding:6px 7px 6px 10px;
  background:#1c3852;
  border-bottom-color:#39607a;
}
.chat-float-heading { display:flex;flex-direction:column;min-width:0;gap:2px; }
.chat-float-heading strong { color:#f3faff;font-size:13px;line-height:1.05; }
.chat-float-heading .indicator {
  max-width:135px;display:block;text-align:left;font-size:10px;
  color:#9dc5db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-float-titlebar #chatClose {
  flex:0 0 auto;min-height:30px;padding:5px 9px;
  border:1px solid #a35362;border-radius:7px;
  background:#793448;color:#fff;font-size:11px;font-weight:700;
}
.chat-float-titlebar #chatClose:hover { background:#a3485c; }
.chat-float-surface.phone { background:#0d1e30; }
.chat-float-surface .messages { padding:9px;gap:7px; }
.chat-float-surface .bubble { font-size:13px;line-height:1.42; }
.chat-float-surface .composer {
  padding:6px 24px 6px 7px;
  gap:5px;align-items:center;
  background:#19324a;border-top:1px solid #34546e;
}
.chat-float-surface .composer input {
  flex:1;min-width:0;min-height:34px;padding:7px 8px;
  color:#edf8ff;background:#0a1c2e;
  border:1px solid #52718a;border-radius:7px;
  font-size:14px;
}
.chat-float-surface .composer input:focus { border-color:#43bbd4; }
.chat-float-surface .composer button {
  flex:0 0 32px;min-height:34px;padding:4px;
  border-radius:7px;background:#148daa;
}
/* Automatic RU/EN/123 keyboard. Visible on phones as well as computers.
 * Never close on focus loss, external click, or a "Done" button. */
.chat-float-surface .keyboard {
  flex:none;gap:4px;padding:7px 7px 10px;
  border-top:1px solid #36536c;background:#1b344b;
  max-height:60%;overflow:auto;
}
.chat-float-surface .keys { display:flex;gap:3px;justify-content:center; }
.chat-float-surface .key {
  flex:1 1 0;min-width:0;height:28px;padding:0 1px;
  border:1px solid #54728e;border-radius:5px;
  background:#35526d;color:#f2faff;
  font-size:12px;font-weight:650;line-height:1;
}
.chat-float-surface .key:hover { background:#436582; }
.chat-float-surface .keys-actions .key { font-size:11px;height:30px; }
.chat-float-surface .keys-actions .key-lang { flex:1.45; background:#1b7388; }
.chat-float-surface .keys-actions .key-mode { flex:1.1; background:#2c657a; }
.chat-float-surface .keys-actions .key-space { flex:2.35; }
.chat-float-surface .keys-actions .key-backspace { flex:.9; }
.chat-float-surface.typing .keyboard { display:flex; }
/* Touchscreens use the same on-screen keyboard as desktop; inputmode=none requests no system keyboard. */
@media (hover:none),(pointer:coarse) {
  .chat-float-surface.typing .keyboard { display:flex; }
}
@media (max-width: 420px) {
  .chat-float { max-width:calc(100vw - 12px); }
  .chat-float-surface .keyboard { padding-bottom:8px; }
}

/* Compact headers on phones keep the chat action and controls near the top. */
@media (max-width:720px) {
  .topbar-inner { min-height:68px; }
  .shell { padding-top:22px; }
  .page-intro { gap:13px;margin-bottom:20px; }
  .page-intro h1 { font-size:clamp(29px,7.8vw,35px);margin:6px 0 8px; }
  .page-intro .lead { font-size:14px;line-height:1.5; }
  .top-status { padding:12px 14px; }
  .chat-launch-toolbar .btn { min-height:49px; }
}