/* =========================================================
   SHOPWMS AI Chat UI v2
   - 로그인 사용자 전용 UI
   - 외부 AI API / DB 연동 전 샘플
   - 5분 무응답 자동 종료
   - 자동 종료 대화는 이전 대화 목록에 표시
   - 사용자가 '대화 나가기'한 대화는 목록에서 숨김
========================================================= */
.ai-chat-launcher,
.ai-chat-panel,
.ai-chat-panel * { box-sizing: border-box; }

.ai-chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10020;
    width: 88px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(148,163,184,.32);
    border-radius: 16px;
    background: #09131d;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 14px 34px rgba(15,23,42,.24), 0 4px 10px rgba(15,23,42,.12);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ai-chat-launcher:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,23,42,.28); border-color: rgba(148,163,184,.58); }
.ai-chat-launcher:focus-visible,
.ai-chat-close:focus-visible,
.ai-chat-head-btn:focus-visible,
.ai-chat-back:focus-visible,
.ai-chat-exit:focus-visible,
.ai-chat-send:focus-visible,
.ai-chat-restart:focus-visible,
.ai-chat-new-conversation:focus-visible,
.ai-chat-input-area textarea:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; }
.ai-chat-launcher-logo { display:block; width:100%; height:100%; border-radius:15px; object-fit:cover; }
.ai-chat-launcher-tooltip {
    position:absolute; right:98px; top:50%; transform:translateY(-50%) translateX(5px);
    padding:8px 10px; border-radius:8px; background:#111827; color:#fff;
    font-size:11px; font-weight:800; white-space:nowrap; opacity:0; visibility:hidden;
    pointer-events:none; transition:.15s ease;
}
.ai-chat-launcher:hover .ai-chat-launcher-tooltip,
.ai-chat-launcher:focus-visible .ai-chat-launcher-tooltip { opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }

.ai-chat-panel {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 10030;
    width: min(420px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 120px));
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe1e8;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(.985);
    transform-origin: right bottom;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.ai-chat-panel.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }

.ai-chat-head {
    flex: 0 0 auto;
    min-height: 66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px 10px 14px;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
}
.ai-chat-agent { display:flex; align-items:center; gap:10px; min-width:0; }
.ai-chat-avatar {
    flex:0 0 58px; width:58px; height:38px; overflow:hidden; border-radius:9px;
    background:#09131d; border:1px solid #243244; box-shadow:0 2px 8px rgba(15,23,42,.12);
}
.ai-chat-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-chat-agent-copy { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ai-chat-agent-copy strong { color:#172033; font-size:13px; font-weight:800; }
.ai-chat-agent-copy span { margin-top:4px; color:#64748b; font-size:10px; white-space:nowrap; }
.ai-chat-status-dot { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#22c55e; vertical-align:1px; box-shadow:0 0 0 3px rgba(34,197,94,.10); }
.ai-chat-head-actions { display:flex; align-items:center; gap:5px; }
.ai-chat-head-btn,
.ai-chat-close { border:0; background:transparent; color:#64748b; cursor:pointer; }
.ai-chat-head-btn { height:34px; padding:0 8px; border-radius:9px; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; }
.ai-chat-head-btn svg { width:14px; height:14px; }
.ai-chat-head-btn:hover { background:#f1f5f9; color:#1e293b; }
.ai-chat-close { width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; }
.ai-chat-close:hover { background:#f1f5f9; color:#0f172a; }
.ai-chat-close svg { width:17px; height:17px; }

.ai-chat-view { display:none; flex:1 1 auto; min-height:0; flex-direction:column; }
.ai-chat-view.is-active { display:flex; }

.ai-chat-session-notice {
    flex:0 0 auto;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-bottom:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1e3a8a;
}
.ai-chat-session-notice > svg { flex:0 0 auto; width:14px; height:14px; }
.ai-chat-session-notice-text { flex:1 1 auto; min-width:0; font-size:10px; line-height:1.35; }
.ai-chat-session-countdown {
    flex:0 0 auto; min-width:50px; padding:4px 6px; border-radius:8px;
    background:#dbeafe; color:#1d4ed8; text-align:center; font-size:10px; font-weight:900; font-variant-numeric:tabular-nums;
}
.ai-chat-restart { display:none; flex:0 0 auto; height:26px; padding:0 8px; border:0; border-radius:7px; background:#1d4ed8; color:#fff; cursor:pointer; font-size:10px; font-weight:800; }
.ai-chat-session-notice.is-warning { border-bottom-color:#fde68a; background:#fffbeb; color:#92400e; }
.ai-chat-session-notice.is-warning .ai-chat-session-countdown { background:#fef3c7; color:#b45309; }
.ai-chat-session-notice.is-expired { border-bottom-color:#fecaca; background:#fef2f2; color:#991b1b; }
.ai-chat-session-notice.is-expired .ai-chat-session-countdown { background:#fee2e2; color:#b91c1c; }
.ai-chat-session-notice.is-expired .ai-chat-restart { display:block; }

.ai-chat-body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:14px 13px 18px;
    background:radial-gradient(circle at 100% 0%,rgba(219,234,254,.65),transparent 31%),#f8fafc;
    scrollbar-width:thin;
}
.ai-chat-date { width:max-content; margin:1px auto 13px; padding:4px 8px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; color:#94a3b8; font-size:9px; font-weight:800; letter-spacing:.5px; }
.ai-chat-message { display:flex; align-items:flex-start; gap:7px; margin:0 0 12px; }
.ai-chat-message-user { justify-content:flex-end; }
.ai-chat-message-avatar {
    flex:0 0 32px; width:32px; height:32px; overflow:hidden; border-radius:9px; background:#09131d;
    border:1px solid #27364a; box-shadow:0 2px 5px rgba(15,23,42,.09);
}
.ai-chat-message-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-chat-message-content { display:flex; flex-direction:column; gap:4px; max-width:78%; min-width:0; }
.ai-chat-message-user .ai-chat-message-content { align-items:flex-end; }
.ai-chat-bubble { padding:10px 11px; border:1px solid #e2e8f0; border-radius:15px 15px 15px 5px; background:#fff; color:#273244; font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.ai-chat-message-user .ai-chat-bubble { border-color:#2563eb; border-radius:15px 15px 5px 15px; background:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.16); }
.ai-chat-message-time { padding:0 3px; color:#94a3b8; font-size:9px; line-height:1.2; }
.ai-chat-typing { display:inline-flex; align-items:center; gap:4px; min-width:52px; }
.ai-chat-typing i { width:5px; height:5px; border-radius:50%; background:#94a3b8; animation:ai-chat-typing 1.15s infinite ease-in-out; }
.ai-chat-typing i:nth-child(2){animation-delay:.14s}.ai-chat-typing i:nth-child(3){animation-delay:.28s}
@keyframes ai-chat-typing { 0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-3px);opacity:1} }

.ai-chat-current-actions {
    flex:0 0 auto; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:5px 11px 4px; border-top:1px solid #edf0f3; background:#fff; color:#94a3b8; font-size:9px;
}
.ai-chat-exit { height:25px; padding:0 7px; border:0; border-radius:7px; background:transparent; color:#64748b; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; }
.ai-chat-exit:hover { background:#fef2f2; color:#b91c1c; }
.ai-chat-exit svg { width:12px; height:12px; }

.ai-chat-input-area { flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:9px 11px 11px; border-top:1px solid #e5e7eb; background:#fff; }
.ai-chat-input-area textarea { flex:1 1 auto; min-width:0; height:42px; max-height:120px; padding:11px 12px; border:1px solid #dbe1e8; border-radius:13px; background:#f8fafc; color:#1f2937; resize:none; outline:none; font-size:12px; line-height:1.45; }
.ai-chat-input-area textarea:focus { border-color:#93c5fd; background:#fff; box-shadow:0 0 0 3px rgba(59,130,246,.10); }
.ai-chat-input-area textarea:disabled { cursor:not-allowed; opacity:.65; }
.ai-chat-send { flex:0 0 42px; width:42px; height:42px; padding:0; border:0; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; background:#07315a; color:#fff; cursor:pointer; transition:.15s ease; }
.ai-chat-send:hover { background:#0b4479; transform:translateY(-1px); }
.ai-chat-send:disabled { cursor:not-allowed; opacity:.45; transform:none; }
.ai-chat-send svg { width:17px; height:17px; }

.ai-chat-subhead {
    flex:0 0 44px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:5px;
    padding:0 10px; border-bottom:1px solid #e5e7eb; background:#fff;
}
.ai-chat-subhead strong { color:#273244; font-size:12px; font-weight:800; text-align:center; }
.ai-chat-subhead-spacer { display:block; }
.ai-chat-back { justify-self:start; height:30px; padding:0 6px; border:0; border-radius:8px; background:transparent; color:#64748b; cursor:pointer; display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; }
.ai-chat-back:hover { background:#f1f5f9; color:#1e293b; }
.ai-chat-back svg { width:13px; height:13px; }

.ai-chat-history-list { flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px; background:#f8fafc; }
.ai-chat-history-empty { padding:50px 18px; text-align:center; color:#94a3b8; font-size:11px; line-height:1.6; }
.ai-chat-history-item { width:100%; margin:0 0 8px; padding:11px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; color:#273244; cursor:pointer; text-align:left; transition:.15s ease; }
.ai-chat-history-item:hover { border-color:#bfdbfe; background:#f8fbff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(15,23,42,.05); }
.ai-chat-history-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-chat-history-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:800; }
.ai-chat-history-time { flex:0 0 auto; color:#94a3b8; font-size:9px; }
.ai-chat-history-preview { margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#64748b; font-size:10px; }
.ai-chat-history-meta { margin-top:7px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-chat-history-reason { padding:3px 6px; border-radius:999px; background:#fff7ed; color:#c2410c; font-size:9px; font-weight:800; }
.ai-chat-history-count { color:#94a3b8; font-size:9px; }

.ai-chat-history-detail-body { padding-top:10px; }
.ai-chat-history-footer { flex:0 0 auto; padding:10px 11px; border-top:1px solid #e5e7eb; background:#fff; }
.ai-chat-new-conversation { width:100%; height:38px; border:0; border-radius:10px; background:#07315a; color:#fff; cursor:pointer; font-size:11px; font-weight:800; }
.ai-chat-new-conversation:hover { background:#0b4479; }

body.dark-mode .ai-chat-panel,
body.dark-mode .ai-chat-head,
body.dark-mode .ai-chat-input-area,
body.dark-mode .ai-chat-current-actions,
body.dark-mode .ai-chat-subhead,
body.dark-mode .ai-chat-history-footer { background:#18212f; border-color:#334155; color:#e5e7eb; }
body.dark-mode .ai-chat-agent-copy strong, body.dark-mode .ai-chat-subhead strong { color:#f8fafc; }
body.dark-mode .ai-chat-agent-copy span { color:#94a3b8; }
body.dark-mode .ai-chat-head-btn:hover, body.dark-mode .ai-chat-close:hover, body.dark-mode .ai-chat-back:hover { background:#263244; color:#fff; }
body.dark-mode .ai-chat-body, body.dark-mode .ai-chat-history-list { background:radial-gradient(circle at 100% 0%,rgba(30,64,175,.15),transparent 30%),#111827; }
body.dark-mode .ai-chat-date { border-color:#334155; background:#1e293b; color:#94a3b8; }
body.dark-mode .ai-chat-bubble, body.dark-mode .ai-chat-history-item { border-color:#334155; background:#202b3b; color:#e5e7eb; }
body.dark-mode .ai-chat-history-item:hover { border-color:#475569; background:#243143; }
body.dark-mode .ai-chat-history-preview { color:#94a3b8; }
body.dark-mode .ai-chat-message-user .ai-chat-bubble { border-color:#1d4ed8; background:#1d4ed8; color:#fff; }
body.dark-mode .ai-chat-input-area textarea { border-color:#3b4759; background:#111827; color:#f3f4f6; }
body.dark-mode .ai-chat-current-actions { color:#64748b; }
body.dark-mode .ai-chat-exit { color:#94a3b8; }
body.dark-mode .ai-chat-exit:hover { background:#3b1717; color:#fecaca; }
body.dark-mode .ai-chat-session-notice { border-color:#1e3a8a; background:#172554; color:#dbeafe; }
body.dark-mode .ai-chat-session-countdown { background:#1e3a8a; color:#dbeafe; }
body.dark-mode .ai-chat-session-notice.is-warning { border-color:#92400e; background:#3b2a12; color:#fde68a; }
body.dark-mode .ai-chat-session-notice.is-warning .ai-chat-session-countdown { background:#78350f; color:#fef3c7; }
body.dark-mode .ai-chat-session-notice.is-expired { border-color:#991b1b; background:#3b1717; color:#fecaca; }
body.dark-mode .ai-chat-session-notice.is-expired .ai-chat-session-countdown { background:#7f1d1d; color:#fee2e2; }

@media (max-width:640px) {
    .ai-chat-launcher { right:14px; bottom:14px; width:78px; height:50px; border-radius:14px; }
    .ai-chat-launcher-logo { border-radius:13px; }
    .ai-chat-launcher-tooltip { display:none; }
    .ai-chat-panel { right:0; bottom:0; width:100vw; height:min(92vh,760px); min-height:0; border-left:0; border-right:0; border-bottom:0; border-radius:22px 22px 0 0; transform-origin:center bottom; }
    .ai-chat-head { min-height:62px; padding-left:12px; }
    .ai-chat-avatar { flex-basis:52px; width:52px; height:34px; }
    .ai-chat-head-btn span { display:none; }
    .ai-chat-head-btn { width:34px; padding:0; justify-content:center; }
    .ai-chat-session-notice { gap:6px; padding:7px 9px; }
    .ai-chat-session-notice-text { font-size:9px; }
    .ai-chat-session-countdown { min-width:46px; }
    .ai-chat-current-actions > span { display:none; }
    .ai-chat-current-actions { justify-content:flex-end; }
}