/* SaveBite – Sliding Panel Drawers (Chat & Dashboard) */

.panel-drawer {
    position: fixed; top: 0; right: 0; width: 450px; max-width: 100vw; height: 100%;
    background: #FAF9F6; border-left: 1px solid rgba(14,14,16,.1);
    z-index: 900; box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; flex-direction: column;
    --text-main: #0E0E10;
    --text-muted: #6B6B72;
    --border-color: rgba(14,14,16,.1);
}
.panel-drawer.active { transform: translateX(0); }

.panel-drawer.chat-embedded {
    position: relative; top: auto; right: auto;
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    height: 75vh; min-height: 520px;
    transform: none;
    background: #FAF9F6;
    border-left: none; border-right: none; border-radius: 0;
    border-top: 1px solid rgba(14,14,16,.09);
    box-shadow: none; z-index: auto;
}
.panel-drawer.chat-embedded .panel-header { display: none; }
.panel-drawer.chat-embedded .chat-back-btn { display: none; }

.panel-drawer.chat-embedded .panel-body {
    display: flex; flex-direction: row; padding: 0; gap: 0; height: 100%;
    overflow: hidden;
}
.panel-drawer.chat-embedded #chat-list-wrapper {
    width: 360px; flex-shrink: 0;
    border-right: 1px solid rgba(14,14,16,.09);
    padding: 1.25rem; height: 100%;
}
.panel-drawer.chat-embedded #chat-active-screen,
.panel-drawer.chat-embedded #chat-empty-state {
    flex: 1; min-width: 0; padding: 1.5rem; height: 100%;
}

.panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 850; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.panel-overlay.active { opacity: 1; pointer-events: auto; }

.panel-header { padding: 1.5rem; border-bottom: 1px solid rgba(14,14,16,.09); display: flex; justify-content: space-between; align-items: center; background: #FFFFFF; }
.panel-title  { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; color: #0E0E10; }
.panel-close  { background: transparent; border: none; color: #6B6B72; cursor: pointer; font-size: 1.2rem; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.panel-close:hover { background: rgba(14,14,16,.06); color: #0E0E10; }
.panel-body   { flex-grow: 1; overflow-y: auto; padding: 1.5rem; }

/* ── Dark Mode Drawer Overrides ── */
[data-theme="dark"] .panel-drawer {
    background: #151d30;
    border-left-color: rgba(255,255,255,0.08);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .panel-drawer.chat-embedded {
    background: #151d30;
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .panel-header {
    background: #1a2540;
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .panel-title { color: #f8fafc; }
[data-theme="dark"] .panel-close { color: #94a3b8; }
[data-theme="dark"] .panel-close:hover { background: rgba(255,255,255,0.08); color: #f8fafc; }
[data-theme="dark"] .panel-drawer.chat-embedded #chat-list-wrapper {
    border-right-color: rgba(255,255,255,0.08);
}