/* 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-copy-btn {
    background: none; border: none; cursor: pointer; color: var(--sacp-muted);
    padding: 2px 6px; border-radius: 4px; font-size: 11px; font-family: var(--sacp-font);
    transition: background .15s, color .15s; display: flex; align-items: center; gap: 3px;
}
.sacp-copy-btn:hover { background: var(--sacp-surface2); color: var(--sacp-text); }
.sacp-copy-btn.copied { color: #10b981; }

/* 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; }

/* 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 ──────────────────────────────────────────────────────── */
.sacp-bubble p    { margin: 0 0 10px; }
.sacp-bubble p:last-child { margin-bottom: 0; }
.sacp-bubble strong { font-weight: 700; }
.sacp-bubble em     { font-style: italic; }
.sacp-bubble a      { color: #818cf8; }
.sacp-bubble ul, .sacp-bubble ol { padding-left: 20px; margin: 8px 0; }
.sacp-bubble li { margin-bottom: 4px; }
.sacp-bubble h1,.sacp-bubble h2,.sacp-bubble h3 { margin: 12px 0 6px; font-weight: 700; }
.sacp-bubble h1 { font-size: 18px; }
.sacp-bubble h2 { font-size: 16px; }
.sacp-bubble h3 { font-size: 14px; }
.sacp-bubble hr  { border: none; border-top: 1px solid var(--sacp-border); margin: 12px 0; }
.sacp-bubble table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.sacp-bubble th, .sacp-bubble td { padding: 8px 10px; border: 1px solid var(--sacp-border); }
.sacp-bubble th   { background: var(--sacp-surface2); font-weight: 600; }

/* 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: #0f0f1a; border: 1px solid var(--sacp-border);
    border-radius: 8px; overflow: hidden; margin: 10px 0;
}
.sacp-code-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: var(--sacp-surface2);
    border-bottom: 1px solid var(--sacp-border);
}
.sacp-code-lang { font-size: 11px; color: var(--sacp-muted); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.sacp-code-copy {
    background: none; border: none; cursor: pointer; color: var(--sacp-muted);
    font-size: 11px; font-family: var(--sacp-font); padding: 3px 8px;
    border-radius: 4px; transition: color .15s, background .15s;
}
.sacp-code-copy:hover { background: var(--sacp-primary); color: #fff; }
.sacp-code-copy.copied { color: #10b981; }
.sacp-code-block pre {
    margin: 0; padding: 14px 16px; overflow-x: auto; font-family: 'Courier New', monospace;
    font-size: 13px; line-height: 1.6; color: #e2e8f0; white-space: pre;
}
.sacp-code-block pre::-webkit-scrollbar { height: 4px; }
.sacp-code-block pre::-webkit-scrollbar-thumb { background: var(--sacp-border); border-radius: 2px; }

/* ── 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%; 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;
}
.sacp-wrapper.sacp-fullscreen .sacp-chat-window {
    height: 100%; 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);
}
@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);
}