/* ======================================================================
   VergabeAssist – Corporate Design & Standard Styles (v1)
   File: va-design.css
   Scope: global tokens + components + projekt.html chat pattern
   Author: ChatGPT (GovTech UI System)
   ====================================================================== */

/* ---------- Base / Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; }
img, video { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
:where(a) { color: inherit; }

/* ---------- Design Tokens (Light) ---------- */
:root{
  /* Brand */
  --color-primary: #0077B6;
  --color-accent:  #009EE1;

  /* Neutrals */
  --n-50:#F8FAFC;
  --n-100:#F1F5F9;
  --n-200:#E2E8F0;
  --n-300:#CBD5E1;
  --n-400:#94A3B8;
  --n-500:#64748B;
  --n-600:#475569;
  --n-700:#334155;
  --n-800:#1E293B;
  --n-900:#0F172A;

  /* Semantic */
  --color-success:#10B981;
  --color-warning:#F59E0B;
  --color-danger:#D32F2F;
  --color-info:#0CA5E9;

  /* On-Color */
  --on-primary:#FFFFFF;
  --on-surface:#0F172A;

  /* Typography */
  --font-size-base: 16px;
  --lh-base: 1.55;
  --fs-xxs: .75rem;   /* 12 */
  --fs-xs:  .8125rem; /* 13 */
  --fs-sm:  .875rem;  /* 14 */
  --fs-md:  1rem;     /* 16 */
  --fs-lg:  1.125rem; /* 18 */
  --fs-xl:  1.25rem;  /* 20 */
  --fs-2xl: 1.5rem;   /* 24 */
  --fs-3xl: 1.875rem; /* 30 */

  /* Spacing (4/8/12/16/24/32) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.10);
  --shadow-lg: 0 6px 22px rgba(0,0,0,.15);

  /* Focus */
  --focus-ring: 2px solid var(--color-accent);
  --focus-glow: 0 0 0 4px rgba(0,158,225,.35);

  /* Layout helpers */
  --container-w: 1200px;
  --edge: 2rem;

  /* Chat-specific */
  --chat-inner-w: 80%;
  --chat-max-w: 72ch;
}
/* ---------- Dark Theme ---------- */
[data-theme="dark"]{
  --on-surface:#F8FAFC;

  --n-50:#0F172A;
  --n-100:#0F172A;
  --n-200:#1E293B;
  --n-300:#334155;
  --n-400:#475569;
  --n-500:#64748B;
  --n-600:#94A3B8;
  --n-700:#CBD5E1;
  --n-800:#E2E8F0;
  --n-900:#F8FAFC;

  --color-primary:#4AA9FF;
  --color-accent:#4AD4FF;
  --color-success:#34D399;
  --color-warning:#FBBF24;
  --color-danger:#EF4444;
  --color-info:#38BDF8;
}
@media (max-width: 900px){
  :root{ --chat-inner-w: 94%; }
}

/* ---------- Utilities ---------- */
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.container{ width:min(100%, var(--container-w)); margin-inline:auto; padding-inline:clamp(8px,2vw,16px); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--focus-ring); box-shadow: var(--focus-glow); border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius: var(--r-2); border:none;
  padding: .6rem 1rem; font-weight:600; cursor:pointer;
}
.btn-primary{ background: var(--color-primary); color: var(--on-primary); }
.btn-secondary{ background: var(--color-accent); color: var(--on-primary); }
.btn-ghost{ background: transparent; color: var(--color-primary); border:1px solid var(--color-primary); }
.btn-danger{ background: var(--color-danger); color: var(--on-primary); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-icon{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--r-2); background: var(--n-100); border:1px solid var(--n-200); color: var(--n-700);
}

/* ---------- Inputs ---------- */
.input, textarea, select{
  width:100%; border:1px solid var(--n-300); border-radius: var(--r-2);
  background: var(--n-50); color: var(--on-surface); padding: .65rem .75rem;
}
.input:focus, textarea:focus, select:focus{ outline: var(--focus-ring); box-shadow: var(--focus-glow); border-color: var(--color-accent); }

/* ---------- Chips & Badges ---------- */
.chips{ display:flex; flex-wrap:wrap; gap: var(--space-2); }
.chip{ padding: .25rem .6rem; border-radius: 999px; background: var(--n-200); color: var(--n-800); font-weight:600; font-size: .9rem; }
.badge{ padding: .15rem .5rem; border-radius: 6px; color:#fff; font-weight:700; font-size: .8rem; }
.badge-info{ background: var(--color-info); }
.badge-warning{ background: var(--color-warning); }
.badge-danger{ background: var(--color-danger); }
.badge-success{ background: var(--color-success); }

/* ======================================================================
   Chat – projekt.html Pattern
   ====================================================================== */
.project-page{ --edge: 2rem; }
.project-page .project-hero{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline: var(--edge);
}
.project-page .project-title{ grid-column:2; justify-self:center; margin:.2rem 0 .5rem; }
.project-page .breadcrumb-nav-top{ grid-column:3; justify-self:end; font-size:.95rem; color: var(--n-500); }
@media (max-width: 880px){
  .project-page .project-hero{ grid-template-columns:1fr; }
  .project-page .project-title, .project-page .breadcrumb-nav-top{ grid-column:1; justify-self:start; }
}

.project-page .project-main{ width:100vw; max-width:none; padding-inline: var(--edge); }

/* Container */
.project-page .chat-container{
  width:100%; margin: 0 auto 2rem;
  background: linear-gradient(180deg, #18324b 0%, #1b3956 100%);
  border-radius: var(--r-4); box-shadow: var(--shadow-lg); color: var(--on-primary);
  overflow: clip;
}
.project-page .chat-inner{ display:flex; flex-direction:column; padding: 10px 12px; height: var(--chat-viewport-h, 72vh); }


@media (max-width: 1100px){
  .project-page .chat-inner > .chat-topbar,
  .project-page .chat-inner > .chat-messages,
  .project-page .chat-inner > .chat-input-bar{ width: 100%; }
}

/* Topbar */
.project-page .chat-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background: #F4F9FF; color:#0b2941; border:1px solid #DBE6F3;
  position: sticky; top: 0; z-index: 2; padding:.7rem 1rem;
}
.project-page .chat-topbar-title{ display:flex; align-items:center; gap:.5rem; }
.project-page .info-btn{ width:22px; height:22px; border-radius:50%; border:1px solid #b3d8fa; background:#e9f5ff; color:#176fa6; font-weight:800; }
.project-page .info-popover[hidden]{ display:none!important; }
.project-page .info-popover{ position:absolute; z-index:3000; background:#fff; border:1px solid #c4d8ef; box-shadow:0 8px 28px rgba(23,111,166,.11); border-radius:12px; padding:.9em 1em; max-width:360px; width:min(560px,92vw); }

/* Dateibubbles */
.project-page .filebubble-row{ margin:.45rem 0 0; display:flex; flex-wrap:wrap; gap:.55rem; }
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1; border-radius:14px; padding:.55rem .7rem; display:inline-flex; align-items:center; gap:.5rem;
}

/* Verlauf */
.project-page .chat-messages{
  flex:1 1 auto; overflow:auto; padding: 12px 14px 16px;
  background:#F4F9FF; border:1px solid #DBE6F3; border-radius: var(--r-3);
  scrollbar-gutter: stable both-edges;
}
.project-page .message{ width:100%; border-radius:14px; margin:.5rem 0; padding:.9rem 1rem; }
.project-page .message.user{ background:#e9f4ff; color:#0a2c44; }
.project-page .message.assistant{ background:#ffffff; color:#0a2538; }
.project-page .message.assistant pre,
.project-page .message.assistant code{
  background:#f6f8fb; color:#0a2538; border:1px solid #dbe6f3; border-radius:8px; padding:.45rem .55rem;
}

/* Eingabebereich – EIN Feld mit Icons innen (unten) */
.project-page .chat-input-bar{ background:transparent; border:0; padding:0; box-shadow:none; position: sticky; bottom: .2rem; z-index: 2; }
.project-page .chat-input-wrap{
  position: relative; display:flex; align-items:stretch;
  background:#F4F9FF; border:1px solid #DBE6F3; border-radius:16px; padding:.4rem .6rem;
}
.project-page #chatInput{
  width:100%; min-height:96px; max-height:45vh; resize:none;
  border:none; outline:none; background:transparent; color:#0b2941;
  padding: .8rem 108px .8rem 46px; /* Platz für Icons */
}
.project-page .upload-inside{
  position:absolute; left:8px; bottom:8px; width:34px; height:34px;
  border-radius:10px; border:1px solid #DBE6F3; background:transparent; color:#476887;
  display:inline-flex; align-items:center; justify-content:center;
}
.project-page .upload-inside:hover{ background:#e8f3ff; color:#0a2c44; }
.project-page .input-actions-right{
  position:absolute; right:8px; bottom:8px; display:flex; gap:.35rem; align-items:center;
}
.project-page .input-actions-right .btn-icon{
  width:38px; height:38px; border-radius:10px; background:transparent; color:#476887; border:1px solid #DBE6F3;
}
.project-page .input-actions-right .btn-icon:hover{ background:#e8f3ff; color:#0a2c44; }
.project-page .input-actions-right .btn-primary{
  padding:.7rem 1rem; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--color-accent) 85%, #DBE6F3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 80%, #fff 0%), var(--color-accent));
  color:#fff; font-weight:700;
}

/* Fragen-Cluster + Chips + Progress (optional) */
.qa-cluster{ background:#fff; border:1px solid #DBE6F3; border-radius:12px; padding: .75rem; margin:.5rem 0; }
.qa-cluster h4{ margin:0 0 .35rem; font-size: var(--fs-lg); color:#0b2941; }
.qa-items{ display:grid; gap:.4rem; }
.qa-item{ display:grid; grid-template-columns: 1fr auto; gap:.5rem; align-items:center; }
.qa-inline{ display:flex; gap:.4rem; align-items:center; }
.qa-inline .chip{ background:#E2E8F0; }

.progress-wrap{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:#476887; margin-top:.3rem; }
.progress-bar{ height:6px; width:100%; background:#E2E8F0; border-radius:999px; position:relative; overflow:hidden; }
.progress-bar > i{ position:absolute; inset:0; width:60%; background: var(--color-primary); border-radius:999px; }

/* Snackbar (global) */
#snackbar{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  align-items: center;
  gap: .75em;
  min-width: 220px;
  max-width: min(90vw, 460px);
  padding: .95em 1.75em;
  border-radius: 999px;
  background: var(--va-snackbar-bg, linear-gradient(120deg, #169cd9 0%, #2bd7b1 100%));
  color: #f7feff;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  z-index: 9999;
  box-shadow: 0 22px 45px rgba(10, 69, 94, .35);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px);
  text-align: center;
  word-break: break-word;
  pointer-events: none;
}

#snackbar::before{
  content: '';
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 0 12px rgba(43,215,177,.8);
  flex-shrink: 0;
}

#snackbar[data-position="bottom"]{
  top: auto;
  bottom: 28px;
}


/* ===== VA Chat: zwingende Overrides, damit das neue Pattern sichtbar wird ===== */

/* Container-Hintergrund + Padding neutralisieren */
.project-page .chat-container{
  background: linear-gradient(180deg, #18324b 0%, #1b3956 100%) !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

/* Innenlayout + Höhe: Chat-Viewport füllt die Seite (Header abgezogen) */
.project-page .chat-inner{
  padding: 10px 12px !important;
  height: calc(100dvh - 96px - 24px) !important; /* 96px ≈ Headerhöhe; bei Bedarf anpassen */
  display: flex !important;
  flex-direction: column !important;
}


/* Topbar sticky + Optik */
.project-page .chat-topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #F4F9FF !important;
  color: #0b2941 !important;
  border: 1px solid #DBE6F3 !important;
  border-radius: 12px !important;
  padding: .7rem 1rem !important;
}

/* Verlaufsbereich: alte max-height entfernen */
.project-page .chat-messages{
  flex: 1 1 auto !important;
  overflow: auto !important;
  max-height: none !important;   /* <- bricht die alte 320px-Grenze */
  min-height: 240px !important;
  background: #F4F9FF !important;
  border: 1px solid #DBE6F3 !important;
  border-radius: 12px !important;
  padding: 12px 14px 16px !important;
  scrollbar-gutter: stable both-edges;
}

/* Eingabeleiste sticky unten */
.project-page .chat-input-bar{
  position: sticky !important;
  bottom: .25rem !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Ein einziges, großes Eingabefeld mit Icons innen */
.project-page .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  background: #F4F9FF !important;
  border: 1px solid #DBE6F3 !important;
  border-radius: 16px !important;
  padding: .4rem .6rem !important;
}
.project-page #chatInput{
  width: 100% !important;
  min-height: 96px !important;
  max-height: 45vh !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #0b2941 !important;
  padding: .8rem 108px .8rem 46px !important; /* Platz für Upload/Mic/Senden */
}
.project-page .upload-inside{
  position: absolute !important; left: 8px; bottom: 8px;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid #DBE6F3; background: transparent; color: #476887;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right{
  position: absolute !important; right: 8px; bottom: 8px;
  display: flex; gap: .35rem; align-items: center;
}
.project-page .input-actions-right .btn-icon{
  width: 38px; height: 38px; border-radius: 10px;
  background: transparent; color: #476887; border: 1px solid #DBE6F3;
}
.project-page .input-actions-right .btn-primary{
  padding: .7rem 1rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 85%, #DBE6F3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 80%, #fff 0%), var(--color-accent));
  color: #fff; font-weight: 700;
}

/* Bubbles */
.project-page .message{ width: 100%; border-radius: 14px; margin: .5rem 0; padding: .9rem 1rem; }
.project-page .message.user{ background: #e9f4ff !important; color: #0a2c44 !important; }
.project-page .message.assistant{ background: #ffffff !important; color: #0a2538 !important; }

/* Mobile: 80% → 94% */
@media (max-width: 900px){
  :root{ --chat-inner-w: 94%; }
}


/* ===== VA Chat Patch v2 ===== */

/* 1) Container: heller, moderner, kein Hart-Weiß */
.project-page .chat-container{
  background: linear-gradient(180deg, #EEF5FB 0%, #E9F2FB 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(3,32,66,.06) !important;
  padding: 0 !important;
}

/* 2) kompakter Hero / weniger Luft */
.project-hero{ margin: .6rem 0 0.4rem !important; }
.project-main{ padding-top: .2rem !important; }

/* 3) Chat-Innenleben: größere Innenbreite (≈ +20%) */
:root{ --chat-inner-w: 90%; }     /* vorher 80% */
@media (max-width: 1100px){ :root{ --chat-inner-w: 94%; } }

.project-page .chat-inner{
  height: var(--chat-viewport-h, calc(100dvh - 108px)) !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
}


/* 4) EIN Block statt 3 Blöcke – gleiche Fläche + Kanten verschmelzen */
.project-page .chat-topbar{
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  background: #F2F7FD !important;              /* leicht getönt, kein Reinweiß */
  color: #0a2c44 !important;
  border: 1px solid #D6E4F3 !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  padding: .7rem 1rem !important;
}
.project-page .chat-messages{
  flex: 1 1 auto !important; overflow: auto !important;
  max-height: none !important; min-height: 240px !important;
  background: #F7FBFF !important;              /* noch heller – aber nicht #fff */
  color: #0a2c44 !important;
  border-left: 1px solid #D6E4F3 !important;
  border-right: 1px solid #D6E4F3 !important;
  /* keine obere/untere Kante, damit es „durchläuft“ */
  border-top: none !important; border-bottom: none !important;
  padding: 14px 16px !important;
}
.project-page .chat-input-bar{
  position: sticky !important; bottom: .25rem !important; z-index: 2 !important;
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
/* Eingabefeld bildet die Unterkante des EINEN Blocks */
.project-page .chat-input-wrap{
  position: relative !important; display: flex !important; align-items: stretch !important;
  background: #F2F7FD !important;
  border: 1px solid #D6E4F3 !important;
  border-top: none !important;                  /* verschmilzt mit Verlauf */
  border-radius: 0 0 14px 14px !important;
  padding: .45rem .6rem !important;
}

/* 5) Titel/Icons gut sichtbar */
.project-page .chat-topbar-title strong{ color:#0b2941 !important; font-weight: 700; }
.project-page .info-btn{
  width:22px; height:22px; border-radius:50%;
  border:1px solid #b3d8fa; background:#e9f5ff; color:#176fa6; font-weight:800;
}

/* 6) Textarea und Icon-Buttons im Feld */
.project-page #chatInput{
  width:100% !important; min-height: 96px !important; max-height: 45vh !important;
  padding: .85rem 108px .85rem 46px !important;
  border:none !important; outline:none !important; resize: none !important;
  background: transparent !important; color:#0b2941 !important;
}
.project-page .upload-inside{
  position:absolute !important; left:8px; bottom:8px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid #DBE6F3; color:#476887; background: transparent;
}
.project-page .upload-inside:hover{ background:#e8f3ff; color:#0a2c44; }
.project-page .input-actions-right{
  position:absolute !important; right:8px; bottom:8px; display:flex; gap:.35rem; align-items:center;
}
.project-page .input-actions-right .btn-icon{
  width:38px; height:38px; border-radius:10px; color:#476887;
  background: transparent; border:1px solid #DBE6F3;
}
.project-page .input-actions-right .btn-primary{
  padding:.7rem 1rem; border-radius:12px; font-weight:700;
  border:1px solid color-mix(in srgb, var(--color-accent) 85%, #DBE6F3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 80%, #fff 0%), var(--color-accent));
  color:#fff;
}

/* 7) Datei-Pills & Bubbles */
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:12px; padding:.5rem .7rem;
}

/* 8) Bubbles dezenter – kein Reinweiß */
.project-page .message{ width:100%; border-radius:12px; margin:.5rem 0; padding:.9rem 1rem; }
.project-page .message.user{ background:#E6F3FF !important; color:#0a2c44 !important; }
.project-page .message.assistant{ background:#FFFFFFE6 !important; color:#0a2538 !important; }

/* 9) Details-Toggle als Chip in der Topbar (rechts) */
.details-toggle.as-chip{
  margin:0 !important; border-radius:999px !important; border:1px solid #D6E4F3 !important;
  background:#F7FBFF !important; color:#0b2941 !important; padding:.35rem .7rem !important;
  display:inline-flex; align-items:center; gap:.35rem;
}
.details-toggle.as-chip .material-icons{ font-size:1.1rem; }

/* 10) Breadcrumb rechts in der Topbar (optional kompakt) */
.project-hero .breadcrumb-nav-top{ font-size: .95rem; color:#4a6a8c; }

/* ==================== VA Hotfixes – 2-Spalten-CPV & Chat Polish ==================== */

/* A) Chatcontainer optisch verbinden + türkiser Rahmen */
.project-page .chat-container{
  border: 2px solid #7BD3EA !important;
  box-shadow: 0 10px 40px rgba(3,32,66,.06) !important;
}
.project-page .chat-topbar,
.project-page .chat-messages,
.project-page .chat-input-wrap{
  border-color: #7BD3EA !important;
}

/* Breadcrumb + Titel robuster auf eine Zeile */
.project-page .project-hero{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items:center !important;
}
.project-page .project-title{ grid-column:2 !important; justify-self:center !important; }
.project-page .breadcrumb-nav-top{ grid-column:3 !important; justify-self:end !important; }

/* Senden-Button: disabled weniger „glasig“ und kein rotes Verbotssymbol */
.input-actions-right .btn-primary:disabled{
  opacity: .92 !important;
  cursor: default !important;   /* kein "not-allowed" Symbol */
  filter: none !important;
}

/* ===== CPV-Modal: Overlay + feste Höhe + 2 Spalten + Sticky-Footer ===== */
.modal{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,24,38,.35); z-index: 4000;
}
.modal.show{ display:flex; }
.modal .modal-body{
  background:#fff; width:min(1100px, 96vw); max-height:86vh;
  display:grid; grid-template-rows: auto 1fr auto; gap:12px;
  border-radius:14px; border: 2px solid #7BD3EA;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  padding:14px;
}

/* Header */
.cpv-header{ display:flex; gap:12px; align-items:center; }
.cpv-header input[type="search"]{
  flex:1; padding:.65rem .8rem; border:1px solid #D6E4F3; border-radius:10px;
}

/* Zwei Spalten mit Scroll in beiden Listen */
.cpv-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; min-height:0; }
.cpv-col{ display:flex; flex-direction:column; min-height:0; }
.cpv-col h4{ margin:0 0 8px; color:#0b2941; }
#cpvSuggestions, #cpvSelected{
  flex:1 1 auto; min-height:0; overflow:auto;
  background:#F9FBFE; border:1px solid #E3EEF9; border-radius:12px; padding:10px;
}

/* Footer bleibt sichtbar */
.cpv-footer{
  position: sticky; bottom:-14px; /* optische Kante überdecken */
  display:flex; justify-content:space-between; gap:10px;
  padding-top:10px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}
.cpv-footer .primary{
  background:#0077B6; color:#fff; border:none; padding:.6rem 1rem; border-radius:10px; font-weight:700;
}
.cpv-footer button{
  border:1px solid #D6E4F3; background:#F7FBFF; border-radius:10px; padding:.6rem 1rem; font-weight:600;
}

/* Kompakte CPV-Cards – OHNE 3. Zeile */
.cpv-card{
  display:grid; grid-template-columns: minmax(90px, 0.2fr) 1fr auto; align-items:center; gap:8px;
  padding:8px 10px; margin-bottom:8px;
  background:#fff; border:1px solid #E1ECF7; border-radius:10px;
  box-shadow: var(--shadow-sm); cursor:pointer;
}
.cpv-card:hover{ border-color:#7BD3EA; box-shadow:0 2px 16px rgba(123,211,234,.25); }
.cpv-card .code{ font-weight:800; color:#005a8e; }
.cpv-card .title{ color:#0b2941; font-weight:600; line-height:1.25; max-width:52ch; display:flex; gap:8px; align-items:flex-start; }
.cpv-card .cpv-title-text{ flex:1 1 auto; min-width:0; }
.cpv-card .move{ font-size:18px; opacity:.8; }
.cpv-card .cpv-info{
  position:relative; border:0; background:transparent; padding:0; margin:0;
  cursor:help; display:inline-flex; align-items:center; justify-content:center;
}
.cpv-card .cpv-info__icon{
  width:18px; height:18px; border-radius:50%;
  background:#e6f7fb; color:#0ba4c0; font-weight:700; font-size:0.82rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #cbeaf1;
}
.cpv-card .cpv-info:focus-visible .cpv-info__icon{
  box-shadow:0 0 0 3px rgba(11,164,192,.25);
}
.cpv-card .cpv-tooltip{
  position:absolute; left:0; top:calc(100% + 6px);
  min-width:220px; max-width:320px;
  background:#fff; border:1px solid rgba(16,45,100,.18); border-radius:10px;
  box-shadow:0 14px 28px rgba(7,20,45,.15);
  padding:.55rem .7rem; color:#0b2941; font-size:.85rem; line-height:1.35;
  opacity:0; transform:translateY(-2px); pointer-events:none; z-index:3;
}
.cpv-card .cpv-info:hover .cpv-tooltip,
.cpv-card .cpv-info:focus-within .cpv-tooltip{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.cpv-card .cpv-tooltip__reason{ margin-bottom:.35rem; }
.cpv-card .cpv-tooltip__confidence{ color:#0f3b61; font-weight:600; }
.cpv-card .cpv-tooltip__confidence strong{ color:#059669; margin-left:4px; }


/* ===== VA Chat Patch v3 – Cohesive Block + Accent Border ===== */

/* H1 in dunklem Blau */
.project-title { color:#0b2f55 !important; font-weight:800; }

/* Breadcrumb + Titel in einer Zeile oben */
.project-hero{
  display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:1rem !important;
  margin:.5rem 0 .3rem !important; padding:0 var(--edge) !important;
}
.project-hero .breadcrumb-nav-top{ order:2; font-size:.95rem; color:#4a6a8c; }
.project-hero .project-title{ order:1; margin:.2rem 0 !important; }

/* Chat: Außen etwas heller, aber kein Reinweiß */
.project-page .chat-container{
  background: linear-gradient(180deg, #ECF4FB 0%, #EAF2FB 100%) !important;
  padding: 10px 0 !important; border-radius:16px !important;
}

/* NEU: ein zusammenhängender Block mit feinem Türkis-/Hellblau-Rahmen */
.project-page .chat-block{
  width: clamp(780px, 92%, 1200px);
  margin: 0 auto;
  background: linear-gradient(180deg, #F6FAFF 0%, #F2F7FD 100%);
  border: 1px solid rgba(0,158,225,.45);           /* dünner Akzent-Rahmen */
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(3,32,66,.08);
  overflow: hidden;                                 /* verschmilzt die Kanten */
  display:flex; flex-direction:column;
}

/* Die drei Bereiche erhalten TRANSPARENTE Flächen und keine Trennränder */
.project-page .chat-topbar,
.project-page .chat-messages,
.project-page .chat-input-bar { width:100% !important; margin:0 !important; }

.project-page .chat-topbar{
  position: sticky; top: 0; z-index: 2;
  background: transparent !important;
  border: 0 !important;
  padding: .75rem 1rem !important;
}
.project-page .chat-topbar-title strong{ color:#0b2941; font-weight:700; }

/* Verlauf ist jetzt dieselbe Fläche – nur Innenabstand */
.project-page .chat-messages{
  flex:1 1 auto; overflow:auto;
  background: transparent !important;
  border:0 !important; max-height:none !important; min-height:240px;
  padding: 14px 16px !important;
  color:#0a2c44 !important;
}

/* Eingabe bildet die Unterkante des EINEN Blocks */
.project-page .chat-input-bar{
  position: sticky; bottom: .25rem; z-index: 2; background: transparent !important; border:0; padding:0;
}
.project-page .chat-input-wrap{
  position:relative; display:flex; align-items:stretch;
  background: transparent !important;              /* Fläche kommt vom .chat-block */
  border:0 !important;
  padding: .45rem .6rem .45rem .6rem;              /* Grundpadding */
  min-height: 104px;                                /* genug Raum */
  /* Fokus-Ring für die gesamte Einheit */
}
.project-page .chat-input-wrap:focus-within{
  outline: 2px solid #009EE1; box-shadow: 0 0 0 4px rgba(0,158,225,.25);
  border-radius: 12px;
}

/* Textarea: Platz links/rechts + VIEL Luft unten, damit Fokusrahmen bis UNTER die Buttons reicht */
.project-page #chatInput{
  width:100%; min-height: 96px; max-height: 45vh;
  padding: .9rem 112px .9rem 48px !important;      /* rechts + links Platz für Icons */
  border:none !important; outline:none !important; resize:none !important;
  background: transparent !important; color:#0b2941 !important;
}

/* Alle drei Icon-/Action-Buttons auf eine Linie ganz unten */
.project-page .upload-inside{ position:absolute; left:8px; bottom:12px;
  width:36px; height:36px; border-radius:10px; border:1px solid #DBE6F3;
  background:transparent; color:#476887; display:flex; align-items:center; justify-content:center;
}
.project-page .input-actions-right{ position:absolute; right:8px; bottom:12px; display:flex; gap:.35rem; align-items:center; }
.project-page .input-actions-right .btn-icon{
  width:36px; height:36px; border-radius:10px; background:transparent;
  color:#476887; border:1px solid #DBE6F3;
}

/* Senden-Button: NICHT transparent, etwas schmaler */
.project-page .input-actions-right .btn-primary{
  min-width:auto; padding:.62rem .9rem; border-radius:12px; font-weight:700;
  background: #009EE1 !important;                 /* voll deckend */
  border: 1px solid #0a9edc !important;
  color:#fff !important; opacity:1 !important;
}

/* Datei-Pills & Bubbles bleiben dezent */
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1; border-radius:12px; padding:.5rem .7rem;
}
.project-page .message{ border-radius:12px; margin:.5rem 0; padding:.9rem 1rem; }
.project-page .message.user{ background:#E6F3FF !important; color:#0a2c44 !important; }
.project-page .message.assistant{ background:#FFFFFFF2 !important; color:#0a2538 !important; }

/* Mobile: Breite hoch */
@media (max-width: 900px){
  .project-page .chat-block{ width: 94%; }
}


/* ===== Chat Patch v4 – ein Block, Buttons unten, zartes UI ===== */

/* A) Projekt-Titel & Breadcrumb oben in einer Linie, Titel dunkelblau */
.project-hero{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:1rem !important; padding:0 var(--edge) !important; margin:.4rem 0 .2rem !important; }
.project-title{ color:#0b2f55 !important; font-weight:800 !important; margin:.2rem 0 !important; }

/* B) Seite fix auf Chat ausrichten – kein Body-Scroll */
body.project-page{ overflow:hidden !important; }
.project-main{ padding-inline: var(--edge) !important; }

/* C) Großen äußeren Container optisch neutralisieren */
.project-page .chat-container{
  background: transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}

/* D) Innenbreite wie bisheriger Container (aber ohne „Außenkasten“) */
:root{ --chat-inner-w: clamp(780px, 92vw, 1200px); }
.project-page .chat-inner{ height: var(--chat-viewport-h, 72vh) !important; padding: 8px 0 0 !important; }
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar,
.project-page .filebubble-row{
  width: var(--chat-inner-w) !important; margin-left:auto !important; margin-right:auto !important;
}

/* E) EIN zusammenhängender Block: Topbar + Messages + Input verschmelzen */
.project-page .chat-topbar{
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  background: #F3F7FC !important; color:#0a2c44 !important;
  border:1px solid #D6E4F3 !important; border-bottom:none !important;
  border-radius: 12px 12px 0 0 !important; padding:.7rem 1rem !important;
}
.project-page .chat-messages{
  flex:1 1 auto !important; overflow:auto !important; max-height:none !important; min-height:240px !important;
  background:#F7FBFF !important; color:#0a2c44 !important;
  border-left:1px solid #D6E4F3 !important; border-right:1px solid #D6E4F3 !important;
  border-top:none !important; border-bottom:none !important; padding:14px 16px !important;
}
.project-page .chat-input-bar{ position:sticky !important; bottom:.25rem !important; z-index:2 !important; background:transparent !important; border:0 !important; padding:0 !important; }

/* F) Eingabebereich: fester Rand IMMER sichtbar, keine extra Fokuslinie */
.project-page .chat-input-wrap{
  display:grid !important;
  grid-template-columns: auto 1fr auto;  /* Upload | spacer | Actions */
  grid-template-rows: auto auto;         /* Textarea | Buttonzeile */
  align-items:end; row-gap:8px; column-gap:8px;
  background:#F3F7FC !important;
  border:1px solid #A9D8F5 !important;   /* immer sichtbar */
  border-top:none !important;            /* mit Messages verschmelzen */
  border-radius:0 0 12px 12px !important;
  padding:10px 12px !important;
}
.project-page .chat-input-wrap:focus-within{ outline:none !important; box-shadow:none !important; }

/* Textarea = Reihe 1, ganze Breite, endet VOR Buttonzeile */
.project-page #chatInput{
  grid-row:1; grid-column:1 / -1;
  min-height:120px !important; max-height:45vh !important; resize:none !important;
  border:none !important; outline:none !important; background:transparent !important; color:#0b2941 !important;
  padding:.9rem !important;
}

/* Buttonzeile unter dem Eingabefeld (Reihe 2): Upload links, Mic+Senden rechts */
.project-page .upload-inside{
  position:static !important; grid-row:2; grid-column:1;
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid #DBE6F3; background:transparent; color:#476887;
}
.project-page .input-actions-right{
  position:static !important; grid-row:2; grid-column:3;
  display:flex; align-items:center; gap:.4rem;
}
.project-page .input-actions-right .btn-icon{
  width:36px; height:36px; border-radius:10px; background:transparent; color:#476887; border:1px solid #DBE6F3;
}
.project-page .input-actions-right .btn-primary{
  padding:.58rem .9rem !important; border-radius:12px !important; font-weight:700 !important;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* G) Datei-Bubbles kleiner & ÜBER dem Eingabefeld (per JS umgesetzt) */
.project-page .filebubble-row{
  display:flex; flex-wrap:wrap; gap:.4rem; margin:.35rem auto .4rem !important;
}
.project-page .file-bubble{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#EAF3FF; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:10px; padding:.32rem .5rem; font-size:.85rem;
}
.project-page .file-bubble .file-icon{ font-size:1rem; }
.project-page .file-bubble .file-type{ opacity:.7; font-weight:600; font-size:.8rem; }
.project-page .file-bubble .file-remove{
  background:transparent; border:0; padding:0 .2rem; cursor:pointer; font-size:1rem; line-height:1; color:#476887;
}

/* H) Bubbles im Verlauf dezenter */
.project-page .message{ border-radius:12px; margin:.5rem 0; padding:.9rem 1rem; }
.project-page .message.user{ background:#E6F3FF !important; color:#0a2c44 !important; }
.project-page .message.assistant{ background:#FFFFFFF2 !important; color:#0a2538 !important; }

/* I) Drag&Drop Overlay – modern */
#dropOverlay{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(10,40,70,.25); backdrop-filter: blur(2px); z-index:5000;
}
#dropOverlay.show{ display:grid; }
#dropOverlay .drop-card{
  background:#fff; border:1px dashed #8acdf0; border-radius:16px; padding:20px 24px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:#0a2c44; min-width: min(520px, 92vw);
}
#dropOverlay svg{ width:64px; height:64px; }

/* J) Sicherheit: alte „Nächste Schritte“-Box ausblenden (Platz an Chat geben) */
.project-main > div:has(> h3){ display:none !important; }  /* die Box unter dem Chat */


/* ===== VA Chat Patch v5 – Fullheight, ein Block, bündige Buttons ===== */

/* --- Grundlayout: Header | Main | Footer im Viewport, kein Body-Scroll --- */
body.project-page{
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;              /* Footer immer sichtbar */
  overflow: hidden;            /* Seite selbst scrollt nicht */
}
main.project-main{ min-height: 0; } /* erlaubt, dass der Chat innen scrollt */

/* --- Hero kompakt & in einer Linie --- */
.project-hero{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:1rem !important; padding:0 var(--edge) !important; margin:.4rem 0 .25rem !important;
}
.project-title{ color:#0b2f55 !important; font-weight:800 !important; margin:.2rem 0 !important; }
.project-hero .breadcrumb-nav-top{ font-size:.95rem; color:#4a6a8c; }

/* --- kein äußerer Kasten mehr --- */
.project-page .chat-container{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* --- Chat-Breite wie zuvor, aber ohne Außencontainer --- */
:root{ --chat-inner-w: clamp(780px, 92vw, 1200px); }
.project-page .chat-inner{
  height: var(--chat-viewport-h, 68vh) !important; /* wird per JS exakt gesetzt */
  padding: 0 !important; display:flex !important; flex-direction:column !important;
}
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: var(--chat-inner-w) !important; margin: 0 auto !important;
}

/* --- EIN zusammenhängender Block: Topbar + Messages + Input --- */
.project-page .chat-topbar{
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  background:#F3F7FC !important; color:#0a2c44 !important;
  border:1px solid #D6E4F3 !important; border-bottom:none !important;
  border-radius:12px 12px 0 0 !important; padding:.7rem 1rem !important;
}
.project-page .chat-messages{
  flex:1 1 auto !important; overflow:auto !important; max-height:none !important;
  background:#F7FBFF !important; color:#0a2c44 !important;
  border-left:1px solid #D6E4F3 !important; border-right:1px solid #D6E4F3 !important;
  border-top:none !important; border-bottom:none !important;
  padding:14px 16px !important;
}
.project-page .chat-input-bar{ position: sticky !important; bottom: .25rem !important; z-index: 2 !important; background:transparent !important; }

/* --- Eingabebereich: immer sichtbarer Rand, Buttons unter dem Textfeld --- */
.project-page .chat-input-wrap{
  display:grid !important;
  grid-template-columns: 40px 1fr auto; /* Upload | spacer | Actions */
  grid-template-rows: auto auto;        /* Textarea | Buttonzeile */
  align-items:end; row-gap:6px; column-gap:8px;
  background:#F3F7FC !important;
  border:1px solid #A9D8F5 !important;  /* IMMER sichtbar */
  border-top:none !important;           /* verschmilzt mit Messages */
  border-radius:0 0 12px 12px !important;
  padding:10px 12px 8px !important;
  margin-top:-1px;                      /* Naht zwischen Verlauf/Eingabe kaschieren */
}
.project-page .chat-input-wrap:focus-within{ outline:none !important; box-shadow:none !important; }

/* Textarea: Reihe 1 über die ganze Breite */
.project-page #chatInput{
  grid-row:1; grid-column:1 / -1;
  min-height:120px !important; max-height:45vh !important; resize:none !important;
  border:none !important; outline:none !important; background:transparent !important; color:#0b2941 !important;
  padding:.9rem .9rem !important;
}

/* Buttonreihe (Reihe 2): Upload links, Mic+Senden rechts, bündig unten */
.project-page .upload-inside{
  position:static !important; grid-row:2; grid-column:1;
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #DBE6F3; background:transparent; color:#23445f;
}
.project-page .input-actions-right{
  position:static !important; grid-row:2; grid-column:3;
  display:flex; align-items:center; gap:.45rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height:36px; display:inline-flex; align-items:center; justify-content:center;
}
.project-page .input-actions-right .btn-icon{
  width:36px; border-radius:10px; background:#fff; border:1px solid #DBE6F3; color:#23445f;
}
.project-page .input-actions-right .btn-primary{
  padding:0 .9rem !important; border-radius:12px !important; font-weight:700 !important; line-height:1 !important;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* Datei-Bubbles kompakt – oberhalb der Eingabe (Platz ober-/unterhalb) */
.project-page .filebubble-row{ display:flex; flex-wrap:wrap; gap:.38rem; padding: .35rem 0 .4rem !important; }
.project-page .file-bubble{
  display:inline-flex; align-items:center; gap:.3rem;
  background:#EAF3FF; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:10px; padding:.28rem .5rem; font-size:.85rem;
}

/* Doppelkante verhindern – sichere Regeln */
.project-page .chat-messages{ border-bottom:none !important; }
.project-page .chat-input-wrap{ border-top:none !important; }



/* ===== VA Chat Patch v6 – Fullheight, ein Block, bündige Buttons ===== */

/* --- Grundlayout: Header | Main | Footer im Viewport, kein Body-Scroll --- */
body.project-page{
  display:grid;
  grid-template-rows:auto 1fr auto; /* Header | Main | Footer */
  height:100dvh;
  overflow:hidden; /* Seite selbst nicht scrollen, nur der Chat */
}
main.project-main{ min-height:0; }

/* --- Hero kompakt & Breadcrumb rechts auf gleicher Höhe wie H1 --- */
.project-hero{
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important;
  gap:1rem !important; padding:0 2vw !important; margin:.35rem 0 .15rem !important;
}
.project-title{ color:#0B2F55 !important; font-weight:800 !important; margin:.2rem 0 !important; }
.project-hero .breadcrumb-nav-top{ order:2; color:#4a6a8c; font-size:.95rem; }

/* --- kein äußerer Chat-Kasten mehr, nur die drei Teile als EIN Block --- */
:root{ --chat-inner-w: clamp(820px, 92vw, 1200px); }
.project-page .chat-container{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.project-page .chat-inner{
  height:var(--chat-viewport-h, 68vh) !important; /* wird per JS exakt gesetzt */
  display:flex !important; flex-direction:column !important; gap:0 !important;
}
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width:var(--chat-inner-w) !important; margin:0 auto !important;
}

/* Block-Wirkung: Topbar, Messages, Input nahtlos verbunden */
.project-page .chat-topbar{
  position:sticky !important; top:0 !important; z-index:2;
  background:#F3F7FC !important; color:#0a2c44 !important;
  border:1px solid #D6E4F3 !important; border-bottom:none !important;
  border-radius:12px 12px 0 0 !important; padding:.65rem 1rem !important;
}
.project-page .chat-messages{
  flex:1 1 auto !important; overflow:auto !important; min-height:240px !important;
  background:#FFFFFF !important;
  border-left:1px solid #DBE6F3 !important; border-right:1px solid #DBE6F3 !important;
}
.project-page .chat-input-bar{
  background:#F8FAFE !important;
  border:1px solid #DBE6F3 !important; border-top:none !important;
  border-radius:0 0 12px 12px !important;
  box-shadow:none !important; padding:.6rem .8rem .7rem !important;
}

/* Datei-Bubble: kleiner & ÜBER dem Eingabebereich */
.project-page .filebubble-row{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:.35rem auto .35rem !important;
}
.project-page .file-bubble{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#EAF3FF; color:#0c2842; border:1px solid #CFE0F1;
  border-radius:10px; padding:.28rem .5rem; font-size:.85rem;
}

/* Eingabe-Bereich: EIN Grundrahmen (immer sichtbar), Buttons bündig auf einer Linie */
.project-page .chat-input-bar{ 
  display:grid !important;
  grid-template-columns:auto 1fr auto;  /* Datei | Text | (Mic+Senden) */
  grid-template-areas:"upload input actions";
  align-items:end; column-gap:.6rem; row-gap:.35rem;
}
.project-page .chat-input-wrap{ grid-area:input; }
.project-page .chat-actions-left{ grid-area:upload; align-self:end; }
.project-page .chat-actions-right{ grid-area:actions; display:flex; gap:.4rem; align-self:end; }

/* Textarea – kleiner Grundzustand, wächst nach oben bis 50% der Chat-Höhe, immer mit Rahmen */
#chatInput{
  width:100% !important; resize:none !important; overflow:auto !important;
  min-height:56px !important;               /* leer: kompakt */
  max-height:calc(var(--chat-viewport-h, 70vh) * .5) !important;
  padding:.85rem 1rem !important; line-height:1.45 !important;
  border:1px solid #C8DBEE !important; border-radius:12px !important;
  background:#FFFFFF !important; color:#0f172a !important;
  box-shadow:none !important; outline:none !important;
}
#chatInput:focus{ border-color:#009EE1 !important; box-shadow:0 0 0 2px #009EE133 !important; }

/* Buttons unten bündig (gleiche optische Höhe) */
.upload-inside.btn-icon{ width:38px !important; height:38px !important; display:grid; place-items:center; border-radius:8px; background:#0F2A3A0F; border:1px solid #C8DBEE; color:#0d3554; }
.input-actions-right .btn-icon.btn-ghost{ width:38px !important; height:38px !important; border-radius:8px; border:1px solid #C8DBEE; background:#0F2A3A0F; }
.input-actions-right .btn-primary{
  padding:.58rem .9rem !important; border-radius:12px !important; font-weight:700 !important;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* KI-Bubbles etwas heller (Lesbarkeit im Behördenkontext) */
.message.assistant .bubble{
  background:#163A56 !important; color:#EAF2FC !important; border:1px solid rgba(255,255,255,.06) !important;
}

/* Moderner Drag&Drop-Overlay (Icon via uploads.js) */
#dropOverlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(10,40,70,.25); backdrop-filter:blur(2px); z-index:5000;
}
#dropOverlay.show{ display:grid; }
#dropOverlay .drop-card{
  background:#fff; border:1px dashed #8ACDF0; border-radius:16px; padding:20px 24px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:#0a2c44; min-width:min(520px, 92vw);
}
#dropOverlay svg{ width:64px; height:64px; }

/* „Nächste Schritte“-Box unter dem Chat ausblenden (Platz für Chat) */
.project-main > div:has(> h3){ display:none !important; }


/* ====== VA Chat – Final Patch v3 (setzt ältere Blöcke außer Kraft) ====== */

/* Chat füllt den Viewport dynamisch (Höhe kommt aus chat-ux.js) */
.project-page .chat-inner{
  height: var(--chat-viewport-h) !important;      /* überschreibt calc(...) aus älteren Blöcken */
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ein einheitlicher Block: Topbar + Messages + Input greifen nahtlos ineinander */
:root{ --chat-inner-w: clamp(820px, 88vw, 1200px); }  /* ≈ 20% breiter als 80%; mobil 94%: */
@media (max-width: 900px){ :root{ --chat-inner-w: 94vw; } }

.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: var(--chat-inner-w) !important;
  margin: 0 auto !important;
}

/* Dünner türkisfarbener Rahmen um den gesamten Chat */
.project-page .chat-container{
  background: transparent !important;
  border: 2px solid #7BD3EA !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
  padding: 0 !important;
}

/* Topbar oben „angeflanscht“ */
.project-page .chat-topbar{
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  background: #F2F7FD !important;
  color: #0a2c44 !important;
  border: 1px solid #D6E4F3 !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: .7rem 1rem !important;
}
.project-page .chat-topbar-title strong{ color:#0b2941 !important; }

/* Verlauf ist dieselbe Fläche – keine separaten Kanten */
.project-page .chat-messages{
  flex: 1 1 auto !important;
  overflow: auto !important;
  max-height: none !important;
  min-height: 240px !important;
  background: #F7FBFF !important;
  color: #0a2c44 !important;
  border-left: 1px solid #D6E4F3 !important;
  border-right: 1px solid #D6E4F3 !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 14px 16px !important;
}

/* Datei-Bubbles oberhalb der Eingabe, kompakter */
.project-page .filebubble-row{
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .35rem 0 .1rem;
}
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:12px; padding:.38rem .55rem; font-size:.92rem;
}

/* Eingabe bildet die Unterkante – Buttons unten bündig; Fokusrahmen für die ganze Einheit */
.project-page .chat-input-bar{ position: sticky !important; bottom: .25rem !important; z-index: 2 !important; background: transparent !important; }

.project-page .chat-input-wrap{
  position: relative !important;
  display: flex !important; align-items: stretch !important;
  background: #F2F7FD !important;
  border: 1px solid #D6E4F3 !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: .45rem .6rem !important;
}
.project-page .chat-input-wrap:focus-within{
  outline: 2px solid #009EE1; box-shadow: 0 0 0 4px rgba(0,158,225,.22);
  border-radius: 12px;
}

/* Textarea: viel Luft nach unten, damit der Fokusrahmen optisch bis UNTER die Buttons reicht */
.project-page #chatInput{
  width: 100% !important;
  /* Höhe wird JS-gesteuert (Auto-Grow). Hier nur die Puffer: */
  min-height: 56px !important;
  max-height: 45vh !important;
  padding: .85rem 112px .85rem 48px !important; /* rechts Platz für Mic/Senden, links für Upload */
  border: none !important; outline: none !important; resize: none !important;
  background: transparent !important; color: #0b2941 !important;
}

/* Drei Buttons auf einer Linie – ganz unten bündig */
.project-page .upload-inside{
  position: absolute !important; left: 8px; bottom: 12px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid #DBE6F3; background: transparent; color: #476887;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right{
  position: absolute !important; right: 8px; bottom: 12px;
  display: flex; gap: .35rem; align-items: center;
}
.project-page .input-actions-right .btn-icon{
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; color: #476887; border: 1px solid #DBE6F3;
}
.project-page .input-actions-right .btn-primary{
  min-width: auto; padding: .62rem .9rem; border-radius: 12px; font-weight: 700;
  background: #009EE1 !important;              /* nicht transparent */
  border: 1px solid #0a9edc !important;
  color: #fff !important; opacity: 1 !important;
}

/* H1 in dunklem Blau, Breadcrumb rechts auf einer Linie */
.project-page .project-title{ color:#0d4672 !important; font-weight: 800; }
.project-page .project-hero{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}
.project-page .project-title{ grid-column: 2 !important; justify-self: center !important; margin:.2rem 0 .5rem !important; }
.project-page .breadcrumb-nav-top{ grid-column: 3 !important; justify-self: end !important; margin:0 !important; font-size:.95rem; color:#4a6a8c; }

/* Sicherstellen, dass ältere Standardregeln aus style.css den Chat nicht „weiß“ färben */
.project-page #chatInput,
.project-page .chat-input-bar{ box-shadow: none !important; background: transparent !important; border: 0 !important; }


/* ===== Chat Patch v7 – Block füllt Bereich Titel↔Footer, ~2/3 Breite, Grid-Input ===== */

/* A) Layout-Rahmen: Header | Main | Footer im Viewport */
body.project-page{
  display:grid; grid-template-rows:auto 1fr auto; height:100dvh; overflow:hidden;
}
main.project-main{ min-height:0; }

/* B) H1 + Breadcrumb auf einer Linie (oben) */
.project-hero{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:1rem !important; padding:0 var(--edge) !important; margin:.3rem 0 .2rem !important;
}
.project-title{ color:#0b2f55 !important; font-weight:800 !important; margin:.2rem 0 !important; }
.project-hero .breadcrumb-nav-top{ font-size:.95rem; color:#4a6a8c; }

/* C) Äußeren Container neutralisieren */
.project-page .chat-container{ background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
.project-page .chat-inner{ padding:0 !important; }

/* D) Der EIGENTLICHE Chat-Block: Breite ~ 2/3, Höhe = dynamisch von JS */
:root{
  --chat-block-w: clamp(780px, 66vw, 1280px);  /* ≈ 2/3 der Seite auf breiten Screens */
}
.project-page .chat-block{
  width: var(--chat-block-w);
  height: var(--chat-viewport-h);     /* wird per JS gesetzt (siehe unten) */
  margin: 0 auto;
  display: flex; flex-direction: column;
  border: 1px solid #86d8f0; border-radius: 14px;
  background: linear-gradient(180deg,#F6FAFF 0%,#F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
  overflow: hidden;
}

/* E) Kinder des Blocks nehmen die volle Breite ein */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{
  width: 100% !important; margin: 0 !important;
}

/* F) Topbar oben, Verlauf wächst, Input unten – keine sichtbaren Fugen */
.project-page .chat-topbar{
  background:#F2F7FD !important; color:#0a2c44 !important;
  border-bottom: 1px solid #D6E4F3 !important;
  padding: .7rem 1rem !important;
}
.project-page .chat-messages{
  flex: 1 1 auto; overflow:auto; min-height:180px;
  background: transparent !important; padding: 14px 16px !important;
}
.project-page .filebubble-row{
  display:flex; flex-wrap:wrap; gap:.38rem; padding:.35rem 16px .2rem;
}
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:10px; padding:.28rem .5rem; font-size:.88rem;
}

/* G) Eingabe-Bereich als Grid:
      Reihe 1: Textarea (nur mittlere Spalte)
      Reihe 2: Upload links, Actions (Mic+Senden) rechts – bündig */
.project-page .chat-input-bar{ background: transparent !important; padding: 10px 12px 12px !important; }
.project-page .chat-input-wrap{
  display:grid;
  grid-template-columns: 42px 1fr auto;   /* links Upload | Mitte Text | rechts Aktionen */
  grid-template-rows: 1fr auto;
  align-items:end; column-gap:10px; row-gap:8px;
  background: transparent; border:0; padding:0;
}

/* Textarea steht ÜBER der Buttonreihe und nutzt nur die mittlere Spalte */
#chatInput{
  grid-column: 2; grid-row: 1;
  min-height: 48px;   /* leer: sehr kompakt */
  max-height: calc(var(--chat-viewport-h) * .5);  /* wächst bis ~50% */
  border:1px solid #C8DBEE !important; border-radius:12px !important;
  background:#fff !important; color:#0f172a !important; line-height:1.45 !important;
  padding:.75rem .9rem !important; resize:none !important; overflow:auto !important;
}
#chatInput:focus{ border-color:#009EE1 !important; box-shadow:0 0 0 2px #009EE133 !important; }

/* Upload links unten (Reihe 2, Spalte 1) */
.upload-inside{
  grid-column:1; grid-row:2; position:static !important;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid #C8DBEE; border-radius:8px; background:#0F2A3A0F; color:#1d4767;
}

/* Aktionen (Mic + Senden) rechts unten (Reihe 2, Spalte 3) */
.input-actions-right{
  grid-column:3; grid-row:2; position:static !important;
  display:flex; align-items:center; gap:.45rem;
}
.input-actions-right .btn-icon{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:8px; border:1px solid #C8DBEE; background:#0F2A3A0F; color:#1d4767;
}
.input-actions-right .btn-primary{
  height:38px; padding:0 .9rem; border-radius:12px; font-weight:700;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* H) Sicherheit: alte Regeln neutralisieren, die reinweiß/feste Höhen erzwingen */
.project-page .chat-container > .chat-inner{ height:auto !important; }
.project-page #chatInput, .project-page .chat-input-bar{ box-shadow:none !important; }


.project-page .chat-block{
  width: var(--chat-block-w, clamp(780px, 66vw, 1280px));
  height: var(--chat-viewport-h);
  margin: 0 auto;
  display: flex; flex-direction: column;
  border: 1px solid #86d8f0; border-radius: 14px;
  background: linear-gradient(180deg,#F6FAFF 0%,#F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
  overflow: hidden;
}

.project-page .chat-inner { height: auto !important; }

/* ===== VA Chat – Patch v8: Block passt Höhe bis Footer an, Kinder volle Breite ===== */

/* Äußeren Alt-Container neutralisieren */
.project-page .chat-container{ border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; }

/* Der EIGENTLICHE Chat-Block */
.project-page .chat-block{
  width: var(--chat-block-w, clamp(780px, 66vw, 1280px));
  height: var(--chat-viewport-h);          /* wird in JS präzise gesetzt */
  margin: 0 auto;
  display: flex; flex-direction: column;
  border: 1px solid #86d8f0;               /* ggf. dein zarter Rahmen */
  border-radius: 14px;
  background: linear-gradient(180deg,#F6FAFF 0%,#F2F7FD 100%);
  overflow: hidden;                         /* nur der Verlauf scrollt */
}

/* Kinder im Block = volle Breite (keine inneren Seitenkanten) */
.project-page .chat-block .chat-topbar,
.project-page .chat-block .filebubble-row,
.project-page .chat-block .chat-messages,
.project-page .chat-block .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}

/* Keine Innen-Seitenränder durch Borders: lateral borders weg, nur Bottom-Linie oben */
.project-page .chat-block .chat-topbar{
  background: transparent !important;
  color:#0a2c44 !important;
  border: none !important;
  border-bottom: 1px solid #D6E4F3 !important;
  border-radius: 0 !important;
  padding: .7rem 16px !important;
}
.project-page .chat-block .filebubble-row{ padding: .35rem 16px .2rem !important; }
.project-page .chat-block .chat-messages{
  flex: 1 1 auto; overflow: auto; min-height: 180px;
  background: transparent !important; border: none !important;
  padding: 14px 16px !important;
}
.project-page .chat-block .chat-input-bar{
  background: transparent !important; border: 0 !important;
  padding: 10px 16px 12px !important;
}

/* Eingabe (Grid): Text oben in der Mitte, Buttons unten bündig links/rechts */
.project-page .chat-input-wrap{
  display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: 1fr auto;
  align-items: end; column-gap: 10px; row-gap: 8px;
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
#chatInput{
  grid-column: 2; grid-row: 1;
  min-height: 48px; max-height: calc(var(--chat-viewport-h) * .5);
  border: 1px solid #C8DBEE !important; border-radius: 12px !important;
  background: #fff !important; color: #0f172a !important;
  line-height: 1.45 !important; padding: .75rem .9rem !important;
  resize: none !important; overflow: auto !important;
}
.upload-inside{
  grid-column: 1; grid-row: 2; position: static !important;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid #C8DBEE; border-radius: 8px; background: #0F2A3A0F; color:#1d4767;
}
.input-actions-right{
  grid-column: 3; grid-row: 2; position: static !important;
  display: flex; align-items: center; gap: .45rem;
}
.input-actions-right .btn-icon{
  width: 38px; height: 38px; display:grid; place-items:center;
  border-radius: 8px; border: 1px solid #C8DBEE; background: #0F2A3A0F; color:#1d4767;
}
.input-actions-right .btn-primary{
  height: 38px; padding: 0 .9rem; border-radius: 12px; font-weight: 700;
  background: #009EE1 !important; border: 1px solid #0a9edc !important; color:#fff !important; opacity: 1 !important;
}


/* ===== Chat Patch v9 – näher an den Titel, Messages fast volle Breite,
   ChatGPT-artige Inputbox zentriert mit internen Buttons ===== */

/* a) Chat näher an den Projekttitel */
.project-hero{ margin: .2rem 0 .1rem !important; }
.project-main{ padding-top: 0 !important; }
.project-page .chat-block{ margin-top: .15rem !important; }

/* b) Messages fast volle Blockbreite (keine innere Seitenkante) */
.project-page .chat-block .chat-messages{
  padding: 8px 10px !important;           /* schmale Innenabstände */
}
.project-page .chat-messages .message,
.project-page .chat-messages .message .bubble{
  max-width: none !important;
  width: 100% !important;                  /* Bubbles/Bausteine nutzen die volle Breite */
}

/* c) Eingabebox wie ChatGPT: zentriert, eigene Breite, Buttons IM Feld */
:root{
  --chat-input-w: clamp(680px, 78%, 920px); /* Breite der Inputbox (nicht der Block) */
}
.project-page .chat-block .chat-input-bar{
  padding: 10px 0 14px !important;         /* keine seitlichen Abstände vom Block */
}
.project-page .chat-input-wrap{
  position: relative !important;
  width: var(--chat-input-w) !important;   /* schmaler als der Chatblock */
  margin: 0 auto !important;               /* zentriert */
  background: #FFFFFF !important;
  border: 1px solid #C8DBEE !important;    /* dezenter Rahmen */
  border-radius: 12px !important;
  padding: 10px 12px !important;           /* Grundpadding – Buttons sitzen innen */
  box-shadow: 0 4px 20px rgba(10,40,70,.06) !important;
}
.project-page .chat-input-wrap:focus-within{
  outline: 2px solid #009EE1;              /* Fokus wie ChatGPT */
  box-shadow: 0 0 0 4px rgba(0,158,225,.18);
}

/* Textarea: Platz für interne Buttons links/rechts, Auto-Grow via JS */
#chatInput{
  padding: 12px 112px 12px 48px !important;/* rechts Platz für Mic+Senden, links für Upload */
  min-height: 44px !important;             /* leer: kompakt */
  max-height: calc(var(--chat-viewport-h) * .4) !important;
  background: transparent !important; border: 0 !important; outline: 0 !important;
  color:#0f172a !important; line-height:1.45 !important; resize:none !important; overflow:auto !important;
}

/* Interne Buttons unten im Feld, bündig */
.upload-inside{
  position: absolute !important; left: 8px; bottom: 8px;
  width: 32px; height: 32px; display:grid; place-items:center;
  border-radius: 8px; border: 1px solid #C8DBEE; background:#0F2A3A0F; color:#1d4767;
}
.input-actions-right{
  position: absolute !important; right: 8px; bottom: 8px;
  display:flex; align-items:center; gap: .4rem;
}
.input-actions-right .btn-icon{
  width: 32px; height: 32px; display:grid; place-items:center;
  border-radius: 8px; border:1px solid #C8DBEE; background:#0F2A3A0F; color:#1d4767;
}
.input-actions-right .btn-primary{
  height: 32px; padding: 0 .8rem; border-radius: 10px; font-weight: 700;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* Sicherheit: alle Kinder im Block sollen die volle Blockbreite nutzen */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}


/* ===== Chat Patch v10 – dichter unter Titel, breite Messages, breite Inputbox ===== */

/* 1) Chat näher an den Projekttitel */
.project-hero{ margin: .12rem 0 .08rem !important; }
.project-main{ padding-top: 0 !important; }
.project-page .chat-block{ margin-top: .12rem !important; }

/* 2) Messages: fast volle Blockbreite (nur schmaler Innenrand) */
.project-page .chat-block .chat-messages{
  padding: 8px 12px !important;   /* kleiner Rand links/rechts */
}
.project-page .chat-messages .message{
  display:block !important;
  margin: .5rem 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.project-page .chat-messages .message .bubble{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;           /* entfernt evtl. auto-zentrierungen */
}

/* 3) Inputbox: breiter & zentriert, Buttons im Feld (ChatGPT-Stil) */
:root{
  /* Breite der Inputbox relativ zum Chatblock; bei sehr breiten Screens begrenzen */
  --chat-input-w: min(calc(100% - 24px), 1140px);
}
.project-page .chat-block .chat-input-bar{
  padding: 10px 0 14px !important;      /* seitlich bündig mit Block */
}
.project-page .chat-input-wrap{
  position: relative !important;
  width: var(--chat-input-w) !important; /* **breiter** als vorher */
  margin: 0 auto !important;             /* zentriert im Chatblock */
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  box-shadow: 0 4px 20px rgba(10,40,70,.06) !important;
}
.project-page .chat-input-wrap:focus-within{
  outline: 2px solid #009EE1;
  box-shadow: 0 0 0 4px rgba(0,158,225,.18);
}

/* Textarea: breiter, Platz für innere Buttons rechts/links bleibt frei */
#chatInput{
  padding: 12px 116px 12px 48px !important;  /* rechts Platz für Mic+Senden, links Upload */
  min-height: 44px !important;
  max-height: calc(var(--chat-viewport-h) * .4) !important;
  background: transparent !important;
  border: 0 !important; outline: 0 !important;
  color:#0f172a !important; line-height:1.45 !important;
  resize:none !important; overflow:auto !important;
}

/* Buttons **im** Feld, bündig unten, gleiche Höhe/Breite */
.upload-inside{
  position:absolute !important; left:8px; bottom:8px;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; border:1px solid #C8DBEE;
  background:#0F2A3A0F; color:#1d4767;
}
.input-actions-right{
  position:absolute !important; right:8px; bottom:8px;
  display:flex; align-items:center; gap:.45rem;
}
.input-actions-right .btn-icon{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; border:1px solid #C8DBEE;
  background:#0F2A3A0F; color:#1d4767;
}
.input-actions-right .btn-primary{
  height:32px; padding:0 .85rem; border-radius:10px; font-weight:700;
  background:#009EE1 !important; border:1px solid #0a9edc !important; color:#fff !important; opacity:1 !important;
}

/* Sicherheit: Kinder im Block wirklich volle Breite des Blocks */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}


/* ====== VA PROJECT-PAGE — FINAL OVERRIDES ====== */

/* --- A) Breadcrumb: rechts auf einer Linie mit H1, direkt unter dem Header --- */
.project-page .project-hero{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0 2rem !important;        /* gleichmäßiger Seitenrand */
  margin: .25rem 0 .25rem !important; /* wenig Luft zum Header */
}
.project-page .project-title{
  grid-column: 2 !important;
  justify-self: center !important;
  margin: .2rem 0 !important;
}
.project-page .breadcrumb-nav-top{
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
  font-size: .95rem !important;
}
@media (max-width: 880px){
  .project-page .project-hero{
    grid-template-columns: 1fr !important;
  }
  .project-page .project-title,
  .project-page .breadcrumb-nav-top{
    grid-column: 1 !important;
    justify-self: start !important;
  }
}


.project-page .chat-block > .chat-messages{
  width: 100% !important;               /* Verlauf volle Chatbox-Breite */
  margin: 0 !important;
}


/* Fallback, falls auf der Seite (noch) kein .chat-block gewrappt ist: */
.project-page .chat-inner > .chat-messages{
  width: 100% !important;
  margin: 0 !important;
}


/* --- C) Nachrichten-Bubbles wirklich über die ganze Breite --- */
/* Überschreibt style.css (.message { max-width:80% }) */
.project-page .message{
  max-width: 100% !important;
  width: 100% !important;
}
.project-page .message.user,
.project-page .message.assistant{
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- D) Höhenlimits des Verlaufs aufheben + angenehmes Padding --- */
.project-page .chat-messages{
  max-height: none !important;   /* überschreibt das 320px Limit */
  background: #fff !important;   /* klare Lesbarkeit */
  padding: 14px 16px !important;
  border-left: 1px solid #DBE6F3 !important;
  border-right: 1px solid #DBE6F3 !important;
}

/* --- E) Eingabe bleibt zentriert (gleich wie Topbar), Buttons innen */
.project-page .chat-input-bar{
  background: #F8FAFE !important;
  border: 1px solid #DBE6F3 !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: none !important;
  padding: .6rem .8rem .7rem !important;
}
.project-page .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  background: #F2F7FD !important;
  border: 1px solid #D6E4F3 !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: .45rem .6rem !important;
}


/* Icon-Buttons unten bündig im Feld */
.project-page .upload-inside{
  position: absolute !important; left: 8px; bottom: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid #DBE6F3; background: transparent; color: #476887;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right{
  position: absolute !important; right: 8px; bottom: 8px;
  display: flex; gap: .35rem; align-items: center;
}
.project-page .input-actions-right .btn-icon{
  width: 38px; height: 38px; border-radius: 10px;
  background: transparent; color: #476887; border: 1px solid #DBE6F3;
}


/* ===== VA Project v6 – FINAL FIXES (Breadcrumb, Full-Width-Bubbles, Divider, Scrollbar) ===== */

/* 1) Breadcrumb wirklich rechts – überschreibt spätere Flex-Regeln */
.project-hero{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0 var(--edge) !important;
  margin: .35rem 0 .2rem !important;
}
.project-title{
  grid-column: 2 !important;
  justify-self: center !important;
  margin: .2rem 0 !important;
}
.project-hero .breadcrumb-nav-top{
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
  font-size: .95rem !important;
  color: #4a6a8c !important;
}

/* 2) Chat: Verlauf volle Breite; Topbar schmal, aber Divider über voll */
.project-page .chat-inner{ position: relative; }

.project-page .chat-inner > .chat-topbar{
  width: 100% !important;              /* damit der Bereich voll spannt */
  border: 0 !important;                /* Linie kommt vom Verlauf */
  background: #F3F7FC !important;
  padding: .7rem 1rem !important;
}
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-input-bar{
  width: min(1200px, 80%) !important;  /* schmal & zentriert wie gewünscht */
  margin: 0 auto !important;
}

.project-page .chat-inner > .chat-messages{
  width: 100% !important;              /* Verlauf über gesamte Chatbox */
  margin: 0 !important;
  background: #F7FBFF !important;
  padding: 14px 16px !important;
  border-top: 1px solid #D6E4F3 !important;    /* Divider über volle Breite */
  border-left: 1px solid #D6E4F3 !important;
  border-right: 1px solid #D6E4F3 !important;
  border-bottom: none !important;
}

/* 3) Bubbles full width – überschreibt inline-flex + Max-Width aus style.css */
.project-page .chat-messages .message{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.project-page .chat-messages .message .msg-body{
  display: block !important;
  width: 100% !important;
}
/* Falls irgendwo .bubble genutzt wird, auch strecken */
.project-page .chat-messages .message .bubble{
  display: block !important;
  width: 100% !important;
}

/* 4) Hellere Scrollbar (auch Firefox) */
.project-page .chat-messages{
  scrollbar-width: thin;
  scrollbar-color: #BFD2E6 #F3F7FC; /* thumb track */
}
.project-page .chat-messages::-webkit-scrollbar{ width: 10px; height: 10px; }
.project-page .chat-messages::-webkit-scrollbar-thumb{
  background: #BFD2E6; border-radius: 8px; border: 2px solid #F3F7FC;
}
.project-page .chat-messages::-webkit-scrollbar-track{
  background: #F3F7FC; border-radius: 8px;
}

/* 5) Sicherheitsnetz gegen dunklen Außencontainer */
.project-page .chat-container{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* Chat-typografie */
.chat-messages .msg .msg-body {
  line-height: 1.6;
  font-size: 1rem;
  word-wrap: break-word;
  hyphens: auto;
}

.chat-messages .msg .msg-body p { margin: 0 0 .9rem; }
.chat-messages .msg .msg-body p:last-child { margin-bottom: 0; }

.chat-messages .msg .msg-body ul,
.chat-messages .msg .msg-body ol {
  margin: .4rem 0 .9rem;
  padding-left: 1.25rem;
}

.chat-messages .msg .msg-body h1,
.chat-messages .msg .msg-body h2,
.chat-messages .msg .msg-body h3 {
  margin: .8rem 0 .4rem;
  line-height: 1.3;
}

.chat-messages .msg .msg-body blockquote {
  margin: .9rem 0;
  padding: .6rem .9rem;
  border-left: 4px solid #cfe6ff;
  background: #f7fbff;
  border-radius: .5rem;
}

.chat-messages .msg .msg-body pre {
  margin: .9rem 0;
  padding: .8rem 1rem;
  background: #f6f8fa;
  border: 1px solid #e6eaef;
  border-radius: .6rem;
  overflow: auto;
}

.chat-messages .msg .msg-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}


/* ===== Project Page – FINAL overrides (Breite, Divider, Upload-Ausrichtung, Breadcrumb) ===== */

/* Breadcrumb: oben rechts auf einer Linie mit dem Titel */
.project-page .project-hero{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items:center !important;
}
.project-page .project-hero .project-title{
  grid-column:2 !important; justify-self:center !important; margin:.2rem 0 !important;
}
.project-page .project-hero .breadcrumb-nav-top{
  grid-column:3 !important; justify-self:end !important;
  margin:0 !important; padding:0 !important;
}

/* 0) Chat-Inner nicht mehr auf 980px deckeln */
.project-page .chat-container .chat-inner{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
}

/* 1) Alle Hauptteile im Chat auf gleiche volle Breite ziehen */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 2) Bubbles wirklich voll breit (nur Innen-Padding bleibt) */
.project-page .chat-messages .message,
.project-page .chat-messages .message .bubble{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 3) Verlauf/Divider über die volle Breite & gut lesbar */
.project-page .chat-messages{
  padding-left:.9rem !important;
  padding-right:.9rem !important;
  background:#F7FBFF !important;
  border-top:1px solid #D6E4F3 !important;
  border-left:1px solid #D6E4F3 !important;
  border-right:1px solid #D6E4F3 !important;
}

/* 4) Eingabeleiste: Upload bündig unten wie Mic/Senden (Grid-Layout beibehalten) */
.project-page .chat-input-bar{
  grid-template-areas:
    "ta ta ta"
    "upload . actions" !important;
}
.project-page .upload-inside{
  position:static !important;      /* in der Grid-Zeile bleiben */
  align-self:end !important;       /* Grundlinie treffen */
  width:38px !important;           /* gleiche Höhe wie .btn-icon */
  height:38px !important;
}
.project-page .input-actions-right{
  position:static !important;
  align-self:end !important;
}

/* 5) Hellere Scrollbar, damit der Balken gut sichtbar ist */
.project-page .chat-messages{
  scrollbar-width: thin;
  scrollbar-color:#BFD2E6 #F3F7FC;
}
.project-page .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .chat-messages::-webkit-scrollbar-thumb{
  background:#BFD2E6; border-radius:8px; border:2px solid #F3F7FC;
}
.project-page .chat-messages::-webkit-scrollbar-track{ background:#F3F7FC; border-radius:8px; }


/* 1. Breadcrumb-Navigation rechtsbündig neben dem Projekttitel */
.project-hero {
  display: flex !important;               /* Titel und Breadcrumb in einer Zeile */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  padding: 0 var(--edge);
  margin: .4rem 0 .25rem 0;
}
.project-hero .project-title {
  /* Überschreibt zentrierte Ausrichtung aus alten Styles */
  text-align: left !important;
  color: #0B2F55;
  font-weight: 800;
  margin: .2rem 0 !important;
}
.project-hero .breadcrumb-nav-top {
  margin: 0 !important;                  /* entfernt evtl. zentrierende Margins */
  font-size: .95rem;
  color: #4a6a8c;
}

/* 2. Chatbox zentriert und mit 70–80% Seitenbreite (bleibt stabil bei Detailanzeige) */
.project-page .chat-container {
  width: 75% !important;                 /* nutzt ca. 75% der Seite */
  max-width: 1200px;
  margin: 0 auto;                        /* zentriert die Chatbox im Viewport */
  background: transparent !important;    /* entfernt evtl. vorhandenen Hintergrund/Rahmen */
  border: none !important;
  box-shadow: none !important;
  position: relative;                    /* Bezugspunkt für absolut positionierte Detailbox */
}
.project-page .chat-inner {
  padding: 0 !important;                /* kein Innenabstand, damit Inhalt bis an Rand reicht */
}

/* 3. Projekt-Details-Box ausgeblendet und neben Chatbox positioniert */
.projekt-info-box.is-collapsed {
  display: none !important;             /* vollständig ausgeblendet, keine Leerfläche */
}
.project-page .projekt-info-box {
  /* Beim Einblenden links neben der Chatbox anzeigen */
  position: absolute;
  top: 0;
  left: 0;                             /* erscheint am linken Rand der Main-Area */
  width: 20%;
  max-width: 300px;
}
/* CPV-Codes einspaltig (jede Chip in eigener Zeile) */
.projekt-cpv-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.projekt-cpv-row #projektCPV {
  display: block;
}
.projekt-cpv-row .cpv-chip {
  display: block;
  width: 100%;
  margin-right: 0;
}
.projekt-cpv-row #btnEditCPV {
  margin-top: .5em;
}

/* 4. Innenbereich der Chatbox: volle Breite für Header und Bubbles, Inputfeld zentriert schmaler */
.project-page .chat-topbar, 
.project-page .chat-messages, 
.project-page .chat-input-bar {
  width: 100% !important;
  margin: .35rem 0 !important;          /* kein horizontaler Rand: Elemente füllen Container */
}
.project-page .chat-topbar {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  position: sticky; top: 0; z-index: 2;
  background: #F4F9FF;
  color: #0B2941;
  border: 1px solid #DBE6F3; 
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: .7rem 1rem;
}
.project-page .chat-messages {
  flex: 1 1 auto;
  overflow: auto;
  background: #F4F9FF;
  color: #0B2941;
  border: 1px solid #DBE6F3;
  border-top: none;
  border-bottom: none;
  padding: 12px 14px 16px;
}
.project-page .chat-input-bar {
  background: transparent;
  border: none;
  padding: 0;
  position: sticky; bottom: .25rem; z-index: 2;
}
.project-page .chat-input-wrap {
  background: #F4F9FF;
  border: 1px solid #DBE6F3;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: .4rem .6rem;
  display: flex;
  align-items: flex-end;               /* Buttons und Textfeld unten bündig */
  gap: .5rem;
  width: 50%;                     /* Eingabebereich ~50% der Chatbox-Breite */
  margin: 0 auto;                     /* zentriert innerhalb der Chatbox */
}
.project-page #chatInput {
  flex: 1 1 auto;                     /* Textfeld dehnt sich innerhalb der Wrap auf freie Breite */
  min-height: auto !important;        /* nur eine Textzeile bei leerem Feld */
  max-height: 45vh;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #0B2941;
  padding: 0 !important;
  margin: 0;
}
.project-page .upload-inside {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 1px solid #DBE6F3;
  border-radius: 10px;
  background: transparent;
  color: #476887;
  display: flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right {
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: .5rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* (Weitere bestehende Button-Styles wie .btn-primary oder .btn-ghost bleiben erhalten) */


/* === PATCH: Projektseite (projekt.html) – Hero linksbündig + Details sichtbar === */
body.project-page .project-hero{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 var(--edge) !important;
  margin:.35rem 0 .25rem !important;
}
body.project-page .project-title{
  text-align:left !important;
  margin:.2rem 0 !important;
  font-weight:800;
}
body.project-page .breadcrumb-nav-top{ margin-left:auto !important; }

/* Sicherheitsnetz: Details-Card auf der Projektseite nicht verstecken */
body.project-page #projektInfoBox,
body.project-page .projekt-info-box{
  display:block !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
}

/* ============================
   Projektseite: gezielte Neutralisierung
   (verhindert 80%-Innenbreiten & Doppelrahmen aus älteren Regeln)
   ============================ */

/* Auf der Projektseite sind Topbar/Verlauf/Input immer 100% breit */
.project-page .project-chat .chat-container > .chat-inner > .chat-topbar,
.project-page .project-chat .chat-container > .chat-inner > .chat-messages,
.project-page .project-chat .chat-container > .chat-inner > .chat-input-bar{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Innen keine Außenrahmen – der einzige Rahmen liegt auf .chat-block */
.project-page .project-chat .chat-container > .chat-inner > .chat-topbar,
.project-page .project-chat .chat-container > .chat-inner > .chat-messages,
.project-page .project-chat .chat-container > .chat-inner > .chat-input-bar .chat-input-wrap{
  border: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

/* Bubbles nicht verengen */
.project-page .project-chat .chat-messages .message{
  max-width: none !important;
  width: 100% !important;
}


/* ============================
   Projektseite – gezielte Neutralisierung älterer Regeln
   (verhindert 80%-Innenbreiten & Doppelrahmen)
   ============================ */

/* Volle Innenbreite erzwingen */
.project-page .project-chat .chat-container > .chat-inner > .chat-topbar,
.project-page .project-chat .chat-container > .chat-inner > .chat-messages,
.project-page .project-chat .chat-container > .chat-inner > .chat-input-bar{
  width:100% !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
}

/* Innen keine Außenrahmen (einziger Rahmen: .chat-block) */
.project-page .project-chat .chat-container > .chat-inner > .chat-topbar,
.project-page .project-chat .chat-container > .chat-inner > .chat-messages,
.project-page .project-chat .chat-container > .chat-inner > .chat-input-bar .chat-input-wrap{
  border:0 !important; box-shadow:none !important; background-clip:padding-box;
}

/* Bubbles nicht verengen */
.project-page .project-chat .chat-messages .message{
  max-width:none !important; width:100% !important;
}