/* ============================================================
   Pulsar AI · by Exo — design system v2
   Mobile-first, dark aurora theme
   ============================================================ */

:root {
  color-scheme: dark;
  --bg0: #05060a;
  --bg1: #0a0c13;
  --bg2: #0f121a;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .07);
  --panel-solid: #141824;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  /* Scaling font sizes */
  --text: #ffffff;
  --text-2: #c5c9d6;
  --text-3: #8a90a4;
  --font-size: clamp(14px, 1vw + 12px, 16px);
  --font-ui: clamp(12px, 0.8vw + 10px, 14px);
  --brand-1: #5f4def;
  --brand-2: #9b4cf7;
  --brand-3: #f54a9d;
  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  --green: #2fe6a7;
  --green-dim: rgba(47, 230, 167, .14);
  --red: #ff5c6c;
  --red-dim: rgba(255, 92, 108, .12);
  --amber: #ffcf5c;
  --amber-dim: rgba(255, 207, 92, .14);
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 20px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(109, 92, 255, .28);
  --glow-brand: 0 8px 30px rgba(124, 92, 255, .45);
  --grad-brand: conic-gradient(from 210deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-1));
  /* themeable tokens (override per [data-theme]) */
  --selection-bg: rgba(109, 92, 255, .35);
  --grid-ink: rgba(255, 255, 255, .028);
  --aurora-1: rgba(109, 92, 255, .14);
  --aurora-2: rgba(168, 85, 247, .12);
  --aurora-3: rgba(236, 72, 153, .08);
  --aurora-b1: rgba(109, 92, 255, .16);
  --aurora-b2: rgba(168, 85, 247, .14);
  --aurora-b3: rgba(236, 72, 153, .10);
  --skin-bg: rgba(17, 20, 30, .72);
  --side-a: rgba(14, 17, 26, .92);
  --side-b: rgba(8, 10, 16, .96);
  --head-a: rgba(8, 10, 16, .9);
  --head-b: rgba(6, 8, 13, .72);
  --composer-a: rgba(5, 6, 10, .85);
  --input-bg: rgba(10, 12, 19, .6);
  --composer-bg: rgba(255, 255, 255, .07);
  --toast-a: rgba(24, 28, 42, .94);
  --toast-b: rgba(14, 17, 26, .94);
  --code-bg: rgba(4, 6, 10, .7);
  --code-fg: #dbe0f5;
  --code-head: rgba(255, 255, 255, .03);
  --terminal-bg: rgba(4, 6, 10, .8);
  --terminal-fg: #d8ddf1;
  --inline-code-bg: rgba(0, 0, 0, .35);
  --inline-code-fg: #cdd4ff;
  --bubble-ai-grad: linear-gradient(180deg, rgba(168, 85, 247, .08), rgba(255, 255, 255, .035) 30%);
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Space Grotesk', 'Inter', var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dur: .15s;
  --ease: cubic-bezier(.3, .8, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  font-feature-settings: "cv02", "cv03", "cv11", "ss01";
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

img { max-width: 100%; }

::selection { background: var(--selection-bg); }

/* ---------- Aurora background ---------- */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--aurora-1), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, var(--aurora-2), transparent 60%),
    radial-gradient(700px 460px at 50% 120%, var(--aurora-3), transparent 60%);
}

.bg-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--grid-ink) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
}

/* ---------- Glass skin ---------- */
.skin {
  background: var(--skin-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 13px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 22px rgba(120, 90, 255, .4);
}

.brand-mark.sm { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; }

.brand-name { font: 700 21px/1 var(--display); letter-spacing: -.03em; }

.brand-by { display: block; font: 500 10px/1.4 var(--font); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

/* ---------- Generic buttons ---------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), opacity var(--dur), border-color var(--dur);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 24px rgba(120, 90, 255, .35);
}

.btn-primary:hover { box-shadow: 0 10px 30px rgba(120, 90, 255, .5); transform: translateY(-1px); }

.btn-primary:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-ghost { background: var(--panel); border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }

.btn-danger { background: var(--red-dim); border-color: rgba(255, 92, 108, .25); color: var(--red); }
.btn-danger:hover { background: rgba(255, 92, 108, .2); }

.btn-success { background: var(--green-dim); border-color: rgba(47, 230, 167, .25); color: var(--green); }
.btn-success:hover { background: rgba(47, 230, 167, .22); }

.btn-block { width: 100%; }

.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

.icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-grid;
  place-items: center;
  color: var(--text-2);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.icon-btn:hover { background: var(--panel-2); color: var(--text); }

.icon-btn svg { width: 20px; height: 20px; }

/* ============================================================
   AUTH
   ============================================================ */
.view { min-height: 100vh; min-height: 100dvh; }

#view-auth {
  display: grid;
  place-items: center;
  padding: 24px 16px calc(24px + var(--safe-b));
}

.auth-card { width: min(420px, 100%); padding: clamp(24px, 5vw, 40px); }

.auth-card .brand { margin-bottom: 28px; }

.auth-head { margin-bottom: 22px; }
.auth-head h1 { font: 700 25px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.auth-head p { color: var(--text-3); font-size: 14px; }

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 4px;
  margin-bottom: 22px;
}

.seg button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--dur);
}

.seg button.active { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(120, 90, 255, .3); }

.field {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 7px;
  margin-left: 2px;
}

.field input {
  width: 100%;
  padding: 13px 15px;
  background: var(--input-bg);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.field input:focus {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(109, 92, 255, .22);
}

.field input::placeholder { color: var(--text-3); }

.form-error { color: var(--red); font-size: 13px; font-weight: 500; min-height: 18px; margin: 4px 0 10px; }

.auth-switch { text-align: center; margin-top: 18px; color: var(--text-3); font-size: 13px; }

.auth-switch button { background: none; border: none; color: var(--brand-2); font-weight: 600; padding: 0 0 0 4px; }

.auth-switch button:hover { text-decoration: underline; }

/* ============================================================
   APP SHELL
   ============================================================ */
#view-app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 288px;
  min-width: 288px;
  height: 100%;
  background: linear-gradient(180deg, var(--side-a), var(--side-b));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  z-index: 40;
}

.side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; }

.side-head .icon-btn { display: none; }

.btn-new {
  margin: 4px 14px 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all var(--dur);
}

.btn-new:hover { border-color: rgba(109, 92, 255, .5); background: rgba(109, 92, 255, .12); }

.btn-new::before { content: '+'; font-size: 20px; line-height: 1; font-weight: 400; color: var(--brand-2); }

.side-label { padding: 10px 18px 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

.chat-list { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: background var(--dur), color var(--dur);
}

.chat-item:hover { background: var(--panel); color: var(--text); }

.chat-item.active { background: rgba(109, 92, 255, .14); color: var(--text); border-color: rgba(109, 92, 255, .25); }

.chat-item .dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--brand-2); opacity: .85; }

.chat-item:not(.active) .dot { background: var(--text-3); }

.chat-item .del {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) scale(.6);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 92, 108, .15);
  color: var(--red);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: all var(--dur);
}

.chat-item:hover .del, .chat-item.active .del { opacity: 1; transform: translateY(-50%) scale(1); }

.chat-item .del:hover { background: rgba(255, 92, 108, .28); }

.side-foot { padding: 12px 14px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); }

.quota { margin-bottom: 12px; }

.quota-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--text-3); margin-bottom: 7px; }

.quota-top b { color: var(--text-2); font-weight: 600; }

.quota-track { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }

.quota-fill { height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width .5s var(--ease); }

.quota-fill.warn { background: linear-gradient(90deg, var(--amber), #ff984f); }

.quota-fill.danger { background: linear-gradient(90deg, var(--red), #ff4860); }

.side-links { display: flex; gap: 6px; margin-bottom: 12px; }

.side-links a {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--dur);
  text-decoration: none;
}

.side-links a:hover { color: var(--text); border-color: var(--line-2); background: var(--panel-2); }

.btn-user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
  margin-bottom: 8px;
  transition: background var(--dur);
}

.btn-user:hover { background: var(--panel-2); }

.avatar-sm { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--grad); overflow: hidden; font-size: 15px; }

.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

.user-meta { flex: 1; min-width: 0; }

.user-meta b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-meta small { font-size: 11px; color: var(--text-3); }

.badge-pro { font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 7px; letter-spacing: .06em; background: var(--grad); color: #fff; }

.btn-logout { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(255, 92, 108, .2); background: var(--red-dim); color: var(--red); font-weight: 600; font-size: 13px; transition: background var(--dur); }

.btn-logout:hover { background: rgba(255, 92, 108, .22); }

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  z-index: 39;
  opacity: 0;
  transition: opacity var(--dur);
}

.backdrop.show { opacity: 1; }

/* ---------- Chat main ---------- */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px;
  padding-top: calc(10px + var(--safe-t));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--head-a), var(--head-b));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 20;
}

.chat-head .icon-btn { display: none; }

.chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }

.chat-title strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-2);
  background: rgba(168, 85, 247, .12);
  border: 1px solid rgba(168, 85, 247, .2);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.head-actions { display: flex; align-items: center; gap: 4px; }

.head-actions .avatar-btn { width: 34px; height: 34px; border-radius: 11px; }

/* ---------- Chat scroll ---------- */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#messages { display: flex; flex-direction: column; gap: 14px; max-width: 860px; width: 100%; margin: 0 auto; }

.msg { display: flex; gap: 11px; animation: msgIn .28s var(--ease); }

@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }

.msg.user { flex-direction: row-reverse; align-self: flex-end; }

.msg-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  align-self: flex-start;
}

.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.msg.user .msg-avatar { background: var(--grad); color: #fff; }
.msg.assistant .msg-avatar { background: rgba(168, 85, 247, .16); color: var(--brand-2); }

.msg-body { flex: 1; min-width: 0; max-width: min(78%, 640px); }

.msg.user .msg-body { margin-left: auto; }

.bubble {
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.62;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.msg.user .bubble {
  background: var(--grad);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 22px rgba(120, 90, 255, .28);
}

.msg.assistant .bubble {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  white-space: normal;
}

.msg.assistant .bubble.error { background: var(--red-dim); border-color: rgba(255, 92, 108, .3); color: #ffb3ba; }

.bubble :first-child { margin-top: 0; }
.bubble :last-child { margin-bottom: 0; }

.bubble p { margin: 0 0 10px; }
.bubble p:empty { display: none; }

.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
  font-family: var(--display);
  margin: 16px 0 8px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.bubble h1 { font-size: 19px; }
.bubble h2 { font-size: 17px; }
.bubble h3, .bubble h4 { font-size: 15px; }

.bubble ul, .bubble ol { margin: 0 0 10px; padding-left: 22px; }

.bubble li { margin: 4px 0; }

.bubble blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--brand-2);
  background: rgba(168, 85, 247, .08);
  border-radius: 0 10px 10px 0;
  color: var(--text-2);
}

.bubble a { color: #9ca5ff; text-decoration: underline; text-underline-offset: 3px; }

.bubble code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--inline-code-bg);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 7px;
  color: var(--inline-code-fg);
}

.bubble hr { border: none; border-top: 1px solid var(--line-2); margin: 14px 0; }

.bubble table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .94em; }

.bubble th, .bubble td { border: 1px solid var(--line-2); padding: 8px 10px; text-align: left; }

.bubble th { background: var(--panel); font-weight: 600; }

.tool-status-box {
  margin-bottom: 8px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  font-size: 12px;
  overflow: hidden;
}
.tool-status-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-2);
  font-weight: 500;
  list-style: none;
}
.tool-status-summary::-webkit-details-marker { display: none; }
.tool-status-summary::marker { content: ''; }
.tool-status-lines {
  padding: 0 12px 8px;
  max-height: 200px;
  overflow-y: auto;
}
.tool-status-line {
  padding: 2px 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.4;
  border-top: 1px solid var(--line-2);
}
.tool-status-line:first-child { border-top: none; }
.tool-spin {
  width: 12px;
  height: 12px;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand-2);
  border-radius: 50%;
  animation: toolspin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes toolspin { to { transform: rotate(360deg); } }

.cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--brand-2);
  margin-left: 2px;
  border-radius: 2px;
  animation: blink .85s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* Code blocks */
.codeblock {
  position: relative;
  margin: 12px 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--code-bg);
}

.codeblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--code-head);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.copy-code {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  transition: all var(--dur);
}

.copy-code:hover { background: var(--panel-2); color: var(--text); }

.test-html {
  border: none;
  background: var(--accent, #5b8cff);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 7px;
  margin-left: 8px;
  cursor: pointer;
  transition: all var(--dur);
}
.test-html:hover { filter: brightness(1.08); }

.html-preview {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.html-modal-open { overflow: hidden; }
.html-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.html-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}
.html-modal-box {
  position: relative;
  width: min(1100px, 96vw);
  height: min(820px, 92vh);
  background: var(--bg, #fff);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
}
.html-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--code-head, #131722);
}
.html-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}
.html-modal-close {
  border: none;
  background: transparent;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--dur);
}
.html-modal-close:hover { background: var(--panel-2, rgba(255,255,255,.08)); color: var(--text); }
.html-modal-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.html-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.html-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--code-head, #131722);
  display: flex;
  justify-content: flex-end;
}
.html-modal-foot .html-modal-close {
  border: 1px solid var(--line-2);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 640px) {
  .html-modal { padding: 10px; }
  .html-modal-box { width: 100vw; height: 94vh; border-radius: 12px; }
}

.codeblock pre { padding: 13px 15px; overflow-x: auto; }

.codeblock code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-fg);
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}

.hl-code .hl-k { color: #c586c0; font-weight: 600; }
.hl-code .hl-s { color: #ce9178; }
.hl-code .hl-n { color: #b5cea8; }
.hl-code .hl-f { color: #dcdcaa; }
.hl-code .hl-c { color: #6a9955; font-style: italic; }
.hl-code .hl-u { color: #9cdcfe; }
.hl-code .hl-x { color: var(--code-fg); }
html[data-theme="light"] .hl-code .hl-k { color: #af00db; }
html[data-theme="light"] .hl-code .hl-s { color: #a31515; }
html[data-theme="light"] .hl-code .hl-n { color: #098658; }
html[data-theme="light"] .hl-code .hl-f { color: #795e26; }
html[data-theme="light"] .hl-code .hl-c { color: #008000; }
html[data-theme="light"] .hl-code .hl-u { color: #0000ff; }

/* Message actions (copy / regenerate) */
.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  opacity: 0;
  transition: opacity var(--dur);
}

.msg:hover .msg-actions, .msg.streaming .msg-actions { opacity: 1; }

.msg-actions button {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  transition: all var(--dur);
}

.msg-actions button:hover { background: var(--panel-2); color: var(--text); }

.msg-actions button svg { width: 15px; height: 15px; }

/* ---------- Empty state ---------- */
.empty { margin: auto; text-align: center; padding: 30px 10px; max-width: 560px; }

.orb {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: var(--grad);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 16px 44px rgba(120, 90, 255, .45);
  animation: floaty 5s ease-in-out infinite;
}

.orb::before, .orb::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 30px;
  border: 1px solid rgba(168, 85, 247, .35);
  animation: ring 4.5s ease-out infinite;
}

.orb::after { animation-delay: 1.2s; }

.orb-core { font: 700 26px var(--display); color: #fff; }

@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

@keyframes ring { 0% { transform: scale(.75); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }

.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--brand-2); text-transform: uppercase; margin-bottom: 10px; }

.empty h2 { font: 700 clamp(22px, 5vw, 30px) var(--display); letter-spacing: -.02em; margin-bottom: 8px; }

.empty > p { color: var(--text-3); font-size: 14px; margin-bottom: 22px; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.chips button {
  padding: 10px 16px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--dur);
}

.chips button:hover { border-color: rgba(168, 85, 247, .5); background: rgba(168, 85, 247, .12); color: var(--text); }

/* ---------- Composer ---------- */
.composer-area {
  padding: 10px 14px calc(12px + var(--safe-b));
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, var(--composer-a), transparent);
}

.composer-wrap { max-width: 860px; margin: 0 auto; }

.quota-warn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: var(--amber-dim);
  border: 1px solid rgba(255, 207, 92, .25);
  color: var(--amber);
  font-size: 13px;
}

.quota-warn b { color: #ffe3a3; }

.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: 18px;
  background: var(--composer-bg);
  border: 1px solid var(--line-2);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}

.composer:focus-within {
  border-color: rgba(109, 92, 255, .6);
  box-shadow: 0 0 0 4px rgba(109, 92, 255, .15), 0 12px 30px rgba(0, 0, 0, .3);
  background: rgba(255, 255, 255, .06);
}

.composer textarea {
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  max-height: 160px;
  padding: 7px 0;
}

.composer textarea::placeholder { color: var(--text-3); }

.btn-send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 13px;
  border: none;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(120, 90, 255, .4);
  transition: transform var(--dur), opacity var(--dur), box-shadow var(--dur);
}

.btn-send:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(120, 90, 255, .55); }
.btn-send:active { transform: scale(.94); }
.btn-send:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-send.stop { background: var(--red-dim); border: 1px solid rgba(255, 92, 108, .4); color: var(--red); box-shadow: none; }

.btn-send svg { width: 19px; height: 19px; }

.btn-mic {
  background: none; border: 1px solid var(--line); color: var(--text-2);
  cursor: pointer; padding: 8px; border-radius: 50%; display: flex;
  align-items: center; transition: all .2s; flex-shrink: 0;
}
.btn-mic:hover { color: var(--accent); border-color: var(--accent); background: var(--bg3); }
.btn-mic.recording {
  color: var(--red); border-color: var(--red); background: rgba(255,92,108,.15);
  animation: pulse-mic 1s ease-in-out infinite;
}
@keyframes pulse-mic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,108,.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,92,108,0); }
}

.composer-hint { text-align: center; font-size: 11px; color: var(--text-3); margin-top: 8px; }

.btn-attach {
  background: none; border: none; color: var(--text-2); cursor: pointer;
  padding: 6px; border-radius: 8px; display: flex; align-items: center;
  transition: color .15s, background .15s; flex-shrink: 0;
}
.btn-attach:hover { color: var(--accent); background: var(--bg3); }
.attach-preview {
  display: flex; gap: 6px; padding: 6px 0; flex-wrap: wrap;
}
.attach-preview .att-item {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg2);
}
.attach-preview .att-item img {
  width: 60px; height: 60px; object-fit: cover; display: block;
}
.attach-preview .att-item .att-name {
  font-size: 10px; padding: 2px 4px; max-width: 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-2); text-align: center;
}
.attach-preview .att-item .att-remove {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(0,0,0,.7); color: #fff;
  border: none; font-size: 10px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; line-height: 1;
}

/* ============================================================
   MODALS / SHEETS
   ============================================================ */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn var(--dur);
}

@keyframes fadeIn { from { opacity: 0; } }

.modal-card {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--r-lg);
  animation: popIn .28s var(--ease);
}

.modal-card.wide { width: min(820px, 100%); max-height: 90dvh; overflow-y: auto; }

.modal-card.sm { width: min(360px, 100%); text-align: center; }

@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.modal-card h3 { font: 700 20px var(--display); margin-bottom: 6px; }

.modal-card > p { color: var(--text-3); font-size: 13.5px; margin-bottom: 20px; }

.modal-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 18px;
  display: grid;
  place-items: center;
}

.modal-icon svg { width: 28px; height: 28px; }

.modal-icon.tg { background: rgba(0, 136, 204, .16); color: #38bdf8; }
.modal-icon.ok { background: var(--green-dim); color: var(--green); }

.row { display: flex; gap: 10px; margin-top: 18px; }
.row > * { flex: 1; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }

.plan-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 16px;
  text-align: center;
  background: var(--panel);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--dur);
}

.plan-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--panel-2); }

.plan-card.hot { border-color: rgba(109, 92, 255, .55); background: rgba(109, 92, 255, .09); box-shadow: 0 10px 34px rgba(109, 92, 255, .2); }

.plan-pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: .08em; background: var(--grad); color: #fff; padding: 4px 12px; border-radius: 99px; }

.plan-icon { width: 46px; height: 46px; margin: 4px auto 10px; border-radius: 14px; display: grid; place-items: center; }

.plan-icon.free { background: rgba(126, 132, 150, .16); color: var(--text-3); }
.plan-icon.prem { background: rgba(109, 92, 255, .16); color: var(--brand-1); }
.plan-icon.pro { background: var(--amber-dim); color: var(--amber); }

.plan-card h4 { font: 700 16px var(--display); }

.plan-price { font-size: 13px; color: var(--text-3); margin-bottom: 12px; }

.plan-card ul { list-style: none; text-align: left; font-size: 12.5px; color: var(--text-2); margin: 0 0 16px; flex: 1; }

.plan-card li { padding: 5px 0 5px 20px; position: relative; }

.plan-card li::before { content: '✓'; position: absolute; left: 2px; color: var(--green); font-weight: 800; }

.plan-btn { width: 100%; padding: 10px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-weight: 600; font-size: 13px; transition: all var(--dur); }

.plan-btn:hover { background: var(--panel-2); color: var(--text); }

.plan-btn.buy { background: var(--grad); border: none; color: #fff; box-shadow: 0 6px 18px rgba(120, 90, 255, .35); }

.plan-btn.curr { opacity: .6; cursor: default; }

/* Avatar grid */
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0; }

.avatar-cell {
  aspect-ratio: 1;
  border-radius: 13px;
  border: 2px solid transparent;
  background: var(--panel);
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: all var(--dur);
}

.avatar-cell:hover { border-color: var(--line-2); transform: scale(1.07); background: var(--panel-2); }

.avatar-cell.selected { border-color: var(--brand-1); background: rgba(109, 92, 255, .2); box-shadow: 0 0 0 3px rgba(109, 92, 255, .25); }

.upload-avatar {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 13px;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--dur);
}

.upload-avatar:hover { border-color: var(--brand-1); color: var(--text); }

/* ---------- Profile sheet ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
}

.sheet-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 8, .5); backdrop-filter: blur(4px); animation: fadeIn var(--dur); }

.sheet-panel {
  position: relative;
  width: min(400px, 100%);
  height: 100%;
  height: 100dvh;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--line);
  padding: max(18px, var(--safe-t)) 22px calc(22px + var(--safe-b));
  overflow-y: auto;
  animation: slideIn var(--ease);
  display: flex;
  flex-direction: column;
}

@keyframes slideIn { from { transform: translateX(60px); opacity: 0; } }

.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }

.sheet-head h3 { font: 700 19px var(--display); }

.prof-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  border-radius: 26px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font: 700 34px var(--display);
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 12px 32px rgba(120, 90, 255, .4);
}

.prof-avatar img { width: 100%; height: 100%; object-fit: cover; }

.prof-avatar::after { content: '✎'; position: absolute; inset: auto 0 0 0; text-align: center; font-size: 14px; padding: 5px 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity var(--dur); }

.prof-avatar:hover::after { opacity: 1; }

.prof-name { text-align: center; font: 700 21px var(--display); margin-bottom: 2px; }

.prof-email { text-align: center; color: var(--text-3); font-size: 13px; margin-bottom: 6px; }

.prof-plan-pill { display: inline-flex; margin: 6px auto 20px; padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .05em; background: var(--grad); color: #fff; }

.sheet-quota { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 20px; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 13px 8px; text-align: center; }

.stat b { display: block; font: 700 20px var(--display); margin-bottom: 3px; }

.stat span { font-size: 10.5px; color: var(--text-3); line-height: 1.3; display: block; }

.sheet-plan-list { margin-bottom: 20px; }

.sheet-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 9px;
}

.sheet-plan-row .plan-icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; }

.sheet-plan-row .pm { flex: 1; min-width: 0; }

.sheet-plan-row .pm b { display: block; font-size: 13.5px; }

.sheet-plan-row .pm small { color: var(--text-3); font-size: 11.5px; }

.sheet-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }

/* ============================================================
   TOASTS
   ============================================================ */
.toasts {
  position: fixed;
  top: calc(14px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(94vw, 420px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(20, 24, 36, .92);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toastIn .3s var(--ease);
  pointer-events: auto;
}

.toast.out { animation: toastOut .3s var(--ease) forwards; }

.toast.ok { border-color: rgba(47, 230, 167, .35); }
.toast.ok::before { content: '✓'; color: var(--green); font-weight: 800; }

.toast.err { border-color: rgba(255, 92, 108, .4); }
.toast.err::before { content: '!'; color: var(--red); font-weight: 800; }

.toast.info::before { content: 'i'; color: var(--brand-2); font-weight: 800; }

@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ============================================================
   EXTRA PAGES (wiki / vpn / docs)
   ============================================================ */
.page { min-height: 100vh; min-height: 100dvh; padding: 20px 16px calc(30px + var(--safe-b)); }

.page-inner { max-width: 980px; margin: 0 auto; }

.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(26px, 5vw, 44px); }

.doc { max-width: 980px; margin: 0 auto; }

.doc .eyebrow { margin-bottom: 12px; }

.doc h1 { font: 800 clamp(30px, 6vw, 50px)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 14px; }

.doc h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.doc .lead { color: var(--text-3); font-size: 15px; line-height: 1.7; max-width: 660px; margin-bottom: 34px; }

.doc h2 { font: 700 21px var(--display); margin: 38px 0 14px; padding-top: 10px; }

.doc h3 { font-size: 15px; margin: 26px 0 9px; }

.doc p { font-size: 14px; line-height: 1.75; color: var(--text-2); margin-bottom: 12px; }

.doc code { font-family: var(--mono); color: #a5b0ff; background: rgba(109, 92, 255, .12); padding: 2px 7px; border-radius: 7px; font-size: .9em; }

.doc pre.terminal {
  background: var(--terminal-bg);
  border: 1px solid var(--line-2);
  border-radius: 15px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 14px 0;
  color: var(--terminal-fg);
  font: 12.5px/1.7 var(--mono);
}

.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }

.route {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px;
  background: var(--panel);
  transition: border-color var(--dur), background var(--dur);
}

.route:hover { background: var(--panel-2); border-color: var(--line-2); }

.route b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #cfd6ff; }

.route span { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 4px; }

.callout {
  border-left: 3px solid var(--brand-2);
  background: rgba(168, 85, 247, .08);
  padding: 12px 16px;
  border-radius: 0 14px 14px 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 18px 0;
}

.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dur);
}

.back-pill:hover { background: var(--panel-2); color: var(--text); border-color: rgba(109, 92, 255, .4); text-decoration: none; }

/* VPN mini card */
.vpn-card { max-width: 560px; margin: 0 auto; }

.vpn-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; background: var(--green-dim); border: 1px solid rgba(47, 230, 167, .3); color: var(--green); font-size: 12.5px; font-weight: 700; margin: 18px 0 8px; }

.vpn-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(47, 230, 167, .6); animation: pulse 2s infinite; }

@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47, 230, 167, 0); } }

.vpn-label { font-size: 12px; color: var(--text-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 7px; }

.vpn-url { background: var(--terminal-bg); border: 1px solid var(--line-2); border-radius: 13px; padding: 13px 15px; color: #b5ecde; font: 12.5px var(--mono); word-break: break-all; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-104%);
    transition: transform .32s var(--ease);
    box-shadow: 24px 0 60px rgba(0, 0, 0, .5);
    border-right: none;
  }

  .sidebar.open { transform: translateX(0); }

  .side-head .icon-btn { display: inline-grid; }

  .chat-head .icon-btn { display: inline-grid; }

  .chat-head { padding: calc(10px + var(--safe-t)) 12px 10px; }

  .chat-scroll { padding: 14px 12px 18px; }

  .msg-body { max-width: 88%; }

  .msg-actions { opacity: 1; }

  .route-grid { grid-template-columns: 1fr; }

  .avatar-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .orb::before, .orb::after { display: none; }
}

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

/* ============================================================
   DESIGN v3 · polish (Pulsar AI by Exo)
   ============================================================ */

/* ---------- Accessibility: visible focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Living aurora ---------- */
.bg-aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(46% 40% at 28% 30%, var(--aurora-b1), transparent 62%),
    radial-gradient(38% 34% at 74% 20%, var(--aurora-b2), transparent 62%),
    radial-gradient(42% 42% at 55% 78%, var(--aurora-b3), transparent 64%);
  filter: blur(30px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.07); }
  100% { transform: translate3d(-1%, 3%, 0) rotate(-1deg) scale(1.02); }
}

/* ---------- Brand ---------- */
.brand-name {
  background: linear-gradient(120deg, #fff 30%, #cfd2ff 55%, #b7a4ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-mark { position: relative; overflow: hidden; animation: markGlow 4.5s ease-in-out infinite; }

.brand-mark::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  transform: translateX(-60%);
  animation: markSheen 5.5s ease-in-out infinite;
}

@keyframes markGlow { 0%, 100% { box-shadow: 0 6px 22px rgba(120, 90, 255, .4); } 50% { box-shadow: 0 8px 30px rgba(168, 85, 247, .6); } }

@keyframes markSheen {
  0%, 55% { transform: translateX(-60%); }
  78%, 100% { transform: translateX(60%); }
}

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; }

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}

.btn-primary:hover::before { transform: translateX(120%); }

.btn-ghost:hover { border-color: rgba(168, 85, 247, .45); box-shadow: 0 0 0 3px rgba(168, 85, 247, .09); }

.btn-danger { transition: transform var(--dur), background var(--dur), box-shadow var(--dur); }
.btn-danger:hover { box-shadow: 0 8px 22px rgba(255, 92, 108, .22); }

.seg button.active { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(120, 90, 255, .38); }

.field input:focus {
  border-color: var(--brand-1);
  box-shadow: var(--ring);
}

/* ---------- Sidebar ---------- */
.chat-item { animation: msgIn .3s var(--ease) both; }

.chat-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(168, 85, 247, .7);
}

.btn-new::before,
.chat-item .dot { transition: transform var(--dur), opacity var(--dur); }
.btn-new:hover::before { transform: scale(1.25); }
.chat-item:hover .dot, .chat-item.active .dot { transform: scale(1.2); }

.side-links a { position: relative; }
.side-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 1px;
  background: var(--grad);
  transition: left var(--dur), right var(--dur);
}
.side-links a:hover::after { left: 20%; right: 20%; }

/* ---------- Chat header ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; }
.tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(47, 230, 167, .65);
  animation: pulse 2.2s infinite;
}

.chat-head { background: linear-gradient(180deg, var(--head-a), var(--head-b)); }

/* ---------- Bubbles ---------- */
.msg.assistant .bubble {
  background-image: var(--bubble-ai-grad);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.msg.assistant .bubble:hover {
  border-color: rgba(168, 85, 247, .38);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(168, 85, 247, .06);
}

.msg.user .bubble {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%), var(--grad);
  box-shadow: 0 6px 22px rgba(120, 90, 255, .28), 0 1px 0 rgba(255, 255, 255, .08) inset;
}

.msg-actions button { transition: transform var(--dur), background var(--dur), color var(--dur); }
.msg-actions button:active { transform: scale(.86); }

.cursor { background: var(--grad); background-size: 200% 200%; animation: blink .85s steps(2) infinite, gradShift 3s ease infinite; }

@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Empty state ---------- */
.orb {
  animation: floaty 5s ease-in-out infinite, hueBreath 9s ease-in-out infinite;
}

@keyframes hueBreath {
  0%, 100% { background-position: 0% 0%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 100%; filter: hue-rotate(18deg); }
}

.eyebrow::after {
  content: ' ✦';
  font-size: 10px;
  opacity: .85;
}

/* ---------- Composer ---------- */
.composer:focus-within { animation: focusGlow 2.6s ease-in-out infinite; }

@keyframes focusGlow {
  0%, 100% { border-color: rgba(109, 92, 255, .55); }
  50% { border-color: rgba(236, 72, 153, .55); }
}

.btn-send { position: relative; overflow: hidden; }
.btn-send::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
  transform: translateX(-130%);
}
.btn-send:hover::after { animation: sendSheen .7s var(--ease); }

@keyframes sendSheen { to { transform: translateX(130%); } }

/* ---------- Modals / plans ---------- */
.modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .65), transparent);
}

.plan-card.hot { animation: hotGlow 3.4s ease-in-out infinite; }

@keyframes hotGlow {
  0%, 100% { box-shadow: 0 10px 34px rgba(109, 92, 255, .2); border-color: rgba(109, 92, 255, .55); }
  50% { box-shadow: 0 14px 44px rgba(236, 72, 153, .26); border-color: rgba(168, 85, 247, .7); }
}

.plan-btn { transition: transform var(--dur), background var(--dur), box-shadow var(--dur); }
.plan-btn.buy:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(120, 90, 255, .45); }

/* ---------- Toasts ---------- */
.toast {
  border-left: 3px solid var(--brand-2);
  background: linear-gradient(180deg, var(--toast-a), var(--toast-b));
}

.toast.ok { border-left-color: var(--green); box-shadow: 0 12px 34px rgba(47, 230, 167, .16); }
.toast.err { border-left-color: var(--red); box-shadow: 0 12px 34px rgba(255, 92, 108, .14); }

/* ---------- Code blocks ---------- */
.codeblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  opacity: .55;
}

.codeblock-head::before {
  content: '● ● ●';
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .22);
  font-size: 9px;
  margin-right: 8px;
}

.copy-code { transition: transform var(--dur), background var(--dur), color var(--dur); }
.copy-code:active { transform: scale(.92); }

/* ---------- Responsiveness ---------- */
:root {
  /* ... existing vars ... */
  --font-size: clamp(14px, 0.9vw + 12px, 16px);
  --font-ui: clamp(12px, 0.7vw + 10px, 13px);
}
body { font-size: var(--font-size); }
.msg-content, .msg-body { font-size: var(--font-size); }
.side-label, .btn-side-action, .model-select { font-size: var(--font-ui); }

/* ---------- Thinking Animation ---------- */
@keyframes pulse {
  0%, 100% { opacity: 1; border-color: var(--brand-1); }
  50% { opacity: .6; border-color: var(--brand-3); }
}
.think-block.is-thinking {
  animation: pulse 1.5s infinite ease-in-out;
}
.think-block summary::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2M12 22v-2M2 12h2M22 12h-2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") no-repeat center;
  animation: spin 3s linear infinite;
  margin-right: 6px;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.think-block[open] summary::before { animation: none; }

.route { position: relative; overflow: hidden; transition: transform var(--dur), border-color var(--dur), background var(--dur); }
.route::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 45%, rgba(168, 85, 247, .10) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.route:hover { transform: translateY(-2px); }
.route:hover::after { transform: translateX(130%); }

.back-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(109, 92, 255, .18); }

.vpn-url { box-shadow: inset 0 0 0 1px rgba(47, 230, 167, .08); }

/* ---------- Scrollbars (leaner) ---------- */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(168, 85, 247, .35), rgba(109, 92, 255, .35)); }

/* ============================================================
   DESIGN v4 · themes (Pulsar AI by Exo)
   <html data-theme="aurora | ocean | midnight | light">
   ============================================================ */

/* ---------- Theme picker (settings) ---------- */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }

.theme-card {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur), background var(--dur);
}

.theme-card:hover { transform: translateY(-2px); border-color: var(--brand-2); background: var(--panel-2); }

.theme-card.active { border-color: var(--brand-1); box-shadow: var(--ring); }

.theme-preview {
  height: 62px;
  border-radius: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.tp-dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

.theme-card b { display: block; font-size: 13.5px; }
.theme-card small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; line-height: 1.4; }

.theme-card .tic {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: none;
  place-items: center;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.theme-card.active .tic { display: grid; }

/* ---------- Theme: ОКЕАН (deep blue / cyan) ---------- */
html[data-theme="ocean"] {
  color-scheme: dark;
  --bg0: #03121a;
  --bg1: #06202c;
  --bg2: #0a2c3c;
  --panel: rgba(125, 211, 252, .05);
  --panel-2: rgba(125, 211, 252, .10);
  --panel-solid: #0b2233;
  --line: rgba(125, 211, 252, .10);
  --line-2: rgba(125, 211, 252, .20);
  --text: #eaf7ff;
  --text-2: #a8c4d6;
  --text-3: #6b92a8;
  --brand-1: #06b6d4;
  --brand-2: #38bdf8;
  --brand-3: #6366f1;
  --green: #2fe6c0;
  --amber: #ffd66b;
  --red: #ff7a7f;
  --selection-bg: rgba(56, 189, 248, .30);
  --ring: 0 0 0 3px rgba(56, 189, 248, .26);
  --aurora-1: rgba(6, 182, 212, .17);
  --aurora-2: rgba(56, 189, 248, .12);
  --aurora-3: rgba(99, 102, 241, .10);
  --aurora-b1: rgba(6, 182, 212, .20);
  --aurora-b2: rgba(56, 189, 248, .15);
  --aurora-b3: rgba(99, 102, 241, .12);
  --skin-bg: rgba(7, 26, 38, .72);
  --side-a: rgba(6, 26, 38, .93);
  --side-b: rgba(3, 15, 24, .97);
  --head-a: rgba(4, 18, 27, .92);
  --head-b: rgba(3, 12, 20, .74);
  --input-bg: rgba(3, 18, 26, .65);
  --bubble-ai-grad: linear-gradient(180deg, rgba(56, 189, 248, .10), rgba(255, 255, 255, .03) 30%);
}

html[data-theme="ocean"] .tag { color: var(--brand-2); background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .25); }
html[data-theme="ocean"] .plan-pop { background: var(--grad); }

/* ---------- Theme: ПОЛНОЧЬ (neutral dark) ---------- */
html[data-theme="midnight"] {
  color-scheme: dark;
  --bg0: #08070d;
  --bg1: #0d0c15;
  --bg2: #14131f;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .075);
  --panel-solid: #131222;
  --line: rgba(196, 181, 253, .09);
  --line-2: rgba(196, 181, 253, .18);
  --text: #eeedf6;
  --text-2: #b6b4c9;
  --text-3: #7a7890;
  --brand-1: #8b5cf6;
  --brand-2: #a78bfa;
  --brand-3: #c084fc;
  --selection-bg: rgba(139, 92, 246, .32);
  --ring: 0 0 0 3px rgba(139, 92, 246, .26);
  --aurora-1: rgba(139, 92, 246, .15);
  --aurora-2: rgba(129, 140, 248, .11);
  --aurora-3: rgba(192, 132, 252, .08);
  --aurora-b1: rgba(139, 92, 246, .17);
  --aurora-b2: rgba(129, 140, 248, .13);
  --aurora-b3: rgba(192, 132, 252, .09);
  --skin-bg: rgba(20, 19, 32, .72);
  --side-a: rgba(17, 16, 28, .93);
  --side-b: rgba(10, 9, 17, .97);
  --head-a: rgba(12, 11, 22, .92);
  --head-b: rgba(8, 7, 16, .74);
  --input-bg: rgba(15, 14, 26, .6);
  --bubble-ai-grad: linear-gradient(180deg, rgba(139, 92, 246, .09), rgba(255, 255, 255, .03) 30%);
}

/* ---------- Theme: СВЕТЛАЯ (ChatGPT-style, light) ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg0: #f7f7f8;
  --bg1: #ffffff;
  --bg2: #edeef2;
  --panel: rgba(15, 23, 42, .045);
  --panel-2: rgba(15, 23, 42, .07);
  --panel-solid: #ffffff;
  --line: rgba(15, 23, 42, .09);
  --line-2: rgba(15, 23, 42, .20);
  --text: #1b2330;
  --text-2: #4a5261;
  --text-3: #8b93a3;
  --brand-1: #7c3aed;
  --brand-2: #a855f7;
  --brand-3: #ec4899;
  --green: #0ea97c;
  --green-dim: rgba(14, 169, 124, .12);
  --red: #e11d48;
  --red-dim: rgba(225, 29, 72, .08);
  --amber: #b45309;
  --amber-dim: rgba(180, 83, 9, .10);
  --shadow: 0 12px 34px rgba(15, 23, 42, .14);
  --ring: 0 0 0 3px rgba(124, 58, 237, .16);
  --aurora-1: rgba(124, 58, 237, .07);
  --aurora-2: rgba(168, 85, 247, .05);
  --aurora-3: rgba(236, 72, 153, .04);
  --aurora-b1: rgba(124, 58, 237, .05);
  --aurora-b2: rgba(168, 85, 247, .04);
  --aurora-b3: rgba(236, 72, 153, .03);
  --grid-ink: rgba(15, 23, 42, .022);
  --skin-bg: rgba(255, 255, 255, .82);
  --side-a: rgba(255, 255, 255, .96);
  --side-b: rgba(244, 245, 248, .98);
  --head-a: rgba(255, 255, 255, .94);
  --head-b: rgba(249, 250, 251, .88);
  --composer-a: rgba(255, 255, 255, .92);
  --input-bg: #ffffff;
  --composer-bg: rgba(15, 23, 42, .05);
  --toast-a: rgba(255, 255, 255, .97);
  --toast-b: rgba(248, 249, 252, .97);
  --code-bg: #f0f1f6;
  --code-fg: #24292e;
  --code-head: rgba(15, 23, 42, .05);
  --terminal-bg: #f0f1f6;
  --terminal-fg: #374151;
  --inline-code-bg: rgba(124, 58, 237, .10);
  --inline-code-fg: #6d28d9;
  --selection-bg: rgba(124, 58, 237, .22);
  --bubble-ai-grad: none;
}

html[data-theme="light"] .brand-name {
  background: linear-gradient(120deg, #1b2330 28%, #6d5cff 65%, #a855f7 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] .msg.assistant .bubble { background: #ffffff; }

html[data-theme="light"] .bubble a { color: #6d28d9; }

html[data-theme="light"] .bubble blockquote { background: rgba(168, 85, 247, .07); }

html[data-theme="light"] .msg.assistant .bubble.codeblock { background: var(--code-bg); }

html[data-theme="light"] .codeblock code { color: #24292e; }
html[data-theme="light"] .doc pre.terminal { color: #374151; }
html[data-theme="light"] .vpn-url { color: #0f766e; }

html[data-theme="light"] .chat-item.active { background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .30); }

html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-send { box-shadow: 0 6px 18px rgba(124, 58, 237, .30); }

html[data-theme="light"] .brand-mark { box-shadow: 0 4px 16px rgba(124, 58, 237, .35); }

html[data-theme="light"] .plan-card.hot { box-shadow: 0 8px 26px rgba(124, 58, 237, .18); }

html[data-theme="light"] .chat-item .dot { background: var(--brand-2); }
html[data-theme="light"] .chat-item:not(.active) .dot { background: var(--text-3); }

/* ============================================================
   DESIGN v5 · liquid glass (default: dark, ChatGPT-style)
   ============================================================ */
@media (min-width: 861px) {
  .skin { backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
}

.sidebar {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.chat-head {
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.composer-area {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.chat-item:hover,
.btn-new,
.btn-user,
.side-links a,
.chips button,
.avatar-cell,
.upload-avatar,
.theme-card,
.sheet-plan-row,
.quota-warn {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* glossy glass cards */
.skin,
.modal-card,
.sheet-quota,
.stat,
.plan-card,
.route {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .12);
}

html[data-theme="light"] .skin,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .sheet-quota,
html[data-theme="light"] .stat,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .route {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .03);
}

.plan-card, .stat, .route { transition: transform var(--dur), border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.plan-card:hover, .stat:hover, .route:hover { transform: translateY(-3px); }

/* default aurora: slightly more translucent glass */
html[data-theme="aurora"] {
  --side-a: rgba(13, 16, 25, .86);
  --side-b: rgba(7, 9, 15, .94);
  --skin-bg: rgba(16, 19, 29, .6);
  --composer-a: rgba(14, 17, 26, .84);
}

/* ============================================================
   DESIGN v6 · aurora нейтральный (белое + тёмное, как у GPT)
   ============================================================ */
html[data-theme="aurora"] {
  --bg0: #121316;
  --bg1: #17181c;
  --bg2: #1d1f24;
  --panel: rgba(255, 255, 255, .05);
  --panel-2: rgba(255, 255, 255, .08);
  --panel-solid: #1f2128;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .18);
  --text: #f2f3f5;
  --text-2: #b7bac3;
  --text-3: #868a94;
  --brand-1: #e4e5ea;
  --brand-2: #c9ccd6;
  --brand-3: #8f94a3;
  --grad: linear-gradient(135deg, #4a4f5c, #2a2d37 55%, #191b22);
  --green: #2fd0a0;
  --red: #ff7a85;
  --amber: #d9b36a;
  --selection-bg: rgba(138, 143, 160, .35);
  --ring: 0 0 0 3px rgba(201, 204, 214, .22);
  --aurora-1: rgba(255, 255, 255, .05);
  --aurora-2: rgba(255, 255, 255, .04);
  --aurora-3: rgba(255, 255, 255, .03);
  --aurora-b1: rgba(255, 255, 255, .05);
  --aurora-b2: rgba(255, 255, 255, .04);
  --aurora-b3: rgba(255, 255, 255, .03);
  --grid-ink: rgba(255, 255, 255, .024);
  --skin-bg: rgba(22, 24, 30, .68);
  --side-a: rgba(17, 19, 24, .9);
  --side-b: rgba(10, 12, 15, .96);
  --head-a: rgba(13, 15, 18, .9);
  --head-b: rgba(10, 12, 15, .76);
  --composer-a: rgba(13, 15, 18, .88);
  --input-bg: rgba(12, 13, 17, .7);
  --composer-bg: rgba(255, 255, 255, .06);
  --toast-a: rgba(30, 32, 40, .96);
  --toast-b: rgba(20, 22, 28, .96);
  --code-bg: #181a20;
  --code-fg: #dfe2ea;
  --code-head: rgba(255, 255, 255, .04);
  --terminal-bg: #181a20;
  --terminal-fg: #dfe2ea;
  --inline-code-bg: rgba(255, 255, 255, .09);
  --inline-code-fg: #d4d7e0;
  --bubble-ai-grad: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 30%);
}

html[data-theme="aurora"] .brand-mark,
html[data-theme="aurora"] .btn-primary,
html[data-theme="aurora"] .btn-send,
html[data-theme="aurora"] .orb {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

html[data-theme="aurora"] .brand-name {
  background: linear-gradient(120deg, #fff 30%, #b9bdc8 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="aurora"] .orb::before,
html[data-theme="aurora"] .orb::after { border-color: rgba(255, 255, 255, .12); }

html[data-theme="aurora"] .tag { color: var(--brand-2); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }

html[data-theme="aurora"] .chat-item.active { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); }

html[data-theme="aurora"] .chat-item.active::before { background: var(--grad); box-shadow: 0 0 12px rgba(255, 255, 255, .25); }

html[data-theme="aurora"] .btn-new:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }

html[data-theme="aurora"] .btn-ghost:hover { border-color: rgba(255, 255, 255, .22); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }

html[data-theme="aurora"] .chips button:hover,
html[data-theme="aurora"] .side-links a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: var(--text); }

html[data-theme="aurora"] .seg button.active { background: var(--grad); }

html[data-theme="aurora"] .plan-card.hot { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); animation: none; }

html[data-theme="aurora"] .plan-icon.prem,
html[data-theme="aurora"] .plan-icon.pro { background: rgba(255, 255, 255, .07); color: var(--brand-2); }

html[data-theme="aurora"] .modal-card::before,
html[data-theme="aurora"] .codeblock::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  opacity: 1;
}

html[data-theme="aurora"] .bubble a { color: #c9cdd9; }

html[data-theme="aurora"] .bubble blockquote { background: rgba(255, 255, 255, .05); border-left-color: rgba(255, 255, 255, .25); }

html[data-theme="aurora"] .doc code { color: #d4d7e0; background: rgba(255, 255, 255, .07); box-shadow: none; }

html[data-theme="aurora"] .callout { background: rgba(255, 255, 255, .05); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .25); }

html[data-theme="aurora"] .back-pill:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

html[data-theme="aurora"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .14)); }

/* ---------- затемнение подложек (v6) ---------- */
.backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-backdrop {
  background: rgba(4, 5, 8, .68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* ============ Pulsar VPN (UI) ============ */
.profile-vpn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text); cursor: pointer;
  text-align: left;
}
.profile-vpn:hover { border-color: var(--line-2); background: var(--panel-2); }
.profile-vpn svg { color: var(--brand-2); flex-shrink: 0; }
.profile-vpn .chev { margin-left: auto; color: var(--text-3); }

.vpn-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.vpn-chip {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.vpn-chip span { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.vpn-chip b { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vpn-server {
  margin-top: 10px; font-size: 12px; color: var(--text-2); line-height: 1.6;
  background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  word-break: break-all;
}
.vpn-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.vpn-state { margin-top: 14px; font-size: 13.5px; color: var(--text-2); }
.vpn-hint { margin-top: 12px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.vpn-body .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ============ размышления gpt-oss (thinking block) ============ */
.think-block {
  margin: 4px 0 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px dashed var(--line-2);
  border-left: 2px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--dur);
}
.think-block.thinking {
  border-color: var(--brand-1);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.think-block summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-ui); font-weight: 600; letter-spacing: .03em;
  color: var(--text-3); text-transform: uppercase;
  cursor: pointer; user-select: none; list-style: none;
}
.think-block summary::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2M12 22v-2M2 12h2M22 12h-2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") no-repeat center;
  animation: spin 3s linear infinite;
  margin-right: 6px;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.think-block summary::-webkit-details-marker { display: none; }
.think-block[open] summary::before { animation: none; }
.think-block[open] summary { margin-bottom: 6px; color: var(--text-2); }
.think-body {
  font-size: var(--font-ui); line-height: 1.55;
  color: var(--text-2); opacity: .85;
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.gen-image-wrap {
  margin: 8px 0; text-align: center;
}
.gen-image-wrap a { display: inline-block; position: relative; }
.gen-image-wrap img {
  max-width: 100%; border-radius: 12px; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.4); transition: transform .2s;
}
.gen-image-wrap img:hover { transform: scale(1.02); }
.gen-image-wrap::after {
  content: 'Нажми для просмотра'; display: block;
  font-size: 11px; color: var(--text-2); margin-top: 4px; opacity: .6;
}
.img-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; cursor: pointer;
}
.img-lightbox img {
  max-width: 95vw; max-height: 95vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.img-lightbox .lb-close {
  position: absolute; top: 16px; right: 20px;
  font-size: 32px; color: #fff; background: rgba(0,0,0,.5);
  border: none; border-radius: 50%; width: 48px; height: 48px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.img-lightbox .lb-download {
  position: absolute; bottom: 20px; right: 20px;
  padding: 10px 20px; background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-size: 14px;
  cursor: pointer; text-decoration: none;
}
.music-player-wrap {
  margin: 10px 0; border-radius: 14px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--line);
}
.music-now-playing { position: relative; }
.music-embed { width: 100%; position: relative; background: #000; }
.music-embed iframe { display: block; width: 100%; height: 200px; border-radius: 14px 14px 0 0; }
.music-thumb {
  width: 100%; height: 200px; background-size: cover; background-position: center;
  border-radius: 14px 14px 0 0; display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}
.music-thumb::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35);
  border-radius: 14px 14px 0 0;
}
.music-thumb-play {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none; font-size: 28px; color: #111;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: transform .15s, background .15s;
}
.music-thumb-play:hover { transform: scale(1.1); background: #fff; }
.music-info { padding: 10px 14px 6px; }
.music-title { font-weight: 600; font-size: 14px; color: var(--text-1); }
.music-channel { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.music-controls {
  display: flex; gap: 6px; padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.music-btn {
  flex: 1; padding: 8px 0; border: none; border-radius: 8px;
  background: var(--bg3); color: var(--text-1); font-size: 13px;
  cursor: pointer; transition: background .2s;
}
.music-btn:hover { background: var(--accent); color: #fff; }
.music-playlist {
  border-top: 1px solid var(--line); max-height: 180px; overflow-y: auto;
}
.music-track {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer; transition: background .15s;
  font-size: 13px; color: var(--text-1);
}
.music-track:hover { background: var(--bg3); }
.music-track.active { background: rgba(99,102,241,.15); color: var(--accent); }
.music-track-num { width: 22px; text-align: center; color: var(--text-2); flex-shrink: 0; }
.music-track.active .music-track-num { color: var(--accent); }
.music-track-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-dur { color: var(--text-2); flex-shrink: 0; }

/* ---------- Side actions (export, model) ---------- */
.side-actions {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 14px; border-top: 1px solid var(--line);
}
.btn-side-action {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-1); font-size: 12px; padding: 7px 10px; cursor: pointer;
  transition: background .15s, border-color .15s; text-align: left;
}
.btn-side-action:hover { background: var(--bg3); border-color: var(--brand-2); }
.model-select {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-1); font-size: 12px; padding: 7px 10px; cursor: pointer;
  width: 100%; appearance: auto;
}
.model-select:focus { border-color: var(--brand); outline: none; }

/* ============================================================
   DESIGN v7 · liquid fluid (Pulsar AI by Exo)
   Auto-scaling everywhere: fluid fonts, glass profile, cells that fit
   any viewport (360px -> UHD) without overflow or cropping.
   ============================================================ */

:root {
  --side-w: clamp(230px, 21vw, 304px);
  --msg-max: min(78%, 680px);
  --bubble-pad: clamp(11px, 1.2vw + 8px, 17px);
  --gutter: clamp(12px, 2.2vw, 26px);
  --r-fluid: clamp(13px, 1vw + 8px, 20px);
  --font-scale: clamp(13.5px, 0.9vw + 11px, 16px);
  --aspect-qr: 33px;
  --glass-hi: rgba(255, 255, 255, .09);
  --glass-lo: rgba(255, 255, 255, .02);
  --grad-border: linear-gradient(160deg, rgba(255,255,255,.5), rgba(168,85,247,.4) 38%, rgba(47,230,167,.16) 72%, rgba(109,92,255,.22));
}

/* ---------- fluid fonts everywhere ---------- */
body, .bubble, .msg-content, .msg-body, .field input, .auth-head p {
  font-size: var(--font-scale);
}
.btn, .chat-title strong { font-size: clamp(13px, 0.8vw + 11px, 15px); }
.bubble { font-size: calc(var(--font-scale) * .97); }

/* ---------- sidebar fits viewport height: heavy-chat-lists scroll, foot pinned ---------- */
.sidebar { width: var(--side-w); min-width: var(--side-w); }

/* ---------- chat column: gutters scale, messages never overflow ---------- */
.chat-scroll { padding: clamp(12px, 2vw, 22px) var(--gutter) clamp(16px, 3vh, 30px); }
#messages { max-width: min(880px, 100%); }
.composer-wrap { max-width: min(880px, 100%); }

/* ---------- message cells: flexible width, images fit ---------- */
.msg { max-width: 100%; }
.msg-body { flex: 1 1 60%; min-width: 0; max-width: var(--msg-max); }
.msg.user .msg-body { flex-grow: 0; width: fit-content; max-width: min(78%, 620px); }
.bubble { max-width: 100%; padding: var(--bubble-pad); border-radius: var(--r-fluid); }
.msg-avatar { width: clamp(30px, 3.4vw, 40px); height: clamp(30px, 3.4vw, 40px); min-width: clamp(30px, 3.4vw, 40px); border-radius: clamp(10px, 1.4vw, 14px); }

/* images, players, embeds scale to cell, never bleed */
.bubble img, .gen-image-wrap img, .music-embed iframe, .music-thumb { max-width: 100%; }
.gen-image-wrap { width: 100%; }
img, video, iframe { max-width: 100%; }

/* ---------- composer: buttons & field fit tiny screens ---------- */
.composer { padding: clamp(8px, 1.2vw, 11px) clamp(8px, 1.2vw, 11px) clamp(8px, 1.2vw, 11px) clamp(12px, 2vw, 18px); gap: clamp(6px, 1vw, 10px); }
.btn-send, .btn-attach, .btn-mic { flex: 0 0 auto; }
.composer textarea { min-width: 0; }
.composer-hint { font-size: clamp(10px, .6vw + 9px, 12px); }

/* ---------- head actions fit small width ---------- */
.chat-title strong { font-size: clamp(13px, 1.2vw, 16px); }
.head-actions { gap: clamp(2px, .6vw, 6px); }
.head-actions .icon-btn { width: clamp(34px, 4vw, 42px); height: clamp(34px, 4vw, 42px); min-width: clamp(34px, 4vw, 42px); }

/* ---------- auth card fluid ---------- */
.auth-card { width: min(100%, 460px); padding: clamp(20px, 4.5vw, 44px); border-radius: var(--r-fluid); margin-inline: auto; }
#view-auth { padding: clamp(12px, 3vw, 32px); }

/* ---------- liquid glass profile ---------- */
.sheet-panel {
  width: min(412px, 100%);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(168,85,247,.14), transparent 55%),
    linear-gradient(180deg, var(--side-a), var(--side-b));
  box-shadow: -30px 0 70px rgba(0, 0, 0, .5), inset 0 1px 0 var(--glass-hi);
}
.sheet-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--grad-border);
  opacity: .7;
  pointer-events: none;
}
.prof-avatar {
  width: clamp(72px, 12vw, 96px);
  height: clamp(72px, 12vw, 96px);
  border-radius: calc(clamp(72px, 12vw, 96px) / 3.2);
  font-size: clamp(28px, 5vw, 40px);
}
.stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 10px); }
.stats-row .stat { min-width: 0; text-align: center; }
.stat b { font-size: clamp(18px, 2.4vw, 24px); }
.stat span { font-size: clamp(10.5px, 1vw, 12.5px); line-height: 1.35; }

/* ---------- modals fluid, scroll inside ---------- */
.modal-root { padding: clamp(10px, 2.6vw, 28px); }
.modal-card { width: min(100%, 500px); max-height: 92dvh; overflow-y: auto; padding: clamp(18px, 3.4vw, 30px); border-radius: var(--r-fluid); }
.modal-card.wide { width: min(900px, 100%); }
.modal-card.sm { width: min(380px, 100%); }
.avatar-grid, .theme-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: clamp(8px, 1.4vw, 14px); }
.avatar-cell, .theme-card { min-width: 0; }
.theme-preview { height: clamp(52px, 7vw, 72px); }

/* ---------- plans grid auto-fit ---------- */
.plans { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------- vpn chips stack on tiny screens ---------- */
.vpn-chips { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.vpn-chip b, .vpn-chip span { white-space: normal; word-break: break-word; }

/* ---------- code / tables never overflow the bubble ---------- */
.bubble table { width: 100%; display: block; overflow-x: auto; }
code, pre { max-width: 100%; }
pre, .codeblock, .doc pre { overflow-x: auto; }

/* ---------- sheets & sidebars respect safe-areas everywhere ---------- */
.btn-user, .btn-logout, .btn-new, .composer-area { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); }

/* ---------- prefer reduced motion on liquid shimmer ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet-panel::before, .bg-aurora::before { animation: none; }
}

/* ============================================================
   DESIGN v7 theme polish · richer liquid light for glass edges
   ============================================================ */
.skin, .modal-card, .auth-card {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.sheet-panel { border: none; border-left: 1px solid var(--line); }
.skin:not(.sheet-panel)::after, .modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}
html[data-theme="light"] .skin:not(.sheet-panel)::after,
html[data-theme="light"] .modal-card::after,
html[data-theme="light"] .auth-card::after {
  background: linear-gradient(160deg, rgba(124,58,237,.4), rgba(15,23,42,.12) 55%, rgba(124,58,237,.2));
}

/* ---------- new theme accent overrides (so "aurora" stays neutral-cool) ---------- */
html[data-theme="aurora"] .sheet-panel::before { opacity: .5; }

/* ---------- smaller than 420px: tighten every gutter so nothing clips ---------- */
@media (max-width: 420px) {
  :root { --gutter: 10px; }
  .msg-avatar { width: 30px; height: 30px; min-width: 30px; border-radius: 10px; }
  .bubble { padding: 10px 12px; }
  .msg-body, .msg.user .msg-body { max-width: 92%; }
  .composer { padding-left: 12px; }
  .sheet-panel { padding-left: 16px; padding-right: 16px; }
  .head-actions .icon-btn { width: 34px; height: 34px; min-width: 34px; }
  .avatar-sm { width: 34px; height: 34px; min-width: 34px; }
}

/* Photo analyzing placeholder */
.img-analyzing{display:flex;gap:12px;align-items:center;padding:8px 2px;min-width:220px}
.img-analyzing .ia-photo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--brand-2),#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:ia-pulse 1.4s ease-in-out infinite}
@keyframes ia-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.09);opacity:1}}
.img-analyzing .ia-mid{flex:1;display:flex;flex-direction:column;gap:7px}
.img-analyzing .ia-line{height:9px;border-radius:6px;background:linear-gradient(90deg,var(--line-2) 25%,var(--brand-2) 50%,var(--line-2) 75%);background-size:200% 100%;animation:ia-shimmer 1.3s linear infinite}
.img-analyzing .ia-line.short{width:55%}
@keyframes ia-shimmer{to{background-position:-200% 0}}
.img-analyzing .ia-text{font-size:12.5px;color:var(--text-2);margin-top:3px}

/* Voice call */
.call-avatar{width:72px;height:72px;border-radius:50%;margin:6px auto 10px;background:linear-gradient(135deg,var(--brand-2),#ec4899);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff}
.call-avatar.talking{animation:ia-pulse 1.2s ease-in-out infinite}
.call-name{font-size:15px;font-weight:600}
.call-status{font-size:12.5px;color:var(--text-2);margin:8px 0 4px;min-height:18px}
.call-status.rec{color:#ff5c6c}
.call-text{font-size:13px;max-height:140px;overflow-y:auto;text-align:left;background:var(--bg3,#1a1e2e);border-radius:10px;padding:10px 12px;margin-top:8px;white-space:pre-wrap}
.call-text:empty{display:none}
.btn-mic.big{width:64px;height:64px;border-radius:50%;border:none;background:var(--brand-2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-mic.big.recording{background:#ff5c6c;animation:ia-pulse 1s ease-in-out infinite}

/* Plus menu */
.plus-menu{position:absolute;left:12px;bottom:64px;background:var(--bg3,#1a1e2e);border:1px solid var(--line-2);border-radius:14px;padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 30px rgba(0,0,0,.45);min-width:210px}
.plus-menu.hidden{display:none}
.plus-menu button{background:none;border:none;color:var(--text);font-size:13.5px;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer}
.plus-menu button:hover{background:rgba(99,102,241,.15)}
.plus-menu button.on{color:var(--brand-2);font-weight:600}
/* Code mini preview 1x1 */
.code-mini{position:fixed;right:14px;bottom:150px;width:170px;height:170px;background:#0d1017;border:1px solid var(--brand-2);border-radius:14px;z-index:55;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.code-mini.hidden{display:none}
.code-mini .cm-head{font-size:10.5px;color:var(--brand-2);padding:6px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;overflow:hidden}
.code-mini pre{flex:1;margin:0;padding:8px 10px;font-size:10px;line-height:1.45;color:#c9f2c9;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace}
.code-mini .cm-spin{width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--brand-2);border-radius:50%;animation:toolspin .7s linear infinite;display:inline-block;vertical-align:-2px;margin-right:6px}