/* ── UI/UX REFRESH OVERRIDES ── */
:root,
[data-theme="dark"] {
  --bg: #080a0f;
  --bg1: rgba(13, 17, 24, 0.96);
  --bg2: #111722;
  --bg3: #17202d;
  --bg4: #202b3a;
  --line: rgba(148, 163, 184, 0.13);
  --line2: rgba(148, 163, 184, 0.22);
  --tx1: #f8fafc;
  --tx2: #cbd5e1;
  --tx3: #8291a7;
  --tx4: #526073;
  --accent: #27d17f;
  --accent2: #18a867;
  --blue: #5b9dff;
  --amber: #f0b44c;
  --red: #f35f62;
  --purple: #b38cff;
  --code-bg: rgba(91, 157, 255, 0.1);
  --code-tx: #9ec5ff;
  --r: 8px;
  --r-sm: 6px;
  --nav-w: 64px;
  --topbar-h: 56px;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --glow-g: 0 0 0 3px rgba(39, 209, 127, 0.14);
  --glow-b: 0 0 0 3px rgba(91, 157, 255, 0.14);
}

[data-theme="light"] {
  --bg: #f6f8fb;
  --bg1: rgba(255, 255, 255, 0.96);
  --bg2: #ffffff;
  --bg3: #eef3f8;
  --bg4: #e3eaf2;
  --line: rgba(31, 41, 55, 0.11);
  --line2: rgba(31, 41, 55, 0.2);
  --tx1: #101828;
  --tx2: #344054;
  --tx3: #667085;
  --tx4: #98a2b3;
  --accent: #13945e;
  --accent2: #0f764b;
  --blue: #2563eb;
  --amber: #b7791f;
  --red: #c2413d;
  --purple: #7c3aed;
  --code-bg: rgba(37, 99, 235, 0.08);
  --code-tx: #1d4ed8;
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  --glow-g: 0 0 0 3px rgba(19, 148, 94, 0.13);
  --glow-b: 0 0 0 3px rgba(37, 99, 235, 0.13);
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  background:
    linear-gradient(180deg, rgba(91, 157, 255, 0.05), transparent 34%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.03) 0 1px, transparent 1px 80px),
    var(--bg);
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 54%, transparent);
  outline-offset: 2px;
}

/* Shell */
#app {
  background: transparent;
}

#topbar {
  height: var(--topbar-h);
  gap: 14px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg1) 86%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.app-brand {
  min-width: 220px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(39, 209, 127, 0.2), rgba(91, 157, 255, 0.16));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 750;
}

.brand-tag {
  color: var(--tx3);
  font-size: 10px;
  text-transform: uppercase;
}

#live-status {
  justify-content: flex-start !important;
}

#topbar-session {
  gap: 7px;
}

#topbar-session .tracker-pill,
#topbar-row2 .tracker-pill,
.ls-pill,
.mbadge,
.stat-pill,
.preset-chip {
  min-height: 24px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg2) 86%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Navigation */
#leftnav {
  width: var(--nav-w);
  padding: 12px 8px;
  gap: 6px;
  background: color-mix(in srgb, var(--bg1) 92%, transparent);
}

.nav-btn {
  width: 46px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tx3);
}

.nav-btn:hover {
  border-color: var(--line);
  background: var(--bg2);
  color: var(--tx1);
}

.nav-btn.active {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  box-shadow: var(--glow-g);
}

.nav-btn.active::before {
  left: -8px;
  height: 24px;
  border-radius: 0 4px 4px 0;
}

/* Headers and controls */
.section-bar,
#chat-topbar,
#turn-order-bar,
#chat-util-strip,
.search-bar,
.tl-bar,
.solo-bar,
.interview-header,
.chat-input-bar {
  background: color-mix(in srgb, var(--bg1) 92%, transparent);
  border-color: var(--line);
}

.section-bar {
  min-height: 46px;
  padding: 8px 18px;
}

.section-title {
  font-size: 13px;
  font-weight: 750;
}

.section-sub {
  color: var(--tx3);
}

.btn,
.mc-check-btn,
.sort-btn,
.rs-sort-btn,
.compare-toggle,
.theme-toggle,
.overflow-btn,
.view-toggle button,
.mode-pill button,
.audience-toggle button,
.solo-bar .sb-scope button,
.chip,
.cat-chip {
  border-radius: 8px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.btn,
.mc-check-btn,
.sort-btn,
.rs-sort-btn,
.compare-toggle,
.theme-toggle,
.overflow-btn {
  border-color: var(--line);
  background: var(--bg2);
  color: var(--tx2);
}

.btn:hover,
.mc-check-btn:hover,
.sort-btn:hover,
.rs-sort-btn:hover,
.compare-toggle:hover,
.theme-toggle:hover,
.overflow-btn:hover {
  transform: translateY(-1px);
  border-color: var(--line2);
  background: var(--bg3);
  color: var(--tx1);
}

.btn-primary,
#run-btn,
.iv-send,
.solo-bar .sb-scope button.active,
.mode-pill button.active-auto {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #04130c;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-danger {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}

.inp,
.search-inp,
.prompt-edit-area,
.iv-input,
#run-prompt,
#solo-model-select,
.toolbar input,
.toolbar select {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  color: var(--tx1);
}

.inp:focus,
.search-inp:focus,
.prompt-edit-area:focus,
.iv-input:focus,
.chat-input-inner:focus-within {
  border-color: color-mix(in srgb, var(--blue) 58%, transparent);
  box-shadow: var(--glow-b);
}

/* Data surfaces */
.rt-thead,
.sl-thead {
  background: color-mix(in srgb, var(--bg1) 96%, transparent);
  border-bottom-color: var(--line);
}

.rt-section,
.roster-group-hdr,
.sp-section-title {
  background: color-mix(in srgb, var(--bg1) 90%, transparent);
  border-color: var(--line);
}

.rt-row,
.roster-row,
.team-row,
.sl-row {
  border-color: var(--line);
}

.rt-row:hover,
.roster-row:hover,
.team-row:hover,
.sl-row:hover {
  background: color-mix(in srgb, var(--blue) 7%, var(--bg2));
}

.roster-row.selected,
.team-row.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  box-shadow: inset 3px 0 0 var(--accent);
}

.rt-row.is-loaded {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left-color: var(--accent);
}

.r-avatar,
.detail-avatar,
.tm-avatar,
.sv-avatar,
.sl-avatar,
.b-avatar,
.iv-avatar,
.solo-msg .s-avatar {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.kv-card,
.prompt-card,
.tm-row,
.sv-card,
.cmp-col,
.tl-entry,
.log-entry,
.tb-vram-summary,
.preset-modal-card,
.modal-card,
.score-sheet-card {
  border-radius: 8px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  box-shadow: none;
}

.sv-card:hover,
.cmp-col:hover,
.tl-entry:hover {
  border-color: var(--line2);
  box-shadow: var(--shadow);
}

/* Chat */
#run-log,
#solo-log,
.interview-messages,
.tl-feed {
  background:
    linear-gradient(180deg, rgba(91, 157, 255, 0.035), transparent 220px),
    transparent;
}

.chat-input-inner {
  margin: 12px 16px 14px;
  border-radius: 8px;
  background: var(--bg2);
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.b-bubble,
.solo-msg .s-bubble,
.iv-bubble {
  border-radius: 8px;
  border-color: var(--line);
}

.b-bubble.agent,
.solo-msg.agent .s-bubble,
.iv-msg.agent .iv-bubble {
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
}

.b-bubble.user,
.solo-msg.user .s-bubble,
.iv-msg.user .iv-bubble {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, #000), var(--blue));
  color: #fff;
}

.log-header,
.cmp-col-hdr {
  background: color-mix(in srgb, var(--bg3) 86%, transparent);
}

.md-body pre {
  border-radius: 8px;
  background: color-mix(in srgb, #020617 80%, var(--bg));
}

/* Settings */
.sp-body {
  padding-bottom: 56px;
}

.sp-section {
  max-width: 1120px;
}

.sp-row {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
}

.sp-row[style*="flex-direction:column"] {
  align-items: stretch !important;
}

.sp-row textarea {
  width: 100%;
}

.sp-label {
  color: var(--tx2);
}

.sp-label small {
  margin-top: 3px;
  color: var(--tx3);
  line-height: 1.45;
}

/* Modals and overlays */
#stats-modal,
#preset-modal,
#score-sheet,
#machine-modal,
#custom-role-modal,
#emoji-picker-modal,
#app-dialog,
#https-help-modal,
#new-models-modal,
#iv-prompt-modal {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-header {
  background: color-mix(in srgb, var(--bg1) 94%, transparent);
}

.modal-close {
  border: 1px solid var(--line);
  background: var(--bg2);
}

/* Mobile */
@media (max-width: 600px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --topbar-h: 50px;
  }

  #topbar {
    padding: 0 10px;
    gap: 8px;
  }

  .app-brand {
    min-width: 0;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .brand-copy {
    display: none;
  }

  #live-status {
    justify-content: flex-start !important;
    padding: 0 2px;
  }

  #bottomnav {
    height: 66px;
    background: color-mix(in srgb, var(--bg1) 94%, transparent);
  }

  .bn-btn {
    font-size: 20px;
    border-top: 2px solid transparent;
  }

  .bn-btn.active {
    border-top-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }

  .section-bar {
    padding: 9px 12px;
  }

  .rt-thead,
  .rt-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .chat-input-inner {
    margin: 8px 10px 10px;
  }

  .sp-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sp-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .sp-ctrl {
    width: 100% !important;
  }
}

/* ── Pro Console readability pass ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 72%, #fff);
  outline-offset: 2px;
}

.section-bar {
  min-height: 42px;
  background: color-mix(in srgb, var(--bg1) 96%, var(--blue) 4%);
}

.section-title {
  font-size: 12px;
  letter-spacing: .01em;
}

.section-sub,
.team-sub-t,
.r-role,
.mc-loaded,
.rt-th,
.tl-entry-meta {
  color: color-mix(in srgb, var(--tx3) 82%, var(--tx2));
}

.rt-row,
.roster-row,
.team-row,
.ep-row,
.tl-entry {
  transition: background .15s, border-color .15s, transform .15s;
}

.rt-row:hover,
.roster-row:hover,
.team-row:hover,
.ep-row:hover {
  background: color-mix(in srgb, var(--bg3) 76%, var(--blue) 4%);
}

.rt-thead {
  background: color-mix(in srgb, var(--bg1) 93%, var(--blue) 7%);
  box-shadow: 0 1px 0 var(--line);
}

.rt-row {
  min-height: 46px;
}

.rt-actions-cell .load-btn,
.rt-actions-cell .unload-btn,
.load-btn,
.unload-btn {
  min-width: 64px;
}

.inp,
.search-inp,
.prompt-edit-area {
  background: color-mix(in srgb, var(--bg) 88%, var(--bg2));
}

.btn,
.nav-btn,
.bn-btn,
.chip,
.rs-sort-btn,
.view-toggle button,
.mode-pill button,
.audience-toggle button {
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
.bn-btn:active,
.nav-btn:active {
  transform: translateY(1px);
}

.md-body {
  line-height: 1.62;
}

.md-body p + p,
.md-body ul + p,
.md-body ol + p,
.md-body pre + p {
  margin-top: .7em;
}

/* ── Two-row iPhone navigation and compact mobile shell ── */
@media (max-width: 600px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --topbar-h: 46px;
  }

  #app {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  #topbar {
    min-height: 46px;
    height: 46px;
    padding: 0 8px;
  }

  #live-status {
    justify-content: flex-start !important;
    overflow-x: auto;
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }

  .ls-pill {
    min-width: 96px;
    max-width: 142px;
    padding: 4px 8px;
  }

  #topbar-row2 {
    height: 30px;
    justify-content: flex-start;
    padding: 0 8px;
  }

  #topbar-row2 .tracker-pill {
    padding: 3px 7px;
  }

  #bottomnav {
    height: calc(88px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: stretch;
    gap: 0;
    padding: 4px 0 env(safe-area-inset-bottom);
    border-top-color: color-mix(in srgb, var(--line2) 75%, var(--blue));
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .24);
  }

  .bn-btn {
    flex: 0 0 25%;
    height: 40px;
    min-width: 0;
    padding: 4px 2px;
    gap: 2px;
    font-size: 18px;
    border-top: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .bn-btn span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    letter-spacing: 0;
  }

  .bn-btn.active {
    border-top-color: transparent;
    border-bottom-color: var(--accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  }

  .section-bar {
    align-items: flex-start;
    gap: 6px;
  }

  .section-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .section-actions::-webkit-scrollbar,
  #chat-util-strip::-webkit-scrollbar,
  #turn-chips::-webkit-scrollbar {
    display: none;
  }

  .section-actions .btn,
  .section-actions .inp,
  .section-actions .search-inp {
    flex-shrink: 0;
  }

  .rt-thead {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .rt-row {
    min-height: 52px;
  }

  .rt-name,
  .r-name,
  .team-name-t,
  .ep-row-name {
    line-height: 1.25;
  }

  #chat-topbar,
  .solo-bar,
  #turn-order-bar,
  .tl-bar {
    border-bottom-color: var(--line);
  }

  #chat-topbar {
    flex-wrap: wrap;
  }

  #chat-topbar #run-team-select {
    flex-basis: 100%;
  }

  .audience-toggle,
  .mode-pill {
    flex: 1 1 auto;
  }

  #turn-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .chat-input-bar {
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg1) 96%, transparent);
  }

  .chat-input-inner {
    border-radius: 10px;
    padding: 9px 10px 9px 12px;
    margin: 7px 8px 8px;
  }

  .chat-btns {
    gap: 6px;
  }

  #run-btn,
  #stop-btn {
    min-height: 38px;
  }

  #run-log,
  #solo-log {
    padding-bottom: 12px;
  }

  .b-body,
  .solo-msg .s-bubble {
    max-width: 92%;
  }

  .b-bubble,
  .solo-msg .s-bubble,
  .iv-bubble {
    font-size: 14px;
    line-height: 1.58;
  }

  .modal-card,
  .preset-modal-card,
  .score-sheet-card,
  #machine-modal > div,
  #new-models-modal > div,
  #iv-prompt-modal > div,
  #https-help-modal > div {
    width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 10px !important;
  }

  .sp-body {
    padding-bottom: 108px;
  }
}

@media (max-width: 380px) {
  .bn-btn span {
    font-size: 8px;
  }

  .bn-btn {
    font-size: 17px;
  }

  .section-title {
    flex-basis: 100%;
  }
}