/* The layout themes every page: signed-in pages use the account's choice from Personalizacja,
   guest pages the device setting. Module sheets add their own Calm Dark blocks. Printed documents keep Calm Blue. */
@media screen {
    /* Keep the familiar navy navigation above the light workspace. */
    html[data-workspace-theme="light"] .is-authenticated .app-bar {
        --sidebar-text: #f8fafc;
        --sidebar-muted: var(--shell-tint);
        --sidebar-line: color-mix(in srgb, var(--shell-tint) 16%, transparent);
        --focus-ring-color: var(--accent);
        --focus: 0 0 0 3px var(--focus-ring-color);
        background:
            radial-gradient(circle at 2% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 22rem),
            linear-gradient(100deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
        border-bottom-color: var(--sidebar-line);
    }

    /* Jasne napisy tylko tam, gdzie rząd modułów leży na granacie. Do 860 px rząd
       zjeżdża do białej szuflady pod paskiem i zostaje przy kolorach z app-bar.css. */
    @media (min-width: 861px) {
        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger {
            color: color-mix(in srgb, var(--shell-tint) 57%, #fff);
        }

        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger:hover,
        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger:focus-visible {
            background: rgba(255, 255, 255, .1);
            color: var(--sidebar-text);
        }

        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger.is-open {
            background: rgba(255, 255, 255, .15);
            color: var(--sidebar-text);
        }

        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger.is-active {
            color: var(--sidebar-text);
            box-shadow: inset 0 -2px 0 var(--accent);
        }

        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger.is-disabled,
        html[data-workspace-theme="light"] .is-authenticated .app-bar-trigger.is-disabled:hover {
            background: transparent;
            color: color-mix(in srgb, var(--shell-tint) 45%, transparent);
        }
    }

    html[data-workspace-theme="light"] .is-authenticated .mobile-nav-toggle.icon-button,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .notification-trigger,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .inbox-toolbar-favorites,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .command-palette-trigger {
        background: rgba(255, 255, 255, .055);
        border-color: var(--sidebar-line);
        color: var(--sidebar-text);
        box-shadow: none;
    }

    html[data-workspace-theme="light"] .is-authenticated .mobile-nav-toggle.icon-button:hover,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .notification-trigger:hover,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .inbox-toolbar-favorites:hover,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .command-palette-trigger:hover {
        background: rgba(255, 255, 255, .1);
        border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    }

    html[data-workspace-theme="light"] .is-authenticated .app-bar-account .account-trigger:focus-visible {
        box-shadow: var(--focus);
    }

    /* Listy rozwijane paska należą do treści, nie do granatu: własna paleta i pierścień. */
    html[data-workspace-theme="light"] .is-authenticated .app-bar-panel,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .account-popover,
    html[data-workspace-theme="light"] .is-authenticated .app-bar .notification-popover {
        --focus-ring-color: var(--brand);
        --focus: 0 0 0 3px var(--focus-ring-color);
    }
        --focus-ring-color: var(--brand);
        --focus: 0 0 0 3px var(--focus-ring-color);
    }

    html[data-workspace-theme="dark"] {
        color-scheme: dark;
        --canvas: #11151c;
        --panel: #191f29;
        --panel-soft: #222b37;
        --surface-subtle: var(--panel-soft);
        --surface-hover: #283343;
        --ink: #e8edf4;
        --ink-soft: #cbd5e3;
        --muted: #a5b0c0;
        --muted-strong: #bdc8d8;
        --placeholder: #a5b0c0;
        --line: #344154;
        --line-strong: #718097;
        --line-hover: #92a3ba;
        /* Existing brand tokens are also used for small text; filled actions use their own pair. */
        --brand: #93c5fd;
        --brand-hover: #bfdbfe;
        --brand-strong: #bfdbfe;
        --brand-soft: #1b304c;
        --brand-line: #466b97;
        --accent: #93c5fd;
        --accent-ink: #bfdbfe;
        --workspace-action-bg: #2563eb;
        --workspace-action-hover: #1d4ed8;
        --workspace-action-ink: #ffffff;
        --workspace-note-bg: #6d28d9;
        --workspace-note-ink: #ffffff;
        --workspace-danger-bg: #b91c1c;
        --sidebar: #191f29;
        --sidebar-deep: #11151c;
        --sidebar-text: var(--ink);
        --sidebar-muted: var(--muted);
        --sidebar-line: var(--line);
        --info: #a9caff;
        --info-soft: #1b304c;
        --info-line: #466b97;
        --info-hover: #244064;
        --process: #81d7cc;
        --process-soft: #183631;
        --process-line: #3c756c;
        --success: #8cd8b1;
        --success-soft: #1b352a;
        --success-line: #3f7459;
        --warning: #edc681;
        --warning-soft: #3b3020;
        --warning-line: #826b40;
        --danger: #f2a6ad;
        --danger-soft: #40262d;
        --danger-line: #855361;
        --note: #c5b2f4;
        --note-soft: #302842;
        --note-line: #74618e;
        --neutral-soft: #222b37;
        --neutral-ink: #bdc8d8;
        --neutral-line: #56657b;
        --focus-ring-color: #93c5fd;
        --focus: 0 0 0 3px var(--focus-ring-color);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .12);
        --shadow-sm: 0 8px 24px rgba(0, 0, 0, .2);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, .36);
        --module-shadow: var(--shadow-sm);
        --module-shadow-hover: var(--shadow-lg);
        scrollbar-color: var(--line-strong) var(--canvas);
    }

    html[data-workspace-theme="dark"] .is-authenticated .app-bar {
        background: var(--panel);
    }

    /* Pasek w ciemnym motywie leży na panelu, więc obwódka licznika idzie za nim. */
    html[data-workspace-theme="dark"] .is-authenticated .app-bar .notification-unread-badge {
        border-color: var(--panel);
    }

    html[data-workspace-theme="dark"] .is-authenticated .app-bar-link.is-active {
        background: var(--brand-soft);
    }

    html[data-workspace-theme="dark"] .is-authenticated .app-bar-link:hover {
        background: var(--panel-soft);
    }

    html[data-workspace-theme="dark"] .is-authenticated .app-bar-nav {
        scrollbar-color: var(--line-strong) transparent;
    }

    html[data-workspace-theme="dark"] .button:not(.secondary):not(.danger),
    html[data-workspace-theme="dark"] .is-authenticated .account-avatar,
    html[data-workspace-theme="dark"] .inbox-bulk-summary-icon {
        border-color: var(--workspace-action-bg);
        background: var(--workspace-action-bg);
        color: var(--workspace-action-ink);
        box-shadow: none;
    }

    html[data-workspace-theme="dark"] .button:not(.secondary):not(.danger):hover {
        border-color: var(--workspace-action-hover);
        background: var(--workspace-action-hover);
        color: var(--workspace-action-ink);
    }

    html[data-workspace-theme="dark"] .button.danger:hover {
        border-color: var(--danger-line);
        background: var(--danger-soft);
        color: var(--danger);
    }

    html[data-workspace-theme="dark"] :is(input, select, textarea) {
        color-scheme: dark;
    }

    html[data-workspace-theme="dark"] :is(input, textarea)::placeholder {
        color: var(--placeholder);
        opacity: 1;
    }

    html[data-workspace-theme="dark"] input::file-selector-button {
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: var(--panel-soft);
        color: var(--ink);
        padding: 5px 8px;
        margin-right: 9px;
    }

    html[data-workspace-theme="dark"] :is(input, textarea):autofill {
        background-color: var(--panel-soft);
        color: var(--ink);
        -webkit-text-fill-color: var(--ink);
        box-shadow: inset 0 0 0 1000px var(--panel-soft);
    }

    /* Opaque surfaces replace the previous white translucency, including sticky controls. */
    html[data-workspace-theme="dark"] .filter,
    html[data-workspace-theme="dark"] .conversation-activity-event-content,
    html[data-workspace-theme="dark"] .message-star-button,
    html[data-workspace-theme="dark"] .conversation-side-card-header,
    html[data-workspace-theme="dark"] .conversation-composer-panel:not(.conversation-composer-panel--note),
    html[data-workspace-theme="dark"] .conversation-operational-summary,
    html[data-workspace-theme="dark"] .conversation-activity-disclosure,
    html[data-workspace-theme="dark"] .conversation-history-disclosure,
    html[data-workspace-theme="dark"] .conversation-composer-actions,
    html[data-workspace-theme="dark"] .conversation-composer-panel .reply-actions,
    html[data-workspace-theme="dark"] .conversation-composer-mode-tab kbd,
    html[data-workspace-theme="dark"] .conversation-waiting-request-scope {
        border-color: var(--line);
        background: var(--panel);
    }

    /* Liczniki filtrów. Aktywny filtr kładzie liczbę na jasnym dymku, który w ciemnym motywie gasi
       jasną cyfrę, więc tu dymek dostaje najgłębsze tło, a liczba zostaje w kolorze filtra. Nieaktywne
       liczniki mają już ciemne --neutral-soft. Kolumna kolejek i menu „Kolejka” nie mają dymków, więc zostają przezroczyste. */
    html[data-workspace-theme="dark"] .filter.active .filter-count {
        background: var(--canvas);
    }

    html[data-workspace-theme="dark"] :is(.inbox-queue-rail, .inbox-compact-queue-menu) .filter.active .filter-count {
        background: transparent;
    }

    /* Kolumna kolejek ma kafelki bez ramki, a menu „Kolejka” płaskie wiersze; ogólne ciemne tło filtrów dałoby im ramkę. */
    html[data-workspace-theme="dark"] .inbox-queue-rail .filter:not(.active, :hover) {
        border-color: transparent;
        background: var(--panel);
    }

    /* Cień najechania ginie na ciemnym tle, więc kafelek jaśnieje. */
    html[data-workspace-theme="dark"] .inbox-queue-rail .filter:not(.active):hover {
        background: var(--panel-soft);
    }

    html[data-workspace-theme="dark"] .inbox-compact-queue-menu .filter:not(.active, :hover) {
        border-color: transparent;
        background: transparent;
    }

    html[data-workspace-theme="dark"] .inbox-search-form,
    html[data-workspace-theme="dark"] .inbox-active-filters,
    html[data-workspace-theme="dark"] .conversation-thread-context .conversation-activity-log,
    html[data-workspace-theme="dark"] .conversation-thread-context .conversation-history-disclosure > .timeline,
    html[data-workspace-theme="dark"] body.route-scope-claims .form-fieldset {
        background: var(--panel-soft);
    }

    html[data-workspace-theme="dark"] .conversation-layout--chat .conversation-message-list {
        background: var(--canvas);
    }

    html[data-workspace-theme="dark"] .message-star-button:hover,
    html[data-workspace-theme="dark"] .message-star-button.is-starred {
        border-color: var(--warning-line);
        background: var(--warning-soft);
        color: var(--warning);
    }

    html[data-workspace-theme="dark"] .formatted-text__drop-hint {
        background: var(--brand-soft);
        color: var(--brand-hover);
    }
    html[data-workspace-theme="dark"] .conversation-forward-link,
    html[data-workspace-theme="dark"] .inbox-bulk-toolbar {
        background: var(--brand-soft);
        box-shadow: none;
    }

    html[data-workspace-theme="dark"] .inbox-page .conversation-row,
    html[data-workspace-theme="dark"] .inbox-page .conversation-row.shared,
    html[data-workspace-theme="dark"] .inbox-page .conversation-row.personal {
        border-color: var(--line);
    }

    html[data-workspace-theme="dark"] .conversation-message-list .message.agent .message-bubble {
        border-color: var(--brand-line);
        background: var(--brand-soft);
    }

    html[data-workspace-theme="dark"] .conversation-activity-sla--at-risk {
        color: var(--warning);
    }

    html[data-workspace-theme="dark"] .conversation-swipe-action,
    html[data-workspace-theme="dark"] .conversation-list-item--swipeable.is-committing {
        background: #196044;
        color: #ffffff;
    }

    html[data-workspace-theme="dark"] .conversation-swipe-action:hover { background: #164e3b; }

    html[data-workspace-theme="dark"] .inbox-swipe-toast {
        border-color: var(--line-strong);
        background: var(--panel-soft);
        color: var(--ink);
    }

    html[data-workspace-theme="dark"] .inbox-swipe-toast.is-error {
        border-color: var(--danger-line);
        background: var(--danger-soft);
    }

    html[data-workspace-theme="dark"] .notification-entry--warning .notification-entry-icon {
        background: var(--warning-soft);
        color: var(--warning);
    }

    /* The writing surface follows the app; no image filters or edits to message HTML. */
    html[data-workspace-theme="dark"] .formatted-text__toolbar button.is-active,
    html[data-workspace-theme="dark"] .formatted-text__more-toggle[aria-expanded="true"] {
        border-color: var(--brand-line);
        background: var(--brand-soft);
        color: var(--brand-hover);
    }

    html[data-workspace-theme="dark"] .formatted-text__surface .tiptap ::selection {
        background: var(--info-hover);
        color: var(--ink);
    }

    /* Preserve the meaning of tag colors without bright pastel pills. */
    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="slate"] {
        --tag-background: var(--neutral-soft); --tag-border: var(--neutral-line);
        --tag-ink: var(--neutral-ink); --tag-dot: var(--neutral-ink);
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="blue"] {
        --tag-background: var(--info-soft); --tag-border: var(--info-line);
        --tag-ink: var(--info); --tag-dot: var(--info);
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="cyan"] {
        --tag-background: #19363c; --tag-border: #467884;
        --tag-ink: #8bd5e4; --tag-dot: #8bd5e4;
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="green"] {
        --tag-background: var(--success-soft); --tag-border: var(--success-line);
        --tag-ink: var(--success); --tag-dot: var(--success);
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="amber"] {
        --tag-background: var(--warning-soft); --tag-border: var(--warning-line);
        --tag-ink: var(--warning); --tag-dot: var(--warning);
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="orange"] {
        --tag-background: #402e22; --tag-border: #886445;
        --tag-ink: #efba91; --tag-dot: #efba91;
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="red"] {
        --tag-background: var(--danger-soft); --tag-border: var(--danger-line);
        --tag-ink: var(--danger); --tag-dot: var(--danger);
    }

    html[data-workspace-theme="dark"] :is(.conversation-tag, .tag-color-option)[data-tag-color="violet"] {
        --tag-background: var(--note-soft); --tag-border: var(--note-line);
        --tag-ink: var(--note); --tag-dot: var(--note);
    }
}

@media screen {
    html[data-workspace-theme="dark"] .claim-workspace :is(.claim-product, .claim-meta, .claim-prose, .workflow-timeline) a:not(.button) {
        text-decoration: underline;
        text-underline-offset: .15em;
    }
}