:root { color-scheme:dark; --bg:#0a1116; --panel:#111c22; --panel2:#17252b; --line:rgba(177,209,207,.13); --text:#edf4f0; --muted:#a3b5b2; --green:#9fe0b5; --teal:#79bcb2; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; min-height:100%; background:var(--bg); }
body { margin:0; padding-bottom:85px; color:var(--text); background:radial-gradient(ellipse at 50% 0,#183029 0,transparent 45%),var(--bg); font-size:14px; line-height:1.5; }
.client-bottom-nav { position:fixed; z-index:8; bottom:0; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100%,530px); min-height:72px; padding:7px 12px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(10,17,22,.96); backdrop-filter:blur(20px); }
.client-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:48px; color:var(--muted); text-decoration:none; font-size:11px; }
.client-bottom-nav a span:first-child { font-size:19px; }
.client-bottom-nav a.active { color:var(--green); }
a { color:inherit; }
.sandbox-page { width:min(100% - 32px,920px); margin:0 auto; padding:25px 0 36px; }
.sandbox-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; color:#e8f3eb; text-decoration:none; font-size:18px; font-weight:740; letter-spacing:-.04em; }
.wordmark-mark { display:grid; width:35px; height:35px; place-items:center; border:1px solid rgba(143,217,168,.36); border-radius:12px; color:#c4f0ce; background:rgba(94,165,115,.16); }
.sandbox-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(130,200,149,.2); border-radius:999px; color:#c2d8c4; background:rgba(76,127,87,.12); font-size:12px; }
.sandbox-dot { width:7px; height:7px; border-radius:50%; background:#9bd9a6; box-shadow:0 0 10px rgba(155,217,166,.55); }
.preview-intro { max-width:620px; margin:38px auto 24px; text-align:center; }
.eyebrow { margin:0 0 8px; color:#8fc2a0; font-size:12px; font-weight:750; letter-spacing:.15em; }
.preview-intro h1 { margin:0; color:#eef5ef; font-size:clamp(24px,5vw,32px); line-height:1.15; letter-spacing:-.045em; }
.preview-intro > p:last-child { margin:12px 0 0; color:#afc0b8; font-size:14px; }
.persona-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; width:min(100%,520px); margin:0 auto 17px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(17,28,34,.88); box-shadow:0 12px 34px rgba(0,0,0,.18); }
.persona-copy { display:grid; grid-column:1 / -1; min-width:0; gap:2px; overflow-wrap:anywhere; }
.persona-copy strong { color:#e2eee7; font-size:13px; }
.persona-copy span { color:#a0b2ac; font-size:12px; }
.persona-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; gap:4px; padding:3px; border:1px solid rgba(174,208,198,.1); border-radius:10px; background:#0c161b; }
.persona-button,.refresh-button { min-height:36px; border:1px solid transparent; border-radius:8px; color:#b5c5bf; background:transparent; font:inherit; font-size:12px; cursor:pointer; }
.persona-button { min-width:0; padding:6px 8px; line-height:1.4; overflow-wrap:anywhere; }
.persona-button.active { border-color:rgba(132,203,153,.2); color:#d5f0db; background:rgba(89,152,103,.18); }
.refresh-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border-color:rgba(163,202,190,.15); color:#c6d5ce; background:rgba(255,255,255,.025); white-space:nowrap; }
.refresh-button:hover:not(:disabled),.persona-button:hover:not(:disabled) { filter:brightness(1.15); }
.refresh-button:disabled,.persona-button:disabled { opacity:.55; cursor:wait; }
.chat-frame-wrap { display:flex; justify-content:center; }
.phone-frame { display:flex; flex-direction:column; width:min(100%,420px); height:min(680px,72vh); min-height:480px; overflow:hidden; border:1px solid rgba(184,215,205,.2); border-radius:24px; background:#0e191e; box-shadow:0 28px 85px rgba(0,0,0,.43),inset 0 0 0 4px rgba(255,255,255,.018); }
.chat-header { display:flex; flex-shrink:0; align-items:center; gap:12px; min-height:66px; padding:10px 15px; border-bottom:1px solid rgba(181,211,204,.09); background:#142126; }
.chat-back { width:20px; color:#9dc1b5; font-size:29px; line-height:1; text-decoration:none; }
.bot-avatar { display:grid; flex:0 0 39px; width:39px; height:39px; place-items:center; border:1px solid rgba(148,220,167,.26); border-radius:50%; color:#d0f2d5; background:linear-gradient(145deg,#3d7157,#203d35); font-size:16px; font-weight:760; }
.chat-title { display:grid; flex:1; min-width:0; gap:1px; overflow-wrap:anywhere; }
.chat-title strong { color:#f0f5f2; font-size:15px; font-weight:680; }
.chat-title span { color:#9bb0a8; font-size:12px; }
.chat-menu { width:30px; height:34px; border:0; color:#88a69b; background:transparent; font-size:22px; }
.chat-history { position:relative; display:flex; flex:1; min-height:0; flex-direction:column; gap:12px; overflow-y:auto; padding:16px 13px 18px; background-color:#0c171c; background-image:radial-gradient(rgba(139,178,164,.055) 1px,transparent 1px); background-size:19px 19px; }
.chat-date { align-self:center; padding:4px 10px; border:1px solid rgba(174,211,198,.08); border-radius:999px; color:#b3c4be; background:rgba(51,70,71,.75); font-size:12px; }
.chat-loading,.chat-empty,.chat-error { align-self:center; max-width:90%; margin:16px auto; color:#b0c1ba; text-align:center; font-size:13px; }
.chat-error { color:#f0b6ae; }
.message-list { display:grid; flex-shrink:0; min-width:0; gap:10px; }
.message-bubble { justify-self:start; width:fit-content; max-width:91%; padding:10px 12px 7px; border:1px solid rgba(139,199,158,.12); border-radius:5px 15px 15px 15px; color:#e0e9e3; background:#1a2a2d; box-shadow:0 3px 10px rgba(0,0,0,.1); }
.message-bubble.from-user { justify-self:end; border-color:rgba(121,188,178,.16); border-radius:15px 5px 15px 15px; background:#203c38; }
.message-sender { display:block; margin-bottom:4px; color:#a8d9b5; font-size:12px; font-weight:650; }
.message-bubble.from-user .message-sender { color:#a4d7ce; }
.message-bubble p { margin:0; font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-top:6px; color:#9eb4aa; font-size:12px; }
.message-kind { color:#a6ceaf; }
.chat-composer { display:flex; flex-shrink:0; align-items:flex-end; gap:10px; min-height:62px; padding:8px 12px; border-top:1px solid rgba(181,211,204,.09); background:#142126; }
.chat-composer textarea { flex:1; width:100%; min-width:0; min-height:42px; max-height:120px; resize:vertical; padding:9px 12px; border:1px solid rgba(175,207,199,.1); border-radius:14px; color:#e4eee7; background:#0e1a1f; font:inherit; font-size:13px; line-height:1.4; }
.chat-composer textarea::placeholder { color:#829790; }
.composer-actions { display:grid; justify-items:center; gap:2px; color:#8ba098; font-size:12px; }
.composer-send { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid rgba(127,197,147,.22); border-radius:50%; color:#123022; background:#9fe0b5; font-size:16px; cursor:pointer; }
.composer-send:disabled { opacity:.43; cursor:not-allowed; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.support-hint { flex-shrink:0; margin:0; padding:0 13px 9px; color:#9dafaa; background:#142126; font-size:12px; line-height:1.45; }
.phone-caption { flex-shrink:0; padding:4px 10px 8px; color:#71847e; background:#142126; font-size:12px; text-align:center; }
.outside-note { display:flex; align-items:flex-start; gap:10px; width:min(100%,520px); margin:17px auto 0; padding:12px 14px; border:1px solid rgba(196,167,108,.2); border-radius:12px; color:#d0c19a; background:rgba(124,95,39,.09); }
.note-icon { display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border:1px solid rgba(214,185,126,.4); border-radius:50%; font-size:12px; font-weight:700; }
.outside-note p { margin:0; color:#bfbaa7; font-size:12px; line-height:1.55; }
.outside-note strong { color:#eadbb2; }
.back-to-cabinet { display:block; width:max-content; max-width:100%; margin:18px auto 0; color:#9fd3ab; font-size:13px; text-decoration:none; }
.back-to-cabinet:hover { color:#c7efce; text-decoration:underline; }
@media (max-width:560px) {
  .sandbox-page { width:min(100% - 24px,420px); padding-top:16px; }
  .preview-intro { margin:27px auto 18px; }
  .preview-intro > p:last-child { font-size:13px; }
  .persona-control { grid-template-columns:minmax(0,1fr); gap:9px; padding:10px; }
  .phone-frame { height:min(640px,67vh); min-height:440px; border-radius:19px; }
}
@media (max-width:360px) {
  .sandbox-page { width:calc(100% - 18px); }
  .sandbox-chip { padding:7px 8px; font-size:12px; }
  .persona-copy span { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.chat-header-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.language-control select { min-height:32px; padding:0 8px; color:#c8d9ce; background:#10211d; border:1px solid rgba(130,200,149,.2); border-radius:9px; font:inherit; font-size:12px; }
.language-error { max-width:170px; color:#e6a89d; font-size:11px; }
@media (max-width:560px) { .chat-header-tools { gap:6px; }.language-control select { min-height:30px; padding:0 6px; font-size:11px; }.language-error { display:none; } }

.chat-footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; }
.chat-footer-links .back-to-cabinet { margin:18px 0 0; }