/* Jarvis UI polish — loaded on every page (via nav-menu).
   Goal: no overlapping text, readable contrast, consistent controls. */

html.theme-light {
  --card: #ffffff;
  --card2: #f3f6fa;
  --border: rgba(16, 34, 52, 0.32);
  --dim: #3a5163;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
canvas { height: auto; }

h1, h2, h3, p, li, label, td, th, summary {
  overflow-wrap: anywhere;
  word-break: break-word;
}

h1 {
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
}

code, kbd {
  font-size: 0.86em;
  background: color-mix(in srgb, var(--text, #fff) 8%, var(--panel, transparent));
  border: 1px solid var(--line, rgba(255,255,255,.2));
  border-radius: 6px;
  padding: 0.05em 0.35em;
}

/* ── Chrome: menu + status chip never sit on top of titles ── */
.shell-topbar,
.app-header,
.nav-menu-floatbar,
.jill-topbar,
.ctl-topbar,
.chat-compact-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--panel-strong, var(--panel, #0d1824)) 92%, transparent) !important;
  color: var(--text, inherit);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.2));
  min-height: 52px;
}

#jarvis-model-chip {
  margin-left: auto !important;
  max-width: 240px !important;
  flex: 0 1 240px;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  max-width: min(42vw, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cards / heroes follow theme ── */
.mini-card,
.page-hero,
.hero-status-card,
.focus-metric-card,
.support-meta-card,
.inline-drawer,
.status-card,
.workspace-link-card {
  background: var(--panel, #0d1824) !important;
  color: var(--text, inherit);
  border: 1px solid var(--line, rgba(255,255,255,.22));
  border-radius: 16px;
}

.page-hero {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.mini-card {
  padding: 1rem 1.15rem;
}

.mini-card + .mini-card { margin-top: 0; }

.eyebrow {
  color: var(--accent, var(--cyan, #7cecff));
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.panel-copy,
.secondary-copy,
.status-note {
  color: var(--muted, #c5d4e0);
}

details summary {
  cursor: pointer;
  color: var(--text, inherit);
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  list-style: none;
  padding: 0.15rem 0;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "▸";
  color: var(--accent, var(--cyan));
  font-weight: 800;
}
details[open] summary::before { content: "▾"; }
details summary .secondary-copy,
details summary span {
  font-weight: 500;
  font-size: 0.82rem;
}

/* ── Forms: labels and fields don't collide ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  background: var(--btn-bg, var(--panel-strong, #152232));
  color: var(--text, inherit);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  min-height: 2.35rem;
  font: inherit;
  max-width: 100%;
}

html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.theme-light select,
html.theme-light textarea {
  background: #fff;
  color: var(--text);
}

.quick-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

body[data-workspace="settings"] .quick-action-row.wrap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1rem;
}

.set-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 200px;
  flex: 1 1 220px;
}

.set-field > label,
.set-field > .secondary-copy:first-child {
  color: var(--text) !important;
  font-weight: 650;
  font-size: 0.8rem;
}

body[data-workspace="settings"] .pers-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.75rem;
}

body[data-workspace="settings"] .account-readout {
  background: var(--panel-strong) !important;
}

/* Dashboard refresh row: 2×2 of labeled numbers */
#setDashSystem, #setDashStatus, #setDashLogs, #setDashActivity {
  max-width: 8rem;
}

/* Buttons stay readable */
.btn {
  white-space: nowrap;
}

/* Drawers / overlays follow theme */
.drawer,
html.theme-light .drawer {
  background: var(--panel-strong) !important;
  color: var(--text);
}

html.theme-light .shell-topbar,
html.theme-light .app-header,
html.theme-light .nav-menu-floatbar {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Holodesk: wrap the crowded header; hide cam placeholders on small screens */
.hd-top {
  flex-wrap: wrap;
  row-gap: 8px;
  background: color-mix(in srgb, var(--bg, #061018) 88%, transparent) !important;
}
.hd-clients { max-width: 100%; }
html.theme-light .hd-clients a,
html.theme-light .hd-btn {
  background: var(--btn-bg, #fff) !important;
  color: var(--text) !important;
}

/* ── Light mode: readable fields + message bubbles everywhere ──
   Many pages hardcode dark navy surfaces; force light surfaces + dark ink. */
html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.theme-light select,
html.theme-light textarea,
html.theme-light .hd-compose textarea,
html.theme-light [contenteditable="true"] {
  background: #ffffff !important;
  color: #0c1a26 !important;
  border-color: rgba(16, 34, 52, 0.35) !important;
  caret-color: #0c1a26;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #5a7388 !important;
  opacity: 1;
}

html.theme-light .bubble,
html.theme-light .bubble.me,
html.theme-light .bubble.ai,
html.theme-light .bubble.user,
html.theme-light .bubble.jarvis,
html.theme-light .bubble.jarvis.thinking,
html.theme-light .chat-bubble,
html.theme-light .chat-bubble--user,
html.theme-light .chat-bubble--jarvis,
html.theme-light .chat-bubble--thinking,
html.theme-light .chat-bubble--error {
  color: #0c1a26 !important;
}

html.theme-light .bubble.me,
html.theme-light .bubble.user,
html.theme-light .chat-bubble--user {
  background: #d7ebf7 !important;
  border: 1px solid rgba(10, 106, 140, 0.4) !important;
  box-shadow: none !important;
}

html.theme-light .bubble.ai,
html.theme-light .bubble.jarvis,
html.theme-light .bubble.jarvis.thinking,
html.theme-light .chat-bubble--jarvis,
html.theme-light .chat-bubble--thinking {
  background: #ffffff !important;
  border: 1px solid rgba(16, 34, 52, 0.28) !important;
  box-shadow: none !important;
}

html.theme-light .bubble .tag,
html.theme-light .bubble .label,
html.theme-light .chat-bubble-label,
html.theme-light .chat-msg-meta,
html.theme-light .thinking-body,
html.theme-light .chat-thinking-main,
html.theme-light .chat-thinking-label,
html.theme-light .chat-bubble-text {
  color: #3a5163 !important;
}

html.theme-light .hd-status {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #3a5163 !important;
  border-color: rgba(16, 34, 52, 0.28) !important;
}

html.theme-light .hd-cam {
  background: #f3f6fa !important;
  color: #3a5163 !important;
  border-color: rgba(16, 34, 52, 0.28) !important;
}

html.theme-light .hd-chat,
html.theme-light .hd-tray {
  background: #ffffff !important;
  color: #0c1a26 !important;
  border-color: rgba(16, 34, 52, 0.28) !important;
}

html.theme-light .chip {
  background: #ffffff !important;
  color: #0c1a26 !important;
  border-color: rgba(16, 34, 52, 0.32) !important;
}

/* Common dark “output / log / code” panels */
html.theme-light .output,
html.theme-light .log-panel,
html.theme-light .console,
html.theme-light .mono-log,
html.theme-light pre:not(.keep-dark),
html.theme-light .codebox pre,
html.theme-light details.codebox pre,
html.theme-light .reco-card pre {
  background: #f3f6fa !important;
  color: #0c1a26 !important;
  border-color: rgba(16, 34, 52, 0.28) !important;
}

/* Weather / tools pages that ship their own dark palette */
html.theme-light body.wx-body,
html.theme-light .wx-top,
html.theme-light .wx-card,
html.theme-light .wx-stat,
html.theme-light .wx-hour,
html.theme-light .wx-input,
html.theme-light .wx-btn-ghost,
html.theme-light .wx-chip,
html.theme-light .wx-unit {
  background: #ffffff !important;
  color: #0c1a26 !important;
  border-color: rgba(16, 34, 52, 0.28) !important;
}
html.theme-light .wx-input { background: #f3f6fa !important; }

/* CAD Studio dark fields */
html.theme-light .td-card,
html.theme-light .acc,
html.theme-light .cad input,
html.theme-light .cad textarea,
html.theme-light .cad select {
  background: #ffffff !important;
  color: #0c1a26 !important;
}

/* CAD muted text */
.td-muted, .dim { color: var(--muted) !important; }

@media (max-width: 960px) {
  .workspace-status-grid,
  .hero-status-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .workspace-card-grid,
  .workspace-page-grid,
  .image-page-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  .workspace-status-grid,
  .hero-status-grid {
    grid-template-columns: 1fr !important;
  }
}