/*
 * SG Chatbox – Widget Styles
 * Farbschema: sg-muelchi.ch (anpassen falls nötig)
 */

:root {
    --sg-cb-primary:     #1a4d2e;   /* Dunkelgrün – SG Mülchi */
    --sg-cb-primary-dark:#0f3020;
    --sg-cb-accent:      #c0392b;   /* Rot (Schweizerkreuz-Anlehnung) */
    --sg-cb-bg:          #ffffff;
    --sg-cb-surface:     #f5f5f5;
    --sg-cb-border:      #d0d0d0;
    --sg-cb-text:        #1a1a1a;
    --sg-cb-text-muted:  #666666;
    --sg-cb-user-bg:     #1a4d2e;
    --sg-cb-user-text:   #ffffff;
    --sg-cb-bot-bg:      #f0f4f2;
    --sg-cb-bot-text:    #1a1a1a;
    --sg-cb-radius:      12px;
    --sg-cb-shadow:      0 8px 32px rgba(0,0,0,0.18);
    --sg-cb-z:           99999;
}

/* ── TRIGGER BUTTON ─────────────────────────────────────────────────────── */

#sg-cb-trigger {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    width:          56px;
    height:         56px;
    border-radius:  50%;
    background:     var(--sg-cb-primary);
    color:          #fff;
    border:         none;
    cursor:         pointer;
    box-shadow:     var(--sg-cb-shadow);
    z-index:        var(--sg-cb-z);
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background 0.2s, transform 0.15s;
    padding:        0;
}

#sg-cb-trigger:hover {
    background:  var(--sg-cb-primary-dark);
    transform:   scale(1.08);
}

#sg-cb-trigger:focus-visible {
    outline:        2px solid var(--sg-cb-accent);
    outline-offset: 3px;
}

#sg-cb-trigger svg {
    width:  26px;
    height: 26px;
}

/* ── WIDGET CONTAINER ───────────────────────────────────────────────────── */

#sg-cb-widget {
    position:       fixed;
    bottom:         92px;
    right:          24px;
    width:          360px;
    max-width:      calc(100vw - 32px);
    height:         480px;
    max-height:     calc(100vh - 110px);
    max-height:     calc(100dvh - 110px);
    background:     var(--sg-cb-bg);
    border-radius:  var(--sg-cb-radius);
    box-shadow:     var(--sg-cb-shadow);
    display:        flex;
    flex-direction: column;
    z-index:        var(--sg-cb-z);
    overflow:       hidden;
    border:         1px solid var(--sg-cb-border);

    /* Geschlossen: unsichtbar und nicht interaktiv */
    opacity:        0;
    transform:      translateY(16px) scale(0.97);
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease;
}

#sg-cb-widget.sg-cb-open {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: auto;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

#sg-cb-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    background:      var(--sg-cb-primary);
    color:           #fff;
    flex-shrink:     0;
}

#sg-cb-title {
    font-size:   15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#sg-cb-close {
    background:  transparent;
    border:      none;
    color:       rgba(255,255,255,0.85);
    font-size:   18px;
    cursor:      pointer;
    line-height: 1;
    padding:     2px 6px;
    border-radius: 4px;
    transition:  background 0.15s;
}

#sg-cb-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ── MESSAGES ───────────────────────────────────────────────────────────── */

#sg-cb-messages {
    flex:       1;
    overflow-y: auto;
    padding:    14px 12px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scroll-behavior: smooth;
}

#sg-cb-messages::-webkit-scrollbar { width: 4px; }
#sg-cb-messages::-webkit-scrollbar-thumb { background: var(--sg-cb-border); border-radius: 2px; }

.sg-cb-msg {
    max-width:    82%;
    padding:      9px 13px;
    border-radius: 10px;
    font-size:    14px;
    line-height:  1.5;
    word-break:   break-word;
    animation:    sg-cb-fade-in 0.18s ease;
}

@keyframes sg-cb-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sg-cb-msg--user {
    background:   var(--sg-cb-user-bg);
    color:        var(--sg-cb-user-text);
    align-self:   flex-end;
    border-bottom-right-radius: 3px;
}

.sg-cb-msg--assistant {
    background:   var(--sg-cb-bot-bg);
    color:        var(--sg-cb-bot-text);
    align-self:   flex-start;
    border-bottom-left-radius: 3px;
}

.sg-cb-msg--assistant a {
    color: var(--sg-cb-primary);
    text-decoration: underline;
}

/* Tipp-Indikator */
.sg-cb-typing {
    display:    flex;
    gap:        5px;
    align-items: center;
    padding:    12px 14px;
    min-height: 38px;
}

.sg-cb-typing span {
    display:       block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--sg-cb-text-muted);
    animation:     sg-cb-bounce 1.1s ease-in-out infinite;
}

.sg-cb-typing span:nth-child(2) { animation-delay: 0.18s; }
.sg-cb-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes sg-cb-bounce {
    0%, 80%, 100% { transform: scale(0.75); opacity: 0.5; }
    40%           { transform: scale(1);    opacity: 1; }
}

/* ── INPUT ROW ──────────────────────────────────────────────────────────── */

#sg-cb-input-row {
    display:     flex;
    gap:         8px;
    padding:     10px 12px;
    border-top:  1px solid var(--sg-cb-border);
    background:  var(--sg-cb-bg);
    flex-shrink: 0;
}

#sg-cb-input {
    flex:          1;
    border:        1px solid var(--sg-cb-border);
    border-radius: 8px;
    padding:       8px 12px;
    font-size:     14px;
    color:         var(--sg-cb-text);
    background:    var(--sg-cb-surface);
    outline:       none;
    transition:    border-color 0.15s;
}

#sg-cb-input:focus {
    border-color: var(--sg-cb-primary);
}

#sg-cb-input::placeholder {
    color: var(--sg-cb-text-muted);
}

#sg-cb-send {
    width:         38px;
    height:        38px;
    border-radius: 8px;
    background:    var(--sg-cb-primary);
    color:         #fff;
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background 0.15s;
}

#sg-cb-send:hover:not(:disabled) {
    background: var(--sg-cb-primary-dark);
}

#sg-cb-send:disabled {
    background:  #ccc;
    cursor:      not-allowed;
}

#sg-cb-send svg {
    width:  17px;
    height: 17px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
    #sg-cb-widget {
        bottom:  0;
        right:   0;
        left:    0;
        width:   100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        height:     70vh;
        height:     70dvh; /* dynamisch: passt sich an Tastatur an */
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
    }

    /* Wenn Tastatur offen: Widget kleiner */
    #sg-cb-widget.sg-cb-keyboard {
        height:     50vh;
        height:     50dvh;
        max-height: calc(100dvh - 20px);
    }

    #sg-cb-trigger {
        bottom: 16px;
        right:  16px;
    }
}

/* ── DARK MODE ──────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        --sg-cb-bg:       #1e1e1e;
        --sg-cb-surface:  #2a2a2a;
        --sg-cb-border:   #444;
        --sg-cb-text:     #f0f0f0;
        --sg-cb-text-muted: #999;
        --sg-cb-bot-bg:   #2a3330;
        --sg-cb-bot-text: #e8e8e8;
    }
}

/* ── v1.1: MARKDOWN-FORMATIERUNG IN ANTWORTEN ───────────────────────────── */

/* Honeypot verstecken */
#sg-cb-hp {
    position: absolute !important;
    left:     -9999px !important;
    opacity:  0 !important;
    height:   0 !important;
    width:    0 !important;
    pointer-events: none !important;
}

/* Absätze in KI-Antworten */
.sg-cb-msg--assistant p {
    margin:      0 0 8px 0;
    line-height: 1.55;
}
.sg-cb-msg--assistant p:last-child {
    margin-bottom: 0;
}

/* Überschriften in KI-Antworten */
.sg-cb-msg--assistant .sg-cb-h {
    font-size:     13px;
    font-weight:   700;
    margin:        8px 0 4px 0;
    color:         var(--sg-cb-primary);
    border-bottom: 1px solid rgba(26, 77, 46, 0.15);
    padding-bottom: 2px;
}

/* Bullet- und nummerierte Listen */
.sg-cb-msg--assistant .sg-cb-list {
    margin:      4px 0 8px 0;
    padding-left: 18px;
    line-height: 1.55;
}
.sg-cb-msg--assistant .sg-cb-list:last-child {
    margin-bottom: 0;
}
.sg-cb-msg--assistant .sg-cb-list li {
    margin-bottom: 3px;
}
.sg-cb-msg--assistant .sg-cb-list li:last-child {
    margin-bottom: 0;
}

/* Fett und Kursiv */
.sg-cb-msg--assistant strong {
    font-weight: 600;
    color:       var(--sg-cb-text);
}
.sg-cb-msg--assistant em {
    font-style: italic;
}

/* Links */
.sg-cb-msg--assistant a {
    color:           var(--sg-cb-primary);
    text-decoration: underline;
    word-break:      break-all;
}
.sg-cb-msg--assistant a:hover {
    color: var(--sg-cb-primary-dark);
}

/* Dark Mode: Überschriften */
@media (prefers-color-scheme: dark) {
    .sg-cb-msg--assistant .sg-cb-h {
        color:        #6abf8a;
        border-color: rgba(106, 191, 138, 0.2);
    }
    .sg-cb-msg--assistant a {
        color: #6abf8a;
    }
}