/* ===== AI 퀵톡 Theme System (Light/Dark) ===== */

/* --- CSS Custom Properties --- */
:root {
    color-scheme: light;
    /* Light theme (KakaoTalk style) */
    --bg-base: #f0f2f5;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f8f9fa;
    --bg-surface-active: #f1f3f5;
    --bg-header: #ffffff;
    --border-subtle: #e9ecef;
    --border-medium: #dee2e6;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #868e96;
    --text-on-header: #212529;
    --accent: #3B1E1E;
    --accent-bg: #FEE500;
    --accent-text: #3B1E1E;
    --tab-active: #3B1E1E;
    --tab-inactive: #adb5bd;
    --chat-bg: #ABC1D1;
    --chat-mine-bg: #FFEB33;
    --chat-mine-text: #1a1a1a;
    --chat-bot-bg: #ffffff;
    --chat-bot-text: #212529;
    --chat-agent-bg: #ffffff;
    --chat-time: rgba(0,0,0,0.35);
    --chat-system-bg: rgba(0,0,0,0.15);
    --chat-system-text: #ffffff;
    --chat-sender: #495057;
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --input-text: #212529;
    --input-placeholder: #adb5bd;
    --input-focus-border: #FEE500;
    --input-focus-shadow: rgba(254,229,0,0.2);
    --btn-primary-bg: #FEE500;
    --btn-primary-text: #3B1E1E;
    --btn-ghost-bg: #f1f3f5;
    --btn-ghost-text: #495057;
    --btn-ghost-hover: #e9ecef;
    --badge-bg: #fa5252;
    --toast-bg: #212529;
    --toast-text: #ffffff;
    --skeleton-dark: #e9ecef;
    --skeleton-light: #f1f3f5;
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --modal-overlay: rgba(0,0,0,0.4);
    --empty-state: #adb5bd;
    --avatar-bot: #dbeafe;
    --avatar-agent: #dcfce7;
    --avatar-user: #e5e7eb;
    --avatar-waiting: #fff7ed;
    --avatar-customer: #fef9c3;
    --divider: #f1f3f5;
    --progress-bg: #e9ecef;
    --progress-fill: #FEE500;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-base: #0f172a;
    --bg-surface: rgba(255,255,255,0.05);
    --bg-surface-hover: rgba(255,255,255,0.08);
    --bg-surface-active: rgba(255,255,255,0.1);
    --bg-header: #0f172a;
    --border-subtle: rgba(255,255,255,0.08);
    --border-medium: rgba(255,255,255,0.12);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-on-header: #f1f5f9;
    --accent: #818cf8;
    --accent-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --accent-text: #ffffff;
    --tab-active: #818cf8;
    --tab-inactive: #64748b;
    --chat-bg: #1a2332;
    --chat-mine-bg: #FFEB33;
    --chat-mine-text: #1a1a1a;
    --chat-bot-bg: rgba(255,255,255,0.08);
    --chat-bot-text: #e2e8f0;
    --chat-agent-bg: rgba(255,255,255,0.08);
    --chat-time: rgba(255,255,255,0.3);
    --chat-system-bg: rgba(255,255,255,0.1);
    --chat-system-text: rgba(255,255,255,0.7);
    --chat-sender: #94a3b8;
    --input-bg: rgba(255,255,255,0.06);
    --input-border: rgba(255,255,255,0.08);
    --input-text: #f1f5f9;
    --input-placeholder: #64748b;
    --input-focus-border: rgba(99,102,241,0.5);
    --input-focus-shadow: rgba(99,102,241,0.12);
    --btn-primary-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --btn-primary-text: #ffffff;
    --btn-ghost-bg: rgba(255,255,255,0.06);
    --btn-ghost-text: #94a3b8;
    --btn-ghost-hover: rgba(255,255,255,0.1);
    --badge-bg: #ef4444;
    --toast-bg: rgba(99,102,241,0.9);
    --toast-text: #ffffff;
    --skeleton-dark: rgba(255,255,255,0.06);
    --skeleton-light: rgba(255,255,255,0.04);
    --card-bg: rgba(255,255,255,0.05);
    --card-border: rgba(255,255,255,0.08);
    --modal-overlay: rgba(0,0,0,0.6);
    --empty-state: #64748b;
    --avatar-bot: rgba(99,102,241,0.15);
    --avatar-agent: rgba(34,197,94,0.15);
    --avatar-user: rgba(255,255,255,0.08);
    --avatar-waiting: rgba(249,115,22,0.1);
    --avatar-customer: rgba(234,179,8,0.1);
    --divider: rgba(255,255,255,0.06);
    --progress-bg: rgba(255,255,255,0.08);
    --progress-fill: linear-gradient(135deg, #6366f1, #8b5cf6);
    --header-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- Base --- */
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh; overflow: hidden; }
body {
    background: var(--bg-base);
    color: var(--text-primary);
}
[data-theme="dark"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99,102,241,0.12), transparent),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(236,72,153,0.08), transparent),
        radial-gradient(ellipse 70% 60% at 50% 90%, rgba(14,165,233,0.08), transparent);
}

/* --- Scrollbar: always thin (no layout shift), thumb visible only on hover --- */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover {
    scrollbar-color: rgba(128,128,128,0.3) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
*:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); }
*:hover::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.5); }

/* --- Header --- */
.app-header {
    background: var(--bg-header);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--header-shadow);
    position: relative; z-index: 100;
}
.app-header .text-white { color: var(--text-on-header) !important; }
#tab-content { position: relative; z-index: 0; }

/* --- Tabs --- */
.tab-bar { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.tab-active { color: var(--tab-active) !important; border-color: var(--tab-active) !important; }
.tab-inactive { color: var(--tab-inactive) !important; border-color: transparent !important; }
.tab-inactive:hover { color: var(--text-secondary) !important; }

/* --- Buttons --- */
.btn-accent {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none; cursor: pointer; transition: all 0.2s;
}
.btn-accent:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-accent:active { transform: translateY(0); }
.btn-accent:disabled { background: #9ca3af; color: #d1d5db; opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);
    border: 1px solid var(--border-subtle); transition: all 0.2s; cursor: pointer;
}
.btn-ghost:hover { background: var(--btn-ghost-hover); color: var(--text-primary); }

.btn-green { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; transition: all 0.2s; border: none; }
.btn-green:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(34,197,94,0.3); }

.btn-red { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.15); transition: all 0.2s; }
.btn-red:hover { background: rgba(239,68,68,0.2); }

/* --- Glass Input --- */
.glass-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    caret-color: var(--input-text);
    cursor: default;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.glass-input:-webkit-autofill,
.glass-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text) !important;
    caret-color: var(--input-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}
.glass-input::placeholder { color: var(--input-placeholder); }
.glass-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
    outline: none;
}
.glass-input option, select.glass-input option {
    background: var(--bg-surface); color: var(--text-primary);
}
[data-theme="dark"] .glass-input option,
[data-theme="dark"] select.glass-input option {
    background: #1e293b; color: #f1f5f9;
}
select.glass-input { appearance: auto; }

/* --- List Items --- */
.list-item { transition: all 0.15s; }
.list-item:hover { background: var(--bg-surface-hover); }
.list-item:active { background: var(--bg-surface-active); }

/* --- Divider --- */
.divider { border-color: var(--divider) !important; }

/* --- Toast --- */
.toast { background: var(--toast-bg); color: var(--toast-text); backdrop-filter: blur(12px); }

/* --- Badge --- */
.badge-red { background: var(--badge-bg); color: white; }

/* --- Empty State --- */
.empty-state { color: var(--empty-state); }

/* --- Skeleton --- */
.skel-dark { background: var(--skeleton-dark); }
.skel-light { background: var(--skeleton-light); }

/* --- Chat specific --- */
.chat-bg { background: var(--chat-bg); }
.chat-input-area {
    background: var(--bg-header);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
}

/* --- Section card (admin) --- */
.section-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem;
}
[data-theme="dark"] .section-card {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.section-title {
    font-size: 0.875rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle);
}

.grid > .section-card { margin-bottom: 0; }
[class*="space-y-"] > .section-card { margin-bottom: 0; }

/* --- Service cards --- */
.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 0.25s;
}
.service-card:hover {
    border-color: var(--input-focus-border);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
[data-theme="dark"] .service-card:hover { box-shadow: 0 8px 25px rgba(99,102,241,0.15); }

/* --- Agency card --- */
.agency-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 0.2s;
}
.agency-card:hover {
    border-color: var(--input-focus-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
[data-theme="dark"] .agency-card:hover { box-shadow: 0 4px 15px rgba(99,102,241,0.12); }

/* --- Modal --- */
.modal-overlay { backdrop-filter: blur(4px); background: var(--modal-overlay); }
.modal-card { background: var(--card-bg); }
[data-theme="dark"] .modal-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
}

/* --- Glass Strong (opaque panel) --- */
.glass-strong {
    background: var(--bg-surface);
    border: 1px solid var(--card-border);
}
[data-theme="dark"] .glass-strong {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- Progress bar --- */
.progress-bar { background: var(--progress-bg); }
.progress-fill { background: var(--progress-fill); }

/* --- Order confirm card (theme-aware) --- */
.oc-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="dark"] .oc-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.oc-label { color: var(--text-muted); }
.oc-divider { border-color: var(--border-subtle); }
.oc-input {
    flex:1; min-width:0; padding:3px 12px; border-radius:8px; outline:none; font-size:13px;
    background: var(--input-bg); color: var(--input-text); border:1px solid var(--input-border);
    caret-color: var(--input-text); transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
}
@media (max-width: 639px) { .oc-input { padding-left: 5px; padding-right: 5px; } }
.oc-input::placeholder { color: var(--input-placeholder); }
.oc-input.oc-invalid { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }
.oc-input:focus { border-color: var(--input-focus-border); box-shadow: 0 0 0 2px var(--input-focus-shadow); }
.oc-select {
    flex:1; padding:3px 12px; border-radius:8px; outline:none; font-size:13px; appearance:auto;
    background: var(--input-bg); color: var(--input-text); border:1px solid var(--input-border);
}
.oc-select:focus { border-color: var(--input-focus-border); }
.oc-select.oc-invalid { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }
.oc-select option { background: var(--bg-surface); color: var(--text-primary); }
[data-theme="dark"] .oc-select option { background: #1e293b; color: #f1f5f9; }
.oc-text {
    flex:1; padding:6px 12px; font-size:13px; color: var(--text-primary);
}

/* --- Status action buttons --- */
.btn-status { transition: all 0.2s; border: none; cursor: pointer; }
.btn-status:hover { opacity: 0.9; }
.btn-status:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
.btn-orange { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
.btn-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); color: white; }
.btn-green-solid { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.btn-red-solid { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }

/* --- Notify quick buttons --- */
.notify-btn { transition: all 0.2s; background: var(--btn-ghost-bg); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.notify-btn:hover { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: transparent; }

/* --- Theme toggle button --- */
.theme-toggle {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: all 0.2s;
    background: var(--btn-ghost-bg); border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}
.theme-toggle:hover { background: var(--btn-ghost-hover); color: var(--text-primary); }

/* --- Responsive Navigation --- */
.nav-item {
    padding: 0.5rem 0.6rem; border-radius: 0.5rem;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
    border: none; background: none;
}
.nav-item:hover { color: var(--text-primary); background: var(--btn-ghost-bg); }
.nav-item.nav-active { color: var(--accent); background: var(--bg-surface); }

.oc-order-card { max-width: 100%; }
@media (min-width: 1024px) { .oc-order-card { max-width: 80%; margin-left: 42px; } }

.mobile-menu {
    position: absolute; left: 0; right: 0; z-index: 100;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    overflow: hidden; max-height: 0;
    transition: max-height 0.3s ease;
}
.mobile-menu.open { max-height: 80vh; overflow-y: auto; }
.mobile-menu-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.3);
    display: none;
}
.mobile-menu-backdrop.open { display: block; }
[data-theme="dark"] .mobile-menu {
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.08);
}
.mm-item {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.75rem 1.25rem;
    font-size: 0.875rem; font-weight: 500;
    color: var(--text-secondary);
    border: none; background: none; cursor: pointer;
    transition: all 0.15s; text-align: left;
}
.mm-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.mm-item.active { color: var(--accent); font-weight: 700; }
.mm-divider { height: 1px; background: var(--border-subtle); margin: 0.25rem 1rem; }

.hamburger-btn {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--btn-ghost-bg); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.hamburger-btn:hover { background: var(--btn-ghost-hover); color: var(--text-primary); }

@media (min-width: 1024px) {
    .mobile-menu { display: none !important; }
}

/* --- Text color utilities (theme-aware) --- */
.t-primary { color: var(--text-primary) !important; }
.t-secondary { color: var(--text-secondary) !important; }
.t-muted { color: var(--text-muted) !important; }

/* --- Sortable drag-and-drop --- */
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 0 0 2px var(--accent, #6366f1); border-radius: 0.75rem; }
.sortable-drag { opacity: 0.9; box-shadow: 0 8px 25px rgba(0,0,0,0.3); }

/* --- Line clamp --- */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}