/* =================================================================
   Klariton Chat-Foundation · Shared Token-Layer
   ----------------------------------------------------------------
   Studio-Chrome (Mockup-Frame, Inbox, Touchpoint-Section)  →  DARK
   Embed-Widget (Inline / Floating / Slide-Up)              →  LIGHT
   ----------------------------------------------------------------
   Live-Code-Mapping (Empfehlung für Implementation):
     --color-brand          → --kl-brand
     --color-surface        → --kl-bg
     --color-surface-subtle → --kl-surface
     --color-border         → --kl-border
     --color-border-strong  → --kl-border-strong
     --color-text           → --kl-text
     --color-text-muted     → --kl-muted
     --color-source-biq     → --kl-src-biq      (Grün  · existing --ok)
     --color-source-mat     → --kl-src-mat      (Blau  · new)
     --color-source-world   → --kl-src-world    (Gelb  · new)
   ================================================================= */

:root {
  /* ===== STUDIO-DARK (Annotation-Frame, Inbox-Page, Studio-Mockups) ===== */
  --kl-d-bg:           #0A0A12;
  --kl-d-bg-sidebar:   #08080F;
  --kl-d-card:         #0E0E18;
  --kl-d-input:        #06060C;
  --kl-d-border:       #1E1E2E;
  --kl-d-border-strong:#2A2A40;
  --kl-d-text:         #E8EFED;
  --kl-d-muted:        #9AAFAB;
  --kl-d-dim:          #6B847F;
  --kl-d-hover:        #14142A;

  --kl-brand:          #7C7AF5;
  --kl-brand-hover:    #9290FF;
  --kl-brand-tint:     #1D1B3A;
  --kl-brand-tint-bd:  #3A3870;

  /* Status (dark variants for studio) */
  --kl-d-ok:           #5BC9A8;  --kl-d-ok-tint:    #0F2A1F;  --kl-d-ok-bd:    #1E3a2D;
  --kl-d-warn:         #D4A656;  --kl-d-warn-tint:  #2a2417;  --kl-d-warn-bd:  #3a3220;
  --kl-d-err:          #E07A6E;  --kl-d-err-tint:   #2A1817;  --kl-d-err-bd:   #4A2422;
  --kl-d-info:         #6BA4D4;  --kl-d-info-tint:  #10202E;  --kl-d-info-bd:  #1E3148;

  /* ===== WIDGET-LIGHT (Embed auf Customer-Page) ===== */
  --kl-w-bg:           #FFFFFF;
  --kl-w-page:         #F4F4F1;     /* simuliertes Customer-Page-BG */
  --kl-w-surface:      #FAFAF7;
  --kl-w-surface-2:    #F0F0EB;
  --kl-w-border:       #E5E5DF;
  --kl-w-border-strong:#D2D2CB;
  --kl-w-text:         #14141C;
  --kl-w-text-2:       #3A3A45;
  --kl-w-muted:        #6B6B73;
  --kl-w-dim:          #93938C;

  --kl-w-bubble-user:  #14141C;     /* user-bubble: schwarz */
  --kl-w-bubble-user-fg:#FAFAF7;
  --kl-w-bubble-ai:    #FFFFFF;     /* ai-bubble: weiß auf surface */
  --kl-w-bubble-ai-bd: #E5E5DF;

  /* Source-Indicator-Tokens (3 Visual-States) */
  --kl-src-biq:        #2F9F7E;  --kl-src-biq-tint:   #E7F6F0;  --kl-src-biq-bd:   #C9E8DC;
  --kl-src-mat:        #2D6FB1;  --kl-src-mat-tint:   #E6F0FA;  --kl-src-mat-bd:   #C7DCEF;
  --kl-src-world:      #A87224;  --kl-src-world-tint: #FAF1DD;  --kl-src-world-bd: #ECD7A8;

  /* Escalation (Berater) — warmer Earth-Tone */
  --kl-w-human:        #B5532B;
  --kl-w-human-tint:   #FBEEE5;
}

/* ===== STUDIO-DARK base ===== */
.studio-dark, .studio-dark body { background:var(--kl-d-bg); color:var(--kl-d-text); }
.studio-dark { font-family:Inter,ui-sans-serif,system-ui,sans-serif; }

/* ===== Type helpers ===== */
.kl-mono { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
.kl-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--kl-brand);}
.kl-eyebrow-dim{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--kl-d-dim);}
.kl-h1{font-size:30px;font-weight:500;letter-spacing:-.024em;line-height:1.1;}
.kl-h2{font-size:22px;font-weight:500;letter-spacing:-.016em;line-height:1.2;}
.kl-h3{font-size:15px;font-weight:500;letter-spacing:-.008em;line-height:1.3;}
.kl-lead{font-size:13px;line-height:1.55;color:var(--kl-d-muted);}

/* ===== Studio annotation header ===== */
.kl-ann{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kl-brand);padding:3px 8px;border-radius:999px;background:var(--kl-brand-tint);border:1px solid var(--kl-brand-tint-bd);}
.kl-ann-dim{background:#13191B;border-color:#22302E;color:var(--kl-d-muted);}
.kl-ann-warn{background:var(--kl-d-warn-tint);border-color:var(--kl-d-warn-bd);color:var(--kl-d-warn);}
.kl-ann-info{background:var(--kl-d-info-tint);border-color:var(--kl-d-info-bd);color:var(--kl-d-info);}

/* ===== Studio chrome (Mockup-Wrapper) ===== */
.kl-frame-head{border-bottom:1px solid var(--kl-d-border);background:var(--kl-d-bg-sidebar);padding:20px 40px;}
.kl-frame-title{font-size:18px;font-weight:500;letter-spacing:-.012em;color:var(--kl-d-text);}

/* ===== Widget-Stage (simulierte Customer-Page) ===== */
.kl-stage{background:var(--kl-w-page);color:var(--kl-w-text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;border-radius:12px;border:1px solid var(--kl-d-border);overflow:hidden;position:relative;}
.kl-stage-chrome{background:var(--kl-w-bg);border-bottom:1px solid var(--kl-w-border);height:46px;display:flex;align-items:center;gap:10px;padding:0 16px;}
.kl-stage-dot{width:10px;height:10px;border-radius:999px;background:#E5E5DF;}
.kl-stage-url{flex:1;background:var(--kl-w-surface-2);border-radius:6px;height:26px;display:flex;align-items:center;padding:0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--kl-w-muted);}

/* ===== Widget Card (Light) ===== */
.w-card{background:var(--kl-w-bg);border:1px solid var(--kl-w-border);border-radius:16px;box-shadow:0 1px 2px rgba(20,20,28,.04),0 12px 32px -8px rgba(20,20,28,.08);color:var(--kl-w-text);font-family:Inter,sans-serif;}
.w-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--kl-w-border);background:var(--kl-w-bg);font-size:13px;color:var(--kl-w-text);line-height:1.2;transition:all .15s ease;cursor:pointer;}
.w-chip:hover{border-color:var(--kl-w-border-strong);background:var(--kl-w-surface);}
.w-chip-plus{color:var(--kl-w-muted);font-weight:400;font-size:14px;line-height:1;width:12px;text-align:center;}
.w-input-shell{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;background:var(--kl-w-bg);border:1px solid var(--kl-w-border);border-radius:999px;}
.w-input{flex:1;background:transparent;border:0;outline:none;font-size:14px;color:var(--kl-w-text);font-family:inherit;}
.w-input::placeholder{color:var(--kl-w-muted);}
.w-icon-btn{width:36px;height:36px;border-radius:999px;background:var(--kl-w-surface);border:1px solid var(--kl-w-border);display:grid;place-items:center;color:var(--kl-w-text-2);cursor:pointer;}
.w-send-btn{width:40px;height:40px;border-radius:999px;background:var(--kl-w-text);color:var(--kl-w-bg);display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.w-send-btn:hover{background:var(--kl-brand);}

/* ===== KI-Berater Label ===== */
.w-ai-label{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--kl-w-text);color:var(--kl-w-bg);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.w-ai-label::before{content:"";width:10px;height:10px;border-radius:999px;background:radial-gradient(circle at 30% 30%, #FFD37A 0%, #B5532B 60%, #6B2E12 100%);display:inline-block;}
.w-ai-label-soft{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:var(--kl-src-biq-tint);color:var(--kl-src-biq);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}

/* ===== Context Pill ===== */
.w-ctx-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--kl-w-border);background:var(--kl-w-surface);font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--kl-w-text-2);letter-spacing:.04em;}
.w-ctx-pill .lbl{color:var(--kl-w-muted);}
.w-ctx-pill .val{color:var(--kl-w-text);font-weight:500;}
.w-ctx-pill .dot{width:6px;height:6px;border-radius:999px;background:var(--kl-w-human);}

/* ===== Persona-Tabs (Endkunde wählt seinen Kontext) ===== */
.w-personas{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;}
.w-personas::-webkit-scrollbar{display:none;}
.w-persona{flex-shrink:0;background:transparent;border:0;padding:11px 4px;margin-right:18px;font:inherit;font-size:13.5px;color:var(--kl-w-muted);cursor:pointer;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .12s ease,border-color .12s ease;}
.w-persona:hover{color:var(--kl-w-text);}
.w-persona[aria-selected="true"]{color:var(--kl-w-text);border-bottom-color:var(--kl-brand);}
.w-persona .pdot{width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.45;flex-shrink:0;}
.w-persona[aria-selected="true"] .pdot{background:var(--kl-brand);opacity:1;}
.w-persona .pcount{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--kl-w-dim);}
/* Persona-Pill (in Konversation / Studio-Anzeige) */
.w-persona-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;border-radius:999px;border:1px solid #D9D8FA;background:#EEEEFC;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#4E4CC2;}
.w-persona-pill .pdot{width:6px;height:6px;border-radius:999px;background:#6361E6;}

/* ===== Bubbles ===== */
.w-bubble-user{background:var(--kl-w-bubble-user);color:var(--kl-w-bubble-user-fg);padding:11px 16px;border-radius:18px 18px 4px 18px;font-size:14px;line-height:1.45;max-width:80%;}
.w-bubble-ai{background:var(--kl-w-bubble-ai);border:1px solid var(--kl-w-bubble-ai-bd);color:var(--kl-w-text);padding:14px 16px;border-radius:4px 18px 18px 18px;font-size:14px;line-height:1.5;max-width:88%;}
.w-bubble-ai b{font-weight:600;color:var(--kl-w-text);}

/* ===== Source-Indicator (Footer einer AI-Antwort) ===== */
.w-src{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 8px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;border:1px solid transparent;font-weight:500;}
.w-src .dot{width:7px;height:7px;border-radius:999px;flex-shrink:0;}
.w-src-biq  {background:var(--kl-src-biq-tint);   border-color:var(--kl-src-biq-bd);   color:var(--kl-src-biq);}
.w-src-biq   .dot{background:var(--kl-src-biq);}
.w-src-mat  {background:var(--kl-src-mat-tint);   border-color:var(--kl-src-mat-bd);   color:var(--kl-src-mat);}
.w-src-mat   .dot{background:var(--kl-src-mat);}
.w-src-world{background:var(--kl-src-world-tint); border-color:var(--kl-src-world-bd); color:var(--kl-src-world);}
.w-src-world .dot{background:var(--kl-src-world);}

/* ===== Feedback (👍 / 👎) ===== */
.w-fb-btn{width:30px;height:30px;border-radius:999px;background:transparent;border:1px solid var(--kl-w-border);display:grid;place-items:center;color:var(--kl-w-muted);cursor:pointer;font-size:13px;line-height:1;}
.w-fb-btn:hover{background:var(--kl-w-surface);color:var(--kl-w-text);}

/* ===== Berater (Human Escalation) Card ===== */
.w-human-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--kl-w-surface);border:1px solid var(--kl-w-border);cursor:pointer;transition:all .15s ease;}
.w-human-card:hover{border-color:var(--kl-w-border-strong);background:var(--kl-w-surface-2);}
.w-human-avatar{width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg, #B5532B 0%, #6B2E12 100%);color:#FAFAF7;display:grid;place-items:center;font-weight:500;font-size:13px;flex-shrink:0;}
.w-human-name{font-size:13.5px;font-weight:500;color:var(--kl-w-text);}
.w-human-status{font-size:11.5px;color:var(--kl-w-muted);display:flex;align-items:center;gap:6px;margin-top:1px;}
.w-human-status::before{content:"";width:6px;height:6px;border-radius:999px;background:#2F9F7E;display:inline-block;}

/* ===== Disclaimer ===== */
.w-disclaimer{font-size:11px;color:var(--kl-w-muted);line-height:1.5;display:flex;align-items:flex-start;gap:7px;}
.w-disclaimer::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--kl-w-human);display:inline-block;margin-top:7px;flex-shrink:0;}

/* ===== Maximize Button (top-right) ===== */
.w-max-btn{width:32px;height:32px;border-radius:999px;background:var(--kl-w-surface);border:1px solid var(--kl-w-border);color:var(--kl-w-text-2);display:grid;place-items:center;cursor:pointer;}
.w-max-btn:hover{background:var(--kl-w-surface-2);}

/* ===== Typing Indicator ===== */
.w-typing{display:inline-flex;gap:5px;padding:14px 18px;border:1px solid var(--kl-w-bubble-ai-bd);border-radius:4px 18px 18px 18px;background:var(--kl-w-bg);}
.w-typing span{width:7px;height:7px;border-radius:999px;background:var(--kl-w-dim);animation:wtype 1.2s ease-in-out infinite;}
.w-typing span:nth-child(2){animation-delay:.15s;}
.w-typing span:nth-child(3){animation-delay:.3s;}
@keyframes wtype { 0%, 60%, 100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

/* ===== Floating-Button (Closed-State) ===== */
.w-fab{width:60px;height:60px;border-radius:999px;background:var(--kl-w-text);color:var(--kl-w-bg);display:grid;place-items:center;box-shadow:0 8px 24px -4px rgba(20,20,28,.3);cursor:pointer;}
.w-fab:hover{background:var(--kl-brand);}

/* ===== Studio Card-Pattern (für Inbox / Touchpoint) ===== */
.kl-card{border:1px solid var(--kl-d-border);background:var(--kl-d-card);border-radius:12px;}
.kl-input{background:var(--kl-d-input);border:1px solid var(--kl-d-border-strong);color:var(--kl-d-text);border-radius:8px;height:36px;padding:0 12px;font-size:13px;}
.kl-btn-primary{background:var(--kl-brand);color:#0A0A18;height:36px;padding:0 14px;font-size:13px;font-weight:500;border-radius:8px;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;}
.kl-btn-primary:hover{background:var(--kl-brand-hover);}
.kl-btn-ghost{background:transparent;color:var(--kl-d-text);height:36px;padding:0 12px;font-size:13px;border-radius:8px;border:1px solid var(--kl-d-border-strong);display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.kl-btn-ghost:hover{background:var(--kl-d-hover);}

.kl-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;}
.kl-pill-ok{background:var(--kl-d-ok-tint);border-color:var(--kl-d-ok-bd);color:var(--kl-d-ok);}
.kl-pill-warn{background:var(--kl-d-warn-tint);border-color:var(--kl-d-warn-bd);color:var(--kl-d-warn);}
.kl-pill-info{background:var(--kl-d-info-tint);border-color:var(--kl-d-info-bd);color:var(--kl-d-info);}
.kl-pill-brand{background:var(--kl-brand-tint);border-color:var(--kl-brand-tint-bd);color:var(--kl-brand);}
.kl-pill-dim{background:#13191B;border-color:#22302E;color:var(--kl-d-muted);}

/* Source pills (dark studio variant) */
.kl-pill-src-biq  {background:#0F2A1F;border-color:#1E3a2D;color:#5BC9A8;}
.kl-pill-src-mat  {background:#10202E;border-color:#1E3148;color:#6BA4D4;}
.kl-pill-src-world{background:#2a2417;border-color:#3a3220;color:#D4A656;}

.kl-grid-bg{background-image:linear-gradient(to right,#15152480 1px,transparent 1px),linear-gradient(to bottom,#15152480 1px,transparent 1px);background-size:60px 40px;}