/* Sidebar-Shell im Stil eines echten Produkt-Dashboards: dunkle Sidebar mit Glow-Orb, Content-Flaeche mit Karten - hell oder dunkel je nach [data-theme] auf (gesetzt von theme.js). Die Sidebar selbst bleibt in beiden Modi dunkel (uebliches Muster, guter Kontrast zum Logo-Glow). */ :root, :root[data-theme="light"] { --nav: #08111d; --nav2: #0c1826; --bg: #f5f7fa; --white: #ffffff; --ink: #172131; --muted: #718096; --line: #e3e8ee; --blue: #2498ff; --blue2: #5b7cff; --green: #19b777; --amber: #d69e2e; --red: #e53e3e; --shadow: 0 5px 20px rgba(25, 44, 66, 0.055); --badge-ok-bg: #e6f9f1; --badge-ok-fg: #0d8a56; --badge-warn-bg: #fdf3e0; --badge-warn-fg: #a86a10; --badge-fail-bg: #fbe9e9; --badge-fail-fg: #c62f2f; } :root[data-theme="dark"] { --nav: #05090f; --nav2: #080f1a; --bg: #0b121e; --white: #131b29; --ink: #e7edf5; --muted: #8493a8; --line: #223047; --blue: #2498ff; --blue2: #5b7cff; --green: #2ecf94; --amber: #e0ab3f; --red: #f0605f; --shadow: 0 5px 20px rgba(0, 0, 0, 0.35); --badge-ok-bg: #10301f; --badge-ok-fg: #6fe3ae; --badge-warn-bg: #3a2c0d; --badge-warn-fg: #f0c565; --badge-fail-bg: #3a1414; --badge-fail-fg: #ff9a9a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav: #05090f; --nav2: #080f1a; --bg: #0b121e; --white: #131b29; --ink: #e7edf5; --muted: #8493a8; --line: #223047; --blue: #2498ff; --blue2: #5b7cff; --green: #2ecf94; --amber: #e0ab3f; --red: #f0605f; --shadow: 0 5px 20px rgba(0, 0, 0, 0.35); --badge-ok-bg: #10301f; --badge-ok-fg: #6fe3ae; --badge-warn-bg: #3a2c0d; --badge-warn-fg: #f0c565; --badge-fail-bg: #3a1414; --badge-fail-fg: #ff9a9a; } } body.shell { transition: background-color 0.15s ease, color 0.15s ease; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; display: block; } .shell-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } /* --- Sidebar --- */ .sidebar { background: linear-gradient(180deg, var(--nav), var(--nav2)); color: #fff; padding: 18px 13px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 16px; margin-bottom: 10px; border-bottom: 1px solid #213043; } .sidebar .brand .orb { width: 34px; height: 34px; border: 2px solid #2aa4ff; border-radius: 50%; position: relative; box-shadow: 0 0 16px rgba(36, 152, 255, 0.4); flex-shrink: 0; animation: none; } .sidebar .brand .orb::before { content: ""; position: absolute; inset: 4px; border: 1px solid #68c1ff; border-radius: 50%; } .sidebar .brand .orb::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #3daaff; opacity: 0.75; filter: blur(3px); } .sidebar .brand .orb.speaking { animation: pulse 0.6s ease-in-out infinite; } .sidebar .brand span { font-weight: 600; font-size: 1rem; letter-spacing: 0.28em; color: #fff; } .sidebar nav { display: grid; gap: 3px; margin-top: 6px; } .sidebar nav a { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 9px; color: #aebbc9; text-decoration: none; font-size: 0.85rem; border-left: 3px solid transparent; } .sidebar nav a svg { flex-shrink: 0; } .sidebar nav a:hover { background: rgba(255, 255, 255, 0.045); color: #fff; } .sidebar nav a.active { background: linear-gradient(90deg, rgba(38, 152, 255, 0.21), rgba(38, 152, 255, 0.05)); color: #fff; border-left-color: #35a6ff; padding-left: 10px; } .sidebar .sidebar-footer { margin-top: auto; border-top: 1px solid #213043; padding: 12px 4px 0; } .sidebar .sidebar-footer button { width: 100%; background: none; border: none; color: #9cabbc; padding: 9px 10px; border-radius: 8px; font-size: 0.82rem; text-align: left; cursor: pointer; min-height: auto; } .sidebar .sidebar-footer button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } /* --- Main / topbar --- */ .shell-main { min-width: 0; display: flex; flex-direction: column; max-height: 100vh; } .topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--white); flex-shrink: 0; } .topbar h1 { font-size: 1rem; font-weight: 650; margin: 0; color: var(--ink); letter-spacing: normal; } .topbar .status { margin-left: auto; font-size: 0.78rem; color: var(--muted); } .theme-toggle { margin-left: auto; width: 36px; height: 36px; padding: 0; border-radius: 9px; display: grid; place-items: center; } .topbar .status + .theme-toggle { margin-left: 0; } .shell-content { flex: 1; overflow-y: auto; padding: 24px 28px; } /* --- Cards (shared with dashboard.css) --- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); } /* Generic buttons everywhere in the shell (dashboard forms, delete "x" buttons, etc.) - not just the chat composer's mic/send. */ body.shell button { background: var(--white); border: 1px solid var(--line); color: var(--ink); } body.shell button:hover { background: var(--blue); border-color: var(--blue); color: #fff; } body.shell input[type="text"], body.shell input[type="password"], body.shell select { background: var(--white); border: 1px solid var(--line); color: var(--ink); } body.shell input:focus, body.shell select:focus { outline: none; border-color: var(--blue); } /* --- Message bubbles (overrides style.css's dark-theme defaults) --- */ body.shell main#chat { padding: 24px 28px 8px; } body.shell .msg { max-width: 72%; box-shadow: var(--shadow); } body.shell .msg.user { background: var(--blue); color: #fff; } body.shell .msg.assistant { background: var(--white); border: 1px solid var(--line); color: var(--ink); } body.shell .msg.tool { background: transparent; box-shadow: none; border-left: 2px solid var(--line); color: var(--muted); } body.shell .status { color: var(--muted); } /* --- Chat composer bar, replaces the plain footer --- */ .shell-main footer.composer { margin: 0 28px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; } body.shell #input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--ink); font-size: 0.9rem; padding: 8px 4px; } body.shell #input:focus { outline: none; } body.shell #mic, body.shell #send { background: var(--bg); border: 1px solid var(--line); color: var(--muted); border-radius: 9px; min-height: 38px; padding: 0 12px; } body.shell #send { background: var(--blue); border-color: var(--blue); color: #fff; } body.shell #send:hover { background: #1c86e6; color: #fff; } body.shell #mic:hover { background: var(--line); color: var(--ink); } body.shell #mic.listening { background: var(--blue); border-color: var(--blue); color: #fff; } body.shell .voice-toggle { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } @media (max-width: 860px) { .shell-layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; } .sidebar .brand { border-bottom: none; padding: 0 10px 0 0; margin: 0; } .sidebar nav { grid-auto-flow: column; } .sidebar .sidebar-footer { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none; } .shell-content { padding: 16px; } .topbar { padding: 0 16px; } .shell-main footer.composer { margin: 0 16px 16px; } }