/* — app shell — */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100dvh}
.app.is-collapsed{grid-template-columns:var(--sidebar-w-min) minmax(0,1fr)}

/* — sidebar — */
.side{grid-column:1;display:flex;flex-direction:column;gap:var(--sp-2);background:var(--bg-surface);border-inline-end:1px solid var(--border-subtle);position:sticky;inset-block-start:0;height:100dvh;overflow:hidden;z-index:var(--z-nav)}
.side__brand{display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding-inline:var(--sp-4);flex:none;border-block-end:1px solid var(--border-subtle)}
.brand-mark{width:26px;height:26px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent) 0%,#3987E5 100%);display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-13);flex:none;box-shadow:0 2px 10px -2px rgba(110,90,246,.6)}
.brand-name{font-weight:600;font-size:var(--fs-14);letter-spacing:var(--ls-tight);white-space:nowrap}
.side__scroll{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-3) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
.nav-group__label{padding:0 var(--sp-3) var(--sp-2);font-size:var(--fs-11);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:var(--sp-3);height:34px;padding-inline:var(--sp-3);border-radius:var(--r-sm);color:var(--text-secondary);font-size:var(--fs-13);font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.85}
.nav-item.is-active{background:var(--accent-soft);color:var(--text-primary);position:relative}
.nav-item.is-active::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;transform:translateY(-50%);width:2px;height:16px;border-radius:var(--r-full);background:var(--accent)}
.nav-item__count{margin-inline-start:auto;font-size:var(--fs-11);color:var(--text-muted);font-variant-numeric:tabular-nums}
.side__footer{flex:none;padding:var(--sp-3);border-block-start:1px solid var(--border-subtle)}
.side__user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-sm);cursor:pointer;width:100%;border:0;background:none;font:inherit;text-align:start;color:inherit}
.side__user:hover{background:var(--bg-hover)}
.side__user-meta{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.side__user-name{font-size:var(--fs-13);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__user-mail{font-size:var(--fs-11);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.is-collapsed .brand-name,
.app.is-collapsed .nav-group__label,
.app.is-collapsed .nav-item span,
.app.is-collapsed .nav-item__count,
.app.is-collapsed .side__user-meta{display:none}
.app.is-collapsed .nav-item,
.app.is-collapsed .side__user{justify-content:center;padding-inline:0}
.app.is-collapsed .side__brand{justify-content:center;padding-inline:0}

/* — main + topbar — */
.main{grid-column:2;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;inset-block-start:0;z-index:calc(var(--z-nav) - 1);height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:var(--sp-3);padding-inline:var(--sp-5);background:color-mix(in srgb, var(--bg-canvas) 82%, transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--border-subtle)}
.topbar__search{flex:1;max-width:420px;display:flex;align-items:center;gap:var(--sp-2);height:32px;padding-inline:var(--sp-3);border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-raised);color:var(--text-muted);font-size:var(--fs-13);cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.topbar__search:hover{border-color:var(--border-strong)}
.topbar__search svg{width:15px;height:15px}
.topbar__search .kbd{margin-inline-start:auto}
.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--text-secondary);cursor:pointer;position:relative;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.icon-btn svg{width:16px;height:16px}
.icon-btn__dot{position:absolute;inset-block-start:6px;inset-inline-end:6px;width:6px;height:6px;border-radius:var(--r-full);background:var(--accent);box-shadow:0 0 0 2px var(--bg-canvas)}
.env-pill{display:inline-flex;align-items:center;gap:var(--sp-2);height:26px;padding-inline:var(--sp-3);border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-raised);font-size:var(--fs-12);color:var(--text-secondary);cursor:pointer}

/* — page content — */
.page{padding:var(--sp-6) var(--sp-5) var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-6);max-width:1440px;width:100%;margin-inline:auto}
.page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.page__title{font-size:var(--fs-24);font-weight:600;letter-spacing:var(--ls-tighter)}
.page__sub{margin-block-start:var(--sp-1);font-size:var(--fs-13);color:var(--text-muted)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.grid-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.feed{display:flex;flex-direction:column}
.feed__item{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-block-end:1px solid var(--border-subtle);font-size:var(--fs-13);color:var(--text-secondary)}
.feed__item:last-child{border-block-end:0}
.feed__item:hover{background:var(--bg-hover)}
.feed__time{margin-inline-start:auto;font-size:var(--fs-11);color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.feed__avatar{flex:none}
.usage-row{display:flex;flex-direction:column;gap:var(--sp-2);padding-block:var(--sp-3)}
.usage-row__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-13)}
.usage-row__val{color:var(--text-muted);font-size:var(--fs-12);font-variant-numeric:tabular-nums}

/* — side scrim — */
.side-scrim{display:none}

/* — responsive — */
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform var(--dur) var(--ease)}
  [dir="rtl"] .side{transform:translateX(100%)}
  .side.is-open{transform:none}
  .main{grid-column:1}
  .page{padding-inline:var(--sp-4)}
  .side-scrim.is-open{display:block;position:fixed;inset:0;background:rgba(4,4,6,.6);z-index:calc(var(--z-nav) - 2)}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:minmax(0,1fr)}
  .topbar__search span{display:none}
}

/* — Deep Research Extensions — */
.badge--citation {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  font-size: var(--fs-11);
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  vertical-align: baseline;
  margin-inline: 0.2rem;
}
.badge--citation:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.claim-card--highlight {
  outline: 2px solid var(--accent) !important;
  box-shadow: 0 0 20px rgba(110, 90, 246, 0.45) !important;
  transition: all 0.3s ease;
}
.report-h1 { font-size: var(--fs-24); font-weight: 700; margin-block: 1.25rem 0.5rem; color: var(--text-primary); }
.report-h2 { font-size: var(--fs-18); font-weight: 600; margin-block: 1.1rem 0.45rem; color: var(--text-primary); border-block-end: 1px solid var(--border-subtle); padding-block-end: 0.3rem; }
.report-h3 { font-size: var(--fs-15); font-weight: 600; margin-block: 0.85rem 0.35rem; color: var(--text-primary); }
.report-h4 { font-size: var(--fs-13); font-weight: 600; margin-block: 0.75rem 0.25rem; color: var(--text-primary); }
.report-p { margin-block-end: 0.85rem; color: var(--text-secondary); line-height: 1.75; font-size: var(--fs-13); }
.report-quote { border-inline-start: 3px solid var(--accent); padding: 0.6rem 1rem; margin-block: 0.85rem; background: var(--bg-surface); border-radius: var(--r-sm); font-style: italic; color: var(--text-primary); }
.report-ul { padding-inline-start: 1.5rem; margin-block-end: 0.85rem; }
.report-li { margin-block-end: 0.35rem; color: var(--text-secondary); font-size: var(--fs-13); }
.report-hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin-block: 1.5rem; }

/* — Responsive Layout Components & Anti-Collision Guards — */
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.workspace-grid > * {
  min-width: 0;
  width: 100%;
}
@media (max-width: 960px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quick-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.quick-form .input {
  flex: 1 1 260px;
  min-width: 200px;
}
.quick-form .select {
  flex: 0 1 auto;
  min-width: 220px;
}
.quick-form .btn {
  flex: 0 0 auto;
}
@media (max-width: 680px) {
  .quick-form .input,
  .quick-form .select,
  .quick-form .btn {
    width: 100%;
    min-width: 0;
  }
}

.studio-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.checkbox-group-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}

.stat__sub {
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-block-start: var(--sp-1);
}

.monitor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-block-end: 1px solid var(--border-subtle);
}
.monitor-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* Word-wrap and overflow defense for claims, quotes, and telemetry */
.claim-card,
.claim-quote,
.claim-body,
.event-row,
.event-msg {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Responsive topbar defense */
@media (max-width: 860px) {
  .topbar__search {
    max-width: 220px;
  }
  #gateway-status-badge {
    display: none;
  }
}
@media (max-width: 640px) {
  .topbar__search {
    display: none;
  }
}

/* — Preset Prompt Chips — */
.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.prompt-chips__label {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-11);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.prompt-chip:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-color: var(--accent-border);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(110, 90, 246, 0.25);
}
.prompt-chip:active {
  transform: translateY(0);
}

/* — Proportional Table Layout for Research Runs — */
.table--runs {
  table-layout: fixed;
  width: 100%;
}
.table--runs th:nth-child(1),
.table--runs td:nth-child(1) {
  width: 44%;
  white-space: normal;
  word-break: break-word;
}
.table--runs th:nth-child(2),
.table--runs td:nth-child(2) {
  width: 14%;
  white-space: nowrap;
}
.table--runs th:nth-child(3),
.table--runs td:nth-child(3) {
  width: 12%;
  white-space: nowrap;
}
.table--runs th:nth-child(4),
.table--runs td:nth-child(4) {
  width: 10%;
  white-space: nowrap;
}
.table--runs th:nth-child(5),
.table--runs td:nth-child(5) {
  width: 10%;
  white-space: nowrap;
}
.table--runs th:nth-child(6),
.table--runs td:nth-child(6) {
  width: 10%;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .table--runs {
    table-layout: auto;
  }
}

/* — Security Auth Gate & User Session — */
.auth-gate-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 5, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  display: none;
  place-items: center;
  padding: var(--sp-4);
}

.auth-gate-modal.is-open {
  display: grid !important;
}

.auth-card {
  width: min(440px, 94vw);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(110, 90, 246, 0.18);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: authFadeIn 0.25s ease-out;
}

@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.auth-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.auth-card__icon svg {
  width: 24px;
  height: 24px;
}

.auth-card__header {
  text-align: center;
}
.auth-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.auth-card__sub {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-block-start: var(--sp-1);
  line-height: 1.5;
}

.auth-error {
  padding: var(--sp-3) var(--sp-4);
  background: var(--danger-soft);
  border: 1px solid rgba(208, 59, 59, 0.35);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  display: none;
}
.auth-error.is-visible {
  display: block;
}

.auth-user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  padding-inline: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-primary);
}

.auth-logout-btn {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: var(--fs-11);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.auth-logout-btn:hover {
  color: var(--danger);
  background: var(--danger-soft);
}