*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --g1: #25D366;
    --g2: #128C7E;
    --g3: #075E54;
    --sb: #1a1f2e;
    --sbh: #252b3d;
    --sba: #2e3650;
    --bu: #DCF8C6;
    --ba: #fff;
    --bgc: #ECE5DD;
    --ts: #111b21;
    --ss: #667781;
    --bd: #e9edef;
    --oa: #74AA9C;
    --ca: #D97757;
    --ol: #6366F1;
    --f: 'Segoe UI',system-ui,-apple-system,sans-serif
}

html, body {
    height: 100%;
    font-family: var(--f)
}

#app {
    display: flex;
    height: 100vh;
    overflow: hidden
}

/* ── SIDEBAR ── */
#sidebar {
    width: 360px;
    min-width: 280px;
    background: var(--sb);
    color: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #0e1117
}

#sidebar-header {
    background: var(--g3);
    padding: 16px 12px 12px
}

#brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px
}

.brand-icon {
    font-size: 1.4rem
}

.brand-name {
    font-weight: 700;
    font-size: 1.1rem
}

#total-unread {
    margin-left: auto;
    background: var(--g1);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 8px
}

#search-input {
    width: 100%;
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .9rem;
    outline: none
}

    #search-input::placeholder {
        color: rgba(255,255,255,.55)
    }

    #search-input:focus {
        background: rgba(255,255,255,.2)
    }

#conversation-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--g2) transparent
}

    #conversation-list::-webkit-scrollbar {
        width: 4px
    }

    #conversation-list::-webkit-scrollbar-thumb {
        background: var(--g2);
        border-radius: 4px
    }

.convo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
    animation: slideIn .2s ease
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.convo-item:hover {
    background: var(--sbh)
}

.convo-item.active {
    background: var(--sba)
}

.convo-item.new-flash {
    animation: flashNew .6s ease
}

@keyframes flashNew {
    0% {
        background: rgba(37,211,102,.3)
    }

    100% {
        background: transparent
    }
}

.convo-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--g2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
    position: relative
}

.typing-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--g1);
    border: 2px solid var(--sb);
    display: none;
    animation: pulseDot 1s infinite
}

    .typing-dot.show {
        display: block
    }

@keyframes pulseDot {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.3)
    }
}

.convo-body {
    flex: 1;
    min-width: 0
}

.convo-name {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.convo-preview {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

    .convo-preview.ai-typing {
        color: var(--g1);
        font-style: italic
    }

.convo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px
}

.convo-time {
    font-size: .7rem;
    color: rgba(255,255,255,.45)
}

.unread-badge {
    background: var(--g1);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px
}

.auto-off-pill {
    font-size: .62rem;
    background: rgba(255,100,100,.22);
    color: #ff8080;
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 2px
}

.empty-state {
    text-align: center;
    color: rgba(255,255,255,.35);
    padding: 40px 20px;
    font-size: .9rem
}

#provider-bar {
    padding: 10px 14px;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .82rem;
    color: rgba(255,255,255,.65)
}

    #provider-bar select {
        flex: 1;
        padding: 5px 8px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,.2);
        background: rgba(255,255,255,.08);
        color: #fff;
        font-size: .82rem
    }

#save-provider-btn {
    padding: 5px 12px;
    border-radius: 8px;
    border: none;
    background: var(--g2);
    color: #fff;
    cursor: pointer;
    font-size: .82rem
}

    #save-provider-btn:hover {
        background: var(--g1)
    }

/* ── CHAT PANEL ── */
#chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bgc);
    min-width: 0
}

#welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ss)
}

.welcome-icon {
    font-size: 4rem
}

#welcome-screen h2 {
    color: var(--ts);
    font-weight: 400
}

#chat-view {
    display: flex;
    flex-direction: column;
    height: 100%
}

    #chat-view.hidden {
        display: none
    }

#chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f0f2f5;
    border-bottom: 1px solid var(--bd);
    box-shadow: 0 1px 3px rgba(0,0,0,.08)
}

#contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--g2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0
}

#contact-info {
    flex: 1
}

#contact-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ts)
}

#contact-phone {
    font-size: .78rem;
    color: var(--ss)
}

#header-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .4px
}

.badge-openai {
    background: var(--oa)
}

.badge-claude {
    background: var(--ca)
}

.badge-ollama {
    background: var(--ol)
}

.hbtn {
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: .82rem;
    background: rgba(0,0,0,.07);
    transition: background .2s
}

    .hbtn:hover {
        background: rgba(0,0,0,.14)
    }

    .hbtn.disabled {
        opacity: .5
    }

#settings-panel {
    background: #f7f9fb;
    border-bottom: 1px solid var(--bd);
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end
}

    #settings-panel h3 {
        width: 100%;
        font-size: .9rem;
        color: var(--ts)
    }

    #settings-panel label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: .8rem;
        color: var(--ss)
    }

    #settings-panel select, #settings-panel textarea {
        border: 1px solid var(--bd);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: .85rem;
        font-family: var(--f);
        outline: none
    }

        #settings-panel select:focus, #settings-panel textarea:focus {
            border-color: var(--g2)
        }

#settings-prompt {
    min-width: 260px;
    resize: vertical
}

#save-settings-btn {
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--g3);
    color: #fff;
    cursor: pointer;
    font-size: .85rem
}

    #save-settings-btn:hover {
        background: var(--g2)
    }

#save-status {
    font-size: .78rem;
    color: var(--g2)
}

#messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 10vw 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent
}

    #messages-container::-webkit-scrollbar {
        width: 4px
    }

    #messages-container::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 4px
    }

.bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 68%
}

    .bubble-wrap.user {
        align-self: flex-end;
        align-items: flex-end
    }

    .bubble-wrap.ai {
        align-self: flex-start;
        align-items: flex-start
    }

    .bubble-wrap.new-msg {
        animation: msgIn .2s ease
    }

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.bubble {
    padding: 8px 12px;
    border-radius: 10px;
    line-height: 1.5;
    font-size: .9rem;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,.12)
}

.bubble-user {
    background: var(--bu);
    border-bottom-right-radius: 3px
}

.bubble-ai {
    background: var(--ba);
    border-bottom-left-radius: 3px
}

.bubble-ts {
    font-size: .67rem;
    color: var(--ss);
    margin-top: 3px;
    padding: 0 4px
}

.bubble-wrap.user .bubble-ts {
    text-align: right
}

#typing-indicator {
    align-self: flex-start
}

.typing-dots {
    display: inline-flex;
    gap: 3px
}

    .typing-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ss);
        animation: bounce 1.2s infinite
    }

        .typing-dots span:nth-child(2) {
            animation-delay: .2s
        }

        .typing-dots span:nth-child(3) {
            animation-delay: .4s
        }

@keyframes bounce {
    0%,80%,100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-6px)
    }
}

#input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f0f2f5;
    border-top: 1px solid var(--bd)
}

#message-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 24px;
    border: none;
    background: #fff;
    font-size: .95rem;
    font-family: var(--f);
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.08)
}

    #message-input:focus {
        box-shadow: 0 0 0 2px var(--g1)
    }

#send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--g2);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s,transform .1s;
    flex-shrink: 0
}

    #send-btn:hover {
        background: var(--g1)
    }

    #send-btn:active {
        transform: scale(.93)
    }

#reconnect-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3545;
    color: #fff;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: .85rem;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.3)
}

.hidden {
    display: none !important
}

@media(max-width:768px) {
    #sidebar {
        width: 100%;
        position: absolute;
        z-index: 10;
        height: 100%
    }

    #messages-container {
        padding: 12px 4vw
    }
}
/* ── Auto Reply Toggle Button States ─────────────────────────────── */
#toggle-auto-reply-btn {
    font-weight: 600;
    min-width: 110px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    /* Auto reply is ON — green */
    #toggle-auto-reply-btn.state-auto {
        background: rgba(37, 211, 102, 0.15);
        color: #1a8a44;
        border: 1px solid rgba(37, 211, 102, 0.4);
    }

        #toggle-auto-reply-btn.state-auto:hover {
            background: rgba(37, 211, 102, 0.28);
        }

    /* Auto reply is OFF (manual) — amber */
    #toggle-auto-reply-btn.state-manual {
        background: rgba(245, 158, 11, 0.15);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.4);
    }

        #toggle-auto-reply-btn.state-manual:hover {
            background: rgba(245, 158, 11, 0.28);
        }

    /* While API call is in progress — prevent double clicks */
    #toggle-auto-reply-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* ── Input highlight when switching to manual mode ── */
@keyframes inputPulse {
    0% {
        box-shadow: 0 0 0 3px rgba(37,211,102,0.6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(37,211,102,0.2);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(37,211,102,0.6);
    }
}

#message-input.input-highlight {
    border: 1.5px solid var(--g1) !important;
    animation: inputPulse 0.8s ease infinite;
}