/**
 * Gumi AI Chat – Frontend & Admin Tester Styles
 * Version 1.2.0
 */

:root {
    --gumi-primary:       #0073ee;
    --gumi-primary-light: rgba(0,115,238,.10);
    --gumi-btn-color:     #222222;
    --gumi-send-color:    #222222;
    --gumi-radius:        10px;
    --gumi-shadow:        0 8px 24px rgba(0,0,0,.15);
    --gumi-border:        #e5e5e5;
    --gumi-bg:            #fff;
    --gumi-msg-bg:        #f4f4f4;
    --gumi-msg-user-bg:   var(--gumi-primary-light);
    --gumi-msg-user-color:var(--gumi-primary);
    --gumi-msg-ai-bg:     #fff;
    --gumi-text:          #333;
    --gumi-text-muted:    #777;
    --gumi-input-bg:      #fff;
    --gumi-input-border:  #e5e5e5;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
.gumi-dark {
    --gumi-border:        #3a3a3a;
    --gumi-bg:            #1e1e1e;
    --gumi-msg-bg:        #161616;
    --gumi-msg-ai-bg:     #2a2a2a;
    --gumi-msg-user-bg:   var(--gumi-primary-dark-bg, rgba(0,115,238,.25));
    --gumi-msg-user-color:var(--gumi-primary, #6aafff);
    --gumi-text:          #e8e8e8;
    --gumi-text-muted:    #999;
    --gumi-input-bg:      #2a2a2a;
    --gumi-input-border:  #3a3a3a;
}
.gumi-dark .gumi-menu-dropdown { background:#2a2a2a; border-color:#3a3a3a; }
.gumi-dark .gumi-menu-item:hover { background:#333; }
.gumi-dark .gumi-bubble { background:#2a2a2a; color:#ccc; }
.gumi-dark .gumi-bubble-arrow { background:#2a2a2a; }

/* ── Widget container ────────────────────────────────────────────────── */
.gumi-widget { position:fixed; z-index:999999; bottom:20px; right:20px; }
.gumi-pos-left { right:auto; left:20px; }

/* ── Floating button ─────────────────────────────────────────────────── */
.gumi-btn {
    width:60px!important; height:60px!important;
    border-radius:50%!important;
    background:var(--gumi-btn-color)!important;
    border:none; box-shadow:0 4px 12px rgba(0,0,0,.18);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease,box-shadow .2s ease;
    position:relative; z-index:2; padding:0!important;
}
.gumi-btn:hover { transform:scale(1.06); box-shadow:0 6px 20px rgba(0,0,0,.22); }
.gumi-btn .gumi-icon-open,.gumi-btn .gumi-icon-close {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    transition:opacity .2s ease,transform .2s ease;
}

/* ── Welcome bubble ──────────────────────────────────────────────────── */
.gumi-bubble {
    position:absolute; bottom:75px; right:0;
    background:#fff; border-radius:8px; padding:10px 14px;
    box-shadow:0 3px 8px rgba(0,0,0,.10);
    font-size:14px; line-height:1.4; color:#555;
    white-space:nowrap; animation:gumi-fade-up .3s ease;
}
.gumi-pos-left .gumi-bubble { right:auto; left:0; }
.gumi-bubble-arrow { position:absolute; bottom:-6px; right:20px; width:12px; height:12px; background:#fff; transform:rotate(45deg); box-shadow:2px 2px 4px rgba(0,0,0,.06); }
.gumi-pos-left .gumi-bubble-arrow { right:auto; left:20px; }
.gumi-bubble.hidden { display:none; }

/* ── Popup ───────────────────────────────────────────────────────────── */
.gumi-popup {
    position:absolute; bottom:75px; right:0;
    background:var(--gumi-bg); border-radius:var(--gumi-radius);
    box-shadow:var(--gumi-shadow); overflow:hidden;
    animation:gumi-slide-up .25s ease;
}
.gumi-pos-left .gumi-popup { right:auto; left:0; }
@media(max-width:600px) {
    .gumi-popup { position:fixed!important; bottom:80px!important; left:10px!important; right:10px!important; width:auto!important; }
}
@media(min-width:993px) {
    .gumi-popup.gumi-expanded { width:600px!important; height:calc(100vh - 165px)!important; max-width:calc(100vw - 45px)!important; max-height:80vh!important; }
}
@media(max-width:992px) { .gumi-expand-btn { display:none!important; } }

/* ── Chat container ──────────────────────────────────────────────────── */
.gumi-chat-container {
    display:flex; flex-direction:column; height:100%;
    background:var(--gumi-bg); border-radius:var(--gumi-radius); overflow:hidden;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.gumi-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; height:60px;
    border-bottom:1px solid var(--gumi-border);
    flex-shrink:0; background:var(--gumi-bg);
}
.gumi-header-left { display:flex; align-items:center; gap:10px; }
.gumi-avatar-wrap { position:relative; flex-shrink:0; }
.gumi-avatar { width:32px; height:32px; border-radius:50%!important; object-fit:cover; display:block; }
.gumi-status-dot {
    position:absolute; bottom:-2px; right:-2px;
    width:8px; height:8px; background:#22c55e;
    border-radius:50%; border:2px solid var(--gumi-bg);
    box-shadow:0 1px 3px rgba(0,0,0,.1); box-sizing:content-box!important;
}
.gumi-chat-name { font-size:15px; font-weight:600; color:var(--gumi-text); }

/* ── Header actions ──────────────────────────────────────────────────── */
.gumi-header-actions { display:flex; align-items:center; gap:4px; position:relative; }
.gumi-menu-trigger,.gumi-theme-toggle {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; cursor:pointer; color:var(--gumi-text-muted);
    transition:background .15s ease,color .15s ease;
}
.gumi-menu-trigger:hover,.gumi-theme-toggle:hover { background:rgba(0,0,0,.05); color:var(--gumi-text); }
.gumi-dark .gumi-menu-trigger,.gumi-dark .gumi-theme-toggle { color:#aaa; }
.gumi-dark .gumi-menu-trigger:hover,.gumi-dark .gumi-theme-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }

/* Sun/moon icon visibility */
.gumi-icon-sun  { display:none; }
.gumi-icon-moon { display:block; }
.gumi-dark .gumi-icon-sun  { display:block; }
.gumi-dark .gumi-icon-moon { display:none; }

.gumi-menu-dropdown {
    position:absolute; top:100%; right:0; margin-top:4px;
    min-width:160px; background:var(--gumi-bg);
    border:1px solid var(--gumi-border); border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.10); padding:4px;
    z-index:100; opacity:0; visibility:hidden;
    transform:scale(.95) translateY(-4px); transform-origin:top right;
    transition:all .15s ease;
}
.gumi-menu-dropdown[data-state="open"] { opacity:1; visibility:visible; transform:scale(1) translateY(0); }
.gumi-menu-item {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    font-size:13px; font-weight:500; color:var(--gumi-text);
    border-radius:6px; cursor:pointer; transition:background .12s ease; white-space:nowrap; line-height:1.4;
}
.gumi-menu-item:hover { background:#f5f5f5; }
.gumi-dark .gumi-menu-item:hover { background:#333; }
.gumi-menu-item svg { flex-shrink:0; color:#666; }

/* ── Messages ────────────────────────────────────────────────────────── */
.gumi-messages {
    flex:1; overflow-y:auto; padding:18px 16px;
    background:var(--gumi-msg-bg);
    display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;
}
.gumi-msg { display:flex; width:100%; }
.gumi-msg-user .gumi-msg-bubble {
    background:var(--gumi-msg-user-bg); color:var(--gumi-msg-user-color);
    margin-left:auto; max-width:80%;
}
.gumi-msg-assistant .gumi-msg-bubble,
.gumi-msg-system .gumi-msg-bubble {
    background:var(--gumi-msg-ai-bg); color:var(--gumi-text);
    margin-right:auto; max-width:100%;
    box-shadow:0 2px 5px rgba(0,0,0,.06);
}
.gumi-msg-bubble {
    padding:10px 14px; border-radius:8px;
    font-size:14px; line-height:1.6; word-break:break-word;
}
.gumi-msg-bubble p { margin:0 0 8px; }
.gumi-msg-bubble p:last-child { margin-bottom:0; }
.gumi-msg-bubble strong { font-weight:600; }
.gumi-msg-bubble a { color:var(--gumi-primary); }
.gumi-msg-bubble ol,.gumi-msg-bubble ul { margin:6px 0 6px 20px; padding:0; }
.gumi-msg-bubble li { margin-bottom:4px; }
/* Keep emojis inline and same size as surrounding text */
.gumi-msg-bubble img.emoji,
.gumi-msg-bubble .emoji { font-size:inherit!important; height:1em!important; width:1em!important; vertical-align:-0.1em!important; }

/* ── Typing indicator ────────────────────────────────────────────────── */
.gumi-typing { display:flex; align-items:center; gap:5px; padding:6px 4px; }
.gumi-typing span { width:7px; height:7px; background:#aaa; border-radius:50%; animation:gumi-bounce 1.2s ease-in-out infinite; }
.gumi-typing span:nth-child(2) { animation-delay:.2s; }
.gumi-typing span:nth-child(3) { animation-delay:.4s; }

/* ── Quick buttons ───────────────────────────────────────────────────── */
.gumi-quick-buttons {
    padding:8px 12px 4px; display:flex; flex-wrap:wrap; gap:6px;
    border-top:1px solid var(--gumi-border); background:var(--gumi-bg);
}
.gumi-quick-btn {
    padding:5px 12px; border-radius:20px; border:1px solid var(--gumi-primary);
    background:transparent; color:var(--gumi-primary);
    font-size:13px; cursor:pointer; transition:all .15s ease; white-space:nowrap;
}
.gumi-quick-btn:hover { background:var(--gumi-primary); color:#fff; }

/* ── Input ───────────────────────────────────────────────────────────── */
.gumi-input-wrap {
    display:flex; align-items:center; gap:8px;
    padding:10px 12px;
    border-top:1px solid var(--gumi-border); background:var(--gumi-bg); flex-shrink:0;
}

/* Unified input container — the border lives here */
.gumi-input-inner {
    flex:1; display:flex; flex-direction:column; gap:4px; min-width:0;
    border:1px solid var(--gumi-input-border); border-radius:6px;
    background:var(--gumi-input-bg); padding:8px 14px;
    transition:border-color .15s ease;
}
.gumi-input-inner:focus-within { border-color:var(--gumi-primary); }

.gumi-input {
    width:100%; resize:none; border:none; outline:none;
    padding:0; font-size:14px; font-family:inherit;
    line-height:1.5; color:var(--gumi-text); background:transparent;
    max-height:120px; overflow-y:auto; box-sizing:border-box; display:block;
}
.gumi-input::placeholder { color:#aaa; }

/* Image attach button — round, compact */
.gumi-image-btn {
    width:36px; height:36px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; cursor:pointer; color:var(--gumi-text-muted);
    background:rgba(0,0,0,.08);
    border:none;
    transition:background .15s ease, color .15s ease;
}
.gumi-dark .gumi-image-btn { background:rgba(255,255,255,.10); }
.gumi-image-btn:hover { background:rgba(0,0,0,.15); color:var(--gumi-primary); }
.gumi-dark .gumi-image-btn:hover { background:rgba(255,255,255,.18); }

/* Image preview strip — inside the input container */
.gumi-image-preview {
    display:flex; align-items:center; gap:6px;
    padding:0 0 6px;
}
.gumi-image-thumb {
    width:44px; height:44px; object-fit:cover;
    border-radius:6px; display:block; flex-shrink:0;
}
.gumi-image-remove {
    background:none; border:none; cursor:pointer;
    color:var(--gumi-text-muted); font-size:16px; line-height:1;
    padding:2px 4px; border-radius:4px;
    transition:background .12s, color .12s;
}
.gumi-image-remove:hover { background:rgba(200,0,0,.1); color:#c00; }

/* Send button — round */
.gumi-send-btn {
    width:40px; height:40px; flex-shrink:0; border-radius:50%;
    background:var(--gumi-send-color)!important; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .15s ease, transform .15s ease; padding:0!important;
}
.gumi-send-btn img { width:20px; height:20px; display:block; }
.gumi-send-btn:hover { opacity:.9; transform:scale(1.05); }
.gumi-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ── Embed (shortcode) ───────────────────────────────────────────────── */
.gumi-embed { border:1px solid var(--gumi-border); border-radius:var(--gumi-radius); overflow:hidden; }
.gumi-embed .gumi-chat-container { border-radius:0; }

/* ── Admin tester wrapper ────────────────────────────────────────────── */
.gumi-admin-tester {
    width:390px; height:580px; border:1px solid #ddd;
    border-radius:var(--gumi-radius); overflow:hidden;
    box-shadow:var(--gumi-shadow);
}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes gumi-slide-up { from{opacity:0;transform:translateY(16px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes gumi-fade-up  { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes gumi-bounce   { 0%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-6px);} }