:root{
  --canvas:#f7f3ed;--surface:#fff;--text:#20201e;--muted:#716d68;--border:#d8d2ca;
  --skin:#b45f38;--human:#e8f0f7;--human-line:#9bcbe8;--action:#315e8a;
  --lisa:#e8ffe9;--mint:#a8ffb0;--green:#315440;
  --company:#fff8dc;--company-line:#d9bd65;
  --viewport-height:100dvh
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--canvas)}
body{margin:0;color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,textarea{font:inherit}button{color:inherit;touch-action:manipulation}[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.language-stage{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow-y:auto;background:rgba(32,32,30,.42)}
.language-card{width:min(550px,100%);padding:36px;border:1px solid var(--border);border-radius:34px;background:var(--canvas);box-shadow:0 18px 60px rgba(45,42,36,.14)}
.eyebrow{margin:0 0 12px;color:var(--green);font-size:15px;font-weight:800;letter-spacing:.06em}
.language-card h2{margin:0 0 28px;font-size:clamp(27px,5vw,36px);line-height:1.12}
.language-choices{display:grid;gap:8px}
.language-choices button{min-height:80px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:12px;padding:0 24px;background:transparent;color:var(--text);font-size:21px;font-weight:700;text-align:left}
.language-choices button:hover,.language-choices button:focus-visible,.language-choices button.selected{background:var(--human);color:var(--action);outline:none}

.app{width:min(920px,100%);height:100vh;height:100svh;height:var(--viewport-height);min-height:0;margin:auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));background:var(--canvas)}
header{min-width:0;border-bottom:1px solid var(--border);padding:4px 0 12px;background:color-mix(in srgb,var(--canvas) 96%,transparent)}
h1{margin:0 0 8px;color:var(--green);font-size:clamp(20px,3.5vw,28px);line-height:1.12;font-weight:900;letter-spacing:.02em;overflow-wrap:anywhere}
header>a{display:block;width:fit-content;color:var(--skin);font-size:11px;line-height:1.2;font-weight:750;letter-spacing:.06em;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.header-tools{display:flex;align-items:center;gap:clamp(26px,4vw,40px);min-height:32px;margin-top:14px;overflow:visible}
.header-tools button{flex:none;min-height:32px;border:0;background:transparent;padding:0;font-size:11px;line-height:32px;font-weight:750;white-space:nowrap;cursor:pointer}
.header-tools button:focus-visible{outline:2px solid var(--human-line);outline-offset:3px;border-radius:3px}
.language-control{position:relative;display:flex;align-items:center}
#language-button.active{color:#659b73;box-shadow:inset 0 -2px 0 var(--mint)}
.language-menu{position:absolute;top:38px;left:-14px;z-index:30;display:grid;min-width:132px;padding:7px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 12px 30px rgba(45,42,36,.14)}
.language-menu button{width:100%;text-align:left}
.language-menu button.active{color:var(--green)}
#voice-button.active{color:var(--action)}
.status{padding:8px 4px 6px;color:var(--muted);font-size:12px}
.messages{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:18px;padding:14px 0 24px;scrollbar-gutter:stable}
.message{max-width:82%;padding:16px 18px;border:2px solid;border-radius:24px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.45}
.message.human{align-self:flex-end;background:var(--human);border-color:var(--human-line);border-radius:24px 24px 5px 24px}
.message.lisa{align-self:flex-start;background:var(--lisa);border-color:var(--mint);border-radius:24px 24px 24px 5px}
.message.company_ai{align-self:flex-start;margin-left:24px;background:var(--company);border-color:var(--company-line);border-radius:24px 24px 24px 5px}
.sender{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:800}
.attribution{margin-top:12px;color:var(--green);font-size:11px;font-weight:750}
.no-room{grid-row:3;overflow-y:auto;margin:clamp(32px,8vh,88px) auto;max-width:620px;padding:24px;border:2px solid var(--mint);border-radius:24px;background:var(--lisa);font-size:17px;line-height:1.48}
.new-message-button{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));z-index:14;transform:translateX(-50%);min-height:38px;padding:0 15px;border:1px solid var(--human-line);border-radius:999px;background:var(--human);color:var(--action);box-shadow:0 6px 20px rgba(49,94,138,.14);font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap}
.reply-helper{display:grid;gap:3px;margin:0 0 10px;padding:10px 12px;border:1px solid #78ad87;border-radius:12px;background:var(--lisa);color:var(--green)}
.reply-helper[hidden]{display:none}
.reply-helper strong{font-size:13px;line-height:1.25}
.reply-helper span{color:var(--muted);font-size:11px;line-height:1.35}
.reply-helper.error{border-color:#d9a29d;background:#fff0ee;color:#a74843}
.reply-helper.error span:empty{display:none}
.composer{min-width:0;display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);align-items:end;gap:8px;background:var(--canvas);border-top:1px solid var(--border);padding:10px 0 max(14px,env(safe-area-inset-bottom))}
#name{width:100%;min-width:0;height:44px;border:1px solid var(--border);border-radius:15px;padding:0 14px;margin:0;outline:none;background:var(--surface)}
#name:focus,textarea:focus{border-color:var(--action)}
.send-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:8px}
textarea{width:100%;min-width:0;resize:none;min-height:44px;max-height:132px;overflow-y:auto;border:1px solid var(--border);border-radius:15px;padding:10px 16px;outline:none;line-height:1.4;background:var(--surface)}
.send{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:15px;background:var(--human);color:var(--action);font:400 18px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transform:none}
.send>span{display:block;transform:translate(-1px,1px)}
.send:disabled{opacity:.5}

@media(max-width:600px){
  .language-card{padding:28px 22px;border-radius:28px}.language-choices button{min-height:68px;padding:0 18px;font-size:19px}
  .app{padding-top:max(16px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .message{max-width:92%;padding:15px 17px}.message.company_ai{margin-left:16px}
  .composer{grid-template-columns:1fr}.composer #name{width:min(190px,50%)}
}
@media(min-width:900px) and (max-width:1399px){.app{width:min(1000px,100%);padding-left:max(42px,env(safe-area-inset-left));padding-right:max(42px,env(safe-area-inset-right))}.message{max-width:78%}}
@media(orientation:landscape) and (max-height:600px){.language-stage{place-items:start center}.language-card{margin-block:12px}.language-choices{grid-template-columns:1fr 1fr}.language-choices button{min-height:62px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Recovery-code room admin */
.admin-layer { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(32,32,30,.48); backdrop-filter:blur(8px); }
.admin-layer[hidden] { display:none; }
.admin-card { width:min(100%,620px); max-height:min(86vh,760px); overflow:auto; padding:28px; border:1px solid var(--border); border-radius:28px; background:var(--canvas); box-shadow:0 18px 60px rgba(45,42,36,.18); }
.admin-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.admin-heading h2 { margin:0; color:var(--text); font-size:26px; }
.admin-heading button { width:40px; height:40px; border:0; border-radius:12px; background:#eee9e2; font-size:25px; cursor:pointer; }
.admin-unlock,.admin-controls { display:grid; gap:12px; }
.admin-company-identity { margin:0; color:var(--green); font-size:13px; font-weight:850; letter-spacing:.04em; overflow-wrap:anywhere; }
.admin-responsibility { margin:0 0 4px; padding:12px 13px; border:1px solid rgba(180,95,56,.38); border-radius:12px; background:#fff9f2; color:#654638; font-size:13px; line-height:1.45; }
.admin-card label,.admin-card h3 { margin:0; color:var(--ai-text); font-size:13px; font-weight:800; }
.admin-card input { width:100%; min-height:44px; padding:0 13px; border:1px solid var(--border); border-radius:13px; background:white; color:var(--text); font-size:16px; }
.admin-card button { min-height:42px; padding:0 14px; border:1px solid var(--border); border-radius:13px; background:white; color:var(--text); font-weight:750; cursor:pointer; }
.admin-card .admin-primary { border-color:var(--ai-text); background:var(--ai-text); color:white; }
.admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.admin-status-row { padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.admin-participants { display:grid; gap:8px; }
.admin-participant { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:13px; background:white; }
.admin-participant span { display:block; color:var(--muted); font-size:12px; }
.admin-card .admin-danger { border-color:#bd6c63; color:#9d4037; }
.admin-notice { min-height:20px; margin:14px 0 0; color:#9d4037; font-size:13px; }
@media(max-width:600px){.admin-card{padding:22px 18px;border-radius:22px}.admin-row{grid-template-columns:1fr}.admin-row button{width:100%}}