/* ============================================================
   Jarvis Control Center — 1:1-Nachbau der Originalreferenz.
   Nur neue Klassen (cc-*, dash-*, dcb-*), keine bestehenden Chat-/
   Login-Regeln aus styles.css duplizieren oder inhaltlich aendern.
   Sidebar-Feinschliff geschieht ausschliesslich additiv in denselben
   Media-Queries wie styles.css - styles.css selbst bleibt unveraendert.
   ============================================================ */

:root {
  /* Navy-Farbskala aus design-reference/jarvis-control-center-original.png
     abgeleitet (visuell abgeschaetzt): Canvas/Sidebar deutlich wahrnehmbar
     dunkelblau statt schwarz, Cards spuerbar heller, Innenflaechen/Borders
     nochmal eine Stufe heller - durchgehend blaue statt neutralgraue Toene. */
  --cc-bg: #0a0e1c;            /* Level 0: Canvas / Sidebar */
  --cc-bg-elev: #141c33;       /* Level 2: normale Cards */
  --cc-bg-elev-2: #1b2440;     /* Level 4: Innenflaechen / Instrumentenfelder / Icon-Badges */
  --cc-border: #2a3660;        /* Border / Separator */
  --cc-border-strong: #37457a;
  --cc-gold: #d4a75a;
  --cc-gold-soft: rgba(212, 167, 90, 0.16);
  --cc-text: #f4f6fb;
  --cc-text-dim: #8f97ac;
  --cc-text-faint: #5c6684;
  --cc-green: #35d399;
  --cc-red: #ef5350;
  --cc-cyan: #4fb8e0;
}

.app { background: var(--cc-bg); }

/* ---------- Icons ---------- */
.cc-icon { display: block; }
.nav-ic[data-icon], .cc-kpi-icon, .cc-agent-icon, .cc-instrument-icon,
.cc-panel-head-icon, .dcb-icon[data-icon], .cc-greet-icon {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Sidebar / Drawer ---------- */
.bottom-nav {
  background: var(--cc-bg);
  border-color: var(--cc-border);
  color: var(--cc-text-dim);
}
.nav-item { color: var(--cc-text-dim); border: 1px solid transparent; }

.nav-brand { padding: 6px 14px 20px; display: flex; flex-direction: column; gap: 4px; }
.nav-brand-main { font-size: 15.5px; font-weight: 800; letter-spacing: 0.2em; color: var(--cc-text); }
.nav-brand-sub {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-gold);
  padding-bottom: 8px; border-bottom: 1px solid var(--cc-border);
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cc-text-faint); padding: 12px 14px 5px;
}
.nav-item--disabled {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; font-size: 13px; color: var(--cc-text-faint); cursor: default;
  border: 1px solid transparent;
}
.nav-soon {
  margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--cc-bg-elev-2); border: 1px solid var(--cc-border); color: var(--cc-text-faint);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.nav-spacer { flex: 1 1 auto; }

.nav-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--cc-border);
}
.nav-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cc-gold-soft); color: var(--cc-gold); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-user-info { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.nav-user-name { font-size: 12.5px; font-weight: 650; color: var(--cc-text); }
.nav-user-role { font-size: 10.5px; color: var(--cc-text-dim); }
.nav-user-online { display: inline-flex; align-items: center; gap: 4px; color: var(--cc-green); }
.cc-status-dot--online { background: var(--cc-green); }
.nav-user .logout-btn { position: static; top: auto; right: auto; width: 28px; height: 28px; }
.nav-tagline { padding: 10px 14px 4px; font-size: 11px; font-style: italic; color: var(--cc-text-faint); line-height: 1.4; }

/* ---------- Hamburger + Overlay ---------- */
.nav-toggle {
  display: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--cc-border); background: var(--cc-bg-elev-2); color: var(--cc-text-dim);
  align-items: center; justify-content: center; cursor: pointer; margin-right: 4px; flex: 0 0 auto;
}
.nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 45; }

@media (max-width: 859.98px) {
  :root { --nav-h: 0px; }
  .nav-toggle { display: inline-flex; }
  .bottom-nav {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 250px;
    flex-direction: column; align-items: stretch;
    transform: translateX(-100%); transition: transform 0.25s ease;
    z-index: 50; overflow-y: auto;
    padding: calc(var(--safe-top) + 14px) 8px calc(var(--safe-bottom) + 14px);
    border-top: none; border-right: 1px solid var(--cc-border);
  }
  .bottom-nav.nav-open { transform: translateX(0); }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 13.5px; padding: 9px 11px; border-radius: 6px; }
  .nav-item.active { background: var(--cc-gold-soft); color: var(--cc-gold); border-color: var(--cc-gold); }
}

@media (min-width: 860px) {
  .bottom-nav { padding-top: 22px; display: flex; flex-direction: column; gap: 1px; }
  .bottom-nav::before, .bottom-nav::after { content: "" !important; }
  .nav-item { padding: 8px 12px; border-radius: 7px; }
  .nav-item.active { background: rgba(205, 164, 95, 0.09); color: var(--cc-gold); border-color: var(--cc-gold); }
  .nav-item.active .nav-ic { filter: none; }
}

/* ============================================================
   Dashboard-Inhalt
   ============================================================ */
.view-dashboard, #view-travel { overflow-y: auto; }

.dash-inner.cc-inner {
  max-width: 1760px;
  margin: 0;
  padding: 11px 28px calc(var(--nav-h) + var(--safe-bottom) + 150px) 26px;
}
@media (max-width: 859.98px) {
  .dash-inner.cc-inner { padding: 16px 16px calc(var(--nav-h) + var(--safe-bottom) + 170px); }
}

.cc-card, .cc-panel {
  background: var(--cc-bg-elev);
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  padding: 8px 12px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.dash-card-title { font-size: 13px; font-weight: 650; color: var(--cc-text); }
.dash-sub { font-size: 12px; color: var(--cc-text-dim); line-height: 1.4; }

.cc-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cc-panel-head-icon { color: var(--cc-text-dim); flex: 0 0 auto; }
.cc-panel-head .dash-card-title { flex: 1 1 auto; }
.cc-tag-soft {
  font-size: 10px; color: var(--cc-text-faint); background: var(--cc-bg-elev-2);
  border: 1px solid var(--cc-border); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.cc-live-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--cc-text-faint);
}
.cc-panel-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 12px; color: var(--cc-gold); cursor: default;
}

.cc-pill {
  font-size: 10.5px; color: var(--cc-text-faint);
  background: var(--cc-bg-elev-2); border: 1px solid var(--cc-border);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.cc-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-text-faint); flex: 0 0 auto; }
.cc-status-dot--muted { background: var(--cc-text-faint); }
.cc-status-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cc-text-faint); }

.dash-btn {
  align-self: flex-start; margin-top: 8px;
  background: var(--cc-gold-soft); border: 1px solid var(--cc-gold); color: var(--cc-text);
  font-size: 12.5px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.dash-btn:hover { background: rgba(205, 164, 95, 0.24); }
.dash-btn:active { transform: scale(0.97); }

/* ---------- Header ---------- */
.cc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--cc-border);
}
.cc-header-greet { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.cc-greet-icon { color: var(--cc-gold); flex: 0 0 auto; }
.cc-greeting { font-size: 21px; font-weight: 750; letter-spacing: -0.01em; color: var(--cc-text); }
.cc-subgreeting { font-size: 12px; color: var(--cc-text-dim); margin-top: 1px; }

.cc-header-instruments { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.cc-instrument {
  background: var(--cc-bg-elev); border: 1px solid var(--cc-border); border-radius: 9px;
  padding: 7px 14px; min-width: 190px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.cc-instrument-top { display: flex; align-items: center; gap: 8px; }
.cc-instrument-icon { color: var(--cc-text-faint); flex: 0 0 auto; }
.cc-instrument-label { font-size: 10px; color: var(--cc-text-dim); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.cc-instrument-value { font-size: 12.5px; font-weight: 650; color: var(--cc-text); margin-left: auto; white-space: nowrap; }
.cc-mini-bar { height: 4px; border-radius: 999px; background: var(--cc-bg-elev-2); margin-top: 6px; overflow: hidden; }
.cc-mini-bar-fill { height: 100%; background: var(--cc-gold); border-radius: 999px; }

.cc-header-datetime {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; position: relative; padding-right: 30px;
}
.cc-header-date { font-size: 11.5px; color: var(--cc-text-dim); }
.cc-header-time { font-size: 19px; font-weight: 650; color: var(--cc-text); font-variant-numeric: tabular-nums; }
.cc-bell-btn {
  position: absolute; top: -4px; right: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--cc-border); background: var(--cc-bg-elev); color: var(--cc-text-dim);
  display: inline-flex; align-items: center; justify-content: center; cursor: default;
}

@media (max-width: 900px) {
  .cc-header { flex-direction: column; align-items: stretch; }
  .cc-header-instruments { width: 100%; flex-wrap: wrap; }
  .cc-instrument { flex: 1 1 100%; }
  .cc-instrument-top { flex-wrap: wrap; row-gap: 3px; }
  .cc-instrument-value { margin-left: auto; }
  .cc-header-datetime {
    flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0; gap: 10px;
  }
  .cc-header-date { order: 1; }
  .cc-header-time { order: 2; }
  .cc-bell-btn { position: static; order: 3; margin-left: auto; }
}

/* ---------- KPI-Reihe (4 Karten) ---------- */
.cc-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; margin-bottom: 7px; }
.cc-kpi { background: var(--cc-bg-elev); border: 1px solid var(--cc-border); border-radius: 10px; padding: 9px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.035); }
.cc-kpi-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.cc-kpi-icon {
  width: 26px; height: 26px; border-radius: 7px; background: var(--cc-bg-elev-2);
  color: var(--cc-text-dim); flex: 0 0 auto;
}
.cc-kpi-label { font-size: 12px; color: var(--cc-text-dim); }
.cc-kpi-value { font-size: 17px; font-weight: 700; color: var(--cc-text); }
.cc-kpi-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cc-text-faint); margin-top: 2px; }

/* ---------- Hauptbereich: Markt | Termine | (Agenten + Persoenlich) ---------- */
.cc-main-row { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr; gap: 9px; margin-bottom: 7px; align-items: stretch; }
.cc-right-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.cc-market, .cc-appointments { display: flex; flex-direction: column; min-width: 0; }
/* Ohne Marktdatenquelle bewusst NICHT auf die Hoehe der Nachbarspalten strecken
   (D4.6.1) - der Bereich bleibt kompakt statt eine grosse leere Flaeche zu zeigen.
   Sobald echte Marktdaten/Charts existieren, kann diese Regel entfallen. */
.cc-market { align-self: start; }
.cc-agents, .cc-personal { flex: 1 1 auto; min-width: 0; }

.cc-market-headline { font-size: 13.5px; font-weight: 650; color: var(--cc-text); margin-bottom: 3px; }
.cc-market-canvas {
  flex: 0 0 auto; height: 50px; margin: 6px 0;
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(var(--cc-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--cc-border) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center;
  background-color: rgba(255, 255, 255, 0.012);
  border: 1px dashed var(--cc-border); border-radius: 7px;
}
.cc-market-canvas-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--cc-text-faint);
  background: var(--cc-bg-elev); border: 1px solid var(--cc-border);
  padding: 6px 12px; border-radius: 999px;
}
.cc-market-canvas-label .cc-icon { opacity: 0.8; }
.cc-market-canvas--small { min-height: 24px; max-height: 40px; margin: 6px 0; }
.cc-market-canvas--small .cc-market-canvas-label { display: none; }

.cc-market-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.cc-market-slot {
  display: flex; flex-direction: column; gap: 3px; padding: 7px 9px;
  background: var(--cc-bg-elev-2); border: 1px solid var(--cc-border); border-radius: 8px;
}
.cc-market-slot-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-text-faint); }
.cc-market-slot-val { font-size: 11px; color: var(--cc-text-dim); }
.cc-spark { height: 18px; margin-top: 2px; border-bottom: 1px dashed var(--cc-border); }

.cc-appt-list { list-style: none; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; margin-bottom: 3px; }
.cc-appt-row { display: flex; align-items: flex-start; gap: 9px; }
.cc-appt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-text-faint); margin-top: 6px; flex: 0 0 auto; }
.cc-appt-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-appt-meta { font-size: 10.5px; color: var(--cc-text-faint); }
.cc-appt-title { font-size: 12.5px; color: var(--cc-text); line-height: 1.35; }
.cc-appt-text { font-size: 12px; color: var(--cc-text-dim); }

.cc-agent-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 1px; min-width: 0; }
.cc-agent-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-bottom: 1px solid var(--cc-border); min-width: 0; }
.cc-agent-row:last-child { border-bottom: none; padding-bottom: 0; }
.cc-agent-icon {
  width: 23px; height: 23px; border-radius: 6px; background: var(--cc-bg-elev-2);
  color: var(--cc-text-dim); flex: 0 0 auto;
}
.cc-agent-info { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-width: 0; }
.cc-agent-name { font-size: 12px; color: var(--cc-text); }
/* Technische Registry-Beschreibungen bewusst zurueckhaltend: eine Zeile,
   Rest per Ellipsis + title-Tooltip - Daten bleiben unveraendert, nur
   weniger dominant dargestellt (D4.6). */
.cc-agent-role {
  font-size: 10px; color: var(--cc-text-faint);
  display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cc-personal-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 1px; }
.cc-personal-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12px; color: var(--cc-text); border-bottom: 1px solid var(--cc-border); }
.cc-personal-row:last-child { border-bottom: none; padding-bottom: 0; }
.cc-personal-row .cc-agent-icon { width: 21px; height: 21px; }
.cc-personal-row .cc-pill { margin-left: auto; }

@media (max-width: 1280px) {
  .cc-main-row { grid-template-columns: 1.5fr 1fr; }
  .cc-right-col { grid-column: 1 / -1; flex-direction: row; }
  .cc-right-col .cc-agents, .cc-right-col .cc-personal { flex: 1 1 0; }
}
@media (max-width: 900px) {
  .cc-main-row { grid-template-columns: 1fr; }
  .cc-right-col { flex-direction: column; }
}

/* ---------- Untere Module: Portfolio | Unternehmen | Immobilien ---------- */
.cc-modules-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; margin-bottom: 7px; }
.cc-portfolio-value { font-size: 18px; font-weight: 700; color: var(--cc-text); margin-bottom: 1px; }
.cc-module-sublist { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 5px; }
.cc-module-sublist li { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--cc-text); padding: 4px 0; border-bottom: 1px solid var(--cc-border); }
.cc-module-sublist li:last-child { border-bottom: none; padding-bottom: 0; }

/* Unternehmen: kompakte, auf PPC/Social vorbereitete Markenuebersicht (D4.6) */
.cc-company-hint { margin: 1px 0 4px; }
.cc-company-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.cc-company-row { padding: 4px 0; border-bottom: 1px solid var(--cc-border); }
.cc-company-row:last-child { border-bottom: none; padding-bottom: 0; }
.cc-company-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cc-company-name { font-size: 12px; font-weight: 600; color: var(--cc-text); }
.cc-company-metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 13px; }
.cc-company-metric { display: flex; align-items: baseline; gap: 5px; font-size: 10.5px; }
.cc-company-metric-label { color: var(--cc-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.cc-company-metric-val { color: var(--cc-text-dim); }

/* ---------- Aktivitaeten / Log / Zitat ---------- */
.cc-log-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 9px; margin-bottom: 7px; }
.cc-log-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cc-log-row-item { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; }
.cc-log-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-text-faint); margin-top: 6px; flex: 0 0 auto; }
.cc-log-time { color: var(--cc-text-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cc-log-text { color: var(--cc-text-dim); }

.cc-quote-card {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  padding: 12px 15px;
  background:
    linear-gradient(180deg, rgba(7,10,18,0.35) 0%, rgba(7,10,18,0.85) 100%),
    linear-gradient(135deg, #3a2a12 0%, #1c1712 55%, #0b0d14 100%);
  min-height: 64px;
}
.cc-quote-text { font-size: 13px; font-style: italic; color: var(--cc-text); line-height: 1.4; }
.cc-quote-attr { font-size: 11px; color: var(--cc-gold); }

@media (max-width: 900px) {
  .cc-log-row { grid-template-columns: 1fr; }
}

/* ---------- Jarvis Command Bar + inline Quick Actions ---------- */
.dash-command-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-bottom));
  z-index: 15; padding: 8px 12px 10px;
  background: linear-gradient(to top, var(--cc-bg) 75%, transparent);
}
.dcb-outer { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.dcb-row {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
  background: var(--cc-bg-elev); border: 1px solid var(--cc-border); border-radius: 12px;
  padding: 7px 7px 7px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.dcb-icon { color: var(--cc-gold); flex: 0 0 auto; }
.dcb-input { flex: 1 1 auto; background: transparent; border: none; outline: none; color: var(--cc-text); font-size: 15px; padding: 8px 4px; font-family: inherit; }
.dcb-input::placeholder { color: var(--cc-text-faint); }
.dcb-mic, .dcb-send {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cc-text-dim); background: transparent; transition: background .15s, transform .1s;
}
.dcb-mic:hover { background: var(--cc-bg-elev-2); color: var(--cc-text); }
.dcb-send { background: var(--cc-gold); color: #1a1205; }
.dcb-send:active { transform: scale(0.92); }

.dcb-quick-group { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dcb-quick-btn {
  background: var(--cc-bg-elev); border: 1px solid var(--cc-border); color: var(--cc-text-dim);
  font-size: 12.5px; font-weight: 550; padding: 12px 16px; border-radius: 10px;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.dcb-quick-btn:hover { background: var(--cc-gold-soft); border-color: var(--cc-gold); color: var(--cc-text); }

@media (min-width: 860px) {
  .dash-command-bar { left: 232px; bottom: 0; padding: 14px 28px 22px; }
}
@media (max-width: 900px) {
  .dcb-outer { flex-wrap: wrap; }
  .dcb-quick-group { width: 100%; overflow-x: auto; }
}

/* ============================================================
   Reise-Ansicht (D5.0) — gleiche visuelle Sprache wie Dashboard.
   Sendet ausschliesslich ueber js/travel.js -> JarvisAPI.sendMessage
   -> /api/message (bestehender Chat-Pfad, kein neuer Endpunkt hier).
   ============================================================ */
/* Kein schwebender Command-Bar auf dieser Seite (Reise-Ansicht hat ihr eigenes
   Eingabefeld) - der grosse untere Sicherheitsabstand von .dash-inner.cc-inner
   entfaellt hier, hoehere Selektor-Spezifitaet ueberschreibt ihn bewusst. */
.dash-inner.cc-inner.travel-inner { padding-bottom: 14px; }
.travel-inner { height: 100%; display: flex; flex-direction: column; }
.travel-main-row {
  display: grid; grid-template-columns: 1fr 320px; gap: 10px;
  flex: 1 1 auto; min-height: 0;
}
.travel-chat-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.travel-side-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.travel-thread {
  flex: 1 1 auto; min-height: 260px; max-height: 56vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px;
}
.travel-welcome { padding: 18px 6px; }
.travel-welcome-title { font-size: 14.5px; font-weight: 650; color: var(--cc-text); margin-bottom: 3px; }

.travel-msg { display: flex; width: 100%; }
.travel-msg.user { justify-content: flex-end; }
.travel-msg.jarvis { justify-content: flex-start; }
.travel-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; white-space: pre-line; color: var(--cc-text);
}
.travel-msg.user .travel-bubble {
  background: var(--cc-gold-soft); border: 1px solid var(--cc-gold); border-bottom-right-radius: 4px;
}
.travel-msg.jarvis .travel-bubble {
  background: var(--cc-bg-elev-2); border: 1px solid var(--cc-border); border-bottom-left-radius: 4px;
}
.travel-msg-heading { display: block; color: var(--cc-gold); font-size: 11.5px; letter-spacing: 0.03em; margin-top: 6px; }
.travel-msg-heading:first-child { margin-top: 0; }

.travel-input-row {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: var(--cc-bg-elev-2); border: 1px solid var(--cc-border); border-radius: 11px;
  padding: 5px 5px 5px 14px;
}
.travel-input { flex: 1 1 auto; background: transparent; border: none; outline: none; color: var(--cc-text); font-size: 13.5px; padding: 8px 2px; font-family: inherit; }
.travel-input::placeholder { color: var(--cc-text-faint); }
.travel-send-btn { margin-top: 0; align-self: center; }
.travel-send-btn:disabled { opacity: 0.5; cursor: default; }

.travel-status-headline { font-size: 16px; font-weight: 700; color: var(--cc-text); margin-bottom: 4px; }
.travel-status-line { font-size: 12.5px; color: var(--cc-text-dim); margin-bottom: 3px; }
.travel-status-missing { font-size: 11.5px; color: var(--cc-gold); margin-top: 6px; }
.travel-status-last { margin-top: 8px; }

@media (max-width: 1100px) {
  .travel-main-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .travel-thread { max-height: 46vh; }
}

/* ---------- Mobile: KPI 2-spaltig ---------- */
@media (max-width: 620px) {
  .cc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}