/* chat-widget.css: personal DM popup (avatar + name, bordered bubbles, quick-reply pills). */
.sc-root {
    --sc-bg: #0d1117;
    --sc-bubble: #151b23;
    --sc-border: rgba(240, 246, 252, 0.12);
    --sc-edge: rgba(46, 160, 67, 0.35);
    --sc-text: #f0f6fc;
    --sc-muted: #9198a1;
    --sc-accent: #238636;
    --sc-accent-h: #2ea043;
    --sc-me: #1f6feb;
    --sc-focus: #4493f8;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9995;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sc-text);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}
.sc-root.sc-ready, .sc-root.sc-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
body.light-theme .sc-root {
    --sc-bg: #ffffff;
    --sc-bubble: #f6f8fa;
    --sc-border: #d1d9e0;
    --sc-edge: rgba(31, 136, 61, 0.35);
    --sc-text: #1f2328;
    --sc-muted: #59636e;
    --sc-accent: #1f883d;
    --sc-accent-h: #1a7f37;
    --sc-me: #0969da;
    --sc-focus: #0969da;
}

/* ---- Launcher (avatar bubble) ---- */
.sc-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid var(--sc-border);
    border-radius: 50%;
    background: var(--sc-bg);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.28);
    opacity: 0;
    transform: translateY(8px);
    transition: transform 140ms cubic-bezier(.2, .8, .2, 1), opacity 140ms ease, border-color 140ms ease;
}
.sc-ready .sc-launcher { opacity: 1; transform: none; }
.sc-launcher:hover { border-color: var(--sc-accent-h); transform: translateY(-2px); }
.sc-launcher:active { transform: scale(0.96); }
.sc-open .sc-launcher { display: none; }
.sc-launcher:focus-visible, .sc-close:focus-visible, .sc-chip:focus-visible, .sc-send:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
}

.sc-avatar {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sc-bubble);
    border: 1px solid var(--sc-border);
    font-weight: 600;
}
.sc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sc-avatar--lg { width: 52px; height: 52px; border: 0; }
.sc-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--sc-accent-h);
    border: 2px solid var(--sc-bg);
}
.sc-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.7;
    animation: sc-dot-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sc-dot-ping {
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

.sc-heart {
    position: fixed;
    pointer-events: none;
    color: #f85149;
    z-index: 10001;
    animation: sc-heart-fly 1.1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
.sc-heart svg { fill: currentColor; }
@keyframes sc-heart-fly {
    0% { opacity: 1; transform: translate(0, 0) scale(0.6); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -80px)) scale(1.3) rotate(var(--rot, 0deg)); }
}
.sc-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #da3633;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(218, 54, 51, 0.4);
}

/* ---- Card / Panel ---- */
.sc-panel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    width: min(430px, calc(100vw - 32px));
    max-height: min(600px, calc(100vh - 48px));
    padding: 18px 16px 18px 18px;
    background: var(--sc-bg);
    border: 1px solid var(--sc-edge);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(1, 4, 9, 0.2), 0 20px 48px rgba(1, 4, 9, 0.35);
    animation: sc-in 280ms cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}
.sc-panel[hidden] { display: none; }
@keyframes sc-in { 
    from { opacity: 0; transform: translateY(18px) scale(0.96); } 
    to { opacity: 1; transform: none; } 
}

.sc-body { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sc-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sc-text); }
.sc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--sc-accent-h);
    font-weight: 600;
}
.sc-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.sc-time { color: var(--sc-muted); font-size: 12px; white-space: nowrap; margin-left: auto; }
.sc-close {
    margin-left: 6px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sc-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    flex: none;
}
.sc-close:hover { background: var(--sc-bubble); color: var(--sc-text); }
.sc-close:active { transform: scale(0.94); }

.sc-thread {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
    max-height: 320px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--sc-border) transparent;
}
.sc-thread::-webkit-scrollbar { width: 5px; }
.sc-thread::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 4px; }

.sc-msg {
    max-width: 100%;
    margin: 0;
    padding: 9px 14px;
    background: var(--sc-bubble);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    animation: sc-pop 180ms ease-out;
    overflow-wrap: anywhere;
}
.sc-msg--me {
    align-self: flex-end;
    background: var(--sc-me);
    border-color: transparent;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.sc-msg--ai {
    position: relative;
    border-color: rgba(35, 134, 54, 0.3);
}
.sc-aitag {
    display: inline-block;
    padding: 1px 5px;
    margin-right: 6px;
    border-radius: 4px;
    background: rgba(35, 134, 54, 0.2);
    color: var(--sc-accent-h);
    font-size: 10.5px;
    font-weight: 700;
    vertical-align: middle;
}
@keyframes sc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sc-typing {
    display: inline-flex;
    gap: 5px;
    padding: 11px 15px;
    background: var(--sc-bubble);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
}
.sc-typing[hidden] { display: none; }
.sc-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-muted);
    animation: sc-blink 1s infinite ease-in-out;
}
.sc-typing i:nth-child(2) { animation-delay: 0.15s; }
.sc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sc-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.sc-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px;
    color: var(--sc-muted);
    font-size: 13px;
    font-weight: 500;
}
.sc-hint[hidden] { display: none; }

.sc-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 7px; 
    margin-bottom: 10px;
}
.sc-actions:empty { display: none; }
.sc-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-bubble);
    color: var(--sc-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    white-space: nowrap;
}
.sc-chip:hover { border-color: var(--sc-accent-h); background: color-mix(in srgb, var(--sc-accent-h) 8%, var(--sc-bubble)); transform: translateY(-1px); }
.sc-chip:active { transform: scale(0.97); }
.sc-chip--primary { background: var(--sc-accent); color: #fff; border-color: transparent; }
.sc-chip--primary:hover { background: var(--sc-accent-h); color: #fff; }
.sc-chip--wa { background: #25d366; color: #fff; border-color: transparent; gap: 6px; }
.sc-chip--wa:hover { background: #20bd5a; color: #fff; }

/* ---- Composer ---- */
.sc-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sc-border);
}
.sc-composer[hidden] { display: none; }
.sc-composer input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: var(--sc-bubble);
    color: var(--sc-text);
    font: inherit;
    font-size: 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sc-composer input:focus {
    outline: none;
    border-color: var(--sc-focus);
    box-shadow: 0 0 0 3px rgba(68, 147, 248, 0.25);
}
.sc-ask {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: var(--sc-accent);
    color: #fff;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.sc-ask:hover { background: var(--sc-accent-h); }
.sc-ask:active { transform: scale(0.95); }
.sc-ask:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
.sc-ask:disabled { opacity: 0.5; pointer-events: none; }
.sc-ainote { margin: 6px 2px 0; color: var(--sc-muted); font-size: 11px; line-height: 1.4; }
.sc-ainote[hidden] { display: none; }

/* ---- Message form ---- */
.sc-actions .sc-form { margin-top: 8px; }
.sc-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sc-form textarea, .sc-form input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: var(--sc-bubble);
    color: var(--sc-text);
    font: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sc-form textarea::placeholder, .sc-form input::placeholder { color: var(--sc-muted); }
.sc-form textarea:focus, .sc-form input:focus {
    outline: none;
    border-color: var(--sc-focus);
    box-shadow: 0 0 0 3px rgba(68, 147, 248, 0.25);
}
.sc-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sc-err { margin: 0; color: #f85149; font-size: 13px; }
body.light-theme .sc-err { color: #cf222e; }
.sc-send {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--sc-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.sc-send:hover { background: var(--sc-accent-h); }
.sc-send:active { transform: translateY(1px); }
.sc-send:disabled { opacity: 0.5; pointer-events: none; }

/* Keep the back-to-top button clear of the launcher */
body.has-sc .to-top { bottom: 96px; }

/* ---- Responsive & Mobile Optimization ---- */
@media (max-width: 768px) {
    .sc-root { 
        right: 12px; 
        bottom: 84px; 
        left: auto; 
    }
    .sc-root.sc-open { 
        right: 8px; 
        left: 8px; 
        bottom: 76px; 
        width: auto;
    }
    .sc-panel { 
        width: 100%; 
        max-width: 100%;
        grid-template-columns: 38px minmax(0, 1fr); 
        gap: 10px; 
        padding: 14px 12px; 
        max-height: min(520px, calc(100dvh - 86px), calc(100vh - 86px)); 
        font-size: 14px; 
        box-sizing: border-box;
    }
    .sc-thread {
        max-height: 240px;
    }
    .sc-composer input {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
    }
    .sc-panel .sc-avatar { width: 38px; height: 38px; }
    .sc-launcher { width: 54px; height: 54px; }
    .sc-avatar--lg { width: 48px; height: 48px; }
    .sc-chip { min-height: 38px; padding: 7px 13px; font-size: 12.5px; }
    .sc-row { grid-template-columns: 1fr; }
    body.has-sc .to-top { bottom: 154px; }
}

@media (max-width: 480px) {
    .sc-root.sc-open { 
        right: 6px; 
        left: 6px; 
        bottom: 72px; 
    }
    .sc-panel { 
        padding: 12px 10px; 
        gap: 8px; 
        grid-template-columns: 34px minmax(0, 1fr); 
        border-radius: 14px;
        max-height: min(490px, calc(100dvh - 78px), calc(100vh - 78px));
    }
    .sc-panel .sc-avatar { width: 34px; height: 34px; }
    .sc-name { font-size: 15px; }
    .sc-msg { font-size: 13.5px; padding: 7px 11px; }
    .sc-chip { font-size: 12px; padding: 6px 10px; min-height: 34px; }
    .sc-close { width: 34px; height: 34px; }
    .sc-composer { margin-top: 8px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-panel, .sc-msg { animation: none; }
    .sc-typing i { animation: none; opacity: 0.6; }
    .sc-launcher, .sc-root { transition: none; }
}