/* SchrauberStore-Chat: Chatfenster für Kunden (Farben passend zur Store-Seite) */
.sc-knopf {
    position: fixed; right: 30px; bottom: 30px; z-index: 1500;
    width: 60px; height: 60px; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(45deg, #c89b3c, #9e7f45); color: #050505;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 20px rgba(200, 155, 60, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sc-knopf:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 25px rgba(200, 155, 60, .5); }
.sc-knopf svg { width: 28px; height: 28px; fill: currentColor; }
.sc-zahl {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: #e53935; color: #fff; font: 700 12px/22px system-ui, sans-serif;
}

.sc-fenster {
    position: fixed; right: 30px; bottom: 105px; z-index: 1500;
    width: 380px; height: min(620px, calc(100vh - 140px));
    display: flex; flex-direction: column; overflow: hidden;
    background: #141414; color: #f0f0f0; font-family: inherit; font-size: 15px; line-height: 1.45; text-align: left;
    border: 1px solid rgba(200, 155, 60, .6); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .7);
}
.sc-fenster[hidden], .sc-fenster [hidden] { display: none !important; }
.sc-fenster * { box-sizing: border-box; }

.sc-kopf {
    display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 16px;
    background: #1e1e1e; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sc-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-kopf-text strong { color: #c89b3c; font-size: 16px; }
.sc-kopf-text span { color: #999; font-size: 12px; }
.sc-kopf-knopf {
    width: 38px; height: 38px; border: none; border-radius: 8px; background: none;
    color: #ccc; font-size: 18px; cursor: pointer;
}
.sc-kopf-knopf:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.sc-verlauf {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
}
.sc-blase { max-width: 85%; padding: 8px 12px 5px; border-radius: 14px; overflow-wrap: anywhere; }
.sc-bot, .sc-mitarbeiter { align-self: flex-start; background: #262626; border-bottom-left-radius: 4px; }
.sc-mitarbeiter { border: 1px solid rgba(200, 155, 60, .5); }
.sc-kunde { align-self: flex-end; background: #c89b3c; color: #111; border-bottom-right-radius: 4px; }
.sc-name { font-size: 12px; font-weight: 700; color: #c89b3c; margin: 0 0 2px; }
.sc-text { white-space: pre-wrap; }
.sc-zeit { font-size: 11px; opacity: .6; text-align: right; margin-top: 2px; }
.sc-vorschau { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; margin: 2px 0 4px; }
.sc-datei { font-weight: 600; }
.sc-datei::before { content: '📎 '; }
.sc-laedt { opacity: .7; font-style: italic; padding-bottom: 8px; }
.sc-system {
    align-self: center; max-width: 90%; padding: 5px 10px; border-radius: 10px;
    background: rgba(255, 255, 255, .06); color: #bbb; font-size: 12.5px; text-align: center;
}
.sc-fehler { background: rgba(229, 57, 53, .15); color: #ffb4a8; }
.sc-tippt { align-self: flex-start; padding: 2px 4px; color: #999; font-size: 13px; font-style: italic; }

/* Angebot mit "Bestellen"/"Ablehnen" */
.sc-angebot {
    align-self: stretch; margin: 2px 0; padding: 12px; border-radius: 12px;
    background: rgba(200, 155, 60, .1); border: 1px solid rgba(200, 155, 60, .7);
}
.sc-angebot-titel { color: #c89b3c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.sc-angebot-titel::before { content: '🛒 '; }
.sc-angebot-text { margin: 4px 0 2px; font-weight: 700; white-space: pre-wrap; }
.sc-angebot-hinweis { color: #aaa; font-size: 12px; }
.sc-angebot-knoepfe { display: flex; gap: 8px; margin-top: 10px; }
.sc-angebot-knoepfe button {
    flex: 1; padding: 10px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px;
}
.sc-ja { border: none; background: linear-gradient(45deg, #c89b3c, #9e7f45); color: #050505; }
.sc-nein { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #ddd; }
.sc-angebot-knoepfe button:disabled { opacity: .5; cursor: default; }
.sc-angebot-status:empty { display: none; }
.sc-angebot-status { margin-top: 8px; color: #bbb; font-size: 13px; }
.sc-angebot-status.ok { color: #7ee2a0; font-weight: 700; }
.sc-kontakt { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sc-kontakt-frage { font-size: 13px; font-weight: 700; }
.sc-kontakt input {
    padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px;
    background: #0f0f0f; color: #f0f0f0; font: inherit; font-size: 16px; outline: none;
}
.sc-kontakt input:focus { border-color: #c89b3c; }
.sc-kontakt-fehler { color: #ffb4a8; font-size: 13px; }
.sc-zustimmung { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #bbb; cursor: pointer; }
.sc-zustimmung input { margin-top: 2px; accent-color: #c89b3c; flex-shrink: 0; }
.sc-recht { margin: 0; font-size: 12px; color: #bbb; }
.sc-recht a { color: #c89b3c; }

/* Bestellung eingegangen, Teile abholbereit, Bitte um Bewertung */
.sc-system.sc-wichtig {
    align-self: stretch; max-width: none; padding: 10px 12px; font-size: 13.5px; line-height: 1.45;
    color: #e8f7ec; background: rgba(63, 185, 80, .14); border: 1px solid rgba(63, 185, 80, .5);
}
.sc-knopfzeile { align-self: flex-start; margin: -2px 0 2px; }
.sc-knopfzeile .sc-bewerten { margin: 0; }
.sc-bewerten {
    display: block; margin: 8px auto 0; width: fit-content; padding: 8px 16px; border-radius: 10px;
    background: linear-gradient(45deg, #c89b3c, #9e7f45); color: #050505; font-weight: 800; text-decoration: none;
}

.sc-start { padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sc-hinweis { margin: 0 0 12px; color: #bbb; font-size: 13px; }
.sc-hinweis a { color: #c89b3c; }
.sc-start-knopf {
    width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(45deg, #c89b3c, #9e7f45); color: #050505;
    font: inherit; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}

.sc-eingabe {
    display: flex; align-items: flex-end; gap: 6px; padding: 10px;
    background: #1a1a1a; border-top: 1px solid rgba(255, 255, 255, .12);
}
.sc-eingabe textarea {
    flex: 1; min-width: 0; max-height: 120px; resize: none; outline: none; overflow-y: hidden;
    padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px;
    background: #0f0f0f; color: #f0f0f0; font: inherit; font-size: 16px; line-height: 1.35;
}
.sc-eingabe textarea:focus { border-color: #c89b3c; }
.sc-anhang, .sc-senden {
    flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sc-anhang { background: rgba(255, 255, 255, .08); color: #ddd; }
.sc-anhang:hover { background: rgba(255, 255, 255, .15); }
.sc-senden { background: #c89b3c; color: #111; }
.sc-senden:hover { background: #e0b455; }
.sc-anhang svg, .sc-senden svg { width: 20px; height: 20px; fill: currentColor; }

/* Handy: Chat füllt den ganzen Bildschirm */
@media (max-width: 600px) {
    .sc-knopf { right: 16px; bottom: 16px; width: 56px; height: 56px; }
    .sc-fenster {
        top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 100vh; height: 100dvh;
        border: none; border-radius: 0;
    }
    html.sc-offen, html.sc-offen body { overflow: hidden; }
    html.sc-offen .sc-knopf { display: none; }
}