/* ============================================ SIDEBAR — Claude-inspired unified nav + conversations Design system component. Uses tokens from tokens.css. ONE file for ALL pages. Change here → changes everywhere. ============================================ */ /* Pre-paint collapse: prevents FOUC when navigating with sidebar closed. JS sets .sc2 on synchronously before paint, this CSS hides the sidebar immediately. JS then converts to .collapsed and removes .sc2. */ .sc2 .chat-sidebar { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); overflow: visible; padding: 0; align-items: center; } .sc2 .chat-sidebar .s-logo-text, .sc2 .chat-sidebar .s-logo, .sc2 .chat-sidebar .s-new-chat-label, .sc2 .chat-sidebar .s-nav-label, .sc2 .chat-sidebar .s-user-name, .sc2 .chat-sidebar .s-user-plan, .sc2 .chat-sidebar #chat-contacts, .sc2 .chat-sidebar .s-conv-search { display: none !important; } /* ---- Base sidebar ---- */ .chat-sidebar { width: var(--sidebar-width); height: 100%; background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; position: relative; overflow: hidden; z-index: 50; border-right: 0.5px solid var(--sidebar-border); color: var(--text-primary); line-height: 1.5; font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; scrollbar-color: rgba(31, 31, 30, 0.35) transparent; scrollbar-width: thin; transition-property: width, background-color, border-color; transition-duration: 300ms, 35ms, 35ms; transition-timing-function: cubic-bezier(0.165, 0.85, 0.45, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1); } /* ---- Shield sidebar from page-level button resets ---- */ /* Some pages (e.g. oversaettelse st-layout.css) set button{line-height:1} which crushes text spacing inside sidebar buttons. Override here. */ .chat-sidebar button { line-height: 1.5; } /* ---- Strip global anchor colors inside sidebar ---- */ /* reset.css uses :where(a) which is 0 specificity, but this safety net ensures NO red bleeds through. */ .chat-sidebar :where(a, a:link, a:visited, a:hover, a:active) { color: inherit; text-decoration: none; } /* ---- Header: wordmark + toggle ---- */ .s-header { padding: 16px 14px 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .s-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; color: var(--text-primary); } .s-logo:hover { color: var(--text-primary); } .s-logo-text { font-family: 'Nunito Sans', sans-serif !important; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; transition: opacity var(--sidebar-transition), width var(--sidebar-transition); } .s-logo-skriv { color: var(--color-primary, #e24668); font-weight: 800; } .s-logo-sikkert { color: var(--color-text-primary); } .s-header-actions { display: flex; gap: 2px; flex-shrink: 0; transition: opacity var(--sidebar-transition); } .s-icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 180ms ease, color 180ms ease; flex-shrink: 0; } .s-icon-btn:hover { background: var(--sidebar-hover); color: var(--text-primary); } .s-icon-btn svg { width: 20px; height: 20px; } /* ---- New chat button ---- */ .s-new-chat { margin: 2px 8px 6px; padding: 0 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 420; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 36px; transition: background 180ms ease; font-family: inherit; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-decoration: none; } .s-new-chat:hover { color: var(--text-primary); } .s-new-chat:hover .s-new-chat-icon { background: rgba(0, 0, 0, 0.10); } .s-new-chat:active .s-new-chat-icon { background: rgba(0, 0, 0, 0.14); } .s-new-chat-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); } .s-new-chat-icon svg { width: 14px; height: 14px; stroke-width: 2; } .s-new-chat-label { transition: opacity var(--sidebar-transition), width var(--sidebar-transition); overflow: hidden; } /* ---- Nav items ---- */ .s-nav { padding: 0 8px 6px; flex-shrink: 1; min-height: 0; border-bottom: 0.5px solid rgba(0,0,0,0.08); margin-bottom: 6px; max-height: 40vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.08) transparent; } .s-nav-item { display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 180ms ease; text-decoration: none; height: 36px; margin-bottom: 1px; color: var(--text-secondary); position: relative; overflow: hidden; } .s-nav-item:hover { background: var(--sidebar-hover); color: var(--text-secondary); } .s-nav-item:hover .s-nav-label { color: var(--text-primary); } .s-nav-item.active { background: var(--sidebar-active); color: var(--text-primary); } .s-nav-item.active .s-nav-label { color: var(--text-primary); font-weight: 500; } .s-nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .s-nav-icon svg { width: 18px; height: 18px; stroke-width: 1.8; vector-effect: non-scaling-stroke; } .s-nav-label { font-size: 13.5px; font-weight: 420; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--sidebar-transition); } .s-nav-badge { margin-left: auto; background: rgb(55, 55, 52); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; transition: opacity var(--sidebar-transition); } /* ---- (More tools toggle removed — dead code, replaced by .s-nav-mere in sidebar-nav.php) ---- */ /* ---- Nav sub-items (Jobsøgning → CV, Ansøgning, Papirkurv) ---- */ .s-nav-group { margin-bottom: 1px; } .s-nav-parent { pointer-events: none; } .s-nav-subs { padding-left: 28px; } .s-nav-sub { display: flex; align-items: center; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 180ms ease; text-decoration: none; height: 30px; margin-bottom: 1px; color: var(--text-muted); font-size: 13px; font-weight: 420; white-space: nowrap; overflow: hidden; } .s-nav-sub:hover { background: var(--sidebar-hover); color: var(--text-primary); } .s-nav-sub .s-nav-label { transition: opacity var(--sidebar-transition); } .s-nav-sub.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: 500; } .s-nav-sub.active .s-nav-label { color: var(--text-primary); font-weight: 500; } /* ---- Conversations (scrollable middle) ---- */ .chat-contacts { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.08) transparent; transition: opacity var(--sidebar-transition); min-height: 0; } .chat-contacts::-webkit-scrollbar { width: 3px; } .chat-contacts::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; } .s-convos { padding: 4px 8px; } .s-group { padding: 14px 8px 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .chat-sidebar .s-conv { display: block; position: relative; padding: 7px 34px 7px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 180ms ease; margin-bottom: 1px; font-size: 13.5px; font-weight: 400; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; text-decoration: none; } /* 3-dot "more actions" button on each conversation — hover-revealed, Claude-style */ .chat-sidebar .s-conv-more { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: rgba(31, 31, 30, 0.6); cursor: pointer; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; outline: none; } .chat-sidebar .s-conv:hover .s-conv-more, .chat-sidebar .s-conv.active .s-conv-more, .chat-sidebar .s-conv-more:focus-visible { opacity: 1; } .chat-sidebar .s-conv-more:hover, .chat-sidebar .s-conv-more:focus-visible { background: rgba(31, 31, 30, 0.08); color: rgb(31, 31, 30); } .chat-sidebar .s-conv-more svg { pointer-events: none; } .chat-sidebar .s-conv:visited, .chat-sidebar .s-conv:link { color: var(--text-primary); text-decoration: none; } .chat-sidebar .s-conv:hover { background: var(--sidebar-hover); color: var(--text-primary); } .chat-sidebar .s-conv.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: 500; } /* Search in conversations */ .chat-conv-search-wrap { padding: 0 2px 6px; } .chat-conv-search { width: 100%; height: 32px; padding: 0 10px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: var(--radius-sm); background: rgba(255,255,255,0.5); color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; transition: border-color 180ms ease; } .chat-conv-search:focus { border-color: rgba(0,0,0,0.25); } .chat-conv-search::placeholder { color: var(--text-faint); } /* Show more / fewer toggle */ .chat-conv-show-more { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; transition: background 180ms ease; text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 420; margin: 4px 0 8px; border: none; background: none; font-family: inherit; width: 100%; text-align: left; } .chat-conv-show-more:hover { background: var(--sidebar-hover); color: var(--text-primary); } /* ---- Search modal (Cmd+K style) ---- */ .chat-search-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0.5px solid rgba(0,0,0,0.1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.5); color: var(--text-faint); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; margin-bottom: 6px; } .chat-search-trigger:hover { border-color: rgba(0,0,0,0.2); background: rgba(255,255,255,0.8); } .chat-search-trigger svg { flex-shrink: 0; opacity: 0.5; } .chat-search-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; animation: csm-fade-in 150ms ease; } @keyframes csm-fade-in { from { opacity: 0; } to { opacity: 1; } } .chat-search-modal { width: 100%; max-width: 620px; background: var(--color-card); border-radius: 16px; box-shadow: 0 16px 70px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); overflow: hidden; animation: csm-slide-up 200ms ease; } @keyframes csm-slide-up { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-search-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); } .chat-search-icon { flex-shrink: 0; color: var(--color-text-secondary); display: flex; } .chat-search-input { flex: 1; border: none; outline: none; font-size: 16px; font-family: inherit; color: var(--color-text-primary); background: transparent; } .chat-search-input::placeholder { color: var(--color-text-muted); } .chat-search-close { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--color-text-secondary); display: flex; padding: 4px; border-radius: 6px; transition: background 120ms ease; } .chat-search-close:hover { background: rgba(0,0,0,0.06); color: var(--color-text-secondary); } .chat-search-results { max-height: 400px; overflow-y: auto; padding: 4px 0; position: relative; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%); } .chat-search-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background 80ms ease; } .chat-search-row:hover, .chat-search-row--active { background: rgba(0,0,0,0.07); } .chat-search-row-icon { flex-shrink: 0; color: var(--color-text-secondary); display: flex; } .chat-search-row-title { flex: 1; font-size: 14px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-search-row-date { flex-shrink: 0; font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.01em; } .chat-search-empty { padding: 24px 16px; text-align: center; color: var(--color-text-secondary); font-size: 14px; } @media (max-width: 600px) { .chat-search-overlay { padding-top: 5vh; padding-left: 12px; padding-right: 12px; } .chat-search-modal { max-width: 100%; border-radius: 12px; } .chat-search-results { max-height: 60vh; } } /* ---- User footer ---- */ .s-user { width: 100%; padding: 10px 12px 14px; border-top: 0.5px solid rgba(0,0,0,0.08); display: flex; align-items: center; gap: 10px; flex-shrink: 0; overflow: hidden; background: transparent; border-left: none; border-right: none; border-bottom: none; font-family: inherit; cursor: pointer; transition: background var(--sidebar-transition); position: relative; text-align: left; } .s-user:hover { background: var(--sidebar-hover); } .s-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--text-secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; line-height: 1; letter-spacing: 0.02em; text-align: center; border: 0.5px solid transparent; transition: border-color 180ms ease, opacity 180ms ease; } .s-user:hover .s-avatar { border-color: rgba(0,0,0,0.12); opacity: 0.9; } .s-user-info { flex: 1; min-width: 0; transition: opacity var(--sidebar-transition); } .s-user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-user-plan { font-size: 12px; color: var(--text-muted); } .s-user-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); transition: opacity var(--sidebar-transition); } /* ---- Settings dropdown ---- */ .s-dropdown { position: fixed; bottom: 60px; left: 8px; width: 272px; max-height: 640px; min-width: 128px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0.5px solid rgba(31, 31, 30, 0.2); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px 0px; padding: 6px; z-index: 50; overflow-x: hidden; overflow-y: auto; color: rgb(55, 55, 52); font-size: 14px; font-weight: 430; line-height: 19.6px; -webkit-font-smoothing: antialiased; scrollbar-width: thin; scrollbar-color: rgba(31, 31, 30, 0.35) transparent; display: none; opacity: 0; transform: translateY(4px) scale(0.98); transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms cubic-bezier(0.16, 1, 0.3, 1); } .s-dropdown.open { display: block; opacity: 1; transform: translateY(0) scale(1); } .s-dropdown.s-closing { display: block; opacity: 0; transform: translateY(4px) scale(0.98); } .s-dropdown-email { padding: 10px 12px 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 2px; } .s-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; min-height: 44px; border: none; background: none; font: inherit; width: 100%; text-align: left; border-radius: 8px; cursor: pointer; transition: background 75ms ease; color: rgb(55, 55, 52); font-size: 14px; font-weight: 430; text-decoration: none; } .s-dropdown-item:hover { background: rgba(0, 0, 0, 0.04); color: rgb(55, 55, 52); } .s-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); stroke-width: 1.8; } .s-dropdown-item span { flex: 1; } .s-dropdown-chevron { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.4; margin-left: auto; } #langSelectorItem { border: none; background: none; width: 100%; font: inherit; text-align: left; cursor: pointer; } .s-dropdown-sep { height: 0.5px; background: rgba(0, 0, 0, 0.08); margin: 4px 6px; } /* ============================================ COLLAPSED STATE ============================================ */ .chat-sidebar.collapsed { width: var(--sidebar-collapsed); background-color: rgb(248, 248, 246); background-image: linear-gradient(to top, rgba(244, 244, 241, 0.05), rgba(244, 244, 241, 0.3)); border-right-width: 1px; align-items: center; padding: 0; overflow: visible; min-width: var(--sidebar-collapsed); opacity: 1; pointer-events: auto; } /* Hide text elements in collapsed */ .chat-sidebar.collapsed .s-logo-text, .chat-sidebar.collapsed .s-logo, .chat-sidebar.collapsed .s-new-chat-label, .chat-sidebar.collapsed .s-nav-label, .chat-sidebar.collapsed .s-nav-badge, .chat-sidebar.collapsed .chat-contacts, .chat-sidebar.collapsed .s-nav-subs, .chat-sidebar.collapsed .s-user-info, .chat-sidebar.collapsed .s-user-chevron { display: none; } /* Bolder icons in collapsed rail */ .chat-sidebar.collapsed .s-nav-icon svg, .chat-sidebar.collapsed .s-new-chat-icon svg { stroke-width: 2; } /* Header: just toggle */ .chat-sidebar.collapsed .s-header { padding: 14px 0 2px; justify-content: center; } .chat-sidebar.collapsed .s-header-actions { margin: 0 auto; } .chat-sidebar.collapsed .s-icon-btn { position: relative; overflow: visible; } /* New chat: subtle accent circle */ .chat-sidebar.collapsed .s-new-chat { margin: 4px auto 6px; padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; background: transparent; color: var(--text-secondary); position: relative; overflow: visible; } .chat-sidebar.collapsed .s-new-chat:hover { background: transparent; color: var(--text-primary); } .chat-sidebar.collapsed .s-new-chat-icon { width: 24px; height: 24px; } /* Nav: full-width, centered icons */ .chat-sidebar.collapsed .s-nav { overflow: visible; max-height: none; padding: 4px 0; border-bottom: none; margin-bottom: 0; width: 100%; } .chat-sidebar.collapsed .s-nav-item { width: 34px; height: 34px; padding: 0; justify-content: center; margin: 2px auto; border-radius: 8px; color: var(--text-muted); overflow: visible; position: relative; } .chat-sidebar.collapsed .s-nav-item:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } .chat-sidebar.collapsed .s-nav-item.active { background: rgba(0, 0, 0, 0.08); color: var(--text-primary); } /* Collapsed rail: show extra tools as icons, hide Mere toggle + Jobsøgning parent + Papirkurv */ @media (min-width: 768px) { .chat-sidebar.collapsed #s-nav-mere { display: none !important; } .chat-sidebar.collapsed .s-nav-group #jobToggle { display: none !important; } .chat-sidebar.collapsed .s-nav-group { width: 100%; } .chat-sidebar.collapsed .s-nav-group .s-nav-subs { display: flex !important; flex-direction: column; align-items: center; padding-left: 0; width: 100%; } .chat-sidebar.collapsed .s-nav-sub[href="/papirkurv/"] { display: none !important; } .chat-sidebar.collapsed .s-nav-sub { width: 34px; height: 34px; padding: 0; justify-content: center; margin: 2px auto; border-radius: 8px; color: var(--text-muted); overflow: visible; position: relative; display: flex; align-items: center; } .chat-sidebar.collapsed .s-nav-sub:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } .chat-sidebar.collapsed .s-nav-sub.active { background: rgba(0, 0, 0, 0.08); color: var(--text-primary); } .chat-sidebar.collapsed .s-nav-sub .s-nav-sub-icon { display: flex; } .chat-sidebar.collapsed .s-nav-sub .s-nav-label { display: none; } .chat-sidebar.collapsed .s-nav-sub[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text-primary); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); letter-spacing: 0.01em; } .chat-sidebar.collapsed .s-nav-parent-arrow { display: none; } } /* Sub-item icons: hidden in expanded, visible only in collapsed */ .s-nav-sub-icon { display: none; } /* Visual separator before secondary tools in collapsed rail */ @media (min-width: 768px) { .chat-sidebar.collapsed #s-nav-mere + .s-nav-item { margin-top: 12px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, 0.06); } } /* Dark mode: collapsed sub-items */ [data-theme="dark"] .chat-sidebar.collapsed .s-nav-sub { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-sub:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-sub.active { color: var(--text-primary); background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-sub[data-tooltip]:hover::after { background: #2b2a27; color: #e8e6e1; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } /* Hide settings tooltip when dropdown is open (JS adds .dropdown-open to .s-user) */ .s-user.dropdown-open[data-tooltip]:hover::after { display: none !important; } [data-theme="dark"] .chat-sidebar.collapsed #s-nav-mere + .s-nav-item { border-top-color: rgba(255, 255, 255, 0.06); } /* User: compact avatar */ .chat-sidebar.collapsed .s-user { padding: 0; justify-content: center; width: 34px; height: 34px; border-top: none; margin: auto auto 16px; cursor: pointer; position: relative; overflow: visible; border-radius: 8px; transition: background 180ms ease; } .chat-sidebar.collapsed .s-user:hover { background: rgba(0, 0, 0, 0.06); } .chat-sidebar.collapsed .s-avatar { width: 30px; height: 30px; min-width: 30px; font-size: 12px; background: var(--text-primary); cursor: pointer; } /* Tooltips in collapsed rail */ .chat-sidebar.collapsed .s-nav-item[data-tooltip]:hover::after, .chat-sidebar.collapsed .s-user[data-tooltip]:hover::after, .chat-sidebar.collapsed .s-icon-btn[data-tooltip]:hover::after, .chat-sidebar.collapsed .s-new-chat[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text-primary); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); letter-spacing: 0.01em; } /* Dropdown position in collapsed state */ .chat-sidebar.collapsed ~ .chat-main .s-dropdown, .chat-sidebar.collapsed .s-dropdown { left: calc(var(--sidebar-collapsed) + 4px); bottom: 8px; } /* ============================================ SIDEBAR TOGGLE (desktop) ============================================ */ .chat-sidebar-toggle { display: none; } /* ============================================ CONV TITLE in header area ============================================ */ .chat-conv-title { display: none; } .v-voksen .chat-conv-title { display: block; min-width: 0; max-width: 60%; font-size: 16px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; cursor: pointer; border-radius: 6px; padding: 4px 8px; transition: background 0.15s; } .v-voksen .chat-conv-title:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="dark"] .v-voksen .chat-conv-title:hover { background: rgba(255, 255, 255, 0.06); } /* Inline rename input */ .chat-conv-title-input { width: 100%; font-size: 15px; font-weight: 600; color: var(--color-text-primary); background: rgba(0, 0, 0, 0.04); border: 1px solid var(--color-border, #e7e7e8); border-radius: 6px; padding: 2px 6px; outline: none; font-family: inherit; } .chat-conv-title-input:focus { border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); } [data-theme="dark"] .chat-conv-title-input { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .chat-conv-title-input:focus { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); } /* ============================================ HIDDEN — kept for later reuse ============================================ */ .chat-sidebar-templates { display: none !important; } #chat-template-chips { display: none !important; } /* Hide old skole-only labels in voksen mode */ .chat-contacts-label { display: none; } /* Keep skole labels visible for skole edition */ .v-skole .chat-contacts-label.v-skole-only { display: block; padding: 12px 10px 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .chat-contacts-label-subjects { margin-top: 8px; padding-top: 0; } /* ============================================ MOBILE (<768px) ============================================ */ .s-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 49; opacity: 0; transition: opacity 200ms ease; -webkit-tap-highlight-color: transparent; } .s-backdrop.visible { opacity: 1; } @media (max-width: 767px) { .chat-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform var(--sidebar-transition); width: var(--sidebar-width); max-width: calc(100vw - 60px); height: 100vh; height: 100dvh; box-shadow: none; border-right: none; } .chat-sidebar.drawer-open, .chat-sidebar.mobile-open { z-index: 10521; transform: translateX(0); box-shadow: rgba(0, 0, 0, 0.12) 4px 0 24px; } /* Safety: if collapsed class leaks to mobile, keep full width + hidden */ .chat-sidebar.collapsed { width: var(--sidebar-width); max-width: calc(100vw - 60px); transform: translateX(-100%); background-color: var(--sidebar-bg); background-image: none; align-items: stretch; overflow: hidden; border-right: none; min-width: unset; } .chat-sidebar.collapsed.drawer-open, .chat-sidebar.collapsed.mobile-open { transform: translateX(0); box-shadow: rgba(0, 0, 0, 0.12) 4px 0 24px; } .s-backdrop.visible { display: block; z-index: 10520; } /* Bigger touch targets on mobile */ .s-nav-item { height: 44px; } .s-conv { padding: 10px 10px; min-height: 44px; display: flex; align-items: center; } .s-new-chat { height: 44px; } .s-icon-btn { width: 44px; height: 44px; } .s-dropdown-item { padding: 12px 12px; } /* Hide desktop toggle, show mobile toggle in main */ #chat-sidebar-toggle { display: none; } .chat-drawer-trigger { display: flex; } /* Dropdown: full-width on mobile */ .s-dropdown { left: 8px; right: 8px; width: auto; max-width: calc(100vw - 16px); } /* Show collapsed items in mobile drawer */ .chat-sidebar.collapsed .s-logo-text, .chat-sidebar.collapsed .s-logo, .chat-sidebar.collapsed .s-new-chat-label, .chat-sidebar.collapsed .s-nav-label, .chat-sidebar.collapsed .chat-contacts, .chat-sidebar.collapsed .s-user-info, .chat-sidebar.collapsed .s-user-chevron { display: unset; } .chat-sidebar.collapsed .chat-contacts { display: block; } } @media (min-width: 768px) { .chat-drawer-trigger { display: none; } .s-backdrop { display: none !important; } } /* Tablet: auto-collapse (768-1023) */ @media (min-width: 768px) and (max-width: 1023px) { .chat-sidebar:not(.force-expanded) { width: var(--sidebar-collapsed); overflow: visible; } /* Reposition dropdown outside collapsed rail */ .chat-sidebar:not(.force-expanded) .s-dropdown { left: calc(var(--sidebar-collapsed) + 4px); bottom: 8px; } .chat-sidebar:not(.force-expanded) .s-logo-text, .chat-sidebar:not(.force-expanded) .s-new-chat-label, .chat-sidebar:not(.force-expanded) .s-nav-label, .chat-sidebar:not(.force-expanded) .s-nav-badge, .chat-sidebar:not(.force-expanded) .chat-contacts, .chat-sidebar:not(.force-expanded) .s-user-info, .chat-sidebar:not(.force-expanded) .s-user-chevron { display: none; } .chat-sidebar:not(.force-expanded) .s-logo { display: none; } .chat-sidebar:not(.force-expanded) .s-header { padding: 14px 0 2px; justify-content: center; } .chat-sidebar:not(.force-expanded) .s-header-actions { margin: 0 auto; } .chat-sidebar:not(.force-expanded) .s-new-chat { margin: 4px auto 6px; padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; background: transparent; } .chat-sidebar:not(.force-expanded) .s-nav { padding: 4px 0; border-bottom: none; margin-bottom: 0; width: 100%; } .chat-sidebar:not(.force-expanded) .s-nav-item { width: 34px; height: 34px; padding: 0; justify-content: center; margin: 2px auto; border-radius: 8px; color: var(--text-muted); } /* Hide Mere in tablet collapsed rail, show secondary tools */ .chat-sidebar:not(.force-expanded) #s-nav-mere { display: none !important; } .chat-sidebar:not(.force-expanded) .s-nav-group #jobToggle { display: none !important; } .chat-sidebar:not(.force-expanded) .s-nav-group { width: 100%; } .chat-sidebar:not(.force-expanded) .s-nav-group .s-nav-subs { display: flex !important; flex-direction: column; align-items: center; padding-left: 0; width: 100%; } .chat-sidebar:not(.force-expanded) .s-nav-sub[href="/papirkurv/"] { display: none !important; } .chat-sidebar:not(.force-expanded) .s-nav-sub { width: 34px; height: 34px; padding: 0; justify-content: center; margin: 2px auto; border-radius: 8px; color: var(--text-muted); overflow: visible; position: relative; display: flex; align-items: center; } .chat-sidebar:not(.force-expanded) .s-nav-sub .s-nav-sub-icon { display: flex; } .chat-sidebar:not(.force-expanded) .s-nav-sub .s-nav-label { display: none; } .chat-sidebar:not(.force-expanded) .s-nav-parent-arrow { display: none; } .chat-sidebar:not(.force-expanded) .s-user { padding: 12px 0 16px; justify-content: center; width: 100%; border-top: none; margin-top: auto; } .chat-sidebar:not(.force-expanded) .s-avatar { width: 30px; height: 30px; min-width: 30px; font-size: 12px; background: var(--text-primary); } } /* ============================================ DRAWER TRIGGER (mobile hamburger in main) Shown on mobile via @media (max-width: 767px) above. Hidden on desktop via @media (min-width: 768px) above. ============================================ */ .chat-drawer-trigger { position: absolute; top: 8px; left: 4px; z-index: 10; width: 44px; height: 44px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; } .chat-drawer-trigger:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } /* Hide trigger when sidebar drawer is open — prevents bleed-through */ .chat-sidebar.drawer-open ~ .chat-main .chat-drawer-trigger, .chat-sidebar.mobile-open ~ .chat-main .chat-drawer-trigger { display: none; } .chat-drawer-backdrop { display: none; } /* ============================================ DARK MODE ============================================ */ [data-theme="dark"] .chat-sidebar { background: var(--sidebar-bg); border-right-color: var(--sidebar-border); scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } [data-theme="dark"] .chat-sidebar.collapsed { background-color: var(--color-bg); background-image: none; } [data-theme="dark"] .s-logo-sikkert { color: var(--color-text-primary); } [data-theme="dark"] .s-avatar { background: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .s-new-chat { color: var(--text-primary); } [data-theme="dark"] .s-nav-item { color: var(--text-primary); } [data-theme="dark"] .s-new-chat-icon { background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .s-new-chat:hover .s-new-chat-icon { background: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .s-new-chat:active .s-new-chat-icon { background: rgba(255, 255, 255, 0.22); } [data-theme="dark"] .chat-sidebar.collapsed .s-avatar { background: rgba(255, 255, 255, 0.18); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-item { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-item:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-item.active { color: var(--text-primary); background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .chat-sidebar.collapsed .s-nav-item[data-tooltip]:hover::after, [data-theme="dark"] .chat-sidebar.collapsed .s-user[data-tooltip]:hover::after, [data-theme="dark"] .chat-sidebar.collapsed .s-icon-btn[data-tooltip]:hover::after, [data-theme="dark"] .chat-sidebar.collapsed .s-new-chat[data-tooltip]:hover::after { background: #2b2a27; color: #e8e6e1; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } [data-theme="dark"] .chat-conv-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text-primary); } [data-theme="dark"] .chat-conv-search:focus { border-color: rgba(255,255,255,0.25); } [data-theme="dark"] .chat-search-trigger { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text-faint); } [data-theme="dark"] .chat-search-trigger:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); } [data-theme="dark"] .chat-search-modal { background: var(--color-card); box-shadow: 0 16px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); } [data-theme="dark"] .chat-search-header { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .chat-search-input { color: var(--color-text-primary); } [data-theme="dark"] .chat-search-input::placeholder { color: var(--color-text-tertiary); } [data-theme="dark"] .chat-search-close { color: var(--color-text-tertiary); } [data-theme="dark"] .chat-search-close:hover { background: rgba(255,255,255,0.08); color: var(--color-text-secondary); } [data-theme="dark"] .chat-search-icon { color: var(--color-text-faint); } [data-theme="dark"] .chat-search-row:hover, [data-theme="dark"] .chat-search-row--active { background: rgba(255,255,255,0.09); } [data-theme="dark"] .chat-search-row-title { color: var(--color-text-primary); } [data-theme="dark"] .chat-search-row-date { color: var(--color-text-faint); } [data-theme="dark"] .chat-search-row-icon { color: var(--color-text-faint); } [data-theme="dark"] .chat-search-empty { color: var(--color-text-faint); } [data-theme="dark"] .s-dropdown { background: rgba(43, 42, 39, 0.95); border-color: rgba(255, 255, 255, 0.12); color: var(--text-primary); } [data-theme="dark"] .s-dropdown-item { color: var(--text-secondary); } [data-theme="dark"] .s-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme="dark"] .s-dropdown-item svg { color: var(--text-muted); } [data-theme="dark"] .s-dropdown-sep { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .s-dropdown-email { color: var(--text-muted); } [data-theme="dark"] .chat-drawer-trigger:hover { background: rgba(255, 255, 255, 0.08); } /* ============================================ SAFE AREAS (notch phones) ============================================ */ @supports (padding-top: env(safe-area-inset-top)) { .chat-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } } /* ============================================ FOCUS VISIBLE (keyboard only) ============================================ */ .s-icon-btn:focus-visible, .s-nav-item:focus-visible, .s-new-chat:focus-visible, .s-conv:focus-visible, .s-dropdown-item:focus-visible, .s-user:focus-visible { outline: 2px solid rgba(31, 31, 30, 0.3); outline-offset: -2px; border-radius: var(--radius-sm); } .s-user:focus { outline: none; border-color: rgba(0,0,0,0.08) !important; } /* ============================================ PREVENT LOAD FLASH ============================================ */ .chat-sidebar.no-transition { transition: none !important; } .chat-sidebar.no-transition * { transition: none !important; } /* ============================================ CONTEXT MENU (right-click on conversations) ============================================ */ .ctx-menu-overlay { display: none; position: fixed; inset: 0; z-index: 60; } .ctx-menu-overlay.ctx-open { display: block; } .ctx-menu { position: fixed; min-width: 128px; max-width: 260px; max-height: 480px; overflow-y: auto; overflow-x: hidden; background: rgb(255, 255, 255); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(31, 31, 30, 0.3); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px 0px; padding: 6px; color: rgb(55, 55, 52); scrollbar-color: rgba(31, 31, 30, 0.35) rgba(0, 0, 0, 0); scrollbar-width: thin; z-index: 61; animation: ctx-in 120ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes ctx-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .ctx-item { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 8px; width: 100%; height: 32px; min-height: 32px; padding: 6px 8px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 430; line-height: 19.6px; color: rgb(55, 55, 52); transition: background 75ms ease; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; outline: none; } .ctx-item:hover, .ctx-item:focus-visible { background: rgba(31, 31, 30, 0.06); } .ctx-item svg { width: 16px; height: 16px; flex-shrink: 0; color: rgb(55, 55, 52); } .ctx-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ctx-item--danger { color: var(--color-danger); } .ctx-item--danger:hover, .ctx-item--danger:focus-visible { background: rgba(185, 28, 28, 0.08); } .ctx-item--danger svg { color: var(--color-danger); } .ctx-sep { height: 1px; background: rgba(31, 31, 30, 0.12); margin: 4px 6px; } /* Inline rename input inside .s-conv */ .ctx-rename-input { width: 100%; font-size: 13px; font-weight: 500; color: var(--sb-text); background: rgba(0, 0, 0, 0.04); border: 0.5px solid rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 2px 6px; outline: none; font-family: inherit; } .ctx-rename-input:focus { border-color: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); } /* Pinned conversation items */ .s-conv--pinned { display: flex !important; align-items: center; gap: 6px; } .s-conv-pin-icon { flex-shrink: 0; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; color: var(--sb-text-faint); } .s-conv-pin-icon svg { width: 12px; height: 12px; } /* Dark mode context menu — inverted neutrals, same geometry */ [data-theme="dark"] .ctx-menu { background: var(--color-card); border-color: rgba(255, 255, 255, 0.14); box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px 0px; color: var(--color-text-primary); scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0); } [data-theme="dark"] .ctx-item { color: var(--color-text-primary); } [data-theme="dark"] .ctx-item:hover, [data-theme="dark"] .ctx-item:focus-visible { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ctx-item svg { color: var(--color-text-primary); } [data-theme="dark"] .ctx-item--danger { color: var(--color-error); } [data-theme="dark"] .ctx-item--danger:hover, [data-theme="dark"] .ctx-item--danger:focus-visible { background: rgba(248, 113, 113, 0.12); } [data-theme="dark"] .ctx-item--danger svg { color: var(--color-error); } [data-theme="dark"] .ctx-sep { background: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .ctx-rename-input { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .ctx-rename-input:focus { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06); } /* Dark-mode 3-dot button */ [data-theme="dark"] .chat-sidebar .s-conv-more { color: rgba(232, 232, 228, 0.65); } [data-theme="dark"] .chat-sidebar .s-conv-more:hover, [data-theme="dark"] .chat-sidebar .s-conv-more:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); } /* ============================================ CONFIRM DIALOG (delete conversation, non-chat pages) ============================================ */ .ctx-confirm-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(20, 20, 20, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: ctx-confirm-fade-in 150ms ease; } @keyframes ctx-confirm-fade-in { from { opacity: 0; } to { opacity: 1; } } .ctx-confirm-box { background: #fff; border-radius: 16px; padding: 24px; max-width: 360px; width: 90%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); animation: ctx-confirm-scale-in 150ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes ctx-confirm-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .ctx-confirm-box h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: rgb(55, 55, 52); } .ctx-confirm-box p { margin: 0 0 20px; font-size: 14px; color: rgb(100, 100, 96); line-height: 1.5; } .ctx-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; } .ctx-confirm-cancel, .ctx-confirm-ok { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; border: none; transition: background 75ms ease; } .ctx-confirm-cancel { background: rgba(31, 31, 30, 0.06); color: rgb(55, 55, 52); } .ctx-confirm-cancel:hover { background: rgba(31, 31, 30, 0.12); } .ctx-confirm-ok { background: var(--color-danger, #b91c1c); color: #fff; } .ctx-confirm-ok:hover { background: #991b1b; } /* Dark mode confirm dialog */ [data-theme="dark"] .ctx-confirm-overlay { background: rgba(0, 0, 0, 0.55); } [data-theme="dark"] .ctx-confirm-box { background: var(--color-card, #2b2a27); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .ctx-confirm-box h3 { color: var(--color-text-primary, #e8e6e1); } [data-theme="dark"] .ctx-confirm-box p { color: var(--color-text-secondary, #a8a49c); } [data-theme="dark"] .ctx-confirm-cancel { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary, #e8e6e1); } [data-theme="dark"] .ctx-confirm-cancel:hover { background: rgba(255, 255, 255, 0.14); } /* ============================================ EXPORT MODAL (Claude-aesthetic) ============================================ */ .export-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 70; align-items: center; justify-content: center; padding: 16px; animation: export-overlay-in 140ms ease-out; } .export-modal-overlay.export-modal-open { display: flex; } @keyframes export-overlay-in { from { opacity: 0; } to { opacity: 1; } } .export-modal { width: 100%; max-width: 440px; background: var(--color-card); border: 1px solid rgba(31, 31, 30, 0.12); border-radius: 16px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06); padding: 20px 20px 18px; color: var(--color-text-primary); animation: export-modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; } @keyframes export-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .export-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .export-modal-title { margin: 0; font-size: 17px; font-weight: 600; color: rgb(31, 31, 30); line-height: 1.2; } .export-modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: rgba(55, 55, 52, 0.6); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .export-modal-close:hover, .export-modal-close:focus-visible { background: rgba(31, 31, 30, 0.06); color: rgb(31, 31, 30); outline: none; } .export-modal-subtitle { margin: 4px 0 14px; font-size: 13px; color: rgba(55, 55, 52, 0.7); font-weight: 430; } .export-options { display: flex; flex-direction: column; gap: 6px; } .export-option { display: grid; grid-template-columns: 36px 1fr 16px; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; border: 1px solid rgba(31, 31, 30, 0.08); border-radius: 10px; color: rgb(55, 55, 52); font-family: inherit; text-align: left; cursor: pointer; transition: background 100ms ease, border-color 100ms ease, transform 100ms ease; outline: none; } .export-option:hover, .export-option:focus-visible { background: rgba(31, 31, 30, 0.03); border-color: rgba(31, 31, 30, 0.18); } .export-option:active { transform: scale(0.995); } .export-option-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .export-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .export-option-title { font-size: 14px; font-weight: 600; color: rgb(31, 31, 30); line-height: 1.25; } .export-option-desc { font-size: 12.5px; color: rgba(55, 55, 52, 0.65); line-height: 1.3; font-weight: 430; } .export-option-arrow { color: rgba(55, 55, 52, 0.35); transition: transform 120ms ease, color 120ms ease; } .export-option:hover .export-option-arrow, .export-option:focus-visible .export-option-arrow { color: rgba(55, 55, 52, 0.7); transform: translateX(2px); } /* Dark-mode export modal */ [data-theme="dark"] .export-modal { background: var(--color-card); border-color: rgba(255, 255, 255, 0.12); color: var(--color-text-primary); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .export-modal-title { color: var(--color-text-primary); } [data-theme="dark"] .export-modal-subtitle { color: rgba(232, 232, 228, 0.65); } [data-theme="dark"] .export-modal-close { color: rgba(232, 232, 228, 0.65); } [data-theme="dark"] .export-modal-close:hover, [data-theme="dark"] .export-modal-close:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); } [data-theme="dark"] .export-option { border-color: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); } [data-theme="dark"] .export-option:hover, [data-theme="dark"] .export-option:focus-visible { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .export-option-title { color: var(--color-text-primary); } [data-theme="dark"] .export-option-desc { color: rgba(232, 232, 228, 0.6); } [data-theme="dark"] .export-option-arrow { color: rgba(232, 232, 228, 0.35); } [data-theme="dark"] .export-option:hover .export-option-arrow, [data-theme="dark"] .export-option:focus-visible .export-option-arrow { color: rgba(232, 232, 228, 0.7); } /* ============================================ PRINT ============================================ */ @media print { .chat-sidebar, .s-backdrop { display: none !important; } } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { .chat-sidebar, .chat-sidebar * { transition-duration: 0.01ms !important; } }