/* ═══════════════════════════════════════════════════════════════ skin-modern.css — "Modern" theme overlay Activated by: Default skin: (System 1, 1984) — UNTOUCHED Every selector in this file is prefixed with html[data-skin="modern"] so it can never bleed into the default skin. Source: backups/audition_app_light_20260412_135918.html (Look 01 Warp) ═══════════════════════════════════════════════════════════════ */ /* ── Tokens (scoped to skin via custom properties) ──────────── */ html[data-skin="modern"] { --m-bg: #f4f4f4; --m-sf: #ffffff; --m-tx: #111111; --m-bd: #6e6e6e; --m-br: #e0e0e0; --m-ac: #2a2a2a; /* dark gray (not black) — speech bubble */ --m-card-bg: #fafafa; --m-card-br: #d4d4d4; --m-input-br: #c8c8c8; --m-menu-bg: #ececec; --m-title-bg: #e5e5e5; --m-font: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: var(--m-font); background: var(--m-bg); color: var(--m-tx); font-weight: 400; } /* ── Desktop ────────────────────────────────────────────────── */ html[data-skin="modern"] #desktop { background-image: none; background-color: #d0d0d0; } /* ── Trash icon swap (modern Lucide-style line glyph) ──────── */ html[data-skin="modern"] #trash-icon .trash-classic { display: none; } html[data-skin="modern"] #trash-icon .trash-modern { display: block !important; object-fit: contain; } /* ── Menu Bar ───────────────────────────────────────────────── */ html[data-skin="modern"] ul[role="menu-bar"] { height: 34px; background: #1c1b1a; border-bottom: 1px solid #1c1b1a; font-family: var(--m-font); font-size: 12px; font-weight: 500; padding-left: 16px; } html[data-skin="modern"] #menu-bar-logo { height: 14px; filter: invert(1) brightness(2); } html[data-skin="modern"] ul[role="menu-bar"] > [role="menu-item"] { padding: 6px 12px; line-height: 1; color: #ffffff; letter-spacing: 0.01em; } html[data-skin="modern"] ul[role="menu-bar"] > [role="menu-item"]:hover, html[data-skin="modern"] ul[role="menu-bar"] > [role="menu-item"].open { background: #2e2d2b; color: #ffffff; } /* Desktop pushed down because menu bar grew from 24px → 34px */ html[data-skin="modern"] #desktop { top: 34px; } /* ── Dropdown ───────────────────────────────────────────────── */ html[data-skin="modern"] ul[role="menu"] { background: var(--m-sf); color: var(--m-tx); border: 1px solid var(--m-br); box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04); padding: 4px 0; min-width: 200px; } html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > a, html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > button, html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > span { font-family: var(--m-font); font-size: 12px; font-weight: 500; padding: 6px 18px; color: var(--m-tx); } html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > a:hover, html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > button:hover, html[data-skin="modern"] ul[role="menu"] > [role="menu-item"] > span:hover { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] ul[role="menu"] > [role="menu-item"].divider::after { border-top: 1px solid var(--m-br); } html[data-skin="modern"] .has-submenu > .submenu { background: var(--m-sf); border: 1px solid var(--m-br); box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04); padding: 4px 0; } html[data-skin="modern"] .submenu > [role="menu-item"] > span { font-family: var(--m-font); font-size: 12px; font-weight: 500; padding: 6px 18px; } html[data-skin="modern"] .submenu > [role="menu-item"] > span:hover { background: var(--m-bg); color: var(--m-tx); } /* Active-theme check glyph (pure CSS, reads body[data-skin]) */ html[data-skin="modern"] [data-action="theme-modern"]::before { content: '✓ '; } html[data-skin="modern"] [data-action="theme-glass"]::before { content: ' '; white-space: pre; } html[data-skin="modern"] [data-action="theme-system1"]::before { content: ' '; white-space: pre; } html[data-skin="modern"] [data-action="theme-win98"]::before { content: ' '; white-space: pre; } body[data-skin="system1"] [data-action="theme-system1"]::before { content: '✓ '; } body[data-skin="system1"] [data-action="theme-glass"]::before { content: ' '; white-space: pre; } body[data-skin="system1"] [data-action="theme-modern"]::before { content: ' '; white-space: pre; } body[data-skin="system1"] [data-action="theme-win98"]::before { content: ' '; white-space: pre; } /* ── Window ─────────────────────────────────────────────────── */ html[data-skin="modern"] .window { background-color: var(--m-sf); border: none; border-radius: 4px; /* Clip the dark title bar to the rounded corners so no white window background shows through at the top edge. */ overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); font-family: var(--m-font); } /* ── Title Bar ──────────────────────────────────────────────── */ html[data-skin="modern"] .title-bar { height: 36px; padding: 0 14px; padding-left: 14px; background: #1c1b1a; border-bottom: 1px solid #1c1b1a; cursor: grab; } /* Kill the 6-line pattern */ html[data-skin="modern"] .title-bar::before { display: none; } html[data-skin="modern"] .title-bar .title { position: static; transform: none; font-family: var(--m-font); font-size: 12px; font-weight: 700; line-height: 36px; letter-spacing: 0.01em; background: transparent; color: #ffffff; padding: 0; margin: 0 auto; } html[data-skin="modern"] .window:not(.focused) .title-bar .title { color: #888888; } /* Close button — square icon, top-right, X always visible */ html[data-skin="modern"] .title-bar { display: flex; align-items: center; } html[data-skin="modern"] .title-bar button { position: relative; top: auto; left: auto; right: auto; width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background-color: transparent; margin: 0 0 0 auto; align-self: center; flex-shrink: 0; } html[data-skin="modern"] .title-bar button.close::before { content: '\00D7'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 400; line-height: 1; } html[data-skin="modern"] .title-bar button.close:hover { background-color: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); } html[data-skin="modern"] .title-bar button.close:hover::before { color: #ffffff; } /* Hide the System 1 separator line below title bar */ html[data-skin="modern"] .separator { display: none; } /* ── Window pane / chat container ───────────────────────────── */ html[data-skin="modern"] .window-pane { font-family: var(--m-font); font-size: 12px; line-height: 1.6; background: var(--m-sf); } html[data-skin="modern"] #chat-messages { padding: 20px 24px; background: var(--m-sf); font-family: var(--m-font); font-size: 12px; font-weight: 400; line-height: 1.6; } /* ── AGENT messages ─────────────────────────────────────────── */ html[data-skin="modern"] .chat-msg .chat-role { font-family: var(--m-font); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--m-bd); text-transform: uppercase; margin-bottom: 6px; } /* Kill the gray box around AGENT chat replies */ html[data-skin="modern"] .chat-msg:not(.user-msg) .chat-body { background: transparent; padding: 0; } html[data-skin="modern"] .chat-msg:not(.user-msg) .chat-text { color: var(--m-tx); font-size: 12px; line-height: 1.6; padding: 0; } /* AGENT result block — bordered card */ html[data-skin="modern"] .chat-result { background: var(--m-card-bg); border: 1px solid var(--m-card-br); border-radius: 4px; padding: 12px 14px; margin: 8px 0 0; /* reset System 1's negative margins */ color: var(--m-tx); font-size: 12px; line-height: 1.6; white-space: pre-line; word-wrap: break-word; } /* Drop the dotted top border that System 1 adds */ html[data-skin="modern"] .chat-text + .chat-result { border-top: 1px solid var(--m-card-br); margin-top: 8px; } /* AGENT links — /impeccable blue (oklch 50% 0.15 240), underlined */ html[data-skin="modern"] .chat-msg .chat-text a, html[data-skin="modern"] .chat-result a { color: oklch(50% 0.15 240); text-decoration: underline; font-weight: 400; } html[data-skin="modern"] .chat-msg .chat-text a:hover, html[data-skin="modern"] .chat-result a:hover { background: transparent; color: oklch(38% 0.18 240); text-decoration: underline; } /* ── YOU messages — speech bubble ───────────────────────────── */ html[data-skin="modern"] .chat-msg.user-msg .chat-role { display: none; /* bubble alone signals identity */ } html[data-skin="modern"] .chat-msg.user-msg .chat-text { background: #e5e5e5; color: var(--m-tx); padding: 9px 14px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); max-width: min(75%, 380px); font-size: 12px; line-height: 1.4; margin-top: 0; margin-bottom: 4px; } /* ── Doc-type pills (chat-buttons / .btn.chat-option-btn) ───── */ html[data-skin="modern"] .chat-buttons { margin: 8px 0 4px; gap: 6px; } html[data-skin="modern"] .chat-buttons .btn { background: var(--m-sf); border: 1px solid var(--m-input-br); border-radius: 4px; padding: 6px 13px; font-family: var(--m-font); font-size: 11px; font-weight: 400; color: var(--m-tx); box-shadow: none; min-height: auto; text-transform: none; } html[data-skin="modern"] .chat-buttons .btn:hover { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] .chat-buttons .btn:active { background: var(--m-br); color: var(--m-tx); } /* ── Sources drawer ─────────────────────────────────────────── */ html[data-skin="modern"] .chat-sources { font-family: var(--m-font); font-size: 11px; color: var(--m-bd); border-top: 1px solid var(--m-br); } html[data-skin="modern"] .chat-sources > summary { color: var(--m-bd); padding: 6px 0; } html[data-skin="modern"] .src-row { color: var(--m-tx); padding: 4px 6px; border-radius: 3px; } html[data-skin="modern"] .src-row:hover { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] .src-meta { color: var(--m-bd); } /* ── Tool call / thinking ───────────────────────────────────── */ html[data-skin="modern"] .tool-call { color: var(--m-bd); font-family: var(--m-font); font-style: italic; font-size: 11px; } html[data-skin="modern"] .thinking-msg { font-family: var(--m-font); font-size: 11px; color: var(--m-bd); } html[data-skin="modern"] .thinking-work { color: var(--m-bd); font-family: var(--m-font); } /* ── Chat input area ────────────────────────────────────────── */ html[data-skin="modern"] #chat-input-area { background: #ececec; border-top: 1px solid #d4d4d4; padding: 10px 14px; gap: 8px; /* Align flex items to the bottom so the attach [+] and Send buttons stay pinned to the bottom edge as the textarea auto-grows upward. */ align-items: flex-end; } /* Hide the legacy .resize-handle flex-spacer (18px wide in base CSS). The real window resize is handled by .win-edge overlays added by initResize(), so the inline handle is purely decorative — dropping it lets Send sit flush to the right padding and the textarea reclaim that 18px. */ html[data-skin="modern"] #chat-input-area .resize-handle { display: none; } html[data-skin="modern"] #chat-attach { width: 28px; height: 28px; padding: 0; background: var(--m-sf); border: 1px solid var(--m-input-br); border-radius: 4px; font-family: var(--m-font); font-size: 16px; font-weight: 400; color: var(--m-bd); display: flex; align-items: center; justify-content: center; } html[data-skin="modern"] #chat-attach:hover { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] #chat-input { flex: 1; /* Textarea auto-grows from min-height up to max-height (~6 lines). JS in chat.js sets inline height on input; these bounds clamp it. */ min-height: 30px; max-height: 120px; padding: 7px 12px 5px; background: var(--m-sf); border: 1px solid var(--m-input-br); border-radius: 4px; font-family: Geneva, "Helvetica Neue", sans-serif; font-size: 12px; line-height: 16px; color: var(--m-tx); font-weight: 400; resize: none; overflow-y: auto; } html[data-skin="modern"] #chat-input:focus { background: var(--m-sf); color: var(--m-tx); outline: none; border-color: var(--m-bd); } html[data-skin="modern"] #chat-input::placeholder { font-family: Geneva, "Helvetica Neue", sans-serif; font-size: 12px; color: #aaaaaa; font-weight: 400; } html[data-skin="modern"] #chat-send { height: 30px; padding: 0 18px; background: #ffffff; color: var(--m-tx); border: 1px solid var(--m-input-br); border-left: 1px solid var(--m-input-br); border-radius: 4px; font-family: var(--m-font); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; cursor: pointer; } html[data-skin="modern"] #chat-send:active { background: #ececec; color: var(--m-tx); } /* Hide resize-handle glyph (keep it functional, just invisible). !important needed: base style.css uses `:not(#chat-input-area ...)::after` which has (1,2,1) specificity and beats our (0,2,2) attribute selector. */ html[data-skin="modern"] .resize-handle::after, html[data-skin="modern"] #chat-input-area .resize-handle::after { display: none !important; border: none !important; } /* Null decorative L-borders on window resize handles in modern skin. Resize still works via .win-edge overlays from initResize(). */ html[data-skin="modern"] .window .resize-handle, html[data-skin="modern"] .resize-handle { background: transparent !important; border-left: none !important; border-top: none !important; } html[data-skin="modern"] #chat-attachments { background: #ececec; border-top: 1px solid #d4d4d4; padding: 6px 14px; } html[data-skin="modern"] .attach-chip { background: var(--m-sf); border: 1px solid var(--m-input-br); border-radius: 4px; font-family: var(--m-font); font-size: 11px; color: var(--m-tx); } html[data-skin="modern"] .attach-chip-x { font-family: var(--m-font); color: var(--m-bd); } html[data-skin="modern"] .attach-chip-x:hover { background: transparent; color: var(--m-tx); } /* ── Chat history list ──────────────────────────────────────── */ /* .chat-welcome is a marker class only — no styles needed here */ html[data-skin="modern"] .chat-history-item { border-bottom: 1px solid var(--m-br); padding: 8px 12px; } html[data-skin="modern"] .chat-history-item:hover { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] .chat-history-preview { font-family: var(--m-font); font-size: 12px; color: var(--m-tx); } html[data-skin="modern"] .chat-history-meta { font-family: var(--m-font); font-size: 10px; color: var(--m-bd); } html[data-skin="modern"] .chat-history-item:hover .chat-history-meta { color: var(--m-bd); } html[data-skin="modern"] .chat-history-delete { font-family: var(--m-font); font-size: 11px; color: var(--m-bd); } html[data-skin="modern"] .chat-history-delete:hover { color: oklch(52% 0.18 20); } html[data-skin="modern"] .chat-history-item.selected { background: oklch(72% 0.08 250 / 0.12); outline: 1px solid oklch(62% 0.10 250 / 0.35); } html[data-skin="modern"] .chat-history-item.selected .chat-history-meta { color: var(--m-bd); } /* ── Trash icon label ───────────────────────────────────────── */ html[data-skin="modern"] .trash-icon .folder-label, html[data-skin="modern"] .folder-icon .folder-label, html[data-skin="modern"] .file-icon .folder-label { font-family: var(--m-font); font-size: 11px; color: var(--m-tx); background: transparent; } /* ── Modern folder/file icons (swap classic inline SVGs) ───── */ /* Hide the classic pixel SVG that the renderer clones in */ html[data-skin="modern"] .folder-icon > svg { display: none; } /* Folder icons — project items (data-project-id) AND any item that carries a data-drive-folder-id (desktop project folders, Home window subfolders, etc.). Home subfolders also get data-file-id so the drag system can move them via /api/files/{id}/move, so we deliberately *do not* exclude [data-file-id] here — [data-drive-folder-id] wins over [data-file-id]. */ html[data-skin="modern"] .folder-icon[data-project-id]::before, html[data-skin="modern"] .folder-icon[data-drive-folder-id]:not([data-project-id])::before { content: ''; display: block; width: 48px; height: 48px; background: url('/static/icon/folder_modern.svg?v=6') center/contain no-repeat; margin-bottom: 2px; } /* File icons — only when the item is NOT also a drive folder. */ html[data-skin="modern"] .folder-icon[data-file-id]:not([data-drive-folder-id])::before { content: ''; display: block; width: 48px; height: 48px; background: url('/static/icon/file.svg?v=5') center/contain no-repeat; margin-bottom: 2px; } /* Folder icons inside project windows (no data attr — fall back to folder) */ html[data-skin="modern"] .window-pane .folder-icon:not([data-file-id])::before { content: ''; display: block; width: 40px; height: 40px; background: url('/static/icon/folder_modern.svg?v=6') center/contain no-repeat; margin-bottom: 2px; } /* ── Hover / drop-target outline (matches window border: 2px black, 4px radius) ── */ /* Folder icons: when something is being dragged onto them, draw a rounded black outline around the icon graphic (::before pseudo). Label is left untouched. */ html[data-skin="modern"] .folder-icon.folder-drop-target::before { box-shadow: 0 0 0 2px #000000; border-radius: 4px; } /* Trash: same rounded black outline around the modern icon. */ html[data-skin="modern"] .trash-icon.trash-hover .trash-modern { box-shadow: 0 0 0 2px #000000; border-radius: 4px; } /* Selected folder icon (click selection) — subtle highlight on label */ html[data-skin="modern"] .folder-icon.selected .folder-label { background: var(--m-tx); color: var(--m-bg); } /* ── Scrollbar (cleaner thin gray) ──────────────────────────── */ html[data-skin="modern"] ::-webkit-scrollbar { width: 10px; background: var(--m-bg); } html[data-skin="modern"] ::-webkit-scrollbar-track { background: var(--m-bg); background-image: none; border-left: none; } html[data-skin="modern"] ::-webkit-scrollbar-thumb { background: #c8c8c8; border: 2px solid var(--m-bg); border-radius: 5px; } html[data-skin="modern"] ::-webkit-scrollbar-thumb:hover { background: var(--m-bd); } /* ── Modals (auth, about, terms, new folder) ────────────────── */ html[data-skin="modern"] .modal-dialog { background: var(--m-sf); border: 1px solid var(--m-br); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.06); font-family: var(--m-font); } html[data-skin="modern"] .modal-dialog .outer-border, html[data-skin="modern"] .modal-dialog .inner-border { border: none; } html[data-skin="modern"] .btn { background: var(--m-sf); border: 1px solid var(--m-input-br); border-radius: 4px; box-shadow: none; font-family: var(--m-font); font-size: 11px; font-weight: 500; color: var(--m-tx); padding: 6px 14px; text-transform: none; } html[data-skin="modern"] .btn:hover { background: var(--m-bg); } html[data-skin="modern"] .btn-default { background: var(--m-tx); color: var(--m-sf); border-color: var(--m-tx); font-weight: 700; } html[data-skin="modern"] .btn-default:hover { background: var(--m-bd); border-color: var(--m-bd); } /* ── Dialog title bar (modern: clean label, no stripe) ──────── */ html[data-skin="modern"] .dialog-title-bar { background: none; border-bottom: 1px solid var(--m-br); height: auto; padding: 10px 14px 10px; margin: 0; } html[data-skin="modern"] .dialog-title-bar .title { font-family: var(--m-font); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; background: transparent; color: var(--m-tx); padding: 0; margin: 0 auto; text-align: center; } /* ── Modal content typography ────────────────────────────────── */ html[data-skin="modern"] .modal-contents { font-family: var(--m-font); font-size: 12px; color: var(--m-tx); } html[data-skin="modern"] .modal-contents label { font-family: var(--m-font); font-size: 12px; font-weight: 600; color: var(--m-tx); } html[data-skin="modern"] .modal-contents input[type="text"] { border: 1px solid var(--m-input-br); border-radius: 4px; padding: 7px 10px; font-family: var(--m-font); font-size: 12px; background: var(--m-sf); color: var(--m-tx); outline: none; box-shadow: none; } html[data-skin="modern"] .modal-contents input[type="text"]:focus { border-color: var(--m-bd); } html[data-skin="modern"] .modal-contents p { font-family: var(--m-font); font-size: 12px; color: var(--m-tx); margin-bottom: 6px; } html[data-skin="modern"] .modal-contents strong { font-family: var(--m-font); font-weight: 700; color: var(--m-tx); } html[data-skin="modern"] .modal-contents ul { font-family: var(--m-font); font-size: 12px; color: var(--m-tx); padding-left: 18px; margin-bottom: 6px; } html[data-skin="modern"] .modal-contents li { font-family: var(--m-font); margin-bottom: 3px; line-height: 1.5; } html[data-skin="modern"] .modal-contents a { color: var(--m-tx); text-decoration: underline; } html[data-skin="modern"] .field-row { font-family: var(--m-font); font-size: 12px; } /* ── Auth dialog icon toggle ────────────────────────────────── */ /* System 1: happy mac visible, smiley computer hidden (default state) */ .auth-icon-modern { display: none; } /* Modern: smiley computer visible, happy mac hidden */ html[data-skin="modern"] .auth-icon-s1 { display: none; } html[data-skin="modern"] .auth-icon-modern { display: block; width: 52px; height: 52px; margin: 0 auto 8px; } /* ── About dialog icon toggle ───────────────────────────────── */ /* System 1: happy mac visible, laptop hidden (default state) */ .about-icon-modern { display: none; } /* Modern: laptop visible, happy mac hidden */ html[data-skin="modern"] .about-icon-s1 { display: none; } html[data-skin="modern"] .about-icon-modern { display: block; width: 52px; height: 52px; margin: 0 auto 16px; } /* ── About dialog — Modern layout ───────────────────────────── */ html[data-skin="modern"] #about-dialog { width: 320px; } html[data-skin="modern"] #about-dialog .modal-contents { padding: 28px 28px 20px; } html[data-skin="modern"] #about-dialog strong { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; display: block; margin-bottom: 10px; } html[data-skin="modern"] .about-body { font-size: 11px; line-height: 1.75; color: var(--m-bd); } /* ── Context Menu (desktop RC + trash RC) ──────────────────── */ html[data-skin="modern"] #context-menu { background: var(--m-sf); border: 1px solid var(--m-br); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04); font-family: var(--m-font); padding: 4px 0; min-width: 160px; } html[data-skin="modern"] #context-menu > [role="menu-item"] > span { font-family: var(--m-font); font-size: 12px; font-weight: 500; color: var(--m-tx); padding: 6px 16px; } html[data-skin="modern"] #context-menu > [role="menu-item"] > span:hover { background: var(--m-bg); color: var(--m-tx); } /* Hide pixel SVG icons — hardcoded fill/stroke look wrong in clean modern menu */ html[data-skin="modern"] #context-menu > [role="menu-item"] > span svg { display: none; } /* Divider — solid 1px, no dots */ html[data-skin="modern"] #context-menu > [role="menu-item"].divider::after { border-top: 1px solid var(--m-br); } /* ── Divider last-child guard (belt-and-suspenders for dynamic menus) */ html[data-skin="modern"] ul[role="menu"] > [role="menu-item"].divider:last-child::after, html[data-skin="modern"] .submenu > [role="menu-item"].divider:last-child::after, html[data-skin="modern"] #context-menu > [role="menu-item"].divider:last-child::after { display: none; } /* ── Agent result — use normal whitespace so blank lines don't gap */ html[data-skin="modern"] .chat-result { white-space: normal; } html[data-skin="modern"] .chat-result .md-p { margin: 8px 0 2px; white-space: normal; } html[data-skin="modern"] .chat-result .md-p:first-child { margin-top: 0; } html[data-skin="modern"] .chat-result .md-list { margin-bottom: 8px; } /* ── Bold typography (modern) — override base Geneva/Recursive assignment on strong */ html[data-skin="modern"] .chat-text strong, html[data-skin="modern"] .chat-result strong { font-family: var(--m-font); font-weight: 700; } /* ═══ Modern skin — Mobile overrides ≤768px ══════════════════ */ @media (max-width: 768px) { /* Hamburger: white icon on dark bar */ html[data-skin="modern"] #mobile-hamburger { color: #ffffff; } /* Desktop: plain white surface */ html[data-skin="modern"] #desktop { background-color: var(--m-sf); } /* Chat window: no border-radius or shadow at full-width */ html[data-skin="modern"] #chat-window { border-radius: 0 !important; box-shadow: none !important; } /* Title bar hidden on mobile (base rule already hides it) */ html[data-skin="modern"] #chat-window .title-bar, html[data-skin="modern"] #chat-window .separator { display: none !important; } /* Mobile drawer: modern palette */ html[data-skin="modern"] #mobile-drawer { background: var(--m-sf); border-right: 1px solid var(--m-br); } html[data-skin="modern"] #mobile-drawer-nav li > span { font-family: var(--m-font); font-size: 14px; font-weight: 500; color: var(--m-tx); } html[data-skin="modern"] #mobile-drawer-nav li > span:hover, html[data-skin="modern"] #mobile-drawer-nav li > span:active { background: var(--m-bg); color: var(--m-tx); } html[data-skin="modern"] #mobile-drawer-nav li.divider { border-top: 1px solid var(--m-br); } /* Auth dialog */ html[data-skin="modern"] .modal-dialog { width: calc(100vw - 32px) !important; max-width: 400px; } }