/* ─── Farben ─────────────────────────────────────────────────────────────────── */
:root {
    --coffee-dark:       #3e2723;
    --coffee-medium:     #6d4c41;
    --coffee-light:      #d7ccc8;
    --coffee-lighter:    #efebe9;
    --coffee-accent:     #ff8f00;
}

/* ─── Utility-Klassen ────────────────────────────────────────────────────────── */
.text-brown       { color: var(--coffee-medium); }
.text-brown-light { color: var(--coffee-light); }
.bg-coffee-light  { background-color: var(--coffee-lighter); }

/* ─── Button: coffee ─────────────────────────────────────────────────────────── */
.btn-coffee {
    background-color: var(--coffee-dark);
    border-color:     var(--coffee-dark);
    color:            #fff;
}

.btn-coffee:hover,
.btn-coffee:focus {
    background-color: var(--coffee-medium);
    border-color:     var(--coffee-medium);
    color:            #fff;
}

.btn-coffee:disabled {
    background-color: var(--coffee-light);
    border-color:     var(--coffee-light);
    color:            #999;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.bg-coffee {
    background-color: var(--coffee-dark) !important;
}

/* ─── Card-Header Akzent ─────────────────────────────────────────────────────── */
.card-header.bg-coffee {
    background-color: var(--coffee-dark) !important;
}

/* ─── CheatSheet-Ausgabe ─────────────────────────────────────────────────────── */
.cheatsheet-text {
    font-family:    "Courier New", Courier, monospace;
    font-size:      0.9rem;
    white-space:    pre-wrap;
    word-break:     break-word;
    line-height:    1.6;
    color:          #212529;
}

/* ─── Aktiver Listeneintrag (Standortliste) ──────────────────────────────────── */
.list-group-item.active {
    background-color: var(--coffee-dark);
    border-color:     var(--coffee-dark);
}

/* ─── Login-Seite ────────────────────────────────────────────────────────────── */
.text-brown { color: var(--coffee-medium); }

/* ─── Scroll-Verhalten für lange Antworten ───────────────────────────────────── */
.cheatsheet-text {
    max-height: 600px;
    overflow-y: auto;
}

/* ─── Button: outline-coffee ─────────────────────────────────────────────────── */
.btn-outline-coffee {
    color:        var(--coffee-dark);
    border-color: var(--coffee-dark);
}

.btn-outline-coffee:hover {
    background-color: var(--coffee-dark);
    color:            #fff;
}

/* ─── Admin: Modal-Overlay ───────────────────────────────────────────────────── */
.modal-backdrop-custom {
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, .45);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          1050;
}

.modal-dialog-custom {
    width:      100%;
    max-width:  480px;
    margin:     1rem;
}

/* ─── Chat-Layout ────────────────────────────────────────────────────────────── */
.chat-layout {
    display:        flex;
    gap:            1rem;
    height:         calc(100vh - 80px);
}

.chat-sidebar {
    width:          280px;
    flex-shrink:    0;
}

.chat-main {
    flex:           1;
    min-width:      0;
    border:         1px solid #dee2e6;
    border-radius:  .5rem;
    overflow:       hidden;
    background:     #fff;
}

.chat-messages {
    overflow-y:     auto;
    padding:        1.25rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* ─── Chat-Blasen ────────────────────────────────────────────────────────────── */
.chat-bubble-row {
    display:        flex;
    align-items:    flex-start;
    gap:            .75rem;
}

.chat-bubble-row.user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width:          36px;
    height:         36px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1rem;
    flex-shrink:    0;
    background:     var(--coffee-lighter);
    color:          var(--coffee-medium);
}

.chat-bubble-row.user .chat-avatar {
    background:     var(--coffee-dark);
    color:          #fff;
}

.chat-bubble {
    max-width:      72%;
    border-radius:  1rem;
    padding:        .6rem 1rem;
    word-break:     break-word;
}

.bubble-user {
    background:     var(--coffee-dark);
    color:          #fff;
    border-bottom-right-radius: .25rem;
}

.bubble-assistant {
    background:     var(--coffee-lighter);
    color:          #212529;
    border-bottom-left-radius: .25rem;
}

.chat-text {
    font-family:    inherit;
    font-size:      .9rem;
    white-space:    pre-wrap;
    word-break:     break-word;
    line-height:    1.6;
}

/* ─── Tipp-Cursor ────────────────────────────────────────────────────────────── */
.typing-cursor {
    display:        inline-block;
    animation:      blink .8s step-end infinite;
    color:          var(--coffee-medium);
    font-weight:    bold;
}

/* ─── Eingabezeile ───────────────────────────────────────────────────────────── */
.chat-input-bar {
    padding:        .75rem 1rem;
    border-top:     1px solid #dee2e6;
    background:     #fff;
}

.chat-input {
    resize:         none;
    max-height:     120px;
    overflow-y:     auto;
    border-right:   0;
}

.chat-input:focus {
    box-shadow:     none;
    border-color:   #dee2e6;
}

/* ─── Animierter Tipp-Indikator ──────────────────────────────────────────────── */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}