:root {
  --bg: #0b1020;
  --card: #111a33;
  --muted: #9fb0d0;
  --text: #e8eefc;
  --line: #233055;
  --bad: #ff6a6a;
  --ok: #65ffb3;
  --warn: #ffd166;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, #12224d, var(--bg));
  color: var(--text);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  display: block;
  gap: 14px;
}

@media (min-width: 980px) {
  body:not(.page-chat) main { grid-template-columns: 1fr 1fr; }
}

.card {
  background: rgba(17, 26, 51, 0.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  min-width: 0;
}

.full-width { grid-column: 1 / -1; }

.admin-top-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

@media (min-width: 980px) {
  .admin-top-grid { grid-template-columns: 1fr 1fr; }
}

.card h2 { margin: 0 0 10px; font-size: 15px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.col-12 { flex: 0 0 100%; max-width: 100%; min-width: 0; }

@media (min-width: 980px) {
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; min-width: 0; }
}

.g-3 { gap: 14px; }

label { font-size: 12px; color: var(--muted); display: block; margin: 8px 0 6px; }

.checkbox-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(9, 13, 26, 0.65);
  color: var(--text);
  outline: none;
}

textarea { min-height: 98px; resize: vertical; }

button {
  appearance: none;
  border: 1px solid rgba(106, 169, 255, 0.45);
  background: linear-gradient(180deg, rgba(106,169,255,0.22), rgba(106,169,255,0.08));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.04s ease, border-color 0.15s ease;
}

button:active { transform: translateY(1px); }

button.secondary {
  border-color: rgba(159, 176, 208, 0.35);
  background: rgba(159, 176, 208, 0.08);
}

.pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.pill.ok  { color: var(--ok);  border-color: rgba(101,255,179,0.35); }
.pill.bad { color: var(--bad); border-color: rgba(255,106,106,0.35); }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.out {
  white-space: pre-wrap;
  background: rgba(9,13,26,0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

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

.src {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(9,13,26,0.45);
}

.src .top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.src .meta { color: var(--muted); font-size: 12px; }
.meta strong { font-weight: 600; }

.status-row {
  display: grid;
  grid-template-columns: minmax(150px,1fr) minmax(220px,2fr) 90px 16px;
  align-items: center;
  column-gap: 12px;
}

.status-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid var(--line);
  margin-left: 8px;
}

.status-dot.ok      { background: var(--ok); }
.status-dot.bad     { background: var(--bad); }
.status-dot.warn    { background: var(--warn); }
.status-dot.unknown { background: var(--muted); }

.status-name  { text-align: left; min-width: 0; }
.status-url   { text-align: left; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.status-state { justify-self: start; min-width: 90px; text-align: left; }
.status-row .status-dot { justify-self: start; }

@media (max-width: 900px) {
  .status-row { grid-template-columns: minmax(120px,1fr) minmax(0,1.6fr) 90px 16px; }
}

.small { font-size: 12px; color: var(--muted); }
.right { margin-left: auto; }

.field-grow-220 { flex: 1; min-width: 220px; }
.field-grow-260 { flex: 1; min-width: 260px; }
.field-grow-360 { flex: 1; min-width: 360px; }
.field-grow-380 { flex: 1; min-width: 380px; }
.field-fixed-170 { width: 170px; }
.field-fixed-160 { width: 160px; }

.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.ml-10 { margin-left: 10px; }

.summary-list { margin: 8px 0 0; padding: 0; list-style: none; }
.summary-list li { margin: 6px 0; }

#dirRecentJobs { white-space: pre-wrap; }

.dir-jobs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dir-jobs-table th,
.dir-jobs-table td {
  border-bottom: 1px solid var(--line);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}

.telemetry-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 10px;
}

.telemetry-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9,13,26,0.45);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.telemetry-stat-label { font-size: 12px; color: var(--muted); }

.spacer-10 { height: 10px; }

.dir-live-info { display: flex; flex-direction: column; gap: 10px; }

.dir-live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: rgba(9,13,26,0.30);
}

.dir-live-label     { font-weight: 600; opacity: 0.9;  color: var(--muted); }
.dir-live-sub-label { font-weight: 600; opacity: 0.85; color: var(--muted); margin-left: 14px; }

.dir-live-value { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

#dirLiveCurrent {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 980px) {
  #dirLiveCurrent { max-width: 100%; }
}

#dirLiveStart,
#dirLiveEnd {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.row.g-3 { align-items: stretch; }
.row.g-3 > div { display: flex; }
.row.g-3 .card { flex: 1; }

mark {
  background: rgba(255,209,102,0.9);
  color: #111;
  padding: 1px 3px;
  border-radius: 3px;
}

.doc-dashboard-body  { display: flex; flex-direction: column; gap: 14px; }
.doc-dashboard-section { display: flex; flex-direction: column; gap: 6px; }
.doc-dashboard-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.doc-dashboard-title { font-size: 15px; line-height: 1.4; word-break: break-word; }
.doc-dashboard-summary { line-height: 1.6; color: var(--text); }
.doc-dashboard-facts { margin: 0; padding-left: 18px; }
.doc-dashboard-facts li { margin: 4px 0; line-height: 1.5; }
.doc-dashboard-actions { display: flex; justify-content: flex-start; }

.upload-progress-wrap { margin-top: 10px; }

.upload-progress-track {
  width: 100%; height: 6px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--line);
}

.upload-progress-bar {
  width: 35%; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(106,169,255,0.95), rgba(101,255,179,0.95));
  animation: upload-progress-slide 1.15s linear infinite;
}

@keyframes upload-progress-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.hero,
.upload-compact,
#documentDashboard,
.chat-shell,
.chat-composer {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.hero p  { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

.upload-compact.card { background: rgba(17,26,51,0.6); }

.chat-shell {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9,13,26,0.45);
  min-height: 240px;
  margin-top: 2px;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  min-height: 240px;
  max-height: none;
}

.chat-message { display: flex; flex-direction: column; gap: 8px; }
.chat-message.user      { align-items: flex-end; }
.chat-message.assistant { align-items: flex-start; }

.chat-bubble {
  max-width: min(760px, 90%);
  padding: 12px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.chat-bubble.user {
  background: rgba(106,169,255,0.22);
  border: 1px solid rgba(106,169,255,0.45);
}

.chat-bubble.assistant {
  background: rgba(9,13,26,0.65);
  border: 1px solid var(--line);
}

.chat-sources { width: min(760px, 100%); display: grid; gap: 8px; }

.chat-source-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(9,13,26,0.45);
}

.chat-composer { margin-bottom: 10px; }

.chat-composer-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9,13,26,0.6);
  padding: 12px;
}

.chat-composer-box textarea { min-height: 88px; }

.chat-composer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.source-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.source-summary-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.doc-dashboard-block   { display: flex; flex-direction: column; gap: 6px; }
.doc-dashboard-kicker  { font-size: 12px; color: var(--muted); font-weight: 600; }
.doc-dashboard-headline { font-size: 15px; line-height: 1.4; word-break: break-word; }
.doc-dashboard-text,
.source-summary-text { line-height: 1.6; color: var(--text); }

.result-type     { display: inline-block; font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 8px; }
.result-filename { font-size: 14px; color: var(--text); font-weight: 600; }
.result-page,
.result-hitcount { font-size: 12px; color: var(--muted); margin-left: 8px; }

/* ───────────────────────────────────────
   HEADER
─────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(7,12,26,0.88);
  backdrop-filter: blur(12px);
}

.app-header-minimal {
  padding-top: 8px;
  padding-bottom: 8px;
}

.app-header-inner {
  width: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

@media (min-width: 980px) {
  body.page-chat .app-header-inner {
    padding-left: calc(230px + 24px + 18px);
  }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex: none;
  flex-shrink: 0;
  opacity: 0.95;
}

.header-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

a.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #c9d5ee;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.04s ease;
}

a.nav-pill:hover {
  border-color: rgba(106,169,255,0.35);
  background: rgba(106,169,255,0.10);
  color: #eef4ff;
}

a.nav-pill.active {
  color: #ffffff;
  border-color: rgba(106,169,255,0.45);
  background: linear-gradient(180deg, rgba(106,169,255,0.20), rgba(106,169,255,0.10));
}

/* ───────────────────────────────────────
   CHAT LAYOUT
─────────────────────────────────────── */

.main-chat-layout {
  padding-top: 12px;
  padding-bottom: 220px;
  min-height: 100vh;
}

.hero-compact { text-align: center; padding-top: 8px; padding-bottom: 0; }
.hero-compact h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.hero-compact p  { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

.chat-composer-fixed {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100vw - 36px);
  max-width: 900px;
  margin: 0;
  z-index: 30;
}

/* Desktop: Composer zentriert im Chat-Bereich rechts von der Sidebar */
@media (min-width: 980px) {
  .chat-composer-fixed {
    /* Mitte des Chat-Bereichs = 272px + (verbleibende Breite / 2) */
    left: calc(272px + (100vw - 272px) / 2);
    transform: translateX(-50%);
    width: min(860px, calc(100vw - 272px - 36px - 18px));
    transition: left 0.25s ease, width 0.25s ease;
  }

  /* Sidebar kollabiert: 44px + 12px margin + 18px padding = 74px */
  body.sidebar-collapsed .chat-composer-fixed {
    left: calc(74px + (100vw - 74px) / 2);
    width: min(860px, calc(100vw - 74px - 36px - 18px));
  }
}

/* Panel offen: Composer zentriert im Chat-Bereich (60vw) */
@media (min-width: 1100px) {
  body.preview-open .chat-composer-fixed {
    left: calc(272px + clamp(320px, 60vw, 860px) / 2);
    transform: translateX(-50%);
    width: min(820px, calc(clamp(320px, 60vw, 860px) - 36px));
  }
}

.chat-composer-fixed .chat-composer-box {
  border: 1px solid rgba(106,169,255,0.30);
  background: rgba(17,26,51,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.chat-composer-fixed textarea { min-height: 110px; max-height: 220px; }
.chat-composer-fixed .chat-composer-actions { justify-content: flex-start; }

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
  padding: 28px 18px;
  gap: 12px;
}

.chat-empty-icon { font-size: 32px; line-height: 1; opacity: 0.95; }
.chat-empty-state h2 { margin: 0; font-size: 22px; }
.chat-empty-state p  { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.6; }

.chat-empty-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 760px;
  margin-top: 10px;
}

.chat-suggestion {
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(17,26,51,0.55);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.04s ease, background 0.15s ease;
}

.chat-suggestion:hover {
  border-color: rgba(106,169,255,0.55);
  background: rgba(106,169,255,0.10);
}

.chat-suggestion:active { transform: translateY(1px); }

header:not(.app-header) { padding: 18px; }
.app-header + main { padding-top: 18px; }

body.page-chat .main-chat-layout {
  flex: 1 1 0;
  min-width: 0;
  max-width: 900px;
  min-height: 100vh;
  padding-top: 12px;
  padding-bottom: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1100px) {
  body.preview-open .main-chat-layout {
    flex: 0 0 auto;
    width: clamp(320px, 60vw, 860px);
    min-width: 320px;
  }
}

body.page-chat .hero,
body.page-chat #documentDashboard,
body.page-chat .chat-shell {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.page-chat .chat-composer-fixed {
  max-width: 900px;
}

body.page-chat .chat-shell  { min-height: 0; }
body.page-chat .chat-thread { min-height: 0; }

/* ───────────────────────────────────────
   CHAT PAGE WRAPPER — Sidebar + Main
─────────────────────────────────────── */

.chat-page-wrapper {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
  width: 100%;
  padding: 0 18px;
  gap: 0;
}

/* ───────────────────────────────────────
   SIDEBAR
─────────────────────────────────────── */

.chat-sidebar {
  display: none; /* Mobile: ausgeblendet */
}

@media (min-width: 980px) {
  .chat-sidebar {
    display: flex;
    flex-direction: column;
    width: 230px;
    flex-shrink: 0;
    border-right: 1px solid var(--line);
    margin-right: 24px;
    padding: 16px 0 220px 0;
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    scrollbar-width: none;
    transition: width 0.2s ease, min-width 0.2s ease, margin-right 0.2s ease;
  }
  .chat-sidebar::-webkit-scrollbar { display: none; }
}

/* Trenner Schnellzugriff / Letzte Chats */
.sidebar-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 12px 16px 0;
}

.sidebar-section {
  padding-right: 12px;
  margin-bottom: 16px;
}

.sidebar-history-section {
  flex: 1;
  padding-right: 12px;
  margin-bottom: 0;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 8px;
  padding-left: 2px;
}

/* Schnellzugriff-Buttons */
.sidebar-suggestions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar-suggestion {
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(17, 26, 51, 0.45);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.04s ease;
}

.sidebar-suggestion:hover {
  border-color: rgba(106, 169, 255, 0.45);
  background: rgba(106, 169, 255, 0.08);
  color: var(--text);
}

.sidebar-suggestion:active { transform: translateY(1px); }

/* Letzte Chats — neueste oben, per JS befüllt */
.sidebar-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-history-empty {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.5;
  padding: 4px 2px;
}

.sidebar-history-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  min-width: 0;
}

.sidebar-history-item:hover {
  background: rgba(106, 169, 255, 0.07);
  border-color: var(--line);
}

/* Neuester Eintrag (index 0) — leicht hervorgehoben */
.sidebar-history-item--new {
  background: rgba(106, 169, 255, 0.08);
  border-color: rgba(106, 169, 255, 0.2);
}

.sidebar-history-item-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.5;
}

.sidebar-history-item--new .sidebar-history-item-icon {
  color: #7eb8ff;
  opacity: 0.8;
}

.sidebar-history-item-text {
  font-size: 12px;
  color: #c2d4ee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.sidebar-history-item--new .sidebar-history-item-text {
  color: #c8d8f0;
}

.sidebar-history-item-time {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.45;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ───────────────────────────────────────
   EMPTY STATE — Chat-Bubble-SVG
─────────────────────────────────────── */

.chat-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-empty-bubble {
  width: 64px;
  height: auto;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR TOGGLE BUTTON
═══════════════════════════════════════════════════════ */

.sidebar-toggle {
  display: none;
}

@media (min-width: 980px) {
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: rgba(17,26,51,0.6);
    color: var(--muted);
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
    /* oben rechts in der Sidebar */
    align-self: flex-end;
    margin: 10px 8px 12px auto;
  }
  .sidebar-toggle:hover {
    background: rgba(106,169,255,0.1);
    color: var(--text);
    border-color: rgba(106,169,255,0.4);
  }
  .chat-sidebar.collapsed .sidebar-toggle {
    margin: 10px auto 8px;
    align-self: center;
  }

  /* Kollabierte Sidebar */
  .chat-sidebar.collapsed {
    width: 44px;
    min-width: 44px;
    margin-right: 12px;
    padding: 0;
    overflow: hidden;
    border-right: 1px solid var(--line);
    transition: width 0.2s ease, min-width 0.2s ease, margin-right 0.2s ease;
  }

  .chat-sidebar.collapsed .sidebar-section,
  .chat-sidebar.collapsed .sidebar-divider,
  .chat-sidebar.collapsed .sidebar-section-title {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   DOC PREVIEW PANEL
═══════════════════════════════════════════════════════ */

.doc-preview-panel {
  display: none;
}

@media (min-width: 1100px) {
  .doc-preview-panel.open {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 380px;
    border-left: 1px solid var(--line);
    margin-left: 16px;
    position: sticky;
    top: 60px;
    height: calc(100vh - 70px);
    background: #1a1a1a;
    border-radius: 0;
    overflow: hidden;
    z-index: 10;
  }
}

.doc-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  gap: 8px;
  min-height: 40px;
}

.doc-preview-filename {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.doc-preview-type {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.doc-preview-close {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.doc-preview-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border-color: var(--line);
}

.doc-preview-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

.doc-preview-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  display: none;
}

.doc-preview-docx {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  background: #fff;
  color: #111;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  line-height: 1.7;
}

.doc-preview-docx h1,
.doc-preview-docx h2,
.doc-preview-docx h3 { margin: 1em 0 .4em; font-family: Arial, sans-serif; }
.doc-preview-docx p  { margin: 0 0 .6em; }
.doc-preview-docx table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: 12px; }
.doc-preview-docx td,
.doc-preview-docx th { border: 1px solid #ccc; padding: 4px 8px; }
.doc-preview-docx th { background: #f0f0f0; font-weight: 600; }
.doc-preview-docx img { max-width: 100%; height: auto; }

.doc-preview-xlsx {
  display: none;
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: #fff;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.xlsx-sheet-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 12px 0 6px;
  padding: 3px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  display: inline-block;
}

.doc-preview-xlsx table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.doc-preview-xlsx td,
.doc-preview-xlsx th { border: 1px solid #d0d0d0; padding: 3px 8px; white-space: nowrap; }
.doc-preview-xlsx tr:first-child td,
.doc-preview-xlsx th { background: #f5f5f5; font-weight: 600; }
.doc-preview-xlsx tr:hover td { background: #f9f9f9; }

.doc-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(9,13,26,0.85);
  color: var(--muted);
  font-size: 13px;
}

.doc-preview-eml {
  display: none;
  flex: 1;
  overflow-y: auto;
  background: #fff;
  color: #111;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.eml-header {
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
  flex-shrink: 0;
}

.eml-subject {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 10px;
  line-height: 1.4;
}

.eml-hdr-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.5;
}

.eml-hdr-key {
  color: #888;
  min-width: 44px;
  flex-shrink: 0;
}

.eml-hdr-val {
  color: #333;
  word-break: break-word;
}

.eml-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.eml-body-text {
  flex: 1;
  padding: 16px;
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #222;
  background: #fff;
}

.doc-preview-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(106,169,255,0.6);
  animation: preview-pulse 1.2s ease-in-out infinite;
}

@keyframes preview-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════
   ADMIN TABS
═══════════════════════════════════════════════════════ */

.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 0 2px;
  margin: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}

.admin-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
}

.admin-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.admin-tab.active {
  color: var(--text);
  border-bottom-color: rgba(106,169,255,0.8);
  background: rgba(106,169,255,0.06);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

/* ───────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────── */

@media (max-width: 760px) {
  .chat-empty-suggestions { grid-template-columns: 1fr; }
  .chat-empty-state { align-items: flex-start; text-align: left; }
}

@media (max-width: 700px) {
  .app-header-inner { align-items: flex-start; }

  .app-logo {
    height: 28px;
    max-width: 140px;
  }

  .app-brand-text h1 { font-size: 17px; }
  .hero-compact { text-align: left; }

  .main-chat-layout { padding-bottom: 240px; }
  body.page-chat .main-chat-layout { padding-bottom: 240px; }

  .chat-composer-fixed {
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}


/* ═══════════════════════════════════════════════════════
   UPLOAD PAGE (upload.html)
═══════════════════════════════════════════════════════ */

.upload-mode-toggle {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    margin-bottom: 18px;
}
.upload-mode-btn {
    padding: 7px 20px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    transition: background .15s, color .15s;
}
.upload-mode-btn.active {
    background: rgba(106,169,255,0.18);
    color: #7eb8ff;
}
.upload-mode-btn:not(.active):hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}

.upload-pane { display: none; }
.upload-pane.active { display: block; }

.upload-browse-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.upload-browse-name {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sub-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sub-card-header h2 { margin: 0; }

.sub-card-close {
    appearance: none;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.sub-card-close:hover {
    background: rgba(255,106,106,0.12);
    border-color: rgba(255,106,106,0.4);
    color: var(--bad);
}
.sub-card-close:active { transform: scale(0.95); }


/* ═══════════════════════════════════════════════════════
   ADMIN PAGE – legacy telemetry card (tq-*)
═══════════════════════════════════════════════════════ */

.tq-card { border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden; background:rgba(17,26,51,0.5); }

.tq-header { display:grid; grid-template-columns:2fr repeat(4,80px) 28px; gap:8px; align-items:center; padding:10px 14px; cursor:pointer; }
.tq-header:hover { background:rgba(106,169,255,0.06); }
.tq-query { font-weight:600; font-size:13px; word-break:break-word; }
.tq-badges { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.tq-badge { font-size:10px; padding:2px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.tq-badge.info { color:#7eb8ff; border-color:rgba(106,169,255,0.35); }

.tq-metric { text-align:right; }
.tq-metric-val { font-size:14px; font-weight:600; }
.tq-metric-val.warn { color:var(--warn); }
.tq-metric-val.bad  { color:var(--bad);  }
.tq-metric-val.ok   { color:var(--ok);   }
.tq-metric-lbl { font-size:10px; color:var(--muted); }

.tq-chevron { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; transition:transform .2s; }
.tq-chevron.open { transform:rotate(180deg); }

.tq-body { display:none; border-top:1px solid var(--line); background:rgba(9,13,26,0.3); }
.tq-body.open { display:block; }

.tq-block-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.tq-block { background:rgba(9,13,26,0.45); padding:11px 13px; }
.tq-block.wide { grid-column:1/-1; }
.tq-block-title { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:7px; }

.tq-rows { display:flex; flex-direction:column; }
.tq-row { display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; border-bottom:1px solid rgba(35,48,85,0.5); font-size:12px; gap:8px; }
.tq-row:last-child { border-bottom:none; }
.tq-row-key { color:var(--muted); flex-shrink:0; }
.tq-row-val { font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:11px; text-align:right; word-break:break-all; }
.tq-row-val.ok  { color:var(--ok);  }
.tq-row-val.bad { color:var(--bad); }

.tq-chips { display:flex; flex-wrap:wrap; gap:3px; justify-content:flex-end; }
.tq-chip  { font-size:10px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:rgba(9,13,26,0.55); font-family:ui-monospace,Menlo,monospace; }
.tq-chip-path { color:#7eb8ff; border-color:rgba(106,169,255,0.3); background:rgba(106,169,255,0.08); }

.tq-op { display:flex; gap:3px; align-items:center; justify-content:flex-end; }
.tq-op-badge { font-size:10px; padding:1px 6px; border-radius:999px; border:1px solid rgba(106,169,255,0.3); color:#7eb8ff; background:rgba(106,169,255,0.08); font-weight:600; }
.tq-op-txt   { font-size:10px; color:var(--muted); }

.tq-entity-counts { display:flex; gap:5px; justify-content:flex-end; align-items:baseline; font-size:11px; }
.tq-entity-counts .n { font-weight:600; color:var(--text); font-family:ui-monospace,Menlo,monospace; }
.tq-entity-counts .l { color:var(--muted); }
.tq-entity-counts .s { color:var(--line); }

.tq-funnel { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.tq-funnel-row { display:grid; grid-template-columns:140px 1fr 32px; align-items:center; gap:8px; }
.tq-funnel-lbl { color:var(--muted); text-align:right; font-size:11px; }
.tq-funnel-track { background:rgba(255,255,255,0.07); border-radius:4px; height:13px; overflow:hidden; }
.tq-funnel-fill  { height:100%; border-radius:4px; transition:width .35s ease; }
.tq-funnel-num   { font-size:11px; font-weight:600; font-family:ui-monospace,Menlo,monospace; }
.tq-funnel-axis  { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:3px; padding-left:148px; }
.tq-recall       { display:flex; align-items:center; gap:8px; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); font-size:11px; }
.tq-recall-lbl   { color:var(--muted); }
.tq-recall-val   { font-weight:600; color:var(--warn); }
.tq-recall-hint  { color:var(--muted); }

.tq-plan-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:8px 13px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); user-select:none; background:rgba(9,13,26,0.45); }
.tq-plan-toggle:hover { background:rgba(106,169,255,0.04); color:var(--text); }
.tq-plan-body { display:none; padding:10px 13px 12px; border-top:1px solid var(--line); background:rgba(9,13,26,0.3); }
.tq-plan-body.open { display:block; }

.tq-terms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.tq-term { background:rgba(9,13,26,0.45); padding:8px 13px; }
.tq-term-lbl { font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.04em; margin-bottom:2px; }
.tq-term-val { font-size:12px; font-family:ui-monospace,Menlo,monospace; color:var(--text); }

.tq-col-header { display:grid; grid-template-columns:2fr repeat(4,80px) 28px; gap:8px; padding:6px 14px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.tq-col-header span:not(:first-child) { text-align:right; }

.tq-egate-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; margin-top:10px; padding:6px 10px; background:rgba(9,13,26,0.55); border:1px solid var(--line); border-radius:8px; font-size:11px; color:var(--muted); user-select:none; }
.tq-egate-toggle:hover { color:var(--text); background:rgba(106,169,255,0.06); }
.tq-egate-summary { display:flex; gap:10px; align-items:center; }
.tq-egate-kept    { color:var(--ok);  font-weight:600; font-size:11px; }
.tq-egate-dropped { color:var(--bad); font-weight:600; font-size:11px; }
.tq-egate-body { display:none; margin-top:4px; padding:8px 10px; background:rgba(9,13,26,0.45); border:1px solid var(--line); border-radius:8px; }
.tq-egate-body.open { display:block; }
.tq-egate-row { display:flex; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px solid rgba(35,48,85,0.4); font-size:11px; flex-wrap:wrap; }
.tq-egate-row:last-child { border-bottom:none; }
.tq-egate-src     { color:var(--text); font-family:ui-monospace,Menlo,monospace; font-size:11px; flex:1; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tq-egate-arrow   { color:var(--muted); flex-shrink:0; }
.tq-egate-verdict { flex-shrink:0; font-weight:600; font-size:11px; }
.tq-egate-verdict.kept    { color:var(--ok); }
.tq-egate-verdict.dropped { color:var(--bad); }
.tq-egate-reason  { color:var(--muted); font-size:10px; flex-shrink:0; }

.tq-list-toggle { font-size:11px; color:var(--muted); cursor:pointer; padding:4px 0 2px; display:inline-block; user-select:none; }
.tq-list-toggle:hover { color:var(--text); }

.tq-candidate-origins { margin-top:10px; }
.tq-candidate-origins-title { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.tq-origin-row  { display:flex; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px solid rgba(35,48,85,0.4); font-size:11px; flex-wrap:wrap; }
.tq-origin-row:last-child { border-bottom:none; }
.tq-origin-src  { color:var(--text); font-family:ui-monospace,Menlo,monospace; font-size:11px; flex:1; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tq-origin-tags { display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.tq-origin-tag  { font-size:10px; padding:1px 6px; border-radius:999px; border:1px solid rgba(106,169,255,0.3); color:#7eb8ff; background:rgba(106,169,255,0.08); font-family:ui-monospace,Menlo,monospace; }

@media(max-width:700px) {
    .tq-col-header { display:none; }
}

/* ═══════════════════════════════════════════════════════
   ADMIN PAGE – pipeline view (pv-*)
═══════════════════════════════════════════════════════ */

.pv-card { border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden; background:rgba(17,26,51,0.5); }
.pv-card-hdr { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; cursor:pointer; }
.pv-card-hdr:hover { background:rgba(106,169,255,0.06); }
.pv-card-hdr-left { flex:1; min-width:0; }
.pv-actor { display:flex; align-items:center; margin-bottom:3px; }
.pv-actor-id { font-size:12px; font-weight:400; color:var(--muted); }
.pv-query { font-weight:600; font-size:13px; word-break:break-word; }
.pv-badges { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.pv-badge { font-size:10px; padding:2px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.pv-badge-info { color:#7eb8ff; border-color:rgba(106,169,255,0.35); }
.pv-kpis { display:flex; gap:16px; align-items:baseline; flex-shrink:0; }
.pv-kpi { text-align:right; }
.pv-kpi-val { font-size:14px; font-weight:600; }
.pv-kpi-lbl { font-size:10px; color:var(--muted); display:block; }
.pv-ok   { color:var(--ok); }
.pv-bad  { color:var(--bad); }
.pv-warn { color:var(--warn); }
.pv-hdr-chev { color:var(--muted); font-size:12px; text-align:center; transition:transform .2s; }
.pv-hdr-chev.open { transform:rotate(180deg); }
.pv-pipeline { display:none; padding:8px 10px 10px; border-top:1px solid var(--line); background:rgba(9,13,26,0.2); }
.pv-pipeline.open { display:block; }
.pv-connector { display:flex; justify-content:center; height:14px; align-items:center; }
.pv-connector::after { content:''; display:block; width:1px; height:100%; background:var(--line); }
.pv-stage { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(9,13,26,0.45); }
.pv-stage-hdr { display:flex; align-items:center; justify-content:space-between; padding:7px 11px; cursor:pointer; user-select:none; background:rgba(17,26,51,0.4); }
.pv-stage-hdr:hover { background:rgba(106,169,255,0.06); }
.pv-stage-label { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--text); }
.pv-stage-num { font-size:10px; color:var(--muted); font-weight:400; }
.pv-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pv-dot-ok   { background:var(--ok);   box-shadow:0 0 0 1px rgba(101,255,179,0.3); }
.pv-dot-bad  { background:var(--bad);  box-shadow:0 0 0 1px rgba(255,106,106,0.3); }
.pv-dot-warn { background:var(--warn); box-shadow:0 0 0 1px rgba(255,209,102,0.3); }
.pv-dot-info { background:#7eb8ff;     box-shadow:0 0 0 1px rgba(126,184,255,0.3); }
.pv-stage-summary { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; font-size:11px; }
.pv-muted { color:var(--muted); font-size:11px; }
.pv-chev  { font-size:10px; color:var(--muted); transition:transform .15s; flex-shrink:0; }
.pv-chev.open { transform:rotate(180deg); }
.pv-stage-body { display:none; padding:9px 11px; border-top:1px solid var(--line); }
.pv-stage-body.open { display:block; }
.pv-kv-grid { display:grid; grid-template-columns:auto 1fr; gap:3px 14px; align-items:center; }
.pv-kv-key { color:var(--muted); font-size:11px; white-space:nowrap; }
.pv-kv-val { font-size:11px; text-align:right; }
.pv-val     { font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:11px; }
.pv-val.pv-ok  { color:var(--ok);  }
.pv-val.pv-bad { color:var(--bad); }
.pv-chips { display:flex; flex-wrap:wrap; gap:3px; justify-content:flex-end; }
.pv-chip  { font-size:10px; padding:1px 6px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:rgba(9,13,26,0.55); font-family:ui-monospace,Menlo,monospace; }
.pv-chip-ok   { color:var(--ok);   border-color:rgba(101,255,179,0.35);  background:rgba(101,255,179,0.08); }
.pv-chip-bad  { color:var(--bad);  border-color:rgba(255,106,106,0.35);  background:rgba(255,106,106,0.08); }
.pv-chip-warn { color:var(--warn); border-color:rgba(255,209,102,0.35);  background:rgba(255,209,102,0.08); }
.pv-chip-path { color:#7eb8ff; border-color:rgba(106,169,255,0.3); background:rgba(106,169,255,0.08); }
.pv-sep { border-top:1px solid var(--line); margin:8px 0; }
.pv-sub-title { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
.pv-funnel { margin-bottom:4px; }
.pv-funnel-row { display:grid; grid-template-columns:130px 1fr 28px; align-items:center; gap:8px; margin-bottom:5px; }
.pv-fl { color:var(--muted); font-size:11px; text-align:right; }
.pv-ft { background:rgba(255,255,255,0.07); border-radius:3px; height:11px; overflow:hidden; }
.pv-ff { height:100%; border-radius:3px; }
.pv-fn { font-size:11px; font-weight:600; font-family:ui-monospace,Menlo,monospace; }
.pv-egate-row { display:flex; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px solid rgba(35,48,85,0.4); font-size:11px; flex-wrap:wrap; }
.pv-egate-row:last-child { border-bottom:none; }
.pv-egate-src  { flex:1; font-family:ui-monospace,Menlo,monospace; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); min-width:0; }
.pv-egate-kept { color:var(--ok);  font-weight:600; flex-shrink:0; font-size:11px; }
.pv-egate-drop { color:var(--bad); font-weight:600; flex-shrink:0; font-size:11px; }
.pv-egate-rsn  { color:var(--muted); font-size:10px; flex-shrink:0; }
.pv-origin-row { display:flex; align-items:baseline; gap:8px; padding:2px 0; font-size:11px; flex-wrap:wrap; }
.pv-origin-src { flex:1; font-family:ui-monospace,Menlo,monospace; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); min-width:0; }
.pv-terms { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pv-term  { background:rgba(9,13,26,0.55); border-radius:7px; padding:6px 9px; }
.pv-term-l { font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.04em; margin-bottom:2px; text-transform:uppercase; }
.pv-term-v { font-size:11px; font-family:ui-monospace,Menlo,monospace; color:var(--text); word-break:break-word; }

@media(max-width:700px) {
    .pv-kpis { display:none; }
    .pv-terms { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════
   AUTOFILL — Browser-Autofill-Gelb unterdrücken
═══════════════════════════════════════════════════════ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 999px rgba(9, 13, 26, 0.95) inset !important;
    box-shadow: 0 0 0 999px rgba(9, 13, 26, 0.95) inset !important;
    -webkit-text-fill-color: #e8eefc !important;
    caret-color: #e8eefc;
    border-color: var(--line) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ═══════════════════════════════════════════════════════
   UPLOAD — Rollen-Auswahl
═══════════════════════════════════════════════════════ */

.roles-fieldset {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0;
}

.roles-legend {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    padding: 0 6px;
}

.roles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(9, 13, 26, 0.45);
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

.role-chip input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #7eb8ff;
    cursor: pointer;
    flex-shrink: 0;
}

.role-chip:has(input:checked) {
    border-color: rgba(106, 169, 255, 0.55);
    background: rgba(106, 169, 255, 0.12);
    color: #b8d4ff;
}

.dir-access-restricted {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    border-radius: 10px;
    background: rgba(255, 209, 102, 0.06);
    color: var(--warn);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════
   TELEMETRY — Domain Gate badges
═══════════════════════════════════════════════════════ */

.pv-badge-gate-ok {
    color: var(--ok);
    border-color: rgba(101, 255, 179, 0.4);
    background: rgba(101, 255, 179, 0.08);
    font-weight: 600;
}

.pv-badge-gate-warn {
    color: var(--warn);
    border-color: rgba(255, 209, 102, 0.4);
    background: rgba(255, 209, 102, 0.08);
    font-weight: 600;
}

.pv-badge-arrow {
    color: var(--muted);
    border-color: transparent;
    background: transparent;
    padding: 2px 2px;
    font-size: 11px;
}