/* ===========================================================================
   bs23_white_chat.css — bausync Chat-Flow Designsystem
   ===========================================================================
   Used by:       /lv/welcome_compare, /design-chat
   Namespace:     .lvc-*  (generic enough for any chat-style flow)
   Live demo:     /design-chat
   Source views:  resources/views/lv/welcome_compare.blade.php
                  resources/views/template/template_design_chat.blade.php

   ---------------------------------------------------------------------------
   AGENT QUICK-REFERENCE — read this first when building a new chat UI
   ---------------------------------------------------------------------------

   CONTAINER:
     .lvc-page              page bg + padding (wraps everything)
     .lvc-wrap              centered 880px column, gap 26px between rows
     .lvc-row               flex row: avatar + bubble (AI side)
     .lvc-row.user          right-aligned row (no avatar)
     .lvc-row.lvc-row-firm  firm-card row, no avatar, indented 92px
     .lvc-row.input-row     wraps inline-input pill

   AVATAR:
     .lvc-avatar            round 76px, floating animation, AI avatar
     .lvc-avatar.user       dark variant with initials (rarely used)

   BUBBLES:
     .lvc-bubble            standard AI bubble (white, tail-left)
     .lvc-row.user .lvc-bubble  auto: dark, tail-right
     .lvc-bubble.lvc-pop    short emphasized green bubble (bounce-in)
     .lvc-step-pill         small green pill INSIDE a bubble ("Schritt 1 · ...")
     .lvc-hint              gray hint text at END of a bubble ("✨ ...")
     .lvc-typing            three-dot typing indicator (use INSTEAD of bubble)

   BUTTONS:
     .lvc-quick-btn         pill button (white, gray border)
     .lvc-quick-btn.primary green filled (use for the main next-step CTA)
     .lvc-quick-btn .arr    animated arrow span inside the button

   DATA & STATUS:
     .lvc-data              container for list of .lvc-data-item rows
     .lvc-data-item         3-col grid: name | pill | importance toggle
     .lvc-pill.ok           green status pill (vorhanden / done)
     .lvc-pill.missing      red status pill (fehlt / error)
     .lvc-imp               3-step importance toggle (Pflicht/Optional/Egal)

   CHIPS:
     .lvc-chips             flex container for chips
     .lvc-chip              tag-style multi-select
     .lvc-chip.active       green filled
     .lvc-chip.add          dashed "+ neu" chip

   DROP & ATTACH:
     .lvc-drop              standalone large dashed drop-zone
     .lvc-attach            container for in-firm attach zone (status below)
     .lvc-dropzone          combined file+text dashed box
       .lvc-dropzone-clip   left paperclip button (opens file picker)
       .lvc-dropzone-input  middle textarea
       .lvc-dropzone-send   right submit button
     .lvc-attach-status     feedback line below dropzone (.ok/.err variants)

   FIRM CARD (one provider with documents):
     .lvc-firm-wrap         shadow + radius wrapper
     .lvc-firm              the card itself
     .lvc-firm.empty        muted variant — provider has no offer yet
     .lvc-firm.lvc-drag     active drag-over state (green solid border)
     .lvc-firm-head         card header (pavatar / pinfo / pcount)
     .lvc-doc-list          contains .lvc-doc rows
     .lvc-doc               doc row (click toggles .checked)
     .lvc-doc.checked       selected (white bg, no opacity dim)
     .lvc-doc-icon.pdf|.xls|.crbx   colored type tag
     .lvc-doc-badge         "✨ Vorschlag" badge (knowledge-base hint)
     .lvc-doc-empty         italic "no docs yet" placeholder

   PROGRESS / RESULT:
     .lvc-analyzing         card with spinner + progress list (use addAiCard)
     .lvc-spinner           circular loading ring
     .lvc-progress-row.done|.active|.pending   3 progress states
     .lvc-stats             3-col grid of result stats
     .lvc-stat              .num (big green) + .lbl (small gray)
     .lvc-finding           border-left hint box
     .lvc-finding.warn      orange
     .lvc-finding.info      blue
     (no modifier)          green default

   INLINE INPUT (user text reply):
     .lvc-input-pill        pill-shaped text input with send button
     .lvc-input-hint        gray hint below the pill

   ---------------------------------------------------------------------------
   RECIPES (composition patterns)
   ---------------------------------------------------------------------------
   AI greeting:     .lvc-row > .lvc-avatar + .lvc-bubble[h2/p/.lvc-hint]
   AI emphasis:     .lvc-row > .lvc-avatar + .lvc-bubble.lvc-pop[p]
   AI typing:       .lvc-row > .lvc-avatar + .lvc-typing (no bubble!)
   User reply:      .lvc-row.user > .lvc-bubble  (NO avatar)
   User input:      .lvc-row.user.input-row > div > .lvc-input-pill + .lvc-input-hint
   Quick-reply CTA: place .lvc-quick-btn inside a .lvc-row.user div
   Firm card:       .lvc-row.lvc-row-firm > .lvc-firm-wrap > .lvc-firm (no avatar)
   Progress card:   .lvc-row > .lvc-avatar + .lvc-analyzing (NOT inside a bubble)

   ---------------------------------------------------------------------------
   ANTI-PATTERNS (do NOT do this)
   ---------------------------------------------------------------------------
   - DO NOT put .lvc-bubble outside .lvc-row — it loses layout + tail anchor.
   - DO NOT add a user avatar — user replies use plain .lvc-row.user.
   - DO NOT animate the avatar <img>; the float must run on .lvc-avatar
     (the container), otherwise object-fit creates a white sliver at bottom.
   - DO NOT put .lvc-analyzing inside .lvc-bubble — it IS a bubble alternative.
   - DO NOT use custom font sizes; the bubble's h2/p/strong rules already set them.
   - DO NOT mix .lvc-doc inside arbitrary divs; it expects .lvc-doc-list parent.

   ---------------------------------------------------------------------------
   JS HELPER MAPPING  (welcome_compare.blade.php @section('scripts'))
   ---------------------------------------------------------------------------
   addAiBubble(html)            → .lvc-row > .lvc-avatar + .lvc-bubble
   addAiPop(html)               → .lvc-row > .lvc-avatar + .lvc-bubble.lvc-pop
   addAiCard(innerHtml, cls)    → .lvc-row > .lvc-avatar + .<cls> (e.g. lvc-analyzing)
   addAiFirm(firmHtml)          → .lvc-row.lvc-row-firm > .lvc-firm-wrap
   addUserBubble(text)          → .lvc-row.user > .lvc-bubble
   addTyping() / removeTyping() → .lvc-row[data-typing] > .lvc-avatar + .lvc-typing
   addInputRow(ph, hint, cb)    → .lvc-row.user.input-row > .lvc-input-pill
   aiSays(html, delay, after)   → typing → addAiBubble
   aiShowsCard(html, cls, ...)  → typing → addAiCard
   scrollToEyeLevel($el)        → scroll so $el sits at 45% viewport height

   ---------------------------------------------------------------------------
   DESIGN TOKENS (mirror /design)
   ---------------------------------------------------------------------------
   Primary green:    #6B9B62 / hover #72AE74 / light bg #E8F0E5 / text #4B7344
   Error red:        #9B6262 / light bg #F4E3E3
   Warn orange:      #FF931E / light bg #FFE9C9 / text #B96A00
   Info blue:        #168DCB / light bg #E8F0F8 / text #2C4870
   Body bg:          #EDEDED   Card bg: #FFFFFF   Subtle bg: #F5F5F5
   Border:           #E5E5E5   Border-radius: 6px (bubbles 18px chat-specific)
   Font:             Abel, Helvetica, Arial, sans-serif
   Avatar image:     /images/portrait_ai.png  (object-position: center 20%)
   =========================================================================== */

/* ===== Page-Layout =========================================================
   USE:     wrap the entire chat in .lvc-page > .lvc-wrap
   AVOID:   nesting another .lvc-wrap inside .lvc-wrap
   COMBINE: .lvc-wrap must contain .lvc-row elements only (any variant)
   JS:      set $chat = $('.lvc-wrap') and append .lvc-row nodes there
   ============================================================================ */
.lvc-page {
    background: #EDEDED;
    min-height: calc(100vh - 120px);
    padding: 30px 20px 60px;
    font-family: Abel, Helvetica, Arial, sans-serif;
}
.lvc-wrap {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ===== Bubble-Row (Container for Avatar + Bubble) ==========================
   USE:     every chat message lives inside a .lvc-row
   AVOID:   placing .lvc-bubble / .lvc-typing / .lvc-analyzing outside .lvc-row
   COMBINE: + .lvc-avatar + (.lvc-bubble | .lvc-typing | .lvc-analyzing)
            modifier .user    → right-aligned, no avatar (user reply)
            modifier .lvc-row-firm  → no avatar, indented (firm card row)
            modifier .input-row     → vertical-center alignment for input pill
   JS:      every helper (addAi*, addUser*) creates a .lvc-row internally
   ============================================================================ */
.lvc-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(14px);
    animation: lvc-in 0.45s cubic-bezier(.2,.7,.2,1) forwards;
}
.lvc-row.user { flex-direction: row-reverse; }
@keyframes lvc-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Avatar (Ana / portrait_ai.png) ======================================
   USE:     left side of an AI .lvc-row
   AVOID:   adding animation to the <img> directly (causes white sliver),
            putting an avatar on .lvc-row.user (user replies have NO avatar)
   COMBINE: .lvc-avatar.user → dark variant with initials (rarely used)
   JS:      AVATAR constant in welcome_compare.blade.php = '/images/portrait_ai.png'
   ============================================================================ */
.lvc-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    display: flex; align-items: center; justify-content: center;
    animation: lvc-float 6s ease-in-out infinite;
}
.lvc-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.lvc-avatar.user {
    background: #4B4B4B;
    color: #fff;
    font-size: 18px;
}
@keyframes lvc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ===== Bubble (AI white / User dark) =======================================
   USE:     primary container for any AI or user text message
   AVOID:   custom font-size on direct children (h2/p/strong already styled),
            nesting .lvc-bubble inside .lvc-bubble
   COMBINE: parent .lvc-row → AI variant (white, tail-left)
            parent .lvc-row.user → auto-dark variant (tail-right)
            modifier .lvc-pop → green emphasis (see Pop-Bubble section)
            child .lvc-step-pill at top of bubble (small green chip)
            child .lvc-hint at bottom of bubble (gray hint line)
   JS:      addAiBubble(html), addUserBubble(text), aiSays(html, delay, after)
   ============================================================================ */
.lvc-bubble {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 22px 28px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.04);
    max-width: 720px;
    color: #4B4B4B;
    line-height: 1.35;
}
.lvc-bubble::before {
    content: '';
    position: absolute;
    bottom: 14px;
    left: -8px;
    width: 18px; height: 18px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 4px;
}
.lvc-row.user .lvc-bubble {
    background: #4B4B4B;
    color: #fff;
}
.lvc-row.user .lvc-bubble p,
.lvc-row.user .lvc-bubble strong,
.lvc-row.user .lvc-bubble h2,
.lvc-row.user .lvc-bubble em,
.lvc-row.user .lvc-bubble code,
.lvc-row.user .lvc-bubble a { color: #fff; }
.lvc-row.user .lvc-bubble code { background: rgba(255,255,255,0.15); }
.lvc-row.user .lvc-bubble::before {
    left: auto; right: -8px;
    background: #4B4B4B;
}

.lvc-bubble h2 {
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 10px;
    color: #323232;
}
.lvc-bubble p {
    font-size: 18px;
    margin: 4px 0;
    line-height: 1.35;
    color: #4B4B4B;
}
.lvc-bubble strong { color: #323232; }

/* Schritt-Pill (z. B. „Schritt 1 · Unterlagen") --- innerhalb einer Bubble */
.lvc-step-pill {
    display: inline-block;
    background: #E8F0E5;
    color: #4B7344;
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ===== Pop-Bubble (short emphasized green hint) ============================
   USE:     short attention-grabbing AI hint (1-2 sentences),
            often used as a scroll anchor for the next step
   AVOID:   long content (kills the "pop" feel) — keep to 1-2 lines
   COMBINE: same as .lvc-bubble; only adds color + bounce animation
   JS:      addAiPop(html)
   ============================================================================ */
.lvc-bubble.lvc-pop {
    background: #E8F0E5;
    color: #4B7344;
    box-shadow: 0 6px 20px -8px rgba(107,155,98,0.4), 0 1px 3px rgba(0,0,0,0.04);
    animation: lvc-pop 0.45s cubic-bezier(.34,1.56,.64,1) forwards;
}
.lvc-bubble.lvc-pop::before { background: #E8F0E5; }
.lvc-bubble.lvc-pop p { color: #4B7344; }
.lvc-bubble.lvc-pop strong { color: #2F5E2A; }
@keyframes lvc-pop {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* Kleiner Hinweistext am Ende einer Bubble */
.lvc-hint {
    font-size: 13px;
    color: #999;
    margin-top: 14px;
    display: flex; align-items: center; gap: 6px;
}

/* ===== Typing-Indicator (3 dots) ===========================================
   USE:     show 400-900ms BEFORE every new AI message (default 700ms)
   AVOID:   leaving typing in the chat — always removeTyping() before adding bubble
   COMBINE: replaces .lvc-bubble inside .lvc-row (do NOT use both at once)
   JS:      addTyping(), removeTyping(), aiSays/aiShowsCard handle it automatically
   ============================================================================ */
.lvc-typing {
    display: inline-flex; gap: 4px;
    padding: 16px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18);
    position: relative;
}
.lvc-typing::before {
    content: '';
    position: absolute;
    bottom: 14px; left: -8px;
    width: 18px; height: 18px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 4px;
}
.lvc-typing span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #C8CDD3;
    animation: lvc-typing 1.2s infinite ease-in-out;
}
.lvc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lvc-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lvc-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== Quick-Reply Buttons =================================================
   USE:     CTA buttons that advance the flow (e.g. "Los geht's", "Auswerten")
   AVOID:   more than one .primary in a single row (one main CTA per step)
   COMBINE: place inside .lvc-row.user > div for right-aligned button group,
            modifier .primary → green filled (use for main next-step CTA),
            child .arr → animated arrow span (recommended for primary)
   JS:      no helper — append HTML directly to a .lvc-row.user
   ============================================================================ */
.lvc-quick {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-left: 80px;
    margin-top: -8px;
}
.lvc-quick-btn {
    background: #fff;
    border: 1.5px solid #DDD;
    border-radius: 999px;
    padding: 11px 22px;
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #4B4B4B;
    cursor: pointer;
    box-shadow: 0 3px 10px -4px rgba(0,0,0,0.10);
    transition: all 0.18s ease;
}
.lvc-quick-btn:hover:not([disabled]) {
    background: #6B9B62;
    border-color: #6B9B62;
    color: #fff;
    transform: translateY(-1px);
}
.lvc-quick-btn.primary {
    background: #6B9B62;
    color: #fff;
    border-color: #6B9B62;
    box-shadow: 0 6px 16px -6px rgba(107,155,98,0.55);
}
.lvc-quick-btn.primary:hover:not([disabled]) {
    background: #72AE74;
    border-color: #72AE74;
}
.lvc-quick-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.lvc-quick-btn .arr {
    display: inline-block; margin-left: 5px;
    transition: transform 0.2s ease;
}
.lvc-quick-btn:hover:not([disabled]) .arr { transform: translateX(3px); }

/* ===== Data list (key/value + status pill + importance toggle) =============
   USE:     structured list of extracted fields with status + importance
   AVOID:   putting freeform text in .lvc-data-item — it expects 3 grid columns
   COMBINE: .lvc-data-item children (in order):
              1) .lvc-d-name (with optional <small> for sub-info)
              2) .lvc-pill.ok|.missing (status)
              3) .lvc-imp (importance toggle)
   JS:      no helper — render inside a .lvc-bubble
   ============================================================================ */
.lvc-data {
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.lvc-data-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 14px 18px;
    transition: all 0.18s ease;
}
.lvc-data-item:hover { background: #fff; border-color: #6B9B62; }
.lvc-data-item .lvc-d-name { font-size: 18px; color: #323232; }
.lvc-data-item .lvc-d-name small {
    display: block; color: #999; font-size: 14px; margin-top: 2px;
}

/* Status-Pill: ok (gruen) / missing (rot) */
.lvc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.lvc-pill.ok { background: #E8F0E5; color: #4B7344; }
.lvc-pill.missing { background: #F4E3E3; color: #9B6262; }
.lvc-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Wichtigkeit-Toggle (3-Stufen-Button) */
.lvc-imp {
    display: inline-flex; gap: 2px;
    background: #fff; border: 1px solid #DDD;
    border-radius: 6px; padding: 3px;
}
.lvc-imp button {
    border: none; background: transparent;
    padding: 6px 13px; border-radius: 4px;
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 14px; color: #4B4B4B;
    cursor: pointer;
    transition: all 0.15s ease;
}
.lvc-imp button.active { background: #6B9B62; color: #fff; }

/* ===== Chips (multi-select tags) ===========================================
   USE:     toggleable tags (e.g. selecting comparison criteria)
   AVOID:   using for single-choice — use .lvc-imp or radio button instead
   COMBINE: .lvc-chip.active → green filled,
            .lvc-chip.add    → dashed "+ neu" placeholder,
            child .chk       → ✓/○ icon span (recommended)
   JS:      typical pattern: $.on('click', '.lvc-chip:not(.add)', toggle .active)
   ============================================================================ */
.lvc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lvc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px;
    background: #fff; border: 1.5px solid #DDD;
    font-size: 16px; color: #4B4B4B;
    cursor: pointer;
    transition: all 0.18s ease;
}
.lvc-chip:hover { border-color: #6B9B62; transform: translateY(-1px); }
.lvc-chip.active {
    background: #6B9B62; color: #fff; border-color: #6B9B62;
    box-shadow: 0 6px 16px -6px rgba(107,155,98,0.55);
}
.lvc-chip.active .chk { color: #fff; }
.lvc-chip .chk { font-size: 13px; color: #C8CDD3; }
.lvc-chip.add { border-style: dashed; color: #999; }

/* ===== Standalone Drop-Zone (large, centered) ==============================
   USE:     single upload area outside a firm card (rare — most uploads live
            inside .lvc-firm via .lvc-dropzone)
   AVOID:   using inside .lvc-firm — use .lvc-dropzone (combined attach) there
   COMBINE: children .icn / .ttl / .sub for icon + title + subtitle
   JS:      typical pattern: bind click → file picker; dragover → highlight
   ============================================================================ */
.lvc-drop {
    margin-top: 14px;
    border: 2px dashed #C8CDD3;
    border-radius: 6px;
    padding: 30px 22px;
    text-align: center;
    color: #999;
    background: #FAFAFA;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lvc-drop:hover { border-color: #6B9B62; color: #4B7344; background: #F4F8F2; }
.lvc-drop .icn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 50%;
    background: #E8F0E5; color: #4B7344;
    font-size: 24px; margin-bottom: 8px;
}
.lvc-drop .ttl { font-size: 18px; color: #4B4B4B; }
.lvc-drop .sub { font-size: 13px; margin-top: 4px; color: #999; }

/* ===== Firm card with document list ========================================
   USE:     show one provider per card with their submitted documents
   AVOID:   placing inside a .lvc-bubble (firm cards are full-width rows of
            their own — use .lvc-row.lvc-row-firm > .lvc-firm-wrap)
   COMBINE: structure is fixed:
              .lvc-firm-wrap > .lvc-firm > .lvc-firm-head + .lvc-doc-list
            modifier .empty   → muted variant (provider invited, no offer yet)
            modifier .lvc-drag → drag-over highlight (managed by JS)
   JS:      addAiFirm(firmHtml), appendDocToFirm($firm, doc, classification)
   ============================================================================ */
.lvc-firms { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.lvc-firm-wrap {
    flex: 1; max-width: 720px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.04);
    border-radius: 8px;
}
/* Firmen-Row ohne Avatar — Karte beginnt buendig wie eine AI-Bubble */
.lvc-row.lvc-row-firm { padding-left: 92px; }
.lvc-firm-wrap .lvc-firm {
    box-shadow: none;
    margin: 0;
}
.lvc-firm {
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.18s ease;
}
.lvc-firm:hover { border-color: #C0C8B8; }
.lvc-firm-head {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #E5E5E5;
}
.lvc-firm-head .pavatar {
    width: 42px; height: 42px; border-radius: 6px;
    background: #D8E5F4; color: #2C4870;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.lvc-firm-head .pinfo { flex: 1; }
.lvc-firm-head .pname { font-size: 18px; color: #323232; }
.lvc-firm-head .pmeta { font-size: 13px; color: #999; margin-top: 2px; }
.lvc-firm-head .pcount {
    font-size: 13px; color: #4B7344;
    background: #E8F0E5; padding: 4px 10px; border-radius: 4px;
}

/* Dokumentliste innerhalb der Firmen-Karte */
.lvc-doc-list { padding: 6px 8px; }
.lvc-doc {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.18s ease;
}
.lvc-doc:hover { background: #fff; }
.lvc-doc.checked { background: #fff; }
.lvc-doc:not(.checked) { opacity: 0.45; }
.lvc-doc:not(.checked):hover { opacity: 0.75; }
.lvc-doc-check {
    width: 20px; height: 20px; border-radius: 4px;
    border: 2px solid #C8CDD3; background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.lvc-doc.checked .lvc-doc-check { background: #6B9B62; border-color: #6B9B62; }
.lvc-doc.checked .lvc-doc-check::after { content: '✓'; color: #fff; font-size: 13px; line-height: 1; }
.lvc-doc-icon {
    width: 36px; height: 36px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: bold; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.lvc-doc-icon.pdf  { background: #F4E3E3; color: #9B6262; }
.lvc-doc-icon.xls  { background: #E8F0E5; color: #4B7344; }
.lvc-doc-icon.crbx { background: #FFE9C9; color: #B96A00; }
.lvc-doc-info { flex: 1; min-width: 0; }
.lvc-doc-name { font-size: 16px; color: #323232; }
.lvc-doc-meta { font-size: 12px; color: #999; margin-top: 1px; }
.lvc-doc-view {
    font-size: 12px; color: #168DCB; text-decoration: none;
    padding: 4px 10px; border-radius: 4px;
}
.lvc-doc-view:hover { background: #E8F0F8; }
.lvc-doc-badge {
    display: inline-block;
    margin-left: 8px; padding: 2px 8px;
    background: #E8F0E5; color: #4B7344;
    border-radius: 4px; font-size: 11px; vertical-align: middle;
}

/* Empty-State innerhalb einer Firma (kein Angebot eingereicht) */
.lvc-firm.empty .lvc-firm-head { background: #FAFAFA; }
.lvc-firm.empty .lvc-firm-head .pcount { color: #B96A00; background: #FFE9C9; }
.lvc-doc-empty {
    padding: 14px 18px;
    font-size: 14px; color: #999; font-style: italic;
}

/* ===== Attach-Zone (combined file + text drop-zone) ========================
   USE:     inside .lvc-firm — lets user add files OR free text per provider
   AVOID:   using outside .lvc-firm — .lvc-attach has top border + bg that
            assume it sits under .lvc-doc-list
   COMBINE: required children (in order):
              .lvc-dropzone > .lvc-dropzone-row > .lvc-dropzone-clip + textarea
              .lvc-dropzone > .lvc-dropzone-bar > hint + .lvc-dropzone-send
              sibling <input type="file" hidden> + .lvc-attach-status
            data-* hooks expected by JS: [data-dropzone], [data-clip],
              [data-text-input], [data-text-send], [data-status]
   JS:      lv_offer_attach (files), lv_offer_attach_email (text)
   ============================================================================ */
.lvc-attach {
    padding: 12px 14px 14px;
    background: #FAFAFA;
    border-top: 1px solid #EEE;
}
.lvc-dropzone {
    border: 2px dashed #C8CDD3;
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.lvc-dropzone:focus-within {
    border-style: solid;
    border-color: #6B9B62;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(107,155,98,0.12);
}
.lvc-firm.lvc-drag .lvc-dropzone {
    border-color: #6B9B62;
    border-style: solid;
    background: #E8F0E5;
}
.lvc-dropzone-row {
    display: flex; align-items: flex-start; gap: 10px;
}
.lvc-dropzone-clip {
    width: 36px; height: 36px; border-radius: 8px;
    background: #E8F0E5; color: #4B7344;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
    border: none;
    padding: 0;
}
.lvc-dropzone-clip:hover { background: #D5E5D0; transform: translateY(-1px); }
.lvc-dropzone-clip svg { display: block; }
.lvc-dropzone-input {
    flex: 1;
    border: none;
    outline: none;
    resize: vertical;
    min-height: 38px;
    max-height: 220px;
    background: transparent;
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #4B4B4B;
    line-height: 1.45;
    padding: 7px 2px 4px;
    box-sizing: border-box;
}
.lvc-dropzone-input::placeholder { color: #B0B5BC; }
.lvc-dropzone-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding-left: 46px;
}
.lvc-dropzone-hint { font-size: 11px; color: #B0B5BC; line-height: 1.4; }
.lvc-dropzone-hint .sep { margin: 0 6px; color: #DDD; }
.lvc-dropzone-send {
    background: #6B9B62;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: Abel, Helvetica, Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.lvc-dropzone-send:hover:not([disabled]) { background: #72AE74; }
.lvc-dropzone-send[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Status-Zeile unter der Drop-Zone (Upload-Feedback) */
.lvc-attach-status {
    margin-top: 6px;
    font-size: 12px; color: #999;
    min-height: 16px;
}
.lvc-attach-status.err { color: #9B6262; }
.lvc-attach-status.ok  { color: #4B7344; }

/* ===== Analyzing card (spinner + progress list) ============================
   USE:     show long-running analysis/parsing inline as a chat message
   AVOID:   wrapping .lvc-analyzing in .lvc-bubble — it IS a bubble alternative
            with its own tail
   COMBINE: parent .lvc-row + .lvc-avatar (so it sits beside the Ana avatar)
            child .lvc-analyzing-head (spinner + title)
            child .lvc-progress with .lvc-progress-row[.done|.active|.pending]
   JS:      addAiCard(html, 'lvc-analyzing'), aiShowsCard(html, 'lvc-analyzing', ...)
   ============================================================================ */
.lvc-analyzing {
    background: #fff;
    border-radius: 18px;
    padding: 22px 28px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.04);
    max-width: 720px;
    position: relative;
}
.lvc-analyzing::before {
    content: ''; position: absolute;
    bottom: 14px; left: -8px;
    width: 18px; height: 18px; background: #fff;
    transform: rotate(45deg); border-radius: 4px;
}
.lvc-analyzing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lvc-spinner {
    width: 22px; height: 22px;
    border: 3px solid #E8F0E5;
    border-top-color: #6B9B62;
    border-radius: 50%;
    animation: lvc-spin 0.9s linear infinite;
}
@keyframes lvc-spin { to { transform: rotate(360deg); } }
.lvc-analyzing-title { font-size: 18px; color: #323232; }

.lvc-progress { display: flex; flex-direction: column; gap: 8px; }
.lvc-progress-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #4B4B4B; }
.lvc-progress-row .ico {
    width: 18px; height: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 11px;
}
.lvc-progress-row.done .ico { background: #6B9B62; color: #fff; }
.lvc-progress-row.done .ico::after { content: '✓'; }
.lvc-progress-row.active .ico { border: 2px solid #6B9B62; background: #fff; position: relative; }
.lvc-progress-row.active .ico::after {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: #6B9B62;
    animation: lvc-pulse 1s ease-in-out infinite;
}
@keyframes lvc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}
.lvc-progress-row.pending .ico { border: 2px solid #E5E5E5; background: #fff; }
.lvc-progress-row.pending { color: #B0B5BC; }

/* ===== Result stats + findings =============================================
   USE:     summarize an analysis result inside a regular .lvc-bubble
   AVOID:   using more or fewer than 3 .lvc-stat children (grid is hardcoded
            to 3 columns)
   COMBINE: .lvc-stats > 3× .lvc-stat (.num + .lbl)
            .lvc-findings > N× .lvc-finding[.warn|.info]
              default = green, .warn = orange, .info = blue
              child .ic = small leading icon (✓ / ! / i)
   JS:      no helper — render inside a .lvc-bubble
   ============================================================================ */
.lvc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.lvc-stat {
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
}
.lvc-stat .num { font-size: 24px; color: #6B9B62; line-height: 1; }
.lvc-stat .lbl { font-size: 13px; color: #999; margin-top: 4px; }

/* Findings-Liste: ok / warn / info — als gefaerbte Border-Left-Box */
.lvc-findings { margin-top: 14px; }
.lvc-finding {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: #F5F5F5; border-left: 3px solid #6B9B62;
    border-radius: 4px; margin-top: 6px;
    font-size: 14px; color: #4B4B4B;
}
.lvc-finding.warn { border-left-color: #FF931E; background: #FFF6E8; }
.lvc-finding.info { border-left-color: #168DCB; background: #E8F0F8; }
.lvc-finding .ic { font-size: 14px; line-height: 1.4; flex-shrink: 0; }

/* ===== Inline input (pill-shaped user reply) ===============================
   USE:     when a step needs free-text input from the user (right side)
   AVOID:   leaving a permanent input bar at the bottom — show only when needed
            and remove after submit (like /onboarding does)
   COMBINE: .lvc-row.user.input-row > div > .lvc-input-pill + .lvc-input-hint
            .lvc-input-pill > <input> + .send (sphere button)
   JS:      addInputRow(placeholder, hint, onSubmit)
   ============================================================================ */
.lvc-row.input-row { align-items: center; }
.lvc-input-pill {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.04);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px 6px 22px;
    max-width: 480px;
    min-width: 280px;
}
.lvc-input-pill input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: Abel, Helvetica, Arial, sans-serif; font-size: 17px;
    color: #4B4B4B; padding: 10px 0;
}
.lvc-input-pill input::placeholder { color: #B0B5BC; }
.lvc-input-pill .send {
    width: 40px; height: 40px; border-radius: 50%;
    background: #6B9B62; color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(107,155,98,0.55);
    transition: all 0.18s ease;
    user-select: none;
    flex-shrink: 0;
}
.lvc-input-pill .send:hover { background: #72AE74; transform: scale(1.05); }
.lvc-input-hint {
    font-size: 12px; color: #999;
    margin-top: 4px; text-align: right;
    padding-right: 16px;
}