/* Super AI Chatbot Pro – Gemini-inspired chat UI */
/* Note: Inter font loaded via WordPress wp_enqueue_style for optimal performance */

/* ── Reset & Variables — ALL scoped to .sacp-wrapper to prevent theme conflicts ── */
.sacp-wrapper {
    /* Design tokens — scoped, never leak to theme */
    --sacp-bg:          #1c1c2e;
    --sacp-surface:     #252540;
    --sacp-surface2:    #2e2e50;
    --sacp-border:      rgba(255,255,255,.08);
    --sacp-primary:     #6366f1;
    --sacp-primary-g:   linear-gradient(135deg,#6366f1,#a855f7);
    --sacp-text:        #e2e8f0;
    --sacp-muted:       #94a3b8;
    --sacp-user-bg:     linear-gradient(135deg,#6366f1,#8b5cf6);
    --sacp-ai-bg:       #252540;
    --sacp-radius:      20px;
    --sacp-radius-sm:   12px;
    --sacp-shadow:      0 24px 64px rgba(0,0,0,.5);
    --sacp-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sacp-w:           100%;
    --sacp-h:           600px;

    /* Layout isolation */
    position: relative;
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--sacp-font);

    /* Prevent theme CSS from bleeding in */
    box-sizing: border-box;
    color: var(--sacp-text);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Ensure all children use border-box to prevent theme box-model conflicts */
.sacp-wrapper *, .sacp-wrapper *::before, .sacp-wrapper *::after {
    box-sizing: border-box;
}

/* ── Chat Window ────────────────────────────────────────────────────────────── */
.sacp-chat-window {
    width: 100%; height: var(--sacp-h); background: var(--sacp-bg);
    border: 1px solid var(--sacp-border); border-radius: var(--sacp-radius);
    box-shadow: var(--sacp-shadow); display: flex; flex-direction: column;
    overflow: hidden; position: relative;
    animation: sacpSlideIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
    backdrop-filter: blur(20px);
}

@keyframes sacpSlideIn {
    from { opacity:0; transform: translateY(16px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.sacp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: var(--sacp-surface);
    border-bottom: 1px solid var(--sacp-border); flex-shrink: 0;
}
.sacp-header-left { display: flex; align-items: center; gap: 12px; }
.sacp-avatar-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--sacp-primary-g); display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.4);
    flex-shrink: 0;
}
.sacp-title { display: block; font-size: 15px; font-weight: 700; color: var(--sacp-text); }
.sacp-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #10b981; font-weight: 500; }
.sacp-dot {
    width: 7px; height: 7px; background: #10b981; border-radius: 50%;
    animation: sacpPulse 2s ease infinite;
}
@keyframes sacpPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.6; transform:scale(1.3); }
}
.sacp-header-actions { display: flex; align-items: center; gap: 4px; }
.sacp-icon-btn {
    width: 36px; height: 36px; border: none; background: rgba(255,255,255,.04); cursor: pointer;
    color: var(--sacp-muted); border-radius: 10px; display: flex; align-items: center;
    justify-content: center; transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.sacp-icon-btn svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    stroke: #94a3b8 !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
    flex-shrink: 0;
}
.sacp-icon-btn::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    background: radial-gradient(circle, rgba(99,102,241,.3) 0%, transparent 70%);
    border-radius: 50%; transform: translate(-50%, -50%); transition: width .4s, height .4s;
}
.sacp-icon-btn:hover {
    background: rgba(99,102,241,.15); color: var(--sacp-text);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,.2);
}
.sacp-icon-btn:hover::before { width: 80px; height: 80px; }
.sacp-icon-btn:hover svg { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(99,102,241,.3)); }
.sacp-icon-btn:active { transform: translateY(0) scale(.95); }
.sacp-icon-btn:active::before { width: 60px; height: 60px; }

/* Button specific theme colors */
#sacp-download-btn:hover { background: rgba(16,185,129,.15); box-shadow: 0 4px 12px rgba(16,185,129,.2); }
#sacp-download-btn:hover::before { background: radial-gradient(circle, rgba(16,185,129,.3) 0%, transparent 70%); }
#sacp-download-btn:hover svg { filter: drop-shadow(0 2px 4px rgba(16,185,129,.3)); }

#sacp-clear-btn:hover { background: rgba(239,68,68,.15); box-shadow: 0 4px 12px rgba(239,68,68,.2); }
#sacp-clear-btn:hover::before { background: radial-gradient(circle, rgba(239,68,68,.3) 0%, transparent 70%); }
#sacp-clear-btn:hover svg { filter: drop-shadow(0 2px 4px rgba(239,68,68,.3)); }

#sacp-fullscreen-btn:hover { background: rgba(168,85,247,.15); box-shadow: 0 4px 12px rgba(168,85,247,.2); }
#sacp-fullscreen-btn:hover::before { background: radial-gradient(circle, rgba(168,85,247,.3) 0%, transparent 70%); }
#sacp-fullscreen-btn:hover svg { filter: drop-shadow(0 2px 4px rgba(168,85,247,.3)); }

/* Fullscreen icon toggle: show enter by default, swap to exit when active */
.sacp-icon-enter, .sacp-icon-exit { display: flex; align-items: center; justify-content: center; }
.sacp-icon-exit { display: none; }
.sacp-fullscreen .sacp-icon-enter { display: none; }
.sacp-fullscreen .sacp-icon-exit  { display: flex; }

.sacp-icon-btn:hover svg { stroke: #e2e8f0 !important; }
.sacp-fullscreen #sacp-fullscreen-btn {
    background: rgba(168,85,247,.25); color: var(--sacp-text);
    box-shadow: 0 0 20px rgba(168,85,247,.4), inset 0 0 0 1px rgba(168,85,247,.3);
    animation: sacpFullscreenPulse 2s ease infinite;
}
@keyframes sacpFullscreenPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(168,85,247,.4), inset 0 0 0 1px rgba(168,85,247,.3); }
    50% { box-shadow: 0 0 28px rgba(168,85,247,.5), inset 0 0 0 1px rgba(168,85,247,.4); }
}
/* Button entrance animations */
.sacp-header-actions .sacp-icon-btn:nth-child(1) { animation: sacpBtnSlideIn .4s cubic-bezier(.34,1.56,.64,1) .1s both; }
.sacp-header-actions .sacp-icon-btn:nth-child(2) { animation: sacpBtnSlideIn .4s cubic-bezier(.34,1.56,.64,1) .2s both; }
.sacp-header-actions .sacp-icon-btn:nth-child(3) { animation: sacpBtnSlideIn .4s cubic-bezier(.34,1.56,.64,1) .3s both; }
@keyframes sacpBtnSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Button loading animation for async operations */
.sacp-icon-btn.loading { pointer-events: none; }
.sacp-icon-btn.loading svg { animation: sacpSpin 1s linear infinite; }
@keyframes sacpSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Messages Area ──────────────────────────────────────────────────────────── */
.sacp-messages {
    flex: 1; overflow-y: auto; padding: 20px; display: flex;
    flex-direction: column; gap: 16px; scroll-behavior: smooth;
}
.sacp-messages::-webkit-scrollbar { width: 4px; }
.sacp-messages::-webkit-scrollbar-track { background: transparent; }
.sacp-messages::-webkit-scrollbar-thumb { background: var(--sacp-border); border-radius: 4px; }

/* Message rows */
.sacp-message { display: flex; gap: 10px; animation: sacpMsgIn .3s ease forwards; }
@keyframes sacpMsgIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
.sacp-message.sacp-user  { flex-direction: row-reverse; }
.sacp-message.sacp-ai    { flex-direction: row; }

/* Avatars */
.sacp-msg-avatar {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.sacp-message.sacp-ai   .sacp-msg-avatar { background: var(--sacp-primary-g); color: #fff; }
.sacp-message.sacp-user .sacp-msg-avatar { background: var(--sacp-surface2); color: var(--sacp-muted); }

/* Content wrapper — constrains bubble + meta. Max-width is relative to the
   full message row, NOT to itself, so no circular sizing issues. */
.sacp-msg-content {
    display: flex; flex-direction: column; min-width: 0;
}
.sacp-message.sacp-user .sacp-msg-content {
    max-width: 78%; align-items: flex-end;
}
.sacp-message.sacp-ai .sacp-msg-content {
    max-width: 85%;
}

/* Bubbles */
.sacp-bubble {
    padding: 12px 16px; border-radius: var(--sacp-radius-sm);
    font-size: 14px; line-height: 1.65; position: relative;
    /* No max-width here — parent .sacp-msg-content handles the constraint */
}
.sacp-message.sacp-user .sacp-bubble {
    background: var(--sacp-user-bg); color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(99,102,241,.3);
    width: fit-content;  /* shrinks to text width — no circular dep since parent is already sized */
    max-width: 100%;
}
.sacp-message.sacp-ai .sacp-bubble {
    background: var(--sacp-surface); color: var(--sacp-text);
    border: 1px solid var(--sacp-border); border-bottom-left-radius: 4px;
    width: 100%;
}

/* Message meta (timestamp + copy) */
.sacp-msg-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    font-size: 11px; color: var(--sacp-muted); opacity: 0;
    transition: opacity .2s;
}
.sacp-message:hover .sacp-msg-meta { opacity: 1; }
.sacp-wrapper .sacp-msg-meta .sacp-copy-btn {
    background: none !important; border: none !important; cursor: pointer;
    color: var(--sacp-muted) !important;
    padding: 2px 6px !important; border-radius: 4px; font-size: 11px; font-family: var(--sacp-font);
    transition: background .15s, color .15s; display: flex; align-items: center; gap: 3px;
    font-weight: 400; line-height: 1; box-shadow: none !important;
    text-transform: none !important; letter-spacing: normal !important;
    min-width: 0 !important; min-height: 0 !important;
}
.sacp-wrapper .sacp-msg-meta .sacp-copy-btn:hover { background: var(--sacp-surface2) !important; color: var(--sacp-text) !important; }
.sacp-wrapper .sacp-msg-meta .sacp-copy-btn.copied { color: #10b981 !important; }

/* Welcome card */
.sacp-welcome-card {
    background: var(--sacp-surface); border: 1px solid var(--sacp-border);
    border-radius: var(--sacp-radius-sm); padding: 24px; text-align: center; margin: auto;
}
.sacp-welcome-icon { font-size: 36px; margin-bottom: 12px; }
.sacp-welcome-card h3 { color: var(--sacp-text); font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.sacp-welcome-card p  { color: var(--sacp-muted); font-size: 13px; margin: 0; line-height: 1.6; }
.sacp-suggestions    { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.sacp-suggestion-chip {
    padding: 7px 14px; background: var(--sacp-surface2); border: 1px solid var(--sacp-border);
    border-radius: 20px; font-size: 12px; color: var(--sacp-text); cursor: pointer;
    transition: background .2s, border-color .2s; font-family: var(--sacp-font);
}
.sacp-suggestion-chip:hover { background: var(--sacp-primary); border-color: var(--sacp-primary); color: #fff; }

/* Web search indicator */
.sacp-search-bubble {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--sacp-muted); width: fit-content !important;
    padding: 10px 14px;
}
.sacp-search-spin {
    display: inline-block;
    animation: sacpSearchPulse 1.4s ease-in-out infinite;
}
@keyframes sacpSearchPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(0.85); }
}

/* Typing animation */
.sacp-typing .sacp-bubble { padding: 14px 18px; width: fit-content !important; max-width: 70px; }
.sacp-typing-dots { display: flex; gap: 5px; align-items: center; }
.sacp-typing-dots span {
    width: 8px; height: 8px; background: var(--sacp-muted); border-radius: 50%;
    animation: sacpBounce 1.2s ease infinite;
}
.sacp-typing-dots span:nth-child(2) { animation-delay: .2s; }
.sacp-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes sacpBounce {
    0%,60%,100% { transform:translateY(0); opacity:.5; }
    30%          { transform:translateY(-6px); opacity:1; }
}

/* ── Mic Button ──────────────────────────────────────────────────────────────── */
.sacp-mic-btn {
    flex-shrink: 0;
    position: relative;
    transition: color 0.2s, background 0.2s, transform 0.15s;
}
.sacp-mic-btn:hover {
    color: var(--sacp-primary);
    transform: scale(1.1);
}
.sacp-mic-btn.sacp-mic-active {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-radius: 50%;
    animation: sacp-mic-pulse 1.2s ease-in-out infinite;
}
.sacp-mic-btn.sacp-mic-active::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.4);
    animation: sacp-mic-ripple 1.3s ease-out infinite;
    pointer-events: none;
}
@keyframes sacp-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.4); }
    50%       { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}
@keyframes sacp-mic-ripple {
    0%   { opacity: 1; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* ── Speak Button ────────────────────────────────────────────────────────────── */
.sacp-speak-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    color: var(--sacp-text);
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: var(--sacp-font);
}
.sacp-speak-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.07);
    color: var(--sacp-primary);
}
.sacp-speak-btn.sacp-speaking {
    opacity: 1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    animation: sacp-speak-wave 0.9s ease-in-out infinite alternate;
}
@keyframes sacp-speak-wave {
    0%   { opacity: 0.65; }
    100% { opacity: 1; }
}

/* ── Markdown Rendering – ChatGPT/Claude style ───────────────────────────────── */
.sacp-message.sacp-ai .sacp-bubble {
    font-size: 14.5px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    color: #dde3ee;
}

/* Paragraphs */
.sacp-bubble p { margin: 0 0 10px; }
.sacp-bubble p:last-child { margin-bottom: 0; }

/* Headings */
.sacp-bubble h1, .sacp-bubble h2, .sacp-bubble h3,
.sacp-bubble h4, .sacp-bubble h5, .sacp-bubble h6 {
    font-weight: 700; line-height: 1.35; color: #f1f5f9; margin: 18px 0 6px;
}
.sacp-bubble h1 { font-size: 18px; padding-bottom: 6px; border-bottom: 1px solid rgba(99,102,241,.3); }
.sacp-bubble h2 { font-size: 15.5px; padding-left: 10px; border-left: 3px solid var(--sacp-primary); }
.sacp-bubble h3 { font-size: 14px; color: #a5b4fc; }
.sacp-bubble h4 { font-size: 13.5px; color: #c7d2fe; font-weight: 600; }
.sacp-bubble h5 { font-size: 13px; color: #c7d2fe; font-weight: 600; }
.sacp-bubble h6 { font-size: 12.5px; color: var(--sacp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Bold & Italic */
.sacp-bubble strong { font-weight: 600; color: #f1f5f9; }
.sacp-bubble em     { font-style: italic; color: #c4cfe3; }

/* Links */
.sacp-bubble a {
    color: #818cf8; text-decoration: none;
    border-bottom: 1px solid rgba(129,140,248,.3);
    transition: color .15s, border-color .15s;
}
.sacp-bubble a:hover { color: #a5b4fc; border-bottom-color: rgba(165,180,252,.6); }

/* Lists — compact, no gaps between items */
.sacp-bubble ul, .sacp-bubble ol {
    padding-left: 0; margin: 8px 0 10px; list-style: none;
}
.sacp-bubble ul li {
    position: relative; padding-left: 16px;
    margin-bottom: 4px; line-height: 1.65; color: #dde3ee;
}
.sacp-bubble ul li::before {
    content: '•'; color: var(--sacp-primary);
    position: absolute; left: 2px; top: 0;
    font-size: 15px; line-height: 1.6; font-weight: 700;
}
.sacp-bubble ol { counter-reset: sacp-ol; }
.sacp-bubble ol li {
    position: relative; padding-left: 24px;
    margin-bottom: 4px; line-height: 1.65;
    counter-increment: sacp-ol; color: #dde3ee;
}
.sacp-bubble ol li::before {
    content: counter(sacp-ol) '.'; color: var(--sacp-primary);
    font-weight: 600; font-size: 13px;
    position: absolute; left: 0; top: 0; line-height: 1.65;
}
.sacp-bubble ul li:last-child,
.sacp-bubble ol li:last-child { margin-bottom: 0; }

/* Blockquote */
.sacp-bubble blockquote {
    border-left: 3px solid rgba(99,102,241,.6); margin: 10px 0;
    padding: 8px 14px; background: rgba(99,102,241,.06);
    border-radius: 0 6px 6px 0; color: var(--sacp-muted); font-style: italic;
}

/* HR */
.sacp-bubble hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 14px 0; }

/* Tables */
.sacp-bubble table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    margin: 10px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden;
}
.sacp-bubble th {
    background: rgba(99,102,241,.1); font-weight: 600;
    color: #a5b4fc; text-align: left; padding: 9px 12px;
    border-bottom: 1px solid rgba(99,102,241,.2);
}
.sacp-bubble td {
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: #dde3ee;
}
.sacp-bubble tr:last-child td { border-bottom: none; }
.sacp-bubble tbody tr:hover td { background: rgba(255,255,255,.02); }

/* Inline code */
.sacp-bubble code {
    background: rgba(99,102,241,.15); color: #a5b4fc; padding: 2px 6px;
    border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px;
}

/* Code blocks */
.sacp-code-block {
    background: #0d1117 !important; border: 1px solid rgba(99,102,241,.35) !important;
    border-radius: 10px; overflow: hidden; margin: 12px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.sacp-code-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: #161b22 !important;
    border-bottom: 1px solid rgba(99,102,241,.25);
}
.sacp-code-lang {
    font-size: 11px; color: #7c85f3 !important; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
}
.sacp-code-copy {
    background: none; border: 1px solid rgba(99,102,241,.3); cursor: pointer;
    color: #94a3b8; font-size: 11px; font-family: var(--sacp-font);
    padding: 3px 10px; border-radius: 5px; transition: all .15s;
}
.sacp-code-copy:hover { background: var(--sacp-primary); color: #fff; border-color: var(--sacp-primary); }
.sacp-code-copy.copied { color: #10b981; border-color: #10b981; }
.sacp-code-block pre {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px; line-height: 1.7;
    color: #c9d1d9 !important; background: #0d1117 !important;
    white-space: pre;
}
.sacp-code-block pre::-webkit-scrollbar { height: 5px; }
.sacp-code-block pre::-webkit-scrollbar-track { background: #161b22; }
.sacp-code-block pre::-webkit-scrollbar-thumb { background: rgba(99,102,241,.5); border-radius: 3px; }

/* ── Input Area ──────────────────────────────────────────────────────────────── */
.sacp-input-area {
    padding: 16px 20px 12px; background: var(--sacp-surface);
    border-top: 1px solid var(--sacp-border); flex-shrink: 0;
}
.sacp-input-container {
    display: flex; align-items: flex-end; gap: 10px;
    background: var(--sacp-surface2); border: 1px solid var(--sacp-border);
    border-radius: 16px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s;
}
.sacp-input-container:focus-within {
    border-color: var(--sacp-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.sacp-user-input {
    flex: 1; background: transparent; border: none; outline: none; resize: none;
    color: var(--sacp-text); font-family: var(--sacp-font); font-size: 14px;
    line-height: 1.5; max-height: 140px; overflow-y: auto; min-height: 24px;
    scrollbar-width: none;
}
.sacp-user-input::placeholder { color: var(--sacp-muted); }
.sacp-user-input::-webkit-scrollbar { display: none; }
.sacp-send-btn {
    width: 36px; height: 36px; background: var(--sacp-primary-g); border: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #fff; flex-shrink: 0; transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.sacp-send-btn:hover:not(:disabled) { opacity: .9; transform: scale(1.05); }
.sacp-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.sacp-send-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0;
}
.sacp-footer-note { font-size: 11px; color: var(--sacp-muted); margin: 8px 0 0; text-align: center; }

/* ── Responsiveness ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sacp-wrapper { max-width: 100%; }
    .sacp-chat-window { height: 520px; border-radius: var(--sacp-radius-sm); }
    .sacp-header { padding: 12px 16px; }
    .sacp-icon-btn { width: 32px; height: 32px; }
    .sacp-icon-btn svg { width: 14px; height: 14px; }
}
@media (hover: none) {
    .sacp-icon-btn:active {
        background: rgba(99,102,241,.15); color: var(--sacp-text);
        transform: scale(.95);
    }
    .sacp-icon-btn:active svg { transform: scale(1); }
}

/* ── Fullscreen Mode ────────────────────────────────────────────────────────── */
.sacp-wrapper.sacp-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    max-width: 100% !important; z-index: 999999; margin: 0;
    background: radial-gradient(ellipse at center, rgba(28,28,46,.97) 0%, rgba(12,12,20,.98) 70%, #0a0a12 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    box-sizing: border-box; animation: sacpFullscreenIn .35s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes sacpFullscreenIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(16px) saturate(1.2); }
}
.sacp-wrapper.sacp-fullscreen::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: .03; pointer-events: none;
}

/* Non-sidebar fullscreen */
.sacp-wrapper.sacp-fullscreen:not(.sacp-has-sidebar) .sacp-chat-window {
    height: calc(100vh - 40px); max-width: 960px; width: 100%;
    border-radius: var(--sacp-radius); animation: sacpChatWindowIn .4s cubic-bezier(.34,1.56,.64,1) .1s both;
    box-shadow: 0 0 60px rgba(99,102,241,.15), 0 20px 60px rgba(0,0,0,.5);
    border: 1px solid var(--sacp-border);
}

/* Sidebar fullscreen — hide sidebar, expand layout to full screen */
.sacp-wrapper.sacp-fullscreen.sacp-has-sidebar .sacp-layout {
    width: 100%; max-width: 960px;
    height: calc(100vh - 40px);
    border-radius: var(--sacp-radius);
    animation: sacpChatWindowIn .4s cubic-bezier(.34,1.56,.64,1) .1s both;
    box-shadow: 0 0 60px rgba(99,102,241,.15), 0 20px 60px rgba(0,0,0,.5);
}
.sacp-wrapper.sacp-fullscreen.sacp-has-sidebar .sacp-history-sidebar {
    display: none;
}
.sacp-wrapper.sacp-fullscreen.sacp-has-sidebar .sacp-chat-window {
    border-radius: var(--sacp-radius);
    height: 100%;
    border: none;
    box-shadow: none;
    animation: sacpChatWindowIn .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}

@keyframes sacpChatWindowIn {
    from { opacity: 0; transform: scale(.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Fullscreen exit icon swap with animation */
#sacp-fullscreen-btn .sacp-icon-exit { display: none; opacity: 0; transform: scale(.8); transition: all .2s ease; }
.sacp-fullscreen #sacp-fullscreen-btn .sacp-icon-enter { display: none; opacity: 0; transform: scale(.8); transition: all .2s ease; }
.sacp-fullscreen #sacp-fullscreen-btn .sacp-icon-exit  {
    display: block; opacity: 1; transform: scale(1);
    animation: sacpIconPop .4s cubic-bezier(.68,-.55,.265,1.55);
}
@keyframes sacpIconPop {
    0% { transform: scale(.6) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Error state ──────────────────────────────────────────────────────────────── */
.sacp-message.sacp-error .sacp-bubble {
    background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #fca5a5;
}

/* ── Attach Button ────────────────────────────────────────────────────────────── */
.sacp-attach-btn {
    flex-shrink: 0;
    color: var(--sacp-muted);
    transition: color .2s, transform .2s;
}
.sacp-attach-btn:hover { color: var(--sacp-primary); transform: rotate(15deg); }
.sacp-attach-btn.sacp-attach-active { color: var(--sacp-primary); }

/* ── File Preview Strip (Gemini-style) ───────────────────────────────────────── */
.sacp-file-preview-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 4px;
    animation: sacpFadeIn .2s ease;
}

/* Gemini-style image chip in input strip */
.sacp-preview-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--sacp-surface2);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 12px;
    overflow: hidden;
    height: 52px;
    max-width: 200px;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: border-color .2s;
}
.sacp-preview-chip:hover { border-color: var(--sacp-primary); }

/* Thumbnail inside chip */
.sacp-preview-chip-thumb {
    height: 52px;
    width: 52px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* File name inside chip (for docs) */
.sacp-preview-chip-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sacp-text);
    padding: 0 10px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remove button inside chip */
.sacp-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border: 2px solid var(--sacp-bg);
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    padding: 0;
    z-index: 2;
}
.sacp-preview-remove:hover { background: #dc2626; transform: scale(1.15); }

/* Hover expand overlay for image chip */
.sacp-preview-chip .sacp-chip-hover-preview {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 100;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.1);
    pointer-events: none;
}
.sacp-preview-chip:hover .sacp-chip-hover-preview { display: block; }
.sacp-chip-hover-preview img {
    display: block;
    max-width: 200px;
    max-height: 160px;
    object-fit: cover;
}

/* Doc file chip (no image) */
.sacp-preview-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sacp-surface2);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sacp-text);
    max-width: 220px;
    height: 42px;
    position: relative;
}
.sacp-preview-doc-chip .sacp-doc-icon { font-size: 18px; flex-shrink:0; }
.sacp-preview-doc-chip .sacp-doc-chip-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
}

@keyframes sacpFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Inline image in user bubble (Gemini-style compact) ──────────────────────── */
.sacp-img-preview-msg {
    margin-bottom: 8px;
    display: flex;
}
.sacp-img-bubble-chip {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    overflow: visible;
    cursor: pointer;
}
.sacp-img-bubble-chip img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    border: 1px solid rgba(255,255,255,.15);
    transition: transform .2s, box-shadow .2s;
}
.sacp-img-bubble-chip:hover img {
    transform: scale(1.04);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
/* Expanded preview on hover */
.sacp-img-bubble-chip .sacp-bubble-img-expand {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 999;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.12);
    pointer-events: none;
}
.sacp-img-bubble-chip:hover .sacp-bubble-img-expand { display: block; }
.sacp-bubble-img-expand img {
    display: block;
    max-width: 260px;
    max-height: 200px;
    object-fit: cover;
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    transform: none;
    box-shadow: none;
}

/* Doc badge in bubble */
.sacp-doc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1); border-radius: 8px;
    padding: 6px 12px; font-size: 12px; font-weight: 500;
    margin-bottom: 6px; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.08);
}

/* ── Image Download Icon (inline in meta row, next to Copy) ───────────────── */
.sacp-wrapper .sacp-msg-meta .sacp-img-dl-btn {
    background: none !important; border: none !important; cursor: pointer;
    color: var(--sacp-muted) !important;
    padding: 2px 6px !important; border-radius: 4px; font-size: 11px; font-family: var(--sacp-font);
    transition: background .15s, color .15s; display: flex; align-items: center; gap: 3px;
    font-weight: 400; line-height: 1; box-shadow: none !important;
    text-transform: none !important; letter-spacing: normal !important;
    min-width: 0 !important; min-height: 0 !important;
}
.sacp-wrapper .sacp-msg-meta .sacp-img-dl-btn:hover {
    background: var(--sacp-surface2) !important; color: var(--sacp-text) !important;
}
.sacp-wrapper .sacp-msg-meta .sacp-img-dl-btn:disabled { opacity: .5; cursor: wait; }
/* ══════════════════════════════════════════════════════════════════════════════
   CHAT HISTORY SIDEBAR
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sidebar fixed width — never changes regardless of content */
:root { --sacp-sidebar-w: 240px; }

/* Wrapper expands when sidebar is enabled */
.sacp-wrapper.sacp-has-sidebar { max-width: calc(760px + var(--sacp-sidebar-w)); }

/* Two-column layout: sidebar + chat window */
.sacp-layout {
    display: flex;
    width: 100%;
    height: var(--sacp-h);
    border-radius: var(--sacp-radius);
    box-shadow: var(--sacp-shadow);
    overflow: hidden;
    border: 1px solid var(--sacp-border);
    animation: sacpSlideIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Chat window fills remaining space after fixed-width sidebar */
.sacp-layout .sacp-chat-window {
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    flex: 1 1 0%;
    min-width: 0;
    width: 0;        /* flex:1 handles actual width — prevents content from expanding it */
    height: 100%;
    overflow: hidden;
}

/* ── Sidebar Panel — fixed 240px, never shrinks or grows ─────────────────────── */
.sacp-history-sidebar {
    width: var(--sacp-sidebar-w);       /* 240px */
    min-width: var(--sacp-sidebar-w);   /* 240px — content cannot shrink it */
    max-width: var(--sacp-sidebar-w);   /* 240px — content cannot expand it */
    flex-shrink: 0;
    flex-grow: 0;
    background: #16162a;
    border-right: 1px solid var(--sacp-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .3s cubic-bezier(.4,0,.2,1), min-width .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}

.sacp-history-sidebar.sacp-sidebar-collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Sidebar Header ─────────────────────────────────────────────────────────── */
.sacp-sidebar-header {
    padding: 14px 12px 10px;
    border-bottom: 1px solid var(--sacp-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sacp-new-chat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 10px;
    color: #a5b4fc;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--sacp-font);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
    white-space: nowrap;
}
.sacp-new-chat-btn:hover {
    background: rgba(99,102,241,.22);
    border-color: rgba(99,102,241,.5);
    color: #c7d2fe;
    transform: translateY(-1px);
}
.sacp-new-chat-btn:active { transform: translateY(0) scale(.98); }
.sacp-new-chat-btn svg { flex-shrink: 0; }

/* ── Sidebar Search ──────────────────────────────────────────────────────────── */
.sacp-sidebar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.sacp-sidebar-search-icon {
    position: absolute;
    left: 9px;
    color: var(--sacp-muted);
    pointer-events: none;
    display: flex;
}
.sacp-sidebar-search input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    background: var(--sacp-surface2);
    border: 1px solid var(--sacp-border);
    border-radius: 8px;
    color: var(--sacp-text);
    font-size: 12px;
    font-family: var(--sacp-font);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.sacp-sidebar-search input:focus {
    border-color: rgba(99,102,241,.5);
    box-shadow: 0 0 0 2px rgba(99,102,241,.12);
}
.sacp-sidebar-search input::placeholder { color: var(--sacp-muted); }

/* ── Conversation List ──────────────────────────────────────────────────────── */
.sacp-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sacp-sidebar-list::-webkit-scrollbar { width: 3px; }
.sacp-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.sacp-sidebar-list::-webkit-scrollbar-thumb { background: var(--sacp-border); border-radius: 3px; }

.sacp-sidebar-group-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sacp-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 10px 6px 4px;
    flex-shrink: 0;
}

.sacp-sidebar-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--sacp-muted);
    font-size: 12px;
    line-height: 1.6;
}
.sacp-sidebar-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .5; }

.sacp-conv-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
    min-width: 0;
}
.sacp-conv-item:hover { background: rgba(255,255,255,.05); }
.sacp-conv-item.sacp-conv-active {
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.2);
}

.sacp-conv-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    opacity: .7;
}
.sacp-conv-active .sacp-conv-icon { opacity: 1; }

.sacp-conv-title {
    flex: 1;
    font-size: 12.5px;
    color: var(--sacp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.sacp-conv-active .sacp-conv-title { color: #c7d2fe; font-weight: 500; }
.sacp-conv-item:hover .sacp-conv-title { color: var(--sacp-text); }

.sacp-conv-delete {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    color: var(--sacp-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
    padding: 0;
    font-size: 13px;
}
.sacp-conv-item:hover .sacp-conv-delete { opacity: 1; }
.sacp-conv-delete:hover { background: rgba(239,68,68,.15); color: #ef4444; }

@media (max-width: 640px) {
    .sacp-wrapper.sacp-has-sidebar { max-width: 100%; }
    .sacp-history-sidebar { display: none; }
}