/* BeeOS 2.0 — styles.css z dark mode + login + sessions (2026-07-14) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8;
    --border-color: #e2e8f0; --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --accent: #2563eb; --accent-hover: #1d4ed8;
    --chat-user-bg: #eff6ff; --chat-agent-bg: #ffffff; --input-bg: #ffffff;
    --glass-bg: rgba(255,255,255,0.85); --glass-border: rgba(255,255,255,0.3);
    --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8;
}

[data-theme="dark"],
html.dark {
    --bg-primary: #161618; --bg-secondary: #222226; --bg-tertiary: #2c2c32;
    --text-primary: #e7e7eb; --text-secondary: #b3b3bc; --text-muted: #90909b;
    --border-color: #3c3c44; --border-light: #2a2a30;
    --accent: #a78bfa; --accent-hover: #c4b5fd;
    --chat-user-bg: #26262b; --chat-agent-bg: #222226; --input-bg: #2c2c32;
    --glass-bg: rgba(22,22,24,0.92); --glass-border: rgba(60,60,68,0.5);
    --scrollbar-thumb: #3c3c44; --scrollbar-thumb-hover: #90909b;
}

/* ═══════════════════════════════════════════════════════════════
 * BeeOS 2.0 — Design System Variables (Faza 1: zdefiniowane, jeszcze nieużywane)
 * ═══════════════════════════════════════════════════════════════ */
:root {
    /* --- Dark theme (default) — grafitowe panele (zinc), NIE czerń --- */
    --color-bg: #161618;
    --color-bg-sidebar: #1a1a1d;
    --color-bg-topbar: rgba(22,22,24,0.92);
    --color-card: #222226;
    --color-card-hover: #28282d;
    --color-input: #2c2c32;
    --color-border: #3c3c44;
    --color-border-light: #2a2a30;
    --color-text: #e7e7eb;
    --color-text-secondary: #b3b3bc;
    --color-text-muted: #90909b;
    --color-accent: #c9c9d2;
    --color-accent-hover: #e7e7eb;
    --color-success: #34d399;
    --color-warning: #a78bfa;
    --color-error: #f87171;
    --color-link: #a78bfa;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-micro: 10px;
    --font-small: 11px;
    --font-caption: 12px;
    --font-body: 13px;
    --font-base: 14px;
    --font-lead: 16px;
    --font-h1: 20px;

    /* Spacing */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --row-height: 36px;
    --row-height-sm: 28px;
    --row-height-lg: 44px;
    --sidebar-width: 224px;
    --sidebar-collapsed: 52px;
    --topbar-height: 40px;
    --bottom-bar-height: 36px;
}

/* Light theme override — kontrast wzorowany na GitHub/Vercel */
html:not(.dark),
[data-theme="light"] {
    --color-bg: #f3f4f6;
    --color-bg-sidebar: #ffffff;
    --color-bg-topbar: rgba(255,255,255,0.95);
    --color-card: #ffffff;
    --color-card-hover: #f6f7f9;
    --color-input: #ffffff;
    --color-border: #c8cdd6;
    --color-border-light: #e3e6eb;
    --color-text: #1a1d23;
    --color-text-secondary: #4a5462;
    --color-text-muted: #6b7482;
    --color-accent: #3d4754;
    --color-accent-hover: #252c36;
    --color-success: #15803d;
    --color-warning: #6d28d9;
    --color-error: #dc2626;
    --color-link: #6d28d9;
}

body { font-family: 'Inter', sans-serif; overflow: hidden; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s, color 0.3s; }

[data-theme="dark"] .bg-white { background-color: var(--bg-secondary) !important; }
[data-theme="dark"] .bg-slate-50 { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--text-muted) !important; }
[data-theme="dark"] .border-slate-200 { border-color: var(--border-color) !important; }
[data-theme="dark"] .border-slate-100 { border-color: var(--border-light) !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

#chat-box > div { animation: messageSlideIn 0.3s ease-out forwards; opacity: 0; transform: translateY(10px); }
@keyframes messageSlideIn { to { opacity: 1; transform: translateY(0); } }
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
#typing-indicator div { animation-duration: 1s; }
#chat-box div { word-wrap: break-word; word-break: break-word; }

#dark-mode-toggle { cursor: pointer; transition: transform 0.3s; }
#dark-mode-toggle:hover { transform: scale(1.1); }

#login-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100; }
#login-overlay.hidden { display: none; }
#login-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 32px; width: 360px; box-shadow: var(--shadow-md); }

#sessions-list button { transition: background-color 0.2s; border-radius: 8px; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); }
#sessions-list button:hover { background-color: #1a1a1e; }
#sessions-list .sess-btn.active { background: #1a1a1e; color: #e4e4e7; font-weight: 600; }
html:not(.dark) #sessions-list .sess-btn.active,
[data-theme="light"] #sessions-list .sess-btn.active { background: #f1f5f9 !important; color: #0f172a !important; font-weight: 600; }
/* Blokada: w light mode NIGDY nie używaj ciemnego tła */
html:not(.dark) #sessions-list button.active { background: #f1f5f9 !important; color: #0f172a !important; }

/* ═══════════════════════════════════════════════════════════
   BEEOS RESPONSE COMPONENTS (spójny design)
   ═══════════════════════════════════════════════════════════ */

/* Karty */
.bee-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; margin: 8px 0; overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.bee-card-header {
    padding: 10px 14px; font-weight: 600; font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}
.bee-card-body { padding: 14px; font-size: 13px; line-height: 1.5; }
.bee-card-success { border-left: 4px solid #16a34a; }
.bee-card-success .bee-card-header { background: #f0fdf4; color: #166534; }
.bee-card-error { border-left: 4px solid #dc2626; }
.bee-card-error .bee-card-header { background: #fef2f2; color: #991b1b; }
.bee-card-warning { border-left: 4px solid #8b5cf6; }
.bee-card-warning .bee-card-header { background: #fffbeb; color: #92400e; }
.bee-card-info { border-left: 4px solid #2563eb; }
.bee-card-info .bee-card-header { background: #eff6ff; color: #1e40af; }

/* Potwierdzenia */
.bee-confirm-desc { font-size: 13px; margin-bottom: 8px; color: var(--text-secondary); }
.bee-confirm-params { font-size: 12px; background: var(--bg-tertiary); padding: 8px; border-radius: 4px; margin-bottom: 10px; line-height: 1.6; }
.bee-confirm-actions { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.bee-param-label { font-weight: 600; color: var(--text-primary); }
.bee-param-value { color: var(--text-secondary); }

/* Przyciski wyboru (opcje w czacie) */
.bee-option-list { display: flex; flex-direction: column; gap: 6px; }
.bee-option-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left; width: 100%; padding: 8px 12px; cursor: pointer;
    background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 6px;
    transition: border-color .15s, background .15s;
}
.bee-option-btn:hover { border-color: #2563eb; background: #eff6ff; }
.bee-option-label { font-size: 13px; font-weight: 600; }
.bee-option-desc { font-size: 11px; color: var(--text-muted); }
.bee-option-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 8px; }

/* Zapytania o dane */
.bee-section-label { font-weight: 600; font-size: 12px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.bee-data-row { padding: 3px 0; font-size: 13px; border-bottom: 1px solid var(--border-light); }
.bee-data-row:last-child { border-bottom: none; }
.bee-inferred { background: #f0fdf4; border-left: 3px solid #22c55e; padding-left: 6px; }
.bee-missing { background: #fef2f2; border-left: 3px solid #ef4444; padding-left: 6px; }
.bee-param-hint { font-size: 11px; color: var(--text-muted); margin-left: 8px; font-style: italic; }
.bee-ask-hint { font-size: 11px; color: var(--text-muted); font-style: italic; }
.mt-2 { margin-top: 8px; }

/* Produkty */
.bee-product-card {
    display: flex; gap: 14px; padding: 12px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; margin: 6px 0;
}
.bee-product-img { flex-shrink: 0; }
.bee-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); }
.bee-product-info { flex: 1; min-width: 0; }
.bee-product-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--text-primary); }
.bee-product-details { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.bee-label { font-weight: 500; color: var(--text-primary); }

/* Lista produktów */
.bee-list { max-height: 400px; overflow-y: auto; }
.bee-list-row {
    display: flex; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}
.bee-list-row:last-child { border-bottom: none; }
.bee-list-img { flex-shrink: 0; }
.bee-list-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.bee-list-info { flex: 1; min-width: 0; }
.bee-list-name { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bee-list-meta { font-size: 11px; color: var(--text-muted); }
.bee-list-footer { font-size: 11px; color: var(--text-muted); padding-top: 6px; text-align: center; }

/* Galeria */
.bee-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px; padding: 8px 0;
}
.bee-gallery-item { text-align: center; }
.bee-gallery-img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--border-color);
    transition: transform 0.2s;
}
.bee-gallery-img:hover { transform: scale(1.05); }
.bee-gallery-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE FIXES (2026-07-14)
   ═══════════════════════════════════════════════════════════ */

/* Bottom input area — remove white bar in dark mode */
[data-theme="dark"] .from-slate-50 { --tw-gradient-from: var(--bg-primary) !important; }
[data-theme="dark"] .bg-gradient-to-t { background-image: linear-gradient(to top, var(--bg-primary), transparent) !important; }
[data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] textarea { color: var(--text-primary) !important; }
[data-theme="dark"] #message-input { color: var(--text-primary); }

/* Dark mode for admin panel buttons */
[data-theme="dark"] .bg-slate-200 { background-color: var(--bg-tertiary) !important; }
[data-theme="dark"] .hover\\:bg-slate-300:hover { background-color: #475569 !important; }

/* Dark mode for login overlay */
[data-theme="dark"] #login-box { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] #login-box input { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] #login-overlay { background: rgba(0,0,0,0.8); }

/* Better dark mode chat bubbles */
[data-theme="dark"] .bg-gray-100 { background-color: var(--bg-secondary) !important; }
[data-theme="dark"] .text-gray-800 { color: var(--text-primary) !important; }

/* Fix paperclip alignment */
#attachment-btn { display: flex; align-items: center; justify-content: center; height: 100%; }

/* Chat history buttons better styling */
#sessions-list button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sessions-list .sess-btn { display: flex !important; overflow: visible; white-space: normal; }

/* Center the input area properly */
.max-w-4xl.mx-auto.relative { display: flex; align-items: stretch; }
#attachment-btn { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 12px; }

/* Tabela */
.bee-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.bee-table th {
    background: var(--bg-tertiary); padding: 8px 12px;
    text-align: left; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.bee-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--border-light);
}
.bee-table tr:hover td { background: var(--bg-tertiary); }

/* Dark mode */
[data-theme="dark"] .bee-card-success .bee-card-header { background: #052e16; color: #86efac; }
[data-theme="dark"] .bee-card-error .bee-card-header { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .bee-card-warning .bee-card-header { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .bee-card-info .bee-card-header { background: #172554; color: #93c5fd; }
[data-theme="dark"] .bee-inferred { background: #052e16; }
[data-theme="dark"] .bee-missing { background: #450a0a; }