/* Shared light/dark theme. * * Deliberately reuses the SAME localStorage key ("questions_theme") and the * same body classes (dark-mode / light-mode) as /questions/ and /agent//, * so a user's choice carries across all of them. Default is dark, matching the * page-builder / agent pages. * * NOTE: /agent// still carries its own inline copy of this chrome in * agents/managed_agent.html. Kept as-is here to avoid churning that page; * worth unifying onto this file later. */ /* Paint the page background before the body class lands, so a dark-mode user * doesn't get a white flash on load. Set by the inline snippet. */ html[data-theme="dark"] { background-color: #212121; } html[data-theme="light"] { background-color: #ffffff; } /* ---- base ---- */ body.dark-mode { background-color: #212121; color: #ececec; } body.light-mode { background-color: #ffffff; color: #333333; } /* ---- navbar ---- */ body.dark-mode .navbar { background-color: #212121; border-bottom: 1px solid #404040; } body.dark-mode .navbar .navbar-brand, body.dark-mode .navbar .nav-link { color: #ececec; } body.dark-mode .navbar .nav-link:hover { color: #10a37f; } body.dark-mode .navbar-toggler { border-color: #565656; } body.dark-mode .text-muted { color: #9a9a9a !important; } /* ---- settings gear + dropdown (mirrors the agent page's chrome) ---- */ .settings-menu { position: fixed; top: 10px; right: 20px; z-index: 1030; /* above the navbar */ } .settings-btn { background: transparent; border: none; padding: 0; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0.7; transition: opacity 0.2s ease; } .settings-btn:hover { opacity: 1; } body.dark-mode .settings-btn { color: #ececec; } body.light-mode .settings-btn { color: #374151; } .settings-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 4px; border: 1px solid; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 2px; } .settings-dropdown[hidden] { display: none; } body.dark-mode .settings-dropdown { background: #2f2f2f; border-color: #565656; } body.light-mode .settings-dropdown { background: #ffffff; border-color: #d1d5db; } .settings-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.6rem; background: transparent; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; text-align: left; text-decoration: none; } body.dark-mode .settings-item { color: #ececec; } body.dark-mode .settings-item:hover { background: #3f3f3f; color: #ececec; } body.light-mode .settings-item { color: #374151; } body.light-mode .settings-item:hover { background: #f3f4f6; color: #374151; } .settings-item-icon { font-size: 1.05rem; line-height: 1; } .settings-item-label { flex: 1; }