/* =====================================================
   KI-Chatberater – Frontend Styles (Dark Theme)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
    --kicc-accent:        #4fd1c5;
    --kicc-accent-dark:   #2c9e96;
    --kicc-accent-dim:    rgba(79,209,197,0.15);

    --kicc-bg:            #0f1117;
    --kicc-surface:       #181c27;
    --kicc-surface2:      #1f2435;
    --kicc-border:        #2a2f42;

    --kicc-text:          #e8eaf0;
    --kicc-muted:         #6b7290;

    --kicc-user-bg:       #2a3a5c;
    --kicc-user-text:     #e8f0ff;
    --kicc-bot-bg:        #1f2435;
    --kicc-bot-text:      #dde1ec;

    --kicc-radius:        18px;
    --kicc-bubble-r:      14px;
    --kicc-font:          'DM Sans', system-ui, sans-serif;
    --kicc-shadow:        0 16px 48px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
}

/* ---------- wrapper ---------- */
#kicc-chat-wrap {
    font-family:      var(--kicc-font);
    display:          flex;
    flex-direction:   column;
    width:            100%;
    max-width:        720px;
    margin:           0 auto;
    height:           clamp(480px, 72vh, 700px);
    background:       var(--kicc-bg);
    border-radius:    var(--kicc-radius);
    box-shadow:       var(--kicc-shadow);
    overflow:         hidden;
    border:           1px solid var(--kicc-border);
    position:         relative;
}

/* ---------- header ---------- */
#kicc-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          15px 22px;
    background:       var(--kicc-surface);
    border-bottom:    1px solid var(--kicc-border);
    flex-shrink:      0;
}

#kicc-header-left {
    display:          flex;
    align-items:      center;
    gap:              11px;
}

#kicc-avatar-icon {
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       var(--kicc-accent-dim);
    border:           1.5px solid var(--kicc-accent);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.1rem;
    flex-shrink:      0;
}

#kicc-title {
    font-size:        0.97rem;
    font-weight:      600;
    color:            var(--kicc-text);
    letter-spacing:   0.01em;
}

#kicc-status {
    font-size:        0.72rem;
    color:            var(--kicc-muted);
    display:          flex;
    align-items:      center;
    gap:              6px;
}

.kicc-status-dot {
    display:          inline-block;
    width:            7px;
    height:           7px;
    background:       #4fd17a;
    border-radius:    50%;
    box-shadow:       0 0 0 2.5px rgba(79,209,122,0.25);
    animation:        kicc-pulse 2.4s infinite;
    flex-shrink:      0;
}

@keyframes kicc-pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.4; }
}

/* ---------- messages area ---------- */
#kicc-messages {
    flex:             1;
    overflow-y:       auto;
    padding:          22px 18px 10px;
    display:          flex;
    flex-direction:   column;
    gap:              12px;
    scroll-behavior:  smooth;
}

#kicc-messages::-webkit-scrollbar        { width: 4px; }
#kicc-messages::-webkit-scrollbar-track  { background: transparent; }
#kicc-messages::-webkit-scrollbar-thumb  { background: var(--kicc-border); border-radius: 99px; }

/* ---------- bubbles ---------- */
.kicc-msg {
    display:          flex;
    max-width:        80%;
    animation:        kicc-in 0.2s cubic-bezier(.25,.8,.25,1) both;
}

@keyframes kicc-in {
    from { opacity:0; transform: translateY(7px); }
    to   { opacity:1; transform: translateY(0); }
}

.kicc-msg.user  { align-self: flex-end; flex-direction: row-reverse; }
.kicc-msg.bot   { align-self: flex-start; }

.kicc-avatar {
    width:            30px;
    height:           30px;
    border-radius:    50%;
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        0.8rem;
    margin-top:       3px;
}
.kicc-msg.user .kicc-avatar {
    background:       var(--kicc-user-bg);
    color:            var(--kicc-user-text);
    margin-left:      8px;
}
.kicc-msg.bot .kicc-avatar {
    background:       var(--kicc-accent-dim);
    color:            var(--kicc-accent);
    margin-right:     8px;
}

.kicc-bubble {
    padding:          10px 15px;
    border-radius:    var(--kicc-bubble-r);
    font-size:        0.915rem;
    line-height:      1.6;
    word-break:       break-word;
    white-space:      pre-wrap;
}

.kicc-msg.user .kicc-bubble {
    background:       var(--kicc-user-bg);
    color:            var(--kicc-user-text);
    border:           1px solid rgba(100,140,220,0.25);
    border-bottom-right-radius: 4px;
}

.kicc-msg.bot .kicc-bubble {
    background:       var(--kicc-bot-bg);
    color:            var(--kicc-bot-text);
    border:           1px solid var(--kicc-border);
    border-bottom-left-radius: 4px;
}

.kicc-msg.error .kicc-bubble {
    background:       rgba(180,40,40,0.15);
    color:            #f09090;
    border:           1px solid rgba(180,40,40,0.3);
}

/* ---------- typing dots ---------- */
#kicc-typing {
    padding:          0 18px 10px 56px;
    display:          flex;
    align-items:      center;
    gap:              5px;
    flex-shrink:      0;
}
#kicc-typing span {
    width:            7px;
    height:           7px;
    background:       var(--kicc-muted);
    border-radius:    50%;
    animation:        kicc-bounce 1.2s infinite ease-in-out;
}
#kicc-typing span:nth-child(1) { animation-delay: 0s; }
#kicc-typing span:nth-child(2) { animation-delay: .18s; }
#kicc-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes kicc-bounce {
    0%,80%,100% { transform: scale(0.8); opacity:.35; }
    40%          { transform: scale(1.2); opacity:.9;  }
}

.kicc-hidden { display: none !important; }

/* ---------- input bar ---------- */
#kicc-form {
    display:          flex;
    align-items:      flex-end;
    gap:              10px;
    padding:          12px 14px;
    border-top:       1px solid var(--kicc-border);
    background:       var(--kicc-surface);
    flex-shrink:      0;
}

#kicc-input {
    flex:             1;
    font-family:      var(--kicc-font);
    font-size:        0.93rem;
    line-height:      1.5;
    padding:          10px 15px;
    border:           1px solid var(--kicc-border);
    border-radius:    24px;
    outline:          none;
    resize:           none;
    max-height:       120px;
    overflow-y:       hidden;
    color:            var(--kicc-text);
    background:       var(--kicc-surface2);
    transition:       border-color .2s, box-shadow .2s;
    caret-color:      var(--kicc-accent);
}

#kicc-input:focus {
    border-color:     var(--kicc-accent);
    box-shadow:       0 0 0 3px rgba(79,209,197,0.12);
}

#kicc-input::placeholder { color: var(--kicc-muted); }

#kicc-send {
    flex-shrink:      0;
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background:       var(--kicc-accent);
    color:            #0f1117;
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0;
    transition:       background .2s, transform .15s, box-shadow .2s;
    box-shadow:       0 2px 12px rgba(79,209,197,0.3);
}
#kicc-send:hover  { background: #6ae3db; transform: scale(1.06); }
#kicc-send:active { transform: scale(0.95); }
#kicc-send:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
#kicc-send svg { width: 16px; height: 16px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    #kicc-chat-wrap {
        max-width:     100%;
        border-radius: 12px;
        height:        clamp(440px, 68vh, 600px);
    }
    .kicc-msg { max-width: 90%; }
}

@media (max-width: 480px) {
    #kicc-chat-wrap {
        border-radius: 0;
        height:        100dvh;
        border:        none;
        box-shadow:    none;
        margin:        0;
        max-width:     100%;
        position:      fixed;
        inset:         0;
        z-index:       9999;
    }
    #kicc-messages { padding: 16px 12px 8px; }
    .kicc-msg      { max-width: 94%; }
    #kicc-form {
        padding: 10px 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    #kicc-input { font-size: 1rem; }
}

/* ============================================================
   CONSENT OVERLAY
   ============================================================ */

#kicc-consent-overlay {
    position:         absolute;
    inset:            0;
    background:       rgba(10, 12, 18, 0.92);
    backdrop-filter:  blur(6px);
    z-index:          100;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    border-radius:    var(--kicc-radius);
}

#kicc-consent-box {
    background:       var(--kicc-surface);
    border:           1px solid var(--kicc-border);
    border-radius:    14px;
    padding:          28px 26px;
    max-width:        400px;
    width:            100%;
    text-align:       center;
    box-shadow:       0 8px 40px rgba(0,0,0,0.5);
}

#kicc-consent-icon {
    font-size:        2rem;
    margin-bottom:    12px;
    line-height:      1;
}

#kicc-consent-title {
    font-size:        1.1rem;
    font-weight:      600;
    color:            var(--kicc-text);
    margin:           0 0 12px;
}

#kicc-consent-body {
    font-size:        0.85rem;
    color:            var(--kicc-muted);
    line-height:      1.65;
    margin:           0 0 20px;
    text-align:       left;
}

#kicc-consent-body a {
    color:            var(--kicc-accent);
    text-decoration:  underline;
}

#kicc-consent-label {
    display:          flex;
    align-items:      flex-start;
    gap:              10px;
    text-align:       left;
    font-size:        0.875rem;
    color:            var(--kicc-text);
    cursor:           pointer;
    margin-bottom:    20px;
    line-height:      1.5;
}

#kicc-consent-check {
    margin-top:       3px;
    width:            16px;
    height:           16px;
    flex-shrink:      0;
    accent-color:     var(--kicc-accent);
    cursor:           pointer;
}

#kicc-consent-btn {
    width:            100%;
    padding:          11px 20px;
    background:       var(--kicc-accent);
    color:            #0f1117;
    border:           none;
    border-radius:    10px;
    font-family:      var(--kicc-font);
    font-size:        0.93rem;
    font-weight:      600;
    cursor:           pointer;
    transition:       background .2s, opacity .2s, transform .15s;
}

#kicc-consent-btn:disabled {
    opacity:          0.35;
    cursor:           not-allowed;
    transform:        none;
}

#kicc-consent-btn:not(:disabled):hover {
    background:       #6ae3db;
    transform:        translateY(-1px);
}