/* ═════════ dev. — AI builder ═════════ */

:root {
  /* v55 — Claude Mobile design tokens (per detailed spec). */
  --cream:        #EEE9DC;
  --cream-soft:   #F4EFE2;
  --cream-deep:   #E5DECD;
  --paper:        #FBF7EE;
  --ink:          #1F1E1B;
  --ink-2:        #3A3833;
  --muted:        #8C8881;
  --hairline:     rgba(31,30,27,0.08);
  --hairline-2:   rgba(31,30,27,0.14);
  --clay:         #C96442;
  --clay-deep:    #A8512F;
  --clay-soft:    rgba(201,100,66,0.10);
  --success:      #5A8B5C;
  --success-soft: rgba(90,139,92,0.12);
  --warn:         #B8862C;

  /* Legacy aliases — many existing rules still reference these. They
     map to the new spec tokens so the whole file picks up Claude
     Mobile colors automatically. */
  --bg:         var(--cream);
  --bg-soft:    var(--cream-soft);
  --bg-deep:    var(--cream-deep);
  --ink-85:     rgba(31,30,27,0.85);
  --ink-70:     rgba(31,30,27,0.68);
  --ink-55:     rgba(31,30,27,0.52);
  --ink-40:     rgba(31,30,27,0.38);
  --ink-25:     rgba(31,30,27,0.22);
  --ink-12:     var(--hairline-2);
  --ink-08:     var(--hairline);
  --ink-04:     rgba(31,30,27,0.035);
  --accent:     var(--clay);
  --accent-h:   var(--clay-deep);
  --accent-soft:var(--clay-soft);
  --accent-glow:rgba(201,100,66,0.30);
  --ok:         var(--success);

  --font-brand:   'Archivo Black', 'Instrument Serif', 'Inter', system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Charter', 'Georgia', serif;
  --font-sans:    'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-pill: 999px;

  --appbar-h: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Kill mobile blue tap-highlight + default browser focus ring on click */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], input, textarea, select, summary {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
button:focus, a:focus, [role="button"]:focus,
input:focus, textarea:focus, select:focus, summary:focus { outline: none; }
/* Keep keyboard accessibility — ring only when focusing via Tab */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}
html, body { height: 100%; }
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); }
input, textarea { font: inherit; color: inherit; }
textarea { resize: none; }
.hidden { display: none !important; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-40); text-transform: uppercase; }


/* ─── APPBAR ─────────────────────────────────────────────── */
.appbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--ink-08);
  z-index: 50;
}
.brand {
  display: inline-flex; align-items: flex-end; gap: 2px;
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 1;
}
.brand-logo {
  width: 62px;
  height: auto;
  display: block;
}
.brand-dot {
  display: inline-block;
  width: 0.28em; height: 0.28em;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 0.06em;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
.brand:hover .brand-dot { transform: translateY(-3px) scale(1.15); }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-40);
}
.status-pill.is-ok .dot { background: var(--ok); animation: pulse 1.8s ease-in-out infinite; }
.status-pill.is-demo .dot { background: var(--accent); animation: pulse 1.8s ease-in-out infinite; }
.status-pill.is-err .dot { background: var(--warn); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.25); } }

.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  white-space: nowrap;
  transition: transform 0.18s, background 0.18s, box-shadow 0.3s, border-color 0.18s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); box-shadow: 0 12px 28px -10px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.icon-btn {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  color: var(--ink-70);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.icon-btn:hover { background: var(--ink-08); color: var(--ink); }


.sidebar-toggle { display: none; }
.sidebar-toggle.is-mobile { display: inline-flex; }


/* ─── SHELL: sidebar + stage ─────────────────────────────── */
.shell {
  position: fixed;
  top: var(--appbar-h); left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--ink-08);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 10px;
  font-size: 12px;
  color: var(--ink-55);
}
.sb-head-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}
.sb-head-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
}
.sb-list {
  flex: 1; overflow-y: auto;
  padding: 4px 10px 10px;
  margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
}
.sb-list::-webkit-scrollbar { width: 6px; }
.sb-list::-webkit-scrollbar-thumb { background: var(--ink-12); border-radius: 3px; }
.sb-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px 10px 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 38px;
  position: relative;
}
.sb-item:hover { background: var(--paper); }
.sb-item.is-active {
  background: var(--ink);
  color: var(--paper);
}
.sb-item.is-active .sb-item-meta { color: rgba(255,255,255,0.5); }
.sb-item-text {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sb-item-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}
.sb-item-del {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  opacity: 0;
  color: inherit;
  transition: opacity 0.15s, background 0.15s;
}
.sb-item:hover .sb-item-del { opacity: 0.55; }
.sb-item-del:hover { opacity: 1 !important; background: rgba(255,255,255,0.14); }
.sb-item:not(.is-active) .sb-item-del:hover { background: var(--ink-08); }
.sb-empty {
  padding: 18px 14px;
  font-size: 12.5px;
  color: var(--ink-40);
  text-align: center;
  line-height: 1.5;
}
.sb-foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ink-08);
}
.sb-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  line-height: 1.5;
}

/* ─── STAGE ──────────────────────────────────────────────── */
.stage {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  min-width: 0;
  min-height: 0;
}


/* ─── CHAT ───────────────────────────────────────────────── */
.chat {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: 1px solid var(--ink-08);
  overflow: hidden;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 8px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--ink-12); border-radius: 3px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }

/* Empty state — COMPACT, size of the input below */
.empty-state {
  margin: auto 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 4px;
}
.empty-logo {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.06em;
  display: inline-flex; align-items: flex-end; gap: 2px;
  margin-bottom: 6px;
}
.empty-logo .d {
  display: inline-block;
  width: 0.22em; height: 0.22em;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 0.1em;
}
.empty-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.empty-title em {
  font-family: var(--font-brand);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
}
.empty-title em .dot-em {
  display: inline-block;
  width: 0.22em; height: 0.22em;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 0.1em;
}
.empty-sub {
  font-size: 13.5px;
  color: var(--ink-55);
  line-height: 1.5;
  margin: 0;
  max-width: 40ch;
}

/* Chat messages */
.msg { display: flex; flex-direction: column; gap: 4px; animation: msgIn 0.24s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg-user {
  align-items: flex-end;
}
.msg-user .msg-bubble {
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  max-width: 88%;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.msg-user .msg-atts {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end;
  max-width: 88%;
  margin-bottom: 4px;
}
.msg-att-img {
  max-width: 160px; max-height: 120px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(10,10,10,0.15);
}
.msg-att-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.msg-att-file .icon {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  background: var(--accent);
  border-radius: 4px;
  font-size: 9px; font-weight: 600;
}

.msg-assistant { align-items: flex-start; }
.msg-assistant .msg-bubble {
  background: transparent;
  padding: 0;
  max-width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
/* v45 — no frame around assistant text. Just plain prose. */
.msg-assistant .plain-text {
  padding: 4px 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 100%;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* v45 — animated typing indicator while AI is mid-response */
.typing-dots {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 4px 4px;
}
.typing-dots span {
  width: 7px; height: 7px;
  background: var(--accent, #FF4B1F);
  border-radius: 50%;
  opacity: 0.35;
  animation: typingBounce 1.05s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* v45 — inline "writing file …" status pill (replaces [STATUS] line) */
.file-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-soft, #F1ECE3);
  border: 1px solid var(--ink-08, rgba(10,10,10,0.08));
  border-radius: 10px;
  font: 500 12.5px var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--ink-70, rgba(10,10,10,0.7));
  align-self: flex-start;
  max-width: 100%;
}
.file-pill.is-active .fp-icon {
  animation: spin 1.2s linear infinite;
  color: var(--accent, #FF4B1F);
}
.file-pill.is-done {
  background: transparent;
  border-color: transparent;
  color: var(--ink-55, rgba(10,10,10,0.55));
  padding: 2px 4px;
}
.file-pill.is-done .fp-icon { color: var(--ok, #2D6A4F); animation: none; }
.file-pill .fp-icon { width: 13px; height: 13px; flex-shrink: 0; }
.activity-card.file-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 430px);
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(31,30,27,0.04), 0 8px 24px rgba(31,30,27,0.06);
}
.activity-card.file-pill.is-done {
  padding: 13px 15px;
  background: var(--paper);
  border-color: var(--ink-08);
  color: var(--ink);
  opacity: 0.92;
}
.activity-card.file-pill.is-error {
  padding: 13px 15px;
  background: #fff;
  border-color: rgba(192,57,43,0.24);
  color: #C0392B;
}
.activity-card .activity-main { display: flex; flex-direction: column; min-width: 0; }
.activity-card .activity-title { font-weight: 700; }
.activity-card .activity-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-55);
  font-size: 12px;
}
.activity-card .activity-state {
  margin-left: auto;
  color: var(--accent);
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
}
.activity-card.is-done .activity-state { color: var(--ok); }
.activity-card.is-error .activity-state,
.activity-card.is-error .fp-icon { color: #C0392B; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-85);
  animation: msgIn 0.22s ease-out;
}
.status-line .s-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--accent);
  animation: spin 1.4s linear infinite;
}
.status-line.is-done .s-icon {
  animation: none;
  color: var(--ok);
}
.status-line.is-done {
  background: transparent;
  border-color: transparent;
  padding: 4px 8px;
  color: var(--ink-55);
  font-size: 12.5px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.summary-line {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--ink) 0%, #222 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  align-self: flex-start;
  max-width: 90%;
}
.summary-line .sl-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(255,255,255,0.12);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}


/* ─── CHAT TOPBAR ────────────────────────────────────────── */
.chat-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ink-08);
  flex-shrink: 0;
  gap: 14px;
}
.chat-topbar-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.chat-topbar-meta .mono {
  font-size: 10.5px;
}

/* ─── COMPOSER ───────────────────────────────────────────── */
.composer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--ink-08);
  background: var(--paper);
  flex-shrink: 0;
}

.composer-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.composer-attachments:empty { display: none; }
.c-attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  max-width: 240px;
  animation: attachIn 0.2s ease-out;
}
@keyframes attachIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.c-attach img {
  width: 22px; height: 22px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0;
}
.c-attach .icon {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 9px; font-weight: 600;
}
.c-attach .n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 500;
}
.c-attach button {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: var(--ink-55);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.c-attach button:hover { background: var(--ink); color: #fff; }

.composer-chips {
  display: flex; gap: 6px; margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.composer-chips::-webkit-scrollbar { display: none; }
.composer-chips button {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--ink-70);
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}
.composer-chips button:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
  background: var(--paper);
}

.composer-input {
  display: flex; flex-direction: column; gap: 0;
  /* Outer wrapper has its own padding; the textarea below also pads
     so text is well away from the rounded border (no "white corners"). */
  padding: 8px 10px 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: 16px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.25s;
}
.composer-input:focus-within {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.04);
}
#chatInput {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  /* Generous left/right padding so glyphs at the edge of the textarea
     never sit under the visually-rounded corner of .composer-input. */
  padding: 10px 8px 14px 8px;
  font-size: 15px;
  max-height: 260px;
  min-height: 80px;
  resize: none;
  overflow-y: auto;
  line-height: 1.5;
  font-family: inherit;
}
#chatInput::placeholder { color: var(--ink-40); }
.composer-actions {
  display: flex; align-items: center; gap: 6px;
}
.composer-spacer { flex: 1; }
.composer-clip {
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--ink-55);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.18s;
}
.composer-clip:hover {
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-10deg);
}
.composer-plan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--ink-08);
  color: var(--ink-70);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.composer-plan-switch {
  width: 24px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--ink-12);
  position: relative;
  flex: none;
}
.composer-plan-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-55);
  transition: transform 0.18s, background 0.18s;
}
.composer-plan:hover {
  border-color: var(--ink-25);
  color: var(--ink);
}
.composer-plan.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.composer-plan.is-active .composer-plan-switch {
  background: rgba(255,255,255,0.24);
}
.composer-plan.is-active .composer-plan-switch::after {
  transform: translateX(10px);
  background: var(--accent);
}
.composer-send {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  transition: background 0.2s, transform 0.2s, box-shadow 0.3s;
  flex-shrink: 0;
}
.composer-send:hover:not(:disabled) {
  background: var(--accent);
  transform: scale(1.06);
  box-shadow: 0 6px 18px -4px var(--accent-glow);
}
.composer-send:disabled { background: var(--ink-25); cursor: not-allowed; }


/* ─── CANVAS (right side) ────────────────────────────────── */
.canvas {
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.canvas-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ink-08);
  flex-shrink: 0;
  gap: 10px;
}
.canvas-tabs {
  display: flex; gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
}
.ctab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-55);
  transition: color 0.18s, background 0.18s;
}
.ctab:hover { color: var(--ink); }
.ctab.is-active {
  background: var(--ink);
  color: #fff;
}
.ctab-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  margin-left: 2px;
}
.ctab.is-active .ctab-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

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

.canvas-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.canvas-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 40px;
  text-align: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,75,31,0.10), transparent 55%),
    radial-gradient(circle at 76% 78%, rgba(255,75,31,0.06), transparent 60%),
    var(--bg-soft, #F5EFE6);
  overflow: hidden;
}
.canvas-hint::before {
  content: '';
  position: absolute; inset: 24px;
  border-radius: 22px;
  border: 1.5px dashed rgba(10,10,10,0.12);
  pointer-events: none;
  animation: hintBreath 4.6s ease-in-out infinite;
}
@keyframes hintBreath {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.015); opacity: 1; }
}
.canvas-hint-card {
  max-width: 420px;
  position: relative; z-index: 1;
  background: var(--paper, #fff);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 30px 60px -28px rgba(10,10,10,0.18);
}
.canvas-hint-mark-svg {
  /* v60 — empty-state: используем тот же SVG, что и в лендинге, крупно */
  display: block;
  height: 64px;
  width: auto;
  margin: 0 0 18px;
  overflow: visible;
}
.canvas-hint h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.canvas-hint p {
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1.55;
  max-width: 40ch;
  margin: 0 auto;
}

.canvas-frame {
  width: 100%; height: 100%;
  border: 0;
  background: #fff;
}
.canvas-code {
  margin: 0;
  padding: 20px;
  width: 100%; height: 100%;
  overflow: auto;
  background: #0D0D0D;
  color: #EDEDED;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  tab-size: 2;
  word-break: break-word;
}
.canvas-code code {
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
}
.canvas-code::-webkit-scrollbar { width: 10px; height: 10px; }
.canvas-code::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
.canvas-code::-webkit-scrollbar-track { background: transparent; }

.canvas-versions {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 24px clamp(20px, 3vw, 32px);
}
.versions-empty {
  display: grid; place-items: center;
  height: 100%;
  color: var(--ink-40);
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
}
.versions-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 720px; margin-inline: auto;
}
.ver-item {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  transition: border-color 0.18s, transform 0.18s;
}
.ver-item:hover { border-color: var(--ink-25); transform: translateY(-1px); }
.ver-item.is-current { border-color: var(--accent); }
.ver-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
.ver-info { min-width: 0; }
.ver-prompt {
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  font-weight: 500;
}
.ver-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  margin-top: 2px;
}
.ver-actions { display: flex; gap: 6px; }
.ver-btn {
  padding: 6px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-70);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ver-btn:hover { color: var(--ink); border-color: var(--ink); }
.ver-btn.is-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.canvas-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--ink-08);
  background: var(--paper);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}


/* ─── MODAL ─────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  animation: mIn 0.2s ease-out;
}
@keyframes mIn { from { opacity: 0; } to { opacity: 1; } }
.modal-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.35);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px -20px rgba(10,10,10,0.4);
  width: 100%;
  max-width: 460px;
  margin: 20px;
  overflow: hidden;
  animation: mSlide 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes mSlide { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-08);
}
.modal-head h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}
.modal-body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.modal-lede {
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.5;
  margin: 0;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.field input {
  padding: 11px 14px;
  background: var(--bg-soft);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-md);
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.field input:focus {
  border-color: var(--ink);
  background: var(--paper);
}
.field-hint {
  font-size: 12px;
  color: var(--ink-40);
}

.deploy-result {
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
}
.deploy-result.is-ok {
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.25);
  color: #0F6B2F;
}
.deploy-result.is-err {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.25);
  color: var(--warn);
}
.deploy-result.is-loading {
  background: var(--bg-soft);
  color: var(--ink-70);
  display: flex; align-items: center; gap: 10px;
}
.deploy-result a {
  color: inherit;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}


/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 200px 1fr; }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--appbar-h); bottom: 0; left: 0;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
    box-shadow: 0 0 0 2000px transparent;
  }
  .shell.sidebar-open .sidebar {
    transform: none;
    box-shadow: 0 0 0 2000px rgba(10,10,10,0.3);
  }
  .sidebar-toggle { display: inline-flex; }
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .chat { border-right: 0; border-bottom: 1px solid var(--ink-08); }
}
@media (max-width: 640px) {
  .appbar { gap: 10px; padding: 0 12px; }
  .status-pill { display: none; }
  .canvas-tabs .ctab { padding: 6px 10px; font-size: 12px; }
  .canvas-actions .icon-btn { width: 26px; height: 26px; }
  .empty-logo { font-size: 32px; }
  .empty-title { font-size: 20px; }
}


/* ═════════ v4: Model picker ═════════ */
.model-picker { position: relative; }
.mp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 9px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.mp-btn:hover { border-color: var(--ink-25); background: var(--bg-soft); }
.mp-btn svg { color: var(--ink-40); transition: transform 0.2s; }
.mp-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mp-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}
.mp-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: 0 20px 60px -20px rgba(10,10,10,0.25);
  z-index: 60;
  display: flex; flex-direction: column;
  animation: mp-in 0.18s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes mp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mp-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background 0.15s;
}
.mp-opt:hover { background: var(--bg-soft); }
.mp-opt.is-active { background: var(--ink); color: #fff; }
.mp-opt.is-active .mp-opt-desc { color: rgba(255,255,255,0.6); }
.mp-opt-name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; }
.mp-opt-desc { font-size: 11.5px; color: var(--ink-55); line-height: 1.3; }


/* ═════════ v4: Quota pill ═════════ */
.quota-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 9px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  position: relative;
  overflow: hidden;
  --quota-pct: 0%;
}
.quota-pill::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--quota-pct);
  background: rgba(22,163,74,0.08);
  pointer-events: none;
  transition: width 0.4s ease;
}
.quota-pill > * { position: relative; }
.quota-pill svg { color: var(--ok); }
.quota-pill.is-warn { color: #B45309; }
.quota-pill.is-warn::before { background: rgba(245,158,11,0.12); }
.quota-pill.is-warn svg { color: #D97706; }
.quota-pill.is-full { color: var(--warn); border-color: rgba(220,38,38,0.3); }
.quota-pill.is-full::before { background: rgba(220,38,38,0.1); }
.quota-pill.is-full svg { color: var(--warn); }


/* ═════════ v4: Drawer ═════════ */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer.hidden { display: none; }
.drawer-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.drawer.is-open .drawer-shade { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  background: var(--bg);
  border-left: 1px solid var(--ink-12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1);
  box-shadow: -30px 0 80px -20px rgba(10,10,10,0.25);
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink-08);
}
.drawer-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.dn-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink);
  text-align: left;
  transition: background 0.15s;
  width: 100%;
}
.dn-item:hover { background: var(--bg-soft); color: var(--ink); }
.dn-icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--ink-08);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-70);
}
.dn-item:hover .dn-icon { background: var(--ink); color: #fff; border-color: var(--ink); }
.dn-title { font-size: 14px; font-weight: 500; line-height: 1.2; }
.dn-sub { font-size: 12px; color: var(--ink-55); margin-top: 2px; line-height: 1.2; }
.drawer-foot {
  padding: 16px 18px;
  border-top: 1px solid var(--ink-08);
}
.drawer-quota { display: flex; flex-direction: column; gap: 8px; }
.drawer-quota-head {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-55);
  text-transform: uppercase;
}
.drawer-quota-bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.drawer-quota-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-h));
  border-radius: inherit;
  transition: width 0.4s ease;
}
.drawer-quota-sub { font-size: 11.5px; color: var(--ink-55); }


/* ═════════ v4: Quota-exceeded modal rows ═════════ */
.quota-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quota-stat {
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.quota-stat span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.quota-stat b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ═════════ v4: Responsive tweaks ═════════ */
@media (max-width: 900px) {
  .model-picker .mp-menu { left: -16px; }
}
@media (max-width: 640px) {
  .model-picker .mp-label { display: none; }
  .mp-btn { padding: 6px 8px; }
  .quota-pill { padding: 4px 8px; font-size: 10.5px; }
  .quota-pill .quota-text { font-size: 10px; }
}


/* ═════════ v5: Model icons ═════════ */
.mp-ic {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  transition: transform 0.18s, color 0.18s;
}
.mp-ic svg { width: 16px; height: 16px; }
.mp-ic svg path,
.mp-ic svg circle,
.mp-ic svg rect,
.mp-ic svg line { stroke-width: 1.5 !important; }
.mp-btn:hover .mp-ic { color: var(--accent-h); transform: scale(1.05); }

.mp-opt {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.mp-opt .mp-ic {
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  color: var(--accent);
}
.mp-opt .mp-ic svg { width: 18px; height: 18px; }
.mp-opt.is-active .mp-ic { color: #FF7A4F; }

.mp-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }


/* ═════════ v6: Wider composer (column layout) ═════════ */
.composer.composer-wide {
  padding: 16px 20px 18px;
}
.composer.composer-wide .composer-input {
  padding: 14px 16px 12px 18px;
  border-radius: 24px;
}
.composer.composer-wide #chatInput {
  font-size: 15.5px;
  /* Use the v22 padding from the base rule below so the textarea
     doesn't sit flush against the decorative border and doesn't grow
     so tall it covers the clip / send buttons. */
}
.composer.composer-wide .composer-clip,
.composer.composer-wide .composer-send {
  width: 34px; height: 34px;
}
.composer.composer-wide .composer-plan {
  min-height: 34px;
}


/* ═════════ v5: Code editor (file tree + CodeMirror) ═════════ */
.canvas-editor {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #0F1014;
  overflow: hidden;
}

/* Tree sidebar */
.ed-tree {
  background: #16171D;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.ed-tree-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.ed-tree-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.ed-tree-actions { display: flex; gap: 2px; }
.ed-act {
  width: 24px; height: 24px;
  color: rgba(255,255,255,0.55);
}
.ed-act:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.ed-tree-list {
  list-style: none;
  margin: 0; padding: 6px 4px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.ed-tree-list::-webkit-scrollbar { width: 6px; }
.ed-tree-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.ed-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 6px 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
  user-select: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.ed-row:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ed-row.is-active {
  background: rgba(255,75,31,0.15);
  color: #fff;
}
.ed-row.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.ed-row { position: relative; }
.ed-row-ic {
  flex: none;
  width: 14px; height: 14px;
  display: inline-grid; place-items: center;
  color: rgba(255,255,255,0.5);
}
.ed-row.is-folder .ed-row-ic { color: #E2B45E; }
.ed-row.is-folder.is-open .ed-row-ic { color: #F5C870; }
.ed-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.ed-row-children {
  list-style: none;
  margin: 0;
  padding-left: 14px;
  border-left: 1px dashed rgba(255,255,255,0.08);
  margin-left: 11px;
}
.ed-row-caret {
  flex: none;
  width: 12px; height: 12px;
  display: inline-grid; place-items: center;
  color: rgba(255,255,255,0.4);
  transition: transform 0.15s;
}
.ed-row.is-open .ed-row-caret { transform: rotate(90deg); }
.ed-empty-tree {
  padding: 14px 12px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  text-align: center;
  line-height: 1.55;
}

/* Main editor area */
.ed-main {
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0F1014;
}
.ed-tabbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  gap: 10px;
}
.ed-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ed-breadcrumb .b-sep { color: rgba(255,255,255,0.25); margin: 0 4px; }
.ed-breadcrumb .b-name { color: #fff; }
.ed-toolbar { display: flex; gap: 2px; flex-shrink: 0; }
.ed-editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.ed-editor .CodeMirror {
  height: 100%;
  background: #0F1014;
  color: #E5E5E5;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.ed-editor .CodeMirror-gutters {
  background: #0F1014;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.ed-editor .CodeMirror-linenumber {
  color: rgba(255,255,255,0.25);
  font-size: 11.5px;
}
.ed-editor .CodeMirror-cursor {
  border-left: 2px solid var(--accent);
}
.ed-editor .CodeMirror-selected,
.ed-editor .CodeMirror-focused .CodeMirror-selected {
  background: rgba(255,75,31,0.22) !important;
}
.ed-editor .cm-s-default .cm-tag          { color: #7FDBFF; }
.ed-editor .cm-s-default .cm-attribute    { color: #FFB86C; }
.ed-editor .cm-s-default .cm-string        { color: #D8FF73; }
.ed-editor .cm-s-default .cm-comment      { color: #6B6B6B; font-style: italic; }
.ed-editor .cm-s-default .cm-keyword      { color: #FF79C6; }
.ed-editor .cm-s-default .cm-property     { color: #BD93F9; }
.ed-editor .cm-s-default .cm-number       { color: #FF9F5A; }
.ed-editor .cm-s-default .cm-atom         { color: #BD93F9; }
.ed-editor .cm-s-default .cm-def          { color: #FAFAFA; }
.ed-editor .cm-s-default .cm-variable-2   { color: #FAFAFA; }
.ed-editor .cm-s-default .cm-bracket      { color: rgba(255,255,255,0.85); }
.ed-editor .cm-s-default .cm-meta         { color: #9AA0A6; }
.ed-editor .cm-matchingbracket            { color: var(--accent) !important; background: rgba(255,75,31,0.12); }

.ed-empty {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
}
.ed-empty code {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  padding: 1px 6px;
  border-radius: 4px;
}
.ed-main.is-empty .ed-empty { display: grid; }
.ed-main.is-empty .ed-editor { opacity: 0; pointer-events: none; }

/* Live-indicator */
.ed-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: rgba(255,75,31,0.12);
  border: 1px solid rgba(255,75,31,0.3);
  color: #FFA98B;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  animation: edLivePulse 1.4s ease-in-out infinite;
}
.ed-live .dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
@keyframes edLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}


@media (max-width: 900px) {
  .canvas-editor { grid-template-columns: 160px 1fr; }
  .ed-tree-head { padding: 8px 8px 8px 12px; }
}
@media (max-width: 640px) {
  .canvas-editor { grid-template-columns: 1fr; grid-template-rows: 140px 1fr; }
  .ed-tree { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}


/* ───── Tree row inline actions (rename / delete on hover) ───── */
.ed-row-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}
.ed-row:hover .ed-row-actions,
.ed-row:focus-within .ed-row-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ed-row-act {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.ed-row-act svg { width: 11px; height: 11px; display: block; }
.ed-row-act:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: scale(1.06);
}
.ed-row-act[data-act="delete"]:hover {
  background: rgba(255,75,31,0.18);
  color: #FFA98B;
}


/* ───── Stylized native sliders (no browser default look) ───── */
input[type="range"] {
  --range-val: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
}
input[type="range"]:focus { outline: none; }

/* WebKit / Blink track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--range-val, 50%),
    rgba(255,255,255,0.12) var(--range-val, 50%),
    rgba(255,255,255,0.12) 100%
  );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  margin-top: -6px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 0 12px rgba(255,75,31,0.45);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  cursor: grab;
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.5),
    0 0 18px rgba(255,75,31,0.6);
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.18);
  cursor: grabbing;
}

/* Firefox track + thumb */
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.05);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 0 12px rgba(255,75,31,0.45);
  transition: transform 0.14s ease;
  cursor: grab;
}
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.18); cursor: grabbing; }

input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* ───── Consistent scrollbar styling (canvas, log, tree, code) ───── */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.15s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}


/* ───── v6: Drawer balance card on top + open-canvas item ───── */
.drawer-quota-top {
  padding: 14px 18px 4px;
}
.drawer-quota-top .drawer-quota {
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  padding: 12px 14px;
}


/* ───── v6: Show-canvas button in chat topbar (mobile) ───── */
.chat-show-canvas {
  display: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--ink-70);
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  align-items: center;
  justify-content: center;
  flex: none;
}
.chat-show-canvas:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }


/* ───── v6: Canvas mobile bottom-sheet ─────────────────────── */
.canvas-sheet-close {
  display: none;
  position: absolute;
  top: 8px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-12);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  z-index: 6;
  box-shadow: 0 4px 14px -6px rgba(10,10,10,0.2);
}
.canvas-sheet-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 960px) {
  /* Stage stops being a 2-row grid — chat fills the screen */
  .stage { grid-template-rows: 1fr !important; grid-template-columns: 1fr !important; }
  .chat { border-bottom: 0 !important; }
  .chat-show-canvas { display: inline-flex; }

  /* Canvas becomes a slide-up bottom sheet (z-index hierarchy: backdrop 1000, sheet 1010, close-btn 1020) */
  .canvas {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: calc(var(--appbar-h) + 8px) !important;
    z-index: 1010 !important;
    background: var(--bg);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -18px 60px -10px rgba(10,10,10,0.45);
    transform: translateY(105%);
    transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1);
    will-change: transform;
    overflow: hidden;
    border-right: 0;
    visibility: visible !important;
  }
  .canvas::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 2px;
    background: var(--ink-12);
    z-index: 5;
  }
  body.canvas-sheet-open .canvas { transform: translateY(0) !important; }
  /* Float X above the sheet top — in the dimmed gap between appbar and sheet,
     so it never overlaps the canvas-head action buttons (download/deploy). */
  .canvas-sheet-close {
    display: inline-flex !important;
    position: fixed !important;
    top: 10px;
    right: 12px;
    width: 36px; height: 36px;
    background: var(--paper);
    border: 1px solid var(--ink-12);
    color: var(--ink);
    box-shadow: 0 6px 20px -6px rgba(10,10,10,0.45);
    z-index: 1030 !important;
  }
  body:not(.canvas-sheet-open) .canvas-sheet-close { display: none !important; }
  /* Drag-handle slot — push tab row down a touch */
  .canvas-head { padding-top: 24px; padding-right: 14px; }

  /* Backdrop — real DOM element so it can be clicked to close the sheet */
  .canvas-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.5);
    z-index: 1000;
    cursor: pointer;
    animation: sheetFade 0.22s ease-out;
  }
  body.canvas-sheet-open .canvas-sheet-backdrop {
    display: block;
  }
  @keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 520px) {
  .canvas-head {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-right: 12px;
  }
  .canvas-tabs {
    width: calc(100% - 44px);
    margin-right: 44px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .canvas-tabs::-webkit-scrollbar { display: none; }
  .canvas-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ───── v6: Hide deprecated chips/sidebar-toggle if any HTML still has them ───── */
.composer-chips, .composer-hint { display: none !important; }
#sidebarToggle, #refreshBtn, #openExtBtn { display: none !important; }
.quota-pill { display: none !important; }
.chat-topbar-meta { display: none !important; }


/* ───── v14: Inline model picker (lives inside composer-actions) ───── */
.model-picker.model-picker-inline { position: relative; }
.model-picker.model-picker-inline .mp-btn {
  padding: 4px 9px 4px 7px;
  height: 30px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.model-picker.model-picker-inline .mp-btn:hover {
  background: var(--bg-soft);
  border-color: var(--ink-25);
}
.model-picker.model-picker-inline .mp-ic {
  width: 16px; height: 16px;
  display: inline-grid; place-items: center;
  color: var(--accent);
  flex: none;
}
.model-picker.model-picker-inline .mp-ic svg { width: 14px; height: 14px; }
.model-picker.model-picker-inline .mp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink-85);
}
.model-picker.model-picker-inline .mp-caret {
  color: var(--ink-40);
  transition: transform 0.2s;
  flex: none;
}
.model-picker.model-picker-inline .mp-btn[aria-expanded="true"] .mp-caret { transform: rotate(180deg); }
/* Menu opens upward (composer is at the bottom) */
.model-picker.model-picker-inline .mp-menu {
  top: auto;
  bottom: calc(100% + 8px);
  min-width: 230px;
}


/* ─── Header eco button (orbit icon) ──────────────────────── */
.hdr-eco { color: var(--ink, #0a0a0a); }
.hdr-eco svg circle { fill: var(--accent, #FF4B1F); }
.hdr-eco:hover { border-color: var(--accent, #FF4B1F); color: var(--accent, #FF4B1F); }
@media (max-width: 720px) {
  .hdr-eco .btn-sm,
  .hdr-eco { padding-left: 10px; padding-right: 10px; }
  .hdr-eco span { display: none; }
}


/* ─── Profile modal (Telegram WebApp data) ────────────────── */
.profile-modal {
  position: fixed; inset: 0;
  z-index: 130;
  display: grid; place-items: center;
  animation: pmIn 0.2s ease-out;
}
.profile-modal.hidden { display: none; }
@keyframes pmIn { from { opacity: 0; } to { opacity: 1; } }

.profile-modal-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(6px);
}
.profile-modal-card {
  position: relative;
  background: var(--paper, #fff);
  border: 1px solid var(--ink-08, rgba(10,10,10,0.08));
  border-radius: var(--r-xl, 28px);
  box-shadow: 0 24px 64px -22px rgba(10,10,10,0.45);
  width: 100%;
  max-width: 420px;
  margin: 20px;
  overflow: hidden;
  animation: pmSlide 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes pmSlide { from { transform: translateY(14px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

.profile-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-06, rgba(10,10,10,0.06));
}
.profile-modal-head h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.profile-modal-head .icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-70, rgba(10,10,10,0.7));
  transition: background 0.18s, color 0.18s;
}
.profile-modal-head .icon-btn:hover { background: var(--ink-06, rgba(10,10,10,0.06)); color: var(--ink, #0a0a0a); }

.profile-modal-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

.profile-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 6px 4px 4px;
}
.profile-avatar-wrap {
  position: relative;
  width: 86px; height: 86px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft, #FFE4DA), var(--bg-soft, #F5EFE6));
  box-shadow: 0 14px 28px -16px var(--accent-glow, rgba(255,75,31,0.35));
  display: grid; place-items: center;
  overflow: hidden;
  border: 2px solid var(--paper, #fff);
  outline: 1px solid var(--ink-12, rgba(10,10,10,0.12));
}
.profile-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar.hidden { display: none; }
.profile-avatar-fallback {
  font-family: var(--font-brand, 'Archivo Black'), 'Inter', sans-serif;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: var(--accent, #FF4B1F);
}
.profile-avatar-fallback.hidden { display: none; }

.profile-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #0a0a0a);
}
.profile-username {
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  color: var(--ink-55, rgba(10,10,10,0.55));
}

.profile-meta {
  width: 100%;
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid var(--ink-06, rgba(10,10,10,0.06));
  border-radius: var(--r-md, 16px);
  overflow: hidden;
}
.profile-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  border-top: 1px solid var(--ink-06, rgba(10,10,10,0.06));
}
.profile-meta-row:first-child { border-top: 0; }
.profile-meta-row span {
  color: var(--ink-55, rgba(10,10,10,0.55));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.profile-meta-row b {
  font-weight: 600;
  color: var(--ink, #0a0a0a);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
}

.profile-hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-70, rgba(10,10,10,0.7));
  background: var(--accent-soft, #FFE4DA);
  border: 1px solid rgba(255,75,31,0.18);
  padding: 11px 14px;
  border-radius: var(--r-md, 16px);
  text-align: center;
}
.profile-hint.hidden { display: none; }
.profile-hint a { color: var(--accent, #FF4B1F); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.dn-profile { width: 100%; text-align: left; }
.dn-sub-btn { width: 100%; text-align: left; }


/* ═════════════════════════════════════════════════════════════
   v28 — Settings as a sectioned bottom-sheet (Telegram-style)
   ═════════════════════════════════════════════════════════════ */
.settings-sheet {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.settings-sheet.hidden { pointer-events: none; opacity: 0; visibility: hidden; }
.settings-sheet:not(.hidden) { pointer-events: auto; opacity: 1; visibility: visible; }
.settings-sheet,
.settings-sheet-card { transition: opacity 0.22s var(--ease, ease), transform 0.42s var(--ease, ease); }
.settings-sheet-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.settings-sheet:not(.hidden) .settings-sheet-shade { opacity: 1; }
.settings-sheet-card {
  position: relative;
  background: var(--paper, #fff);
  border-radius: 22px 22px 0 0;
  height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 30px -8px rgba(10,10,10,0.32);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  touch-action: none;
}
.settings-sheet:not(.hidden) .settings-sheet-card { transform: none; }
.settings-sheet-handle {
  width: 38px; height: 4px;
  background: rgba(10,10,10,0.18);
  border-radius: 4px;
  margin: 9px auto 0;
}
.settings-sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid rgba(10,10,10,0.06);
}
.settings-sheet-head h3 {
  flex: 1;
  margin: 0;
  font: 600 16px/1.1 Inter, system-ui, sans-serif;
}
.settings-back { display: none; }
.settings-sheet-body {
  flex: 1; min-height: 0;
  display: flex;
}
.settings-nav {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid rgba(10,10,10,0.06);
  overflow-y: auto;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: none; border: 0;
  font: 500 13.5px/1.2 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.75);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.settings-nav-item svg { color: currentColor; flex-shrink: 0; }
.settings-nav-item:hover { background: rgba(10,10,10,0.04); color: #0a0a0a; }
.settings-nav-item.is-active {
  background: var(--accent-soft, #FFE4DA);
  color: var(--accent, #FF4B1F);
}
.settings-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 18px 22px 24px;
}
.settings-pane { display: none; }
.settings-pane.is-active { display: block; animation: spFade 0.18s ease-out; }
@keyframes spFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-pane h4 { font: 600 17px/1.2 Inter; margin: 0 0 6px; letter-spacing: -0.01em; }
.settings-pane-lede {
  font: 400 13px/1.5 Inter;
  color: rgba(10,10,10,0.6);
  margin: 0 0 14px;
}
.settings-pane-head-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.settings-pane textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-soft, #F5EFE6);
  border: 1.5px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  font: 400 13.5px/1.5 Inter, system-ui, sans-serif;
  outline: none;
  resize: vertical;
}
.settings-pane textarea:focus { border-color: var(--accent, #FF4B1F); }
.settings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 12px;
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
}
.settings-list li small { color: rgba(10,10,10,0.5); font-size: 11.5px; margin-left: 8px; }
.settings-list-empty { font: 400 12.5px/1.45 Inter; color: rgba(10,10,10,0.5); padding: 8px 0; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,10,10,0.05);
  font-size: 13.5px;
}
.settings-row label { color: rgba(10,10,10,0.6); }
.settings-mono { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--ink, #0a0a0a); }
.settings-input {
  padding: 8px 12px;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 10px;
  font: 500 13px Inter;
  outline: none;
  cursor: pointer;
}
.settings-danger { color: #c0331a; }
.settings-sheet-foot {
  border-top: 1px solid rgba(10,10,10,0.06);
  padding: 12px 14px;
}
@media (max-width: 720px) {
  .settings-sheet-card { height: calc(100vh - var(--appbar-h, 56px)); top: var(--appbar-h, 56px); }
  .settings-sheet-body { flex-direction: column; }
  .settings-nav {
    width: 100%; border-right: 0; border-bottom: 1px solid rgba(10,10,10,0.06);
    flex-direction: row; overflow-x: auto;
    padding: 8px 10px;
  }
  body.settings-section-active .settings-nav { display: none; }
  body:not(.settings-section-active) .settings-content { display: none; }
  body.settings-section-active .settings-back { display: inline-grid !important; place-items: center; }
  .settings-nav-item { white-space: nowrap; flex-shrink: 0; }
}


/* ─── Subscription modal ──────────────────────────────────── */
.sub-modal {
  position: fixed; inset: 0;
  z-index: 130;
  display: grid; place-items: center;
  animation: smIn 0.2s ease-out;
}
.sub-modal.hidden { display: none; }
@keyframes smIn { from { opacity: 0; } to { opacity: 1; } }
.sub-modal-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(6px);
}
.sub-modal-card {
  position: relative;
  background: var(--paper, #fff);
  border: 1px solid var(--ink-08, rgba(10,10,10,0.08));
  border-radius: var(--r-xl, 28px);
  box-shadow: 0 24px 64px -22px rgba(10,10,10,0.45);
  width: 100%;
  max-width: 440px;
  margin: 20px;
  overflow: hidden;
  animation: smSlide 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes smSlide { from { transform: translateY(14px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.sub-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-06, rgba(10,10,10,0.06));
}
.sub-modal-head h3 {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; margin: 0;
}
.sub-modal-head .icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-70, rgba(10,10,10,0.7));
  transition: background 0.18s, color 0.18s;
}
.sub-modal-head .icon-btn:hover { background: var(--ink-06, rgba(10,10,10,0.06)); color: var(--ink, #0a0a0a); }
.sub-modal-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.sub-plan {
  background: linear-gradient(180deg, var(--accent-soft, #FFE4DA) 0%, var(--bg-soft, #F5EFE6) 100%);
  border: 1px solid rgba(255,75,31,0.18);
  border-radius: var(--r-lg, 22px);
  padding: 18px 20px 20px;
}
.sub-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sub-plan-tier {
  font-family: var(--font-brand, 'Archivo Black'), 'Inter', sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--accent, #FF4B1F);
}
.sub-plan-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55, rgba(10,10,10,0.55));
  background: rgba(10,10,10,0.05);
  padding: 4px 8px;
  border-radius: var(--r-pill, 999px);
}
.sub-plan-price {
  font-family: var(--font-brand, 'Archivo Black'), 'Inter', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--ink, #0a0a0a);
  letter-spacing: -0.02em;
}
.sub-plan-price small {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-55, rgba(10,10,10,0.55));
  letter-spacing: 0;
  margin-left: 6px;
}
.sub-plan-list {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
  list-style: none;
  padding: 0;
}
.sub-plan-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-90, rgba(10,10,10,0.9));
}
.sub-plan-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent, #FF4B1F);
}
.sub-plan-list li b { font-weight: 600; }
.sub-foot-note {
  font-size: 12px;
  color: var(--ink-55, rgba(10,10,10,0.55));
  text-align: center;
  margin: 0;
}


/* ─── Floating "Made in dev.ai" badge ─────────────────────── */
.madein-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  background: var(--ink, #0a0a0a);
  color: var(--paper, #fff);
  border-radius: var(--r-pill, 999px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(10,10,10,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
  backdrop-filter: blur(6px);
}
.madein-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(10,10,10,0.55), 0 0 0 1.5px var(--accent, #FF4B1F);
}
.madein-mark {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-brand, 'Archivo Black'), 'Inter', sans-serif;
  letter-spacing: 0.02em;
  font-size: 13px;
  line-height: 1;
}
.madein-mark > span:first-child { color: var(--paper, #fff); }
.madein-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent, #FF4B1F);
  margin-left: 2px;
  display: inline-block;
}
.madein-text { color: rgba(255,255,255,0.92); }
@media (max-width: 480px) {
  .madein-badge { padding: 7px 10px 7px 9px; font-size: 11.5px; right: 12px; bottom: 12px; }
}

/* The badge stays in the deployed-site template (api/deploy.js).
   Hide it inside the editor itself. */
body .madein-badge { display: none !important; }


/* ═════════════════════════════════════════════════════════════
   v16 additions — gate, build-target, sub tiers, cloud, perf.
   ═════════════════════════════════════════════════════════════ */

textarea::placeholder,
input::placeholder { color: rgba(10,10,10,0.55) !important; opacity: 1 !important; }

/* Telegram-only gate */
.tg-gate {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--bg, #FAF6F0) 0%, var(--bg-soft, #F5EFE6) 100%);
  padding: 24px;
}
.tg-gate[hidden] { display: none; }
.tg-gate-card {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-12, rgba(10,10,10,0.12));
  border-radius: var(--r-xl, 28px);
  box-shadow: 0 24px 60px -24px rgba(10,10,10,0.35);
  padding: 32px 28px 28px;
  max-width: 420px;
  text-align: center;
}
.tg-gate-mark { font-family: var(--font-brand, 'Archivo Black'), 'Inter', sans-serif; font-size: 24px; letter-spacing: 0.02em; margin-bottom: 18px; display: inline-flex; align-items: baseline; }
.tg-gate-dot { width: 8px; height: 8px; background: var(--accent, #FF4B1F); border-radius: 50%; margin-left: 3px; }
.tg-gate-title { font-size: 22px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.02em; }
.tg-gate-text { font-size: 14px; color: var(--ink-70, rgba(10,10,10,0.7)); line-height: 1.55; margin: 0 0 20px; }


/* Build target toggle (composer) */
.build-target {
  display: inline-flex;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid var(--ink-08, rgba(10,10,10,0.08));
  border-radius: var(--r-pill, 999px);
  padding: 3px;
  margin: 8px 12px 6px;
}
.bt-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(10,10,10,0.55);
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.bt-opt.is-active {
  color: var(--ink, #0a0a0a);
  background: var(--paper, #fff);
  box-shadow: 0 2px 8px -2px rgba(10,10,10,0.12);
}
/* Older bot-mode rules superseded by the v22+ block at the bottom of
   the file — the canonical rules live there. */


/* Subscription tiers — wide grid in modal */
.sub-modal-wide { max-width: 920px; }
.sub-current {
  font-size: 13px;
  color: rgba(10,10,10,0.7);
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.06);
  padding: 10px 14px;
  border-radius: var(--r-md, 16px);
  text-align: center;
}
.sub-current b { color: var(--accent, #FF4B1F); font-family: var(--font-brand, 'Archivo Black'), sans-serif; letter-spacing: 0.04em; margin-left: 6px; }
.sub-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.sub-tier {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper, #fff);
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: var(--r-lg, 22px);
  padding: 16px 16px 14px;
  transition: border-color 0.18s, transform 0.18s;
}
.sub-tier:hover { border-color: var(--accent, #FF4B1F); transform: translateY(-2px); }
.sub-tier.is-current { border-color: var(--accent, #FF4B1F); background: linear-gradient(180deg, var(--accent-soft, #FFE4DA), var(--paper, #fff)); }
.sub-tier.is-featured { border-color: var(--ink, #0a0a0a); }
.sub-tier-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.sub-tier-name { font-family: var(--font-brand, 'Archivo Black'), sans-serif; font-size: 14px; letter-spacing: 0.06em; }
.sub-tier-price { font-family: var(--font-brand, 'Archivo Black'), sans-serif; font-size: 22px; letter-spacing: -0.02em; }
.sub-tier-price small { font-family: var(--font-sans, Inter, sans-serif); font-size: 11px; font-weight: 500; color: rgba(10,10,10,0.55); margin-left: 2px; }
.sub-tier-desc { font-size: 12.5px; color: rgba(10,10,10,0.7); line-height: 1.5; margin: 0 0 10px; }
.sub-tier-list { font-size: 12.5px; color: rgba(10,10,10,0.9); line-height: 1.6; margin: 0 0 12px; flex: 1; list-style: none; padding: 0; }
.sub-tier-list li { position: relative; padding-left: 14px; }
.sub-tier-list li::before { content:''; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background: var(--accent, #FF4B1F); }
.sub-tier-foot { margin-top: auto; }
.sub-pay-row { display: flex; gap: 6px; }
.sub-pay-row .btn { flex: 1; justify-content: center; padding: 7px 10px; font-size: 12px; }
.sub-tier-tag {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  background: var(--bg-soft, #F5EFE6);
  border-radius: var(--r-pill, 999px); padding: 4px 10px;
}
.sub-tier-tag.is-active { color: var(--paper, #fff); background: var(--accent, #FF4B1F); }


/* Deploy modal — bot fields */
#deployBotFields .field-status {
  font-size: 12.5px; padding: 8px 12px;
  border-radius: var(--r-md, 16px);
  margin-top: 8px;
}
#deployBotFields .field-status.hidden { display: none; }
#deployBotFields .field-status.is-pending { background: var(--bg-soft, #F5EFE6); color: rgba(10,10,10,0.7); }
#deployBotFields .field-status.is-ok { background: rgba(99,196,76,0.15); color: #2f7a1f; }
#deployBotFields .field-status.is-error { background: rgba(255,75,31,0.12); color: #c0331a; }


/* dev.cloud / dev.cloud.ai */
.cloud-modal {
  position: fixed; inset: 0;
  z-index: 130;
  display: grid; place-items: center;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(6px);
}
.cloud-modal.hidden { display: none; }
.cloud-modal-shade { position: absolute; inset: 0; cursor: pointer; }
.cloud-modal-card {
  position: relative;
  background: var(--paper, #fff);
  border-radius: var(--r-xl, 28px);
  box-shadow: 0 24px 64px -22px rgba(10,10,10,0.45);
  width: min(960px, calc(100% - 32px));
  height: min(640px, calc(100vh - 32px));
  margin: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cloud-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(10,10,10,0.06); }
.cloud-modal-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.cloud-modal-head .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: rgba(10,10,10,0.7); }
.cloud-modal-head .icon-btn:hover { background: rgba(10,10,10,0.06); color: #0a0a0a; }
.cloud-modal-body { display: flex; flex: 1; min-height: 0; }
.cloud-projects { width: 240px; border-right: 1px solid rgba(10,10,10,0.06); display: flex; flex-direction: column; }
.cloud-projects-head { padding: 14px 16px 8px; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10,10,10,0.55); }
.cloud-projects-list { flex: 1; overflow: auto; padding: 8px; list-style: none; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cloud-proj {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(10,10,10,0.03);
  border: 1px solid rgba(10,10,10,0.06);
  transition: background 0.15s, border-color 0.15s;
}
.cloud-proj:hover { background: rgba(255,75,31,0.06); border-color: rgba(255,75,31,0.18); }
.cloud-proj.is-active { background: var(--accent-soft, #FFE4DA); border-color: var(--accent, #FF4B1F); }
.cloud-proj-name {
  font: 600 13.5px/1.2 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cloud-proj-meta {
  font: 400 11.5px/1.3 'JetBrains Mono', monospace;
  color: rgba(10,10,10,0.55);
}
.cloud-empty-row {
  padding: 18px 12px;
  font: 400 12.5px/1.5 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.55);
  text-align: center;
  border: 1px dashed rgba(10,10,10,0.12);
  border-radius: 12px;
  margin: 6px 4px;
}
.cloud-projects-list li { padding: 8px 10px; font-size: 13px; border-radius: var(--r-sm, 10px); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.cloud-projects-list li:hover { background: rgba(10,10,10,0.06); }
.cloud-projects-list li.is-active { background: var(--accent-soft, #FFE4DA); color: var(--accent, #FF4B1F); }
.cloud-projects-empty { padding: 8px 12px; color: rgba(10,10,10,0.55); font-size: 12px; text-align: center; }
.cloud-projects-foot { border-top: 1px solid rgba(10,10,10,0.06); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cloud-quota-row { display: flex; justify-content: space-between; font-size: 12px; }
.cloud-quota-row span { color: rgba(10,10,10,0.55); }
.cloud-quota-row b { font-family: var(--font-mono, monospace); font-weight: 600; }
.cloud-quota-sub { font-size: 11px; color: rgba(10,10,10,0.55); margin-top: 2px; }
.cloud-buy { margin-top: 6px; justify-content: center; }
.cloud-table { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cloud-table-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(10,10,10,0.06); }
.cloud-table-title { font-weight: 600; font-size: 14px; }
.cloud-table-body { flex: 1; overflow: auto; padding: 12px 18px; }
.cloud-empty { color: rgba(10,10,10,0.55); font-size: 13px; padding: 20px; text-align: center; }
.cloud-chat { flex: 1; display: flex; flex-direction: column; }
.cloud-chat-log { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cloud-msg { padding: 10px 14px; border-radius: var(--r-md, 16px); font-size: 13.5px; line-height: 1.5; max-width: 80%; }
.cloud-msg-user { align-self: flex-end; background: var(--accent-soft, #FFE4DA); color: #0a0a0a; }
.cloud-msg-ai { align-self: flex-start; background: var(--bg-soft, #F5EFE6); color: rgba(10,10,10,0.9); }
.cloud-chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(10,10,10,0.06); }
.cloud-chat-form textarea { flex: 1; padding: 10px 12px; border: 1px solid rgba(10,10,10,0.12); border-radius: var(--r-md, 16px); background: #fff; font-size: 13px; resize: none; outline: none; }


/* v28: cloud composer (mirrors the editor's composer-input) */
.cloud-composer {
  border-top: 1px solid rgba(10,10,10,0.06);
  padding: 10px 12px 12px;
}
.cloud-composer-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.cloud-composer-attachments:empty { display: none; }
.cloud-composer-attachments .cloud-att {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 999px;
  font: 500 11.5px Inter;
  color: rgba(10,10,10,0.85);
}
.cloud-composer-attachments .cloud-att-x {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10,10,10,0.06);
  cursor: pointer;
  color: rgba(10,10,10,0.6);
  font-size: 11px; line-height: 1;
}
.cloud-composer-input {
  display: flex; flex-direction: column;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  padding: 8px 10px;
  transition: border-color 0.18s, background 0.18s;
}
.cloud-composer-input:focus-within {
  border-color: var(--ink, #0a0a0a);
  background: var(--paper, #fff);
}
.cloud-composer-input textarea {
  width: 100%;
  border: 0; outline: 0;
  background: transparent;
  padding: 8px 8px 12px;
  font: 400 14px/1.45 Inter, system-ui, sans-serif;
  resize: none;
  min-height: 44px;
  max-height: 140px;
}
.cloud-composer-actions {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 2px;
}

@media (max-width: 720px) {
  .cloud-modal-card { height: calc(100vh - 32px); width: calc(100% - 16px); margin: 8px; }
  .cloud-projects { width: 160px; }
}


/* Performance — disable transforms still referenced by legacy markup */
[data-tilt] { transform: none !important; }


/* v26: hide site/bot toggle once the chat got its first message —
   user is now committed to a target for this chat. They flip type
   only by creating a new chat from the chats sheet. */
body.chat-has-messages .composer-actions .bt-inline { display: none !important; }


/* v27: chats bottom-sheet — own visibility, no global .hidden override */
.chats-sheet {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.chats-sheet.hidden { pointer-events: none; }
.chats-sheet:not(.hidden) { pointer-events: auto; }
.chats-sheet-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.chats-sheet:not(.hidden) .chats-sheet-shade { opacity: 1; }
.chats-sheet-card {
  position: relative;
  background: var(--paper, #fff);
  border-radius: 22px 22px 0 0;
  max-height: 70vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 30px -8px rgba(10,10,10,0.32);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22,0.61,0.36,1);
  touch-action: none;
}
.chats-sheet:not(.hidden) .chats-sheet-card { transform: none; }
.chats-sheet.hidden .chats-sheet-card { transform: translateY(100%); transition: transform 0.32s var(--ease, ease-in); }
.settings-sheet.hidden .settings-sheet-card { transform: translateY(100%); transition: transform 0.32s var(--ease, ease-in); }
.model-sheet.hidden .model-sheet-card { transform: translateY(100%); transition: transform 0.32s var(--ease, ease-in); }
.chats-sheet-handle {
  width: 38px; height: 4px;
  background: rgba(10,10,10,0.18);
  border-radius: 4px;
  margin: 9px auto 0;
}
.chats-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 8px;
}
.chats-sheet-head h3 { margin: 0; font: 600 16px/1 Inter, system-ui, sans-serif; }
.chats-sheet-list {
  list-style: none; margin: 0; padding: 4px 10px 14px;
  overflow-y: auto;
  flex: 1;
}
.cs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.cs-item:hover { background: rgba(10,10,10,0.04); }
.cs-item.is-active { background: var(--accent-soft, #FFE4DA); color: var(--accent, #FF4B1F); }
.cs-item-text { flex: 1; min-width: 0; }
.cs-item-title {
  font: 500 14px/1.25 Inter, system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-item-meta {
  font: 400 11.5px/1.3 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.55);
  margin-top: 2px;
}
.cs-item-del {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: rgba(10,10,10,0.45);
  background: transparent; border: 0; cursor: pointer;
  flex-shrink: 0;
}
.cs-item-del:hover { background: rgba(192,51,26,0.08); color: #c0331a; }
.cs-item-empty {
  padding: 18px 12px;
  font: 400 13px/1.5 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.55);
  text-align: center;
}


/* ═════════════════════════════════════════════════════════════
   v25 — universal open/close transitions for every overlay.
   Anything that toggles the .hidden class fades + scales smoothly
   instead of just popping out of the DOM.
   ═════════════════════════════════════════════════════════════ */
.modal,
.sub-modal,
.profile-modal,
.cloud-modal,
.brand-pop,
.model-sheet,
.tg-gate,
.drawer,
.sidebar-shade,
[id$="Modal"],
[id$="Pop"]:not(.brand-pop),
[id$="Sheet"]:not(.chats-sheet):not(.model-sheet) {
  transition:
    opacity 0.22s cubic-bezier(0.22,0.61,0.36,1),
    visibility 0s linear 0s,
    transform 0.22s cubic-bezier(0.22,0.61,0.36,1);
}
.modal.hidden,
.sub-modal.hidden,
.profile-modal.hidden,
.cloud-modal.hidden,
.brand-pop.hidden,
.model-sheet.hidden {
  display: flex !important;     /* keep in flow so transition runs */
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease-in,
    visibility 0s linear 0.18s,
    transform 0.18s ease-in;
}
.brand-pop.hidden { display: flex !important; transform: translateY(-4px) scale(0.98); }
.brand-pop:not(.hidden) { transform: none; }

/* The cloud-modal-card / sub-modal-card / profile-modal-card already
   have their own slide-in keyframes — we don't duplicate those, just
   make sure the wrapper itself fades cleanly. */
.modal:not(.hidden),
.sub-modal:not(.hidden),
.profile-modal:not(.hidden),
.cloud-modal:not(.hidden),
.model-sheet:not(.hidden) {
  opacity: 1; visibility: visible;
}

/* Drawer panel slide is handled by transform on .is-open — keep it. */
.drawer { transition: opacity 0.18s ease-out; }
.drawer.hidden { display: none; }


/* ════════════════════════════════════════════════════════════
   v18 — mobile-first fixes (this is the canonical block; older
   rules above are kept only for compatibility).
   ════════════════════════════════════════════════════════════ */

/* Canvas-sheet-backdrop was the source of the "darkening, can't tap"
   bug — kill it everywhere; the canvas now slides up full-screen on
   mobile and is its own opaque surface. */
.canvas-sheet-backdrop { display: none !important; }


/* The brand button (used as workspace popover trigger) */
.brand-trigger {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
}
.brand-trigger:hover { opacity: 0.8; }

.brand-pop {
  position: fixed;
  top: calc(var(--appbar-h, 56px) + 4px);
  left: 8px;
  z-index: 200;
  background: var(--paper, #fff);
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(10,10,10,0.45);
  padding: 6px;
  min-width: 200px;
  display: flex; flex-direction: column; gap: 2px;
}
.brand-pop.hidden { display: none; }
.bp-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font: 500 13.5px/1 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.85);
  cursor: pointer;
  background: none; border: 0; text-align: left;
  position: relative;
  overflow: hidden;
}
.bp-item .bp-ic {
  width: 16px; height: 16px;
  display: inline-grid; place-items: center;
  color: #0a0a0a;
}
.bp-item:hover { background: rgba(10,10,10,0.05); }
.bp-item.bp-exit { color: #c0331a; }
.bp-item.bp-exit .bp-ic { color: #c0331a; }


/* Build-target inline (in composer toolbar). Compact pill toggle. */
.bt-inline {
  display: inline-flex;
  background: rgba(10,10,10,0.04);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 999px;
  padding: 2px;
  margin: 0;
  flex-shrink: 0;
}
.bt-inline .bt-opt {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font: 500 11.5px/1 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.6);
  border-radius: 999px;
  cursor: pointer;
  background: none; border: 0;
  transition: color 0.15s, background 0.15s;
}
.bt-inline .bt-opt.is-active {
  color: #0a0a0a;
  background: #fff;
  box-shadow: 0 1px 4px -1px rgba(10,10,10,0.18);
}
@media (max-width: 480px) {
  .bt-inline .bt-opt span { display: none; }
  .bt-inline .bt-opt { padding: 4px 7px; }
}

/* Old standalone .build-target {margin: 8px 12px 6px;} block — disable
   so we don't get a duplicate row above. */
.composer-input > .build-target { display: none !important; }


/* Composer-actions — strict single row on every viewport. Send sits
   on the right next to clip / plan / target / model. */
.composer-actions {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 8px 8px;
}
.composer-actions > * { flex-shrink: 0; }
.composer-actions .composer-spacer { flex: 1 1 auto; min-width: 0; }
/* On phones we hide every text label and keep icon-only buttons,
   so Clip / Plan / Site|Bot / Model / Send all fit in 360px. */
@media (max-width: 520px) {
  .composer-actions { gap: 4px; padding: 5px 6px 7px; }
  .composer-actions .composer-plan-label,
  .composer-actions .bt-inline .bt-opt span,
  .composer-actions .model-trigger .mp-label { display: none !important; }
  .composer-actions .composer-plan { padding: 5px 8px; }
  .composer-actions .bt-inline .bt-opt { padding: 5px 7px; }
  .composer-actions .model-trigger { padding: 5px 7px; }
  .composer-actions .composer-clip,
  .composer-actions .composer-send { width: 32px; height: 32px; }
}
.composer-clip,
.composer-plan,
.bt-inline,
.model-trigger,
.composer-send { flex-shrink: 0; }
.composer-spacer { flex: 1; min-width: 4px; }

/* Match the clip-button look between landing and editor (one shape) */
.composer-clip {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: rgba(10,10,10,0.04);
  color: rgba(10,10,10,0.7);
  border: 0;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.composer-clip:hover { background: rgba(10,10,10,0.09); color: #0a0a0a; }
.composer-clip * { pointer-events: none; }   /* SVG inside doesn't swallow clicks */

.composer-plan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 6px;
  border-radius: 999px;
  background: rgba(10,10,10,0.04);
  border: 0;
  cursor: pointer;
  font: 500 12px/1 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.7);
}
.composer-plan-switch {
  width: 22px; height: 14px;
  border-radius: 999px;
  background: rgba(10,10,10,0.18);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s;
}
.composer-plan-switch::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
}
.composer-plan[aria-pressed="true"] { color: #0a0a0a; }
.composer-plan[aria-pressed="true"] .composer-plan-switch { background: #FF4B1F; }
.composer-plan[aria-pressed="true"] .composer-plan-switch::after { transform: translateX(8px); }
@media (max-width: 480px) {
  .composer-plan-label { display: none; }
  .composer-plan { padding: 5px 8px; }
}

.composer-send {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: #FF4B1F;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.composer-send:hover { background: #E83E12; }


/* Compact model-trigger (replaces inline mp-btn dropdown) */
.model-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10,10,10,0.04);
  border: 1px solid rgba(10,10,10,0.08);
  cursor: pointer;
  font: 500 11.5px/1 Inter, system-ui, sans-serif;
  color: #0a0a0a;
}
.model-trigger:hover { border-color: #FF4B1F; }
.model-trigger .mp-ic { display: inline-grid; place-items: center; color: #0a0a0a; }
.model-trigger .mp-ic svg { width: 13px; height: 13px; }
.model-trigger .mp-caret { color: rgba(10,10,10,0.4); flex-shrink: 0; }
@media (max-width: 380px) {
  .model-trigger .mp-label { display: none; }
}

/* Keep the old inline menu hidden — we now use the bottom-sheet */
.model-picker-inline,
.mp-menu { display: none !important; }


/* Model bottom-sheet — slides up from bottom over the whole screen */
.model-sheet {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.model-sheet.hidden { display: none; }
.model-sheet-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: msFade 0.18s ease-out;
}
@keyframes msFade { from { opacity: 0; } to { opacity: 1; } }
.model-sheet-card {
  position: relative;
  background: #fff;
  border-radius: 22px 22px 0 0;
  max-height: 36vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 28px -8px rgba(10,10,10,0.3);
  animation: msSlide 0.22s cubic-bezier(0.22,0.61,0.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes msSlide { from { transform: translateY(100%); } to { transform: none; } }
.model-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(10,10,10,0.18);
  border-radius: 4px;
  margin: 9px auto 0;
}
.model-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 6px;
}
.model-sheet-head h3 { font: 600 15px/1 Inter, system-ui, sans-serif; margin: 0; }
.model-sheet-head .icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: rgba(10,10,10,0.6); }
.model-sheet-head .icon-btn:hover { background: rgba(10,10,10,0.06); color: #0a0a0a; }
.model-list {
  list-style: none; margin: 0; padding: 4px 8px 12px;
  overflow-y: auto;
}
.model-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 2px;
}
.model-list li:hover { background: rgba(10,10,10,0.04); }
.model-list li.is-active { background: rgba(255,75,31,0.08); }
.model-list li.is-locked { opacity: 0.55; cursor: not-allowed; }
.model-list li.is-locked:hover { background: transparent; }
.model-list .ml-ic {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  color: #0a0a0a;
}
.model-list .ml-text { flex: 1; min-width: 0; }
.model-list .ml-name {
  font: 600 13.5px/1.2 Inter, system-ui, sans-serif;
  display: flex; align-items: center; gap: 6px;
}
.model-list .ml-tag {
  font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  background: rgba(10,10,10,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.model-list .ml-tag.is-locked { color: #c0331a; background: rgba(192,51,26,0.08); }
.model-list .ml-desc {
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.65);
  margin-top: 2px;
}
.model-list .ml-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(10,10,10,0.18);
  display: inline-grid; place-items: center;
  color: transparent;
  flex-shrink: 0;
}
.model-list li.is-active .ml-check { border-color: #FF4B1F; background: #FF4B1F; color: #fff; }


/* Drawer hover — fill from left → right (mobile-friendly active state) */
.drawer-nav .dn-item {
  position: relative;
  overflow: hidden;
  transition: color 0.18s var(--ease, ease);
}
.drawer-nav .dn-item::before {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;            /* width = 0 from the left side */
  background: rgba(255,75,31,0.10);
  border-right: 1.5px solid #FF4B1F;
  transition: inset 0.22s var(--ease, ease);
  z-index: 0;
  pointer-events: none;
}
.drawer-nav .dn-item:hover::before,
.drawer-nav .dn-item:active::before { inset: 0 0 0 0; }
.drawer-nav .dn-item:hover { color: #0a0a0a; }
.drawer-nav .dn-item > * { position: relative; z-index: 1; }
.drawer-nav .dn-item .dn-icon { color: #0a0a0a !important; background: transparent !important; }
.drawer-nav .dn-item .dn-icon svg { color: #0a0a0a; }


/* Subscription modal — sticky head, scrollable body, mobile full-screen */
.sub-modal { padding: 0; }
.sub-modal-card.sub-modal-wide {
  display: flex; flex-direction: column;
  max-width: 920px;
  max-height: 92vh;
}
.sub-modal-head {
  position: sticky; top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid rgba(10,10,10,0.06);
  flex-shrink: 0;
}
.sub-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1; min-height: 0;
}
@media (max-width: 720px) {
  .sub-modal { display: block; }
  .sub-modal-card.sub-modal-wide {
    width: 100%;
    height: 100vh; max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
  .sub-tiers { grid-template-columns: 1fr; }
}


/* Cloud modals — mobile responsive: collapse aside into a top "tabs" row */
@media (max-width: 720px) {
  .cloud-modal-card {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .cloud-modal-body {
    flex-direction: column;
  }
  .cloud-projects {
    width: 100%;
    flex-shrink: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(10,10,10,0.06);
    max-height: 38vh;
  }
  .cloud-projects.is-hidden-mobile { display: none; }
  .cloud-projects-foot { padding: 8px 12px; }
  .cloud-projects-foot .cloud-buy {
    font-size: 11.5px;
    padding: 7px 10px;
    white-space: nowrap;
  }
  .cloud-back { display: inline-grid !important; }
  .cloud-projects-head { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; }
}
.cloud-back {
  display: none;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 6px;
  color: rgba(10,10,10,0.6);
}

/* "+1 ГБ · $2" button — guarantee fit */
.cloud-buy { white-space: nowrap; padding: 8px 12px; font-size: 12px; }


/* Bot-mode preview stub — shown instead of canvas-hint when target=bot */
.canvas-bot-stub {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 28px 22px;
  z-index: 1;
}
.canvas-bot-stub.hidden { display: none; }
.canvas-bot-stub .canvas-hint-card {
  max-width: 440px;
  text-align: left;
}
.canvas-bot-stub h2 {
  font: 600 22px/1.15 Inter, system-ui, sans-serif;
  margin: 14px 0 6px;
}
.canvas-bot-stub p {
  font: 400 14px/1.55 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.7);
  margin: 0 0 14px;
}
.canvas-bot-tips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.canvas-bot-tips li {
  position: relative;
  padding-left: 18px;
  font: 400 13px/1.5 Inter, system-ui, sans-serif;
  color: rgba(10,10,10,0.85);
}
.canvas-bot-tips li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF4B1F;
}
/* Bot mode: no canvas sheet at all. The chat is the whole screen,
   and a single orange "Запустить" button in the chat-topbar opens
   the same deploy modal that asks for the BOT_TOKEN. */
body.mode-bot #canvasBotStub { display: none !important; }
body.mode-bot .canvas { display: none !important; }
body.mode-bot .stage { grid-template-columns: 1fr !important; }
body.mode-bot .chat-show-canvas { display: none !important; }
body.mode-bot .chat-launch {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  background: var(--accent, #FF4B1F);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  box-shadow: 0 6px 18px -8px rgba(255,75,31,0.55);
  transition: transform 0.18s, box-shadow 0.18s;
}
body.mode-bot .chat-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(255,75,31,0.65);
}
body.mode-bot .chat-launch svg { color: #fff; }
body.mode-bot .chat-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
}
body.mode-bot .chat-topbar-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-launch { display: none !important; }
.chat-launch.is-disabled {
  opacity: 0.55;
  filter: grayscale(0.4);
  /* keep clickable so handler can show a hint */
}
/* Bot mode canvas — hidden by default, opens as sheet under appbar */
body.mode-bot .canvas {
  display: none !important;        /* completely off the page when closed */
}
body.mode-bot.canvas-sheet-open .canvas {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: var(--appbar-h, 56px) !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  inset: auto !important;
  background: var(--paper, #FAF6F0) !important;
  z-index: 95 !important;
  overflow: hidden;
  border: 0;
  box-shadow: 0 -10px 30px -10px rgba(10,10,10,0.25);
  border-radius: 16px 16px 0 0;
  animation: sheetUp 0.45s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: auto !important;
}
@keyframes sheetUp {
  from { transform: translateY(110%); }
  to   { transform: none; }
}
.appbar { z-index: 110 !important; }
/* No live preview tab in bot mode — but Код / Версии stay. */
body.mode-bot .canvas-tabs [data-view="preview"] { display: none !important; }
body.mode-bot .canvas-hint,
body.mode-bot .canvas-frame { display: none !important; }
/* "Скачать ZIP" makes no sense for a hosted bot */
body.mode-bot #downloadBtn { display: none !important; }

/* Equal-width tabs everywhere — site and bot share the same canvas */
.canvas-tabs { display: flex !important; align-items: stretch; gap: 4px; }
.canvas-tabs .ctab { flex: 1 1 0 !important; justify-content: center; }

/* The chat-topbar duplicates (chat-show-code + chat-deploy) are
   retired — bot mode now opens the canvas sheet via the same
   eye-button as site mode and finds Деплой in canvas-actions. */
.chat-deploy, .chat-show-code { display: none !important; }
#deployBtn.is-disabled {
  opacity: 0.55;
  filter: grayscale(0.4);
  /* keep pointer-events on so the click reaches our delegated handler
     which shows a hint instead of silently doing nothing. */
}


/* Settings modal */
.modal-tall { max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; }
.modal-tall .modal-head { position: sticky; top: 0; background: #fff; z-index: 2; flex-shrink: 0; }
.settings-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.settings-body textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-soft, #F5EFE6);
  border: 1.5px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  font: 400 13px/1.45 Inter, system-ui, sans-serif;
  outline: none;
  resize: vertical;
}
.settings-body textarea:focus { border-color: #FF4B1F; }
.settings-section { display: flex; flex-direction: column; gap: 8px; }
.settings-section-head { display: flex; justify-content: space-between; align-items: center; }
.settings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-soft, #F5EFE6);
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 12px;
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
}
.settings-list li small { color: rgba(10,10,10,0.55); font-size: 11.5px; }
.settings-list-empty { font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: rgba(10,10,10,0.55); padding: 8px 0; }
.settings-save { width: 100%; justify-content: center; margin-top: 6px; }
@media (max-width: 720px) {
  .modal-tall { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
}


/* Brand image normalisation — same height everywhere */
.brand-logo, .appbar .brand-logo, .drawer-head .brand-logo {
  height: 24px; width: auto;
}

/* v20: textual brand mark — kept for legacy markup, overridden by .brand-svg below */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-brand, 'Archivo Black'), 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
}
.brand-mark .brand-mark-dot {
  display: inline-block;
  width: 0.28em; height: 0.28em;
  border-radius: 50%;
  background: var(--accent, #FF4B1F);
  transform: translateY(-0.04em);
  margin-left: 0.02em;
}
.brand, .brand-trigger { line-height: 1; background: transparent; border: 0; padding: 0; cursor: pointer; }

/* v48 — Unified inline-SVG brand mark (matches devpool.online + dev-token.online).
   Heavy black `dev` text + circular terracotta dot. Sized via the SVG height. */
.brand-svg {
  display: block;
  height: 26px;
  width: auto;
  overflow: visible;
}
.brand-svg-text {
  /* v60 — единый bold-логотип на лендинге и в редакторе (Archivo Black). */
  font-family: 'Archivo Black', 'SF Pro Display', 'Arial Black', 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  fill: var(--ink, #1A1916);
}
.brand-svg-dot {
  fill: var(--accent, #CC785C);
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: 65px 27.5px;
}
.brand:hover .brand-svg-dot { transform: scale(1.18); }

@media (max-width: 720px) {
  .brand-svg { height: 32px; }
}


/* v20+v23: drawer-hover survives touch and fills with the live accent
   colour; text and icons turn white once the sweep arrives. */
.drawer-nav .dn-item {
  position: relative;
  overflow: hidden;
  transition: color 0.18s var(--ease, ease);
  z-index: 0;
}
.drawer-nav .dn-item::before {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--accent, #FF4B1F);
  transition: inset 0.32s cubic-bezier(0.22,0.61,0.36,1) !important;
  z-index: -1;
  pointer-events: none;
}
.drawer-nav .dn-item:hover::before,
.drawer-nav .dn-item:focus::before,
.drawer-nav .dn-item:focus-visible::before,
.drawer-nav .dn-item:active::before,
.drawer-nav .dn-item.is-pressed::before { inset: 0 0 0 0 !important; }
.drawer-nav .dn-item:hover,
.drawer-nav .dn-item:focus,
.drawer-nav .dn-item:focus-visible,
.drawer-nav .dn-item:active,
.drawer-nav .dn-item.is-pressed { color: #fff !important; }
.drawer-nav .dn-item:hover .dn-icon,
.drawer-nav .dn-item:focus .dn-icon,
.drawer-nav .dn-item:focus-visible .dn-icon,
.drawer-nav .dn-item:active .dn-icon,
.drawer-nav .dn-item.is-pressed .dn-icon,
.drawer-nav .dn-item:hover .dn-icon svg,
.drawer-nav .dn-item:focus .dn-icon svg,
.drawer-nav .dn-item:focus-visible .dn-icon svg,
.drawer-nav .dn-item:active .dn-icon svg,
.drawer-nav .dn-item.is-pressed .dn-icon svg { color: #fff !important; stroke: #fff !important; }
.drawer-nav .dn-item:hover .dn-sub,
.drawer-nav .dn-item:focus .dn-sub,
.drawer-nav .dn-item:focus-visible .dn-sub,
.drawer-nav .dn-item:active .dn-sub,
.drawer-nav .dn-item.is-pressed .dn-sub { color: rgba(255,255,255,0.85) !important; }


/* Brand popover: same orange-fill hover effect as drawer items */
.brand-pop .bp-item {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.brand-pop .bp-item::before {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--accent, #FF4B1F);
  transition: inset 0.28s cubic-bezier(0.22,0.61,0.36,1);
  z-index: -1;
  pointer-events: none;
}
.brand-pop .bp-item:hover::before,
.brand-pop .bp-item:focus::before,
.brand-pop .bp-item:active::before,
.brand-pop .bp-item.is-pressed::before { inset: 0 0 0 0; }
.brand-pop .bp-item:hover,
.brand-pop .bp-item:focus,
.brand-pop .bp-item:active,
.brand-pop .bp-item.is-pressed { color: #fff !important; background: transparent !important; }
.brand-pop .bp-item:hover .bp-ic,
.brand-pop .bp-item:focus .bp-ic,
.brand-pop .bp-item:active .bp-ic,
.brand-pop .bp-item.is-pressed .bp-ic { color: #fff !important; }


/* Mobile sidebar drawer (Brand → Чаты) */
.sidebar-shade {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(4px);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease, ease);
}
body.sidebar-open .sidebar-shade {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 720px) {
  .sidebar {
    display: flex !important; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(280px, 84vw);
    background: var(--paper, #fff);
    border-right: 1px solid rgba(10,10,10,0.08);
    z-index: 110;
    transform: translateX(-100%);
    transition: transform 0.26s var(--ease, ease);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
}
@media (min-width: 721px) {
  /* Sidebar always visible on desktop — no shade */
  .sidebar-shade { display: none !important; }
}


/* Mobile appbar — keep one row, smaller paddings */
.appbar {
  --appbar-h: 56px;
  position: sticky; top: 0; z-index: 90;
  background: rgba(250,246,240,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(10,10,10,0.06);
  padding: 0 12px;
}
.appbar-right .btn-label-mob { display: inline; }
@media (max-width: 480px) {
  .appbar-right #newChatBtn .btn-label-mob { display: none; }
  .appbar-right #newChatBtn { padding: 6px 10px; }
}


/* Mobile: sidebar hidden (chats via drawer), canvas slides over chat
   as a full-screen sheet. No backdrop — the canvas is opaque. */
@media (max-width: 720px) {
  .sidebar { display: none !important; }
  .shell { grid-template-columns: 1fr !important; }
  .stage { grid-template-columns: 1fr !important; }
  .canvas {
    /* hidden until the user actually opens the sheet */
    display: none !important;
  }
  body.canvas-sheet-open .canvas {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--appbar-h, 56px);
    left: 0; right: 0; bottom: 0;
    inset: auto;
    background: var(--paper, #FAF6F0);
    z-index: 95;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px -10px rgba(10,10,10,0.25);
    animation: sheetUp 0.45s cubic-bezier(0.22,0.61,0.36,1);
  }
  body.canvas-sheet-open .canvas { transform: none; pointer-events: auto; }
  body:not(.canvas-sheet-open) .canvas { pointer-events: none; }
  /* Force every interactive element inside the sheet to accept taps */
  body.canvas-sheet-open .canvas .canvas-head,
  body.canvas-sheet-open .canvas .canvas-tabs,
  body.canvas-sheet-open .canvas .canvas-actions,
  body.canvas-sheet-open .canvas button,
  body.canvas-sheet-open .canvas a,
  body.canvas-sheet-open .canvas .ctab,
  body.canvas-sheet-open .canvas .icon-btn { pointer-events: auto !important; touch-action: manipulation; }
  .canvas-head {
    position: relative; z-index: 4;
    flex-shrink: 0;
  }
  .canvas-body { flex: 1; min-height: 0; position: relative; }

  .canvas-sheet-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 5;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(10,10,10,0.08);
    display: none;
    align-items: center; justify-content: center;
    color: rgba(10,10,10,0.7);
    box-shadow: 0 4px 12px -4px rgba(10,10,10,0.18);
  }
  body.canvas-sheet-open .canvas-sheet-close { display: inline-flex; }
  .canvas-foot { display: none; }
}

/* Desktop site-mode: canvas is permanent split, sheet-close not needed.
   Desktop bot-mode: canvas IS a sheet, so the close button must stay. */
@media (min-width: 721px) {
  body.mode-site .canvas-sheet-close { display: none !important; }
}
/* Make sure the close button stays clickable above canvas content */
body.canvas-sheet-open .canvas-sheet-close {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  position: absolute;
  top: 12px; right: 12px;
  z-index: 6;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(10,10,10,0.08);
  color: rgba(10,10,10,0.7);
  box-shadow: 0 4px 12px -4px rgba(10,10,10,0.18);
  cursor: pointer;
}


/* ═════════════════════════════════════════════════════════════
   v45 — Bottom-sheet modals on mobile: deploy, cloud, cloud.ai
   Uses transition (not animation) so slide-up replays on every
   open. The original .modal-card animation was firing once at
   page load and never again because display: flex never toggled
   to display: none on hide.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Container — switch from grid-center to flex-bottom */
  .modal,
  .cloud-modal,
  .sub-modal,
  .profile-modal {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    place-items: end stretch !important;   /* belt + suspenders for grid */
  }

  /* Card — full-width, top-rounded, slide-up transition */
  .modal-card,
  .cloud-modal-card,
  .sub-modal-card,
  .profile-modal-card {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(100%);
    transition: transform 0.36s cubic-bezier(0.22,0.61,0.36,1) !important;
    animation: none !important;
    position: relative;
    padding-top: 14px;
  }

  /* Bottom-sheet drag handle (visible top notch) */
  .modal-card::before,
  .cloud-modal-card::before,
  .sub-modal-card::before,
  .profile-modal-card::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 2px;
    background: rgba(10,10,10,0.18);
    pointer-events: none;
    z-index: 5;
  }

  .modal-card .modal-head,
  .cloud-modal-card .cloud-modal-head,
  .sub-modal-card .sub-modal-head,
  .profile-modal-card .profile-modal-head { padding-top: 12px !important; }

  /* Card-specific sizing (height of cloud/cloud.ai is taller) */
  .modal-card,
  .sub-modal-card,
  .profile-modal-card {
    max-height: 88vh !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cloud-modal-card {
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
  }

  /* When the parent is open, slide the card into view */
  .modal:not(.hidden) .modal-card,
  .cloud-modal:not(.hidden) .cloud-modal-card,
  .sub-modal:not(.hidden) .sub-modal-card,
  .profile-modal:not(.hidden) .profile-modal-card {
    transform: translateY(0) !important;
  }

  /* Modals use opacity/visibility for hide. Disable that fade so the
     transform slide is the only visible motion (cleaner). */
  .modal.hidden,
  .cloud-modal.hidden,
  .sub-modal.hidden,
  .profile-modal.hidden {
    transition: visibility 0s linear 0.36s !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   v46 — Skills + Plugins composer chips and picker bottom-sheet
   ═════════════════════════════════════════════════════════════ */
.composer-extras {
  display: flex; gap: 6px;
  padding: 6px 6px 0 6px;
  flex-wrap: wrap;
}
.ce-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 999px;
  font: 500 12px Inter, system-ui, sans-serif;
  color: var(--ink-70);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ce-btn:hover {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--ink-25);
}
.ce-btn.is-active {
  background: var(--accent-soft, #FFE4DA);
  border-color: var(--accent, #FF4B1F);
  color: var(--accent, #FF4B1F);
}
.ce-btn svg { flex-shrink: 0; }
.ce-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  background: var(--accent, #FF4B1F);
  color: #fff;
  border-radius: 999px;
  font: 600 10px var(--font-mono, monospace);
}

/* Picker bottom-sheet (skills + plugins, mirrors chats-sheet) */
.picker-sheet {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.picker-sheet.hidden { pointer-events: none; }
.picker-sheet:not(.hidden) { pointer-events: auto; }
.picker-sheet-shade {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.picker-sheet:not(.hidden) .picker-sheet-shade { opacity: 1; }
.picker-sheet-card {
  position: relative;
  background: var(--paper, #fff);
  border-radius: 22px 22px 0 0;
  max-height: 80vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.22,0.61,0.36,1);
  box-shadow: 0 -16px 40px -10px rgba(10,10,10,0.35);
}
.picker-sheet:not(.hidden) .picker-sheet-card { transform: none; }
.picker-sheet-handle {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 4px;
  border-radius: 2px;
  background: rgba(10,10,10,0.18);
  pointer-events: none;
}
.picker-sheet-head {
  padding: 18px 18px 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
}
.picker-sheet-head h3 { margin: 0; font: 600 16px Inter, system-ui, sans-serif; grid-column: 1; grid-row: 1; }
.picker-sheet-meta { grid-column: 1; grid-row: 2; font: 400 12px Inter, system-ui, sans-serif; color: var(--ink-55); }
.picker-sheet-head .icon-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 32px; height: 32px; border-radius: 50%; }
.picker-sheet-search {
  margin: 8px 18px 4px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  color: var(--ink-55);
}
.picker-sheet-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: 14px Inter, system-ui, sans-serif;
  color: var(--ink);
}
.picker-sheet-search input::placeholder { color: var(--ink-40); }
.picker-sheet-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 12px;
  margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.picker-sheet-list .ps-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--ink);
}
.picker-sheet-list .ps-item:hover { background: var(--bg-soft); }
.picker-sheet-list .ps-item.is-on {
  background: var(--accent-soft, #FFE4DA);
  border-color: var(--accent, #FF4B1F);
}
.picker-sheet-list .ps-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--bg-soft);
  display: grid; place-items: center;
  font-size: 17px;
}
.picker-sheet-list .ps-item.is-on .ps-icon {
  background: rgba(255,255,255,0.6);
}
.picker-sheet-list .ps-text { flex: 1; min-width: 0; }
.picker-sheet-list .ps-name {
  font: 600 13.5px/1.3 Inter, system-ui, sans-serif;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.picker-sheet-list .ps-tag {
  font: 500 9.5px/1 var(--font-mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--ink-08);
  color: var(--ink-55);
}
.picker-sheet-list .ps-desc {
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  color: var(--ink-70);
  margin-top: 2px;
}
.picker-sheet-list .ps-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-25);
  display: grid; place-items: center;
  margin-top: 5px;
  background: transparent;
  color: transparent;
  transition: all 0.15s;
}
.picker-sheet-list .ps-item.is-on .ps-check {
  background: var(--accent, #FF4B1F);
  border-color: var(--accent, #FF4B1F);
  color: #fff;
}
.picker-sheet-list .ps-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--ink-55);
  font-size: 13px;
}
.picker-sheet-foot {
  display: flex; gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--ink-06, rgba(10,10,10,0.06));
  background: var(--paper);
}

@media (max-width: 720px) {
  .composer-extras { padding: 4px 4px 2px; }
  .ce-btn { padding: 6px 10px; font-size: 12.5px; }
}

/* v46 — Built-in plugin/skill rows in Settings (toggleable) */
.settings-builtin {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--ink-08, rgba(10,10,10,0.08));
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.settings-builtin:hover { background: var(--bg-soft, #F1ECE3); }
.settings-builtin.is-active {
  background: var(--accent-soft, #FFE4DA);
  border-color: var(--accent, #FF4B1F);
}
.settings-builtin .sb-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--paper);
  display: grid; place-items: center;
  font-size: 17px;
}
.settings-builtin .sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-builtin .sb-text b { font: 600 13.5px Inter, system-ui, sans-serif; color: var(--ink); }
.settings-builtin .sb-text small { font: 400 12px Inter, system-ui, sans-serif; color: var(--ink-70, rgba(10,10,10,0.7)); line-height: 1.4; }
.settings-builtin .sb-toggle {
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px;
  background: var(--ink-12, rgba(10,10,10,0.12));
  border-radius: 999px;
  transition: background 0.18s;
}
.settings-builtin .sb-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(10,10,10,0.18);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.settings-builtin.is-active .sb-toggle { background: var(--accent, #FF4B1F); }
.settings-builtin.is-active .sb-toggle-knob { transform: translateX(16px); }

.settings-list-divider {
  margin: 14px 0 6px;
  font: 500 10.5px var(--font-mono, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55, rgba(10,10,10,0.55));
  list-style: none;
}


/* ═════════════════════════════════════════════════════════════
   v47 — MOBILE REDESIGN (claude.ai-inspired)
   ─────────────────────────────────────────────────────────────
   Comprehensive polish for max-width: 720px:
   • Warmer, calmer typography (serif headline + 16px body)
   • Floating composer with rounded card and refined toolbar
   • Bigger touch targets (≥44px) everywhere
   • Lighter chrome — subtle borders, no harsh shadows
   • Empty state with a confident headline
   • Send button morphs orange when there's text
   • Skills/Plugins as compact chips above the toolbar row
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Base typography ────────────────────────────────────── */
  html { font-size: 16px; }
  body { font-size: 15.5px; line-height: 1.5; letter-spacing: -0.005em; }

  /* ── Appbar — minimal: hamburger / brand / new-chat ────── */
  .appbar {
    height: 52px !important;
    padding: 0 12px !important;
    background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
    border-bottom: 1px solid var(--ink-08) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .appbar .status-pill { display: none !important; }
  .appbar .brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .appbar .brand .brand-dot {
    width: 0.32em; height: 0.32em;
    margin-bottom: 0.05em;
    background: var(--accent);
  }
  .appbar-right {
    gap: 4px !important;
  }
  .appbar-right .btn,
  .appbar-right .btn-ghost {
    padding: 7px 11px !important;
    font-size: 13px !important;
    min-height: 36px;
    border-radius: var(--r-pill);
    background: transparent;
    border-color: transparent;
    color: var(--ink-70);
  }
  .appbar-right .btn:hover {
    background: var(--ink-08);
    color: var(--ink);
    border-color: transparent;
    transform: none;
  }
  .appbar-right .btn-label-mob { display: none !important; }
  .appbar-right #newChatBtn {
    width: 38px; height: 38px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center; justify-content: center;
  }
  .appbar-right #newChatBtn:hover { background: var(--accent-h) !important; }

  /* Burger button — comfortable touch target */
  #burgerBtn {
    width: 38px; height: 38px;
    border-radius: 12px;
    color: var(--ink-70);
  }
  #burgerBtn:hover { background: var(--ink-08); color: var(--ink); }

  /* ── Stage / chat layout ───────────────────────────────── */
  .stage { padding-top: 4px; }
  .chat { background: transparent; border: 0; }
  .chat-topbar {
    padding: 8px 14px !important;
    background: transparent;
    border-bottom: 0;
  }
  .chat-topbar-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink-85);
  }

  /* Eye-icon (preview canvas) — refined */
  .chat-show-canvas {
    width: 36px !important; height: 36px !important;
    border-radius: 12px;
    background: transparent;
    border: 1px solid var(--ink-08);
    color: var(--ink-70);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .chat-show-canvas:hover {
    background: var(--bg-soft);
    border-color: var(--ink-25);
    color: var(--ink);
  }

  /* Bot mode: refined "Запустить" pill */
  body.mode-bot .chat-launch {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: var(--r-pill) !important;
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px var(--accent-glow) !important;
  }

  /* ── Chat log ──────────────────────────────────────────── */
  .chat-log {
    padding: 16px 16px 12px !important;
    gap: 22px !important;
    scroll-behavior: smooth;
  }

  /* ── User message bubble — refined cream ──────────────── */
  .msg-user { align-items: flex-end; }
  .msg-user .msg-bubble {
    padding: 11px 16px !important;
    background: var(--bg-soft) !important;
    color: var(--ink) !important;
    border-radius: 18px 18px 4px 18px !important;
    font-size: 15px;
    line-height: 1.5;
    max-width: 86%;
    box-shadow: none;
    border: 0;
  }

  /* ── Assistant text — claude-style readable prose ─────── */
  .msg-assistant .msg-bubble { gap: 10px !important; }
  .msg-assistant .plain-text {
    font-size: 16px !important;
    line-height: 1.62 !important;
    letter-spacing: -0.005em;
    color: var(--ink-85);
    padding: 0 !important;
  }

  /* File pill — unobtrusive */
  .file-pill {
    background: var(--bg-soft) !important;
    border: 1px solid var(--ink-08) !important;
    border-radius: var(--r-pill) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    color: var(--ink-70) !important;
  }

  /* Summary line */
  .summary-line {
    background: var(--ink) !important;
    border-radius: var(--r-pill) !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    box-shadow: 0 6px 16px -8px rgba(26,25,22,0.32);
  }

  /* ── Empty state — bold welcome screen ────────────────── */
  .empty-state {
    margin: auto 0 !important;
    padding: 0 8px !important;
    text-align: center;
    align-items: center !important;
  }
  .empty-state .empty-logo { display: none !important; }
  .empty-title {
    font-family: var(--font-display) !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    max-width: 320px;
    margin: 0 auto;
  }
  .empty-title em {
    font-style: italic;
    color: var(--accent);
    font-family: inherit !important;
  }
  .empty-sub {
    font-size: 14px !important;
    color: var(--ink-55) !important;
    line-height: 1.5;
    max-width: 280px;
    margin: 12px auto 0 !important;
  }

  /* ── Composer — claude.ai-inspired floating card ──────── */
  .composer {
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    border-top: 0 !important;
  }
  .composer-input {
    background: var(--paper) !important;
    border: 1px solid var(--ink-12) !important;
    border-radius: 22px !important;
    padding: 4px !important;
    box-shadow: 0 10px 30px -16px rgba(26,25,22,0.18),
                0 2px 8px -2px rgba(26,25,22,0.04);
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .composer-input:focus-within {
    border-color: var(--ink-25) !important;
    box-shadow: 0 12px 36px -16px rgba(26,25,22,0.24),
                0 2px 8px -2px rgba(26,25,22,0.06);
  }
  #chatInput {
    padding: 14px 16px 6px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    min-height: 56px !important;
    max-height: 220px !important;
    background: transparent !important;
  }
  #chatInput::placeholder {
    color: var(--ink-40) !important;
    font-size: 16px;
  }

  /* ── Composer-extras (Skills/Plugins chips) ────────────── */
  .composer-extras {
    padding: 0 8px 4px !important;
    gap: 6px !important;
  }
  .ce-btn {
    padding: 6px 11px 6px 9px !important;
    font-size: 12.5px !important;
    background: transparent !important;
    border-color: var(--ink-08) !important;
    color: var(--ink-70) !important;
    min-height: 30px;
  }
  .ce-btn:hover {
    background: var(--bg-soft) !important;
    border-color: var(--ink-25) !important;
  }
  .ce-btn.is-active {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  .ce-count {
    background: var(--accent) !important;
    font-size: 9.5px !important;
    height: 15px;
    min-width: 15px;
  }

  /* ── Composer toolbar (clip / plan / site-bot / model / send) ── */
  .composer-actions {
    padding: 4px 6px 6px !important;
    gap: 4px !important;
  }
  .composer-clip {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    color: var(--ink-70) !important;
    background: transparent !important;
  }
  .composer-clip:hover {
    background: var(--ink-08) !important;
    color: var(--ink) !important;
  }
  .composer-clip svg { width: 18px !important; height: 18px !important; }

  /* Plan toggle — minimal pill */
  .composer-plan {
    padding: 6px 10px !important;
    gap: 6px !important;
    background: transparent !important;
    border: 1px solid var(--ink-08) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-70) !important;
    font-size: 12px !important;
    min-height: 30px;
  }
  .composer-plan-label { font-size: 12px !important; display: inline !important; }
  .composer-plan-switch {
    width: 18px !important; height: 11px !important;
    background: var(--ink-12) !important;
    border-radius: 999px !important;
    position: relative; flex-shrink: 0;
  }
  .composer-plan-switch::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 9px; height: 9px;
    background: #fff !important;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  }
  .composer-plan[aria-pressed="true"] {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  .composer-plan[aria-pressed="true"] .composer-plan-switch { background: var(--accent) !important; }
  .composer-plan[aria-pressed="true"] .composer-plan-switch::after { transform: translateX(7px); }

  /* Site/Bot inline toggle — refined */
  .bt-inline {
    display: inline-flex !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--ink-08) !important;
    border-radius: var(--r-pill) !important;
    padding: 2px !important;
    gap: 0 !important;
  }
  .bt-inline .bt-opt {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    color: var(--ink-55) !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 26px;
    transition: background 0.18s, color 0.18s;
  }
  .bt-inline .bt-opt.is-active {
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 3px rgba(26,25,22,0.08);
  }
  .bt-inline .bt-opt span { display: inline !important; }

  /* Model picker trigger */
  .model-trigger {
    padding: 6px 10px 6px 8px !important;
    gap: 6px !important;
    background: transparent !important;
    border: 1px solid var(--ink-08) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-70) !important;
    font-size: 12px !important;
    min-height: 30px;
  }
  .model-trigger:hover {
    background: var(--bg-soft) !important;
    border-color: var(--ink-25) !important;
  }
  .model-trigger .mp-label { display: inline !important; font-size: 12px; }
  .model-trigger .mp-ic { width: 14px; height: 14px; }

  /* Send button — accent when input has content (live in app.js). Default subdued. */
  .composer-send {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
  }
  .composer-send:hover:not(:disabled) {
    background: var(--accent) !important;
    transform: scale(1.05);
  }
  .composer-send:disabled {
    background: var(--ink-12) !important;
    color: var(--ink-40) !important;
    cursor: not-allowed;
  }
  .composer-send svg { width: 15px !important; height: 15px !important; }

  /* ── Picker sheets (Skills/Plugins) — refine spacing ──── */
  .picker-sheet-card {
    border-radius: 22px 22px 0 0 !important;
    max-height: 84vh !important;
    box-shadow: 0 -16px 50px -12px rgba(26,25,22,0.28) !important;
  }
  .picker-sheet-head { padding: 20px 18px 8px !important; }
  .picker-sheet-head h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
  }
  .picker-sheet-meta {
    font-size: 13px !important;
    line-height: 1.4;
  }
  .picker-sheet-search {
    margin: 6px 16px 6px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: var(--bg-soft) !important;
  }
  .picker-sheet-search input { font-size: 15px !important; }
  .picker-sheet-list { padding: 8px 12px 16px !important; gap: 6px !important; }
  .picker-sheet-list .ps-item {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    min-height: 56px;
  }
  .picker-sheet-list .ps-icon {
    width: 36px !important; height: 36px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }
  .picker-sheet-list .ps-name { font-size: 14px !important; }
  .picker-sheet-list .ps-desc { font-size: 12.5px !important; line-height: 1.45 !important; }
  .picker-sheet-list .ps-check {
    width: 24px !important; height: 24px !important;
    border-width: 2px !important;
  }
  .picker-sheet-foot {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    background: var(--paper) !important;
    border-top: 1px solid var(--ink-08) !important;
  }

  /* ── Bottom-sheet generic refinements (chats / model) ── */
  .chats-sheet-card,
  .model-sheet-card,
  .settings-sheet-card {
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -16px 50px -12px rgba(26,25,22,0.28) !important;
  }
  .chats-sheet-head h3,
  .settings-sheet-head h3,
  .picker-sheet-head h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  /* ── Modal cards (deploy/cloud) — refined typography ───── */
  .modal-head h3,
  .cloud-modal-head h3,
  .sub-modal-head h3,
  .profile-modal-head h3 {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
  }

  /* ── Drawer (left burger menu) ─────────────────────────── */
  .drawer .drawer-card,
  .drawer-card {
    background: var(--bg) !important;
    border-radius: 0 22px 22px 0;
  }
  .drawer-nav .dn-item {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    min-height: 48px;
  }
  .dn-title { font-size: 14.5px !important; font-weight: 500 !important; }
  .dn-sub { font-size: 12px !important; color: var(--ink-55) !important; }

  /* ── Hidden cruft on mobile ────────────────────────────── */
  .quota-pill,
  .chat-topbar-meta,
  .composer-chips,
  .composer-hint { display: none !important; }
}

/* Send button "has content" state — toggled via JS in app.js */
.composer-send.has-content {
  background: var(--accent) !important;
  color: #fff !important;
}
.composer-send.has-content:hover { background: var(--accent-h) !important; }

/* iOS-safe scroll on long sheets */
.picker-sheet-list,
.settings-sheet-body,
.chats-sheet-list,
.model-list { -webkit-overflow-scrolling: touch; }


/* ═════════════════════════════════════════════════════════════
   v49 — Skills/Plugins as icon-only buttons inside composer-actions.
   Old composer-extras row removed. Each icon shows a small terracotta
   badge in the corner if there are active items.
   ═════════════════════════════════════════════════════════════ */
.composer-extras { display: none !important; }
.ce-icon {
  position: relative;
  color: var(--ink-70) !important;
}
.ce-icon:hover { background: var(--ink-08) !important; color: var(--ink) !important; }
.ce-icon.is-active { color: var(--accent) !important; }
.ce-icon .ce-count {
  position: absolute;
  top: 1px; right: 1px;
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--paper);
  border-radius: 999px;
  font: 600 9px var(--font-mono, monospace);
  line-height: 1;
}


/* ═════════════════════════════════════════════════════════════
   v49.1 — Canvas sheet: transition-based slide-up (both directions).
   IMPORTANT: do NOT use `inset: auto` here — it would reset the
   top/left/right/bottom anchors and the panel would position itself
   wherever, leaving it permanently visible.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .canvas {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: var(--appbar-h, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--paper) !important;
    z-index: 95 !important;
    overflow: hidden;
    border: 0;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -16px 40px -12px rgba(26,25,22,0.32) !important;
    transform: translateY(110%) !important;
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    animation: none !important;
    pointer-events: none;
    visibility: visible !important;
  }
  body.canvas-sheet-open .canvas {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  body.mode-bot .canvas { transform: translateY(110%) !important; }
  body.mode-bot.canvas-sheet-open .canvas { transform: translateY(0) !important; }
}

/* ═════════════════════════════════════════════════════════════
   v49 — Drawer slide-in animation (currently slides via .is-open
   class but the close direction is abrupt; smooth both ways).
   ═════════════════════════════════════════════════════════════ */
.drawer .drawer-panel,
.drawer-panel {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.drawer.hidden .drawer-panel { transform: translateX(-100%); }
.drawer:not(.hidden) .drawer-panel { transform: translateX(0); }
.drawer-shade {
  transition: opacity 0.28s ease-out !important;
}
.drawer.hidden .drawer-shade { opacity: 0; pointer-events: none; }
.drawer:not(.hidden) .drawer-shade { opacity: 1; }


/* ═════════════════════════════════════════════════════════════
   v48 — BOLDER MOBILE PASS
   ─────────────────────────────────────────────────────────────
   User feedback: "иконки маленькие и некрасивые, всё не то".
   Going bigger and more confident. Apple HIG-compliant 44px+
   touch targets, 22-24px stroke icons, prominent brand mark,
   starter cards in empty state, hero composer.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Appbar — taller, bigger icons, confident brand ──── */
  .appbar { height: 60px !important; padding: 0 14px !important; }
  .stage { padding-top: 8px !important; }

  #burgerBtn {
    width: 44px !important; height: 44px !important;
    border-radius: 14px !important;
  }
  #burgerBtn svg { width: 22px !important; height: 22px !important; stroke-width: 1.6 !important; }

  .appbar-right #newChatBtn {
    width: 44px !important; height: 44px !important;
  }
  .appbar-right #newChatBtn svg { width: 18px !important; height: 18px !important; stroke-width: 1.8 !important; }

  /* ── Brand mark — big and unmissable ──────────────────── */
  .brand-svg { height: 34px !important; }
  .brand-svg-dot { transform-origin: 89px 27.5px; }

  /* ── Empty state — big serif headline + 4 starter cards ─ */
  .chat-log {
    padding: 20px 16px 16px !important;
    gap: 24px !important;
  }
  .empty-state {
    margin: auto !important;
    padding: 16px 4px !important;
    gap: 18px !important;
  }
  .empty-title {
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    max-width: 340px !important;
  }
  .empty-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--ink-55) !important;
    max-width: 320px !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }
  /* Starter prompt grid — 2x2 of clickable hint cards */
  .empty-starters {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin: 4px auto 0;
  }
  .empty-starter {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 14px 18px;
    background: var(--paper);
    border: 1.5px solid var(--ink-12);
    border-radius: 18px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.22s;
    min-height: 96px;
    box-shadow: 0 4px 14px -8px rgba(26,25,22,0.08);
  }
  .empty-starter:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px var(--accent-glow);
  }
  .empty-starter:active { transform: scale(0.97); }
  .empty-starter-icon { font-size: 26px; line-height: 1; }
  .empty-starter-text {
    font-size: 14px; line-height: 1.4;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  /* ── Composer — hero card with generous padding ───────── */
  .composer { padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) !important; }
  .composer-input {
    border-radius: 26px !important;
    padding: 6px !important;
    border-width: 1.5px !important;
    box-shadow: 0 12px 36px -18px rgba(26,25,22,0.22),
                0 2px 6px -2px rgba(26,25,22,0.05) !important;
  }
  .composer-input:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 14px 42px -16px var(--accent-glow),
                0 2px 8px -2px rgba(26,25,22,0.06) !important;
  }
  #chatInput {
    padding: 16px 18px 8px !important;
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    min-height: 60px !important;
  }

  /* Toolbar — bigger icons, bigger touch targets */
  .composer-actions { padding: 5px 8px 8px !important; gap: 5px !important; }
  .composer-clip {
    width: 44px !important; height: 44px !important;
  }
  .composer-clip svg { width: 22px !important; height: 22px !important; stroke-width: 1.7 !important; }
  .composer-send {
    width: 44px !important; height: 44px !important;
  }
  .composer-send svg { width: 18px !important; height: 18px !important; stroke-width: 2 !important; }

  .composer-plan, .model-trigger {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-width: 1px !important;
  }
  .bt-inline { padding: 3px !important; }
  .bt-inline .bt-opt {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    min-height: 30px !important;
  }
  .bt-inline .bt-opt svg { width: 14px !important; height: 14px !important; }

  /* Skills/Plugins composer chips — bigger */
  .composer-extras { padding: 0 10px 6px !important; gap: 8px !important; }
  .ce-btn {
    padding: 8px 14px 8px 11px !important;
    font-size: 13.5px !important;
    min-height: 36px !important;
    gap: 8px !important;
    font-weight: 500;
  }
  .ce-btn svg { width: 15px !important; height: 15px !important; stroke-width: 1.6 !important; }
  .ce-count {
    height: 18px !important; min-width: 18px !important;
    font-size: 11px !important; padding: 0 6px !important;
    font-weight: 600;
  }

  /* ── Bigger eye/code icon in topbar ────────────────────── */
  .chat-show-canvas {
    width: 42px !important; height: 42px !important;
    border-radius: 14px !important;
  }
  .chat-show-canvas svg { width: 18px !important; height: 18px !important; stroke-width: 1.7 !important; }

  /* ── User bubble — slightly more padding for readability ─ */
  .msg-user .msg-bubble {
    padding: 13px 18px !important;
    font-size: 16px !important;
    border-radius: 22px 22px 6px 22px !important;
  }

  /* Assistant text — stay readable */
  .msg-assistant .plain-text {
    font-size: 16.5px !important;
    line-height: 1.65 !important;
  }

  /* File pill — bigger target */
  .file-pill {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
  }
  .file-pill .fp-icon { width: 14px !important; height: 14px !important; }

  /* Typing dots — bigger so they're visibly alive */
  .typing-dots span {
    width: 8px !important; height: 8px !important;
  }

  /* Picker sheet items — bigger icons + breathing */
  .picker-sheet-list .ps-item {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    min-height: 64px !important;
    gap: 14px !important;
  }
  .picker-sheet-list .ps-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }
  .picker-sheet-list .ps-name { font-size: 15px !important; }
  .picker-sheet-list .ps-desc { font-size: 13px !important; line-height: 1.5 !important; }
  .picker-sheet-list .ps-check {
    width: 26px !important; height: 26px !important;
  }

  /* Drawer items bigger */
  .drawer-nav .dn-item {
    padding: 14px 16px !important;
    min-height: 56px !important;
    border-radius: 14px !important;
  }
  .drawer-nav .dn-item .dn-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--bg-soft);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .drawer-nav .dn-item .dn-icon svg { width: 18px; height: 18px; }
  .dn-title { font-size: 15.5px !important; }

  /* Chat title — bigger */
  .chat-topbar { padding: 10px 16px !important; }
  .chat-topbar-title { font-size: 15px !important; font-weight: 600 !important; }
}

/* Bigger icons everywhere on mobile (not !important to allow override) */
@media (max-width: 720px) {
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .icon-btn svg { width: 18px; height: 18px; }
}

/* ═════════════════════════════════════════════════════════════
   v52 — Remove the orange focus border on the composer when the
   textarea gains focus. User explicitly asked: just a subtle ink
   border that doesn't change on focus.
   ═════════════════════════════════════════════════════════════ */
.composer-input:focus-within {
  border-color: var(--ink-12) !important;
  box-shadow: 0 12px 36px -18px rgba(26,25,22,0.22),
              0 2px 6px -2px rgba(26,25,22,0.05) !important;
}
@media (max-width: 720px) {
  .composer-input:focus-within {
    border-color: var(--ink-12) !important;
    box-shadow: 0 12px 36px -18px rgba(26,25,22,0.22),
                0 2px 6px -2px rgba(26,25,22,0.05) !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   v52 — Top model picker (claude.ai-style) above chat content
   ═════════════════════════════════════════════════════════════ */
.model-trigger-top {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px;
  margin-left: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  color: var(--ink-70);
  font: 500 12.5px var(--font-sans);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.model-trigger-top:hover {
  background: var(--paper);
  border-color: var(--ink-25);
}
.model-trigger-top .mp-ic {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
}
.model-trigger-top .mp-label { font-weight: 600; }
.model-trigger-top .mp-caret { color: var(--ink-55); }


/* ═════════════════════════════════════════════════════════════
   v52 — Hamburger close animation, swipe-down handle on canvas,
   move close-X into canvas-head (not floating), better burger icons.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Move the canvas-sheet close button INTO the head row instead of
     floating in the gap above. Becomes a normal flex sibling. */
  .canvas-sheet-close {
    position: static !important;
    top: auto !important; right: auto !important;
    width: 36px !important; height: 36px !important;
    flex-shrink: 0;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid var(--ink-08) !important;
    color: var(--ink-70) !important;
    box-shadow: none !important;
  }
  .canvas-sheet-close:hover {
    background: var(--bg-soft) !important;
    border-color: var(--ink-25) !important;
    color: var(--ink) !important;
  }
  .canvas-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ink-08);
    flex-shrink: 0 !important;
  }

  /* Drawer close-X also styled consistent */
  .drawer-head .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
}


/* ═════════════════════════════════════════════════════════════
   v51 — Sheet animations + toolbar overflow + bigger brand
   ─────────────────────────────────────────────────────────────
   Fixes:
   1) All sheets used to disappear instantly because the global
      `.hidden { display: none }` rule killed their transitions.
      Force display:flex when hidden, hide via opacity/transform.
   2) Composer toolbar overflowed on small phones — add wrap and
      keep [+] / [send] always anchored at the corners.
   3) Brand SVG bumped 32 → 40 px for clarity.
   4) New-chat (+) button icon bumped to 22 px.
   ═════════════════════════════════════════════════════════════ */

/* ── Sheet visibility — keep in DOM so transitions fire ─────── */
.chats-sheet,
.settings-sheet,
.picker-sheet,
#skillsSheet,
#pluginsSheet {
  /* default: visible, fully animated */
}
.chats-sheet.hidden,
.settings-sheet.hidden,
.picker-sheet.hidden,
#skillsSheet.hidden,
#pluginsSheet.hidden {
  display: flex !important;             /* override global .hidden display:none */
  opacity: 1 !important;                 /* keep card visible during animation */
  visibility: visible !important;
  pointer-events: none;
}

/* Card slides off-screen when sheet has .hidden */
.chats-sheet.hidden .chats-sheet-card,
.settings-sheet.hidden .settings-sheet-card,
.picker-sheet.hidden .picker-sheet-card,
#skillsSheet.hidden .picker-sheet-card,
#pluginsSheet.hidden .picker-sheet-card {
  transform: translateY(110%) !important;
  transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Backdrop fades */
.chats-sheet.hidden .chats-sheet-shade,
.settings-sheet.hidden .settings-sheet-shade,
.picker-sheet.hidden .picker-sheet-shade {
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
.chats-sheet:not(.hidden) .chats-sheet-shade,
.settings-sheet:not(.hidden) .settings-sheet-shade,
.picker-sheet:not(.hidden) .picker-sheet-shade {
  opacity: 1;
  transition: opacity 0.28s ease-out;
}


/* ── Composer toolbar — single row, send pinned right, no wrap ─ */
@media (max-width: 720px) {
  .composer-actions {
    flex-wrap: nowrap !important;
    column-gap: 4px !important;
    overflow: visible;
  }
  .composer-clip,
  .ce-icon,
  .composer-send,
  .composer-plan,
  .model-trigger,
  .bt-inline { flex-shrink: 0 !important; }
  .composer-spacer { flex: 1 1 0 !important; min-width: 0 !important; }

  /* Hide labels on small phones so 6 actions + send fit in one row.
   * Model picker hidden entirely — model defaults to AUTO and the
   * heavy lifting is in the Settings sheet. */
  .composer-plan-label { display: none !important; }
  .model-trigger { display: none !important; }
  .composer-plan { padding: 8px 10px !important; min-width: 36px; }
  .bt-inline .bt-opt span { display: none !important; }
  .bt-inline .bt-opt {
    padding: 7px 10px !important;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bt-inline .bt-opt svg { margin: 0; }

  /* Send button — always last, anchored to the right */
  .composer-send {
    margin-left: auto !important;
  }
}


/* ── Brand prominent in editor appbar ─────────────────────────── */
@media (max-width: 720px) {
  .brand-svg { height: 50px !important; }    /* hero-grade brand presence */
  .appbar { height: 72px !important; padding: 0 14px !important; }
  .stage { padding-top: 12px !important; }
}


/* ── New-chat (+) button — proportional, not oversized ──────── */
@media (max-width: 720px) {
  .appbar-right #newChatBtn {
    width: 38px !important; height: 38px !important;
    box-shadow: 0 4px 12px -6px var(--accent-glow) !important;
  }
  .appbar-right #newChatBtn svg {
    width: 16px !important; height: 16px !important;
    stroke-width: 2 !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   v54.1 — Burger morph (3 lines ↔ X). Smooth BOTH ways. The X
   crosses at the same center 11,11 — no drunk lean. Slower close
   so the reverse animation is visible.
   ═════════════════════════════════════════════════════════════ */
.burger-icon { overflow: visible; }
.burger-icon line {
  transform-origin: 11px 11px;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.32s ease;
}
.burger-btn.is-open .burger-icon .burger-l1 {
  transform: translateY(4px) rotate(45deg);
}
.burger-btn.is-open .burger-icon .burger-l2 {
  opacity: 0;
  transform: scaleX(0);
}
.burger-btn.is-open .burger-icon .burger-l3 {
  transform: translateY(-4px) rotate(-45deg);
}


/* ═════════════════════════════════════════════════════════════
   v53 — chat-topbar removed; appbar holds eye / launch / model /
   context-meter / new-chat / burger. Layout cleaner.
   ═════════════════════════════════════════════════════════════ */
.chat-topbar { display: none !important; }

.context-meter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  color: var(--ink-70);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  cursor: default;
}
.context-meter svg { display: block; }
.context-meter.is-warn #contextMeterArc { stroke: #D97706; }
.context-meter.is-hot  #contextMeterArc { stroke: #C0392B; }
.context-meter.is-warn { border-color: rgba(217,119,6,0.35); color: #D97706; }
.context-meter.is-hot  { border-color: rgba(192,57,43,0.4); color: #C0392B; }

/* v54 — bold text-only model picker. No icon, no border, no
   vertical bar. Just the model name and a chevron. Click opens
   the existing model-sheet. */
.model-trigger-bold {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font: 700 14px var(--font-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.model-trigger-bold:hover { background: var(--ink-08); }
.model-trigger-bold .mp-label {
  font-weight: 700;
  color: var(--ink);
}
.model-trigger-bold .mp-caret {
  color: var(--ink-55);
  transition: transform 0.22s var(--ease, ease);
}
.model-trigger-bold[aria-expanded="true"] .mp-caret { transform: rotate(180deg); }
@media (max-width: 720px) { .model-trigger-bold { font-size: 13.5px; padding: 5px 7px; } }
@media (max-width: 380px) { .model-trigger-bold { display: none !important; } }

.work-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  flex-shrink: 0;
}
.work-mode-toggle .wm-opt {
  min-width: 50px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  color: var(--ink-55);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.work-mode-toggle .wm-opt.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(31,30,27,0.12);
}
.work-mode-toggle .wm-opt:hover { color: var(--ink); }
@media (max-width: 720px) {
  .work-mode-toggle .wm-opt { min-width: 42px; padding: 5px 7px; font-size: 11.5px; }
}
@media (max-width: 420px) {
  .work-mode-toggle .wm-opt { min-width: 0; padding-inline: 7px; }
  .work-mode-toggle .wm-opt[data-work-mode="build"] { font-size: 0; }
  .work-mode-toggle .wm-opt[data-work-mode="build"]::after { content: 'B'; font-size: 11px; }
  .work-mode-toggle .wm-opt[data-work-mode="discuss"] { font-size: 0; }
  .work-mode-toggle .wm-opt[data-work-mode="discuss"]::after { content: 'D'; font-size: 11px; }
}


/* v54 — canvas-head close-X, anchored to the right (after canvas-actions).
   NO position absolute, NO floating: it's a flex sibling. */
.canvas-sheet-close {
  position: static !important;
  inset: auto !important;
  margin-left: 4px;
  width: 36px !important; height: 36px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid var(--ink-08) !important;
  color: var(--ink-70) !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.canvas-sheet-close:hover {
  background: var(--bg-soft) !important;
  border-color: var(--ink-25) !important;
  color: var(--ink) !important;
}


/* v54 — drawer empty stripe fix (kill the unused space above first nav item) */
.drawer .drawer-nav { padding-top: 6px !important; }
.drawer .drawer-head + .drawer-nav { margin-top: 0 !important; }

.chat-show-canvas-app {
  width: 38px !important; height: 38px !important;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--ink-08);
  color: var(--ink-70);
}
.chat-show-canvas-app:hover {
  background: var(--bg-soft);
  border-color: var(--ink-25);
  color: var(--ink);
}
body.mode-bot .chat-show-canvas-app { display: none !important; }

.chat-launch-app {
  display: none !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: var(--r-pill) !important;
  background: var(--accent) !important;
  color: #fff !important;
}
body.mode-bot .chat-launch-app { display: inline-flex !important; }
.chat-launch-app.is-disabled { opacity: 0.55; filter: grayscale(0.4); }

@media (max-width: 720px) {
  .appbar { gap: 4px !important; padding: 0 10px !important; }
  .appbar-right { gap: 4px !important; }
  .context-meter { padding: 3px 7px 3px 4px; gap: 3px; font-size: 10.5px; }
  .context-meter .cm-label { display: none; }
  .model-trigger-app { padding: 6px 9px 6px 7px; font-size: 11.5px; }
  .model-trigger-app .mp-label { display: none; }
  .chat-launch-app svg { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .model-trigger-app { display: none !important; }
}


/* ═════════════════════════════════════════════════════════════
   v53 — Markdown rendering inside .plain-text (assistant prose)
   ═════════════════════════════════════════════════════════════ */
.msg-assistant .plain-text > * { margin: 0; }
.msg-assistant .plain-text > * + * { margin-top: 10px; }
.msg-assistant .plain-text p { line-height: 1.6; }
.msg-assistant .plain-text strong { font-weight: 700; color: var(--ink); }
.msg-assistant .plain-text em { font-style: italic; }
.msg-assistant .plain-text code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.msg-assistant .plain-text h3, .msg-assistant .plain-text h4, .msg-assistant .plain-text h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 18px;
  color: var(--ink);
}
.msg-assistant .plain-text h3 { font-size: 18px; }
.msg-assistant .plain-text h4 { font-size: 16px; }
.msg-assistant .plain-text h5 { font-size: 14.5px; }
.msg-assistant .plain-text ul,
.msg-assistant .plain-text ol {
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.msg-assistant .plain-text li { line-height: 1.55; }
.msg-assistant .plain-text ul li { list-style: disc; }
.msg-assistant .plain-text ol li { list-style: decimal; }
.msg-assistant .plain-text blockquote {
  border-left: 2.5px solid var(--accent);
  padding-left: 14px;
  color: var(--ink-70);
  font-style: italic;
}
.msg-assistant .plain-text hr {
  border: 0;
  border-top: 1px solid var(--ink-08);
  margin: 14px 0;
}
.msg-assistant .plain-text a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
}
.msg-assistant .plain-text a:hover {
  border-bottom-color: var(--accent);
}


/* ═════════════════════════════════════════════════════════════
   v55 — Claude Mobile UX layer (per detailed spec)
   ─────────────────────────────────────────────────────────────
   Applied to existing markup. Targets:
   • User bubble: clay-soft pill, asymmetric corner (right-bottom 6px)
   • Assistant: NO bubble — text on cream, leading clay dot
   • Activity cards: paper card with hairline border, clay accents
   • Splash on first paint
   • Bottom sheets — handle 36×4, spring slide
   • Composer: cream + paper, ink send button, clay stop on busy
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* User bubble — Claude-mobile asymmetric */
  .msg-user .msg-bubble {
    background: var(--clay-soft) !important;
    color: var(--ink) !important;
    padding: 12px 16px !important;
    border-radius: 18px 18px 6px 18px !important;
    max-width: 78% !important;
    box-shadow: none !important;
    font: 500 15px/1.5 var(--font-sans) !important;
  }
  .msg-user .msg-bubble strong { font-weight: 600; }

  /* Assistant — NO bubble. Just text on cream, leading clay dot */
  .msg-assistant {
    align-items: flex-start !important;
    width: 100%;
    padding-left: 4px;
  }
  .msg-assistant .msg-bubble {
    background: transparent !important;
    padding: 0 !important;
    width: 100%;
    max-width: 88%;
  }
  .msg-assistant .plain-text {
    font: 400 16px/1.62 var(--font-sans) !important;
    color: var(--ink) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    position: relative;
  }
  /* v60 — leading clay dot убран по запросу. Остаётся только typing-dots
     (3 точки загрузки) во время стриминга. */
  .msg-assistant .msg-bubble > .plain-text:first-child::before,
  .msg-assistant .msg-bubble > *:first-child:not(.plain-text)::before {
    content: none !important;
  }

  /* Stack messages with 24px breathing room (per spec) */
  .chat-log { gap: 24px !important; }

  /* File pill → Activity card per spec */
  .file-pill {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px !important;
    background: var(--paper) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    font: 500 13px/1.4 var(--font-sans) !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 2px rgba(31,30,27,0.04), 0 4px 14px rgba(31,30,27,0.05);
  }
  .file-pill::before {
    content: '';
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--clay-soft);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 1h6l3 3v9a1 1 0 01-1 1H4a1 1 0 01-1-1V2a1 1 0 011-1z' stroke='%23C96442' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M11 1v3h3' stroke='%23C96442' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
  }
  .file-pill .fp-icon {
    width: 16px !important; height: 16px !important;
    margin-left: auto;
    color: var(--clay) !important;
  }
  .file-pill.is-done { background: var(--paper) !important; border-color: var(--hairline) !important; opacity: 0.78; }
  .file-pill.is-done::before {
    background-color: var(--success-soft);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%235A8B5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  }
  .file-pill.is-done .fp-icon { display: none; }

  .activity-card .activity-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .activity-card .activity-title {
    font-weight: 700;
    color: var(--ink);
  }
  .activity-card .activity-meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 12px/1.25 var(--font-mono);
    color: var(--ink-55);
  }
  .activity-card .activity-state {
    flex-shrink: 0;
    padding: 4px 7px;
    border-radius: var(--r-pill);
    background: var(--clay-soft);
    color: var(--clay-deep);
    font: 700 10px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .activity-card.is-done .activity-state {
    background: var(--success-soft);
    color: var(--success);
  }
  .activity-card.is-error .activity-state {
    background: rgba(192,57,43,0.10);
    color: #C0392B;
  }
  .activity-card.is-error::before {
    background-color: rgba(192,57,43,0.10);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23C0392B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .activity-card.is-error .fp-icon { display: none; }

  /* Composer — cream surround + paper input */
  .composer { background: var(--cream) !important; }
  .composer-input {
    background: var(--paper) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(31,30,27,0.04), 0 4px 14px rgba(31,30,27,0.06) !important;
  }
  .composer-input:focus-within {
    border-color: var(--hairline-2) !important;
    box-shadow: 0 1px 2px rgba(31,30,27,0.04), 0 6px 18px rgba(31,30,27,0.08) !important;
  }
  #chatInput {
    font: 400 16px/1.5 var(--font-sans) !important;
    color: var(--ink) !important;
  }
  #chatInput::placeholder { color: var(--muted) !important; }

  /* Send: round, ink. Pending → square clay stop (toggle handled in JS) */
  .composer-send {
    background: var(--ink) !important;
    color: var(--cream) !important;
    border-radius: 50% !important;
    width: 40px !important; height: 40px !important;
  }
  .composer-send svg { color: var(--cream) !important; }
  .composer-send.is-stop {
    background: var(--clay) !important;
    color: #fff !important;
    border-radius: 8px !important;
  }
  .composer-send:disabled {
    background: var(--cream-deep) !important;
    color: var(--muted) !important;
  }

  /* Composer-clip → round 36 with hairline border */
  .composer-clip,
  .ce-icon {
    width: 36px !important; height: 36px !important;
    background: var(--cream-soft) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 50% !important;
    color: var(--ink-2) !important;
  }
  .ce-icon.is-active { color: var(--clay) !important; border-color: var(--clay) !important; }
}


/* ═════════════════════════════════════════════════════════════
   v56 — Splash = LAUNCH VIDEO. Full-screen, plays once, fades.
   Hidden via JS on `ended` event or fallback timeout.
   ═════════════════════════════════════════════════════════════ */
.splash-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  /* v61 — фон совпадает с краями hero-loop.mp4 (sampled rgb(229,219,205)) */
  background: #E5DBCD;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  overflow: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  opacity: 1;
}
.splash-overlay.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-video {
  /* Smaller, centred — не во весь экран. Видео занимает ~60% от меньшей
     стороны, обрезая лишние края, но оставляя cream-рамку вокруг. */
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);
  max-width: 420px;
  max-height: 420px;
  object-fit: contain;
  display: block;
}


/* ═════════════════════════════════════════════════════════════
   v62 — Canvas pane = floating bottom-sheet, swipe-down dismiss.
   Изменения относительно v61:
   • Backdrop = реальный DOM-элемент .canvas-sheet-backdrop, а не
     body::after. На iOS Safari (и Telegram WebView) псевдоэлементы
     с position:fixed inset:0 рендерятся непредсказуемо — иногда
     перекрывают sheet. Реальный <div> ведёт себя стабильно.
   • Один-единственный близкий-X (внутри canvas-actions, в потоке).
   • Splash background = #E5DBCD — matches edge of hero-loop-v2.mp4.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body.canvas-sheet-open {
    overflow: hidden;
  }
  /* Real-DOM backdrop — переопределяем ранние правила */
  .canvas-sheet-backdrop {
    display: none !important;
    position: fixed;
    inset: 0;
    background: rgba(31,30,27,0.42);
    z-index: 94;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.canvas-sheet-open .canvas-sheet-backdrop {
    display: block !important;
    animation: canvasBackdropFade 0.24s ease-out;
  }
  @keyframes canvasBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Канвас-пэйн поверх backdrop. */
  .canvas {
    top: calc(var(--appbar-h, 56px) + 14px) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -22px 60px -16px rgba(31,30,27,0.45) !important;
    z-index: 96 !important;
    touch-action: pan-y;
    pointer-events: auto !important;
  }
  /* v95 — will-change активируем только когда пэйн открыт/анимируется,
     иначе постоянный композитный слой жрёт память на мобильных. */
  body.canvas-sheet-open .canvas,
  .canvas.is-dragging {
    will-change: transform;
  }
  body.canvas-sheet-open .canvas {
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Drag-handle — поверх head, кликабельный, заметный */
  .canvas-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: rgba(31,30,27,0.22);
    z-index: 6;
    cursor: grab;
    transition: background 0.18s, transform 0.18s;
    touch-action: none;
  }
  .canvas-grip:active { cursor: grabbing; background: rgba(31,30,27,0.4); }
  /* Скрываем ::before drag-handle (заменён DOM-элементом .canvas-grip) */
  .canvas::before { display: none !important; }

  /* Канвас-head — больше воздуха сверху, чтобы tabs не клеились к шапке */
  .canvas-head {
    padding-top: 30px !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px;
    align-items: center;
  }
  /* Tabs — занимают первую строку, actions ниже на узких экранах */
  .canvas-tabs {
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .canvas-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 4px;
  }
  /* Close-X — В ПОТОКЕ внутри canvas-actions, НЕ floating-fixed */
  .canvas-sheet-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid var(--ink-08, rgba(31,30,27,0.10)) !important;
    color: var(--ink-2, rgba(31,30,27,0.68)) !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  /* Live-drag transform во время свайпа */
  .canvas.is-dragging {
    transition: none !important;
    will-change: transform;
  }
}
@media (max-width: 480px) {
  .canvas {
    top: calc(var(--appbar-h, 56px) + 10px) !important;
  }
  .canvas-head {
    padding-top: 28px !important;
  }
}
@media (max-width: 480px) {
  .splash-video {
    width: min(70vw, 70vh);
    height: min(70vw, 70vh);
  }
}


/* v64 — polish pass from inline browser comments */
#apiStatus {
  display: none !important;
}

.drawer .drawer-panel,
.drawer-panel {
  transform: translateX(106%) scale(0.985) !important;
  opacity: 0;
  transition:
    transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease-out !important;
}
.drawer.is-open .drawer-panel {
  transform: translateX(0) scale(1) !important;
  opacity: 1 !important;
  animation: drawerPanelIn 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}
.drawer.is-closing .drawer-panel,
.drawer:not(.hidden):not(.is-open) .drawer-panel {
  transform: translateX(106%) scale(0.985) !important;
  opacity: 0 !important;
}
.drawer.is-closing .drawer-panel {
  animation: drawerPanelOut 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}
.drawer .drawer-shade {
  opacity: 0 !important;
  transition: opacity 0.32s ease-out !important;
}
.drawer.is-open .drawer-shade {
  opacity: 1 !important;
  animation: drawerShadeIn 0.28s ease-out both !important;
}
.drawer.is-closing .drawer-shade,
.drawer:not(.hidden):not(.is-open) .drawer-shade {
  opacity: 0 !important;
  pointer-events: none !important;
}
.drawer.is-closing .drawer-shade {
  animation: drawerShadeOut 0.28s ease-out both !important;
}
@keyframes drawerPanelIn {
  from { transform: translateX(106%) scale(0.985); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes drawerPanelOut {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(106%) scale(0.985); opacity: 0; }
}
@keyframes drawerShadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drawerShadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.burger-icon line {
  transition:
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s ease-out !important;
}

.context-meter {
  display: inline-grid !important;
  grid-auto-flow: column;
  place-items: center;
}

.work-mode-toggle .wm-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.work-mode-toggle .wm-opt::before {
  content: '';
  width: 13px;
  height: 13px;
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}
.work-mode-toggle .wm-opt[data-work-mode="build"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 1.5L3 9h4l-.5 5.5L13 6H9.2l.3-4.5z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 1.5L3 9h4l-.5 5.5L13 6H9.2l.3-4.5z' fill='black'/%3E%3C/svg%3E");
}
.work-mode-toggle .wm-opt[data-work-mode="discuss"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h10a1.5 1.5 0 011.5 1.5v5A1.5 1.5 0 0113 11H8l-3.8 3v-3H3A1.5 1.5 0 011.5 9.5v-5A1.5 1.5 0 013 3z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h10a1.5 1.5 0 011.5 1.5v5A1.5 1.5 0 0113 11H8l-3.8 3v-3H3A1.5 1.5 0 011.5 9.5v-5A1.5 1.5 0 013 3z' fill='black'/%3E%3C/svg%3E");
}

.chat-show-canvas-app {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.chat-show-canvas-app:hover {
  background: var(--cream-soft) !important;
}

.appbar-right #newChatBtn {
  background: var(--cream-soft) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.appbar-right #newChatBtn:hover {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

.composer-send,
.composer-send.has-content {
  background: var(--cream-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 1px 2px rgba(31,30,27,0.04), 0 6px 18px rgba(31,30,27,0.08) !important;
}
.composer-send svg,
.composer-send.has-content svg {
  color: var(--ink) !important;
}
.composer-send:hover:not(:disabled),
.composer-send.has-content:hover {
  background: var(--paper) !important;
  color: var(--clay) !important;
  transform: scale(1.04);
}
.composer-send.is-stop {
  background: var(--clay) !important;
  color: #fff !important;
  border-color: var(--clay) !important;
}
.composer-send.is-stop svg { color: #fff !important; }

@media (max-width: 1200px) {
  .composer-actions .model-trigger {
    display: inline-flex !important;
    width: 38px;
    height: 36px;
    min-width: 38px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
  }
  .composer-actions .model-trigger .mp-label,
  .composer-actions .model-trigger .mp-caret {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .context-meter {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--cream-soft) !important;
  }
  .context-meter svg {
    width: 22px !important;
    height: 22px !important;
  }
  .context-meter .cm-label { display: none !important; }

  .appbar-right #newChatBtn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-grid !important;
    place-items: center;
  }
  .appbar-right #newChatBtn .btn-label-mob { display: none !important; }
  .chat-show-canvas-app {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
  }

  body.canvas-sheet-open .canvas-sheet-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  .composer-actions {
    gap: 3px !important;
  }
  .composer-actions .composer-clip,
  .composer-actions .ce-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .composer-actions .composer-plan {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .composer-actions .bt-inline .bt-opt {
    width: 30px !important;
    height: 32px !important;
    padding: 0 !important;
  }
  .composer-actions .model-trigger {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    display: inline-flex !important;
  }
  .composer-actions .composer-send {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 420px) {
  .work-mode-toggle .wm-opt {
    width: 30px;
    height: 28px;
    min-width: 30px;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .work-mode-toggle .wm-opt::before {
    width: 14px;
    height: 14px;
  }
  .work-mode-toggle .wm-opt::after {
    content: none !important;
  }
}

/* v67 — inline comments: real logo, cleaner context meter, auto site/bot */
.empty-inline-logo {
  display: inline-flex;
  align-items: center;
  width: 2.18em;
  height: 0.82em;
  vertical-align: -0.08em;
}
.empty-inline-logo .brand-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.empty-inline-logo .brand-svg-text {
  font-size: 30px;
}
.empty-inline-logo .brand-svg-dot {
  fill: var(--accent, #CC785C);
}
.context-meter {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.bt-inline {
  display: none !important;
}

@media (max-width: 720px) {
  .context-meter {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .context-meter svg {
    filter: none !important;
  }
  .empty-inline-logo {
    width: 2.04em;
    height: 0.78em;
    vertical-align: -0.07em;
  }
  .composer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .composer-input {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    overflow: hidden !important;
  }
  .composer-actions {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    gap: 4px !important;
    padding: 5px 6px 7px !important;
  }
  .composer-actions .composer-clip,
  .composer-actions .ce-icon,
  .composer-actions .composer-plan,
  .composer-actions .model-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
  }
  .composer-actions .composer-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    margin-left: auto !important;
    transform: none !important;
  }
  .composer-actions .composer-send:hover:not(:disabled),
  .composer-actions .composer-send.has-content:hover {
    transform: none !important;
  }
}

@media (max-width: 340px) {
  .composer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .composer-input {
    max-width: calc(100vw - 16px) !important;
  }
  .composer-actions {
    gap: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .composer-actions .composer-clip,
  .composer-actions .ce-icon,
  .composer-actions .composer-plan,
  .composer-actions .model-trigger {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
  }
  .composer-actions .composer-send {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
}

/* v68 - picker icons, drawer polish, cloud modal refresh */
.picker-sheet-list .ps-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.9), transparent 34%),
    linear-gradient(135deg, rgba(204,120,92,0.18), rgba(31,30,27,0.06)) !important;
  color: var(--clay, #CC785C) !important;
  box-shadow:
    inset 0 0 0 1px rgba(31,30,27,0.06),
    0 8px 22px rgba(31,30,27,0.07) !important;
}
.picker-sheet-list .ps-icon[data-kind="plugin"] {
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,0.88), transparent 34%),
    linear-gradient(135deg, rgba(85,104,132,0.17), rgba(204,120,92,0.14)) !important;
  color: #4F5F72 !important;
}
.picker-sheet-list .ps-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.picker-sheet-list .ps-item {
  gap: 13px !important;
  padding: 11px 12px !important;
  border-radius: 16px !important;
}
.picker-sheet-list .ps-item.is-on .ps-icon {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.96), transparent 34%),
    linear-gradient(135deg, rgba(204,120,92,0.28), rgba(255,255,255,0.78)) !important;
  color: var(--clay, #CC785C) !important;
}

#burgerBtn,
.burger-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.burger-btn.is-open .burger-icon {
  display: none !important;
}
.burger-btn.is-open::before {
  content: "×";
  display: block;
  font: 400 32px/1 var(--font-sans, system-ui, sans-serif);
  color: var(--ink, #1F1E1B);
  transform: translateY(-1px);
}
.burger-btn:hover {
  background: rgba(31,30,27,0.06) !important;
}
.appbar-right #newChatBtn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.appbar-right #newChatBtn:hover {
  border: 0 !important;
  background: rgba(31,30,27,0.06) !important;
}

.drawer-nav .dn-item {
  isolation: isolate;
  transform-origin: 100% 50%;
}
.drawer-nav .dn-item::before {
  inset: 9px auto 9px 0 !important;
  width: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--clay, #CC785C) !important;
  opacity: 0.42;
  transform: scaleY(0.58);
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease !important;
  z-index: 0 !important;
}
.drawer-nav .dn-item:hover::before,
.drawer-nav .dn-item:focus-visible::before,
.drawer-nav .dn-item:active::before,
.drawer-nav .dn-item.is-pressed::before {
  inset: 8px auto 8px 0 !important;
  width: 3px !important;
  transform: scaleY(1);
  opacity: 0.95;
}
.drawer-nav .dn-item:hover,
.drawer-nav .dn-item:focus,
.drawer-nav .dn-item:focus-visible,
.drawer-nav .dn-item:active,
.drawer-nav .dn-item.is-pressed {
  color: var(--ink, #1F1E1B) !important;
  background: rgba(255,255,255,0.38) !important;
}
.drawer-nav .dn-item:hover .dn-sub,
.drawer-nav .dn-item:focus .dn-sub,
.drawer-nav .dn-item:focus-visible .dn-sub,
.drawer-nav .dn-item:active .dn-sub,
.drawer-nav .dn-item.is-pressed .dn-sub {
  color: var(--ink-55, rgba(31,30,27,0.55)) !important;
}
.drawer-nav .dn-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.92), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(31,30,27,0.04)) !important;
  color: var(--ink, #1F1E1B) !important;
  box-shadow:
    inset 0 0 0 1px rgba(31,30,27,0.07),
    0 8px 20px rgba(31,30,27,0.045) !important;
}
.drawer-nav .dn-icon svg {
  display: none !important;
}
.drawer-nav .dn-icon::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: currentColor;
  mask: var(--dn-mask) center / contain no-repeat;
  -webkit-mask: var(--dn-mask) center / contain no-repeat;
}
#drawerProfileBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.4-8 5.3V21h16v-1.7C20 16.4 16.4 14 12 14z' fill='black'/%3E%3C/svg%3E"); }
#drawerSubBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v11a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-11zM7 8v2h10V8H7zm0 5v2h6v-2H7z' fill='black'/%3E%3C/svg%3E"); }
.drawer-nav .dn-item:nth-child(3) .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l2.2 6.2L21 12l-6.8 3.8L12 22l-2.2-6.2L3 12l6.8-3.8L12 2z' fill='black'/%3E%3C/svg%3E"); }
#drawerCloudBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 19h9a5 5 0 00.8-9.9A7 7 0 004.4 11 4.5 4.5 0 008 19z' fill='black'/%3E%3C/svg%3E"); }
#drawerCloudAiBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 19h8.4a4.6 4.6 0 00.9-9.1A6.5 6.5 0 004.7 11.2 4.2 4.2 0 008 19zm9.5-16l.8 2.2L20.5 6l-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z' fill='black'/%3E%3C/svg%3E"); }
#drawerChatsBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14a2 2 0 012 2v8a2 2 0 01-2 2h-8l-5 4v-4H5a2 2 0 01-2-2V7a2 2 0 012-2z' fill='black'/%3E%3C/svg%3E"); }
#drawerSettingsBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h2v5H7V4zm8 0h2v10h-2V4zM4 11h8v2H4v-2zm8 5h8v2h-8v-2zM7 15h2v5H7v-5zm8 1h2v4h-2v-4z' fill='black'/%3E%3C/svg%3E"); }
#drawerNewChatBtn .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4z' fill='black'/%3E%3C/svg%3E"); }
.drawer-nav .dn-item:nth-child(9) .dn-icon { --dn-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.2L21 3l-4.2 18-4.7-5.8L7 19l1.8-6.1L3 11.2z' fill='black'/%3E%3C/svg%3E"); }

.drawer.is-open .drawer-nav .dn-item {
  animation: drawerItemIn 0.36s cubic-bezier(0.22,0.61,0.36,1) both;
}
.drawer.is-closing .drawer-nav .dn-item {
  animation: drawerItemOut 0.18s ease-in both;
}
.drawer.is-open .drawer-nav .dn-item:nth-child(1) { animation-delay: 30ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(2) { animation-delay: 55ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(3) { animation-delay: 80ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(4) { animation-delay: 105ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(5) { animation-delay: 130ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(6) { animation-delay: 155ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(7) { animation-delay: 180ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(8) { animation-delay: 205ms; }
.drawer.is-open .drawer-nav .dn-item:nth-child(9) { animation-delay: 230ms; }
@keyframes drawerItemIn {
  from { opacity: 0; transform: translateX(16px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes drawerItemOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(12px) scale(0.98); }
}

.drawer-foot {
  padding: 14px 16px 16px !important;
  border-top: 1px solid rgba(31,30,27,0.08) !important;
  background: linear-gradient(180deg, rgba(250,246,240,0), rgba(250,246,240,0.92)) !important;
}
.drawer-quota {
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.96), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.64), rgba(204,120,92,0.10)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(31,30,27,0.08),
    0 14px 32px rgba(31,30,27,0.08) !important;
}
.drawer-quota-head {
  align-items: baseline;
  font-family: var(--font-sans, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.drawer-quota-head span:first-child {
  color: var(--ink-55, rgba(31,30,27,0.55));
  font: 600 11px/1 var(--font-sans, system-ui, sans-serif);
}
.drawer-quota-head #drawerQuotaTxt {
  color: var(--ink, #1F1E1B);
  font: 700 13px/1 var(--font-mono, monospace);
}
.drawer-quota-bar {
  height: 9px !important;
  background: rgba(31,30,27,0.08) !important;
  box-shadow: inset 0 1px 2px rgba(31,30,27,0.08);
}
.drawer-quota-bar i {
  min-width: 7px;
  background: linear-gradient(90deg, #CC785C, #FF4B1F) !important;
}
.drawer-quota-sub {
  color: var(--ink-55, rgba(31,30,27,0.55)) !important;
  font-size: 11.5px !important;
}

.cloud-modal {
  background: rgba(31,30,27,0.36) !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
}
.cloud-modal-card {
  background:
    radial-gradient(circle at 84% 12%, rgba(204,120,92,0.14), transparent 30%),
    linear-gradient(180deg, #FAF6F0 0%, #F5EFE6 100%) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow: 0 32px 90px -30px rgba(31,30,27,0.48) !important;
}
.cloud-modal-head {
  min-height: 70px;
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid rgba(31,30,27,0.08) !important;
  background: rgba(255,255,255,0.32);
}
.cloud-modal-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-sans, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.cloud-brand-title {
  display: inline-flex;
  align-items: center;
  width: 64px;
  height: 25px;
  flex: 0 0 auto;
}
.cloud-brand-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cloud-title-suffix {
  color: rgba(31,30,27,0.68);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cloud-modal-head .icon-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cloud-modal-body {
  background: rgba(255,255,255,0.18);
}
.cloud-projects {
  background: rgba(255,255,255,0.24) !important;
  border-right: 1px solid rgba(31,30,27,0.08) !important;
}
.cloud-projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px !important;
  color: rgba(31,30,27,0.48) !important;
}
.cloud-proj,
.cloud-projects-list li {
  border-radius: 14px !important;
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(31,30,27,0.08) !important;
  box-shadow: 0 8px 18px rgba(31,30,27,0.035);
}
.cloud-proj:hover,
.cloud-projects-list li:hover {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(204,120,92,0.22) !important;
}
.cloud-proj.is-active,
.cloud-projects-list li.is-active {
  background: rgba(204,120,92,0.16) !important;
  border-color: rgba(204,120,92,0.45) !important;
  color: var(--ink, #1F1E1B) !important;
}
.cloud-projects-foot {
  background: rgba(250,246,240,0.68);
  border-top: 1px solid rgba(31,30,27,0.08) !important;
}
.cloud-quota-row {
  font-size: 12.5px !important;
}
.cloud-buy {
  background: var(--clay, #CC785C) !important;
  border-color: var(--clay, #CC785C) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.cloud-table-head,
.cloud-chat-log,
.cloud-table-body {
  background: transparent !important;
}
.cloud-empty {
  max-width: 360px;
  margin: auto;
  color: rgba(31,30,27,0.54) !important;
  line-height: 1.55;
}
.cloud-composer {
  border-top: 1px solid rgba(31,30,27,0.08) !important;
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(250,246,240,0), rgba(250,246,240,0.86)) !important;
}
.cloud-composer-input {
  border-radius: 20px !important;
  background: rgba(255,255,255,0.56) !important;
  border-color: rgba(31,30,27,0.10) !important;
  box-shadow: 0 16px 34px rgba(31,30,27,0.08) !important;
}
.cloud-composer-input:focus-within {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(204,120,92,0.42) !important;
}

@media (max-width: 720px) {
  :root,
  .appbar {
    --appbar-h: 72px;
  }
  .drawer .drawer-panel,
  .drawer-panel {
    top: var(--appbar-h, 56px) !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 336px !important;
    border-top: 1px solid rgba(31,30,27,0.08) !important;
    border-radius: 0 !important;
  }
  .drawer-head {
    display: none !important;
  }
  .drawer-nav {
    padding: 14px 8px 8px !important;
  }
  .drawer-nav .dn-item {
    min-height: 54px !important;
    padding: 8px 10px 8px 16px !important;
  }
  .drawer-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cloud-modal-card {
    width: 100% !important;
    height: min(88dvh, 760px) !important;
    max-height: 88dvh !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .cloud-modal-head {
    min-height: 68px;
    padding: 16px 18px 12px !important;
  }
  .cloud-brand-title {
    width: 66px;
    height: 26px;
  }
  .cloud-projects {
    max-height: 31vh !important;
    border-bottom: 1px solid rgba(31,30,27,0.08) !important;
  }
  .cloud-projects-list {
    padding: 8px 8px 10px !important;
    gap: 7px !important;
  }
  .cloud-chat-log,
  .cloud-table-body {
    padding: 16px 12px !important;
  }
  .cloud-composer {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #burgerBtn,
  .burger-btn,
  .appbar-right #newChatBtn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer.is-open .drawer-nav .dn-item,
  .drawer.is-closing .drawer-nav .dn-item {
    animation: none !important;
  }
}

/* v70 - equal Build/Discuss slider, composer cleanup, restored drawer hover */
.work-mode-toggle {
  position: relative !important;
  width: 72px !important;
  height: 34px !important;
  padding: 3px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31,30,27,0.08) !important;
  background: rgba(255,255,255,0.46) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(31,30,27,0.05) !important;
}
.work-mode-toggle::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  bottom: 3px !important;
  left: 3px !important;
  width: calc((100% - 6px) / 2) !important;
  border-radius: 999px !important;
  background: var(--paper, #fffaf3) !important;
  box-shadow:
    0 1px 2px rgba(31,30,27,0.08),
    0 8px 20px rgba(31,30,27,0.08) !important;
  transform: translateX(0) !important;
  transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1) !important;
  z-index: 0 !important;
}
.work-mode-toggle.is-discuss::before,
.work-mode-toggle[data-mode="discuss"]::before {
  transform: translateX(100%) !important;
}
.work-mode-toggle .wm-opt {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: rgba(31,30,27,0.48) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.work-mode-toggle .wm-opt.is-active {
  background: transparent !important;
  color: var(--ink, #1F1E1B) !important;
  box-shadow: none !important;
}
.work-mode-toggle .wm-opt:hover {
  color: var(--ink, #1F1E1B) !important;
  transform: translateY(-1px);
}
.work-mode-toggle .wm-opt::before {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}
.work-mode-toggle .wm-opt::after {
  content: none !important;
}

#modelPickerBtn {
  display: none !important;
}

.composer-actions .composer-spacer {
  flex: 1 1 auto !important;
}

#planModeBtn,
.composer-actions .composer-plan {
  border: 0 !important;
  box-shadow: none !important;
}
#planModeBtn:hover,
#planModeBtn:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
}
#planModeBtn.is-active {
  border: 0 !important;
  box-shadow: none !important;
}

.prompt-improve-btn {
  color: var(--ink, #1F1E1B) !important;
  background: rgba(255,255,255,0.44) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(31,30,27,0.06) !important;
}
.prompt-improve-btn:hover:not(:disabled) {
  color: var(--accent, #CC785C) !important;
  background: #fff !important;
  transform: translateY(-1px) rotate(-8deg) !important;
}
.prompt-improve-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}
.prompt-improve-btn.is-loading svg {
  animation: promptImproveSpin 0.9s linear infinite;
}
.prompt-improve-btn.is-error {
  color: var(--accent, #CC785C) !important;
  background: rgba(204,120,92,0.14) !important;
}
@keyframes promptImproveSpin {
  to { transform: rotate(360deg); }
}

.drawer-nav .dn-item::before {
  inset: 0 100% 0 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--accent, #CC785C) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: inset 0.32s cubic-bezier(0.22,0.61,0.36,1) !important;
  z-index: -1 !important;
}
.drawer-nav .dn-item:hover::before,
.drawer-nav .dn-item:focus::before,
.drawer-nav .dn-item:focus-visible::before,
.drawer-nav .dn-item:active::before,
.drawer-nav .dn-item.is-pressed::before {
  inset: 0 0 0 0 !important;
  width: auto !important;
  transform: none !important;
}
.drawer-nav .dn-item:hover,
.drawer-nav .dn-item:focus,
.drawer-nav .dn-item:focus-visible,
.drawer-nav .dn-item:active,
.drawer-nav .dn-item.is-pressed {
  color: #fff !important;
  background: transparent !important;
}
.drawer-nav .dn-item:hover .dn-icon,
.drawer-nav .dn-item:focus .dn-icon,
.drawer-nav .dn-item:focus-visible .dn-icon,
.drawer-nav .dn-item:active .dn-icon,
.drawer-nav .dn-item.is-pressed .dn-icon {
  color: #fff !important;
}
.drawer-nav .dn-item:hover .dn-icon::before,
.drawer-nav .dn-item:focus .dn-icon::before,
.drawer-nav .dn-item:focus-visible .dn-icon::before,
.drawer-nav .dn-item:active .dn-icon::before,
.drawer-nav .dn-item.is-pressed .dn-icon::before {
  background: #fff !important;
}
.drawer-nav .dn-item:hover .dn-sub,
.drawer-nav .dn-item:focus .dn-sub,
.drawer-nav .dn-item:focus-visible .dn-sub,
.drawer-nav .dn-item:active .dn-sub,
.drawer-nav .dn-item.is-pressed .dn-sub {
  color: rgba(255,255,255,0.85) !important;
}

@media (max-width: 420px) {
  .work-mode-toggle {
    width: 72px !important;
    height: 34px !important;
  }
  .work-mode-toggle .wm-opt {
    width: 100% !important;
    height: 28px !important;
  }
}

/* v71 - splash background sampled from hero-loop-v2.mp4 edge */
:root {
  --splash-bg: #E5DBCD;
}
.splash-overlay {
  background: var(--splash-bg) !important;
}
.splash-video {
  background: var(--splash-bg) !important;
  filter: none !important;
}

/* v72 - Claude-style hamburger drawer */
.drawer {
  z-index: 240 !important;
}
.burger-btn .burger-icon {
  display: block !important;
}
.burger-btn::before {
  content: none !important;
}
.burger-icon line {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.32s cubic-bezier(0.65,0,0.35,1),
    opacity 0.18s ease !important;
}
.burger-btn.is-open .burger-icon .burger-l1 { transform: translateY(4px) rotate(45deg); }
.burger-btn.is-open .burger-icon .burger-l2 { opacity: 0; transform: scaleX(0); }
.burger-btn.is-open .burger-icon .burger-l3 { transform: translateY(-4px) rotate(-45deg); }

.drawer-panel.drawer-claude {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(390px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(31,30,27,0.08) !important;
  background: #FAF9F5 !important;
  color: var(--ink, #1F1E1B) !important;
  box-shadow: 34px 0 90px rgba(31,30,27,0.14) !important;
  transform: translateX(-105%) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.drawer.is-open .drawer-panel.drawer-claude {
  transform: translateX(0) !important;
  animation: claudeDrawerIn 0.36s cubic-bezier(0.22,0.61,0.36,1) both !important;
}
.drawer.is-closing .drawer-panel.drawer-claude {
  animation: claudeDrawerOut 0.34s cubic-bezier(0.65,0,0.35,1) both !important;
}
.drawer .drawer-shade {
  background: rgba(31,30,27,0.18) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
.drawer.is-closing .drawer-shade {
  animation: claudeShadeOut 0.28s ease both !important;
}
.drawer-head.drawer-head-claude {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 92px !important;
  padding: 30px 30px 18px !important;
  border: 0 !important;
  background: transparent !important;
}
.drawer-wordmark {
  display: inline-flex;
  align-items: center;
  width: 104px;
  height: 42px;
  text-decoration: none;
  color: var(--ink, #1F1E1B);
}
.drawer-wordmark .brand-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.drawer-layout-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(31,30,27,0.62);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.drawer-layout-btn:hover {
  background: rgba(31,30,27,0.06);
  color: var(--ink, #1F1E1B);
  transform: translateY(-1px);
}
.drawer-claude .drawer-nav.drawer-menu {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 12px 26px 18px !important;
  overflow: visible !important;
}
.drawer-claude .dn-item,
.drawer-claude .drawer-chat-row,
.drawer-claude .drawer-recent-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 7px 6px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--ink, #1F1E1B) !important;
  text-decoration: none !important;
  text-align: left !important;
  font: 500 21px/1.12 var(--font-sans, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}
.drawer-claude .dn-item::before {
  content: none !important;
}
.drawer-claude .dn-item:hover,
.drawer-claude .dn-item:focus-visible,
.drawer-claude .drawer-chat-row:hover,
.drawer-claude .drawer-chat-row:focus-visible,
.drawer-claude .drawer-recent-link:hover,
.drawer-claude .drawer-recent-link:focus-visible,
.drawer-claude .drawer-recent-link.is-active {
  background: rgba(31,30,27,0.055) !important;
  color: var(--ink, #1F1E1B) !important;
  transform: translateX(2px);
}
.drawer-claude .dn-icon,
.drawer-claude .drawer-chat-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, #1F1E1B) !important;
  display: inline-grid !important;
  place-items: center !important;
}
.drawer-claude .dn-primary .dn-icon {
  background: rgba(31,30,27,0.07) !important;
}
.drawer-claude .dn-icon::before,
.drawer-claude .drawer-chat-icon::before {
  content: none !important;
}
.drawer-claude .dn-icon svg,
.drawer-claude .drawer-chat-icon svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
}
.drawer-claude .dn-title {
  font: inherit !important;
  color: inherit !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-claude .dn-sub {
  display: none !important;
}
.drawer-chat-section {
  padding: 12px 30px 0;
}
.drawer-section-label {
  margin: 8px 0 12px;
  color: rgba(31,30,27,0.55);
  font: 500 17px/1.2 var(--font-sans, system-ui, sans-serif);
}
.drawer-recents-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 18px;
}
.drawer-recents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-recent-link {
  min-height: 44px !important;
  padding: 7px 2px !important;
  gap: 0 !important;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start !important;
  font-size: 20px !important;
}
.drawer-recent-link span,
.drawer-recent-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-recent-link small {
  margin-top: 3px;
  font: 500 11.5px/1.2 var(--font-mono, monospace);
  color: rgba(31,30,27,0.46);
}
.drawer-empty {
  padding: 8px 2px;
  color: rgba(31,30,27,0.48);
  font: 500 15px/1.3 var(--font-sans, system-ui, sans-serif);
}
.drawer-account {
  padding: 18px 30px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(31,30,27,0.08) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: 0 -10px 34px rgba(31,30,27,0.04) !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
}
.drawer-account-main,
.drawer-account-plan-btn {
  border: 0;
  background: transparent;
  color: var(--ink, #1F1E1B);
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.drawer-account-main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  text-align: left;
  min-width: 0;
}
.drawer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--ink, #1F1E1B);
  color: #fff;
  font: 600 24px/1 var(--font-sans, system-ui, sans-serif);
}
.drawer-account-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.drawer-account-name {
  font: 600 21px/1.05 var(--font-sans, system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-account-plan {
  color: rgba(31,30,27,0.56);
  font: 500 16px/1.15 var(--font-sans, system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-account-plan-btn {
  width: 36px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  color: rgba(31,30,27,0.58);
}
.drawer-account-plan-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.drawer-account-plan-btn svg {
  width: 24px;
  height: 24px;
}
.drawer-quota-min {
  display: none !important;
}
.drawer-quota-min .drawer-quota-head {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font: 500 11.5px/1.2 var(--font-sans, system-ui, sans-serif) !important;
}
.drawer-quota-min .drawer-quota-sub {
  font-size: 11px !important;
}

@keyframes claudeDrawerIn {
  from { opacity: 0.72; transform: translateX(-105%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes claudeDrawerOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0.78; transform: translateX(-105%); }
}
@keyframes claudeShadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 720px) {
  .drawer .drawer-panel.drawer-claude,
  .drawer-panel.drawer-claude {
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .drawer-head.drawer-head-claude {
    display: flex !important;
    min-height: 92px !important;
    padding: 30px 30px 18px !important;
  }
  .drawer-claude .drawer-nav.drawer-menu {
    padding: 10px 26px 16px !important;
  }
  .drawer-claude .dn-item,
  .drawer-claude .drawer-chat-row,
  .drawer-claude .drawer-recent-link {
    font-size: 20px !important;
  }
}

/* v74 - richer plugin cards, compact drawers, clean hamburger cross */
.plugin-detail {
  margin: 8px 16px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(31,30,27,0.08);
  box-shadow: 0 18px 42px rgba(31,30,27,0.08);
  overflow: hidden;
  animation: pluginDetailIn 0.28s cubic-bezier(0.22,0.61,0.36,1) both;
}
.plugin-detail[hidden] { display: none !important; }
.plugin-banner {
  position: relative;
  min-height: 108px;
  overflow: hidden;
}
.plugin-banner-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.plugin-banner-content {
  position: relative;
  z-index: 1;
  min-height: 108px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  color: #fff;
}
.plugin-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.plugin-banner-icon svg {
  width: 27px;
  height: 27px;
}
.plugin-banner-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.plugin-banner-copy b {
  font: 700 18px/1.05 var(--font-sans, system-ui, sans-serif);
  letter-spacing: 0;
}
.plugin-banner-copy small {
  font: 600 10.5px/1 var(--font-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
}
.plugin-detail-body {
  padding: 12px 16px 4px;
  display: grid;
  gap: 10px;
}
.plugin-detail-body p {
  margin: 0;
  display: grid;
  gap: 4px;
}
.plugin-detail-body b {
  font: 700 11px/1.2 var(--font-mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-a, #4F5F72);
}
.plugin-detail-body span {
  font: 500 12.5px/1.45 var(--font-sans, system-ui, sans-serif);
  color: rgba(31,30,27,0.72);
}
.plugin-detail-actions {
  padding: 10px 16px 14px;
  display: flex;
  gap: 8px;
}
.plugin-detail-toggle,
.plugin-detail-close {
  height: 34px;
  border-radius: 999px;
  border: 0;
  padding: 0 14px;
  font: 700 12px/1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.plugin-detail-toggle {
  flex: 1;
  background: linear-gradient(135deg, var(--pd-a, #4F5F72), var(--pd-b, #CC785C));
  color: #fff;
}
.plugin-detail-toggle.is-on {
  background: rgba(31,30,27,0.92);
}
.plugin-detail-close {
  background: rgba(31,30,27,0.06);
  color: rgba(31,30,27,0.68);
}
.plugin-detail-toggle:hover,
.plugin-detail-close:hover {
  transform: translateY(-1px);
}
.picker-sheet-list .ps-item {
  position: relative;
  isolation: isolate;
}
.picker-sheet-list .ps-icon[data-kind="plugin"] {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.92), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--ps-a, #4F5F72) 18%, white), color-mix(in srgb, var(--ps-b, #CC785C) 20%, white)) !important;
  color: var(--ps-a, #4F5F72) !important;
}
.picker-sheet-list .ps-item.is-on .ps-icon[data-kind="plugin"] {
  color: var(--ps-b, #CC785C) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 10px 24px color-mix(in srgb, var(--ps-b, #CC785C) 20%, transparent) !important;
}
@keyframes pluginDetailIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#burgerBtn,
.burger-btn {
  position: relative !important;
}
.burger-btn.is-open .burger-icon {
  display: block !important;
  opacity: 0 !important;
}
.burger-btn.is-open::before,
.burger-btn.is-open::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  display: block !important;
  font: initial !important;
  transform-origin: center !important;
  z-index: 2 !important;
}
.burger-btn.is-open::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.burger-btn.is-open::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.drawer-claude .drawer-head.drawer-head-claude {
  min-height: 74px !important;
  padding: 18px 24px 12px !important;
}
.drawer-claude .drawer-wordmark {
  width: 82px !important;
  height: 34px !important;
}
.drawer-claude .drawer-layout-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.drawer-claude .drawer-nav.drawer-menu {
  gap: 1px !important;
  padding: 8px 22px 12px !important;
}
.drawer-claude .dn-item,
.drawer-claude .drawer-chat-row,
.drawer-claude .drawer-recent-link {
  position: relative !important;
  isolation: isolate !important;
  min-height: 42px !important;
  padding: 5px 7px !important;
  gap: 11px !important;
  border-radius: 11px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  transform: none !important;
  overflow: hidden !important;
}
.drawer-claude .dn-item::before,
.drawer-claude .drawer-chat-row::before,
.drawer-claude .drawer-recent-link::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 100% 0 0 !important;
  width: auto !important;
  border-radius: inherit !important;
  background: var(--accent, #CC785C) !important;
  opacity: 0 !important;
  transform: none !important;
  transition: inset 0.28s cubic-bezier(0.22,0.61,0.36,1) !important;
  z-index: -1 !important;
}
.drawer-claude .dn-item:hover::before,
.drawer-claude .dn-item:focus-visible::before,
.drawer-claude .dn-item:active::before,
.drawer-claude .dn-item.is-pressed::before,
.drawer-claude .drawer-chat-row:hover::before,
.drawer-claude .drawer-chat-row:focus-visible::before,
.drawer-claude .drawer-recent-link:hover::before,
.drawer-claude .drawer-recent-link:focus-visible::before,
.drawer-claude .drawer-recent-link.is-active::before {
  inset: 0 !important;
  right: 0 !important;
  width: auto !important;
  opacity: 1 !important;
}
.drawer-claude .dn-item:hover,
.drawer-claude .dn-item:focus-visible,
.drawer-claude .dn-item:active,
.drawer-claude .dn-item.is-pressed,
.drawer-claude .drawer-chat-row:hover,
.drawer-claude .drawer-chat-row:focus-visible,
.drawer-claude .drawer-recent-link:hover,
.drawer-claude .drawer-recent-link:focus-visible,
.drawer-claude .drawer-recent-link.is-active {
  background: transparent !important;
  color: #fff !important;
  transform: none !important;
}
.drawer-claude .dn-item > *,
.drawer-claude .drawer-chat-row > *,
.drawer-claude .drawer-recent-link > * {
  position: relative;
  z-index: 1;
}
.drawer-claude .dn-icon,
.drawer-claude .drawer-chat-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
.drawer-claude .dn-icon svg,
.drawer-claude .drawer-chat-icon svg {
  width: 21px !important;
  height: 21px !important;
}
.drawer-claude .dn-item:hover .dn-icon,
.drawer-claude .dn-item:focus-visible .dn-icon,
.drawer-claude .drawer-chat-row:hover .drawer-chat-icon,
.drawer-claude .drawer-chat-row:focus-visible .drawer-chat-icon {
  color: #fff !important;
}
.drawer-chat-section {
  padding: 8px 24px 0 !important;
}
.drawer-section-label {
  margin: 8px 0 8px !important;
  font-size: 13px !important;
}
.drawer-recent-link {
  min-height: 34px !important;
  padding: 5px 7px !important;
  font-size: 15px !important;
}
.drawer-account {
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
.drawer-account-main {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
}
.drawer-avatar {
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
}
.drawer-account-name {
  font-size: 16px !important;
}
.drawer-account-plan {
  font-size: 13px !important;
}

/* v77: canvas tab slider, prompt progress, annotation, and mobile editor polish */
.canvas-tabs {
  position: relative !important;
  isolation: isolate !important;
  --ctab-x: 0px;
  --ctab-w: 0px;
}
.canvas-tabs::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  top: 3px !important;
  bottom: 3px !important;
  width: var(--ctab-w, 0px) !important;
  border-radius: 999px !important;
  background: var(--ink, #201d18) !important;
  transform: translateX(var(--ctab-x, 0px)) !important;
  transition:
    transform 0.28s cubic-bezier(0.22,0.61,0.36,1),
    width 0.28s cubic-bezier(0.22,0.61,0.36,1) !important;
  pointer-events: none !important;
}
.canvas-tabs .ctab {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}
.canvas-tabs .ctab.is-active {
  background: transparent !important;
  color: #fff !important;
}
.canvas-tabs .ctab.is-active .ctab-badge {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
#canvasSheetClose.canvas-sheet-close {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#downloadBtn,
.annotate-btn {
  touch-action: manipulation !important;
  pointer-events: auto !important;
}
.annotate-btn.is-active {
  background: var(--ink, #201d18) !important;
  color: #fff !important;
}
.prompt-improve-btn {
  position: relative !important;
  overflow: visible !important;
  --prompt-progress: 0deg;
}
.prompt-improve-btn svg {
  position: relative;
  z-index: 2;
}
.prompt-improve-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--accent, #cc785c) var(--prompt-progress), rgba(32,29,24,0.11) 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  transition: opacity 0.18s ease !important;
}
.prompt-improve-btn.is-loading::before {
  opacity: 1 !important;
  animation: promptImproveArc 1.1s ease-in-out infinite !important;
}
@keyframes promptImproveArc {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ed-row-ic {
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(32,29,24,0.055) !important;
  color: rgba(32,29,24,0.72) !important;
  flex: 0 0 24px !important;
}
.ed-row-ic svg {
  width: 17px !important;
  height: 17px !important;
}
.ed-row.is-kind-folder .ed-row-ic { color: #b07a16 !important; background: rgba(222,171,70,0.14) !important; }
.ed-row.is-kind-html .ed-row-ic { color: #c85b37 !important; background: rgba(204,120,92,0.14) !important; }
.ed-row.is-kind-css .ed-row-ic { color: #3869b6 !important; background: rgba(69,113,183,0.13) !important; }
.ed-row.is-kind-js .ed-row-ic { color: #8b6b09 !important; background: rgba(226,186,64,0.16) !important; }
.ed-row.is-kind-json .ed-row-ic { color: #4d7757 !important; background: rgba(92,139,101,0.13) !important; }
.ed-row.is-kind-image .ed-row-ic { color: #8b5ab8 !important; background: rgba(139,90,184,0.12) !important; }
.editor-path-dialog {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(32,29,24,0.22);
  backdrop-filter: blur(10px);
}
.editor-path-card {
  width: min(360px, 100%);
  border-radius: 20px;
  background: var(--panel, #fffaf2);
  border: 1px solid rgba(32,29,24,0.1);
  box-shadow: 0 24px 70px rgba(22,18,14,0.22);
  padding: 16px;
}
.editor-path-card h3,
.editor-path-title {
  margin: 0 0 10px;
  font: 700 15px/1.2 var(--font-sans, system-ui, sans-serif);
}
.editor-path-card input {
  width: 100%;
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(32,29,24,0.13);
  background: rgba(255,255,255,0.78);
  padding: 0 12px;
  color: var(--ink, #201d18);
  outline: none;
  box-sizing: border-box;
}
.editor-path-card input:focus {
  border-color: var(--accent, #cc785c);
  box-shadow: 0 0 0 3px rgba(204,120,92,0.14);
}
.editor-path-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.editor-path-actions button {
  height: 34px;
  border-radius: 999px;
  border: 0;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}
.editor-path-cancel {
  background: rgba(32,29,24,0.07);
  color: rgba(32,29,24,0.66);
}
.editor-path-ok {
  background: var(--accent, #cc785c);
  color: #fff;
}
@media (max-width: 760px) {
  .canvas-editor {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    transition: grid-template-columns 0.28s cubic-bezier(0.22,0.61,0.36,1) !important;
  }
  .canvas-editor.is-tree-open {
    grid-template-columns: minmax(184px, 62vw) minmax(0, 1fr) !important;
  }
  .canvas-editor .ed-tree {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .canvas-editor .ed-main {
    min-width: 0 !important;
  }
  .canvas-editor:not(.is-tree-open) .ed-tree-title,
  .canvas-editor:not(.is-tree-open) .ed-row-name,
  .canvas-editor:not(.is-tree-open) .ed-row-caret,
  .canvas-editor:not(.is-tree-open) .ed-row-actions {
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .canvas-editor:not(.is-tree-open) .ed-tree-head {
    padding-inline: 6px !important;
    justify-content: center !important;
  }
  .canvas-editor:not(.is-tree-open) .ed-tree-actions {
    display: grid !important;
    gap: 6px !important;
  }
  .canvas-editor:not(.is-tree-open) .ed-row {
    justify-content: center !important;
    padding-inline: 6px !important;
    gap: 0 !important;
  }
  .canvas-editor.is-tree-open .ed-tree {
    box-shadow: 10px 0 26px rgba(22,18,14,0.08) !important;
  }
}

/* v79: hotfix - keep code editor hidden outside the Code tab and restore legacy hamburger feel */
.canvas-editor.hidden,
#editorView.hidden {
  display: none !important;
}
.prompt-improve-btn.is-loading svg {
  animation: none !important;
  transform: none !important;
}
.prompt-improve-btn.is-loading::before {
  animation: none !important;
}
.burger-btn.is-open .burger-icon {
  display: inline-block !important;
  opacity: 1 !important;
}
.burger-btn.is-open::before,
.burger-btn.is-open::after {
  content: none !important;
  display: none !important;
}
.burger-btn.is-open .burger-icon .burger-l1 {
  transform: translateY(4px) rotate(45deg) !important;
}
.burger-btn.is-open .burger-icon .burger-l2 {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.burger-btn.is-open .burger-icon .burger-l3 {
  transform: translateY(-4px) rotate(-45deg) !important;
}
.drawer-panel:not(.drawer-claude) .drawer-nav {
  padding: 10px 8px !important;
  gap: 2px !important;
}
.drawer-panel:not(.drawer-claude) .dn-item {
  min-height: auto !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  border-radius: var(--r-md, 12px) !important;
  font-size: inherit !important;
  color: var(--ink, #201d18) !important;
}
.drawer-panel:not(.drawer-claude) .dn-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: var(--r-sm, 10px) !important;
}

/* v80: empty-state brand baseline + full-height CodeMirror */
.empty-title .empty-inline-logo {
  display: inline-flex !important;
  align-items: baseline !important;
  width: 1.92em !important;
  height: 0.96em !important;
  margin: 0 0.05em !important;
  vertical-align: -0.08em !important;
  position: relative !important;
  top: 0.03em !important;
  transform: none !important;
}
.empty-title .empty-inline-logo .brand-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.empty-title .empty-inline-logo .brand-svg-text {
  font-size: 30px !important;
}
.empty-title .empty-inline-logo .brand-svg-dot {
  fill: var(--accent, #CC785C) !important;
}
.canvas-view .canvas-editor:not(.hidden),
.canvas-editor:not(.hidden) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.canvas-editor:not(.hidden) .ed-main,
.canvas-editor:not(.hidden) .ed-editor {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.canvas-editor:not(.hidden) .ed-editor {
  position: relative !important;
  flex: 1 1 auto !important;
  height: auto !important;
}
.canvas-editor:not(.hidden) .ed-editor .CodeMirror {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}
.canvas-editor:not(.hidden) .CodeMirror-scroll {
  min-height: 100% !important;
}

/* v81: restore previous editor hamburger and drawer visuals */
#burgerBtn.burger-btn,
.burger-btn {
  position: relative !important;
}
.burger-icon {
  overflow: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}
.burger-icon line {
  transform-origin: 11px 11px !important;
  transition:
    transform 0.42s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.32s ease !important;
}
.burger-btn:not(.is-open) .burger-icon .burger-l1,
.burger-btn:not(.is-open) .burger-icon .burger-l2,
.burger-btn:not(.is-open) .burger-icon .burger-l3 {
  transform: none !important;
  opacity: 1 !important;
}
.burger-btn.is-open .burger-icon {
  display: inline-block !important;
  opacity: 1 !important;
}
.burger-btn.is-open::before,
.burger-btn.is-open::after {
  content: none !important;
  display: none !important;
}
.burger-btn.is-open .burger-icon .burger-l1 {
  transform: translateY(4px) rotate(45deg) !important;
}
.burger-btn.is-open .burger-icon .burger-l2 {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.burger-btn.is-open .burger-icon .burger-l3 {
  transform: translateY(-4px) rotate(-45deg) !important;
}
.drawer-panel:not(.drawer-claude) .drawer-nav {
  padding: 10px 8px !important;
  gap: 2px !important;
}
@media (max-width: 720px) {
  .drawer-panel:not(.drawer-claude) .drawer-nav {
    padding: 12px 10px !important;
    gap: 4px !important;
  }
}
.drawer-panel:not(.drawer-claude) .dn-item {
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--r-md, 12px) !important;
  color: var(--ink, #201d18) !important;
  background: transparent !important;
}
@media (max-width: 720px) {
  .drawer-panel:not(.drawer-claude) .dn-item {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
}
.drawer-panel:not(.drawer-claude) .dn-item::before {
  content: none !important;
  display: none !important;
}
.drawer-panel:not(.drawer-claude) .dn-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: var(--r-sm, 10px) !important;
  background: var(--paper, #fff) !important;
  border: 1px solid var(--ink-08, rgba(32,29,24,0.08)) !important;
  box-shadow: none !important;
  color: var(--ink-70, rgba(32,29,24,0.7)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.drawer-panel:not(.drawer-claude) .dn-icon::before {
  content: none !important;
  display: none !important;
}
.drawer-panel:not(.drawer-claude) .dn-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible {
  background: var(--bg-soft, rgba(32,29,24,0.05)) !important;
  color: var(--ink, #201d18) !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-icon {
  background: var(--ink, #201d18) !important;
  border-color: var(--ink, #201d18) !important;
  color: #fff !important;
}
.splash-overlay,
.splash-video {
  background: #E5DBCD !important;
}
.empty-title .empty-inline-logo {
  width: 2.55em !important;
  height: 1.1em !important;
  margin: 0 -0.04em 0 0.02em !important;
  vertical-align: -0.12em !important;
  top: 0.02em !important;
}

/* v82: lock legacy editor drawer panel and draw a centered open-state X */
.drawer-panel:not(.drawer-claude) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(340px, 90vw) !important;
  height: auto !important;
  background: var(--bg, #F7F2E8) !important;
  border-left: 1px solid var(--ink-12, rgba(32, 29, 24, 0.12)) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: -30px 0 80px -20px rgba(10, 10, 10, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(106%) !important;
  opacity: 1 !important;
  transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  animation: none !important;
}
.drawer.is-open .drawer-panel:not(.drawer-claude) {
  transform: translateX(0) !important;
  opacity: 1 !important;
  animation: none !important;
}
.drawer.is-closing .drawer-panel:not(.drawer-claude),
.drawer:not(.hidden):not(.is-open) .drawer-panel:not(.drawer-claude) {
  transform: translateX(106%) !important;
  opacity: 1 !important;
  animation: none !important;
}
.drawer-panel:not(.drawer-claude) .drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: auto !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--ink-08, rgba(32, 29, 24, 0.08)) !important;
  background: transparent !important;
}
.drawer-panel:not(.drawer-claude) .drawer-foot {
  display: block !important;
  padding: 16px 18px !important;
  border-top: 1px solid var(--ink-08, rgba(32, 29, 24, 0.08)) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.drawer-panel:not(.drawer-claude) .drawer-quota {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.drawer-panel:not(.drawer-claude) .drawer-quota-bar {
  height: 6px !important;
  background: var(--bg-soft, rgba(32, 29, 24, 0.06)) !important;
}
.drawer-panel:not(.drawer-claude) .drawer-quota-bar i {
  background: linear-gradient(90deg, var(--accent, #CC785C), var(--accent-h, #A85037)) !important;
}
#burgerBtn.burger-btn.is-open .burger-icon {
  opacity: 0 !important;
}
#burgerBtn.burger-btn.is-open::before,
#burgerBtn.burger-btn.is-open::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 17px !important;
  height: 1.8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  display: block !important;
  transform-origin: center !important;
}
#burgerBtn.burger-btn.is-open::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
#burgerBtn.burger-btn.is-open::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* v83: restore drawer hover sweep and keep the eye canvas button available */
.drawer-panel:not(.drawer-claude) .dn-item {
  position: relative !important;
  overflow: hidden !important;
  z-index: 0 !important;
}
.drawer-panel:not(.drawer-claude) .dn-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 100% 0 0 !important;
  display: block !important;
  background: var(--accent, #CC785C) !important;
  transition: inset 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover::before,
.drawer-panel:not(.drawer-claude) .dn-item:focus::before,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible::before,
.drawer-panel:not(.drawer-claude) .dn-item:active::before,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed::before {
  inset: 0 !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover,
.drawer-panel:not(.drawer-claude) .dn-item:focus,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible,
.drawer-panel:not(.drawer-claude) .dn-item:active,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed {
  color: #fff !important;
  background: transparent !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-sub,
.drawer-panel:not(.drawer-claude) .dn-item:focus .dn-sub,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-sub,
.drawer-panel:not(.drawer-claude) .dn-item:active .dn-sub,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed .dn-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}
.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:focus .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:active .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-icon svg,
.drawer-panel:not(.drawer-claude) .dn-item:focus .dn-icon svg,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-icon svg,
.drawer-panel:not(.drawer-claude) .dn-item:active .dn-icon svg,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed .dn-icon svg {
  color: #fff !important;
  stroke: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}
body.mode-bot .chat-show-canvas,
body.mode-bot .chat-show-canvas-app {
  display: inline-flex !important;
}

/* v84: bot chats show deploy instead of canvas-eye, target locks stay visible */
body.mode-site .chat-launch-app {
  display: none !important;
}
body.mode-site .chat-show-canvas-app {
  display: inline-flex !important;
}
body.mode-bot .chat-show-canvas-app {
  display: none !important;
}
body.mode-bot .chat-launch-app {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent, #CC785C) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px -14px rgba(204, 120, 92, 0.85) !important;
}
body.mode-bot .chat-launch-app:hover,
body.mode-bot .chat-launch-app:focus-visible {
  background: var(--accent-h, #A85037) !important;
  transform: translateY(-1px) !important;
}
.bt-opt.is-disabled {
  opacity: 0.36 !important;
  pointer-events: none !important;
}

/* v84: unified premium mask icons for the legacy hamburger drawer */
.drawer-panel:not(.drawer-claude) {
  --dn-user: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Zm0 2.1c-4.5 0-8 2.5-8 5.2V21h16v-1.5c0-2.7-3.5-5.2-8-5.2Z' fill='black'/%3E%3C/svg%3E");
  --dn-card: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4v2h14V9H5Zm2 5v2h5v-2H7Z' fill='black'/%3E%3C/svg%3E");
  --dn-spark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l2.2 6.2L20.5 12l-6.3 3.8L12 22l-2.2-6.2L3.5 12l6.3-3.8L12 2Zm7-1 1 2.6L22.5 5 20 6.4 19 9l-1-2.6L15.5 5 18 3.6 19 1Z' fill='black'/%3E%3C/svg%3E");
  --dn-cloud: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.2 19h8.9a4.9 4.9 0 0 0 .8-9.7A6.7 6.7 0 0 0 5 11.1 4.1 4.1 0 0 0 8.2 19Z' fill='black'/%3E%3C/svg%3E");
  --dn-cloud-ai: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 19h8.7a4.7 4.7 0 0 0 .8-9.3A6.5 6.5 0 0 0 5 11.2 4 4 0 0 0 8 19Zm10.3-17 .8 2.4L21.5 5l-2.4.8-.8 2.2-.8-2.2L15.1 5l2.4-.6.8-2.4Z' fill='black'/%3E%3C/svg%3E");
  --dn-chat: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7.3L6 21v-4H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='black'/%3E%3C/svg%3E");
  --dn-monitor: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-6v2h3v1H7v-1h3v-2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 3v8h16V8H4Z' fill='black'/%3E%3C/svg%3E");
  --dn-bot: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3h3a4 4 0 0 1 4 4v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9a4 4 0 0 1 4-4h3V2Zm-3 9.5A1.5 1.5 0 1 0 11 11.5a1.5 1.5 0 0 0-3 0Zm7 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0ZM9 16h6v-2H9v2Z' fill='black'/%3E%3C/svg%3E");
  --dn-sliders: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4h2v5h2v3H4V9h2V4Zm10 0h2v10h2v3h-6v-3h2V4ZM6 15h2v5H6v-5Zm10 4h2v1h-2v-1Z' fill='black'/%3E%3C/svg%3E");
  --dn-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z' fill='black'/%3E%3C/svg%3E");
  --dn-send: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 21 3l-4.2 18-5.1-6-5 4 1.8-6L3 11.5Z' fill='black'/%3E%3C/svg%3E");
}
.drawer-panel:not(.drawer-claude) .dn-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
}
.drawer-panel:not(.drawer-claude) .dn-icon svg { display: none !important; }
.drawer-panel:not(.drawer-claude) .dn-icon::after {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: var(--dn-mask, var(--dn-chat)) center / contain no-repeat !important;
  mask: var(--dn-mask, var(--dn-chat)) center / contain no-repeat !important;
}
#drawerProfileBtn .dn-icon { --dn-mask: var(--dn-user); }
#drawerSubBtn .dn-icon { --dn-mask: var(--dn-card); }
.drawer-panel:not(.drawer-claude) .dn-item[href*="dev-token"] .dn-icon { --dn-mask: var(--dn-spark); }
#drawerCloudBtn .dn-icon { --dn-mask: var(--dn-cloud); }
#drawerCloudAiBtn .dn-icon { --dn-mask: var(--dn-cloud-ai); }
#drawerChatsBtn .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item[href="/app"] .dn-icon { --dn-mask: var(--dn-chat); }
#drawerSettingsBtn .dn-icon { --dn-mask: var(--dn-sliders); }
#drawerNewChatBtn .dn-icon { --dn-mask: var(--dn-plus); }
.drawer-panel:not(.drawer-claude) .dn-item[href="/app#t=site"] .dn-icon { --dn-mask: var(--dn-monitor); }
.drawer-panel:not(.drawer-claude) .dn-item[href="/app#t=bot"] .dn-icon { --dn-mask: var(--dn-bot); }
.drawer-panel:not(.drawer-claude) .dn-item[href*="devtoken_news"] .dn-icon { --dn-mask: var(--dn-send); }

/* v85: clean drawer icons, remove plugin banners, tighten annotation */
.drawer-panel:not(.drawer-claude) .dn-icon,
.drawer-panel .dn-icon,
.drawer-panel .drawer-chat-icon,
.drawer-claude .dn-primary .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:focus .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item:active .dn-icon,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed .dn-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.drawer-panel:not(.drawer-claude) .dn-icon::after {
  width: 21px !important;
  height: 21px !important;
}

.drawer-panel:not(.drawer-claude) .dn-item:hover .dn-icon::after,
.drawer-panel:not(.drawer-claude) .dn-item:focus .dn-icon::after,
.drawer-panel:not(.drawer-claude) .dn-item:focus-visible .dn-icon::after,
.drawer-panel:not(.drawer-claude) .dn-item:active .dn-icon::after,
.drawer-panel:not(.drawer-claude) .dn-item.is-pressed .dn-icon::after {
  background: #fff !important;
}

.plugin-banner,
.plugin-banner-svg,
.plugin-banner-content {
  display: none !important;
}

.plugin-detail {
  overflow: visible !important;
  border-radius: 16px !important;
}

.plugin-detail-body {
  padding: 14px 16px 4px !important;
}

.annotate-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.annotate-btn.is-active {
  background: var(--accent, #cc785c) !important;
  color: #fff !important;
}

/* v86 - cream model picker; no bright orange selection states */
.model-sheet {
  z-index: 260 !important;
}
.model-sheet-shade {
  background: rgba(31,30,27,0.28) !important;
  backdrop-filter: blur(8px) saturate(1.04) !important;
}
.model-sheet-card {
  background:
    radial-gradient(circle at 84% 0%, rgba(255,255,255,0.78), transparent 34%),
    linear-gradient(180deg, #FAF6F0 0%, #F4EDE2 100%) !important;
  border: 1px solid rgba(255,255,255,0.76) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -24px 70px -34px rgba(31,30,27,0.46) !important;
}
.model-sheet-handle {
  background: rgba(31,30,27,0.18) !important;
}
.model-sheet-head {
  padding: 14px 18px 10px !important;
  border-bottom: 1px solid rgba(31,30,27,0.08) !important;
}
.model-sheet-head h3 {
  color: var(--ink, #1F1E1B) !important;
  font: 700 16px/1 var(--font-sans, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
}
.model-sheet-head .icon-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.model-sheet-head .icon-btn:hover {
  background: rgba(31,30,27,0.06) !important;
}
.model-list {
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
.model-list li {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(31,30,27,0.08) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.38) !important;
  color: var(--ink, #1F1E1B) !important;
  box-shadow: 0 10px 24px -20px rgba(31,30,27,0.24) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.model-list li:hover {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(31,30,27,0.16) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px -22px rgba(31,30,27,0.30) !important;
}
.model-list li.is-active {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(31,30,27,0.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.58),
    0 16px 34px -24px rgba(31,30,27,0.36) !important;
}
.model-list li.is-locked {
  opacity: 0.56 !important;
}
.model-list li.is-locked:hover {
  transform: none !important;
  background: rgba(255,255,255,0.32) !important;
}
.model-list .ml-ic {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: var(--ink, #1F1E1B) !important;
  background: rgba(31,30,27,0.06) !important;
}
.model-list .ml-ic svg {
  width: 17px !important;
  height: 17px !important;
}
.model-list li.is-active .ml-ic {
  color: #fff !important;
  background: var(--ink, #1F1E1B) !important;
}
.model-list .ml-name {
  color: var(--ink, #1F1E1B) !important;
  font: 700 13.5px/1.2 var(--font-sans, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
}
.model-list .ml-desc {
  color: rgba(31,30,27,0.58) !important;
  font: 500 12.5px/1.42 var(--font-sans, system-ui, sans-serif) !important;
}
.model-list .ml-tag,
.model-list .ml-tag.is-locked {
  color: rgba(31,30,27,0.58) !important;
  background: rgba(31,30,27,0.06) !important;
}
.model-list .ml-check {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid rgba(31,30,27,0.18) !important;
  background: rgba(255,255,255,0.46) !important;
  color: transparent !important;
}
.model-list li.is-active .ml-check {
  border-color: var(--ink, #1F1E1B) !important;
  background: var(--ink, #1F1E1B) !important;
  color: #fff !important;
}

/* v87 - remove Build/Discuss toggle, keep a clear cream model button, bigger appbar logo */
.work-mode-toggle,
#workModeToggle {
  display: none !important;
}

.appbar .brand-trigger,
.appbar .brand {
  min-width: 82px !important;
}

.appbar .brand-svg {
  width: 88px !important;
  height: 42px !important;
}

.model-trigger-bold,
#modelPickerAppBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 72px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(31,30,27,0.10) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)),
    var(--panel, #F3EDE1) !important;
  color: var(--ink, #1F1E1B) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 8px 20px -16px rgba(31,30,27,0.36) !important;
  font: 800 12px/1 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: 0.01em !important;
}

.model-trigger-bold:hover,
#modelPickerAppBtn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.58)),
    var(--panel, #F3EDE1) !important;
  border-color: rgba(31,30,27,0.18) !important;
  transform: translateY(-1px) !important;
}

.model-trigger-bold .mp-caret,
#modelPickerAppBtn .mp-caret {
  color: rgba(31,30,27,0.52) !important;
}

@media (max-width: 720px) {
  .appbar .brand-trigger,
  .appbar .brand {
    min-width: 74px !important;
  }
  .appbar .brand-svg {
    width: 80px !important;
    height: 42px !important;
  }
  .model-trigger-bold,
  #modelPickerAppBtn {
    display: inline-flex !important;
    min-width: 58px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 380px) {
  .model-trigger-bold,
  #modelPickerAppBtn {
    display: inline-flex !important;
  }
}

/* v88 - generation loaders for preview and code panes */
#canvasPane.is-preview-loading.view-preview {
  position: relative;
}

#canvasPane.is-preview-loading.view-preview::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 76px;
  height: min(360px, calc(100% - 112px));
  z-index: 8;
  pointer-events: none;
  border-radius: 24px;
  border: 1px solid rgba(31,30,27,0.08);
  background:
    radial-gradient(circle at 30% 25%, rgba(204,120,92,0.18), transparent 32%),
    linear-gradient(105deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.24) 38%, rgba(255,255,255,0.62) 52%, rgba(255,255,255,0.24) 68%),
    rgba(246,239,227,0.88);
  background-size: 100% 100%, 240% 100%, 100% 100%;
  box-shadow: 0 24px 80px -52px rgba(31,30,27,0.44);
  animation: devPreviewSweep 1.6s ease-in-out infinite;
}

#canvasPane.is-preview-loading.view-preview::after {
  content: "Собираю превью";
  position: absolute;
  left: 50%;
  top: min(245px, 44%);
  z-index: 9;
  width: 176px;
  height: 176px;
  margin-left: -88px;
  margin-top: -88px;
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(31,30,27,0.74);
  font: 800 12px/1.2 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  text-align: center;
  background:
    radial-gradient(circle, rgba(250,246,240,0.96) 0 58%, transparent 59%),
    conic-gradient(from 0deg, rgba(204,120,92,0), rgba(204,120,92,0.94), rgba(31,30,27,0.18), rgba(204,120,92,0));
  filter: drop-shadow(0 18px 36px rgba(31,30,27,0.16));
  animation: devLoaderArc 1.15s ease-in-out infinite;
}

.canvas-editor.is-code-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,16,20,0.92), rgba(15,16,20,0.54), rgba(15,16,20,0.92)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 28px);
  background-size: 220% 100%, 100% 100%;
  animation: devCodeSweep 1.35s ease-in-out infinite;
}

.canvas-editor.is-code-loading::after {
  content: "Пишу код · " attr(data-loading-detail);
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 8;
  max-width: min(360px, calc(100% - 36px));
  padding: 10px 13px 10px 34px;
  border-radius: 999px;
  pointer-events: none;
  color: rgba(255,255,255,0.92);
  background: rgba(32,29,24,0.86);
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
  font: 800 11px/1.2 var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-editor.is-code-loading .ed-main::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 9;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #cc785c;
  box-shadow: 14px 0 0 rgba(204,120,92,0.62), 28px 0 0 rgba(204,120,92,0.34);
  animation: devCodeDots 0.9s ease-in-out infinite alternate;
}

@keyframes devPreviewSweep {
  0% { background-position: 0 0, 130% 0, 0 0; }
  50% { background-position: 0 0, 40% 0, 0 0; }
  100% { background-position: 0 0, -80% 0, 0 0; }
}

@keyframes devLoaderArc {
  0%, 100% { transform: scale(0.98); opacity: 0.82; }
  50% { transform: scale(1.02); opacity: 1; }
}

@keyframes devCodeSweep {
  0% { background-position: 130% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}

@keyframes devCodeDots {
  from { opacity: 0.45; transform: translateX(0); }
  to { opacity: 1; transform: translateX(4px); }
}

@media (max-width: 720px) {
  #canvasPane.is-preview-loading.view-preview::before {
    left: 14px;
    right: 14px;
    top: 82px;
    height: 58px;
    border-radius: 18px;
    border-color: rgba(31,30,27,0.07);
    background:
      linear-gradient(105deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.28) 42%, rgba(255,255,255,0.76) 54%, rgba(255,255,255,0.30) 70%),
      rgba(246,239,227,0.92);
    background-size: 220% 100%, 100% 100%;
    box-shadow: 0 16px 38px -30px rgba(31,30,27,0.42);
    animation: devPreviewSweep 1.45s ease-in-out infinite;
  }
  #canvasPane.is-preview-loading.view-preview::after {
    content: "Собираю превью";
    left: 34px;
    right: 58px;
    top: 101px;
    width: auto;
    height: auto;
    margin: 0;
    display: block;
    border-radius: 0;
    color: rgba(31,30,27,0.74);
    background: none;
    filter: none;
    text-align: left;
    animation: none;
  }
  #canvasPane.is-preview-loading.view-preview .canvas-frame {
    opacity: 0.72;
    transition: opacity 0.18s ease;
  }
  .canvas-editor.is-code-loading::before {
    inset: 12px 12px auto 12px;
    height: 48px;
    border-radius: 17px;
    background:
      linear-gradient(105deg, rgba(48,42,34,0.94), rgba(48,42,34,0.70), rgba(48,42,34,0.94)),
      rgba(48,42,34,0.88);
    background-size: 220% 100%, 100% 100%;
    box-shadow: 0 16px 36px -28px rgba(0,0,0,0.55);
    animation: devPreviewSweep 1.45s ease-in-out infinite;
  }
  .canvas-editor.is-code-loading::after {
    left: 28px;
    right: 60px;
    top: 29px;
    max-width: none;
    padding: 0;
    color: rgba(255,250,242,0.94);
    background: transparent;
    box-shadow: none;
  }
  .canvas-editor.is-code-loading .ed-main::after {
    top: 32px;
    right: 34px;
    width: 7px;
    height: 7px;
    box-shadow: 11px 0 0 rgba(204,120,92,0.62), 22px 0 0 rgba(204,120,92,0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  #canvasPane.is-preview-loading.view-preview::before,
  #canvasPane.is-preview-loading.view-preview::after,
  .canvas-editor.is-code-loading::before,
  .canvas-editor.is-code-loading .ed-main::after {
    animation: none !important;
  }
}

.ce-icon .ce-count {
  display: none !important;
}

.activity-card.is-clickable {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.activity-card.is-clickable:hover,
.activity-card.is-clickable:focus-visible {
  border-color: rgba(204,120,92,0.34) !important;
  box-shadow: 0 10px 28px -20px rgba(31,30,27,0.42), 0 0 0 3px rgba(204,120,92,0.10);
  transform: translateY(-1px);
  outline: none;
}

.activity-card.is-clickable:active {
  transform: translateY(0) scale(0.995);
}

.activity-card.is-clickable .activity-meta::after {
  content: " · открыть";
  color: rgba(204,120,92,0.86);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700;
}

@media (hover: none) {
  .activity-card.is-clickable:hover {
    transform: none;
  }
}

/* v91: Telegram-verified admin panel */
.admin-drawer-item.hidden {
  display: none !important;
}

.drawer-panel:not(.drawer-claude) {
  --dn-admin: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 21 5.8v5.9c0 5.1-3.7 8.6-9 10.3-5.3-1.7-9-5.2-9-10.3V5.8L12 2Zm-1 6v3H8v2h3v3h2v-3h3v-2h-3V8h-2Z' fill='black'/%3E%3C/svg%3E");
}

#drawerAdminBtn .dn-icon {
  --dn-mask: var(--dn-admin);
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: var(--ink, #1F1E1B);
}

.admin-modal.hidden {
  display: none !important;
}

.admin-modal-shade {
  position: absolute;
  inset: 0;
  background: rgba(31, 30, 27, 0.28);
  backdrop-filter: blur(8px);
}

.admin-modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(250, 246, 240, 0.98);
  border: 1px solid rgba(31, 30, 27, 0.10);
  box-shadow: 0 34px 96px -52px rgba(31, 30, 27, 0.55);
  animation: adminPanelIn 0.28s cubic-bezier(.2,.9,.2,1);
}

@keyframes adminPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.admin-modal-head {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(31, 30, 27, 0.08);
}

.admin-modal-head h3 {
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.05;
}

.admin-modal-head p {
  margin: 5px 0 0;
  color: rgba(31, 30, 27, 0.56);
  font-size: 13px;
}

.admin-close {
  border: 0 !important;
  background: transparent !important;
}

.admin-modal-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
}

.admin-stat,
.admin-refresh {
  min-height: 56px;
  border: 1px solid rgba(31, 30, 27, 0.08);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.72);
}

.admin-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
}

.admin-stat span,
.admin-facts dt,
.admin-muted {
  color: rgba(31, 30, 27, 0.50);
}

.admin-stat span {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-stat b {
  margin-top: 4px;
  font-size: 18px;
}

.admin-refresh,
.admin-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-weight: 800;
  color: #fff;
  background: var(--accent, #CC785C);
  border-color: transparent;
  box-shadow: 0 16px 34px -22px rgba(204, 120, 92, 0.9);
}

.admin-refresh:hover,
.admin-save:hover {
  background: var(--accent-h, #A85037);
}

.admin-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 34%) 1fr;
  gap: 14px;
}

.admin-user-list {
  min-height: 420px;
  max-height: 560px;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow: auto;
  border: 1px solid rgba(31, 30, 27, 0.08);
  border-radius: 22px;
  background: rgba(255, 252, 246, 0.52);
}

.admin-user-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 17px;
  text-align: left;
  color: var(--ink, #1F1E1B);
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.admin-user-row:hover,
.admin-user-row.is-active {
  background: #1F1E1B;
  color: #fff;
  transform: translateY(-1px);
}

.admin-user-avatar,
.admin-profile-avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  object-fit: cover;
  background: #EDE3D4;
  color: #1F1E1B;
  font-weight: 900;
}

.admin-user-avatar {
  width: 42px;
  height: 42px;
}

.admin-profile-avatar {
  width: 62px;
  height: 62px;
  font-size: 22px;
}

.admin-user-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-user-main b,
.admin-profile h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-main small,
.admin-user-meta small,
.admin-profile p {
  color: rgba(31, 30, 27, 0.52);
}

.admin-user-row:hover small,
.admin-user-row.is-active small {
  color: rgba(255,255,255,0.72);
}

.admin-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(31, 30, 27, 0.07);
  color: inherit;
  font: 800 10px/1 var(--font-mono, ui-monospace, monospace);
}

.admin-pill.is-ban {
  background: rgba(170, 54, 34, 0.14);
  color: #A85037;
}

.admin-pill.is-ok {
  background: rgba(75, 135, 95, 0.14);
  color: #3F7B58;
}

.admin-user-detail {
  min-height: 420px;
  max-height: 560px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(31, 30, 27, 0.08);
  border-radius: 22px;
  background: rgba(255, 252, 246, 0.72);
}

.admin-profile {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.admin-profile h4 {
  margin: 0;
  font-size: 20px;
}

.admin-profile p {
  margin: 5px 0 0;
}

.admin-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.admin-facts div {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(31, 30, 27, 0.045);
}

.admin-facts dt {
  margin-bottom: 4px;
  font-size: 11px;
}

.admin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.admin-edit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(31, 30, 27, 0.045);
}

.admin-edit label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(31, 30, 27, 0.58);
  font-weight: 700;
}

.admin-edit select,
.admin-edit input[type="number"] {
  height: 40px;
  border: 1px solid rgba(31, 30, 27, 0.12);
  border-radius: 13px;
  background: #FFFDF8;
  padding: 0 11px;
  color: var(--ink, #1F1E1B);
  font: 700 14px var(--font-sans, system-ui, sans-serif);
}

.admin-ban {
  min-height: 40px;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 13px;
  background: rgba(168, 80, 55, 0.10);
  color: #A85037 !important;
}

.admin-save {
  min-height: 40px;
  border-radius: 13px;
}

.admin-section {
  margin-top: 16px;
}

.admin-section-head,
.admin-chat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.admin-section-head {
  margin-bottom: 8px;
}

.admin-section-head span,
.admin-chat-toggle span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 30, 27, 0.08);
  color: rgba(31, 30, 27, 0.62);
  font-weight: 900;
}

.admin-links {
  display: grid;
  gap: 8px;
}

.admin-links a,
.admin-chat-history article {
  border: 1px solid rgba(31, 30, 27, 0.08);
  border-radius: 15px;
  background: rgba(250, 246, 240, 0.88);
}

.admin-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.admin-links a:hover {
  border-color: rgba(204, 120, 92, 0.34);
  color: var(--accent, #CC785C);
}

.admin-links small {
  color: rgba(31, 30, 27, 0.50);
}

.admin-chat-toggle {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 15px;
  background: #1F1E1B;
  color: #fff;
  font-weight: 900;
}

.admin-chat-history {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.admin-chat-history.hidden {
  display: none !important;
}

.admin-chat-history article {
  padding: 11px 12px;
}

.admin-chat-history h5 {
  margin: 0 0 3px;
  font-size: 14px;
}

.admin-chat-history small {
  color: rgba(31, 30, 27, 0.50);
}

.admin-chat-history p {
  margin: 7px 0 0;
  color: rgba(31, 30, 27, 0.72);
  font-size: 12.5px;
  line-height: 1.42;
}

.admin-empty,
.admin-loading,
.admin-error,
.admin-empty-row {
  padding: 18px;
  color: rgba(31, 30, 27, 0.56);
  text-align: center;
}

.admin-error {
  color: #A85037;
}

body.is-banned-user .composer-send,
body.is-banned-user #sendBtn {
  opacity: 0.45;
}

/* v92: bot code sheet must show the editor body, not only the header */
body.mode-bot.canvas-sheet-open .canvas {
  display: flex !important;
  flex-direction: column !important;
}

body.mode-bot.canvas-sheet-open .canvas-body {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

body.mode-bot.canvas-sheet-open #editorView:not(.hidden),
body.mode-bot.canvas-sheet-open .canvas-editor:not(.hidden) {
  display: grid !important;
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  z-index: 2 !important;
}

body.mode-bot.canvas-sheet-open .ed-main,
body.mode-bot.canvas-sheet-open .ed-editor,
body.mode-bot.canvas-sheet-open .CodeMirror {
  min-height: 0 !important;
  height: 100% !important;
}

body.mode-bot.canvas-sheet-open .canvas-head {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 760px) {
  .admin-modal {
    align-items: flex-end;
    padding: 0;
  }
  .admin-modal-card {
    width: 100%;
    max-height: calc(100vh - 10px);
    border-radius: 24px 24px 0 0;
  }
  .admin-modal-body {
    padding: 12px;
  }
  .admin-summary {
    grid-template-columns: 1fr 1fr;
  }
  .admin-refresh {
    grid-column: 1 / -1;
    min-height: 46px;
  }
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-user-list {
    min-height: 0;
    max-height: 260px;
  }
  .admin-user-detail {
    min-height: 360px;
    max-height: none;
  }
  .admin-edit,
  .admin-facts {
    grid-template-columns: 1fr;
  }
  .admin-profile {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .admin-profile .admin-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .admin-profile-avatar {
    width: 54px;
    height: 54px;
  }
}

/* v93 - performance pass + calmer mobile polish */
.canvas-frame {
  contain: layout paint;
  opacity: 1;
  transition: opacity 0.14s ease;
}

#canvasPane.is-preview-loading.view-preview::before {
  left: 18px !important;
  right: 18px !important;
  top: 72px !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(204,120,92,0.18) 18%, rgba(204,120,92,0.78) 50%, rgba(204,120,92,0.18) 82%, transparent 100%),
    rgba(31,30,27,0.08) !important;
  background-size: 220% 100%, 100% 100% !important;
  box-shadow: none !important;
  animation: devSoftProgress 1.05s linear infinite !important;
}

#canvasPane.is-preview-loading.view-preview::after,
.canvas-editor.is-code-loading::after,
.canvas-editor.is-code-loading .ed-main::after {
  content: "" !important;
  display: none !important;
}

#canvasPane.is-preview-loading.view-preview .canvas-frame {
  opacity: 0.92;
}

.canvas-editor.is-code-loading::before {
  inset: auto 18px 14px 18px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(204,120,92,0.12) 18%, rgba(204,120,92,0.9) 50%, rgba(204,120,92,0.12) 82%, transparent 100%),
    rgba(255,255,255,0.12) !important;
  background-size: 220% 100%, 100% 100% !important;
  box-shadow: none !important;
  animation: devSoftProgress 1.05s linear infinite !important;
}

@keyframes devSoftProgress {
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}

.composer-input {
  border-color: rgba(31,30,27,0.10);
  box-shadow: 0 18px 46px -34px rgba(31,30,27,0.45);
}

.composer-actions {
  gap: 7px;
}

.composer-actions .composer-clip,
.composer-actions .ce-icon,
.composer-actions .composer-plan,
.prompt-improve-btn {
  border: 0 !important;
  background: rgba(255,255,255,0.54) !important;
  box-shadow: inset 0 0 0 1px rgba(31,30,27,0.08);
}

.composer-actions .composer-clip:hover,
.composer-actions .ce-icon:hover,
.composer-actions .composer-plan:hover,
.prompt-improve-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(204,120,92,0.22), 0 8px 22px -18px rgba(31,30,27,0.45);
}

.composer-actions .composer-send {
  background: #F1E5D5;
  color: #201D18;
  box-shadow: inset 0 0 0 1px rgba(31,30,27,0.08), 0 14px 26px -20px rgba(31,30,27,0.46);
}

.composer-actions .composer-send.has-content,
.composer-actions .composer-send:hover:not(:disabled) {
  background: #CC785C;
  color: #fff;
  box-shadow: 0 16px 34px -24px rgba(204,120,92,0.72);
}

@media (max-width: 720px) {
  #canvasPane.is-preview-loading.view-preview::before {
    top: 78px !important;
    left: 16px !important;
    right: 16px !important;
  }
  .composer-input {
    border-radius: 22px;
  }
  #chatInput {
    font-size: 16px;
    min-height: 96px;
  }
  .composer-actions {
    gap: 6px !important;
    padding-inline: 8px !important;
  }
  .composer-actions .composer-clip,
  .composer-actions .ce-icon,
  .composer-actions .composer-plan,
  .prompt-improve-btn,
  .composer-actions .composer-send {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}

@media (hover: none) {
  .composer-clip:hover,
  .composer-actions .composer-send:hover:not(:disabled),
  .activity-card.is-clickable:hover {
    transform: none !important;
  }
}

/* v94 - TMA first screen: four primary bottom actions, everything else deeper */
#composerCanvasBtn,
.dn-advanced-mobile {
  display: none;
}

@media (max-width: 720px) {
  body {
    --tma-primary-action: #CC785C;
    --tma-chip-bg: rgba(255,255,255,0.70);
  }

  .appbar {
    padding-inline: 12px !important;
  }
  .appbar .brand {
    margin-right: auto !important;
  }
  #apiStatus,
  #contextMeter,
  #modelPickerAppBtn,
  #chatShowCanvasBtnApp,
  #chatLaunchBtnApp,
  #newChatBtn,
  #workModeToggle {
    display: none !important;
  }
  .appbar-right {
    margin-left: auto !important;
    gap: 0 !important;
  }
  #burgerBtn {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .composer {
    padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .composer-input {
    border-radius: 24px !important;
    padding: 18px 14px 12px !important;
  }
  #chatInput {
    min-height: 116px !important;
    padding: 0 10px 16px !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }
  .composer-actions {
    display: grid !important;
    grid-template-columns: auto auto auto 1fr auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 2px !important;
  }
  #skillsBtn,
  #pluginsBtn,
  #planModeBtn,
  #modelPickerBtn {
    display: none !important;
  }
  #composerCanvasBtn,
  .dn-advanced-mobile {
    display: flex !important;
  }

  #clipBtn,
  #promptImproveBtn,
  #composerCanvasBtn {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: rgba(31,30,27,0.82) !important;
    background: var(--tma-chip-bg) !important;
    box-shadow: inset 0 0 0 1px rgba(31,30,27,0.08), 0 10px 22px -20px rgba(31,30,27,0.45) !important;
    font: 700 12px/1 var(--font-sans, system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
  }
  #clipBtn::after {
    content: "Файл";
  }
  #promptImproveBtn::after {
    content: "Улучшить";
  }
  #composerCanvasBtn::after {
    content: "Результат";
  }
  #promptImproveBtn.is-loading svg {
    animation: none !important;
  }
  #promptImproveBtn.is-loading {
    color: var(--tma-primary-action) !important;
  }
  .composer-actions .composer-spacer {
    min-width: 0 !important;
  }
  .composer-actions .composer-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: var(--tma-primary-action) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px -20px rgba(204,120,92,0.82) !important;
  }
  .composer-actions .composer-send:disabled {
    background: rgba(31,30,27,0.14) !important;
    color: rgba(31,30,27,0.42) !important;
    box-shadow: none !important;
  }

  .canvas-head .canvas-actions #deployBtn {
    order: 4;
  }
  body.mode-bot .chat-launch-app {
    display: none !important;
  }
}

@media (max-width: 360px) {
  #clipBtn,
  #promptImproveBtn,
  #composerCanvasBtn {
    height: 36px !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .composer-actions .composer-send {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   v97 — FINAL CANVAS-SHEET TRUTH (supersedes everything above)
   ─────────────────────────────────────────────────────────────
   Three fixed bugs:
   #1. Mobile press preview → screen darkens, sheet invisible
       Cause: layered transforms / display:none overrides from
       previous CSS versions conflict. Explicit final declaration
       below is bulletproof.

   #2. Bot mode + sheet open → empty preview body
       Cause: in bot mode .canvas-hint and .canvas-frame are
       hidden, but #canvasBotStub was also force-hidden. Now we
       force-show the bot stub whenever bot mode is active.

   #3. Bot mode on desktop → screen split in two
       Cause: somewhere .stage grid-template-columns is being
       overridden back to 2 columns. We pin it to 1fr at all
       widths in bot mode.
   ═════════════════════════════════════════════════════════════ */

/* ── BUG #3: bot mode never splits — always single column ── */
body.mode-bot .stage {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
body.mode-bot .canvas-sheet-backdrop:not(.canvas-sheet-open .canvas-sheet-backdrop) {
  /* keep backdrop hidden when sheet closed in bot mode */
}

/* ── BUG #2: bot mode shows the bot stub ── */
body.mode-bot #canvasBotStub {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 28px 22px !important;
  z-index: 4 !important;
  background: var(--paper, #FAF6F0) !important;
}
body.mode-bot #canvasBotStub.hidden {
  /* JS may toggle .hidden — but in bot mode we always want to see it
     inside an open sheet, so override here. */
  display: grid !important;
}
body.mode-bot #canvasHint,
body.mode-bot #previewFrame,
body.mode-bot #editorView:not(.is-active-view),
body.mode-bot #versionsView:not(.is-active-view) {
  /* Bot mode: hide preview hint + iframe by default; code/versions only
     when their tab is actively selected by JS. */
}

/* ── BUG #1: mobile bottom sheet — single source of truth ── */
@media (max-width: 960px) {
  /* Backdrop hidden by default, semi-transparent when sheet is open */
  body:not(.canvas-sheet-open) .canvas-sheet-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
  body.canvas-sheet-open .canvas-sheet-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 10, 10, 0.42) !important;
    z-index: 90 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Sheet pane — fixed to viewport, slides up from bottom */
  .canvas {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: calc(var(--appbar-h, 60px) + 6px) !important;
    z-index: 100 !important;
    background: var(--paper, #FAF6F0) !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    border-right: 0 !important;
    box-shadow: 0 -20px 60px -16px rgba(10, 10, 10, 0.45) !important;
    transform: translateY(105%);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.canvas-sheet-open .canvas {
    transform: translateY(0) !important;
  }

  /* Bot mode override of "display: none on canvas" — sheet must work */
  body.mode-bot .canvas {
    display: flex !important;
  }
  body.mode-bot:not(.canvas-sheet-open) .canvas {
    transform: translateY(105%) !important;
    pointer-events: none;
  }
  body.mode-bot.canvas-sheet-open .canvas {
    transform: translateY(0) !important;
    pointer-events: auto;
  }

  /* Drag-handle pip at top of sheet */
  .canvas-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: rgba(10, 10, 10, 0.18);
    z-index: 5;
    cursor: grab;
    touch-action: none;
  }

  /* Close-X — floating top-right above sheet content */
  body:not(.canvas-sheet-open) .canvas-sheet-close {
    display: none !important;
  }
  body.canvas-sheet-open .canvas-sheet-close {
    display: inline-flex !important;
    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #0A0A0A !important;
    border: 1px solid rgba(10, 10, 10, 0.12) !important;
    box-shadow: 0 6px 20px -6px rgba(10, 10, 10, 0.45) !important;
    z-index: 200 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
  }

  /* Canvas head — leave room for the drag-handle pip */
  .canvas-head {
    padding-top: 22px !important;
    padding-right: 14px !important;
  }
}

/* ── Desktop: bot mode canvas is a sheet too, opens via launch btn ── */
@media (min-width: 961px) {
  body.mode-bot .canvas {
    display: none !important;
  }
  body.mode-bot.canvas-sheet-open .canvas {
    display: flex !important;
    position: fixed !important;
    top: var(--appbar-h, 56px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--paper, #FAF6F0) !important;
    flex-direction: column !important;
  }
  body.mode-bot.canvas-sheet-open .canvas-sheet-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 10, 10, 0.42) !important;
    z-index: 90 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }
  body.mode-bot.canvas-sheet-open .canvas-sheet-close {
    display: inline-flex !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #0A0A0A !important;
    border: 1px solid rgba(10, 10, 10, 0.12) !important;
    box-shadow: 0 6px 20px -6px rgba(10, 10, 10, 0.45) !important;
    z-index: 200 !important;
  }
}

/* ── Common: bot stub layout inside canvas-body ── */
body.mode-bot .canvas-body {
  position: relative;
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.mode-bot.view-code .canvas-bot-stub,
body.mode-bot.view-versions .canvas-bot-stub {
  /* When user clicks "Код" or "Версии" tab, hide bot stub so the
     selected view can render. JS already toggles .canvas-bot-stub.hidden
     when changing views; this is belt-and-suspenders. */
  display: none !important;
}


/* ═════════════════════════════════════════════════════════════
   v100 — DARK THEME (editor)
   Black background, white text only, warm-orange accent (matches
   the dot in /logo.jpg). Final block — wins the cascade.
   ═════════════════════════════════════════════════════════════ */
:root {
  --bg:         #050505 !important;
  --bg-soft:    #0F0F11 !important;
  --bg-deep:    #000000 !important;
  --paper:      #14141A !important;

  --ink:        #FFFFFF !important;
  --ink-85:     rgba(255,255,255,0.85) !important;
  --ink-70:     rgba(255,255,255,0.7)  !important;
  --ink-55:     rgba(255,255,255,0.55) !important;
  --ink-40:     rgba(255,255,255,0.4)  !important;
  --ink-25:     rgba(255,255,255,0.22) !important;
  --ink-12:     rgba(255,255,255,0.12) !important;
  --ink-08:     rgba(255,255,255,0.08) !important;
  --ink-04:     rgba(255,255,255,0.04) !important;

  --accent:     #F5B58A !important;
  --accent-h:   #FFA774 !important;
  --accent-soft:#3A2A1F !important;
  --accent-glow:rgba(245,181,138,0.32) !important;
}

html, body { background: #050505 !important; color: #FFFFFF !important; }

/* App shell — every surface dark */
.appbar {
  background: rgba(5,5,5,0.86) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}
.sidebar {
  background: #0A0A0C !important;
  border-right-color: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}
.chat       { background: #0A0A0C !important; border-right-color: rgba(255,255,255,0.06) !important; }
.canvas     { background: #050505 !important; }
.canvas-head{ border-bottom-color: rgba(255,255,255,0.06) !important; }
.canvas-foot{ border-top-color: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.42) !important; }

/* Brand image */
.brand-logo { width: 56px; height: auto; display: block; border-radius: 8px; }
.brand-svg {
  display: inline-block !important;
  width: 76px;
  height: 26px;
  background: url('/logo.jpg?v=2') center / contain no-repeat;
}
.brand-svg-text, .brand-svg-dot { display: none !important; }

/* Chat bubbles */
.msg-user .msg-bubble {
  background: #FFFFFF !important;
  color: #050505 !important;
}
.msg-assistant .msg-bubble {
  background: #14141A !important;
  color: #FFFFFF !important;
}
.empty-title { color: #FFFFFF !important; }
.empty-sub   { color: rgba(255,255,255,0.65) !important; }

/* Composer */
.composer { background: #0A0A0C !important; border-top-color: rgba(255,255,255,0.06) !important; }
.composer-input {
  background: #14141A !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.composer-input:focus-within {
  background: #1A1A20 !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(245,181,138,0.12) !important;
}
#chatInput, #chatInput::placeholder { color: #FFFFFF; }
#chatInput::placeholder { color: rgba(255,255,255,0.42) !important; }
.composer-clip {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.composer-clip:hover {
  background: #FFFFFF !important;
  color: #050505 !important;
}
.composer-send {
  background: #FFFFFF !important;
  color: #050505 !important;
  border-color: #FFFFFF !important;
}
.composer-send:hover:not(:disabled) {
  background: var(--accent, #F5B58A) !important;
  color: #050505 !important;
}
.composer-send:disabled {
  background: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.35) !important;
}
.composer-plan {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.composer-plan.is-active {
  background: #FFFFFF !important;
  color: #050505 !important;
  border-color: #FFFFFF !important;
}
.composer-plan-switch { background: rgba(255,255,255,0.18) !important; }
.composer-plan-switch::after { background: rgba(255,255,255,0.6) !important; }
.composer-plan.is-active .composer-plan-switch { background: rgba(5,5,5,0.18) !important; }
.composer-plan.is-active .composer-plan-switch::after { background: var(--accent, #F5B58A) !important; }

/* Build-target toggle */
.bt-inline {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.bt-inline .bt-opt { color: rgba(255,255,255,0.62) !important; }
.bt-inline .bt-opt.is-active {
  background: #FFFFFF !important;
  color: #050505 !important;
}

/* Model picker (inline in composer) */
.model-picker.model-picker-inline .mp-btn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}
.model-picker.model-picker-inline .mp-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.model-picker.model-picker-inline .mp-label { color: rgba(255,255,255,0.85) !important; }
.model-picker.model-picker-inline .mp-caret { color: rgba(255,255,255,0.5) !important; }
.mp-menu {
  background: #14141A !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}
.mp-opt { color: #FFFFFF !important; }
.mp-opt:hover { background: rgba(255,255,255,0.06) !important; }
.mp-opt.is-active { background: rgba(245,181,138,0.14) !important; }
.mp-opt-desc { color: rgba(255,255,255,0.55) !important; }

/* Chat list (sidebar) */
.sb-item { color: rgba(255,255,255,0.85) !important; }
.sb-item:hover { background: rgba(255,255,255,0.06) !important; }
.sb-item.is-active {
  background: #FFFFFF !important;
  color: #050505 !important;
}
.sb-item.is-active .sb-item-meta { color: rgba(5,5,5,0.5) !important; }
.sb-head-title, .sb-head-count { color: rgba(255,255,255,0.55) !important; }
.sb-hint { color: rgba(255,255,255,0.42) !important; }

/* Drawer */
.drawer-panel { background: #0A0A0C !important; color: #FFFFFF !important; }
.drawer-shade { background: rgba(0,0,0,0.65) !important; }
.dn-item { color: #FFFFFF !important; }
.dn-item:hover { background: rgba(255,255,255,0.05) !important; }
.dn-icon { color: rgba(255,255,255,0.62) !important; }
.dn-sub  { color: rgba(255,255,255,0.5)  !important; }

/* Canvas hint / bot stub — dark surfaces too */
.canvas-hint-card {
  background: #14141A !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.canvas-hint-card h2  { color: #FFFFFF !important; }
.canvas-hint-card p   { color: rgba(255,255,255,0.7) !important; }
.canvas-bot-stub {
  background: #050505 !important;
  color: #FFFFFF !important;
}
.canvas-bot-stub h2 { color: #FFFFFF !important; }
.canvas-bot-stub p  { color: rgba(255,255,255,0.7) !important; }
.canvas-bot-tips li { color: rgba(255,255,255,0.86) !important; }

/* Canvas tabs */
.canvas-tabs {
  background: #14141A !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.ctab { color: rgba(255,255,255,0.55) !important; }
.ctab:hover { color: #FFFFFF !important; }
.ctab.is-active {
  background: #FFFFFF !important;
  color: #050505 !important;
}
.ctab-badge {
  background: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}

/* Code editor (file tree + CodeMirror) — already dark; tune accents */
.canvas-editor      { background: #0A0A0C !important; }
.ed-tree            { background: #050505 !important; border-right-color: rgba(255,255,255,0.06) !important; }
.ed-tree-head       { border-bottom-color: rgba(255,255,255,0.06) !important; }
.ed-tree-title      { color: rgba(255,255,255,0.55) !important; }
.ed-row             { color: rgba(255,255,255,0.78) !important; }
.ed-row:hover       { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; }
.ed-row.is-active {
  background: rgba(245,181,138,0.16) !important;
  color: #FFFFFF !important;
}
.ed-row.is-active::before { background: var(--accent, #F5B58A) !important; }
.ed-empty-tree { color: rgba(255,255,255,0.42) !important; }
.ed-main { background: #0A0A0C !important; }
.ed-tabbar {
  background: #0A0A0C !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.ed-breadcrumb { color: rgba(255,255,255,0.72) !important; }
.ed-breadcrumb .b-sep   { color: rgba(255,255,255,0.3) !important; }
.ed-breadcrumb .b-name  { color: #FFFFFF !important; }
.ed-editor { background: #050505 !important; }
.CodeMirror {
  background: #050505 !important;
  color: #E8E8E8 !important;
}
.CodeMirror-gutters {
  background: #0A0A0C !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}
.CodeMirror-linenumber { color: rgba(255,255,255,0.32) !important; }
.CodeMirror-cursor { border-left-color: #FFFFFF !important; }
.CodeMirror-selected { background: rgba(255,255,255,0.14) !important; }
.cm-tag, .cm-keyword, .cm-property { color: var(--accent, #F5B58A) !important; }
.cm-string   { color: #B8E0A4 !important; }
.cm-number   { color: #FFB875 !important; }
.cm-comment  { color: rgba(255,255,255,0.4) !important; }
.cm-atom, .cm-variable-2 { color: #C9B0FF !important; }

/* Status pill */
.status-pill {
  background: #14141A !important;
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Buttons */
.btn-primary {
  background: var(--accent, #F5B58A) !important;
  color: #050505 !important;
  border-color: var(--accent, #F5B58A) !important;
}
.btn-primary:hover:not(:disabled) {
  background: #FFFFFF !important;
  color: #050505 !important;
  border-color: #FFFFFF !important;
}
.btn-ghost {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.08) !important;
  border-color: #FFFFFF !important;
}
.icon-btn { color: rgba(255,255,255,0.78) !important; }
.icon-btn:hover { background: rgba(255,255,255,0.1) !important; color: #FFFFFF !important; }

/* Modals (deploy / quota / settings / cloud / etc.) */
.modal-card,
.cloud-modal-card,
.sub-modal-card,
.profile-modal-card,
.settings-sheet-card,
.admin-modal-card {
  background: #14141A !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.modal-shade,
.cloud-modal-shade,
.sub-modal-shade,
.profile-modal-shade { background: rgba(0,0,0,0.7) !important; }
.field input,
.field textarea {
  background: #0F0F11 !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.field-label { color: rgba(255,255,255,0.78) !important; }
.field-hint  { color: rgba(255,255,255,0.5) !important; }

/* Versions list */
.ver-item { background: #14141A !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.08) !important; }
.ver-item.is-current { border-color: var(--accent, #F5B58A) !important; }
.ver-prompt { color: #FFFFFF !important; }
.ver-meta   { color: rgba(255,255,255,0.5) !important; }
.ver-btn    { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.1) !important; }
.ver-btn:hover { background: rgba(255,255,255,0.14) !important; }
.ver-btn.is-primary { background: var(--accent, #F5B58A) !important; color: #050505 !important; border-color: var(--accent, #F5B58A) !important; }

/* Drawer balance card */
.drawer-quota,
.drawer-quota-top .drawer-quota {
  background: #14141A !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
}
.drawer-quota-bar { background: rgba(255,255,255,0.12) !important; }
.drawer-quota-bar i { background: var(--accent, #F5B58A) !important; }
.drawer-quota-sub { color: rgba(255,255,255,0.55) !important; }

/* Tg-gate (Telegram-only access screen) */
.tg-gate { background: #050505 !important; }
.tg-gate-card {
  background: #14141A !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.tg-gate-title { color: #FFFFFF !important; }
.tg-gate-text  { color: rgba(255,255,255,0.7) !important; }

/* Status statuses inside chat */
.status-line span { color: rgba(255,255,255,0.86) !important; }
.summary-line { color: rgba(255,255,255,0.86) !important; }
.sl-kbd {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Tree row inline actions */
.ed-row-act { color: rgba(255,255,255,0.55) !important; }
.ed-row-act:hover { background: rgba(255,255,255,0.12) !important; color: #FFFFFF !important; }

/* Scrollbars */
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22) !important; }


/* ═════════════════════════════════════════════════════════════
   v101 — STRICT 3-COLOUR PALETTE (black / white / beige)
   • All text → white
   • Accent → beige #E8DCC4 only
   • Logos bigger, mix-blend-mode: screen so the JPG's black BG
     dissolves into the page
   • Appbar — solid black, full-width, fixed height, shell offset
   ═════════════════════════════════════════════════════════════ */
:root {
  --bg:          #000000 !important;
  --bg-soft:     #0A0A0A !important;
  --bg-deep:     #000000 !important;
  --paper:       #111111 !important;
  --ink:         #FFFFFF !important;
  --accent:      #E8DCC4 !important;
  --accent-h:    #F0E3C9 !important;
  --accent-soft: #1F1B14 !important;
  --accent-glow: rgba(232,220,196,0.30) !important;
  --appbar-h:    60px !important;
}

html, body { background: #000000 !important; color: #FFFFFF !important; }

/* Universal text colour — white. Specific surfaces override below. */
html, body, main, section, article, aside, header, footer, nav, div,
h1, h2, h3, h4, h5, h6, p, span, li, a, em, i, strong, b,
blockquote, label, td, th, code {
  color: #FFFFFF;
}

/* ─── APPBAR: solid black, full-width, fixed height ─── */
.appbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  height: var(--appbar-h, 60px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 16px !important;
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  z-index: 90 !important;
  box-sizing: border-box;
}
/* Shell starts EXACTLY below the appbar so nothing is hidden under it */
.shell {
  position: fixed !important;
  top: var(--appbar-h, 60px) !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
}

/* ─── BRAND IMAGE — bigger, screen blend dissolves the JPG's black BG ─── */
.brand-logo {
  width: 96px !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  mix-blend-mode: screen !important;
  background: transparent !important;
}
.brand-logo-lg { width: 160px !important; }
.brand-svg {
  display: inline-block !important;
  width: 96px !important;
  height: 32px !important;
  background: url('/logo.jpg?v=2') center / contain no-repeat !important;
  mix-blend-mode: screen !important;
}
.brand-svg-text, .brand-svg-dot { display: none !important; }
.brand, .brand-trigger {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ─── SIDEBAR / CHAT / CANVAS — surfaces ─── */
.sidebar { background: #060606 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.chat    { background: #060606 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.canvas  { background: #000000 !important; }
.canvas-head { border-bottom: 1px solid rgba(255,255,255,0.08) !important; background: #000000 !important; }
.canvas-foot { border-top: 1px solid rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.42) !important; }

/* ─── CHAT messages — white text everywhere ─── */
.msg-user .msg-bubble {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
}
.msg-user .msg-bubble * { color: #000000 !important; }
.msg-assistant .msg-bubble {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.msg-assistant .msg-bubble * { color: #FFFFFF !important; }
.empty-title { color: #FFFFFF !important; }
.empty-sub   { color: rgba(255,255,255,0.7) !important; }
.empty-logo, .empty-logo * { color: #FFFFFF !important; }
.empty-inline-logo {
  display: inline-block !important;
  width: 60px !important;
  height: 20px !important;
  background: url('/logo.jpg?v=2') center / contain no-repeat !important;
  mix-blend-mode: screen !important;
  vertical-align: -3px !important;
}
.empty-inline-logo svg { display: none !important; }

/* Chat-topbar */
.chat-topbar {
  background: #060606 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.chat-topbar-title { color: #FFFFFF !important; }

/* ─── COMPOSER ─── */
.composer { background: #060606 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
.composer-input {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}
.composer-input:focus-within {
  background: #161616 !important;
  border-color: var(--accent, #E8DCC4) !important;
  box-shadow: 0 0 0 4px rgba(232,220,196,0.14) !important;
}
#chatInput { color: #FFFFFF !important; }
#chatInput::placeholder { color: rgba(255,255,255,0.42) !important; }
.composer-actions { background: transparent !important; }
.composer-clip {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.composer-clip:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}
.composer-send {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
  border: 1px solid var(--accent, #E8DCC4) !important;
}
.composer-send:hover:not(:disabled) {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}
.composer-send:disabled {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.composer-send svg { color: inherit !important; }
.composer-plan {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.composer-plan.is-active {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
  border-color: var(--accent, #E8DCC4) !important;
}
.composer-plan-label { color: inherit !important; }
.composer-plan-switch { background: rgba(255,255,255,0.18) !important; }
.composer-plan-switch::after { background: rgba(255,255,255,0.7) !important; }
.composer-plan.is-active .composer-plan-switch { background: rgba(0,0,0,0.18) !important; }
.composer-plan.is-active .composer-plan-switch::after { background: #000000 !important; }

/* Build-target toggle */
.bt-inline {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.bt-inline .bt-opt { color: rgba(255,255,255,0.6) !important; background: transparent !important; }
.bt-inline .bt-opt.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* Model picker */
.model-picker.model-picker-inline .mp-btn,
.model-trigger {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}
.model-picker.model-picker-inline .mp-btn:hover,
.model-trigger:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.mp-label { color: rgba(255,255,255,0.9) !important; }
.mp-caret { color: rgba(255,255,255,0.55) !important; }
.mp-menu {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}
.mp-opt, .mp-opt * { color: #FFFFFF !important; background: transparent !important; }
.mp-opt:hover { background: rgba(255,255,255,0.06) !important; }
.mp-opt.is-active { background: rgba(232,220,196,0.14) !important; }
.mp-opt-name { color: #FFFFFF !important; font-weight: 600; }
.mp-opt-desc { color: rgba(255,255,255,0.6) !important; }

/* ─── SIDEBAR list ─── */
.sb-head { background: transparent !important; }
.sb-head-title, .sb-head-count { color: rgba(255,255,255,0.55) !important; }
.sb-hint { color: rgba(255,255,255,0.4) !important; }
.sb-item { color: rgba(255,255,255,0.86) !important; background: transparent !important; }
.sb-item:hover { background: rgba(255,255,255,0.05) !important; color: #FFFFFF !important; }
.sb-item.is-active {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
}
.sb-item.is-active * { color: #000000 !important; }
.sb-item-title { color: inherit !important; }
.sb-item-meta { color: rgba(255,255,255,0.42) !important; }
.sb-item.is-active .sb-item-meta { color: rgba(0,0,0,0.55) !important; }
.sb-empty { color: rgba(255,255,255,0.42) !important; }

/* ─── BUTTONS — strict 3-colour ─── */
.btn {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #FFFFFF !important;
}
.btn:hover { background: var(--accent, #E8DCC4) !important; color: #000000 !important; border-color: var(--accent, #E8DCC4) !important; }
.btn-primary {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
  border-color: var(--accent, #E8DCC4) !important;
}
.btn-primary:hover:not(:disabled) {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}
.btn-ghost {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.1) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.btn:disabled { opacity: 0.4 !important; }

.icon-btn { color: rgba(255,255,255,0.8) !important; }
.icon-btn:hover { background: rgba(255,255,255,0.1) !important; color: #FFFFFF !important; }

/* ─── CANVAS hint cards / bot stub ─── */
.canvas-hint-card {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.canvas-hint-card * { color: inherit !important; }
.canvas-hint-card h2 { color: #FFFFFF !important; }
.canvas-hint-card p  { color: rgba(255,255,255,0.7) !important; }
.canvas-hint-mark, .canvas-hint-mark-svg {
  display: inline-block !important;
  width: 110px !important;
  height: 36px !important;
  background: url('/logo.jpg?v=2') center / contain no-repeat !important;
  mix-blend-mode: screen !important;
}
.canvas-hint-mark-svg .brand-svg-text,
.canvas-hint-mark-svg .brand-svg-dot,
.canvas-hint-mark-svg text,
.canvas-hint-mark-svg circle { display: none !important; }
.canvas-bot-stub { background: #000000 !important; color: #FFFFFF !important; }
.canvas-bot-stub h2 { color: #FFFFFF !important; }
.canvas-bot-stub p  { color: rgba(255,255,255,0.7) !important; }
.canvas-bot-tips li { color: rgba(255,255,255,0.86) !important; }
.canvas-bot-tips li::before { background: var(--accent, #E8DCC4) !important; }

/* Canvas tabs */
.canvas-tabs {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.ctab { color: rgba(255,255,255,0.55) !important; background: transparent !important; }
.ctab:hover { color: #FFFFFF !important; }
.ctab.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
}
.ctab.is-active * { color: #000000 !important; }
.ctab-label { color: inherit !important; }
.ctab-badge {
  background: rgba(255,255,255,0.14) !important;
  color: #FFFFFF !important;
}
.ctab.is-active .ctab-badge { background: rgba(0,0,0,0.14) !important; color: #000000 !important; }

/* Code editor */
.canvas-editor { background: #060606 !important; }
.ed-tree { background: #000000 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.ed-tree-head { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.ed-tree-title { color: rgba(255,255,255,0.6) !important; }
.ed-row, .ed-row * { color: rgba(255,255,255,0.85) !important; background: transparent !important; }
.ed-row:hover { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; }
.ed-row.is-active {
  background: rgba(232,220,196,0.16) !important;
  color: #FFFFFF !important;
}
.ed-row.is-active::before { background: var(--accent, #E8DCC4) !important; }
.ed-row-act { color: rgba(255,255,255,0.55) !important; }
.ed-row-act:hover { background: rgba(255,255,255,0.14) !important; color: #FFFFFF !important; }
.ed-empty-tree { color: rgba(255,255,255,0.42) !important; }
.ed-main { background: #060606 !important; }
.ed-tabbar { background: #060606 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.ed-breadcrumb, .ed-breadcrumb * { color: rgba(255,255,255,0.72) !important; }
.ed-breadcrumb .b-sep  { color: rgba(255,255,255,0.3) !important; }
.ed-breadcrumb .b-name { color: #FFFFFF !important; }
.ed-editor { background: #000000 !important; }
.CodeMirror { background: #000000 !important; color: #FFFFFF !important; }
.CodeMirror-gutters { background: #060606 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.CodeMirror-linenumber { color: rgba(255,255,255,0.32) !important; }
.CodeMirror-cursor { border-left-color: #FFFFFF !important; }
.CodeMirror-selected { background: rgba(232,220,196,0.2) !important; }
.cm-tag, .cm-keyword, .cm-property { color: var(--accent, #E8DCC4) !important; }
.cm-string  { color: #FFFFFF !important; }
.cm-number  { color: var(--accent, #E8DCC4) !important; }
.cm-comment { color: rgba(255,255,255,0.4) !important; }
.cm-atom, .cm-variable-2 { color: #FFFFFF !important; }

/* Status pill */
.status-pill {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.8) !important;
}
.status-pill .label, .status-pill * { color: inherit !important; }

/* Drawer */
.drawer-panel {
  background: #060606 !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer-shade { background: rgba(0,0,0,0.7) !important; }
.drawer-head { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.dn-item, .dn-item * { color: #FFFFFF !important; background: transparent !important; }
.dn-item:hover { background: rgba(255,255,255,0.05) !important; }
.dn-title { color: #FFFFFF !important; font-weight: 600; }
.dn-sub   { color: rgba(255,255,255,0.55) !important; }
.dn-icon  { color: rgba(255,255,255,0.7) !important; }

/* Modals */
.modal-card, .cloud-modal-card, .sub-modal-card, .profile-modal-card,
.settings-sheet-card, .admin-modal-card {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.modal-card *, .cloud-modal-card *, .sub-modal-card *, .profile-modal-card *,
.settings-sheet-card *, .admin-modal-card * { color: inherit !important; }
.modal-shade, .cloud-modal-shade, .sub-modal-shade, .profile-modal-shade { background: rgba(0,0,0,0.7) !important; }
.modal-head, .cloud-modal-head, .sub-modal-head, .profile-modal-head {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.modal-head h3, .sub-modal-head h3, .cloud-modal-head h3, .profile-modal-head h3 { color: #FFFFFF !important; }
.modal-lede, .modal-body, .modal-body * { color: #FFFFFF !important; }

/* Form fields */
.field input, .field textarea, input[type="text"], input[type="email"], textarea {
  background: #060606 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.field input::placeholder, .field textarea::placeholder,
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.42) !important; }
.field-label { color: rgba(255,255,255,0.85) !important; }
.field-hint  { color: rgba(255,255,255,0.5)  !important; }

/* Versions list */
.ver-item {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.ver-item * { color: inherit !important; }
.ver-item.is-current { border-color: var(--accent, #E8DCC4) !important; }
.ver-prompt { color: #FFFFFF !important; }
.ver-meta   { color: rgba(255,255,255,0.5) !important; }
.ver-btn {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.ver-btn:hover { background: rgba(255,255,255,0.14) !important; }
.ver-btn.is-primary {
  background: var(--accent, #E8DCC4) !important;
  color: #000000 !important;
  border-color: var(--accent, #E8DCC4) !important;
}

/* Drawer balance card */
.drawer-quota, .drawer-quota-top .drawer-quota {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}
.drawer-quota *, .drawer-quota-head, .drawer-quota-head * { color: #FFFFFF !important; }
.drawer-quota-bar { background: rgba(255,255,255,0.14) !important; }
.drawer-quota-bar i { background: var(--accent, #E8DCC4) !important; }
.drawer-quota-sub { color: rgba(255,255,255,0.55) !important; }

/* Tg-gate */
.tg-gate { background: #000000 !important; }
.tg-gate-card {
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.tg-gate-card * { color: inherit !important; }
.tg-gate-title { color: #FFFFFF !important; }
.tg-gate-text  { color: rgba(255,255,255,0.72) !important; }
.tg-gate-mark {
  width: 200px !important;
  height: 60px !important;
  background: url('/logo.jpg?v=2') center / contain no-repeat !important;
  mix-blend-mode: screen !important;
  margin: 0 auto 20px !important;
}
.tg-gate-mark > * { display: none !important; }

/* Status / summary lines */
.status-line, .status-line * { color: rgba(255,255,255,0.85) !important; }
.summary-line, .summary-line * { color: rgba(255,255,255,0.85) !important; }
.sl-kbd {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Canvas-meta + size */
#canvasMeta, #canvasSize { color: rgba(255,255,255,0.55) !important; }

/* Mobile bottom-sheet — keep canvas content readable */
@media (max-width: 960px) {
  .canvas-sheet-backdrop { background: rgba(0,0,0,0.65) !important; }
  .canvas {
    background: #000000 !important;
    color: #FFFFFF !important;
  }
}


/* ==========================================================================
   v102 — dark product polish
   Final override only. Removes warm legacy canvas, fixes weak controls,
   makes the builder read as a clean black/white/beige product UI.
   ========================================================================== */
:root {
  --bg: #000000 !important;
  --bg-soft: #050505 !important;
  --bg-deep: #000000 !important;
  --paper: #111111 !important;
  --ink: #FFFFFF !important;
  --accent: #E8DCC4 !important;
  --accent-h: #FFFFFF !important;
  --accent-soft: rgba(232,220,196,0.14) !important;
  --accent-glow: rgba(232,220,196,0.18) !important;
  --appbar-h: 60px !important;
}

html,
body {
  background: #000000 !important;
  color: #FFFFFF !important;
}

.splash-overlay {
  background: #000000 !important;
}

.appbar {
  --appbar-h: 60px !important;
  height: var(--appbar-h, 60px) !important;
  min-height: var(--appbar-h, 60px) !important;
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

html body .appbar {
  height: var(--appbar-h, 60px) !important;
  min-height: var(--appbar-h, 60px) !important;
}

.appbar .brand-svg,
.brand-svg {
  width: 94px !important;
  height: 32px !important;
  background: url('/logo.jpg?v=4') center / cover no-repeat !important;
  mix-blend-mode: screen !important;
}

.brand-svg-text,
.brand-svg-dot,
.brand-svg text,
.brand-svg circle {
  display: none !important;
}

.shell {
  top: var(--appbar-h, 60px) !important;
  background: #000000 !important;
}

.sidebar,
.chat,
.canvas,
.stage,
.chat-log,
.canvas-body,
.canvas-hint,
#canvasHint,
#canvasPane,
#previewView,
.canvas-preview,
.preview-wrap,
.canvas-frame,
.canvas-editor,
.ed-main,
.ed-editor {
  background: #000000 !important;
  background-image: none !important;
}

.canvas::before,
.canvas::after,
.canvas-body::before,
.canvas-body::after,
.canvas-hint::before,
.canvas-hint::after,
.canvas-frame::before,
.canvas-frame::after,
#canvasPane::before,
#canvasPane::after,
#previewView::before,
#previewView::after {
  display: none !important;
  content: none !important;
}

.sidebar {
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.chat {
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.canvas-head {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

.canvas-foot {
  background: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.55) !important;
}

.canvas-tabs {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
}

.ctab {
  color: rgba(255,255,255,0.66) !important;
  background: transparent !important;
}

.ctab.is-active {
  background: #E8DCC4 !important;
  color: #000000 !important;
}

.ctab.is-active * {
  color: #000000 !important;
}

.canvas-actions .icon-btn,
.appbar-right .icon-btn,
.model-trigger-bold,
.model-trigger {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.canvas-actions .icon-btn:hover,
.appbar-right .icon-btn:hover,
.model-trigger-bold:hover,
.model-trigger:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

.chat-launch-app,
#deployBtn,
.btn.btn-primary {
  background: #E8DCC4 !important;
  color: #000000 !important;
  border-color: #E8DCC4 !important;
}

.chat-launch-app *,
#deployBtn *,
.btn.btn-primary * {
  color: #000000 !important;
}

.empty-state {
  max-width: 520px !important;
}

.empty-title {
  color: #FFFFFF !important;
  text-align: left !important;
  font-size: clamp(27px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  text-wrap: balance !important;
}

.empty-sub {
  color: rgba(255,255,255,0.74) !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}

.empty-inline-logo {
  width: 72px !important;
  height: 24px !important;
  vertical-align: -3px !important;
  background: url('/logo.jpg?v=4') center / cover no-repeat !important;
  mix-blend-mode: screen !important;
}

.empty-inline-logo svg {
  display: none !important;
}

.canvas-hint-card {
  max-width: 460px !important;
  background: #111111 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55) !important;
}

.canvas-hint-card h2 {
  color: #FFFFFF !important;
}

.canvas-hint-card p {
  color: rgba(255,255,255,0.74) !important;
}

.canvas-hint-mark,
.canvas-hint-mark-svg {
  width: 86px !important;
  height: 28px !important;
  background: url('/logo.jpg?v=4') center / cover no-repeat !important;
  mix-blend-mode: screen !important;
}

.composer {
  background: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 16px 18px 18px !important;
}

.composer-input {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 24px !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.composer-input:focus-within {
  background: #111111 !important;
  border-color: #E8DCC4 !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 4px rgba(232,220,196,0.14) !important;
}

#chatInput {
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}

#chatInput::placeholder,
.composer-input textarea::placeholder {
  color: rgba(255,255,255,0.58) !important;
  opacity: 1 !important;
}

.composer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.composer-clip,
.composer-actions .ce-icon,
.composer-plan,
.composer-result-btn,
.prompt-improve-btn {
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
}

.composer-clip *,
.composer-actions .ce-icon *,
.composer-plan *,
.composer-result-btn *,
.prompt-improve-btn * {
  color: inherit !important;
}

.composer-clip:hover,
.composer-actions .ce-icon:hover,
.composer-plan:hover,
.composer-result-btn:hover,
.prompt-improve-btn:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

.composer-plan.is-active {
  background: #E8DCC4 !important;
  color: #000000 !important;
  border-color: #E8DCC4 !important;
}

.composer-actions .bt-inline {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 3px !important;
  gap: 3px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
}

.composer-actions .bt-inline .bt-opt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 66px !important;
  height: 28px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.composer-actions .bt-inline .bt-opt span {
  display: inline !important;
  color: inherit !important;
  font-weight: 700 !important;
}

.composer-actions .bt-inline .bt-opt svg {
  color: inherit !important;
  flex: 0 0 auto !important;
}

.composer-actions .bt-inline .bt-opt.is-active {
  background: #E8DCC4 !important;
  color: #000000 !important;
}

.composer-send {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  background: #E8DCC4 !important;
  color: #000000 !important;
  border: 1px solid #E8DCC4 !important;
  border-radius: 999px !important;
}

.composer-send:hover:not(:disabled) {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

.sb-item.is-active {
  background: #E8DCC4 !important;
  color: #000000 !important;
}

.sb-item.is-active * {
  color: #000000 !important;
}

.CodeMirror,
.CodeMirror-gutters,
.ed-tree,
.ed-tabbar {
  background: #000000 !important;
}

.ed-row.is-active {
  background: rgba(232,220,196,0.16) !important;
}

.cm-tag,
.cm-keyword,
.cm-property,
.cm-number {
  color: #E8DCC4 !important;
}

@media (max-width: 960px) {
  .appbar,
  html body .appbar {
    --appbar-h: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding-inline: 28px !important;
  }

  .appbar .brand-svg,
  .brand-svg {
    width: 76px !important;
    height: 26px !important;
  }

  .shell,
  html body .shell {
    top: 64px !important;
    bottom: 0 !important;
  }

  .stage,
  html body .stage {
    padding-top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .chat,
  html body .chat {
    top: 64px !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .chat-log {
    justify-content: flex-start !important;
    padding-top: clamp(118px, 18vh, 160px) !important;
  }

  .empty-state {
    padding-inline: 22px !important;
  }

  .empty-title {
    text-align: center !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .empty-sub {
    max-width: 340px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .composer {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .composer-input {
    border-radius: 22px !important;
    padding: 12px !important;
  }

  #chatInput {
    font-size: 15.5px !important;
  }

  .composer-actions {
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .composer-actions::-webkit-scrollbar {
    display: none !important;
  }

  .composer-clip,
  .composer-actions .ce-icon,
  .composer-plan,
  .composer-result-btn,
  .prompt-improve-btn {
    min-width: 36px !important;
  }

  .composer-actions .bt-inline .bt-opt {
    min-width: 58px !important;
    padding: 0 8px !important;
  }

  .composer-actions .bt-inline .bt-opt span {
    display: inline !important;
    font-size: 11px !important;
  }

  #clipBtn,
  #promptImproveBtn,
  #composerCanvasBtn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  #clipBtn::after,
  #promptImproveBtn::after,
  #composerCanvasBtn::after {
    content: "" !important;
    display: none !important;
  }

  html body .composer-actions .composer-send,
  html body .composer-actions .composer-send:hover:not(:disabled) {
    background: #E8DCC4 !important;
    color: #000000 !important;
    border-color: #E8DCC4 !important;
    box-shadow: none !important;
  }

  html body .composer-actions .composer-send * {
    color: #000000 !important;
  }

  .composer-actions .bt-inline {
    min-width: 126px !important;
  }

  .canvas {
    background: #000000 !important;
  }
}

/* v109 app product-depth pass */
html,
body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    #000000 !important;
  background-size: 84px 84px, 84px 84px, auto !important;
}

.appbar {
  background: rgba(0, 0, 0, 0.94) !important;
  border-bottom: 1px solid rgba(232, 220, 196, 0.2) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48) !important;
}

.appbar .brand-logo {
  mix-blend-mode: screen !important;
}

@media (min-width: 1100px) {
  .shell {
    grid-template-columns: 248px minmax(390px, 0.88fr) minmax(560px, 1.36fr) !important;
    background: #000000 !important;
  }
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    #030303 !important;
  border-right: 1px solid rgba(232, 220, 196, 0.18) !important;
}

.sb-search,
.sb-item,
.workspace-card,
.model-select,
.icon-btn,
.btn,
.ctab {
  border-radius: 8px !important;
}

.sb-item.is-active,
.sb-item:hover {
  background: rgba(232, 220, 196, 0.12) !important;
  border-color: rgba(232, 220, 196, 0.34) !important;
}

.chat {
  background: #000000 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-log {
  background:
    linear-gradient(180deg, rgba(232, 220, 196, 0.08), transparent 32%),
    #000000 !important;
}

.empty-state {
  position: relative !important;
  max-width: 720px !important;
  padding: clamp(34px, 5vw, 58px) !important;
  border: 1px solid rgba(232, 220, 196, 0.22) !important;
  border-radius: 8px !important;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #040404 !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.52) !important;
}

.empty-state::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 220, 196, 0.8), transparent) !important;
}

.empty-title {
  color: #ffffff !important;
  text-shadow: none !important;
}

.empty-sub {
  color: rgba(255, 255, 255, 0.68) !important;
  text-shadow: none !important;
}

.composer {
  border-top: 1px solid rgba(232, 220, 196, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.82), #000000),
    #000000 !important;
}

.composer-input {
  border: 1px solid rgba(232, 220, 196, 0.3) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    #050505 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}

#chatInput {
  color: #ffffff !important;
  text-shadow: none !important;
}

.composer-clip,
.composer-actions .ce-icon,
.composer-plan,
.composer-result-btn,
.prompt-improve-btn,
.composer-send,
.bt-inline .bt-opt {
  border-radius: 8px !important;
}

.canvas {
  background: #030303 !important;
  border-left: 1px solid rgba(232, 220, 196, 0.18) !important;
}

.canvas-head,
.canvas-foot {
  background: rgba(0, 0, 0, 0.88) !important;
  border-color: rgba(232, 220, 196, 0.18) !important;
}

.canvas-body {
  position: relative !important;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 54px),
    #000000 !important;
}

.canvas-body::before,
body:has(.empty-state:not(.hidden)) .canvas-body::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(520px, calc(100% - 80px)) !important;
  aspect-ratio: 1.18 !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(232, 220, 196, 0.28) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(232, 220, 196, 0.12), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 48px),
    linear-gradient(135deg, #050505 0%, #050505 48%, #e8dcc4 48.2%, #e8dcc4 54%, #ffffff 54.2%, #ffffff 100%) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6) !important;
  pointer-events: none !important;
}

.canvas-hint,
.canvas-frame,
.canvas-editor,
.canvas-versions {
  position: relative !important;
  z-index: 1 !important;
}

.canvas-hint,
#canvasHint {
  display: grid !important;
  place-items: center !important;
  padding: clamp(28px, 5vw, 56px) !important;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 54px),
    #000000 !important;
}

.canvas-hint-card,
.canvas-bot-stub .canvas-hint-card,
.ed-empty,
.versions-empty {
  width: min(520px, calc(100% - 56px)) !important;
  max-width: 520px !important;
  margin: auto !important;
  transform: none !important;
  border: 1px solid rgba(232, 220, 196, 0.24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    #050505 !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.48) !important;
}

.canvas-hint-card h2,
.canvas-hint-card p,
.canvas-hint-card ul,
.canvas-hint-card li {
  display: block !important;
  text-align: left !important;
}

.canvas-hint-card h2 {
  font-size: clamp(26px, 3vw, 42px) !important;
  line-height: 1.02 !important;
}

.canvas-hint-card p {
  max-width: 36ch !important;
  margin-inline: 0 !important;
}

.canvas-frame,
.canvas-editor,
.canvas-versions {
  border-radius: 8px !important;
}

@media (max-width: 1099px) {
  html,
  body {
    background-size: 56px 56px, 56px 56px, auto !important;
  }

  .empty-state {
    max-width: min(640px, calc(100vw - 28px)) !important;
    padding: 30px 20px !important;
  }

  .composer-input {
    border-radius: 14px !important;
  }
}