/* Pixel Obsidian Gold — shared visual tokens and cross-workspace finishing layer.
   Contextual behavior and animation ownership remain with the existing UI systems. */
:root {
    color-scheme: dark;

    /* Master design tokens. Legacy variables below resolve through this layer. */
    --bg-0: #080808;
    --bg-1: #0b0b0c;
    --bg-2: #0f1012;
    --surface-1: #141518;
    --surface-2: #18191c;
    --text-primary: #f5f5f5;
    --text-secondary: #a6a6a6;
    --text-tertiary: #6e7075;
    --text-disabled: #4f5156;
    --gold-primary: #d4af37;
    --gold-bright: #f3d76b;
    --gold-deep: #8f7420;
    --gold-08: rgba(212, 175, 55, .08);
    --gold-12: rgba(212, 175, 55, .12);
    --gold-16: rgba(212, 175, 55, .16);
    --border-subtle: rgba(255, 255, 255, .05);
    --border-default: rgba(255, 255, 255, .07);
    --border-strong-token: rgba(255, 255, 255, .10);

    --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Bitcount Single", "Inter", sans-serif;
    --font-code: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 32px;
    --text-6xl: 40px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --leading-code: 1.6;
    --tracking-tight: -.02em;
    --tracking-normal: 0;
    --tracking-wide: .02em;
    --tracking-label: .04em;

    /* Core surfaces */
    --bg: var(--bg-0);
    --surface: var(--bg-2);
    --surface-raised: var(--surface-1);
    --surface-hover: var(--surface-2);
    --surface-active: #202125;

    /* Pixel identity */
    --gold: var(--gold-primary);
    --gold-light: var(--gold-bright);
    --gold-glow: rgba(212, 175, 55, .16);
    --gold-subtle: rgba(212, 175, 55, .08);

    /* Information hierarchy */
    --text: var(--text-primary);
    --text-muted: var(--text-tertiary);
    --text-inverse: #080808;

    /* Edges and semantic feedback */
    --border: var(--border-default);
    --border-strong: var(--border-strong-token);
    --border-gold: rgba(212, 175, 55, .26);
    --border-gold-strong: rgba(212, 175, 55, .52);
    --danger: #e06b68;
    --danger-subtle: rgba(224, 107, 104, .12);
    --success: #66b989;
    --success-subtle: rgba(102, 185, 137, .12);

    /* Shared geometry */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-input: 10px;
    --radius-button: 8px;
    --radius-card: 12px;
    --radius-panel: 16px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Type and motion */
    --font-sans: var(--font-primary);
    --font-mono: var(--font-code);
    --text-display: clamp(32px, 3.2vw, 40px);
    --text-page-title: clamp(24px, 2.4vw, 30px);
    --text-section-title: 20px;
    --text-body: 14px;
    --text-label: 12px;
    --text-meta: 11px;
    --motion-fast: 150ms;
    --motion-normal: 200ms;
    --motion-medium: 250ms;
    --motion-slow: 350ms;
    --motion-base: var(--motion-normal);
    --ease: var(--motion-base) cubic-bezier(.2, .7, .2, 1);

    /* Restrained depth */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .18);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .32);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, .5);
    --shadow-gold: 0 0 16px rgba(212, 175, 55, .12);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 14%, transparent);
    --z-base: 1;
    --z-panel: 10;
    --z-context-menu: 30;
    --z-topbar: 40;
    --z-composer: 50;
    --z-dropdown: 90;
    --z-overlay: 100;
    --z-sidebar: 110;
    --z-modal: 200;
}

body.light-mode {
    color-scheme: light;
    --bg-0: #f6f6f4;
    --bg-1: #f9f9f7;
    --bg-2: #ffffff;
    --surface-1: #f2f2ef;
    --surface-2: #e9e9e5;
    --text-primary: #202126;
    --text-secondary: #55575d;
    --text-tertiary: #747680;
    --text-disabled: #9a9ba0;
    --border-subtle: rgba(24, 25, 28, .05);
    --border-default: rgba(24, 25, 28, .075);
    --border-strong-token: rgba(24, 25, 28, .12);
    --bg: #f6f6f4;
    --surface: #ffffff;
    --surface-raised: #f2f2ef;
    --surface-hover: #e9e9e5;
    --surface-active: #deded8;
    --gold: #8f7420;
    --gold-light: #755e18;
    --gold-deep: #6e5919;
    --gold-glow: rgba(143, 116, 32, .14);
    --gold-subtle: rgba(143, 116, 32, .08);
    --text: #202126;
    --text-secondary: #55575d;
    --text-muted: #747680;
    --text-disabled: #9a9ba0;
    --text-inverse: #ffffff;
    --border: rgba(24, 25, 28, .075);
    --border-strong: rgba(24, 25, 28, .12);
    --border-gold: rgba(143, 116, 32, .25);
    --border-gold-strong: rgba(143, 116, 32, .48);
    --shadow-sm: 0 2px 8px rgba(30, 30, 24, .05);
    --shadow-md: 0 12px 32px rgba(30, 30, 24, .08);
    --shadow-lg: 0 22px 60px rgba(30, 30, 24, .14);
    --shadow-gold: 0 0 16px rgba(143, 116, 32, .1);
}

body {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Keep the standard and Firefox-prefixed selectors separate so browsers do not
   discard the standard rule when they don't recognize the vendor selector. */
*::selection,
input::selection,
textarea::selection {
    color: #0a0a0a !important;
    background-color: #d4af37 !important;
    -webkit-text-fill-color: #0a0a0a;
    text-shadow: none;
}

*::-moz-selection,
input::-moz-selection,
textarea::-moz-selection {
    color: #0a0a0a !important;
    background-color: #d4af37 !important;
    text-shadow: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

:is(.app, dialog, [role="dialog"]) {
    font-family: var(--font-primary);
    color: var(--text-primary);
}

:is(pre, code, kbd, samp, .CodeMirror, .code-editor-pane, .terminal-output) {
    font-family: var(--font-code);
    line-height: var(--leading-code);
}

button:not(:disabled) {
    transition-duration: var(--motion-normal);
}

button:disabled,
[role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}

:is(.topbar-btn, .composer-btn, .settings-tab, .sidebar-footer-btn,
    .workspace-nav-btn, .workspace-new-btn, .projects-primary-btn,
    .projects-quiet-btn, .research-primary-btn, .research-quiet-btn,
    .canvas-primary-btn, .canvas-secondary-btn, .code-toolbar-btn,
    .code-primary-btn, .pixel-notification-quiet-btn, .pixel-notification-icon-btn,
    .nav-btn, .nav-chat-link) {
    border-radius: var(--radius-button);
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--motion-fast);
    transition-timing-function: cubic-bezier(.2, .7, .2, 1);
}

:is(.topbar-btn, .composer-btn, .workspace-nav-btn, .projects-quiet-btn,
    .research-quiet-btn, .canvas-secondary-btn, .code-toolbar-btn,
    .pixel-notification-quiet-btn, .nav-btn, .nav-chat-link):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 24%, var(--border));
    background-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 6%, var(--surface-hover));
}

:is(.settings-input, .settings-select-inline, .user-chat-search-input,
    .command-palette input, .global-search-dialog input,
    .project-dialog input, .project-dialog select, .project-dialog textarea,
    .research-dialog input, .research-dialog select, .research-dialog textarea,
    .code-dialog input, .code-dialog select, .code-dialog textarea,
    .canvas-dialog input:not([type="checkbox"]):not([type="color"]),
    .canvas-dialog select, .canvas-dialog textarea) {
    border-color: var(--border-default);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    background-color: var(--surface);
    font-family: var(--font-primary);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

:is(.settings-input, .settings-select-inline, .user-chat-search-input,
    .command-palette input, .global-search-dialog input,
    .project-dialog input, .project-dialog select, .project-dialog textarea,
    .research-dialog input, .research-dialog select, .research-dialog textarea,
    .code-dialog input, .code-dialog select, .code-dialog textarea,
    .canvas-dialog input:not([type="checkbox"]):not([type="color"]),
    .canvas-dialog select, .canvas-dialog textarea):focus {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 72%, var(--border-strong));
    box-shadow: var(--focus-ring);
}

::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

dialog::backdrop {
    background: rgba(0, 0, 0, .68);
}

:is(.settings-dialog, .command-palette, .global-search-dialog,
    .pixel-notification-dialog, .project-dialog, .research-dialog,
    .code-dialog, .canvas-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) {
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
}

.command-palette[open] .command-palette-shell {
    box-shadow: var(--shadow-lg), 0 0 16px color-mix(in srgb, var(--pixel-ambient-glow, var(--gold-glow)) 36%, transparent);
}

dialog[open] {
    box-shadow: var(--shadow-lg), 0 0 18px color-mix(in srgb, var(--pixel-ambient-glow, var(--gold-glow)) 42%, transparent);
}

[role="tooltip"] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-primary);
    font: var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-primary);
    box-shadow: var(--shadow-md);
}

:is(.settings-dialog, .command-palette, .global-search-dialog,
    .pixel-notification-dialog, .project-dialog, .research-dialog,
    .code-dialog, .canvas-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) h1,
:is(.settings-dialog, .command-palette, .global-search-dialog,
    .pixel-notification-dialog, .project-dialog, .research-dialog,
    .code-dialog, .canvas-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) h2 {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

:is(.settings-dialog, .command-palette, .global-search-dialog,
    .pixel-notification-dialog, .project-dialog, .research-dialog,
    .code-dialog, .canvas-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) small,
:is(.settings-dialog, .command-palette, .global-search-dialog,
    .pixel-notification-dialog, .project-dialog, .research-dialog,
    .code-dialog, .canvas-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) .muted {
    color: var(--text-secondary);
}

:is(.app-view-panel, .workspace-view, .projects-view, .research-view,
    .canvas-view, .code-view, .notes-view) {
    min-width: 0;
}

:is(body, dialog, [role="dialog"]) :is(button, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 74%, white);
    outline-offset: 2px;
}

/* The composer surface owns its focus state; keep a second outline off the text field. */
.composer-input-row textarea:focus-visible,
.user-chat-composer-box textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Keep native select intrinsic sizing from widening the custom model form. */
.custom-model-form {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.custom-model-form .settings-input,
.custom-model-form .settings-select-inline {
    box-sizing: border-box;
    width: min(240px, 100%);
    min-width: 0;
    max-width: 100%;
}

.custom-model-form .settings-select-inline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AI's latest button is anchored to the visible chat viewport by chat.js. */
.ai-scroll-bottom-btn {
    position: fixed;
    right: auto;
    bottom: auto;
    left: 50%;
    top: calc(100dvh - 160px);
    transform: translateX(-50%);
    z-index: calc(var(--z-composer, 40) + 1);
}

.ai-scroll-bottom-btn:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.05);
}

/* Subtle, consistent message surfaces preserve the existing message structure. */
.message.user .bubble {
    background: color-mix(in srgb, var(--surface-raised) 91%, var(--pixel-ambient-accent, var(--gold)) 9%);
    border-color: var(--border-strong);
}

.message.user:hover .bubble {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 28%, var(--border));
}

.message.ai .bubble {
    border-left-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 32%, transparent);
    border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
    padding-block: 10px;
}

:is(.topbar, .workspace-topbar, .projects-topbar, .research-topbar, .code-topbar, .canvas-topbar, .notes-topbar, .whiteboard-topbar) {
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
}

:is(.topbar-btn, .composer-btn, .modal-close, .settings-tab, .command-palette button, .global-search-dialog button) {
    font-family: var(--font-sans);
    transition: background-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease;
}

:is(.topbar-btn, .composer-btn):hover {
    color: var(--pixel-ambient-accent, var(--gold));
}

:is(.settings-dialog, .command-palette, .global-search-dialog, .pixel-notification-dialog,
    .project-dialog, .research-dialog, .code-dialog, .artwork-lightbox-dialog, .chat-modal-dialog) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}

.settings-dialog {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 24px var(--pixel-ambient-glow, rgba(212, 175, 55, .14));
}

.settings-nav {
    background: color-mix(in srgb, var(--bg) 58%, var(--surface));
}

.settings-tab.active {
    background: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 10%, var(--surface-raised));
}

.settings-tab.active i {
    color: var(--pixel-ambient-accent, var(--gold));
}

.workspace-nav-btn.is-active {
    background: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 10%, var(--surface-raised));
}

.workspace-nav-btn.is-active i,
.workspace-tool-card:not(:disabled):hover .workspace-tool-icon,
.workspace-tool-card:focus-visible .workspace-tool-icon {
    color: var(--pixel-ambient-accent, var(--gold));
}

.workspace-tool-card:not(:disabled):hover,
.workspace-tool-card:focus-visible {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 32%, var(--border));
}

.command-row:hover,
.command-row.is-active,
.command-ask-row:hover {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 26%, var(--border));
    background: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 7%, var(--surface-hover));
}

.command-row.is-active {
    box-shadow: inset 2px 0 var(--pixel-ambient-accent, var(--gold));
}

.command-row.is-active .command-row-icon,
.command-pin.is-pinned {
    color: var(--pixel-ambient-accent, var(--gold));
}

.command-row.is-active {
    outline: 1px solid color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 24%, transparent);
    outline-offset: -1px;
}

.command-pin:focus-visible,
.command-palette button:focus-visible {
    outline-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 76%, white);
}

.project-tab.is-active {
    color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 76%, white);
    background: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 9%, var(--surface-raised));
}

:is(.starter-card, .workspace-tool-card, .project-card, .project-overview-card,
    .project-resource-card, .artwork-card, .canvas-card, .notes-card,
    .research-answer, .pixel-notification-item) {
    border-color: var(--border-default);
    border-radius: var(--radius-card);
    transition: border-color var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        transform var(--motion-fast) ease;
}

:is(.starter-card, .workspace-tool-card, .project-card, .project-overview-card,
    .project-resource-card, .artwork-card, .canvas-card, .notes-card,
    .research-answer):hover {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 24%, var(--border-default));
}

.pixel-notification-item.is-unread {
    border-inline-start: 2px solid var(--pixel-ambient-accent, var(--gold));
}

:is(.pixel-toast--success, .pixel-notification-item[data-type="success"]) {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border-default));
}

:is(.pixel-toast--error, .pixel-notification-item[data-type="error"]) {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border-default));
}

:is(.settings-section-header h3, .workspace-view h1, .projects-view h1,
    .research-view h1, .canvas-view h1, .notes-view h1) {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

:is(.settings-section-header h3, .workspace-view h1, .projects-view h1,
    .research-view h1, .canvas-view h1, .notes-view h1):not(.display-heading) {
    font-family: var(--font-primary);
}

:is(.message-content, .user-text, .research-answer, .project-description) {
    line-height: var(--leading-relaxed);
}

:is(.message-content, .user-text) :is(p, ul, ol, blockquote, table, pre) + :is(p, ul, ol, blockquote, table, pre) {
    margin-top: var(--space-3);
}

:is(.message-content, .user-text) :is(code, .inline-code) {
    font-family: var(--font-code);
}

:is(.message-content, .user-text) :is(h1, h2, h3, h4) {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

:is(.message-content, .user-text) a {
    color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 72%, white);
    text-underline-offset: 2px;
}

.message-content pre,
.user-text pre {
    border-color: var(--border-subtle);
    border-radius: var(--radius-card);
}

.settings-section-header h3,
:is(.workspace-view, .projects-view, .research-view, .canvas-view, .notes-view) h1 {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -.025em;
}

.settings-section-header h3 {
    font-size: var(--text-section-title);
}

:is(.workspace-intro h1, .projects-intro h1, .project-workspace-title h1,
    .artworks-title-group h1, .canvas-library-heading h1, .code-projects-heading h2) {
    font-size: var(--text-page-title);
    font-weight: 600;
    letter-spacing: -.03em;
}

:is(.starter-card, .workspace-tool-card, .project-card, .project-overview-card,
    .project-resource-card, .artwork-card, .canvas-card, .research-answer) {
    border-radius: var(--radius-card);
}

:is(.settings-tab, .settings-row, .setting-row, .setting-row-select) {
    border-radius: var(--radius-sm);
}

/* Keep workspace-specific layouts while giving their surfaces shared tokens. */
.research-view {
    --research-bg: var(--bg);
    --research-surface: var(--surface);
    --research-raised: var(--surface-raised);
    --research-border: var(--border);
    --research-text: var(--text);
    --research-muted: var(--text-secondary);
    --research-gold: var(--gold);
}

.canvas-view,
.code-view {
    background: var(--bg);
    color: var(--text);
}

.canvas-topbar,
.canvas-toolrail,
.canvas-ai-panel,
.canvas-more-menu,
.canvas-library-controls > label,
.canvas-library-controls select,
.canvas-card,
.canvas-secondary-btn {
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text-secondary);
}

.canvas-tools-scroll button.is-active {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 28%, transparent);
    background: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 11%, var(--surface));
    color: var(--text);
}

.canvas-tools-scroll button.is-active i,
.canvas-card-pin {
    color: var(--pixel-ambient-accent, var(--gold));
}

.canvas-editor,
.canvas-stage-column,
.canvas-controls,
.code-editor-pane,
.CodeMirror,
.CodeMirror-gutters {
    background-color: var(--surface-raised);
}

.canvas-card:hover,
.code-project-card:hover {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 42%, var(--border));
}

.code-tab.is-active {
    border-top-color: var(--pixel-ambient-accent, var(--gold));
    background: var(--surface-raised);
}

.code-tab-dirty {
    color: var(--pixel-ambient-accent, var(--gold));
}

.code-bottom-tabs [data-bottom-tab].is-active::after {
    background: var(--pixel-ambient-accent, var(--gold));
}

/* Creator profile is a standalone Pixel surface and shares the same type and radius scale. */
.creator-nav {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.creator-hero h1 {
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: -.04em;
}

.section-heading h2 {
    font-size: var(--text-section-title);
    font-weight: 600;
    letter-spacing: -.02em;
}

:is(.nav-btn, .nav-chat-link) {
    border-radius: var(--radius-sm);
}

:is(.project-item, .social-profile) {
    border-radius: var(--radius-card);
    border-color: var(--border);
}

.project-item:hover,
.artwork-access:hover {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 30%, var(--border));
}

.about-content blockquote {
    border-left-color: var(--pixel-ambient-accent, var(--gold));
}

:is(.settings-content, .settings-nav, .command-palette-results, .global-search-results) {
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
    scrollbar-width: thin;
}

:is(.starter-card, .workspace-card, .project-card, .artwork-card, .notes-card, .research-answer) {
    border-color: var(--border);
}

:is(.starter-card, .workspace-card, .project-card, .artwork-card, .notes-card):hover {
    border-color: color-mix(in srgb, var(--pixel-ambient-accent, var(--gold)) 22%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms;
        --motion-base: 1ms;
        --motion-normal: 1ms;
        --motion-medium: 1ms;
        --motion-slow: 1ms;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Keep search controls clean and borderless across every workspace. */
:is(
    input[type="search"],
    .user-chat-search-input,
    .sidebar-search-box,
    .artworks-search-box input,
    .notes-global-search,
    .projects-search,
    .project-resources-header input[type="search"],
    .research-search,
    .whiteboard-search,
    .canvas-library-controls > label,
    .global-search-input-row,
    .command-palette-search-row,
    .search-field
) {
    border-color: transparent !important;
    box-shadow: none !important;
}

:is(input[type="search"], .user-chat-search-input, .artworks-search-box input) {
    border: 0 !important;
    outline: 0 !important;
}

:is(.sidebar-search-box, .artworks-search-box, .notes-global-search,
    .projects-search, .research-search, .whiteboard-search,
    .canvas-library-controls > label, .search-field):focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
}