/* Story 20.6: Native CSS delivery — import the premium brand stylesheet (style.css)
so Chainlit serves it via the custom_css in the document on first
paint (cacheable, no JS injection, no cache-buster). @import MUST be the first rule
per CSS spec. style.css loads first; sidebar.css rules below intentionally win on
any overlap. Replaces the former injectStylesheet IIFE in sidebar.js. */
@import url("/public/style.css");
/* services/ui/public/sidebar.css */
/* Story 4.5: Custom Sidebar Styling with Dark/Light Theme Support */
/* CSS Variables - Default to Light Theme */
:root,
.conversation-sidebar {
--sidebar-bg: #FAFAFA;
--sidebar-border: #EFEFEF;
--sidebar-text: #171717;
--sidebar-text-secondary: #6E6E6E;
--sidebar-item-bg: #FFFFFF;
--sidebar-item-hover: #F5F5F5;
--sidebar-item-border: #E0E0E0;
--sidebar-input-bg: #FFFFFF;
--sidebar-input-border: #E0E0E0;
--sidebar-scrollbar-track: transparent;
--sidebar-scrollbar-thumb: #E0E0E0;
--sidebar-scrollbar-thumb-hover: #C2C2C2;
--sidebar-primary: #d32f2f;
--sidebar-primary-hover: #b71c1c;
--sidebar-active: #ffebee;
--sidebar-active-text: #c62828;
}
/* Explicit Light Theme (overrides OS preference) */
.conversation-sidebar.light-theme,
.light .conversation-sidebar,
[data-theme="light"] .conversation-sidebar,
body.light-mode .conversation-sidebar {
--sidebar-bg: #FAFAFA !important;
--sidebar-border: #EFEFEF !important;
--sidebar-text: #171717 !important;
--sidebar-text-secondary: #6E6E6E !important;
--sidebar-item-bg: #FFFFFF !important;
--sidebar-item-hover: #F5F5F5 !important;
--sidebar-item-border: #E0E0E0 !important;
--sidebar-input-bg: #FFFFFF !important;
--sidebar-input-border: #E0E0E0 !important;
--sidebar-scrollbar-track: transparent !important;
--sidebar-scrollbar-thumb: #E0E0E0 !important;
--sidebar-scrollbar-thumb-hover: #C2C2C2 !important;
--sidebar-primary: #d32f2f !important;
--sidebar-primary-hover: #b71c1c !important;
--sidebar-active: #ffebee !important;
--sidebar-active-text: #c62828 !important;
}
/* Dark Theme when explicitly set by Chainlit */
.conversation-sidebar.dark-theme,
.dark .conversation-sidebar,
[data-theme="dark"] .conversation-sidebar,
body.dark-mode .conversation-sidebar {
--sidebar-bg: #0A0A0A !important;
--sidebar-border: #1E1E1E !important;
--sidebar-text: #E5E5E5 !important;
/* Story 20.7 (AC7): bumped #737373 → #8A8A8A. Old value scored 4.18:1 on the
#0A0A0A sidebar bg and 3.89:1 on the #141414 item bg — both below WCAG AA
(4.5:1). #8A8A8A scores 5.73:1 / 5.34:1 — passes AA for secondary text
(timestamps, meta, delete, toggle label, placeholder). Neutral gray — no
brand-color regression. */
--sidebar-text-secondary: #8A8A8A !important;
--sidebar-item-bg: #141414 !important;
--sidebar-item-hover: #1E1E1E !important;
--sidebar-item-border: #2A2A2A !important;
--sidebar-input-bg: #141414 !important;
--sidebar-input-border: #2A2A2A !important;
--sidebar-scrollbar-track: transparent !important;
--sidebar-scrollbar-thumb: #2A2A2A !important;
--sidebar-scrollbar-thumb-hover: #3A3A3A !important;
/* ⚠ D19, dark mode. Was #e53935: with this button's hardcoded white 13px
label that measured 4.23:1 on the live page — under AA's 4.5 for small
text. #d32f2f takes the same label to 4.98:1. The lighter red stays the
right choice for ICON-only surfaces (3:1 applies there); it is only
small TEXT that cannot sit on it. */
--sidebar-primary: #d32f2f !important;
--sidebar-primary-hover: #d32f2f !important;
--sidebar-active: rgba(229, 57, 53, 0.1) !important;
--sidebar-active-text: #ef5350 !important;
}
/* Sidebar Container */
.conversation-sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
z-index: 1000;
transition: transform 0.3s ease, width 0.3s ease, background 0.3s ease;
overflow: hidden;
}
/* Force light theme background */
.conversation-sidebar.light-theme {
background: #f7f7f8 !important;
color: #1f1f1f !important;
}
/* Force dark theme background */
.conversation-sidebar.dark-theme {
background: #1a1a1a !important;
color: #fff !important;
}
/* Collapsed state */
.conversation-sidebar.collapsed {
width: 60px;
}
.conversation-sidebar.collapsed .sidebar-title,
.conversation-sidebar.collapsed .btn-new-conversation,
.conversation-sidebar.collapsed .sidebar-search,
.conversation-sidebar.collapsed .conversation-meta,
.conversation-sidebar.collapsed .btn-delete {
display: none;
}
.conversation-sidebar.collapsed .conversation-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40px;
}
/* Sidebar Header */
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-title {
font-size: 18px;
font-weight: 600;
color: var(--sidebar-text);
margin: 0;
}
.sidebar-toggle {
background: transparent;
border: none;
color: var(--sidebar-text-secondary);
cursor: pointer;
padding: 4px 8px;
font-size: 16px;
transition: color 0.2s;
}
.sidebar-toggle:hover {
color: var(--sidebar-text);
}
/* Story 20.7 (AC8): visible keyboard focus for the sidebar's interactive
controls. Applies to the collapse toggle, new-conversation, refresh, search,
admin button and the mobile menu button. */
.sidebar-toggle:focus-visible,
.btn-new-conversation:focus-visible,
.btn-refresh:focus-visible,
.sidebar-search input:focus-visible,
.btn-admin-dashboard:focus-visible,
.sidebar-mobile-toggle:focus-visible {
outline: 2px solid var(--sidebar-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.2);
}
/* Sidebar Actions */
.sidebar-actions {
display: flex;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--sidebar-border);
}
.btn-new-conversation {
flex: 1;
background: var(--sidebar-primary);
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
/* Story 20.11 (AC2): tokenised transition; hover/press scale animates here. */
transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
box-shadow: 0 2px 6px rgba(211, 47, 47, 0.2);
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
/* Ripple effect on click */
.btn-new-conversation::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
opacity: 0;
transition: opacity 300ms ease;
}
.btn-new-conversation:active::after {
opacity: 1;
transition-duration: 50ms;
}
.btn-new-conversation:hover {
background: var(--sidebar-primary-hover);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
/* Story 20.11 (AC2): normalised hover lift + ~scale(1.01) brand feedback. */
transform: translateY(-1px) scale(1.01);
}
.btn-new-conversation:active {
/* Story 20.11 (AC2): normalised ~scale(0.98) press. */
transform: translateY(0) scale(0.98);
box-shadow: 0 1px 3px rgba(211, 47, 47, 0.2);
transition-duration: var(--duration-instant, 50ms);
}
.btn-new-conversation:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.btn-refresh {
background: transparent;
border: 1px solid var(--sidebar-input-border);
color: var(--sidebar-text-secondary);
padding: 9px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
/* Story 20.11 (AC2): tokenised transition; hover/press scale animates here. */
transition: all var(--duration-normal, 220ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.btn-refresh:hover {
background: var(--sidebar-item-hover);
border-color: var(--sidebar-text-secondary);
color: var(--sidebar-text);
/* Story 20.11 (AC2): normalised hover lift + ~scale(1.01) feedback. */
transform: translateY(-1px) scale(1.01);
}
.btn-refresh:active {
/* Story 20.11 (AC2): ~scale(0.98) press — no longer a bare transform reset. */
transform: translateY(0) scale(0.98);
transition-duration: var(--duration-instant, 50ms);
}
/* Search Box — Clean Minimal */
.sidebar-search {
padding: 10px 16px;
border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-search input {
width: 100%;
background: var(--sidebar-input-bg);
border: 1px solid var(--sidebar-input-border);
color: var(--sidebar-text);
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
outline: none;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-search input:focus {
border-color: var(--sidebar-primary);
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.08);
}
.sidebar-search input::placeholder {
color: var(--sidebar-text-secondary);
font-size: 13px;
}
/* Dark theme search focus glow */
.dark-theme .sidebar-search input:focus {
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
}
/* Conversation List */
.conversation-list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
/* Conversation Item — Premium Minimal Tabs */
.conversation-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 2px;
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
/* Story 20.11 (AC2): tokenised transition; hover/press transform animates here. */
transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
position: relative;
-webkit-tap-highlight-color: transparent;
}
/* Left accent bar — only visible on active */
.conversation-item::before {
content: '';
position: absolute;
left: 0;
top: 25%;
bottom: 25%;
width: 3px;
background: var(--sidebar-primary);
border-radius: 0 3px 3px 0;
opacity: 0;
transition: opacity 150ms ease, height 150ms ease;
}
.conversation-item:hover {
background: var(--sidebar-item-hover);
/* Story 20.11 (AC2): nudge + ~scale(1.01) for consistent hover feedback. */
transform: translateX(2px) scale(1.01);
}
/* Story 20.7 (AC8): visible keyboard focus on the now-focusable conversation
item (role="button", tabindex="0") and on the delete control. :focus-visible
shows the ring only for keyboard use; :focus fallback covers older browsers. */
.conversation-item:focus-visible,
.conversation-item:focus,
.btn-delete:focus-visible,
.btn-delete:focus {
outline: 2px solid var(--sidebar-primary);
outline-offset: -2px;
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.25);
}
/* Keep the delete control visible when it (or its item) has keyboard focus so a
keyboard user can actually see and reach it (it is opacity:0 by default). */
.conversation-item:focus-within .btn-delete,
.btn-delete:focus-visible,
.btn-delete:focus {
opacity: 1;
transform: scale(1);
}
.conversation-item:active {
/* Story 20.11 (AC2): ~scale(0.98) press, crisp instant-token timing. */
transform: translateX(2px) scale(0.98);
transition-duration: var(--duration-instant, 50ms);
}
/* Active tab — subtle bg + left accent */
.conversation-item.active {
background: var(--sidebar-active);
}
.conversation-item.active::before {
opacity: 1;
}
.conversation-item.active .conversation-title {
color: var(--sidebar-active-text);
font-weight: 600;
}
.conversation-item.active .conversation-meta {
color: var(--sidebar-active-text);
opacity: 0.7;
}
/* Dark theme active — softer glow */
.dark-theme .conversation-item.active {
background: rgba(211, 47, 47, 0.08);
box-shadow: inset 0 0 0 1px rgba(211, 47, 47, 0.06);
}
/* Tab click ripple effect */
.conversation-item {
overflow: hidden;
}
.conversation-item .tab-ripple {
position: absolute;
border-radius: 50%;
background: rgba(211, 47, 47, 0.12);
transform: scale(0);
animation: tabRipple 400ms ease-out forwards;
pointer-events: none;
}
.dark-theme .conversation-item .tab-ripple {
background: rgba(239, 83, 80, 0.15);
}
@keyframes tabRipple {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
/* Tab transition when switching — fade content smoothly */
.conversation-item.switching {
animation: tabSwitch 200ms ease-out;
}
@keyframes tabSwitch {
0% { opacity: 0.7; transform: translateX(4px); }
100% { opacity: 1; transform: translateX(0); }
}
/* ============================================
Notification Dot — Unread Response Indicator
============================================ */
/* Notification dot on chat tabs */
.conversation-item .notification-dot,
.conversation-item::after {
content: none;
}
.conversation-item.has-unread::after {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 8px;
height: 8px;
background: #D32F2F;
border-radius: 50%;
animation: notificationPulse 2s ease-in-out 2;
box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4);
z-index: 5;
}
.dark-theme .conversation-item.has-unread::after {
background: #EF5350;
box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4);
}
/* Unread tab gets subtle highlight */
.conversation-item.has-unread {
background: rgba(211, 47, 47, 0.03);
}
.dark-theme .conversation-item.has-unread {
background: rgba(239, 83, 80, 0.04);
}
.conversation-item.has-unread .conversation-title {
font-weight: 600;
}
@keyframes notificationPulse {
0% {
box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.5);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(211, 47, 47, 0);
transform: scale(1.1);
}
100% {
box-shadow: 0 0 0 0 rgba(211, 47, 47, 0);
transform: scale(1);
}
}
/* Unread count badge (for multiple unread) */
.conversation-item .unread-badge {
position: absolute;
top: 8px;
right: 8px;
min-width: 18px;
height: 18px;
background: #D32F2F;
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
padding: 0 5px;
z-index: 5;
animation: notificationPulse 2s ease-in-out 2;
}
.dark-theme .conversation-item .unread-badge {
background: #EF5350;
}
.conversation-content {
flex: 1;
min-width: 0;
}
.conversation-title {
font-size: 13px;
font-weight: 500;
color: var(--sidebar-text);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.conversation-item:hover .conversation-title {
color: var(--sidebar-text);
}
.conversation-meta {
display: flex;
gap: 8px;
font-size: 11px;
color: var(--sidebar-text-secondary);
transition: color 0.2s;
}
.timestamp,
.message-count {
white-space: nowrap;
}
/* Delete Button — Minimal */
.btn-delete {
background: transparent;
border: 1px solid transparent;
color: var(--sidebar-text-secondary);
cursor: pointer;
padding: 4px 8px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
opacity: 0;
transform: scale(0.8);
/* Story 20.11 (AC2): tokenised transition for hover/press. */
transition: all var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.conversation-item:hover .btn-delete {
opacity: 0.7;
transform: scale(1);
}
.btn-delete:hover {
opacity: 1 !important;
background: rgba(239, 83, 80, 0.1);
border-color: rgba(239, 83, 80, 0.3);
color: #ef5350;
/* Story 20.11 (AC2): ~scale(1.01) hover feedback. */
transform: scale(1.01);
}
/* Story 20.11 (AC2): the delete control previously had no press feedback —
add a ~scale(0.98) active state so every clickable primary control responds. */
.btn-delete:active {
transform: scale(0.98);
transition-duration: var(--duration-instant, 50ms);
}
/* Dark theme delete button */
.dark-theme .btn-delete:hover {
background: rgba(239, 83, 80, 0.15);
border-color: rgba(239, 83, 80, 0.25);
color: #ef5350;
}
/* Dark theme active tab glow */
.dark-theme .conversation-item.active {
box-shadow: 0 1px 8px rgba(211, 47, 47, 0.15);
}
.dark-theme .btn-delete:hover {
background: #4a1e1e;
border-color: #e57373;
color: #ef5350;
}
/* Empty/Loading/Error States */
.loading,
.empty-state,
.error-state {
text-align: center;
padding: 40px 20px;
color: var(--sidebar-text-secondary);
}
.empty-state p {
margin: 8px 0;
}
.error-state button {
margin-top: 16px;
background: var(--brand-primary, #D32F2F);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
}
/* Scrollbar Styling — Story 13.17: Cross-browser
Firefox uses scrollbar-width/scrollbar-color, Chrome/Edge use ::-webkit- pseudo-elements */
.conversation-list {
scrollbar-width: thin;
scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-track);
}
.conversation-list::-webkit-scrollbar {
width: 6px;
}
.conversation-list::-webkit-scrollbar-track {
background: var(--sidebar-scrollbar-track);
}
.conversation-list::-webkit-scrollbar-thumb {
background: var(--sidebar-scrollbar-thumb);
border-radius: 3px;
}
.conversation-list::-webkit-scrollbar-thumb:hover {
background: var(--sidebar-scrollbar-thumb-hover);
}
/* Responsive: Mobile */
@media (max-width: 768px) {
.conversation-sidebar {
width: 100%;
transform: translateX(-100%);
}
.conversation-sidebar.expanded {
transform: translateX(0);
}
/* Add overlay toggle button for mobile */
.sidebar-mobile-toggle {
position: fixed;
top: 16px;
left: 16px;
z-index: 999;
background: var(--brand-primary, #D32F2F);
color: #fff;
border: none;
padding: 12px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
/* Story 20.7 (AC1/AC3): the menu button is rendered by JS and must always
be a comfortable touch target while the sidebar is off-screen. */
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* Story 20.7 (AC3): ensure interactive sidebar controls meet the 44×44px
minimum touch target on mobile. Additive — does not alter desktop sizing. */
.conversation-sidebar .sidebar-toggle,
.conversation-sidebar .btn-new-conversation,
.conversation-sidebar .btn-refresh,
.conversation-sidebar .btn-admin-dashboard,
.conversation-sidebar .conversation-item,
.conversation-sidebar .btn-delete,
.conversation-sidebar .teaching-mode-toggle {
min-height: 44px;
}
.conversation-sidebar .sidebar-toggle,
.conversation-sidebar .btn-refresh,
.conversation-sidebar .btn-delete {
min-width: 44px;
}
.conversation-sidebar .sidebar-toggle,
.conversation-sidebar .btn-refresh,
.conversation-sidebar .btn-delete,
.conversation-sidebar .btn-new-conversation,
.conversation-sidebar .btn-admin-dashboard {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* On mobile the delete control should not be hover-gated (no hover on touch):
keep it visible and tappable so AC2 (reach delete) and AC3 hold. */
.conversation-sidebar .conversation-item .btn-delete {
opacity: 1;
transform: none;
}
}
/* Adjust main content to account for sidebar */
#root,
#chainlit-root,
.chainlit-container,
.MuiContainer-root {
margin-left: 280px !important;
transition: margin-left 0.3s ease;
}
body.sidebar-collapsed #root,
body.sidebar-collapsed #chainlit-root,
body.sidebar-collapsed .chainlit-container,
body.sidebar-collapsed .MuiContainer-root {
margin-left: 60px !important;
}
@media (max-width: 768px) {
#root,
#chainlit-root,
.chainlit-container,
.MuiContainer-root {
margin-left: 0 !important;
}
}
/* Story 7.5: Outcome Status Indicators */
.outcome-status {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
font-size: 14px;
line-height: 1;
cursor: help;
}
/* Outcome-specific background highlights (subtle) */
.conversation-item.outcome-fixed {
border-left: 3px solid #4caf50;
}
.conversation-item.outcome-partial {
border-left: 3px solid #ff9800;
}
.conversation-item.outcome-not_fixed {
border-left: 3px solid #f44336;
}
/* Dark theme adjustments for outcome indicators */
.dark-theme .conversation-item.outcome-fixed {
border-left-color: #66bb6a;
}
.dark-theme .conversation-item.outcome-partial {
border-left-color: #ffb74d;
}
.dark-theme .conversation-item.outcome-not_fixed {
border-left-color: #ef5350;
}
/* Story 9.1: Admin Dashboard Button — Premium Minimal */
.sidebar-admin-section {
padding: 10px 16px;
border-bottom: 1px solid var(--sidebar-border);
}
.btn-admin-dashboard {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
background: var(--sidebar-item-hover);
color: var(--sidebar-text);
border: none;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
}
.btn-admin-dashboard:hover {
background: var(--sidebar-input-border);
color: var(--sidebar-text);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-admin-dashboard:active {
transform: translateY(0) scale(0.97);
transition-duration: 50ms;
}
.btn-admin-dashboard .admin-icon {
font-size: 14px;
flex-shrink: 0;
}
.btn-admin-dashboard .admin-label {
flex: 1;
text-align: left;
}
.conversation-sidebar.collapsed .sidebar-admin-section {
padding: 10px 8px;
}
.conversation-sidebar.collapsed .btn-admin-dashboard {
padding: 9px;
justify-content: center;
}
.conversation-sidebar.collapsed .btn-admin-dashboard .admin-label {
display: none;
}
/* ============================================
🎓 Teaching Mode Toggle — Premium Animated
============================================ */
#conversation-sidebar .sidebar-teaching-mode,
.conversation-sidebar .sidebar-teaching-mode {
padding: 12px 16px;
border-bottom: 1px solid var(--sidebar-border);
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox (older versions) */
-ms-user-select: none; /* IE/old Edge */
user-select: none;
padding: 8px 10px;
border-radius: 10px;
/* Story 20.11 (AC2): include transform so the hover/press scale is animated
(compositor-friendly, transform only → zero layout shift). */
transition: background var(--duration-fast, 150ms) var(--ease-out, ease),
box-shadow var(--duration-fast, 150ms) var(--ease-out, ease),
transform var(--duration-fast, 150ms) var(--ease-out, ease);
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover {
background: var(--sidebar-item-hover);
transform: scale(1.01);
}
/* Story 20.11 (AC2): press feedback so the toggle is not left without a
tactile active state. Faster (instant token) for a crisp press. */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:active,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:active {
transform: scale(0.98);
transition-duration: var(--duration-instant, 50ms);
}
/* Active state — subtle glow when teaching mode is on */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked),
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) {
background: rgba(21, 101, 192, 0.06);
box-shadow: 0 0 0 1px rgba(21, 101, 192, 0.12);
}
.dark-theme #conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked),
.dark-theme .conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) {
background: rgba(66, 165, 245, 0.08);
box-shadow: 0 0 0 1px rgba(66, 165, 245, 0.15);
}
/* Story 20.7 (AC5): visually hide the native checkbox WITHOUT removing it from
the tab order. Previously `display:none` + width/height:0 dropped it out of the
keyboard path entirely. This visually-hidden-but-focusable technique keeps the
real in flow and focusable (so Space natively flips it
and AT announces its checkbox role + checked state), while the styled
`.toggle-slider` remains the visible affordance. */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"],
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
pointer-events: none;
}
/* Story 20.7 (AC5/AC8): visible focus ring on the visible affordance
(`.toggle-slider`) when the hidden-but-focusable checkbox receives keyboard
focus. Mirrored under :focus for browsers without :focus-visible. */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"]:focus-visible + .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"]:focus-visible + .toggle-slider,
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"]:focus + .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input[type="checkbox"]:focus + .toggle-slider {
outline: 2px solid var(--sidebar-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.25);
}
/* Toggle slider — clean, smooth, no jank.
Story 20.11 (AC1): the track colour/glow eases on the brand motion tokens
(--duration-normal/--ease-out) so the on/off change is smooth, never a snap.
No layout property is animated, so the surrounding row never shifts. */
#conversation-sidebar .sidebar-teaching-mode .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .toggle-slider {
display: inline-block;
position: relative;
width: 40px;
height: 22px;
background: var(--sidebar-input-border, #ccc);
border-radius: 11px;
transition: background var(--duration-normal, 200ms) var(--ease-out, ease),
box-shadow var(--duration-normal, 200ms) var(--ease-out, ease);
flex-shrink: 0;
cursor: pointer;
}
/* Toggle knob — smooth spring-eased slide (transform only → no reflow).
Story 20.11 (AC1): uses --ease-spring for a tactile, premium glide. */
#conversation-sidebar .sidebar-teaching-mode .toggle-slider::before,
.conversation-sidebar .sidebar-teaching-mode .toggle-slider::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
transition: transform var(--duration-normal, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Checked state — blue with subtle glow */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider {
background: #1565C0;
box-shadow: 0 0 8px rgba(21, 101, 192, 0.25);
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider::before,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider::before {
transform: translateX(18px);
}
/* Dark theme checked */
.dark-theme #conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider,
.dark-theme .conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:checked + .toggle-slider {
background: #42A5F5;
box-shadow: 0 0 10px rgba(66, 165, 245, 0.2);
}
/* Toggle label — with icon transition */
#conversation-sidebar .sidebar-teaching-mode .toggle-label,
.conversation-sidebar .sidebar-teaching-mode .toggle-label {
font-size: 13px;
font-weight: 500;
color: var(--sidebar-text-secondary);
transition: color 0.15s ease, font-weight 0.15s ease;
display: flex;
align-items: center;
gap: 4px;
}
/* Label becomes bolder when active */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label {
color: #1565C0;
font-weight: 600;
}
.dark-theme #conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label,
.dark-theme .conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label {
color: #42A5F5;
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover .toggle-label,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover .toggle-label {
color: var(--sidebar-text);
}
/* PRO badge next to label when active */
#conversation-sidebar .sidebar-teaching-mode .toggle-label::after,
.conversation-sidebar .sidebar-teaching-mode .toggle-label::after {
content: "";
display: none;
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label::after,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label::after {
content: "ON";
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
color: #fff;
background: linear-gradient(135deg, #1565C0, #42A5F5);
padding: 1px 5px;
border-radius: 4px;
margin-left: 6px;
animation: teachingBadgePop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dark-theme #conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label::after,
.dark-theme .conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:has(input:checked) .toggle-label::after {
background: linear-gradient(135deg, #42A5F5, #90CAF9);
color: #0D1117;
}
/* Loading state */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider {
opacity: 0.5;
cursor: wait;
}
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider::after,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: teaching-mode-spin 0.7s linear infinite;
}
@keyframes teaching-mode-spin {
to { transform: rotate(360deg); }
}
/* Disabled state */
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:disabled + .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle input:disabled + .toggle-slider {
opacity: 0.4;
cursor: not-allowed;
}
/* Collapsed sidebar */
#conversation-sidebar.collapsed .sidebar-teaching-mode,
.conversation-sidebar.collapsed .sidebar-teaching-mode {
padding: 10px 8px;
}
#conversation-sidebar.collapsed .sidebar-teaching-mode .toggle-label,
.conversation-sidebar.collapsed .sidebar-teaching-mode .toggle-label {
display: none;
}
#conversation-sidebar.collapsed .sidebar-teaching-mode .teaching-mode-toggle,
.conversation-sidebar.collapsed .sidebar-teaching-mode .teaching-mode-toggle {
justify-content: center;
padding: 6px 4px;
}
/* Story 8.11: Teaching Mode Toast Notifications */
.teaching-mode-toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 20px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
z-index: 10000;
animation: toast-slide-in 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.teaching-mode-toast.success {
background: #4caf50;
color: #fff;
}
.teaching-mode-toast.error {
background: #f44336;
color: #fff;
}
.teaching-mode-toast.info {
background: #2196f3;
color: #fff;
}
.teaching-mode-toast .toast-icon {
font-size: 18px;
}
.teaching-mode-toast .toast-message {
flex: 1;
}
.teaching-mode-toast.fade-out {
animation: toast-fade-out 0.3s ease forwards;
}
@keyframes toast-slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes toast-fade-out {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
/* Dark theme toast adjustments */
#conversation-sidebar.dark-theme ~ .teaching-mode-toast,
.dark .teaching-mode-toast,
body.dark-mode .teaching-mode-toast {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* ============================================
Story 20.11 (AC5) — Reduced-motion safety net
============================================
sidebar.css previously had ZERO prefers-reduced-motion coverage. This block
degrades EVERY sidebar animation/transition to instant-or-opacity-only when
the OS asks for reduced motion: the teaching toggle slide, all hover/press
scale feedback, the tab ripple / tab switch / notification pulse, the teaching
spinner, and the toast slide. Colour/opacity feedback (non-motion) is allowed
to remain; transform-based motion and keyframes are switched off. */
@media (prefers-reduced-motion: reduce) {
#conversation-sidebar *,
#conversation-sidebar *::before,
#conversation-sidebar *::after,
.conversation-sidebar *,
.conversation-sidebar *::before,
.conversation-sidebar *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Toggle slider + knob: no slide/transition, snap to state (AC1). */
#conversation-sidebar .sidebar-teaching-mode .toggle-slider,
.conversation-sidebar .sidebar-teaching-mode .toggle-slider,
#conversation-sidebar .sidebar-teaching-mode .toggle-slider::before,
.conversation-sidebar .sidebar-teaching-mode .toggle-slider::before {
transition: none !important;
}
/* Hover/press scale feedback → no transform motion (AC2). Background and
colour states still apply (those are not motion). */
.btn-new-conversation:hover,
.btn-new-conversation:active,
.btn-refresh:hover,
.btn-refresh:active,
.conversation-item:hover,
.conversation-item:active,
.btn-delete:hover,
.btn-delete:active,
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:hover,
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:active,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle:active {
transform: none !important;
}
/* Tab ripple, tab switch, notification pulse, spinner → no keyframes (AC5). */
.conversation-item .tab-ripple,
.conversation-item.switching,
.conversation-item.has-unread::after,
.conversation-item .unread-badge,
#conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider::after,
.conversation-sidebar .sidebar-teaching-mode .teaching-mode-toggle.loading .toggle-slider::after {
animation: none !important;
}
/* The click ripple is purely decorative motion — hide it entirely so it
cannot flash a half-scaled artefact under reduced motion. */
.conversation-item .tab-ripple {
display: none !important;
}
/* Teaching-mode toast: opacity-only, no slide-up/translate (AC5). */
.teaching-mode-toast {
animation: none !important;
transform: none !important;
}
}