/* ==========================================================================
   Hope Chatbot – Custom Styles
   Warm, nicht-klinisches Design – Creme-/Erdtöne
   ========================================================================== */

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ── Chat-Messages Container ───────────────────────────────────────────── */
#chat-messages {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* ── Message Wrapper ──────────────────────────────────────────────────── */
.message {
    display: flex;
    width: 100%;
    animation: fadeIn 0.25s ease-out;
}

.message-user {
    justify-content: flex-end;
}

.message-bot {
    justify-content: flex-start;
}

/* ── Message Bubble ────────────────────────────────────────────────────── */
.message-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    line-height: 1.55;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.message-user .message-bubble {
    border-bottom-right-radius: 0.375rem;
}

.message-bot .message-bubble {
    border-bottom-left-radius: 0.375rem;
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Custom Scrollbar (Webkit) ────────────────────────────────────────── */
.messages-scroll::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.messages-scroll::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.messages-scroll::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #dca870;       /* warm-400 */
    border-radius: 3px;
}

.messages-scroll::-webkit-scrollbar-thumb:hover,
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #d08d4a;       /* warm-500 */
}

/* Firefox scrollbar */
.messages-scroll,
.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #dca870 transparent;
}

/* ── Textarea Grow ─────────────────────────────────────────────────────── */
#message-input {
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* ── Empty State ───────────────────────────────────────────────────────── */
#chat-messages:empty + .shrink-0 .empty-state {
    display: block;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
aside {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Modal Backdrop ────────────────────────────────────────────────────── */
#name-modal {
    animation: fadeBg 0.2s ease-out;
}

@keyframes fadeBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Sending Pulse ─────────────────────────────────────────────────────── */
.animate-pulse {
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ── Mobile: Full-width bubbles ────────────────────────────────────────── */
@media (max-width: 640px) {
    .message-bubble {
        max-width: 85%;
        font-size: 0.9rem;
        padding: 0.6rem 0.85rem;
    }
}

/* ── Tailwind Override: Sidebar link hover ─────────────────────────────── */
.sidebar-link:hover {
    background-color: #f9ede0;
}