/* ============================================================================ * model-selector.css — Claude-style compact model picker, attachment tray, * skill menus and chat text selection. * * Loaded LAST so it can override the previous full-screen model modal without * editing (and risking) the 11k-line ui-polish.css. Everything here is scoped to * either #model-picker-dialog.ms-compact, .ms-*, .attach-tray or the chat list. * ========================================================================== */ :root { --ms-bg: #262624; --ms-bg-hover: #333331; --ms-border: rgba(255, 255, 255, .10); --ms-text: #f5f4f2; --ms-muted: #a3a099; --ms-accent: #c96442; --ms-radius: 14px; --ms-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); /* Chat selection: a warm, low-saturation wash instead of the browser's default hard blue, which fights every dark theme it lands on. */ --chat-selection-bg: rgba(201, 100, 66, .28); --chat-selection-fg: #ffffff; } /* ── Trigger ─────────────────────────────────────────────────────────────── */ #model-selector .model-picker-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 8px 5px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ms-muted); font-size: 13px; font-weight: 550; cursor: pointer; transition: background .15s ease, color .15s ease; } #model-selector .model-picker-trigger:hover, #model-selector.model-picker-open .model-picker-trigger { background: var(--ms-bg-hover); color: var(--ms-text); } #model-selector .model-picker-trigger .model-name-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The effort chip sits beside the model name, exactly like Claude's "Sonnet 5 Medium" trigger. */ #model-selector .ms-trigger-effort { font-size: 12px; font-weight: 500; color: var(--ms-muted); opacity: .85; } #model-selector .model-picker-trigger .model-caret { font-size: 16px; opacity: .7; flex: 0 0 auto; } /* ── Hide the standalone thinking toggle button ────────────────────────────── * The model selector's Effort submenu now owns the thinking level UI. Keeping * BOTH would mean two conflicting controls for the same state. The button stays * in the DOM (setupReasoningControl still syncs its state for code that reads * window.reasoningLevel), it's just invisible. */ #deep-think-toggler { display: none !important; } /* The old trigger showed a category glyph; the compact trigger is text-only. */ #model-selector .model-picker-trigger .model-trigger-icon { display: none; } /* ── Popover shell ──────────────────────────────────────────────────────────── * * FIGHTING ui-polish.css, DELIBERATELY. * * The previous picker was a CENTERED MODAL, declared in ui-polish.css with a wall * of !important at higher specificity than a plain #id.class selector: * * #model-selector.model-selector .model-picker-window { * left: 50% !important; top: 50% !important; * transform: translate(-50%,-50%) !important; * width: 520px !important; display: none !important; * } * ... .model-picker-backdrop { backdrop-filter: blur(12px) !important; } * * Two consequences that had to be undone rather than worked around: * 1. `left/top: 50% !important` BEATS a non-important inline style, so the JS * that anchors this popover to the trigger was computing correct pixels and * having them discarded — the panel floated in the middle of the screen. * The JS now writes them with setProperty(..., 'important'), and the rules * below leave left/top for it to own. * 2. The backdrop blurred the whole page. A 330px popover anchored to a button * is not a modal and must not dim or blur anything behind it. * * Each selector is duplicated: the bare form for when the panel has been portaled * to (the normal case), and the #model-selector-scoped form to outrank the * legacy rule if the portal has not run yet on first paint. * ────────────────────────────────────────────────────────────────────────────── */ #model-picker-dialog.ms-compact, #model-selector.model-selector #model-picker-dialog.ms-compact { position: fixed !important; right: auto !important; bottom: auto !important; inset: auto !important; /* left/top are owned by positionPanel() in chat-engine.js. */ width: min(340px, calc(100vw - 20px)) !important; min-width: 0 !important; max-width: 340px !important; max-height: min(72vh, 580px) !important; padding: 6px !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-radius) !important; background: var(--ms-bg) !important; box-shadow: var(--ms-shadow) !important; color: var(--ms-text) !important; overflow: visible !important; /* submenus must escape the box */ display: none !important; opacity: 0; pointer-events: none; transform: translateY(6px) scale(.985) !important; transition: opacity .13s ease, transform .13s ease; z-index: 100041 !important; } body.model-picker-visible #model-picker-dialog.ms-compact, #model-selector.model-selector.model-picker-open #model-picker-dialog.ms-compact { display: block !important; opacity: 1; pointer-events: auto; transform: none !important; /* The legacy `model-browser-in` keyframe animates back to translate(-50%,-50%); leaving it on would re-centre the popover after the transform override above. */ animation: none !important; } /* Click-to-close catcher only: no dim, no blur. */ #model-picker-backdrop, #model-selector.model-selector #model-picker-backdrop, #model-selector.model-selector .model-picker-backdrop { position: fixed !important; inset: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: none !important; z-index: 100040 !important; } body.model-picker-visible #model-picker-backdrop, #model-selector.model-selector.model-picker-open #model-picker-backdrop, #model-selector.model-selector.model-picker-open .model-picker-backdrop { display: block !important; } #model-picker-dialog.ms-compact .model-options-content, #model-selector.model-selector #model-picker-dialog.ms-compact .model-options-content { display: block !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } #model-picker-dialog.ms-compact .ms-front { max-height: min(46vh, 360px); overflow-y: auto; overscroll-behavior: contain; } .ms-loading, .ms-empty { padding: 14px 12px; color: var(--ms-muted); font-size: 13px; text-align: center; } /* ── Rows ────────────────────────────────────────────────────────────────── */ /* One row geometry for models AND the Effort / More models rows, so the whole menu shares a single left edge and a consistent height. The `!important`s override ui-polish.css's card styling for `.suparva-option`, which gave rows a border, a big radius and its own padding. */ #model-picker-dialog.ms-compact .suparva-option.ms-model, #model-selector.model-selector #model-picker-dialog.ms-compact .suparva-option.ms-model, .ms-submenu .suparva-option.ms-model, .ms-row { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 46px; margin: 0 !important; padding: 7px 9px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: var(--ms-text); font: inherit; text-align: left; cursor: pointer; transition: background .12s ease; } #model-picker-dialog.ms-compact .suparva-option.ms-model:hover, #model-selector.model-selector #model-picker-dialog.ms-compact .suparva-option.ms-model:hover, #model-picker-dialog.ms-compact .suparva-option.ms-model.ms-active, .ms-submenu .suparva-option.ms-model:hover, .ms-row:hover, .ms-row.ms-open, .ms-model.ms-active, .ms-opt.ms-active { background: var(--ms-bg-hover) !important; } /* Effort / More models get the same leading-icon box as a model row. Without it their labels start 36px to the left of every model name and the menu reads as two different lists stacked together. */ .ms-row-ico { flex: 0 0 auto; width: 26px; height: 26px; display: grid !important; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--ms-muted); font-size: 16px !important; line-height: 1; } .ms-row.ms-disabled .ms-row-ico { opacity: .5; } #model-picker-dialog.ms-compact .suparva-option.ms-model:focus-visible, .ms-row:focus-visible, .ms-opt:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; } /* Leading glyph. A fixed-width box is what makes every name in the list start on the same x-axis regardless of icon shape. */ .ms-model-ico { flex: 0 0 auto; width: 26px; height: 26px; display: grid !important; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--ms-muted); font-size: 16px !important; line-height: 1; } .ms-model.selected-model .ms-model-ico { background: rgba(201, 100, 66, .16); color: var(--ms-accent); } .ms-model-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .ms-model-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .ms-model-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ms-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-model-desc { font-size: 11.5px; line-height: 1.3; color: var(--ms-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Capability icons, right-aligned. These replace a "Thinking · Vision · Files" text line: the same information in a quarter of the width, and it never pushes the description out of the row. */ .ms-caps { display: inline-flex; align-items: center; gap: 4px; } .ms-cap { font-size: 15px !important; line-height: 1; color: var(--ms-muted); opacity: .55; } .ms-model:hover .ms-cap { opacity: .8; } .ms-badge { flex: 0 0 auto; padding: 1px 5px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(93, 135, 255, .16); color: #8fa9ff; } .ms-badge.prm { background: rgba(201, 100, 66, .18); color: #e08a67; } .ms-badge.free { background: rgba(255, 255, 255, .08); color: var(--ms-muted); } .ms-model-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .ms-upgrade { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: var(--ms-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .ms-check { font-size: 18px; color: var(--ms-accent); visibility: hidden; } .ms-model.selected-model .ms-check { visibility: visible; } /* An unavailable model stays visible but is clearly inert — silently hiding a model the user picked yesterday is more confusing than showing it greyed. */ .ms-model.model-unavailable, .ms-model.disabled { opacity: .5; } .ms-model.model-unavailable { cursor: not-allowed; } .ms-sep { height: 1px; margin: 5px 6px; background: var(--ms-border); } .ms-row-label { flex: 1 1 auto; font-size: 13.5px; font-weight: 550; } .ms-row-value { font-size: 12.5px; color: var(--ms-muted); } .ms-chev { font-size: 18px; color: var(--ms-muted); flex: 0 0 auto; } .ms-row.ms-disabled { opacity: .4; pointer-events: none; } /* ── Submenus ────────────────────────────────────────────────────────────── */ .ms-submenu { position: fixed; width: min(300px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-bg); box-shadow: var(--ms-shadow); color: var(--ms-text); max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; /* Above the panel (100041), which itself had to clear ui-polish's 100040/41 modal stack. */ z-index: 100050; } .ms-submenu[hidden] { display: none; } .ms-submenu-note { padding: 8px 10px 10px; font-size: 12px; line-height: 1.45; color: var(--ms-muted); } .ms-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ms-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .12s ease; } .ms-opt:hover { background: var(--ms-bg-hover); } .ms-opt-label { flex: 1 1 auto; font-weight: 550; } .ms-opt-default { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: var(--ms-muted); font-size: 10px; font-weight: 600; } .ms-opt .ms-check { visibility: hidden; } .ms-opt.ms-selected .ms-check { visibility: visible; } /* Thinking on/off toggle */ .ms-toggle-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; border-radius: 9px; } .ms-toggle-row:hover { background: var(--ms-bg-hover); } .ms-toggle-copy { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; } .ms-toggle-title { font-size: 13.5px; font-weight: 550; } .ms-toggle-desc { font-size: 11.5px; color: var(--ms-muted); } .ms-switch { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .16); position: relative; transition: background .16s ease; } .ms-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; } .ms-switch.on { background: #3b82f6; } .ms-switch.on::after { transform: translateX(16px); } @media (prefers-reduced-motion: reduce) { #model-picker-dialog.ms-compact, .ms-switch, .ms-switch::after, .ms-row, .ms-opt { transition: none; } } /* ============================================================================ * ATTACHMENT TRAY — multi-file row in the composer (ChatGPT/Claude style) * ========================================================================== */ .image-preview.attach-tray { display: flex; flex-wrap: wrap; gap: 8px; width: auto !important; height: auto !important; max-height: 168px; overflow-y: auto; padding: 8px 8px 2px; margin: 0; background: transparent; border: 0; /* Attachments start at the left edge, level with the placeholder text below. Without these two the tray inherits `justify-content: center` and `align-items: center` from style.css's `.input-wrapper .image-preview` — the old rule for a single fixed 72px thumbnail box, where centering an item inside its own container was the right thing. The tray is full width, so the same declaration floated a lone chip into the middle of the composer. */ justify-content: flex-start; align-items: flex-start; } .attach-tray .attach-chip { position: relative; display: flex; align-items: center; gap: 8px; width: 62px; height: 62px; padding: 0; border: 1px solid var(--ms-border); border-radius: 10px; background: #1f1e1d; overflow: hidden; flex: 0 0 auto; } /* Documents get a wider chip: a filename needs room to be read, while an image thumbnail is self-describing at 62px. */ .attach-tray .attach-chip.is-file { width: 176px; padding: 8px 10px; } /* ── Reclaiming the tray from the legacy `.multi` rules ────────────────────── * * ui-polish.css still carries the PREVIOUS attachment implementation, which * turned the preview into a horizontal strip via `.input-wrapper * .image-preview.multi …`. Those selectors are more specific than the * `.attach-tray …` ones above, so as soon as a second file was attached they * took back control and: * • forced EVERY chip to 64x64 — including document chips, collapsing the * 176px pill so the filename it exists to display was clipped away; * • replaced wrapping with `nowrap` + horizontal scroll, which contradicts the * tray's own `max-height` + vertical scroll and hides later files off-screen. * * Re-stated here at matching-or-higher specificity. This file is loaded last * precisely so it can own the composer tray, so equal-specificity ties resolve * in its favour. The ui-polish block is left untouched because the same classes * still style attachments inside SENT message bubbles. * ------------------------------------------------------------------------- */ .input-wrapper .image-preview.attach-tray { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; padding: 8px 8px 2px; } .input-wrapper .image-preview.attach-tray .attach-chip { width: 62px; height: 62px; /* `.attach-chip` in ui-polish.css centres its own contents. Harmless for an image (it fills the chip) but wrong for a document, whose icon and filename read left-to-right from the padding edge. */ justify-content: flex-start; border-radius: 10px; } .input-wrapper .image-preview.attach-tray .attach-chip.is-file { width: 176px; height: 62px; } /* NOTE: the "Clear all" pill is already styled further down this file (`.attach-tray .attach-clear-all`). Not repeated here. */ .attach-tray .attach-chip.is-img img.preview-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; } .attach-tray .chip-doc { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; } .attach-tray .chip-doc-ico { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: rgba(201, 100, 66, .16); color: #e08a67; font-size: 17px; } .attach-tray .chip-doc-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .attach-tray .chip-doc-name { font-size: 12px; font-weight: 600; color: var(--ms-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-tray .chip-doc-kind { font-size: 10.5px; color: var(--ms-muted); text-transform: uppercase; letter-spacing: .04em; } /* Remove button: always visible on touch (no hover there), hover-revealed on pointer devices so the thumbnail is not permanently covered. */ .attach-tray .rm-img-prv { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .72); color: #fff; font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease; z-index: 2; } .attach-tray .attach-chip:hover .rm-img-prv, .attach-tray .rm-img-prv:focus-visible { opacity: 1; } .attach-tray .rm-img-prv:hover { background: #c0392b; } @media (hover: none) { .attach-tray .rm-img-prv { opacity: 1; } } .attach-tray .attach-chip-loader { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); z-index: 1; } .attach-tray .attach-chip-loader .material-symbols-rounded { font-size: 20px; color: #fff; animation: ms-spin 1s linear infinite; } .attach-tray .attach-chip.has-error { border-color: rgba(192, 57, 43, .8); } @keyframes ms-spin { to { transform: rotate(360deg); } } /* "Clear all" pill, shown only when more than one file is attached. */ .attach-tray .attach-clear-all { align-self: center; padding: 5px 10px; border: 1px solid var(--ms-border); border-radius: 999px; background: transparent; color: var(--ms-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; flex: 0 0 auto; } .attach-tray .attach-clear-all:hover { background: var(--ms-bg-hover); color: var(--ms-text); } /* ============================================================================ * SKILL MENUS — "/" launcher + the "+" > Skills submenu * ========================================================================== */ .skill-slash-menu { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-bg); box-shadow: var(--ms-shadow); max-height: min(50vh, 340px); overflow-y: auto; z-index: 100060; } .skill-slash-menu[hidden] { display: none; } .skill-slash-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; } .skill-slash-item .ss-ico { flex: 0 0 auto; font-size: 18px; color: var(--ms-muted); } .skill-slash-item.ms-active, .skill-slash-item:hover { background: var(--ms-bg-hover); } .skill-slash-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .skill-slash-name { font-size: 13.5px; font-weight: 600; color: var(--ms-text); } .skill-slash-desc { font-size: 11.5px; color: var(--ms-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } .skill-slash-empty { padding: 12px 10px; font-size: 12.5px; color: var(--ms-muted); text-align: center; } /* Active-skill pills between the textarea and the action bar. They render inside .input-wrapper, directly before .input-actions, so they're visually part of the rounded composer card rather than floating outside it. */ .active-skills-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 6px; } .active-skills-bar:empty { display: none; padding: 0; } .skill-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; border: 1px solid rgba(201, 100, 66, .30); border-radius: 8px; background: rgba(201, 100, 66, .10); color: #e8a184; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; } .skill-pill .material-symbols-rounded { font-size: 13px !important; } .skill-pill .skill-pill-x { font-size: 13px !important; cursor: pointer; opacity: .7; margin-left: 2px; } .skill-pill .skill-pill-x:hover { opacity: 1; color: #fff; } /* ============================================================================ * CHAT TEXT SELECTION * * Two separate problems, two separate rules: * 1. Everything that is CHROME (tool cards, action bars, avatars, code * headers, badges) was selectable, so dragging across a reply captured * button labels and icon ligature text into the clipboard. * 2. The selection colour was the browser default blue, which reads as a bug * against this warm dark theme. * ========================================================================== */ .chat-list .message, .chat-list .message * { -webkit-user-select: none; user-select: none; } /* Re-enable selection for actual message content only. */ .chat-list .message .message-content, .chat-list .message .message-content *, .chat-list .message .text, .chat-list .message .text *, .chat-list .message .stream-body, .chat-list .message .stream-body *, .chat-list .message pre, .chat-list .message pre *, .chat-list .message code, .chat-list .message table, .chat-list .message table * { -webkit-user-select: text; user-select: text; } /* ...then subtract the chrome that lives INSIDE message content. Ligature-based icon fonts are the worst offenders: they copy as words like "content_copy". */ .chat-list .message .material-symbols-rounded, .chat-list .message .avatar, .chat-list .message .icon, .chat-list .message .message-actions, .chat-list .message .message-actions *, .chat-list .message .outgoing-actions, .chat-list .message .outgoing-actions *, .chat-list .message .msg-time, .chat-list .message .msg-version-nav, .chat-list .message .msg-version-nav *, .chat-list .message .tool-block .tool-header, .chat-list .message .tool-block .tool-header *, .chat-list .message .thinking-label, .chat-list .message .thinking-chevron, .chat-list .message .code-wrapper .code-header, .chat-list .message .code-wrapper .code-header *, .chat-list .message .copy-button, .chat-list .message .dc-code-open, .chat-list .message .language-label, .chat-list .message button, .chat-list .message .model-plan-badge, .chat-list .message .show-more-btn, .chat-list .message .tool-skeleton { -webkit-user-select: none !important; user-select: none !important; } /* The language label and copy button must not be draggable targets either. */ .chat-list .message .code-header { -webkit-user-drag: none; } .chat-list ::selection { background: var(--chat-selection-bg); color: var(--chat-selection-fg); } .chat-list ::-moz-selection { background: var(--chat-selection-bg); color: var(--chat-selection-fg); } /* The composer is an input surface: selection there stays conventional. */ .typing-input, .typing-input * { -webkit-user-select: text !important; user-select: text !important; }