.kib-chat-input{
    position:relative;
    display:flex;
    flex-direction: column;
    gap:.75rem;
    background:#fff;border:1px solid #e0e0e0;border-radius:2rem;
    padding:1rem 5rem 5rem 1rem;   /* Platz rechts/unten für Icons */

}

.kib-chat-input input[type="text"]{
flex:1;
border:none;
outline:none;
font-size:1.05rem;
}

/* -------- runde Icon-Buttons -------- */
.kib-circle{
width:46px;height:46px;
border:1px solid #e0e0e0;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

/* -------- pillförmiger Upload-Button -------- */
.kib-pill{
padding:.35rem 1.1rem;
border:1px solid #e0e0e0;
border-radius:1.5rem;
background:#fff;
font-size:.95rem;
display:inline-flex;
align-items:center;
gap:.35rem;
cursor:pointer;
position:relative;          /* verstecktes file input */
}
.kib-pill input[type="file"]{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}

/* -------- schwarzer Send-Button -------- */
.kib-send{
width:46px;height:46px;
border:none;
border-radius:50%;
background:#000;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

/* -------- Disable / iOS Reset -------- */
.kib-chat-input button,
.kib-chat-input label.kib-pill{
appearance:none;
-webkit-appearance:none;
}

.kib-circle:disabled,
.kib-pill:disabled,
.kib-send:disabled{
opacity:.4;
cursor:not-allowed;
}

/* ============== Chat- & Settings-Box ============== */

.kib-settings-box{
background:#fff;
border:1px solid #ddd;
border-radius:1rem;
padding:1rem;
margin:1rem auto;
font-family:Arial,Helvetica,sans-serif;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.kib-chat-box{
max-width:830px;
background:#fff;
border:1px solid #ddd;
border-radius:1rem;
padding:1rem;
margin:1rem auto;
font-family:Arial,Helvetica,sans-serif;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.kib-chat-window{
height:300px;
overflow-y:auto;
margin-bottom:.5rem;
}
.kib-chat-window p{margin:.25rem 0;line-height:1.4}
.kib-msg-user{text-align:right;font-weight:600}

/* Settings-Box Felder display:block;*/
.kib-settings-box label{font-weight:600;margin-bottom:.25rem}
.kib-settings-box input{
width:100%;
padding:.5rem;
border:1px solid #ccc;
border-radius:.5rem;
margin-bottom:.75rem;
}
.kib-settings-box button{
padding:.5rem 1rem;
border:none;
border-radius:.5rem;
background:#2e6cf6;
color:#fff;
cursor:pointer;
}
.kib-settings-box button:disabled{
opacity:.4;
cursor:not-allowed;
}

/* Hover für alle runden Outline-Icons (Mic & Upload) */
.kib-circle:hover {
background: #f5f5f5;        /* sanftes Grau im Hintergrund */
border-color: #ccc;         /* etwas dunklerer Rahmen */
}
.kib-circle:hover svg {
stroke: #333;               /* Icon-Linie etwas dunkler */
}

/* Hover für schwarzen Send-Button */
.kib-send:hover {
background: #a4a0a0;           /* dunkleres Schwarz */
}
.kib-send:hover svg {
stroke: #fff;               /* bleibt weiß */
}

/* Spinner */
.kib-spinner{
width:18px;height:18px;border:2px solid #ddd;border-top:2px solid #555;
border-radius:50%;animation:spin .8s linear infinite;margin-left:.5rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

.bubble{max-width:75%;padding:.55rem .9rem;border-radius:1rem;margin:.25rem 0;line-height:1.4}
.bubble.user{margin-left:auto;background:#2e6cf6;color:#fff; white-space: pre-line;}
.bubble.ai  {background:#f3f3f3;color:#333; white-space: pre-line;}

/* Drop-High­light */
.kib-chat-input.drag{background:#eef6ff;border-color:#84b5ff}

/* Vorschaustreifen */
.kib-file-strip{
display:flex;
flex-wrap:nowrap;     /* nur eine Zeile! */
gap:.6rem;
overflow-x:auto;      /* horizontales Scrollen */
padding-bottom:.4rem; /* etwas Luft unter den Karten */
scrollbar-width:thin; /* Firefox */
}
.kib-file-strip::-webkit-scrollbar{height:6px}
.kib-file-strip::-webkit-scrollbar-thumb{
background:#ccc;border-radius:3px
}

/* Texteingabe füllt restliche Breite */
.kib-textarea{
    flex:1;resize:none;border:none;outline:none;
    font-size:1.05rem;min-height:80px;
}

/* Icon-Column: rechts unten */
.kib-icon-col{
    position:absolute;right:1rem;bottom:1rem;
    display:flex;
    /*flex-direction:column;*/
    gap:.75rem;
}

/* Karte */
.kib-file-card{
position:relative;
height:66px;
border:1px solid #ddd;border-radius:.8rem;background:#fff;
display:flex;align-items:center;padding:.75rem 1rem;box-sizing:border-box
}
/*.kib-file-card{flex:0 0 auto}*/

.kib-file-card img{width:100%;height:60px;object-fit:cover}

/* Zeile mit textarea + Icons */
.kib-input-row{
display:flex;align-items:center;gap:.75rem;
}

/* Spalte für Icon + Text */
.kib-file-meta{display:flex;align-items:center;gap:.75rem;flex:1}

/* Icon für Nicht-Bilder */
.kib-file-icon{
width:42px;height:42px;border-radius:.6rem;background:#ec5f85;
display:flex;align-items:center;justify-content:center;flex-shrink:0
}

/* Name fett, mit Überlauf */
.kib-file-name{
font-weight:600;font-size:.9rem;
/*max-width:160px;*/
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.kib-file-type{
font-size:.78rem;color:#777;margin-top:2px;display:block
}
/* Entfernen-Button (✕) */
.kib-file-del{
position:absolute;        /* absolute  */
top:  0.5rem;            /* top-1     */
right:0.25rem;            /* end-1     */
transform:translate(50%,-50%);      /* -translate-y-1/2  +  translate-x-1/2 */
padding:2px;              /* p-[2px]   */
border:3px solid #f4f4f4; /* border-[3px] border-[#f4f4f4] */
border-radius:9999px;     /* rounded-full */
background:#000;          /* bg-black  */
color:#fff;               /* text-white */
font-size:.8rem;
line-height:0.8;
cursor:pointer;
transition:background-color .2s,color .2s,border-color .2s; /* transition-colors */
}
.kib-file-del:hover{
background:#e00;
}

/* Drag-Over-Highlight bleibt */
.kib-chat-input.drag{background:#eef6ff;border-color:#84b5ff}

/* Vollflächiger Submit-Loader */
.kib-overlay{
position:absolute; inset:0;
background:rgba(255,255,255,.75);
display:flex; align-items:center; justify-content:center;
z-index:50;
height:800px;
}
.kib-spinner-lg{
width:42px;height:42px;border:4px solid #ddd;border-top:4px solid #555;
border-radius:50%; animation:spin .8s linear infinite;
}



.kib-field-wrap { position:relative; margin-bottom:1rem; }


/* --- Tooltip Sichtbarkeit über [hidden] steuern --- */
.kib-help-popup[hidden] { display: none !important; }
.kib-help-popup:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- Eltern dürfen Tooltips nicht clippen + Stacking-Kontext --- */
.kib-card,
.kib-kpis,
.kib-kpi {
  position: relative;
  overflow: visible;
}

/* --- Popup (dein gewünschter Tooltip-Stil) --- */
.kib-help-popup {
  position: absolute;
  z-index: 1000001;
  min-width: 180px;
  max-width: 36rem;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;

  /* unterhalb des Buttons (Feinanpassung erfolgt per JS nur bei Bedarf) */
  top: calc(100% + 7px);
}

/* --- Inhalt: Absätze/Liste --- */
.kib-tip-body p { margin: 0 0 .5rem; }
.kib-tip-body ul { margin: .25rem 0 0 1rem; padding: 0; }
.kib-tip-body li { margin: .15rem 0; }

/* --- Help-Button klein oben rechts (bei .kib-kpi) --- */
.kib-kpi { padding-right: 28px; }
.kib-kpi .kib-help {
  position: absolute; top: 6px; right: 6px;
}

/* --- Genereller Help-Button-Stil (Kreis mit ?) --- */
.kib-help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid #666; background: #fff; color: #333;
  cursor: help; font-weight: 700; line-height: 1; font-size: 11px;
  /*z-index: 1002;*/
  pointer-events: auto;
  outline: none;
}
.kib-help:hover,
.kib-help:focus-visible {
  background: #007cba; color: #fff; border-color: #007cba;
  outline: 2px solid #007cba; outline-offset: 2px;
}

/* --- (Optional) Pfeile aus früheren Styles deaktivieren --- */
.kib-help-popup::before,
.kib-help-popup::after { content: none !important; }




/* TTS-Toggle Basis */
.kib-circle-toggle {
width:46px; height:46px;
border:1px solid #e0e0e0;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: background .2s, border-color .2s;
}

.kib-circle-toggle.kib-tts-on {
background: #8bcefa;
border-color: #ccc;
}
.kib-circle-toggle.kib-tts-on svg {
stroke: #333;
}

.kib-circle-toggle:hover {
background: #f5f5f5;
border-color: #ccc;
}
.kib-circle-toggle:hover svg {
stroke: #333;
}

/* Demo-Box Basis */
.kib-demo-box  {padding:1rem;border:1px solid #ddd;border-radius:8px}
.kib-demo-item {padding:.5rem .75rem;margin:.25rem 0;border:1px solid #ccc;
                border-radius:6px;cursor:pointer;background:#fafafa}
.kib-demo-item:hover{background:#eaeaea}

/* --- Demo-Grid ------------------------------------------------- */
.demo-wrap      { margin:1rem auto; max-width:860px; }
.demo-filter    { display:flex; gap:.75rem; margin-bottom:1rem; }
.demo-filter input,
.demo-filter select{ flex:1; padding:.45rem .6rem;
                    border:1px solid #ccc; border-radius:.4rem; }

.demo-grid      { display:grid; grid-template-columns:
                repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }

.demo-card      { padding:1rem; border:1px solid #ddd; border-radius:.8rem;
                background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04);
                cursor:pointer; transition:transform .15s, box-shadow .15s; }
.demo-card:hover{ transform:translateY(-4px);
                box-shadow:0 6px 16px rgba(0,0,0,.08); }
.demo-card h4   { margin:.1rem 0 .25rem; font-size:1.05rem; }

/* --- Modal für Chat-Demo -------------------------------------- */
.demo-modal     { position:fixed; inset:0; background:rgba(0,0,0,.35);
                display:flex; align-items:center; justify-content:center;
                z-index:999; }
.demo-modal-box { position:relative; width:90%; max-width:900px;
                max-height:95vh; overflow:auto; background:#fff;
                border-radius:1rem; padding:1rem; }
.demo-close     { position:absolute; top:.5rem; right:.75rem; border:none;
                background:none; font-size:1.5rem; cursor:pointer; }
.demo-card.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

/* 1) Damit das Overlay über der File-Card richtig positioniert wird */
.kib-file-card {
position: relative; /* unbedingt setzen! */
}

/* 2) Overlay über der File-Card */
.kib-file-loader-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}

/* 3) Spinner-Element */
.kib-file-spinner {
border: 3px solid rgba(0, 0, 0, 0.1);
border-top: 3px solid #333;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}

/* 4) Keyframes für die Rotation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.kib-await-banner {
    margin: .25rem 0 .5rem;
    padding: .35rem .75rem;
    background: #fff7cd;
    border: 1px solid #ffe08a;
    border-radius: .6rem;
    font-size: .9rem;
    color: #8a6d00;
    text-align: center;
}

/*.kib-amb {
    opacity: .35;
    pointer-events: none;
}

.kib-amb:hover {
    opacity: .35;
}*/

/* --- Demo-Grid Responsive Styles ------------------------------- */
@media (max-width: 600px) {
    .demo-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}

.kib-amb {
    opacity: .45;
    cursor: not-allowed;
}

.kib-amb button { pointer-events: none; }   /* Edit / Chat deaktivieren */

.kib-warn { position: relative; margin-left: .4rem; color: #d32f2f; font-weight: 600; }

/* Tooltip selbst */
.kib-tooltip{
    position: absolute;
    left: 1.3rem;              /* rechts neben ⚠ */
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 30;
}

/* Hover-Effekt – sobald der Mauszeiger auf ⚠ oder den Tooltip kommt */
.kib-warn:hover .kib-tooltip,
.kib-tooltip:hover{
    opacity: 1;
    visibility: visible;
}

.kib-start-btn{
    display:block;
    margin:1.25rem auto 0;
    padding:.55rem 2rem;
    background:#277ff0;
    color:#fff;
    font-weight:600;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.kib-start-btn:hover{background:#1e66c5}

/* ────────── Powered-by-Badge ────────── */
.kib-powered-by {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #6b7280; /* neutral-600 */
}
.kib-powered-by a {
  color: inherit;
  text-decoration: none;
}
.kib-powered-by a:hover {
  text-decoration: underline;
}