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

@font-face {
  font-family: 'Aura Neurotoxin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/Neurotoxin.ttf') format('truetype');
}

/* Authentication is an actual rendering boundary even where later responsive
   rules give #appRoot an !important display value. */
#appRoot[hidden] {
  display: none !important;
}

/* ── VAZIR FONT — applied via JS when Persian/Arabic detected ── */
.rtl-text,
[dir="rtl"] {
  font-family: 'Vazirmatn', var(--font), sans-serif !important;
  direction: rtl;
  text-align: right;
}

.history-title.rtl-text {
  font-family: 'Vazirmatn', var(--font), sans-serif !important;
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

:root {
  /* System red (owner palette). Text uses --red-text: in dark mode a lighter
     tint of the same hue, because #a42b28 on near-black is below 3:1. */
  --red: #a42b28;
  --red-text: #a42b28;
  --bg: #f4f3ee;
  --surface: #faf9f6;
  --sidebar-bg: #edecea;
  --border: #dedbd2;
  --border-soft: #eae8e2;
  --text: #18181a;
  --text-2: #5e5c58;
  --text-3: #9c9a95;
  --accent: #003954;
  --user-bg: var(--accent);
  --user-text: var(--accent-contrast);
  --accent-contrast: #f5f7fb;
  --code-bg: #1c1c1a;
  --code-text: #d0ccc4;
  --shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --r: 16px;
  --rs: 12px;
  --pill: 50px;
  --font: 'Lato', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --p-anthropic: #d4826a;
  --p-openai: #10a37f;
  --p-gemini: #4a90d9;
  --p-groq: #f55036;
  --p-grok: #1da1f2;
  --p-deepseek: #5b8af5;
  --p-minimax: #7c5cff;
  --p-fal: #ff6f61;
  --p-ollama: #8b6fd4;
  --p-local-preview: #7f93ff;
  --rail-w: 68px;
  --hover-bg: rgba(0, 0, 0, .04);
  --aura-frame-border: rgba(255, 255, 255, 0.175);
  --aura-frame-border-width: 0.73px;
  --aura-radius-main-card: 8px;
  --aura-radius-rail-button: 5px;
  --aura-radius-rail-avatar: 8px;
  --aura-radius-sidebar-panel: 8px;
  --aura-radius-sidebar-control: 6px;
  --aura-radius-main-nav: 5px;
  --aura-radius-settings-modal: 8px;
  --aura-radius-settings-control: 6px;
  --aura-radius-small-button: 4px;
  --aura-radius-tiny-control: 2px;
  --aura-radius-model-selector: 5px;
  --aura-radius-dropdown-panel: 7px;
  --aura-radius-dropdown-row: 4px;
  --aura-radius-composer-frame: 6px;
  --aura-radius-composer-button: 5px;
  --aura-radius-voice-countdown: 4px;
  --aura-radius-card-surface: 6px;
  --aura-radius-memory-card: 8px;
  --aura-radius-project-group: 8px;
  --aura-radius-project-row: 6px;
  --aura-radius-swatch: 6px;
  --aura-radius-badge: 4px;
  --aura-radius-circle: 50%;
}


/* ── LOADING SCREEN ── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.loading-msg {
  font-size: 14px;
  color: var(--text-3);
}

.loading-dots {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotBounce .92s cubic-bezier(.37, 0, .63, 1) infinite;
  will-change: transform, opacity;
}

.loading-dots span:nth-child(2) {
  animation-delay: .2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes loadingPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .7;
    transform: scale(.95)
  }
}

@keyframes dotBounce {

  0%,
  80%,
  100% {
    transform: translateY(0)
  }

  40% {
    transform: translateY(-8px)
  }
}

/* User bubbles always follow the selected accent color with readable text.
   2026-09-18: the !important lock that used to live here was removed. Bubble
   colors are owned by the plain token cascade — .message.user in the shell
   override below and .arena-msg.user .arena-bubble in the arena section both
   resolve to var(--user-bg)/var(--user-text). JS only ever sets those tokens
   on <html>; it no longer stamps inline styles on bubbles. */

body.dark {
  --red-text: #c8807e;
  --bg: #121826;
  --surface: #181f30;
  --sidebar-bg: #0e1420;
  --border: #242e42;
  --border-soft: #1c2436;
  --text: #e8e6e0;
  --text-2: #8892a4;
  --text-3: #4e5a6e;
  --user-bg: var(--accent);
  --user-text: var(--accent-contrast);
  --hover-bg: rgba(255, 255, 255, .06);
}

html {
  font-size: 16px;
  background-color: var(--bg);
  color-scheme: light;
}

body.dark,
html:has(body.dark) {
  color-scheme: dark;
}

body {
  font-family: var(--font);
  background: linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, var(--accent) 8%) 100%);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  transition: background .25s, color .25s;
}

/* ── LOGIN ── */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-card {
  width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .3s ease;
}

.login-logo {
  font-size: 22px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-logo span {
  color: var(--text);
  font-weight: 700;
}

.login-btn.btn-primary {
  background: #003954 !important;
}

.login-btn.btn-primary:hover {
  background: #004d6e !important;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

.login-error {
  color: var(--red-text);
  font-size: 14px;
  min-height: 20px;
  margin-bottom: 10px;
}

.login-card .remember-device {
  margin-bottom: 14px;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #5548c8);
  cursor: pointer;
}

.login-btn {
  width: 100%;
  margin-top: 8px;
}

.field-group {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.field-input:focus {
  border-color: var(--accent);
}

/* ── APP ROOT ── */
#appRoot {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

/* ══════════════════════════════════════
   ICON RAIL (Copilot-style sidebar)
══════════════════════════════════════ */
.icon-rail {
  width: var(--rail-w);
  min-width: var(--rail-w);
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 20px;
  border-right: 1px solid rgba(0, 0, 0, .05);
  z-index: 12;
  position: relative;
  cursor: pointer;
  /* clickable empty space opens sidebar */
}

body.dark .icon-rail {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.rail-top,
.rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.rail-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--rs);
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  position: relative;
}

.rail-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.rail-btn.active {
  color: var(--text);
  background: var(--hover-bg);
}

.rail-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.rail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 8px;
  border: 2px solid transparent;
  transition: border-color .2s;
  overflow: hidden;
  flex-shrink: 0;
}

.rail-avatar:hover {
  border-color: var(--border);
}

.rail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ══════════════════════════════════════
   SIDEBAR PANEL (slide-out overlay)
══════════════════════════════════════ */
.sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  left: var(--rail-w);
  top: 0;
  bottom: 0;
  z-index: 11;
  transform: translateX(calc(-100% - 2px));
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
  font-family: var(--font);
  box-shadow: none;
  visibility: hidden;
}

.sidebar.panel-open {
  transform: translateX(0);
  box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
  visibility: visible;
}

body.dark .sidebar.panel-open {
  box-shadow: 8px 0 30px rgba(0, 0, 0, .4);
}

.sidebar.collapsed {
  transform: translateX(calc(-100% - 2px));
  visibility: hidden;
}

/* Globe logo */
.logo-globe {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}

.loading-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  animation: loadingPulse 2s ease-in-out infinite;
  background: transparent;
}

.sidebar-header {
  padding: 18px 14px 12px;
  border-bottom: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.logo-text {
  font-family: 'Aura Neurotoxin', 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.new-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}

.new-chat-btn:hover {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sidebar-section-label {
  padding: 16px 14px 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font);
}

.chat-history {
  --history-edge-fade: 15px;
  flex: 1;
  overflow: hidden;
  padding: 4px 8px 8px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--history-edge-fade),
    #000 calc(100% - var(--history-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--history-edge-fade),
    #000 calc(100% - var(--history-edge-fade)),
    transparent 100%
  );
}

/* Pinned sits above Recents and shares the .chat-history rules above, but it
   must size to its own items instead of claiming an equal flex share of the
   sidebar — otherwise an empty (or single-item) pinned list leaves a large
   dead gap before Recents, sized as if it were a second scrollable list. */
#pinnedHistory {
  flex: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

#pinnedHistory:empty {
  padding: 0;
}

.chat-history::-webkit-scrollbar {
  width: 3px;
}

.chat-history::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.history-item {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s, color .1s;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  line-height: 1.45;
  border: 1px solid transparent;
}

.history-item:hover {
  background: var(--border-soft);
  color: var(--text);
}

/* --- full-text search results --------------------------------------------- */
.search-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.search-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 12px 6px;
}

.search-result {
  padding: 8px 12px 9px;
  border-radius: var(--rs);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .1s;
}

.search-result:hover {
  background: var(--border-soft);
}

.search-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--text-3);
  min-width: 0;
}

.search-result-role {
  font-weight: 600;
  color: var(--accent);
  flex: none;
}

.search-result-convo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-tag {
  flex: none;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--border-soft);
  color: var(--text-3);
}

.search-result-snippet {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-snippet mark {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}

.history-item.active {
  background: var(--border);
  color: var(--text);
}

.history-icon {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.history-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.history-runtime-source {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.history-archive-btn {
  flex-shrink: 0;
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  transition: opacity .15s, color .15s;
}

.history-item:hover .history-archive-btn {
  opacity: 1;
}

.history-archive-btn:hover {
  color: var(--text);
  background: var(--border-soft);
}

.history-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  line-height: 1.4;
}

.archive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 8px;
}

.archive-row-info {
  flex: 1;
  min-width: 0;
}

.archive-row-title {
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.archive-row-meta {
  font-size: 12px;
  color: var(--text-3);
}

.archive-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.archive-empty {
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
  padding: 32px 0;
}

.sidebar-bottom {
  padding: 10px 6px 12px;
  border-top: none;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 8px 12px;
}

.user-avatar-small {
  display: none;
}

.user-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.user-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-info {
  flex: 1;
  min-width: 0;
  padding-left: 6px;
  transform: translateY(1px);
}

.user-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 12px;
  color: var(--text-3);
  text-transform: capitalize;
}

.logout-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: color .1s, background .1s;
  flex-shrink: 0;
  transform: translate(-3px, 1px);
}

.logout-btn:hover {
  color: var(--text);
  background: var(--border-soft);
}

.sidebar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: var(--rs);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  transition: background .1s, color .1s;
  text-align: left;
}

.sidebar-btn:hover {
  background: var(--border-soft);
  color: var(--text);
}

/* ── MAIN ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

/* ── TOPBAR (minimal, Copilot-style) ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  height: 52px;
  flex-shrink: 0;
}

.topbar-brand {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  font-synthesis: none;
  line-height: 1;
  color: var(--text-3);
  letter-spacing: -0.02em;
  text-transform: none;
  transition: opacity .16s ease, transform .16s ease;
  will-change: opacity, transform;
}

.topbar-brand.is-swapping {
  opacity: 0;
  transform: translateY(-3px);
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  transition: background .1s;
  flex-shrink: 0;
  display: none;
}

.sidebar-toggle:hover {
  background: var(--border-soft);
  color: var(--text);
}

.model-selector-wrap {
  position: relative;
}

.model-selector {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  transition: border-color .15s, background .15s;
  min-height: 36px;
  white-space: nowrap;
}

.model-selector:hover {
  border-color: var(--text-3);
  background: var(--bg);
}

/* Model selector as pill inside input card */
.input-model-pill {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  background: var(--bg);
  border-width: 1px;
  border-radius: 14px;
}

.model-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}

.model-dot.anthropic {
  background: var(--p-anthropic);
}

.model-dot.openai {
  background: var(--p-openai);
}

.model-dot.gemini {
  background: var(--p-gemini);
}

.model-dot.groq {
  background: var(--p-groq);
}

.model-dot.grok {
  background: var(--p-grok);
}

.model-dot.deepseek {
  background: var(--p-deepseek);
}

.model-dot.minimax {
  background: var(--p-minimax);
}

.model-dot.fal {
  background: var(--p-fal);
}

.model-dot.ollama {
  background: var(--p-ollama);
}

.model-dot.local-preview {
  background: var(--p-local-preview);
}

.execution-target-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex: 0 0 auto;
}

.execution-target-dot.online {
  background: #22b573;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22b573 18%, transparent);
}

.execution-target-dot.busy {
  background: #d8922d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d8922d 18%, transparent);
}

.execution-target-dot.attention {
  background: #d05a57;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d05a57 18%, transparent);
}

.execution-target-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.execution-target-icon svg {
  width: 15px;
  height: 15px;
}

.remote-job-status {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

.remote-live-event {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.remote-live-event pre {
  max-height: 220px;
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.remote-live-event .remote-live-diff { color: var(--accent); }
.remote-live-event img {
  display: block;
  max-width: min(100%, 720px);
  max-height: 420px;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: contain;
}

.remote-approval-panel:not(:empty) {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--rs);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.remote-approval-description {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.remote-approval-command {
  display: block;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  white-space: pre-wrap;
}

.remote-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.remote-approval-actions .retry-btn {
  padding: 7px 11px;
}

.remote-approval-actions .retry-btn.danger {
  color: #c83f49;
}

/* Model Dropdown Logic */
.model-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  max-height: 340px;
  overflow-y: auto;
  display: none;
  z-index: 200;
  padding: 5px;
}

.model-dropdown.open {
  display: block;
  animation: dropIn .13s ease;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Open upwards when input area is at the bottom */
.input-area:not(.welcome-mode) .model-dropdown {
  top: auto;
  bottom: calc(100% + 6px);
}

.input-area:not(.welcome-mode) .model-dropdown.open {
  animation: dropUp .13s ease;
}

/* Welcome mode opens downward unless the viewport lacks room (app.js). */
.input-area.welcome-mode .model-dropdown.drop-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.input-area.welcome-mode .model-dropdown.drop-up.open {
  animation: dropUp .13s ease;
}

@keyframes dropUp {
  from {
    opacity: 0;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.model-group-label {
  padding: 8px 10px 3px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.model-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  transition: background .1s, color .1s;
}

.model-option:hover,
.model-option.active {
  background: var(--bg);
  color: var(--text);
}

.model-opt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-model-picker-wrap {
  max-width: 100%;
}

.settings-model-picker {
  width: 100%;
  justify-content: flex-start;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 16px;
}

.settings-model-picker span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-model-picker svg {
  margin-left: auto;
  color: var(--text-3);
  flex-shrink: 0;
}

.settings-model-dropdown {
  width: 100%;
  min-width: 100%;
}

.default-model-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  inset: auto auto 0 0;
}

.arena-selectors {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide standalone header dots — model selector pills already have their own dot */
.arena-col-header > .arena-col-dot { display: none; }
.topbar #arenaSelectors,
.topbar #reviewSelectors {
  display: none !important;
}

.arena-vs {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
}

.review-magnifier {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: none;
  flex-shrink: 0;
}

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

.provider-pills {
  display: flex;
  gap: 5px;
}

.provider-pill {
  padding: 4px 10px;
  border-radius: var(--rs);
  font-size: 13px;
  font-style: italic;
  border: 1.5px solid;
  background: transparent;
  opacity: .35;
  white-space: nowrap;
}

.provider-pill.active {
  opacity: 1;
}

.provider-pill.anthropic {
  color: var(--p-anthropic);
  border-color: var(--p-anthropic);
}

.provider-pill.anthropic.active {
  background: rgba(212, 130, 106, .1);
}

.provider-pill.openai {
  color: var(--p-openai);
  border-color: var(--p-openai);
}

.provider-pill.openai.active {
  background: rgba(16, 163, 127, .1);
}

.provider-pill.gemini {
  color: var(--p-gemini);
  border-color: var(--p-gemini);
}

.provider-pill.gemini.active {
  background: rgba(74, 144, 217, .1);
}

.provider-pill.groq {
  color: var(--p-groq);
  border-color: var(--p-groq);
}

.provider-pill.groq.active {
  background: rgba(245, 80, 54, .1);
}

.provider-pill.grok {
  color: var(--p-grok);
  border-color: var(--p-grok);
}

.provider-pill.grok.active {
  background: rgba(29, 161, 242, .1);
}

.provider-pill.deepseek {
  color: var(--p-deepseek);
  border-color: var(--p-deepseek);
}

.provider-pill.deepseek.active {
  background: rgba(91, 138, 245, .1);
}

.provider-pill.minimax {
  color: var(--p-minimax);
  border-color: var(--p-minimax);
}

.provider-pill.minimax.active {
  background: rgba(124, 92, 255, .12);
}

.provider-pill.fal {
  color: var(--p-fal);
  border-color: var(--p-fal);
}

.provider-pill.fal.active {
  background: rgba(255, 111, 97, .12);
}

.provider-pill.openai-sub {
  color: #10a37f;
  border-color: #10a37f;
}

.provider-pill.openrouter {
  color: #6467f2;
  border-color: #6467f2;
}

.provider-pill.ollama {
  color: var(--p-ollama);
  border-color: var(--p-ollama);
}

.provider-pill.ollama.active {
  background: rgba(139, 111, 212, .1);
}

.provider-pill.local-preview {
  color: var(--p-local-preview);
  border-color: var(--p-local-preview);
}

.provider-pill.local-preview.active {
  background: rgba(127, 147, 255, .12);
}

.mode-toggle-wrap {
  display: none;
}

.mode-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1;
}

.mode-toggle-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ── DRAG DROP OVERLAY ── */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface) 72%, var(--accent-selection-bg-strong));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  border: 1.5px dashed var(--accent);
  border-radius: inherit;
  margin: 0;
  pointer-events: none;
}

.drop-overlay.active {
  display: flex;
}

.input-box.dragover {
  border-color: var(--accent);
}

.drop-inner {
  text-align: center;
  color: var(--accent);
  transform: translateY(1px);
}

.drop-inner svg {
  margin-bottom: 8px;
  opacity: .8;
}

.drop-inner p {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.drop-inner span {
  font-size: 12px;
  color: var(--text-2);
}

/* ── MESSAGES ── */
.messages-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
}

.messages-wrap::-webkit-scrollbar {
  width: 4px;
}

.messages-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.messages {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 8px;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════
   WELCOME SCREEN (greeting only, centered)
══════════════════════════════════════ */
#welcomeInputGroup {
  flex-shrink: 0;
}

.welcome-screen {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 16px;
  text-align: center;
  animation: fadeUp .4s ease;
}

.welcome-title {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.5px;
  color: var(--text);
  max-width: 520px;
  line-height: 1.25;
}

.welcome-subtitle {
  margin-top: 12px;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-3);
}

.message-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 20px;
  animation: fadeUp .2s ease;
}

.message-group.user {
  align-items: flex-end;
}

.message-group.assistant {
  align-items: flex-start;
  --assistant-surface-width: min(760px, 82vw);
  --assistant-surface-max: 82%;
}

.message-meta {
  font-size: 12px;
  color: var(--text-3);
  padding: 0 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.message-group.assistant .message-meta {
  margin-left: 8px;
  margin-bottom: 7px;
  padding-left: 12px;
}

.run-receipt-history {
  width: min(760px, 82vw);
  margin: 2px 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 12px;
}

.run-receipt-heading { margin-bottom: 5px; color: var(--text-2); font-weight: 600; }
.run-receipt { padding: 2px 0; }
.run-receipt-message { margin-top: 2px; color: var(--text-3); line-height: 1.4; }
.run-receipt.failed { color: var(--red, #d45858); }

.meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.message {
  max-width: 82%;
  padding: 12px 16px;
  line-height: 1.65;
  font-size: 15px;
}

.message.user {
  /* background/color live in the late-cascade shell override below (single
     authoritative token rule); this block keeps the compact user-bubble box. */
  border-radius: var(--aura-radius-settings-control);
  padding: 7px 10px;
  line-height: 1.35;
}

.message.assistant {
  width: var(--assistant-surface-width);
  max-width: var(--assistant-surface-max);
  box-sizing: border-box;
  background: transparent;
  color: var(--text);
  border-radius: 4px 14px 14px 14px;
  padding-left: 0;
}

.message.assistant.streaming::after {
  content: none;
}

/* Char cascade — newly streamed characters fade + rise in, per character */
.cchar {
  opacity: 0;
  display: inline-block;
  white-space: pre;
  transform: translateY(3px);
  will-change: opacity, transform;
}
.cchar.show {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease-out, transform .3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .cchar { opacity: 1; transform: none; }
  .cchar.show { transition: none; }
}

.message.assistant.streaming.spinner-only {
  padding: 2px 0 0;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  min-height: 18px;
}

.streaming-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinArc .7s linear infinite;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
}

.message.assistant.assistant-stream-hidden {
  display: none;
}

/* Native tool steps: one quiet line per tool call above the answer. */
.tool-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 8px;
  max-width: 100%;
}

.tool-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted, var(--muted-foreground, #8a8a8a));
}

.tool-step::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  align-self: center;
  background: currentColor;
  opacity: 0.45;
}

.tool-step[data-state="started"]::before {
  opacity: 1;
  background: var(--accent, #7c6cf0);
  animation: tool-step-pulse 1.1s ease-in-out infinite;
}

.tool-step[data-state="error"]::before {
  background: var(--red);
  opacity: 0.9;
}

.tool-step-label {
  flex: 0 0 auto;
  font-weight: 500;
}

.tool-step-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

.tool-step-detail:empty {
  display: none;
}

.tool-step-label::after {
  content: " ·";
  font-weight: 400;
}

.tool-step:has(.tool-step-detail:empty) .tool-step-label::after {
  content: "";
}

/* Jev web-search decision: a quiet addition to the reply's meta row. */
.message-group.assistant .message-meta:has(.meta-decision) {
  flex-wrap: wrap;
  row-gap: 2px;
  max-width: calc(100% - 20px);
}
.meta-decision {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.meta-decision::before {
  content: "·";
  margin-right: 5px;
}

@keyframes tool-step-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-step[data-state="started"]::before { animation: none; }
}

.assistant-progress-panel {
  width: var(--assistant-surface-width);
  max-width: var(--assistant-surface-max);
  box-sizing: border-box;
  margin: 2px 0 2px 0;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-dropdown-panel);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(250, 249, 246, .96));
  box-shadow: 0 12px 30px rgba(24, 24, 26, .09);
}

.assistant-progress-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}

.assistant-progress-summary::-webkit-details-marker {
  display: none;
}

.assistant-progress-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.assistant-progress-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: none;
  animation: none;
}

.assistant-progress-hint {
  min-width: 0;
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-progress-body {
  padding: 0 14px 14px;
}

.assistant-progress-pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--aura-radius-settings-control);
  border: 1px solid var(--border-soft);
  background: rgba(244, 243, 238, .9);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

body.dark .assistant-progress-panel {
  border-color: rgba(173, 190, 255, 0.14);
  background: linear-gradient(180deg, rgba(20, 28, 46, 0.88), rgba(13, 18, 31, 0.92));
  box-shadow: 0 14px 34px rgba(4, 8, 18, 0.28);
}

body.dark .assistant-progress-title {
  color: #f5f7fb;
}

body.dark .assistant-progress-hint {
  color: #c3ccdb;
}

body.dark .assistant-progress-pre {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #d9e0ec;
}

@keyframes spinArc {
  to { transform: rotate(360deg); }
}

@keyframes thinkingPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 transparent;
  }
}

.message.assistant p {
  margin-bottom: .7em;
}

.message.assistant p:last-child {
  margin-bottom: 0;
}

.message.assistant h1 {
  font-size: 20px;
  margin: .9em 0 .35em;
}

.message.assistant h2 {
  font-size: 18px;
  margin: .9em 0 .35em;
}

.message.assistant h3 {
  font-size: 16px;
  margin: .9em 0 .35em;
}

.message.assistant h1.rtl-text,
.message.assistant h2.rtl-text,
.message.assistant h3.rtl-text,
.message.assistant p.rtl-text,
.message.assistant ul.rtl-text,
.message.assistant li.rtl-text {
  font-family: 'Vazirmatn', var(--font), sans-serif !important;
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

.message.assistant ul,
.message.assistant ol {
  padding-left: 1.3em;
  margin-bottom: .7em;
}

.message.assistant li {
  margin-bottom: .25em;
}

.message.assistant code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--border-soft);
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--accent);
}

.code-block {
  background: var(--code-bg);
  border-radius: var(--rs);
  overflow: hidden;
  margin: .7em 0;
  border: 1px solid rgba(255, 255, 255, .06);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.code-lang {
  font-family: var(--mono);
  font-size: 12px;
  color: #6a6860;
}

.copy-btn {
  background: none;
  border: none;
  color: #6a6860;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color .1s;
}

.copy-btn:hover {
  color: #c0bcb4;
}

.code-btns {
  display: flex;
  gap: 4px;
}

.run-code-btn {
  color: #2ecc71 !important;
}

.run-code-btn:hover {
  color: #27ae60 !important;
}

.code-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Code execution output */
.code-run-output {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 10px 14px;
}

.code-run-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--accent);
}

.code-run-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
  margin-top: 8px;
}

.code-run-label:first-child {
  margin-top: 0;
}

.code-run-pre {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--code-text);
  background: rgba(0, 0, 0, .15);
  padding: 8px 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  margin: 0 0 4px;
}

.code-run-stderr {
  color: #e57373;
}

.code-run-error {
  font-size: 13px;
  color: var(--red-text);
  padding: 6px 0;
}

.code-run-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.code-run-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .04);
  border-radius: 4px;
  width: fit-content;
}

.code-run-file-link:hover {
  background: rgba(255, 255, 255, .08);
}

/* Code block file download card */
.code-file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 8px 0 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.code-file-card:hover {
  border-color: var(--text-3);
  box-shadow: var(--shadow);
}

.code-file-icon {
  flex-shrink: 0;
  color: var(--text-3);
}

.code-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.code-file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.code-file-lang {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.code-file-dl {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.code-file-dl:hover {
  border-color: var(--text-3);
  background: var(--bg);
}

/* Sandbox auto-execution results */
.sandbox-auto-result {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.sandbox-result-section {
  margin-bottom: 8px;
}

.sandbox-result-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin-bottom: 4px;
  display: block;
}

.sandbox-result-pre {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  padding: 8px 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}

.sandbox-result-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.sandbox-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

.sandbox-file-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.sandbox-file-icon {
  flex-shrink: 0;
  color: var(--text-3);
}

.sandbox-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sandbox-file-name {
  font-size: 14px;
  font-weight: 500;
}

.sandbox-file-size {
  font-size: 11px;
  color: var(--text-3);
}

.sandbox-file-dl {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: hidden;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.code-block code {
  display: block;
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.code-block code .tok-keyword {
  color: var(--code-keyword);
}

.code-block code .tok-string {
  color: var(--code-string);
}

.code-block code .tok-comment {
  color: var(--code-comment);
  font-style: italic;
}

.code-block code .tok-number {
  color: var(--code-number);
}

.code-block code .tok-function {
  color: var(--code-function);
}

.code-block code .tok-class {
  color: var(--code-class);
}

.code-block code .tok-builtin {
  color: var(--code-builtin);
}

.code-block code .tok-operator {
  color: var(--code-operator);
}

.code-block code .tok-punctuation {
  color: var(--code-punctuation);
}

.code-block code .tok-attr {
  color: var(--code-attr);
}

.code-block code .tok-tag {
  color: var(--code-tag);
}

.message-actions {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity .15s;
}

.message-group:hover .message-actions {
  opacity: 1;
}

/* Copy button fades in once a streamed answer is finished, and stays visible. */
.message-actions.revealed {
  opacity: 1;
  animation: copyReveal .3s ease-out;
}
@keyframes copyReveal {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .message-actions.revealed { animation: none; }
}

.message-stream-note {
  max-width: 82%;
  margin: 2px 0 6px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226, 159, 90, 0.18);
  background: rgba(226, 159, 90, 0.08);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Retry button for interrupted responses */
.retry-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
}

.retry-notice {
  font-size: 13px;
  color: var(--text-3);
}

.retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.retry-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.retry-btn svg {
  color: var(--accent);
}

.image-capability-warning p {
  margin-bottom: 12px;
}

.image-warning-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.describe-btn:disabled {
  opacity: .65;
  cursor: wait;
}

.msg-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: color .1s, background .1s;
}

.msg-action-btn:hover {
  color: var(--text);
  background: var(--border-soft);
}

.user-msg-actions {
  justify-content: flex-end;
}

.msg-action-icon {
  padding: 4px 6px;
}

/* ── ATTACHED FILES BAR ── */
.attached-files-bar {
  width: 100%;
  padding: 0 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.attached-files-bar:empty {
  display: none;
  padding: 0;
}

.attached-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: var(--rs);
  font-size: 13px;
  color: var(--text);
}

.attached-chip .outline-file-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.attached-chip button {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 15px;
}

.attached-chip button:hover {
  color: var(--red-text);
}

/* ── TOKEN BAR ── */
.token-bar {
  max-width: 614px;
  width: 100%;
  margin: 0 auto 2px;
  padding: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  justify-content: flex-start;
  line-height: 1;
}

.token-sep {
  opacity: .4;
}

.token-bar svg {
  flex-shrink: 0;
  display: block;
  margin-top: 1px;
}

#tokenCount {
  display: inline-flex;
  align-items: center;
}

/* ── INPUT (unified card — textarea top, tools row below) ── */
.input-area {
  padding: 6px 20px 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.input-area.welcome-mode {
  /* centered on welcome screen */
}


/* Welcome: title, subtitle and composer centered as one group at every
   width, so the model picker has room to open below the composer. */
#chatView.chat-welcome-mode #welcomeInputGroup,
#chatView.chat-submitting #welcomeInputGroup {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 8;
  transition: bottom .52s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1);
  will-change: bottom, transform;
}

#chatView.chat-welcome-mode #welcomeInputGroup {
  bottom: calc(50% + 30px);
  transform: translateY(50%);
}

#chatView.chat-submitting #welcomeInputGroup {
  bottom: 0;
  transform: translateY(0);
}

#chatView.chat-welcome-mode #messages {
  display: none;
}

#chatView.chat-welcome-mode .welcome-screen {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .36s cubic-bezier(.22, 1, .36, 1);
}

#chatView.chat-submitting .welcome-screen,
#chatView.chat-active .welcome-screen {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
  transition: opacity .22s ease, transform .36s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 769px) {
  .message-group.user.just-sent {
    animation: userMessageTravelUp .42s cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes userMessageTravelUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #chatView.chat-welcome-mode #welcomeInputGroup,
  #chatView.chat-submitting #welcomeInputGroup,
  #chatView.chat-welcome-mode .welcome-screen,
  #chatView.chat-submitting .welcome-screen,
  #chatView.chat-active .welcome-screen {
    transition: none;
  }

  .message-group.user.just-sent {
    animation: none;
  }
}

.input-box {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: var(--aura-frame-border-width) solid var(--aura-frame-border);
  border-radius: var(--aura-radius-composer-frame);
  padding: 16px 18px;
  transition: box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .04);
  position: relative;
}

.input-box:focus-within {
  border-color: var(--aura-frame-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .04);
}

.input-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.input-tools-spacer {
  flex: 1;
}

.input-tools-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.arena-input-label {
  font-size: 12px;
  color: var(--text-3);
}

.input-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.input-hint {
  font-size: 12px;
  color: var(--text-3);
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-3);
  cursor: pointer;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}

.tool-btn:hover {
  background: var(--border-soft);
  color: var(--text);
}

.tool-btn.recording {
  color: var(--red-text);
  border-color: var(--red);
  animation: recPulse .8s ease infinite;
}

.tool-btn.processing {
  color: var(--text);
  border-color: var(--border-soft);
  cursor: wait;
}

.voice-countdown {
  display: none;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 52px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(164, 43, 40, .08);
  color: var(--red-text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
}

.voice-countdown.active {
  display: inline-flex;
}

.voice-countdown.warning {
  background: rgba(164, 43, 40, .16);
  border-color: rgba(164, 43, 40, .55);
}

.tool-btn-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 18px;
}

.tool-btn-dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .35;
  animation: voiceDots 1s ease-in-out infinite;
}

.tool-btn-dots span:nth-child(2) { animation-delay: .15s; }
.tool-btn-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes recPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(164, 43, 40, .4)
  }

  50% {
    box-shadow: 0 0 0 5px rgba(164, 43, 40, 0)
  }
}

@keyframes voiceDots {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: .35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.input-textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  resize: none;
  line-height: 1.6;
  max-height: 190px;
  overflow-y: auto;
}

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

.send-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: var(--text);
  border: none;
  color: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s, transform .1s;
  flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.send-btn:disabled {
  background: var(--border);
  opacity: .5;
  cursor: not-allowed;
}

.send-btn.stop {
  background: var(--red);
}

/* ── ARENA ── */
.arena-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.arena-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.arena-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.arena-col-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}

.arena-col-name {
  font-size: 14px;
  color: var(--text-2);
}

.arena-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.arena-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 52px;
  display: flex;
  flex-direction: column;
  mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
  align-items: center;
}

.arena-msg {
  margin-bottom: 20px;
  animation: fadeUp .2s ease;
  max-width: 680px;
  width: 100%;
}

.arena-msg.user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.arena-msg.user .arena-bubble {
  background: var(--user-bg);
  color: var(--user-text);
  border-radius: var(--aura-radius-settings-control);
  padding: 7px 10px;
  font-size: 15px;
  line-height: 1.35;
  display: inline-block;
  max-width: 85%;
}

.arena-msg.user .message-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

.arena-msg.assistant .arena-bubble {
  background: transparent;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  padding: 0;
}

.arena-empty {
  color: var(--text-3);
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
  max-width: 680px;
  width: 100%;
}

.arena-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  margin-top: 8px;
  align-self: center;
}

.arena-continue-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

.arena-continue-btn svg {
  color: var(--accent);
}

.arena-msg.assistant.streaming .arena-bubble::after {
  content: none;
}

.arena-bubble p {
  margin-bottom: .6em;
}

.arena-bubble p:last-child {
  margin-bottom: 0;
}

.arena-bubble code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--border-soft);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent);
}

/* ── SETTINGS MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.open {
  display: flex;
  animation: fadeIn .15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.settings-modal {
  display: flex;
  width: 920px;
  max-width: 96vw;
  height: 640px;
  max-height: 92vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: slideUp .2s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.settings-sidebar {
  width: 190px;
  min-width: 190px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.settings-sidebar-title {
  font-size: 16px;
  color: var(--text);
  padding: 4px 8px 18px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}

.settings-nav-item:hover {
  background: var(--border-soft);
  color: var(--text);
}

.settings-nav-item.active {
  background: var(--accent);
  color: white;
}

.settings-nav-item.active svg {
  stroke: white;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 24px;
  position: relative;
}

.settings-content::-webkit-scrollbar {
  width: 4px;
}

.settings-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .1s, color .1s;
}

.modal-close:hover {
  background: var(--border-soft);
  color: var(--text);
}

.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
  animation: fadeUp .15s ease;
}

#projectsTabHeader {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.settings-tab-title {
  font-size: 18px;
  margin-bottom: 22px;
  color: var(--text);
  padding-top: 24px;
}

.settings-section {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-soft);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section-title {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.setting-label {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.setting-hint {
  font-size: 13px;
  color: var(--text-3);
}

.setting-select {
  padding: 9px 44px 9px 12px;
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a0b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  width: 100%;
  max-width: 280px;
  transition: border-color .15s;
}

.setting-select:focus {
  border-color: var(--accent);
}

.aura-select-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.aura-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  inset: auto auto 0 0;
}

.aura-select-button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px 0 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.aura-select-button:hover,
.aura-select-wrap.open .aura-select-button {
  border-color: var(--text-3);
  background: var(--surface);
}

.aura-select-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aura-select-label.placeholder {
  color: var(--text-3);
}

.aura-select-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--text-3);
  transition: transform .13s ease, color .13s ease;
}

.aura-select-wrap.open .aura-select-caret {
  transform: rotate(180deg);
  color: var(--text);
}

.aura-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(460px, calc(100vw - 40px));
  max-height: 320px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  display: none;
  z-index: 2000;
  padding: 5px;
}

.aura-select-wrap.open .aura-select-menu {
  display: block;
  animation: dropIn .13s ease;
}

.aura-select-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  user-select: none;
  transition: background .1s, color .1s;
}

.aura-select-option:hover,
.aura-select-option.active {
  background: var(--bg);
  color: var(--text);
}

.aura-select-option.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.aura-select-check {
  width: 15px;
  flex: 0 0 15px;
  color: var(--text);
  font-weight: 900;
  text-align: center;
}

.aura-select-empty {
  padding: 12px 14px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.setting-textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  transition: border-color .15s;
}

.setting-textarea:focus {
  border-color: var(--accent);
}

.settings-footer {
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.ollama-host-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.ollama-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}

.ollama-status-dot.connected {
  background: #2ecc71;
}

.ollama-status-dot.error {
  background: var(--red);
}

.ollama-status-msg {
  font-size: 12px;
  color: var(--text-3);
  min-height: 18px;
}

.transcription-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--text-3);
}

.transcription-drop-zone:hover,
.transcription-drop-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-selection-bg);
}

.transcription-drop-zone p {
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
}

.transcription-drop-zone span {
  font-size: 12px;
  color: var(--text-3);
}

.transcription-drop-zone svg {
  color: var(--text-3);
}

.transcription-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--accent);
}

.mode-btns {
  display: flex;
  gap: 7px;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
}

.mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.color-palette-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-palette-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.color-swatch:hover {
  transform: scale(1.12);
}

.color-swatch.active {
  outline: 2.5px solid currentColor;
  outline-offset: 2px;
  border-color: transparent;
}

.swatch-check {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.color-swatch.active .swatch-check {
  display: flex;
}

/* ── Appearance → Advanced (collapsed by default) ── */
.settings-advanced {
  margin-top: 22px;
}

.settings-advanced > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}

.settings-advanced > .radius-settings-panel {
  margin-top: 12px;
}

/* ── Appearance → Radiuses ── */
.radius-settings-panel {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-card-surface);
  background: color-mix(in srgb, var(--surface) 82%, var(--bg));
}

.radius-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.radius-settings-header .setting-label {
  color: var(--text);
  font-weight: 700;
}

.radius-master-control {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--aura-radius-settings-control);
  background: var(--bg);
  margin-bottom: 14px;
}

.radius-master-label,
.radius-token-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.radius-master-label span,
.radius-token-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.radius-master-label strong,
.radius-token-effective {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.radius-master-inputs,
.radius-token-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px auto;
  align-items: center;
  gap: 10px;
}

.radius-master-inputs input[type="range"],
.radius-token-input-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.radius-master-inputs input[type="number"],
.radius-token-number {
  width: 74px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-small-button);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}

.radius-token-unit {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.radius-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.radius-token-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--aura-radius-settings-control);
  background: var(--bg);
}

.radius-token-head div {
  display: grid;
  gap: 4px;
}

.radius-token-head span {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.35;
}

.radius-inventory {
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.radius-inventory summary {
  cursor: pointer;
  color: var(--text-2);
  font-weight: 800;
  font-size: 13px;
}

.radius-inventory-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.radius-inventory-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--text-2);
  font-size: 12px;
}

.radius-inventory-token,
.radius-inventory-value {
  border-radius: var(--aura-radius-small-button);
  padding: 3px 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.radius-inventory-token {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-3);
}

.radius-inventory-value {
  background: var(--surface);
  color: var(--accent);
  font-family: var(--mono);
}

@media (max-width: 620px) {
  .radius-master-inputs,
  .radius-token-input-row,
  .radius-inventory-item {
    grid-template-columns: 1fr;
  }
}

.favicon-upload-area {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--r);
  margin-top: 10px;
  transition: border-color .2s;
  cursor: pointer;
}

.favicon-upload-area:hover,
.favicon-upload-area.dragover {
  border-color: var(--accent);
}

.favicon-preview {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}

.favicon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.favicon-upload-hint p {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 4px;
}

.favicon-upload-hint span {
  font-size: 13px;
  color: var(--text-3);
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  text-decoration: underline;
}

.api-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}

.available-provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.available-provider-tags .provider-badge {
  font-size: 13px;
  padding: 5px 10px;
}

.available-providers-empty {
  color: var(--text-3);
  font-size: 13px;
}

.api-key-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.provider-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: white;
}

.provider-badge.anthropic {
  background: var(--p-anthropic);
}

.provider-badge.openai {
  background: var(--p-openai);
}

.provider-badge.gemini {
  background: var(--p-gemini);
}

.provider-badge.groq {
  background: var(--p-groq);
}

.provider-badge.grok {
  background: var(--p-grok);
}

.provider-badge.deepseek {
  background: var(--p-deepseek);
}

.provider-badge.minimax {
  background: var(--p-minimax);
}

.provider-badge.fal {
  background: var(--p-fal);
}

.provider-badge.openai-sub {
  background: #10a37f;
}

.provider-badge.openrouter {
  background: #6467f2;
}

.provider-badge.local-preview {
  background: var(--p-local-preview);
}

.api-key-label {
  font-size: 14px;
  color: var(--text-2);
}

.api-key-input {
  flex: 1;
  padding: 8px 11px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.api-key-input.api-status-input,
.api-key-input.api-status-input:disabled {
  color: var(--text-2);
  background: var(--border-soft);
  border-color: var(--border);
  opacity: 1;
  -webkit-text-security: none;
  cursor: default;
}

.api-key-input.api-status-input.is-active,
.api-key-input.api-status-input.is-inactive {
  color: var(--text-2);
}

.api-key-input:focus {
  border-color: var(--accent);
}

.provider-accordion {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  background: var(--bg);
  transition: background .1s;
  user-select: none;
}

.accordion-header:hover {
  background: var(--border-soft);
}

.accordion-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.accordion-label {
  font-size: 15px;
  color: var(--text);
  flex: 1;
}

.accordion-count {
  font-size: 12px;
  color: var(--text-3);
}

.accordion-chevron {
  color: var(--text-3);
  transition: transform .2s;
}

.accordion-chevron.open {
  transform: rotate(180deg);
}

.accordion-body {
  display: none;
  padding: 6px 8px 8px;
}

.accordion-body.open {
  display: block;
}

.model-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}

.model-check-item:hover {
  background: var(--bg);
}

.model-check-item input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.model-check-name {
  font-size: 14px;
  color: var(--text-2);
  flex: 1;
}

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.file-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.file-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.file-card.selected {
  border-color: var(--accent-selection-border);
  background: var(--accent-selection-bg);
}

.file-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.outline-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  color: currentColor;
}

.outline-file-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.file-icon .outline-file-icon {
  width: 24px;
  height: 24px;
}

.file-img-fallback .outline-file-icon {
  width: 24px;
  height: 24px;
}

.outline-file-icon-pdf {
  color: #f97360;
}

.outline-file-icon-data {
  color: #7aa2ff;
}

.outline-file-icon-audio {
  color: #8f7cff;
}

.outline-file-icon-video {
  color: #7fd1b9;
}

.outline-file-icon-image {
  color: #9fb4ff;
}

.file-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.file-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.file-meta {
  font-size: 12px;
  color: var(--text-3);
}

.file-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.file-del-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: color .1s, background .1s;
}


.file-del-btn:hover {
  color: var(--red-text);
  background: rgba(164, 43, 40, .08);
}

.ollama-status {
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 9px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.online {
  background: #38a169;
}

.status-dot.offline {
  background: var(--red);
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}

.user-row-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.user-row-name {
  font-size: 14px;
  color: var(--text);
}

.user-row-email {
  font-size: 12px;
  color: var(--text-3);
}

.role-badge {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
}

.role-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.role-badge-icon.role-admin    { background: #e8f0fe; color: #1a56db; }
.role-badge-icon.role-user     { background: var(--border-soft); color: var(--text-2); }
.role-badge-icon.role-superuser{ background: #fef3e2; color: #b7571c; }
body.dark .role-badge-icon.role-admin    { background: #1a2a4a; color: #90cdf4; }
body.dark .role-badge-icon.role-user     { background: var(--border); color: var(--text-2); }
body.dark .role-badge-icon.role-superuser{ background: #3a2010; color: #f6ad55; }

.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.admin-icon-btn:hover { background: var(--hover-bg); }
.admin-icon-delete { color: var(--red-text) !important; border-color: var(--red-text)40 !important; }

.role-superuser {
  background: #fef3e2;
  color: #b7571c;
}

.role-admin {
  background: #e8f0fe;
  color: #1a56db;
}

.role-user {
  background: var(--border-soft);
  color: var(--text-2);
}

body.dark .role-superuser {
  background: #3a2010;
  color: #f6ad55;
}

body.dark .role-admin {
  background: #1a2a4a;
  color: #90cdf4;
}

body.dark .role-user {
  background: var(--border);
  color: var(--text-2);
}

.mini-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px 28px 24px;
  width: 400px;
  max-width: 94vw;
  box-shadow: var(--shadow-lg);
  animation: slideUp .2s ease;
  position: relative;
}

.mini-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mini-modal-header h3 {
  font-size: 18px;
  color: var(--text);
}

.mini-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.log-viewer {
  background: var(--code-bg);
  border-radius: var(--rs);
  padding: 13px;
  height: 300px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  user-select: text;
  -webkit-user-select: text;
}

.log-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 8px;
  gap: 10px;
}

.log-file-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.log-file-name {
  font-size: 13px;
  font-family: var(--mono);
  color: var(--text);
  font-weight: 500;
}

.log-file-meta {
  font-size: 12px;
  color: var(--text-3);
}

.log-file-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.log-entry {
  padding: 2px 0;
  line-height: 1.5;
}

.log-time {
  color: #4e5a6e;
  margin-right: 8px;
}

.log-info {
  color: #8892a4;
}

.log-success {
  color: #68d391;
}

.log-error {
  color: var(--red-text);
}

.log-warn {
  color: #f6ad55;
}

.btn-primary {
  padding: 9px 20px;
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  background: var(--accent);
  color: white;
  border: none;
  transition: filter .15s, transform .1s;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-primary:active {
  transform: scale(.97);
}

.btn-small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: background .1s, color .1s;
}

.btn-small:hover {
  background: var(--border-soft);
  color: var(--text);
}

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--text);
  color: var(--surface);
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 2000;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

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

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── FAVICON TWO-COL ── */
.favicon-two-col {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 10px;
}

.favicon-col {
  display: flex;
  flex-direction: column;
  min-width: 120px;
}

.favicon-col-or {
  padding: 32px 18px 0;
  font-size: 13px;
  color: var(--text-3);
}

.emoji-favicon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

.emoji-input {
  width: 80px !important;
  font-size: 22px;
  text-align: center;
  padding: 8px 10px;
}

/* ── FILE IMAGE PREVIEWS ── */
.file-img-preview {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border-soft);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-card .file-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* ── WEB SEARCH TAB ── */
.engine-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: border-color .15s;
}

.engine-option:has(input:checked) {
  border-color: var(--accent-selection-border);
  background: var(--accent-selection-bg);
}

.engine-option input[type=radio] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.engine-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.engine-info strong {
  font-size: 14px;
  color: var(--text);
}

.engine-info span {
  font-size: 12px;
  color: var(--text-3);
}

.engine-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.engine-badge.free {
  background: #e6f4ea;
  color: #2d7d46;
}

.engine-badge.premium {
  background: #fef3e2;
  color: #b7571c;
}

body.dark .engine-badge.free {
  background: #1a3a24;
  color: #68d391;
}

body.dark .engine-badge.premium {
  background: #3a2010;
  color: #f6ad55;
}

/* ── IMAGE IN CHAT ── */
.chat-image-wrap {
  margin: 6px 0;
}

.chat-image-wrap img {
  max-width: 340px;
  max-height: 260px;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
}

.search-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: var(--rs);
  font-size: 12px;
  color: var(--accent);
  min-height: 36px;
}

.search-indicator svg {
  stroke: var(--accent);
  flex-shrink: 0;
}

/* ── MESSAGE IMAGE ROW ── */
.msg-images-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.msg-images-row.user {
  justify-content: flex-end;
}

.msg-images-row.assistant {
  justify-content: flex-start;
  padding-left: 0;
}

.msg-img-thumb {
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: block;
}

.msg-img-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.msg-files-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.msg-files-row.user {
  justify-content: flex-end;
}

.msg-files-row.assistant {
  justify-content: flex-start;
}

.msg-file-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 260px;
}

.msg-file-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.msg-file-icon .outline-file-icon {
  width: 16px;
  height: 16px;
}

.msg-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  font-size: 13px;
  color: var(--text);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
  animation: fadeIn .15s ease;
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 199;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-backdrop.active {
  display: block;
}

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide icon rail on mobile */
  .icon-rail {
    display: none;
  }

  .sidebar-toggle {
    display: flex;
    transform: scale(1.1);
  }

  /* Sidebar slides in as overlay (full overlay, no rail offset) */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 85vw !important;
    max-width: 320px !important;
    min-width: unset !important;
    box-shadow: none;
    height: 100dvh !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    visibility: hidden;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
    visibility: visible;
  }

  .user-badge {
    gap: 9px;
  }

  .user-avatar-small {
    display: flex;
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
    visibility: hidden;
  }

  .main {
    width: 100vw;
    min-width: 0;
  }

  .topbar {
    padding: max(11px, env(safe-area-inset-top)) 14px 11px !important;
    gap: 8px;
    background: transparent;
  }

  .topbar .topbar-brand {
    font-size: 15.4px;
  }

  .messages {
    padding: 20px 24px 8px;
  }

  body {
    padding-top: 0;
  }

  .provider-pills {
    display: none;
  }

  #modelSelectorLabel {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message {
    max-width: 93%;
    font-size: 16px;
    line-height: 1.575;
  }

  .message.assistant p {
    margin-bottom: .85em;
  }

  .message.assistant li {
    margin-bottom: .4em;
    line-height: 1.52;
  }

  .input-area {
    padding: 6px 10px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    background: transparent;
    z-index: 10;
  }

  .input-hint {
    display: none;
  }

  .welcome-title {
    font-size: 24px;
  }

  .welcome-screen {
    padding: 16px 16px 12px;
  }

  .welcome-chips {
    gap: 6px;
  }

  .chip {
    font-size: 13px;
    padding: 8px 14px;
  }

  .arena-columns {
    flex-direction: column;
  }

  .arena-divider {
    width: 100%;
    height: 1px;
  }

  .modal-overlay.open {
    align-items: flex-end;
  }

  /* Floating card: 16px from the left, right and bottom edges. Its top stays
     below the status bar / Dynamic Island (safe area + 16px), so the tab
     strip is never under the system's non-tappable status region when Aura
     runs from the Home Screen. Kept above the global v6 radius mapping via
     specificity. */
  .modal-overlay .settings-modal {
    --settings-edge: 16px;
    --settings-top: calc(max(env(safe-area-inset-top), 24px) + var(--settings-edge));
    --settings-bottom: max(var(--settings-edge), env(safe-area-inset-bottom));
    flex-direction: column;
    width: calc(100vw - 2 * var(--settings-edge));
    max-width: calc(100vw - 2 * var(--settings-edge));
    height: calc(100dvh - var(--settings-top) - var(--settings-bottom));
    max-height: calc(100dvh - var(--settings-top) - var(--settings-bottom));
    border-radius: var(--aura-radius-settings-modal, 16px);
    margin: 0 var(--settings-edge) var(--settings-bottom);
  }

  /* Stat tiles share the card width: minmax(0, 1fr) lets a column shrink
     below its longest label (plain 1fr keeps min-content and overflows). */
  /* Two tiles side by side cannot fit "Conversations" and five-digit values
     at phone widths, so the tiles stack; minmax(0, 1fr) keeps the column
     inside the card (plain 1fr grows to min-content and overflowed). */
  #tab-general .stats-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #tab-general .stat-card {
    min-width: 0;
    padding: 9px 12px;
  }

  #tab-general .stat-text {
    flex: 1;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }

  #tab-general .stat-value {
    font-size: 15px;
    white-space: nowrap;
  }

  /* Smallest phones (iPhone SE 1st gen): no room for the tile icon. */
  @media (max-width: 340px) {
    #tab-general .stat-card .stat-icon {
      display: none;
    }
  }

  /* DB / Uploads / Tokens wrap instead of running past the card edge. */
  .stat-storage-row {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 14px;
  }

  .stat-storage-item {
    min-width: 0;
    white-space: nowrap;
  }

  /* General on mobile: Appearance, then Stats, System Prompt, Code Sandbox,
     App Version. */
  #tab-general.active {
    display: flex;
    flex-direction: column;
  }

  #tab-general > .stats-section { order: 1; }
  #tab-general > .system-prompt-section { order: 2; }
  #tab-general > #sandboxSection { order: 3; }
  #tab-general > .app-version-section { order: 4; }
  #tab-general > .settings-footer { order: 5; }

  .settings-sidebar {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    flex-shrink: 0;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 2px;
  }

  .settings-nav-item {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
    gap: 4px;
  }

  .settings-nav-item svg {
    width: 13px;
    height: 13px;
  }

  .settings-sidebar-title {
    display: none;
  }

  .settings-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .settings-tab-title {
    padding-top: 0;
  }

  .settings-tab {
    padding: 16px;
  }

  .favicon-two-col {
    flex-direction: column;
    gap: 14px;
  }

  .favicon-col-or {
    padding: 0;
    text-align: center;
  }

  .file-card {
    padding: 10px;
  }

  .token-bar {
    font-size: 11px;
    padding: 3px 10px;
    gap: 8px;
  }

  .topbar-label-hide-mobile {
    display: none;
  }

  .search-indicator {
    display: none !important;
  }

  .review-vs-text {
    display: none !important;
  }

  .review-magnifier {
    display: block !important;
  }

  .history-item {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 15px;
    font-family: 'Lato', var(--font);
    font-weight: 400;
    line-height: 1.42;
    margin-bottom: 0;
    display: flex;
    align-items: center;
  }

  .history-item .history-archive-btn {
    opacity: 0;
    padding: 2px 2px;
    display: flex;
    align-items: center;
  }

  .history-item.active .history-archive-btn {
    opacity: 1;
  }

  .sidebar-section-label {
    padding: 12px 14px 6px;
    font-family: var(--font);
  }

  .sidebar-project-item {
    min-height: 42px;
    padding: 9px 11px;
    font-family: var(--font);
    font-size: 15px;
  }

  .sidebar .search-input {
    font-size: 15px;
  }
}

/* ── PROFILE AVATAR UPLOAD ── */
.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 0;
}

.avatar-upload-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform .15s;
}

.avatar-upload-preview:hover {
  transform: scale(1.05);
}

.avatar-upload-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: white;
}

.avatar-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.avatar-upload-preview:hover .avatar-upload-overlay {
  display: flex;
}

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

/* Sidebar avatar with photo - for rail avatar */
.rail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.btn-accent {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

.btn-accent:hover {
  opacity: .9;
}

/* ── MEMORY ── */
.memory-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.memory-overview-card,
.memory-summary-card,
.memory-section-card {
  background: var(--shell-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}

.memory-overview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-3);
  font-weight: 800;
}

.memory-overview-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.05em;
  margin-top: 12px;
  color: var(--text);
}

.memory-overview-hint {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}

.memory-summary-card {
  margin-bottom: 16px;
}

.memory-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.memory-summary-pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
  max-height: 420px;
  overflow: auto;
}

.memory-health {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.memory-conflicts {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.memory-conflict-warning {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.memory-conflict-row {
  display: grid;
  grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.memory-conflict-row strong {
  color: var(--text-2);
}

.memory-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 10px;
  margin: 16px 0 12px;
}

.memory-library-toolbar .field-input {
  margin: 0;
}

.memory-sections {
  display: grid;
  gap: 14px;
}

.memory-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.memory-section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.memory-section-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

.memory-card-stack {
  display: grid;
  gap: 10px;
}

.memory-card {
  padding: 14px;
  background: color-mix(in srgb, var(--shell-soft) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color .15s, transform .15s;
}

.memory-card-archived {
  opacity: .68;
  background: transparent;
}

.memory-card:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateY(-1px);
}

.memory-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.memory-card-title {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.memory-card-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memory-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  background: color-mix(in srgb, var(--shell-accent-soft) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.memory-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.memory-pagination .memory-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.memory-pagination .memory-btn:disabled {
  opacity: .35;
  cursor: default;
}

.memory-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.memory-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px 7px;
  border-radius: 10px;
  font-size: 12px;
  transition: color .1s, background .1s;
}

.memory-btn:hover {
  background: var(--border-soft);
  color: var(--text);
}

.memory-btn.del:hover {
  color: var(--red-text);
  background: rgba(164, 43, 40, .08);
}

.memory-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
  font-size: 14px;
}

.memory-empty.small {
  text-align: left;
  padding: 14px 0 2px;
}

.memory-empty svg {
  margin-bottom: 12px;
  opacity: .4;
}

.memory-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .memory-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .memory-form-grid {
    grid-template-columns: 1fr;
  }

  .memory-overview-grid,
  .memory-library-toolbar,
  .memory-conflict-row {
    grid-template-columns: 1fr;
  }

  .memory-health {
    flex-direction: column;
  }

  .memory-card-head,
  .memory-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .memory-actions {
    justify-content: flex-end;
  }
}

/* ── PWA / INSTALLED WEB APP EXTRAS ── */
@media (display-mode: standalone) {
  #appRoot {
    height: 100dvh;
    overflow: hidden;
  }

  .main {
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
  }

  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
    flex-shrink: 0;
    background: transparent;
  }

  .sidebar {
    padding-top: env(safe-area-inset-top);
  }

  .icon-rail {
    padding-top: env(safe-area-inset-top);
    background: var(--bg);
  }

  .input-area {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    background: transparent;
  }

  body.keyboard-open .input-area {
    padding-bottom: 4px;
  }
}

@media (pointer: coarse) {
  .send-btn {
    min-height: unset !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  .history-archive-btn,
  .btn,
  .settings-nav-item {
    min-height: 40px;
  }

  .model-check-item {
    min-height: 44px;
  }
}

/* ── SIDEBAR SEARCH ── */
.sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 4px;
  padding: 7px 11px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--pill);
  transition: border-color .15s;
}

.sidebar-search-wrap:focus-within {
  border-color: var(--accent);
}

.sidebar-search-icon {
  color: var(--text-3);
  flex-shrink: 0;
}

.sidebar-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
}

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

/* ── FILES TOOLBAR ── */
.files-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.files-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
}

.breadcrumb-item:hover {
  background: var(--border-soft);
  color: var(--text);
}

.breadcrumb-item.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.breadcrumb-sep {
  color: var(--text-3);
  font-size: 11px;
}

.files-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.storage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  margin-bottom: 2px;
}

.storage-bar-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.storage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s;
  width: 0%;
}

.storage-bar-text {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.files-select-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 6px 0;
}

.files-select-all-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

.files-select-all-label input {
  accent-color: var(--accent);
  cursor: pointer;
}

.files-content {
  min-height: 100px;
}

.files-content.view-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.folder-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  user-select: none;
}

.folder-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.folder-card.selected {
  border-color: var(--accent-selection-border);
  background: var(--accent-selection-bg);
}

.files-content.view-list .folder-card {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.files-content.view-list .folder-card .folder-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.files-content.view-list .folder-card .folder-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.files-content.view-list .folder-card .folder-name {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files-content.view-list .folder-card .folder-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.folder-proj-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 3px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .02em;
  line-height: 1;
}

.project-folder-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-size: 13px;
  color: var(--text);
  margin: 0 6px 6px 0;
}

.project-folder-tag button {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 2px;
}

.project-folder-tag button:hover {
  color: var(--red-text);
}

.files-content.view-list .file-card {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.files-content.view-list .file-card .file-select-check {
  flex-shrink: 0;
}

.files-content.view-list .file-card .file-img-preview {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-radius: 5px;
}

.files-content.view-list .file-card .file-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.files-content.view-list .file-card .file-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-content.view-list .file-card .file-meta {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.files-content.view-list .file-card .file-actions {
  margin-top: 0;
}

.file-select-check,
.folder-select-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.files-trash-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.files-trash-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
  width: 100%;
}

.files-trash-btn:hover {
  border-color: var(--red);
  color: var(--red-text);
  background: rgba(164, 43, 40, .04);
}

.trash-count-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  border-radius: 20px;
  font-size: 11px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.trash-file-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.trash-file-card .trash-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.trash-file-card .trash-icon .outline-file-icon {
  width: 20px;
  height: 20px;
}

.trash-file-card .trash-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-file-card .trash-meta {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.move-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  cursor: pointer;
  transition: border-color .15s;
}

.move-folder-item:hover {
  border-color: var(--accent);
}

.move-folder-item.selected {
  border-color: var(--accent-selection-border);
  background: var(--accent-selection-bg);
}

/* ── STATS SECTION ── */
.stats-section {
  background: var(--bg);
  border-radius: var(--r);
  padding: 16px;
  border: 1px solid var(--border-soft);
}

.stats-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px !important;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  flex-shrink: 0;
}

.stat-icon svg {
  width: 15px;
  height: 15px;
}

.stat-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-storage-row {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 12px;
}

.stat-storage-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-storage-item svg {
  width: 12px;
  height: 12px;
  color: var(--text-3);
  flex-shrink: 0;
}

.stat-storage-label {
  font-size: 11px;
  color: var(--text-3);
}

.stat-storage-val {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  margin-left: 3px;
}

.model-usage-section {
  margin-top: 4px;
}

.stat-sublabel {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.model-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}

.model-usage-row:last-child {
  border-bottom: none;
}

.model-usage-name {
  font-size: 12px;
  color: var(--text-2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.model-usage-meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.model-usage-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.model-usage-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.model-usage-bar-name {
  font-size: 11px;
  color: var(--text-2);
  min-width: 90px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-usage-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.model-usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .4s ease;
}

.model-usage-bar-pct {
  font-size: 10px;
  color: var(--text-3);
  min-width: 28px;
  text-align: right;
}

@media (max-width: 768px) {
  .sidebar-search-wrap {
    margin: 6px 8px 2px;
  }

  .files-toolbar {
    gap: 6px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-value {
    font-size: 18px;
  }

  #modelSelectorLabel {
    max-width: 110px;
  }

  .model-selector {
    padding: 5px 9px;
    font-size: 13px;
  }

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

  .sidebar-projects {
    max-height: 100px;
  }
}

/* ── REVIEW ROUND SEPARATOR ── */
.review-round-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.review-round-sep::before,
.review-round-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* ── MARKDOWN TABLES ── */
.md-table-wrap {
  overflow-x: auto;
  margin: 10px 0;
}

.md-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
  min-width: 280px;
}

.md-table th {
  background: var(--border-soft);
  color: var(--text);
  font-weight: 600;
  padding: 7px 12px;
  text-align: left;
  border: 1px solid var(--border);
}

.md-table td {
  padding: 6px 12px;
  border: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
  line-height: 1.5;
}

.md-table tr:nth-child(even) td {
  background: rgba(0, 0, 0, .02);
}

body.dark .md-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, .02);
}

.md-table tr:hover td {
  background: var(--border-soft);
}

/* ── REVIEWED-BY TAG ── */
.reviewed-by-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  background: var(--border-soft);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-3);
  width: fit-content;
}

.reviewed-by-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}

.reviewed-by-tag strong {
  color: var(--text-2);
  font-weight: 600;
}

/* ── iOS ZOOM PREVENTION ── */
@media (hover: hover) {
  .input-textarea {
    font-size: 15px;
  }

  .field-input {
    font-size: 15px;
  }
}

/* ── CONVERSATION 3-DOT CONTEXT MENU ── */
.convo-ctx-menu {
  position: fixed;
  z-index: 99999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 5px 0;
  min-width: 180px;
  display: none;
  flex-direction: column;
}

.convo-ctx-menu.open {
  display: flex;
}

.convo-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.convo-ctx-item:hover {
  background: var(--border-soft);
}

.convo-ctx-item svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.convo-ctx-item.ctx-delete {
  color: var(--red-text);
}

.convo-ctx-item.ctx-delete svg {
  color: var(--red-text);
}

/* ── SIDEBAR PROJECTS ── */
.sidebar-section-action {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}

.sidebar-section-action:hover {
  color: var(--text);
  background: var(--border-soft);
}

.sidebar-projects {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 0 8px;
  max-height: none;
  overflow: visible;
}

.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s, color .1s;
  border: 1px solid transparent;
}

.sidebar-project-item:hover {
  background: var(--border-soft);
  color: var(--text);
}

.sidebar-project-item.active {
  background: var(--border);
  color: var(--text);
}

.sidebar-project-item svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.sidebar-project-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 2px;
}

.sidebar-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.sidebar-project-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-3);
}

.sidebar-project-count {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}

.project-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.project-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.project-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 39px;
}

.project-card-meta {
  font-size: 12px;
  color: var(--text-3);
}

/* Agents */
.agent-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
}
.agent-card-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.agent-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.agent-card-badge {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}
.agent-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.agent-cap input { cursor: pointer; }

.project-convo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 6px;
}

.project-convo-row .pcr-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-convo-row .pcr-meta {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.project-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.project-folder-item:hover {
  background: var(--border-soft);
}

.project-folder-item.selected {
  border-color: var(--accent-selection-border);
  background: var(--accent-selection-bg);
}

.project-folder-item input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
}

.project-folder-info {
  flex: 1;
  min-width: 0;
}

.project-folder-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.project-folder-count {
  font-size: 12px;
  color: var(--text-3);
}

.atp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--rs);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color .15s, background .15s;
}

.atp-item:hover {
  border-color: var(--accent);
  background: var(--border-soft);
}

.atp-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.atp-item-desc {
  font-size: 12px;
  color: var(--text-3);
}

/* ── PROJECTS PAGE ── */
.projects-page {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px;
  overflow-y: auto;
  flex: 1;
}

.projects-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.projects-page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.projects-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.projects-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.projects-card:hover {
  border-color: var(--text-3);
  box-shadow: var(--shadow);
}

.projects-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.projects-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}

.projects-card-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: auto;
}

.project-detail-back {
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-detail-back:hover {
  color: var(--text);
}

.project-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.project-detail-name {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.project-detail-desc {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

.project-detail-convos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px;
  border-radius: 28px;
}

.project-convo-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--shell-soft) 78%, transparent);
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .14s;
}

.project-convo-item:hover {
  background: color-mix(in srgb, var(--shell-accent-soft) 78%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}

.project-convo-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.project-convo-meta {
  font-size: 12px;
  color: var(--text-3);
}

.project-empty {
  font-size: 14px;
  color: var(--text-3);
  padding: 20px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .projects-page {
    padding: 24px 20px;
  }

  .projects-page-title,
  .project-detail-name {
    font-size: 22px;
  }

  .projects-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ── AURA ECOSYSTEM SHELL OVERRIDE ── */
:root {
  --bg: #f4f3ee;
  --surface: #faf9f6;
  --sidebar-bg: #edecea;
  --border: #dedbd2;
  --border-soft: #eae8e2;
  --text: #18181a;
  --text-2: #5e5c58;
  --text-3: #9c9a95;
  --accent: #003954;
  --user-bg: var(--accent);
  --user-text: var(--accent-contrast);
  --accent-contrast: #f5f7fb;
  --code-bg: #1c1c1a;
  --code-text: #d0ccc4;
  --code-keyword: #ff9f43;
  --code-string: #a6e35f;
  --code-comment: #77808d;
  --code-number: #c79cff;
  --code-function: #5cc8ff;
  --code-class: #63d7ff;
  --code-builtin: #e5c07b;
  --code-operator: #ffb15c;
  --code-punctuation: #8e98a8;
  --code-attr: #f0d26b;
  --code-tag: #ff8f70;
  --shadow: 0 14px 34px rgba(41, 35, 27, .10);
  --shadow-lg: 0 28px 64px rgba(41, 35, 27, .18);
  --shadow-md: 0 20px 44px rgba(41, 35, 27, .14);
  --accent-muted: color-mix(in srgb, var(--accent) 38%, #b8b1a9 62%);
  --accent-selection-bg: color-mix(in srgb, var(--accent-muted) 12%, transparent);
  --accent-selection-bg-strong: color-mix(in srgb, var(--accent-muted) 16%, transparent);
  --accent-selection-border: color-mix(in srgb, var(--accent-muted) 30%, transparent);
  --hover-bg: var(--accent-selection-bg);
  --shell-glow-a: color-mix(in srgb, var(--accent-muted) 16%, transparent);
  --shell-glow-b: rgba(24, 24, 26, .06);
  --shell-top: rgba(250, 249, 246, .96);
  --shell-bottom: rgba(237, 236, 234, .98);
  --backdrop-glow-a: var(--shell-glow-a);
  --backdrop-glow-b: var(--shell-glow-b);
  --backdrop-top: color-mix(in srgb, var(--bg) 88%, white 12%);
  --backdrop-mid: color-mix(in srgb, var(--bg) 94%, white 6%);
  --backdrop-bottom: var(--bg);
  --backdrop-texture: linear-gradient(transparent, transparent);
  --shell-soft: rgba(255, 255, 255, .7);
  --shell-card: rgba(255, 255, 255, .82);
  --shell-muted: rgba(244, 243, 238, .9);
  --shell-accent-soft: var(--accent-selection-bg-strong);
  --avatar-1: #003954;
  --avatar-2: #4f7890;
  --send-1: #003954;
  --send-2: #4f7890;
}

body.dark {
  --bg: #05070c;
  --surface: #0d121a;
  --sidebar-bg: #0a0f16;
  --border: rgba(255, 255, 255, .08);
  --border-soft: rgba(255, 255, 255, .05);
  --text: #f5f7fb;
  --text-2: #c3ccdb;
  --text-3: #7e8799;
  --user-bg: var(--accent);
  --user-text: var(--accent-contrast);
  --shadow: 0 18px 44px rgba(0, 0, 0, .22);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, .42);
  --shadow-md: 0 20px 44px rgba(0, 0, 0, .28);
  --accent-muted: color-mix(in srgb, var(--accent) 48%, #c7d3df 52%);
  --accent-selection-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-selection-bg-strong: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-selection-border: color-mix(in srgb, var(--accent) 34%, transparent);
  --hover-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --shell-glow-a: color-mix(in srgb, var(--accent) 18%, transparent);
  --shell-glow-b: rgba(167, 155, 255, .11);
  --shell-top: rgba(23, 23, 25, 0.75);
  --shell-bottom: rgba(9, 9, 11, 0.75);
  /* Very-back page backdrop states. State zero preserves the prior dark background exactly.
     See docs/run-records/2026-09-11-aura-chat-backdrop-states.md. */
  --backdrop-state-zero-glow-a: rgba(148, 177, 255, .16);
  --backdrop-state-zero-glow-b: rgba(167, 155, 255, .11);
  --backdrop-state-zero-top: color-mix(in srgb, var(--bg) 88%, white 12%);
  --backdrop-state-zero-mid: color-mix(in srgb, var(--bg) 94%, white 6%);
  --backdrop-state-zero-bottom: var(--bg);
  --backdrop-state-zero-texture: linear-gradient(transparent, transparent);
  --backdrop-state-one-glow-a: rgba(190, 198, 204, .12);
  --backdrop-state-one-glow-b: rgba(130, 136, 142, .08);
  --backdrop-state-one-top: #292a2e;
  --backdrop-state-one-mid: #18191c;
  --backdrop-state-one-bottom: #090a0d;
  --backdrop-glow-a: var(--backdrop-state-one-glow-a);
  --backdrop-glow-b: var(--backdrop-state-one-glow-b);
  --backdrop-top: var(--backdrop-state-one-top);
  --backdrop-mid: var(--backdrop-state-one-mid);
  --backdrop-bottom: var(--backdrop-state-one-bottom);
  --backdrop-texture: linear-gradient(transparent, transparent);
  --shell-soft: rgba(255, 255, 255, .03);
  --shell-card: rgba(8, 12, 18, .88);
  --shell-muted: rgba(255, 255, 255, .04);
  --shell-accent-soft: var(--accent-selection-bg-strong);
  --avatar-1: #8eaefe;
  --avatar-2: #c4d2ff;
  --send-1: #8eaefe;
  --send-2: #c4d2ff;
  --code-bg: #090d15;
  --code-text: #cdd6e3;
  --code-keyword: #ff9f43;
  --code-string: #a6e35f;
  --code-comment: #687385;
  --code-number: #c79cff;
  --code-function: #5cc8ff;
  --code-class: #63d7ff;
  --code-builtin: #e5c07b;
  --code-operator: #ffb15c;
  --code-punctuation: #7e8799;
  --code-attr: #f0d26b;
  --code-tag: #ff8f70;
}

body {
  background:
    var(--backdrop-texture),
    radial-gradient(circle at 12% 8%, var(--backdrop-glow-a), transparent 20%),
    radial-gradient(circle at 88% 2%, var(--backdrop-glow-b), transparent 18%),
    linear-gradient(180deg, var(--backdrop-top) 0%, var(--backdrop-mid) 42%, var(--backdrop-bottom) 100%);
  color: var(--text);
}

#appRoot {
  padding: 18px;
  gap: 18px;
  align-items: flex-start;
  height: 100dvh;
}

/* Aura Chat Login Visual Style, 2026-09-11.
   See docs/run-records/2026-09-11-aura-chat-login-visual-style.md. */
#loginScreen {
  --login-panel-radius: 9px;
  --login-control-radius: 9px;
  --login-page-top: color-mix(in srgb, var(--bg) 79.9%, white 20.1%);
  --login-page-bottom: var(--bg);
  --login-panel-top: color-mix(in srgb, var(--surface) 96%, transparent);
  --login-panel-bottom: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  --login-panel-border: var(--aura-frame-border);
  --login-panel-border-width: var(--aura-frame-border-width);
  --login-control-bg: var(--shell-card);
  --login-control-border: var(--border);
  --login-control-focus: color-mix(in srgb, var(--text) 42%, transparent);
  --login-label: var(--text-2);
  --login-placeholder: var(--text-3);
  --login-wordmark: var(--text);
  --login-shadow: var(--shadow-lg);
  background:
    linear-gradient(180deg, var(--login-page-top) 0%, var(--login-page-bottom) 100%);
}

body.dark #loginScreen {
  --login-page-top: color-mix(in srgb, #17181b 89%, white 11%);
  --login-page-bottom: #050506;
  --login-panel-top: rgba(16, 17, 19, .96);
  --login-panel-bottom: rgba(8, 9, 10, .98);
  --login-panel-border: var(--aura-frame-border);
  --login-control-bg: rgba(5, 6, 7, .9);
  --login-control-border: rgba(255, 255, 255, .11);
  --login-control-focus: rgba(255, 255, 255, .34);
  --login-label: rgba(245, 247, 251, .76);
  --login-placeholder: rgba(245, 247, 251, .42);
  --login-wordmark: #f2f2f2;
  --login-shadow: 0 26px 60px rgba(0, 0, 0, .42);
}

#loginScreen .login-card {
  width: min(420px, calc(100vw - 28px));
  border-radius: var(--login-panel-radius);
  padding: 59.96px 34px 53.96px;
  background: linear-gradient(180deg, var(--login-panel-top), var(--login-panel-bottom));
  border: var(--login-panel-border-width) solid var(--login-panel-border);
  box-shadow: var(--login-shadow);
}

#loginScreen .login-logo {
  width: 100%;
  margin: 0 auto 44px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--login-wordmark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

#loginScreen .login-logo span {
  font-family: 'Aura Neurotoxin', 'Lato', sans-serif;
  font-size: 35.2px;
  line-height: 1;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-title {
  font-size: 34px;
  letter-spacing: -.06em;
  text-align: center;
}

.login-sub,
.login-error {
  text-align: center;
}

#loginScreen .login-error:empty {
  display: none;
}

#loginScreen .login-error:not(:empty) {
  margin-bottom: 18px;
}

#loginScreen .field-label {
  color: var(--login-label);
}

#loginScreen .field-group {
  margin-bottom: 12px;
}

#loginScreen .field-input {
  background: var(--login-control-bg);
  border-color: var(--login-control-border);
  border-radius: var(--login-control-radius);
  color: var(--text);
}

#loginScreen .field-input::placeholder {
  color: var(--login-placeholder);
}

#loginScreen .field-input:focus {
  border-color: var(--login-control-focus);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--login-control-focus) 48%, transparent);
}

#loginScreen .login-btn.btn-primary {
  border-radius: var(--login-control-radius);
  margin-top: 13px;
}

.icon-rail {
  width: 56px;
  min-width: 56px;
  height: calc(100dvh - 36px);
  margin: 0;
  padding: 18px 0;
  border-radius: 30px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.rail-btn {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  color: var(--text-3);
  transition: transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
  isolation: isolate;
}

.rail-divider {
  width: 28px;
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

.rail-btn:hover {
  transform: translateY(-1px);
}

.rail-btn.active {
  background: transparent;
  border: 0;
}

.rail-btn.active::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 9px;
  border: 1px solid var(--accent-selection-border);
  background: transparent;
}

.rail-btn svg {
  position: relative;
  z-index: 1;
}

.rail-btn.active::after {
  display: none;
}

.rail-avatar,
.user-avatar-small {
  border-radius: 16px;
  background: linear-gradient(135deg, var(--avatar-1), var(--avatar-2));
  color: #061018;
  -webkit-user-select: none;
  user-select: none;
}

.sidebar {
  width: 328px;
  min-width: 328px;
  left: 96px;
  top: 18px;
  bottom: 18px;
  height: auto;
  border-radius: 32px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  visibility: visible;
  transform: translate3d(calc(-100% - 2px), 0, 0);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), opacity .18s linear, box-shadow .2s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.sidebar-header,
.sidebar-bottom,
.sidebar-section-label,
.sidebar-project-item,
.history-item {
  -webkit-user-select: none;
  user-select: none;
}

.sidebar.panel-open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: none;
}

.sidebar-header,
.sidebar-bottom {
  border-color: var(--border-soft);
}

.logo-text {
  font-family: 'Aura Neurotoxin', 'Lato', sans-serif;
  font-size: 22px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.new-chat-btn,
.sidebar-search-wrap,
.history-item,
.sidebar-project-item,
.user-badge,
.retry-btn,
.msg-action-btn,
.attached-chip,
.code-file-card,
.sandbox-auto-result,
.archive-row {
  background: var(--shell-soft);
  border-color: var(--border);
}

.history-item {
  background: transparent;
  border: none;
}

.new-chat-btn {
  min-height: 46px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--shell-accent-soft), color-mix(in srgb, var(--shell-accent-soft) 62%, transparent));
  border-color: var(--accent-selection-border);
}

.sidebar-search-wrap,
.history-item,
.sidebar-project-item,
.user-badge {
  border-radius: 18px;
}

.history-item.active,
.sidebar-project-item.active {
  background: linear-gradient(135deg, var(--shell-accent-soft), color-mix(in srgb, var(--shell-accent-soft) 58%, transparent));
  border: 1px solid var(--accent-selection-border);
}

.sidebar-bottom {
  padding: 14px 10px 14px;
}

.main {
  height: calc(100dvh - 36px);
  margin: 0;
  border-radius: 32px;
  border: var(--aura-frame-border-width) solid var(--aura-frame-border);
  background: linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
  box-shadow: none;
}

.topbar {
  height: auto;
  padding: 24px 28px 12px;
  gap: 12px;
  background: transparent;
}

.topbar-brand {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  font-synthesis: none;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  text-transform: none;
}

.sidebar-toggle,
.tool-btn {
  background: var(--shell-soft);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), background .16s ease, border-color .16s ease, color .16s ease;
  will-change: transform;
}

.sidebar-toggle:hover,
.tool-btn:hover {
  background: var(--shell-accent-soft);
  border-color: var(--accent-selection-border);
}

.messages {
  max-width: 920px;
  padding: 10px 28px 20px;
}

.welcome-screen {
  padding: 34px 28px 18px;
}

.welcome-title {
  max-width: 640px;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1.08;
}

.message-group {
  animation: fadeUp .18s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.message {
  border: 1px solid transparent;
}

.message.user {
  background: var(--user-bg);
  color: var(--user-text);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--aura-radius-settings-control);
  padding: 7px 10px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.message.assistant {
  padding: 2px 0 0;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.message.assistant code,
.code-file-dl,
.sandbox-file-dl,
.retry-btn svg,
.msg-action-btn:hover {
  color: var(--accent);
}

.code-block,
.model-dropdown,
.convo-ctx-menu,
.mini-modal,
.settings-modal,
.arena-col,
.file-card,
.project-card,
.projects-card,
.project-detail-convos {
  background: linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.arena-columns {
  gap: 14px;
  padding: 0 20px 10px;
}

.arena-col {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: none;
}

.arena-divider {
  background: linear-gradient(180deg, transparent, rgba(148, 177, 255, .16), transparent);
}

.arena-col-header {
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--shell-soft) 88%, transparent);
}

.arena-messages {
  padding: 12px 14px 0;
}

.input-area {
  padding: 10px 22px 22px;
  background: transparent;
  border-top: none;
  box-shadow: none;
}

.input-box {
  max-width: 614px;
  padding: 16px 18px;
  border-radius: var(--aura-radius-composer-frame);
  background: linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
  border: var(--aura-frame-border-width) solid var(--aura-frame-border);
  box-shadow: var(--shadow-md);
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease;
  will-change: transform, box-shadow;
}

.input-box:focus-within {
  border-color: var(--aura-frame-border);
  box-shadow: var(--shadow-md);
}

.input-textarea,
.setting-textarea,
.setting-select,
.api-key-input,
.search-chip,
.field-input,
.sidebar-search-input {
  color: var(--text);
}

.tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

/* The execution target is a single cycling icon button. Connection state is
   drawn entirely inside its perimeter, so no status marker can escape the
   control when the mobile composer compresses. */
.tool-btn.execution-target-btn {
  position: relative;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), background .16s ease,
    border-color .16s ease, color .16s ease, box-shadow .18s ease;
}

.tool-btn.execution-target-btn.execution-target-online {
  border-color: #22b573;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #22b573 58%, transparent),
    inset 0 0 9px color-mix(in srgb, #22b573 24%, transparent);
}

.tool-btn.execution-target-btn.execution-target-busy {
  border-color: #d8922d;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #d8922d 58%, transparent),
    inset 0 0 9px color-mix(in srgb, #d8922d 22%, transparent);
}

.tool-btn.execution-target-btn.execution-target-attention {
  border-color: #d05a57;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #d05a57 58%, transparent),
    inset 0 0 9px color-mix(in srgb, #d05a57 22%, transparent);
}

.send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--send-1), var(--send-2));
  color: #071019;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), filter .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  will-change: transform;
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.send-btn:disabled {
  background: rgba(255, 255, 255, .08);
  color: var(--text-3);
  box-shadow: none;
}

.desktop-mode-notice .message.assistant {
  max-width: 620px;
  background: linear-gradient(135deg, var(--shell-accent-soft), color-mix(in srgb, var(--shell-accent-soft) 58%, transparent));
  border-color: var(--accent-selection-border);
}

.settings-modal,
.mini-modal {
  border-radius: 30px;
}

body.mobile-shell #railArena,
body.mobile-shell #railReview,
body.mobile-shell #btnArena,
body.mobile-shell #btnReview {
  display: none !important;
}

.mobile-backdrop {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s linear;
  will-change: opacity;
}

.mobile-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #appRoot {
    padding: 0;
    gap: 0;
  }

  /* Full-bleed mobile shell stays flat: #appRoot prefix keeps this
     border-radius:0 above the (now global, later-cascade) v6 .main mapping. */
  #appRoot .main {
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background:
      radial-gradient(circle at top, var(--shell-glow-a), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--shell-top) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 96%, transparent) 100%);
  }

  .sidebar {
    left: 12px;
    right: auto;
    top: max(8px, env(safe-area-inset-top));
    bottom: 12px;
    width: min(86vw, 340px) !important;
    max-width: none !important;
    border-radius: var(--aura-radius-sidebar-panel, 28px);
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sidebar.mobile-open {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    padding: calc(env(safe-area-inset-top) + 16px) 16px 12px !important;
  }

  .sidebar-header {
    padding-top: 16px;
  }

  .messages {
    padding: 18px 16px 12px;
  }

  .welcome-screen {
    padding: 14px 18px 12px;
  }

  .welcome-subtitle {
    margin-top: 6px;
  }

  .welcome-title {
    font-size: 25px;
  }

  .message {
    max-width: 96%;
  }

  .message-group.assistant {
    --assistant-surface-width: 96%;
    --assistant-surface-max: 96%;
  }

  .input-area {
    padding: 4px 12px max(16px, env(safe-area-inset-bottom));
  }

  .input-box {
    padding: 14px;
    border-radius: var(--aura-radius-composer-frame, 22px);
  }

  .token-bar {
    padding: 0 14px 10px 20px;
  }
}

@media (min-width: 769px) {
  :root {
    --desktop-shell-pad: 11px;
    --desktop-rail-w: 50px;
    --desktop-rail-gap: 11px;
    --desktop-workspace-gap: 11px;
    --sidebar-panel-w: 300px;
  }

  #appRoot {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    padding: 0;
  }

  .icon-rail {
    position: absolute;
    left: var(--desktop-shell-pad);
    top: var(--desktop-shell-pad);
    bottom: var(--desktop-shell-pad);
    z-index: 1;
    width: var(--desktop-rail-w);
    min-width: var(--desktop-rail-w);
    height: auto;
    margin: 0;
    cursor: pointer;
  }

  .sidebar {
    position: absolute;
    left: calc(var(--desktop-shell-pad) + var(--desktop-rail-w) + var(--desktop-rail-gap));
    top: var(--desktop-shell-pad);
    bottom: var(--desktop-shell-pad);
    z-index: 1;
    width: var(--sidebar-panel-w);
    min-width: var(--sidebar-panel-w);
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-22px, 0, 0);
    transition:
      transform .34s cubic-bezier(.22, 1, .36, 1),
      opacity .22s ease,
      box-shadow .22s ease;
    will-change: transform, opacity;
  }

  .sidebar.collapsed {
    opacity: 0;
    pointer-events: none;
    visibility: visible;
    transform: translate3d(-22px, 0, 0);
  }

  .sidebar.panel-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    box-shadow: var(--shadow-lg);
  }

  .main {
    position: absolute;
    top: var(--desktop-shell-pad);
    right: var(--desktop-shell-pad);
    bottom: var(--desktop-shell-pad);
    left: calc(var(--desktop-shell-pad) + var(--desktop-rail-w) + var(--desktop-rail-gap));
    z-index: 2;
    height: auto;
    margin: 0;
    transition:
      left .36s cubic-bezier(.22, 1, .36, 1),
      right .36s cubic-bezier(.22, 1, .36, 1),
      box-shadow .22s ease;
  }

  #appRoot.desktop-sidebar-open .main {
    left: calc(
      var(--desktop-shell-pad) +
      var(--desktop-rail-w) +
      var(--desktop-rail-gap) +
      var(--sidebar-panel-w) +
      var(--desktop-workspace-gap)
    );
  }

  .sidebar-toggle {
    display: inline-flex;
  }
}

/* Sidebar should float like the rail: no outer card surface, only controls remain visible.
   2026-09-18: !important removed; identical computed result kept by raising
   specificity (aside#sidebar…) at the same source position instead. */
aside#sidebar.sidebar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

aside#sidebar.sidebar.panel-open {
  box-shadow: none;
}

aside#sidebar.sidebar .sidebar-projects {
  display: grid;
  visibility: visible;
  opacity: 1;
}

aside#sidebar.sidebar .sidebar-project-item {
  display: flex;
  visibility: visible;
  opacity: 1;
  min-height: 64px;
  background: var(--shell-soft);
  border: 1px solid var(--border);
  color: var(--text-2);
}

aside#sidebar.sidebar .sidebar-project-item:hover,
aside#sidebar.sidebar .sidebar-project-item.active {
  color: var(--text);
}

/* Keep the Aura wordmark but hide the sidebar icon in every theme and breakpoint. */
aside#sidebar.sidebar .logo-globe {
  display: none;
}

@media (max-width: 768px) {
  aside#sidebar.sidebar.mobile-open {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--surface) 72%, transparent) 62%,
      color-mix(in srgb, var(--surface) 42%, transparent) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ── Electron agent badge ── */
.electron-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  user-select: none;
  margin-right: 4px;
}

.electron-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: agent-pulse 2.4s ease-in-out infinite;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ── Agent result blocks ── */
.agent-result-block {
  margin: 10px 16px;
  border-radius: var(--rs);
  overflow: hidden;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12.5px;
}

.agent-result-cmd {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  padding: 7px 14px;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.agent-result-pre {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
}

.agent-result-pre.agent-result-err {
  color: var(--red-text);
}

/* Shared geometry for the six main product surfaces (#chatView,
   #filesSurfaceView, #arenaView, #reviewView,
   #projectsListView, #mainProjectDetailView). Replaces their old inline
   flex/overflow/position styles; hidden copies keep inline display:none,
   which JS flips when switching surfaces. Not media-scoped. */
.main-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────
   Radius system v6, 2026-09-11. Desktop/tablet-landscape only.
   100% is the sharper box radius baseline: main 8px, composer 6px,
   rail/buttons 5px, and proportional scaling from there.
   ───────────────────────────────────────────────────────────────────────── */
/* 2026-09-18: the token mapping below was moved OUT of its former
   @media (min-width:769px) wrapper, so user radius settings apply at every
   viewport width. Mapping rules are unchanged. Only the #attachBtn hide at
   the end of this block remains desktop-only (mobile keeps its attach
   button). */
  .main { border-radius: var(--aura-radius-main-card); }

  .rail-btn,
  .rail-btn:hover,
  .rail-btn.active,
  .rail-btn.active::before { border-radius: var(--aura-radius-rail-button); }

  .rail-avatar,
  .rail-avatar img { border-radius: var(--aura-radius-rail-avatar); }

  .sidebar { border-radius: var(--aura-radius-sidebar-panel); }

  .new-chat-btn,
  .sidebar-search-wrap,
  .history-item,
  .sidebar-project-item,
  .user-badge { border-radius: var(--aura-radius-sidebar-control); }

  .settings-modal,
  .mini-modal { border-radius: var(--aura-radius-settings-modal); }

  .settings-nav-item,
  .settings-nav-item.active,
  .settings-nav-item:hover,
  .btn-primary,
  .mode-btn,
  .engine-option,
  .setting-textarea,
  .setting-select,
  .api-key-input,
  .aura-select-button,
  .ollama-status,
  #ollamaHostInput,
  .files-trash-btn,
  .trash-file-card,
  .log-viewer,
  .log-file-row,
  .user-row,
  .model-check-item,
  .stat-card,
  .stat-storage-row,
  .project-folder-item,
  .atp-item,
  #memorySearch,
  #memoryImportInput,
  #systemPrompt,
  #saveSettings { border-radius: var(--aura-radius-settings-control); }

  .sidebar-section-action,
  .modal-close { border-radius: var(--aura-radius-tiny-control); }

  .btn-small,
  .breadcrumb-item,
  .admin-icon-btn,
  .role-badge-icon,
  .radius-master-inputs input[type="number"],
  .radius-token-number,
  .radius-inventory-token,
  .radius-inventory-value { border-radius: var(--aura-radius-small-button); }

  .model-selector,
  .input-model-pill { border-radius: var(--aura-radius-model-selector); }

  .model-dropdown,
  .settings-model-dropdown,
  #defaultModelDropdown,
  .settings-model-picker,
  #defaultModelBtn,
  .aura-select-menu { border-radius: var(--aura-radius-dropdown-panel); }

  .model-option,
  .model-option:hover,
  .model-option.active,
  .aura-select-option,
  .aura-select-option:hover,
  .aura-select-option.active,
  #tab-transcription .aura-select-option,
  #tab-transcription .aura-select-option.active,
  #tab-memory .aura-select-option,
  #tab-memory .aura-select-option.active { border-radius: var(--aura-radius-dropdown-row); }

  .input-box { border-radius: var(--aura-radius-composer-frame); }

  .tool-btn,
  .tool-btn:not(#executionTargetBtn),
  #executionTargetBtn,
  .send-btn { border-radius: var(--aura-radius-composer-button); }

  .voice-countdown { border-radius: var(--aura-radius-voice-countdown); }

  #transcriptionDropZone,
  .provider-accordion,
  .file-card,
  .project-card,
  .projects-card,
  #portableMemoryPanel,
  #memoryImportDropZone,
  #memorySections .memory-section-card,
  .stats-section,
  .memory-card,
  .code-file-card,
  .sandbox-auto-result,
  .radius-settings-panel,
  .radius-master-control,
  .radius-token-card,
  .radius-inventory-item { border-radius: var(--aura-radius-card-surface); }

  .memory-overview-card,
  .memory-summary-card,
  .memory-section-card { border-radius: var(--aura-radius-memory-card); }

  .project-detail-convos { border-radius: var(--aura-radius-project-group); }
  .project-convo-item { border-radius: var(--aura-radius-project-row); }

  #accentPalette .color-swatch { border-radius: var(--aura-radius-swatch); }

  .engine-badge,
  .provider-badge,
  .role-badge,
  .model-usage-chip,
  .log-file-name span { border-radius: var(--aura-radius-badge) !important; }

  #sandboxStatusDot,
  #ollamaStatusDot,
  .status-dot,
  .model-dot,
  .model-opt-dot,
  .accordion-dot,
  .avatar-upload-preview,
  .avatar-upload-overlay,
  .avatar-upload-preview img,
  .user-row-av { border-radius: var(--aura-radius-circle); }

@media (min-width: 769px) {
  #attachBtn { display: none; }                  /* desktop uses drag and drop */
}

/* ─────────────────────────────────────────────────────────────────────────
   Unified Chat / Files shell, 2026-09-11 (Console moved into Settings).
   The product surface changes content inside one stable frame.
   ───────────────────────────────────────────────────────────────────────── */
body[data-product-surface="chat"] .rail-files-control,
body[data-product-surface="files"] .rail-chat-control,
#railHistory {
  display: none !important;
}

body[data-product-surface="files"] .rail-files-control {
  display: inline-flex;
}

body:not([data-product-surface]),
body[data-product-surface="chat"] {
  --aura-current-surface: 0;
}

.aura-shell-tool-view {
  min-height: 0;
}

.surface-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 26px 30px 34px;
}

.surface-scroll::-webkit-scrollbar {
  width: 10px;
}

.surface-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.surface-scroll .settings-tab {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  animation: surfaceContentSlide .24s cubic-bezier(.22, 1, .36, 1);
}

.surface-scroll .settings-tab-title {
  padding-top: 0;
}

body[data-product-surface="files"] .sidebar-header .new-chat-btn,
body[data-product-surface="files"] .sidebar-search-wrap,
body[data-product-surface="files"] .sidebar-projects-label,
body[data-product-surface="files"] #sidebarProjects,
body[data-product-surface="files"] #pinnedLabel,
body[data-product-surface="files"] #pinnedHistory,
body[data-product-surface="files"] #recentsLabel,
body[data-product-surface="files"] #chatHistory {
  display: none !important;
}

.sidebar-surface-panel {
  display: none;
  padding: 8px 4px;
  animation: surfaceContentSlide .22s cubic-bezier(.22, 1, .36, 1);
}

body[data-product-surface="files"] #filesSidebarContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-surface-action {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--aura-radius-sidebar-control);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: 700 14px/1.2 var(--font);
  min-height: 42px;
  padding: 0 13px;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.sidebar-surface-action:hover,
.sidebar-surface-action.active {
  background: var(--shell-soft);
  border-color: var(--border);
  color: var(--text);
}

/* Files has its own product surface, so its Settings tab stays hidden. Archive
   and the Admin group are shown (the Admin items are role-gated by app.js). */
body[data-product-surface="files"] .settings-nav-item[data-tab="files"],
body.aura-unified-shell .settings-nav-item[data-tab="files"] {
  display: none;
}

.main.surface-swapping .aura-shell-view,
.main.surface-swapping #chatView,
.main.surface-swapping #arenaView,
.main.surface-swapping #reviewView,
.main.surface-swapping #projectsListView,
.main.surface-swapping #mainProjectDetailView {
  animation: surfaceFrameSlide .28s cubic-bezier(.22, 1, .36, 1);
}

@keyframes surfaceFrameSlide {
  from { opacity: .18; transform: translate3d(var(--surface-slide-x, 22px), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes surfaceContentSlide {
  from { opacity: .2; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .main.surface-swapping .aura-shell-view,
  .main.surface-swapping #chatView,
  .main.surface-swapping #arenaView,
  .main.surface-swapping #reviewView,
  .main.surface-swapping #projectsListView,
  .main.surface-swapping #mainProjectDetailView,
  .surface-scroll .settings-tab,
  .sidebar-surface-panel {
    animation: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   Unified Files surface: Aura Bag structure inside the shared shell.
   ───────────────────────────────────────────────────────────────────────── */
body[data-product-surface="files"] .surface-scroll {
  padding: 30px 34px 38px;
}

.surface-scroll .settings-tab.files-dashboard-tab {
  max-width: 1280px;
  width: 100%;
}

.aura-files-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.aura-files-title {
  color: var(--text);
  font: 900 clamp(28px, 3vw, 44px)/.95 var(--font);
  letter-spacing: -.05em;
}

.aura-files-subtitle,
.aura-files-panel-sub,
.aura-files-hint {
  color: var(--text-3);
}

.aura-files-subtitle {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
}

.aura-files-top-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.aura-files-pill {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--aura-radius-settings-control);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--shell-bottom) 82%, transparent);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.aura-files-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr;
  gap: 16px;
  margin-bottom: 20px;
}

.aura-files-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--shell-top) 86%, transparent), color-mix(in srgb, var(--shell-bottom) 92%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-card-surface);
  box-shadow: none;
}

.aura-files-stat-card {
  min-height: 156px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aura-files-stat-used {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, var(--shell-top)), color-mix(in srgb, var(--accent) 64%, var(--shell-bottom)));
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  color: var(--accent-contrast);
}

.aura-files-stat-used .aura-files-label,
.aura-files-stat-used .aura-files-hint,
.aura-files-stat-used .aura-files-value {
  color: var(--accent-contrast);
}

.aura-files-label {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.aura-files-value {
  color: var(--text);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.aura-files-path-value {
  font-size: 27px;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aura-files-hint {
  font-size: 14px;
  line-height: 1.3;
}

.aura-files-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, .95fr);
  gap: 20px;
  align-items: stretch;
}

.aura-files-workspace-card,
.aura-files-preview-card,
.aura-files-secondary-card {
  padding: 22px;
}

.aura-files-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.aura-files-panel-title {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.aura-files-panel-sub {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.45;
}

.aura-files-crumb-row {
  margin-bottom: 16px;
}

.aura-files-crumbs .breadcrumb-item {
  min-height: 33px;
  padding: 0 13px;
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--shell-soft) 82%, transparent);
}

.aura-files-crumbs .breadcrumb-item.active {
  background: color-mix(in srgb, var(--accent) 20%, var(--shell-soft));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.aura-files-tool-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.aura-files-input {
  flex: 1 1 320px;
  min-width: 220px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  font: 700 14px/1 var(--font);
  padding: 0 16px;
  outline: none;
}

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

.aura-files-input:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.aura-files-tool-row .btn-small {
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--aura-radius-settings-control);
  font-weight: 900;
}

.aura-files-primary-action {
  background: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 85%, white 15%) !important;
  color: var(--accent-contrast) !important;
}

.aura-files-danger-action:not(:disabled) {
  color: #ff8a8a;
  border-color: rgba(255, 92, 92, .34);
}

.aura-files-tool-row .btn-small:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.aura-files-storage-bar {
  margin: 2px 0 14px;
}

.aura-files-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  margin: 8px 0 18px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--text-3));
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--shell-soft) 50%, transparent);
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.aura-files-dropzone.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.aura-files-workspace-card.dragover {
  box-shadow: 0 0 0 2px var(--accent);
}

.aura-files-content {
  min-height: 180px;
}

.aura-files-table-wrap {
  overflow: hidden;
}

.aura-files-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.aura-files-table th,
.aura-files-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

.aura-files-table th {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.aura-files-table th:nth-child(2),
.aura-files-table td:nth-child(2) { width: 42%; }
.aura-files-table th:nth-child(3),
.aura-files-table td:nth-child(3) { width: 24%; }
.aura-files-table th:nth-child(4),
.aura-files-table td:nth-child(4) { width: 21%; }
.aura-files-table th:nth-child(5),
.aura-files-table td:nth-child(5) { width: 13%; }

.aura-files-check-col {
  width: 42px !important;
}

.aura-files-row {
  cursor: pointer;
  transition: background .14s ease;
}

.aura-files-row:hover td,
.aura-files-row.is-selected td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Rows keep legacy .file-card/.folder-card classes only as JS selection hooks.
   The card-surface rules (display:flex, gradient background, border, radius,
   shadow, padding) were written for div cards and destroy the table layout
   when they land on <tr>; neutralize them inside the files table. */
.files-content .aura-files-table tr.file-card,
.files-content .aura-files-table tr.folder-card {
  display: table-row;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: static;
}

.aura-files-name-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.aura-files-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex: 0 0 auto;
}

.aura-files-icon img {
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  display: block;
}

.aura-files-image-icon {
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-small-button);
  overflow: hidden;
  background: var(--shell-soft);
}

.aura-files-image-icon img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.aura-files-row .file-name,
.aura-files-row .folder-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.aura-files-loading {
  text-align: center !important;
  padding: 34px 12px !important;
  color: var(--text-3) !important;
}

.aura-files-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  padding: 20px;
  color: var(--text-3);
  text-align: center;
  font-size: 15px;
  line-height: 1.35;
}

.aura-files-preview-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 420px;
}

.aura-files-preview-box {
  flex: 1;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-card-surface);
  background: color-mix(in srgb, var(--shell-bottom) 72%, transparent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.aura-files-preview-image {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--aura-radius-settings-control);
}

.aura-files-preview-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  text-align: center;
  width: 100%;
}

.aura-files-preview-summary strong {
  color: var(--text);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.aura-files-preview-summary span {
  color: var(--text-3);
  font-size: 13px;
}

.aura-files-preview-icon,
.aura-files-preview-icon .outline-file-icon {
  width: 48px;
  height: 48px;
  color: var(--text-2);
}

.aura-files-preview-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.aura-files-panel-page {
  animation: surfaceContentSlide .24s cubic-bezier(.22, 1, .36, 1);
}

.aura-files-secondary-card {
  min-height: 520px;
}

.aura-files-secondary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aura-files-secondary-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--shell-bottom) 78%, transparent);
  color: var(--text-2);
  font: inherit;
  text-align: left;
}

button.aura-files-secondary-item {
  cursor: pointer;
}

button.aura-files-secondary-item:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.aura-files-secondary-item span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.aura-files-secondary-item strong {
  color: var(--text);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aura-files-secondary-item small,
.aura-files-secondary-item em {
  color: var(--text-3);
  font-style: normal;
  font-size: 12px;
}

.aura-files-secondary-icon,
.aura-files-secondary-icon .outline-file-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.aura-files-trash-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.aura-files-sidebar {
  gap: 18px !important;
}

.aura-files-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aura-files-sidebar-pulse {
  margin-top: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-sidebar-panel);
  background: linear-gradient(135deg, color-mix(in srgb, var(--shell-top) 82%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
}

.aura-files-sidebar-pulse-title {
  margin-bottom: 16px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.aura-files-sidebar-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: 13px;
}

.aura-files-sidebar-stat:first-of-type {
  border-top: 0;
}

.aura-files-sidebar-stat strong {
  color: var(--text);
}

@media (max-width: 1150px) {
  .aura-files-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aura-files-workspace-grid { grid-template-columns: 1fr; }
  .aura-files-preview-card { min-height: 280px; }
}

@media (max-width: 720px) {
  body[data-product-surface="files"] .surface-scroll { padding: 20px 16px 28px; }
  .aura-files-topline { flex-direction: column; }
  .aura-files-top-meta { justify-content: flex-start; }
  /* Phones: four compact tiles in a 2x2 grid, so the file list starts on the
     first screen instead of below four full-height cards. */
  .aura-files-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .aura-files-stat-card { min-height: 0; padding: 12px 14px; gap: 4px; }
  .aura-files-stat-card .aura-files-value { font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
  .aura-files-stat-card .aura-files-hint { display: none; }
  /* Keep the "x% of 50 GB" line on the Used tile: it is the only quota readout. */
  .aura-files-stat-card #filesStatUsedHint { display: block; font-size: 11px; }
  /* Phones can't drag files in, and the Used tile already shows the quota, so
     the drop hint, the second storage bar and the panel blurb only push the
     list down. Buttons get compact so the toolbar takes two rows, not three. */
  .aura-files-workspace-card .aura-files-panel-sub,
  .aura-files-workspace-card .aura-files-dropzone,
  .aura-files-workspace-card .aura-files-storage-bar { display: none; }
  .aura-files-tool-row { gap: 6px; }
  .aura-files-tool-row .btn-small { padding: 7px 10px; font-size: 12.5px; }
  /* Title and the selection pill share one line; the subtitle repeats what
     the Used tile says. */
  .aura-files-topline { flex-direction: row; align-items: center; justify-content: space-between; }
  .aura-files-subtitle { display: none; }
  .aura-files-table th:nth-child(3),
  .aura-files-table td:nth-child(3),
  .aura-files-table th:nth-child(4),
  .aura-files-table td:nth-child(4) { display: none; }
  /* Name takes the slack; size keeps room for "999.9 KB" without clipping. */
  .aura-files-table th:nth-child(2),
  .aura-files-table td:nth-child(2) { width: auto; }
  .aura-files-table th:nth-child(5),
  .aura-files-table td:nth-child(5) { width: 84px; padding-left: 6px; padding-right: 10px; white-space: nowrap; text-align: right; }
}

/* Floating menus are frosted glass: a strong blur so nothing behind them is
   legible, plus a dense tint so menu text never mixes with page text. */
:root {
  --menu-frost: rgba(250, 249, 246, .94);
  --menu-frost-blur: blur(48px) saturate(160%);
}
body.dark {
  --menu-frost: rgba(18, 19, 22, .94);
}
/* Settings and dialogs are full working surfaces, not transient menus: the
   same frosted tint but fully opaque, so page text never shows through
   (owner: nothing behind a panel may be legible). */
.settings-modal,
.mini-modal {
  background: var(--menu-solid, #121316) !important;
}
:root { --menu-solid: #faf9f6; }
body.dark { --menu-solid: #121316; }
.model-dropdown,
.settings-model-dropdown,
.aura-select-menu,
.convo-ctx-menu {
  background: var(--menu-frost) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--menu-frost-blur);
  backdrop-filter: var(--menu-frost-blur);
}


/* ─────────────────────────────────────────────────────────────────────────
   Settings → Admin group (Users, API Keys, Storage, Logs), 2026-09-24.
   Role-gated by app.js from /api/auth/me; the server enforces every rule.
   ───────────────────────────────────────────────────────────────────────── */
.settings-nav-group-label {
  margin: 10px 10px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  user-select: none;
}

@media (min-width: 769px) {
  .settings-sidebar { overflow-y: auto; }
}

@media (max-width: 768px) {
  /* In the horizontal tab strip the group label becomes a thin divider. */
  .settings-nav-group-label {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin: 7px 5px;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--text-3) 70%, transparent);
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
  }
  #tab-apikeys .api-key-provider { min-width: 92px; }

  /* Users on a phone: name, email and meta get the full width; the role
     badge and actions move to a second line under them. */
  .admin-user-row { flex-wrap: wrap; row-gap: 8px; }
  .admin-user-row .user-row-info { flex: 1 1 calc(100% - 42px); }
  .admin-user-row > .role-badge-icon,
  .admin-user-row > .role-badge { margin-left: 42px; }
  .admin-user-row .user-row-actions { margin-left: auto; }
  .admin-user-row .user-row-meta { white-space: normal; }
  .storage-user-row { flex-wrap: wrap; row-gap: 8px; }
  .storage-user-row .user-row-info { flex: 1 1 calc(100% - 42px); }
  .storage-user-row .admin-danger-btn { margin-left: 42px; }
}

/* Key inputs shrink with their row instead of keeping their intrinsic width. */
#tab-apikeys .api-key-input { min-width: 0; }

.admin-icon-placeholder {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  visibility: hidden;
}

.user-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-row-name-text,
.user-row-email,
.user-row-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.user-status-pill {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-2);
}

.user-status-pill.is-active {
  color: #1f8a4c;
  border-color: color-mix(in srgb, #1f8a4c 35%, var(--border));
  background: color-mix(in srgb, #1f8a4c 9%, transparent);
}

body.dark .user-status-pill.is-active { color: #68d391; border-color: color-mix(in srgb, #68d391 30%, var(--border)); }

.user-status-pill.is-disabled {
  color: var(--red-text);
  border-color: color-mix(in srgb, var(--red-text) 40%, var(--border));
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

.admin-user-row.is-disabled .user-row-av { opacity: .45; }

.user-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.admin-danger-btn {
  color: var(--red-text);
  border-color: color-mix(in srgb, var(--red-text) 40%, var(--border));
  flex-shrink: 0;
}

.admin-danger-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red-text);
}

.admin-danger-btn:disabled {
  opacity: .45;
  cursor: default;
}

.storage-user-bar {
  width: 100%;
  max-width: 280px;
  height: 4px;
  margin-top: 7px;
}

#storageSummary { flex-wrap: wrap; }

.subscription-card {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}

.subscription-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.subscription-card .provider-badge {
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}

.subscription-card-text {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.subscription-card-name {
  font-size: 14px;
  color: var(--text);
}

.subscription-card-status {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

.subscription-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Jev card (Settings → API Keys): switch + last decisions. */
.jev-card .subscription-card-name { cursor: pointer; }
.jev-switch {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 38px;
  height: 22px;
  cursor: pointer;
}
.jev-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.jev-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background .18s ease;
  pointer-events: none;
}
.jev-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.jev-switch input:checked + .jev-switch-track { background: var(--accent); }
.jev-switch input:checked + .jev-switch-track::after { transform: translateX(16px); }
.jev-switch input:focus-visible + .jev-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.jev-switch input:disabled + .jev-switch-track { opacity: .55; }
body.dark .jev-switch input:checked + .jev-switch-track { background: color-mix(in srgb, var(--accent) 70%, #fff 30%); }
.jev-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.jev-log {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.jev-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.jev-log-list { display: flex; flex-direction: column; }
.jev-log-empty { font-size: 12px; color: var(--text-3); padding: 4px 0; }
.jev-log-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border-soft);
}
.jev-log-row:last-child { border-bottom: 0; }
.jev-log-time { color: var(--text-3); white-space: nowrap; }
.jev-log-verdict { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.jev-log-row.is-fallback .jev-log-verdict { color: var(--text-2); }
.jev-log-p, .jev-log-ms { text-align: right; white-space: nowrap; }
.jev-log-reason { grid-column: 2 / -1; color: var(--text-3); font-size: 11.5px; }

.subscription-device {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.subscription-device a {
  color: var(--text);
  text-decoration: underline;
  word-break: break-all;
}

.subscription-code {
  padding: 10px 0 12px;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--text);
  user-select: all;
  -webkit-user-select: all;
}

.subscription-device-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ollama-status-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-file-viewer-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

/* Admin modals float over Settings: same frosted glass as the menus. */
#addUserModal .mini-modal,
#editUserModal .mini-modal {
  background: var(--menu-frost);
  -webkit-backdrop-filter: var(--menu-frost-blur);
  backdrop-filter: var(--menu-frost-blur);
}


/* ─────────────────────────────────────────────────────────────────────────
   Settings → Telegram Bot (superuser), 2026-09-25. Same card/row/pill
   language as Users, API Keys and Storage; opaque like the rest of Settings.
   ───────────────────────────────────────────────────────────────────────── */
.bot-status-card {
  padding: 14px;
  margin-bottom: 26px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}
.bot-status-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bot-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-3);
}
.bot-status-dot.is-running { background: #1f8a4c; box-shadow: 0 0 0 4px color-mix(in srgb, #1f8a4c 16%, transparent); }
body.dark .bot-status-dot.is-running { background: #68d391; box-shadow: 0 0 0 4px color-mix(in srgb, #68d391 16%, transparent); }
.bot-status-dot.is-pending { background: #d69e2e; }
.bot-status-dot.is-error { background: var(--red); }
.bot-status-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bot-status-title {
  font-size: 15px;
  color: var(--text);
}
.bot-status-sub {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-status-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.bot-status-actions .btn-small:disabled {
  opacity: 1;
  cursor: not-allowed;
}
/* A disabled Start must not read as an action: neutral fill, muted text. */
.bot-status-actions .btn-accent:disabled {
  background: transparent !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
  border-style: dashed !important;
}
.bot-stats {
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.bot-status-hint:empty { display: none; }
.bot-status-hint { margin-top: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.bot-status-hint.is-error { color: var(--red-text); }

.bot-field { margin-bottom: 14px; min-width: 0; }
.bot-field .setting-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bot-field-hint { margin-top: 6px; font-size: 12px; }
.bot-field-hint:empty { display: none; }
.bot-token-state {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-3);
}
.bot-token-state.is-set {
  color: #1f8a4c;
  border-color: color-mix(in srgb, #1f8a4c 35%, var(--border));
  background: color-mix(in srgb, #1f8a4c 9%, transparent);
}
body.dark .bot-token-state.is-set { color: #68d391; border-color: color-mix(in srgb, #68d391 30%, var(--border)); }
.bot-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
}
#tab-bot .settings-footer { margin-top: 4px; }

.bot-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 8px;
  align-items: center;
}
.bot-link-row { grid-template-columns: minmax(0, 1fr) auto; }
.bot-add-btn { font-size: 14px; padding: 9px 16px; white-space: nowrap; }
.bot-add-btn:disabled { opacity: .55; cursor: default; }
.bot-approved-list { margin-top: 12px; }
.bot-model-row { gap: 12px; }
.bot-model-row .provider-badge { flex: 0 0 96px; width: 96px; box-sizing: border-box; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-model-row.is-disabled { opacity: .6; }
.bot-model-name {
  font-size: 14px;
  color: var(--text);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-telegram-row.is-disabled .user-row-av { opacity: .45; }
.bot-telegram-row .user-row-meta { overflow-wrap: anywhere; }

.bot-link-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.bot-link-result {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
}
.bot-link-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.bot-link-code {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--text);
  user-select: all;
  -webkit-user-select: all;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bot-section-note {
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  opacity: .8;
}

.bot-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--rs);
  background: var(--bg);
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
}
.bot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bot-table th,
.bot-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  color: var(--text-2);
}
.bot-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bot-table tr:last-child td { border-bottom: none; }
.bot-table td.bot-mono { font-family: var(--mono); font-size: 12px; }
.bot-table-empty td { text-align: center; color: var(--text-3); padding: 18px 12px; white-space: normal; }
#botLogViewer { height: 320px; }
#botLogViewer .log-entry { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .bot-form-grid { grid-template-columns: minmax(0, 1fr); }
  .bot-add-row { grid-template-columns: minmax(0, 1fr); }
  .bot-add-btn { width: 100%; }
  .bot-status-head { flex-wrap: wrap; }
  .bot-status-text { flex-basis: calc(100% - 22px); }
  .bot-status-actions { flex: 1 1 100%; box-sizing: border-box; padding-left: 22px; }
  .bot-telegram-row .admin-danger-btn { margin-left: 42px; }
  .bot-model-row { flex-wrap: nowrap; }
  .bot-model-row .provider-badge { flex-basis: 84px; width: 84px; }
  /* Tables become stacked label/value rows on a phone. */
  .bot-table-wrap { overflow-x: hidden; max-height: none; border: none; background: none; }
  .bot-table thead { display: none; }
  .bot-table,
  .bot-table tbody,
  .bot-table tr,
  .bot-table td { display: block; width: 100%; }
  .bot-table tr {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--rs);
  }
  .bot-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    border: none;
    white-space: normal;
    min-width: 0;
  }
  .bot-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .bot-table td > * { min-width: 0; }
  .bot-table td { overflow-wrap: anywhere; text-align: right; }
  .bot-table-empty td { display: block; text-align: center; }
  .bot-table-empty td::before { content: none; }
  .bot-link-code { font-size: 19px; letter-spacing: .1em; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Files, phase 2 (2026-09-24): upload progress, previews, trash origins,
   share dialog and links, storage bar.
   ───────────────────────────────────────────────────────────────────────── */
.aura-upload-panel {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--shell-bottom, var(--surface)) 82%, transparent);
}
.aura-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}
.aura-upload-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-upload-head .btn-small { flex: none; min-height: 30px; }
.aura-upload-bar,
.aura-upload-row-bar,
.attached-chip-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 22%, transparent);
  overflow: hidden;
}
.aura-upload-bar { margin: 10px 0 8px; }
.aura-upload-bar > span,
.aura-upload-row-bar > span,
.attached-chip-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width .2s ease;
}
.aura-upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}
.aura-upload-list::-webkit-scrollbar { width: 8px; }
.aura-upload-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 40%, transparent);
}
.aura-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11em 5.5em 22px;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.aura-upload-row .aura-upload-row-bar { grid-column: 1 / -1; height: 3px; }
/* Persian names shape right-to-left but stay in the list's left-aligned column. */
.aura-upload-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; unicode-bidi: plaintext; text-align: left; }
.aura-upload-size { color: var(--text-3); white-space: nowrap; text-align: end; }
.aura-upload-state { white-space: nowrap; min-width: 52px; text-align: end; }
.aura-upload-row.is-done .aura-upload-state { color: var(--accent); }
.aura-upload-row.is-error .aura-upload-state { color: var(--red-text); }
.aura-upload-row.is-error .aura-upload-row-bar > span { background: var(--red); }
.aura-upload-cancel {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer;
}
.aura-upload-cancel:hover { color: var(--red-text); background: color-mix(in srgb, var(--red) 12%, transparent); }

.attached-chip.is-uploading {
  position: relative;
  padding-bottom: 9px;
  border-style: dashed;
  max-width: 100%;
}
.attached-chip.is-uploading > span[dir] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.attached-chip-progress { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.attached-chip-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; }

.storage-bar-fill.is-near-full { background: var(--red) !important; }

.aura-files-preview-box.has-media {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
}
.aura-files-preview-box { flex-direction: column; gap: 14px; }
.aura-files-preview-frame {
  width: 100%;
  min-height: 420px;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
  background: #fff;
}
.aura-files-preview-video {
  width: 100%;
  max-height: 360px;
  border-radius: var(--aura-radius-settings-control);
  background: #000;
}
.aura-files-preview-audio { width: 100%; }
.aura-files-preview-text {
  margin: 0;
  width: 100%;
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
  background: var(--bg);
  color: var(--text);
  font: 12.5px/1.55 var(--mono, 'JetBrains Mono', monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  text-align: start;
}
.aura-files-preview-summary strong { unicode-bidi: plaintext; }
.aura-files-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.aura-files-preview-actions .btn-small { text-decoration: none; }

.aura-files-trash-item { cursor: pointer; }
.aura-files-trash-item input { flex: none; }
.aura-files-trash-item small,
.aura-files-share-row small,
.aura-files-activity-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aura-files-trash-item .trash-meta { flex: none; text-align: end; }
.aura-files-share-row { flex-wrap: wrap; }
.aura-files-share-row > span:nth-child(2) { flex: 1 1 220px; }
.aura-files-share-url { font-family: var(--mono, 'JetBrains Mono', monospace); unicode-bidi: plaintext; }
.aura-files-share-actions { display: flex; gap: 8px; flex: none; margin-inline-start: auto; }
.aura-files-activity-row strong { white-space: normal; overflow-wrap: anywhere; }
.aura-files-activity-action { color: var(--text-2); font-weight: 700; }
.aura-files-activity-row em { flex: none; white-space: nowrap; }

.aura-share-target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--aura-radius-settings-control);
}
.aura-share-target strong { color: var(--text); overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: left; }
/* Mixed-script names keep their own direction but line up with the list. */
.aura-files-secondary-item [dir="auto"] { text-align: left; }
.aura-share-target span { color: var(--text-3); font-size: 12px; }
#shareModal select.field-input { appearance: auto; }
#shareModal .setting-hint { margin: 0 0 12px; }
#renameModal .mini-modal,
#shareModal .mini-modal { background: var(--menu-solid, #121316) !important; }

@media (max-width: 720px) {
  .aura-upload-row { grid-template-columns: minmax(0, 1fr) 5.5em 22px; }
  .aura-upload-row .aura-upload-size { display: none; }
  .aura-files-preview-frame { min-height: 320px; }
  .aura-files-share-actions { width: 100%; justify-content: flex-end; }
  #trashView .aura-files-panel-head { flex-direction: column; align-items: stretch; }
  #trashView .aura-files-trash-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #trashView .aura-files-trash-actions > * { width: 100%; min-width: 0; justify-content: center; }
  #trashView .aura-files-trash-actions .files-select-all-label { grid-column: span 2; justify-content: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Files: pager, page-vs-all selection, Chat Uploads folders (2026-09-25).
   Same tokens and controls as the Files toolbar; opaque surfaces only.
   ───────────────────────────────────────────────────────────────────────── */
.aura-files-content { position: relative; scroll-margin-top: 12px; }
.aura-files-select-banner { scroll-margin-top: 12px; }
.aura-files-content.is-loading .aura-files-table tbody { opacity: .55; transition: opacity .12s ease; }

.aura-files-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 2px 2px;
}
.aura-files-pager[hidden] { display: none; }
.aura-files-pager-range {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aura-files-pager-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.aura-files-pager-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aura-files-pager .btn-small {
  min-height: 36px;
  min-width: 36px;
  justify-content: center;
  padding: 0 11px;
  border-radius: var(--aura-radius-settings-control);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.aura-files-pager .btn-small:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.aura-files-pager .aura-files-pager-num.is-current {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 85%, white 15%);
  color: var(--accent-contrast);
  cursor: default;
}
.aura-files-pager-gap {
  min-width: 18px;
  color: var(--text-3);
  text-align: center;
  user-select: none;
}
/* Arrows point the reading direction's way in RTL layouts. */
[dir="rtl"] .aura-files-pager-step svg { transform: scaleX(-1); }

/* Gmail-style banner: "All 50 on this page are selected. Select all 312". */
.aura-files-select-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--aura-radius-settings-control);
  background: color-mix(in srgb, var(--accent) 12%, var(--menu-solid, #121316));
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.aura-files-select-banner[hidden] { display: none !important; }
.aura-files-select-link {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dark .aura-files-select-link { color: color-mix(in srgb, var(--accent) 70%, white 30%); }
.aura-files-select-link:hover { text-decoration-thickness: 2px; }

/* Header checkbox menu: "Select items on this page" / "Select all N items". */
.aura-files-select-menu {
  position: absolute;
  z-index: 40;
  min-width: 232px;
  max-width: calc(100% - 8px);
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--menu-solid, #121316);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aura-files-select-menu[hidden] { display: none; }
.aura-files-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--rs);
  background: none;
  color: var(--text-2);
  font: 600 14px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.aura-files-select-option em {
  color: var(--text-3);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.aura-files-select-option:hover,
.aura-files-select-option:focus-visible {
  background: var(--bg);
  color: var(--text);
  outline: none;
}

/* Chat Uploads folders: the normal folder icon with a small chat badge. */
.aura-files-folder-icon { position: relative; }
.aura-files-chat-badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 2px var(--menu-solid, #121316);
}
.aura-files-chat-badge svg { width: 9px; height: 9px; }
/* Mixed-script names keep their own direction but line up with the list. */
.aura-files-row .file-name[dir="auto"],
.aura-files-row .folder-name[dir="auto"] { text-align: left; unicode-bidi: plaintext; }
.aura-files-crumbs .breadcrumb-item[dir="auto"] { unicode-bidi: plaintext; }

@media (max-width: 720px) {
  .aura-files-pager { justify-content: center; padding-top: 12px; }
  .aura-files-pager-range { width: 100%; text-align: center; font-size: 12.5px; }
  .aura-files-pager-nav { width: 100%; justify-content: center; }
  .aura-files-pager .btn-small { min-height: 38px; min-width: 38px; padding: 0 9px; }
  .aura-files-pager-step span { display: none; }
  .aura-files-select-banner { font-size: 12.5px; padding: 9px 12px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Composer tool row, 2026-09-25 (owner: nothing in the composer may go
   outside it). The row never wraps and never overflows at any width:
   buttons keep their size, and only the model picker gives way (its label
   ellipsizes). While recording, the row becomes a recording bar:
     [discard] [● live level meter  2:59] [stop] [send]
   The attach, execution-target and model controls step aside and come back
   when recording ends. Send while recording = stop, transcribe, send.
   ───────────────────────────────────────────────────────────────────────── */
#universalInput .input-tools-row {
  flex-wrap: nowrap;
  min-width: 0;
}

#universalInput .input-tools-row [hidden] {
  display: none !important;
}

#universalInput .input-tools-row > .tool-btn,
#universalInput .input-tools-row > .send-btn {
  flex: 0 0 auto;
}

/* The picker is the one flexible control; the space after it is its margin,
   not a spacer item, so no gap is spent on an empty element. */
#universalInput .input-tools-spacer {
  display: none;
}

#universalInput #normalModelWrap {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-end: auto;
}

#universalInput #modelSelectorBtn {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#universalInput #modelSelectorBtn > svg {
  flex-shrink: 0;
}

#universalInput #modelSelectorLabel {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recording bar */
#universalInput .input-box.is-recording #attachBtn,
#universalInput .input-box.is-recording #executionTargetBtn,
#universalInput .input-box.is-recording #normalModelWrap {
  display: none;
}

#universalInput .voice-status {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  border-radius: var(--aura-radius-composer-button, 14px);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  color: var(--red-text);
}

#universalInput .voice-rec-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: voiceRecDot 1.2s ease-in-out infinite;
}

#universalInput .voice-meter {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  direction: ltr;
}

#universalInput .voice-meter > i {
  flex: 0 0 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  opacity: .85;
  transform: scaleY(.14);
  transition: transform .08s linear;
}

#universalInput .voice-meter.is-static > i {
  animation: voiceMeterIdle 1.1s ease-in-out infinite;
}

#universalInput .voice-meter.is-static > i:nth-child(3n + 1) { animation-delay: .15s; }
#universalInput .voice-meter.is-static > i:nth-child(3n + 2) { animation-delay: .3s; }

/* The countdown sits inside the recording pill, so it drops its own box. */
#universalInput .voice-status .voice-countdown {
  flex: 0 0 auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-variant-numeric: tabular-nums;
}

#universalInput .voice-status .voice-countdown.warning {
  background: none;
  font-weight: 800;
}

@keyframes voiceRecDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@keyframes voiceMeterIdle {
  0%, 100% { transform: scaleY(.18); }
  50% { transform: scaleY(.6); }
}

@media (prefers-reduced-motion: reduce) {
  #universalInput .voice-rec-dot,
  #universalInput .voice-meter.is-static > i { animation: none; }
  #universalInput .voice-meter > i { transition: none; }
}

/* Attachment chips stay inside the composer; long names ellipsize. */
#universalInput .attached-chip {
  max-width: 100%;
  min-width: 0;
}

#universalInput .attached-chip > span:not(.attached-chip-bar) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#universalInput .attached-chip > button,
#universalInput .attached-chip > img,
#universalInput .attached-chip > svg {
  flex-shrink: 0;
}

/* Narrow phones (iPhone SE and smaller): tighter row, same controls. */
@media (max-width: 360px) {
  #universalInput .input-tools-row { gap: 6px; }
  #universalInput .input-tools-row > .tool-btn { width: 36px; height: 36px; }
  #universalInput .input-model-pill { padding: 0 10px; gap: 6px; }
  #universalInput .voice-status { height: 36px; gap: 8px; padding: 0 10px; }
}


/* ── Aura Desktop transcripts: compact tool groups (aura-desktop-transcript.js) ── */
.desktop-tool-group {
  width: min(760px, 82vw);
  max-width: 100%;
  min-width: 0;
  margin: -12px 0 14px;
  box-sizing: border-box;
}

.desktop-tools {
  min-width: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}

.desktop-tools > summary,
.desktop-tool > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.desktop-tools > summary::-webkit-details-marker,
.desktop-tool > summary::-webkit-details-marker {
  display: none;
}

.desktop-tools-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 8px 3px 6px;
  border-radius: var(--aura-radius-settings-control, 8px);
  box-sizing: border-box;
}

.desktop-tools-head::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  opacity: .7;
}

.desktop-tools[open] > .desktop-tools-head::before {
  transform: rotate(45deg);
}

.desktop-tools-head:hover,
.desktop-tool-head:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text-2);
}

.desktop-tools-head:focus-visible,
.desktop-tool-head:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}

.desktop-tools-label {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-2);
}

.desktop-tools.has-error .desktop-tools-label {
  color: var(--red-text, var(--red));
}

.desktop-tools-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-tools-preview:empty {
  display: none;
}

.desktop-tools-list {
  margin: 2px 0 0 9px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.desktop-tool {
  min-width: 0;
}

.desktop-tool-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 6px;
}

.desktop-tool-state {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

.desktop-tool.is-error .desktop-tool-state {
  background: var(--red);
  opacity: .9;
}

.desktop-tool.is-pending .desktop-tool-state {
  background: transparent;
  border: 1px solid currentColor;
  box-sizing: border-box;
}

.desktop-tool-name {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
}

.desktop-tool.is-error .desktop-tool-name {
  color: var(--red-text, var(--red));
}

.desktop-tool-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.desktop-tool-detail {
  margin: 2px 0 6px 13px;
  max-height: 280px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--aura-radius-settings-control, 8px);
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}

.desktop-tool-truncated {
  margin: -2px 0 6px 13px;
  font-size: 11px;
  color: var(--text-3);
}

.desktop-transcript-notice {
  align-self: center;
  max-width: 100%;
  margin: -6px 0 16px;
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop agents quote long paths and identifiers; wrap them instead of
   pushing the transcript sideways on phones. */
.desktop-message .message,
.desktop-message .message.assistant code {
  overflow-wrap: anywhere;
}

.run-receipt-count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

@media (max-width: 768px) {
  .desktop-tool-group { width: 100%; margin-top: -10px; }
  .desktop-tool-detail { margin-left: 4px; max-height: 240px; }
  .desktop-tools-list { margin-left: 6px; padding-left: 7px; }
}