:root { color-scheme:dark; --bg:#0a1116; --panel:#111c22; --panel2:#17252b; --line:rgba(177,185,209,.13); --text:#edf0f4; --muted:#a3a8b5; --green:#9fbee0; --teal:#798cbc; 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,#182030 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:#e8edf3; 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,178,217,.36); border-radius:12px; color:#c4daf0; background:rgba(94,128,165,.16); }
.sandbox-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(130,165,200,.2); border-radius:999px; color:#c2ced8; background:rgba(76,102,127,.12); font-size:12px; }
.sandbox-dot { width:7px; height:7px; border-radius:50%; background:#9bbcd9; box-shadow:0 0 10px rgba(155,188,217,.55); }
.preview-intro { max-width:620px; margin:38px auto 24px; text-align:center; }
.eyebrow { margin:0 0 8px; color:#8fa7c2; font-size:12px; font-weight:750; letter-spacing:.15em; }
.preview-intro h1 { margin:0; color:#eef2f5; font-size:clamp(24px,5vw,32px); line-height:1.15; letter-spacing:-.045em; }
.preview-intro > p:last-child { margin:12px 0 0; color:#afb6c0; 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:#e2e7ee; font-size:13px; }
.persona-copy span { color:#a0a6b2; 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,186,208,.1); border-radius:10px; background:#0c161b; }
.persona-button,.refresh-button { min-height:36px; border:1px solid transparent; border-radius:8px; color:#b5bbc5; 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,166,203,.2); color:#d5e3f0; background:rgba(89,121,152,.18); }
.refresh-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border-color:rgba(163,176,202,.15); color:#c6ccd5; 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,195,215,.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,191,211,.09); background:#142126; }
.chat-back { width:20px; color:#9daac1; 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,184,220,.26); border-radius:50%; color:#d0e2f2; background:linear-gradient(145deg,#3d5271,#202a3d); font-size:16px; font-weight:760; }
.chat-title { display:grid; flex:1; min-width:0; gap:1px; overflow-wrap:anywhere; }
.chat-title strong { color:#f0f2f5; font-size:15px; font-weight:680; }
.chat-title span { color:#9ba3b0; font-size:12px; }
.chat-menu { width:30px; height:34px; border:0; color:#8893a6; 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,153,178,.055) 1px,transparent 1px); background-size:19px 19px; }
.chat-date { align-self:center; padding:4px 10px; border:1px solid rgba(174,187,211,.08); border-radius:999px; color:#b3b9c4; 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:#b0b7c1; 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,168,199,.12); border-radius:5px 15px 15px 15px; color:#e0e4e9; background:#1a2a2d; box-shadow:0 3px 10px rgba(0,0,0,.1); }
.message-bubble.from-user { justify-self:end; border-color:rgba(121,140,188,.16); border-radius:15px 5px 15px 15px; background:#20283c; }
.message-sender { display:block; margin-bottom:4px; color:#a8c0d9; font-size:12px; font-weight:650; }
.message-bubble.from-user .message-sender { color:#a4b3d7; }
.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:#9ea7b4; font-size:12px; }
.message-kind { color:#a6bace; }
.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,191,211,.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,185,207,.1); border-radius:14px; color:#e4e9ee; background:#0e1a1f; font:inherit; font-size:13px; line-height:1.4; }
.chat-composer textarea::placeholder { color:#828997; }
.composer-actions { display:grid; justify-items:center; gap:2px; color:#8b93a0; font-size:12px; }
.composer-send { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid rgba(127,161,197,.22); border-radius:50%; color:#121e30; background:#9fbee0; 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:#9da3af; background:#142126; font-size:12px; line-height:1.45; }
.phone-caption { flex-shrink:0; padding:4px 10px 8px; color:#717884; 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:#9fb9d3; font-size:13px; text-decoration:none; }
.back-to-cabinet:hover { color:#c7dcef; 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:#c8d0d9; background:#101521; border:1px solid rgba(130,165,200,.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; }

/* KRAIT NET identity */
.brand-mark{display:block;width:38px;height:38px;object-fit:contain;border:0;border-radius:0;transform:none;flex:0 0 auto}
.bot-avatar img{display:block;width:100%;height:100%;object-fit:contain}
button[disabled][data-i18n="Ссылка на бота появится перед запуском"]{opacity:.65;cursor:not-allowed}
@media(max-width:520px){.brand-mark{width:32px;height:32px}}@media(max-width:360px){.brand-mark{width:28px;height:28px}}