/* ====================================================================
   Live-Scanner — Gruppe 4 (STEP_04_SCANNER.md)

   Diese Datei ersetzt zwei Quellen, die BEIDE ausserhalb jeder Schicht
   standen und damit `tokens`, `components` und `channels` vollstaendig
   geschlagen haben:

     - der <style>-Block in templates/channels/scanner.html   (1248 Zeilen)
     - static/css/scanner_chart.css                           (1890 Zeilen)

   Solange das so war, blieb jede Aenderung an den neuen Blaettern
   wirkungslos. Genau dasselbe ist in diesem Projekt schon zweimal
   passiert, mit theme.css und mit journal.html.

   Die 276 hartkodierten Farben stehen jetzt auf Rollen. Die Zuordnung ist
   SEMANTISCH, nicht literal: das Smaragdgruen (#10B981) war hier die
   Bedienfarbe, kein Kursgruen — es ist grau geworden (STIL.md R2). Nur
   das echte Kurs-Gruen und -Rot ist --signal-up / --signal-down.

   Bewegung: keine. STIL.md §9.3 — im Scanner gibt es keine Uebergaenge,
   nicht "kuerzere". Erlaubt bleibt --dur-instant beim Ueberfahren.
   ==================================================================== */

@layer channels {

    /* ============================================
       Scanner — Redesign V2
       Industrial Utilitarian + Markdown + Expand
       ============================================ */

    /* ── Shell ── */
    .scanner-shell {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        min-height: 0;
        position: relative;
    }

    /* ── Mode Selection Start Screen ── */
    .scanner-mode-screen {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal-backdrop);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-primary);

    }

    .scanner-mode-screen[hidden] {
        display: none;
    }

    .scanner-mode-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 36px;
        max-width: 740px;
        width: 100%;
        padding: 0 24px;
    }

    .scanner-mode-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .scanner-mode-title {
        font-family: var(--font-ui);
        font-size: 22px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--text-primary);

    }

    .scanner-mode-subtitle {
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);

    }

    .scanner-mode-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
    }

    .scanner-mode-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 28px 22px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;

        text-align: left;
    }

    .scanner-mode-card:hover {
        border-color: var(--signal-up-line);
        background: var(--bg-tertiary);
        transform: translateY(-2px);
    }

    .scanner-mode-card:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }

    .scanner-mode-card-label {
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--text-primary);

    }

    .scanner-mode-card-desc {
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: var(--font-weight-regular);
        line-height: 1.6;
        color: var(--ink-muted);
    }

    @media (max-width: 600px) {
        .scanner-mode-cards {
            grid-template-columns: 1fr;
        }
    }

    /* ── Mode Dropdown in Command Bar ── */
    .scanner-field--mode {
        margin-left: auto;
        min-width: 140px;
        max-width: 180px;
    }

    .scanner-dropdown--mode .scanner-dropdown-menu {
        width: max-content;
        min-width: 100%;
        right: 0;
        left: auto;
        transform-origin: top right;
    }

    /* ── Command Bar ── */
    .scanner-cmd-bar {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        padding: 12px 16px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    /* ── Fields ── */
    .scanner-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .scanner-field > span {
        font-family: var(--font-label);
        font-size: 10px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-muted);
        white-space: nowrap;
    }

    .scanner-field input {
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        padding: 8px 12px;
        font-family: var(--font-label);
        font-size: 13px;
        letter-spacing: 0.02em;

    }

    .scanner-field input:hover {
        border-color: var(--border-strong);
        background: var(--bg-active);
    }

    .scanner-field input:focus {
        outline: none;
        border-color: var(--border-focus);
    }

    /* ── Dropdown Controls ── */
    .scanner-dropdown {
        position: relative;
        min-width: 0;
    }

    .scanner-dropdown-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        padding: 8px 12px;
        font-family: var(--font-label);
        font-size: 13px;
        letter-spacing: 0.02em;
        cursor: pointer;

    }

    .scanner-dropdown-trigger:hover {
        border-color: var(--border-strong);
        background: var(--bg-active);
    }

    .scanner-dropdown-trigger:focus-visible,
    .scanner-dropdown-trigger.is-open {
        outline: none;
        border-color: var(--border-focus);
    }

    .scanner-dropdown-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .scanner-dropdown-caret {
        color: var(--ink-muted);

        flex-shrink: 0;
    }

    .scanner-dropdown-trigger.is-open .scanner-dropdown-caret {
        transform: rotate(180deg);
        color: var(--signal-up);
    }

    .scanner-dropdown-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: var(--z-local);
        min-width: 100%;
        padding: 6px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--line);
        background: var(--surface-panel);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) scale(0.985);
        transform-origin: top left;

    }

    .scanner-dropdown--interval .scanner-dropdown-menu {
        width: max-content;
        min-width: 100%;
    }

    .scanner-dropdown--session .scanner-dropdown-menu {
        width: max(280px, 100%);
        max-width: min(420px, calc(100vw - 48px));
        max-height: 280px;
        overflow: auto;
    }

    .scanner-dropdown-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);

    }

    .scanner-dropdown-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--ink-secondary);
        cursor: pointer;
        font-family: var(--font-label);
        font-size: 11px;
        letter-spacing: normal;

        text-align: left;

        user-select: none;
    }

    .scanner-dropdown-item + .scanner-dropdown-item {
        margin-top: 4px;
    }

    .scanner-dropdown-item:hover {
        background: var(--surface-raised);
        border-color: var(--line-subtle);
        color: var(--ink-primary);
    }

    .scanner-dropdown-item.is-active {
        background: var(--signal-up-surface);
        border-color: var(--signal-up-surface);
        color: var(--ink-primary);
    }

    .scanner-dropdown-item--session {
        align-items: flex-start;
        flex-direction: column;
        letter-spacing: 0.03em;

    }

    .scanner-dropdown-item-main {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        font-size: 11px;

        letter-spacing: normal;
    }

    .scanner-dropdown-item-main::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--control-selected);
        flex-shrink: 0;
    }

    .scanner-dropdown-item.is-active .scanner-dropdown-item-main::before {
        background: var(--signal-up);

    }

    .scanner-dropdown-item-sub {
        width: 100%;
        font-family: var(--font-label);
        font-size: 10px;
        letter-spacing: 0.02em;
        color: var(--ink-muted);
    }

    .scanner-dropdown-item.is-active .scanner-dropdown-item-sub {
        color: var(--ink-secondary);
    }

    .scanner-field--ticker { min-width: 110px; max-width: 160px; }
    .scanner-field--interval { min-width: 86px; max-width: 128px; }
    .scanner-field--session { flex: 1; min-width: 180px; }

    /* ── Status Indicator ── */
    .scanner-status {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-family: var(--font-label);
        font-size: 11px;
        letter-spacing: normal;
        color: var(--ink-secondary);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .scanner-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink-muted);
        flex-shrink: 0;

    }

    .scanner-status--live::before {
        background: var(--signal-up);

    }

    .scanner-status--error::before {
        background: var(--signal-down);
    }

    /* ── Buttons ── */
    .scanner-btn {
        padding: 8px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: var(--font-weight-medium);

        letter-spacing: normal;
        cursor: pointer;

        background: transparent;
        color: var(--ink-secondary);
        white-space: nowrap;
    }

    .scanner-btn:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
        color: var(--text-primary);
    }

    .scanner-btn:disabled {
        opacity: 0.25;
        cursor: not-allowed;
        pointer-events: none;
    }

    .scanner-btn--start {
        background: transparent;
        border-color: var(--signal-up-line);
        color: var(--signal-up);
    }

    .scanner-btn--start:hover {
        background: var(--signal-up-surface);
        border-color: var(--signal-up-line);
    }

    .scanner-btn--stop {
        color: var(--signal-down);
        border-color: var(--signal-down-line);
    }

    .scanner-btn--stop:hover {
        background: var(--signal-down-surface);
        border-color: var(--signal-down-line);
        color: var(--signal-down);
    }

    .scanner-btn--close {
        background: transparent;
        border-color: var(--signal-down-line);
        color: var(--signal-down);
    }

    .scanner-btn--close:hover {
        background: var(--signal-down-surface);
        border-color: var(--signal-down);
        color: var(--signal-down);
    }

    .scanner-btn--soft {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--text-primary);
    }

    .scanner-btn--soft:hover {
        background: var(--surface-selected);
    }

    .scanner-btn--icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        color: var(--ink-muted);
        border-color: transparent;
    }

    .scanner-btn--icon:hover {
        color: var(--text-primary);
        background: var(--surface-hover);
        border-color: var(--border);
    }

    .scanner-btn--icon .scanner-icon-collapse { display: none; }
    .scanner-btn--icon.is-expanded .scanner-icon-expand { display: none; }
    .scanner-btn--icon.is-expanded .scanner-icon-collapse { display: block; }

    /* ── Grid ── */
    .scanner-grid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 10px;
        flex: 1;
        min-height: 0;

    }

    /* ── Expand / Collapse ── */
    .scanner-grid.chat-expanded {
        grid-template-columns: 0fr 1fr;
    }

    .scanner-panel--terminal {

        min-width: 0;
        overflow: hidden;
    }

    .scanner-grid.chat-expanded .scanner-panel--terminal {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ── Centered Chat Cloud (Expanded) ── */
    .scanner-chat-stream {
        display: flex;
        flex-direction: column;
        width: 100%;

    }

    .scanner-grid.chat-expanded .scanner-chat-stream {
        max-width: 900px;
        margin: 0 auto;
        width: 100%;
    }

    .scanner-grid.chat-expanded .scanner-chat-compose {
        align-items: center;
    }

    .scanner-grid.chat-expanded .scanner-chat-compose-inner {
        width: 100%;
        max-width: 900px;
        flex: none;
        margin: 0 auto;
    }

    .scanner-grid.chat-expanded .scanner-chat-context {
        width: 100%;
        max-width: 900px;
        justify-content: flex-end;

    }

    .scanner-grid.chat-expanded .scanner-placeholder {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;

    }

    /* ── Panels ── */
    .scanner-panel {
        display: flex;
        flex-direction: column;
        background: var(--surface-panel);

        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
        min-height: 0;
    }

    /* ── Panel Header ── */
    .scanner-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-raised);
        gap: 8px;
        flex-shrink: 0;
    }

    .scanner-panel-title {
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--text-primary);
    }

    .scanner-panel-actions {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    /* ── Terminal Area ── */
    .scanner-terminal {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
        background: var(--bg-primary);
        font-family: var(--font-label);
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 0.02em;
    }

    /* ── Chat Log ── */
    .scanner-chat-log {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
        background: var(--bg-primary);
        font-family: var(--font-label);
        font-size: 13px;
        line-height: 1.6;
    }

    /* ── Chat Compose ── */
    .scanner-chat-compose {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
        border-top: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .scanner-chat-context {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;

    }

    .scanner-chat-context__label {
        font-size: 10px;

        letter-spacing: normal;
        color: var(--ink-muted);
        font-family: var(--font-label);
        flex-shrink: 0;
    }

    .scanner-chat-context__slider-wrap {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .scanner-chat-context__range {
        -webkit-appearance: none;
        appearance: none;
        width: 110px;
        height: 4px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        outline: none;
        cursor: pointer;

    }

    .scanner-chat-context__range:hover {
        border-color: var(--border-focus);
    }

    .scanner-chat-context__range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--text-primary);
        border: 2px solid var(--bg-secondary);
        cursor: pointer;

    }

    .scanner-chat-context__range::-webkit-slider-thumb:hover {

        transform: scale(1.1);
    }

    .scanner-chat-context__range::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--text-primary);
        border: 2px solid var(--bg-secondary);
        cursor: pointer;

    }

    .scanner-chat-context__range::-moz-range-thumb:hover {

        transform: scale(1.1);
    }

    .scanner-chat-context__range::-moz-range-track {
        height: 4px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    .scanner-chat-context__value {
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: var(--font-weight-regular);
        color: var(--text-primary);
        min-width: 28px;
        text-align: right;
        letter-spacing: 0.02em;
    }

    .scanner-chat-compose-inner {
        display: flex;
        gap: 8px;
        flex: 1;
        max-width: 100%;

    }

    .scanner-chat-compose textarea {
        resize: vertical;
        min-height: 36px;
        max-height: 160px;
        flex: 1;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        padding: 8px 12px;
        font-family: var(--font-label);
        font-size: 13px;
        letter-spacing: 0.02em;

    }

    .scanner-chat-compose textarea:focus {
        outline: none;
        border-color: var(--border-focus);
    }

    /* ── Placeholder ── */
    .scanner-placeholder {
        display: grid;
        gap: 6px;
        color: var(--ink-muted);
        font-size: 12px;
        line-height: 1.6;
        letter-spacing: 0.02em;

    }

    /* ── Scan Blocks ── */
    .scanner-block {
        border: 1px solid var(--border);
        border-left: 1px solid var(--signal-up-line);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        padding: 16px;
        margin-bottom: 14px;
        background: var(--surface-raised);

    }

    /* Persistent live strip: data-only auto scans update this in place (no analysis text). */
    .scanner-block.scanner-live-block {
        border-left-color: var(--accent);
        background: var(--surface-raised);

    }
    .scanner-block.scanner-live-block .scanner-block-title {
        color: var(--accent);
    }

    /* Price alert fired — prominent attention block. */
    .scanner-block.scanner-alert-triggered {
        border-left-color: var(--signal-warn);
        background: var(--signal-warn-surface);

    }
    .scanner-block.scanner-alert-triggered .scanner-block-title {
        color: var(--signal-warn);
    }

    .scanner-block-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--signal-up-surface);
    }

    .scanner-block-title {
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--signal-up);
    }

    .scanner-block-meta {
        font-family: var(--font-label);
        font-size: 10px;
        letter-spacing: 0.02em;
        color: var(--ink-muted);
        white-space: nowrap;
    }

    /* ── Current Price Display ── */
    .scanner-price-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 12px;
        padding: 10px 14px;
        background: var(--surface-raised);
        border: 1px solid var(--signal-up-surface);
        border-radius: var(--radius-md);
    }
    .scanner-price-ticker {
        font-family: var(--font-label);
        font-size: 10px;
        letter-spacing: normal;
        color: var(--ink-muted);

        flex-shrink: 0;
        padding-right: 4px;
        border-right: 1px solid var(--line);
        margin-right: 2px;
    }
    .scanner-price-value {
        font-family: var(--font-ui);
        font-size: 30px;
        font-weight: var(--font-weight-regular);
        letter-spacing: 0.03em;
        color: var(--text-primary);
        line-height: 1;
        flex: 1;
    }
    .scanner-price-currency {
        font-family: var(--font-label);
        font-size: 10px;
        letter-spacing: normal;
        color: var(--ink-muted);

        align-self: center;
    }
    .scanner-price-ts {
        font-family: var(--font-label);
        font-size: 10px;
        letter-spacing: normal;
        color: var(--ink-muted);
        align-self: center;
        margin-left: 6px;
    }

    /* ── Typing Indicator ── */
    .scanner-typing-bubble {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 14px 18px;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-left: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        width: fit-content;
    }
    .scanner-typing-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--control-selected);

    }
    /* ── Indicators Grid ── */
    .scanner-indicators {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 6px;
        margin-bottom: 14px;
    }

    .scanner-ind {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 6px 10px;
        background: var(--surface-raised);
        border: 1px solid var(--line-subtle);
        border-radius: var(--radius-md);
        font-family: var(--font-label);
        font-size: 11px;
        line-height: 1.4;
    }

    .scanner-ind-label {
        color: var(--ink-muted);
        font-size: 10px;

        letter-spacing: normal;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .scanner-ind-value {
        color: var(--text-primary);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Analysis (Markdown) ── */
    .scanner-analysis {
        font-size: 13px;
        line-height: 1.7;
        color: var(--text-primary);
        letter-spacing: 0.02em;
    }

    .scanner-analysis h1 {
        font-size: 18px;
        font-weight: var(--font-weight-regular);
        color: var(--text-primary);
        margin: 14px 0 6px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 6px;
    }

    .scanner-analysis h2 {
        font-size: 15px;
        font-weight: var(--font-weight-regular);
        color: var(--text-primary);
        margin: 12px 0 4px;
    }

    .scanner-analysis h3 {
        font-size: 13px;
        font-weight: var(--font-weight-regular);
        color: var(--text-primary);
        margin: 10px 0 4px;
    }

    .scanner-analysis p {
        margin: 5px 0;
        color: var(--text-primary);
        line-height: 1.65;
    }

    .scanner-analysis strong {
        font-weight: var(--font-weight-regular);
        color: var(--channel-selected, var(--ink-primary));
    }

    .scanner-analysis em {
        font-style: italic;
        color: var(--ink-secondary);
    }

    .scanner-analysis ul,
    .scanner-analysis ol {
        margin: 6px 0;
        padding-left: 18px;
    }

    .scanner-analysis li {
        margin: 3px 0;
        color: var(--text-primary);
        line-height: 1.55;
    }

    .scanner-analysis .metric-line {
        display: block;
        margin: 7px 0;
        line-height: 1.64;
    }

    .scanner-analysis .metric-summary {
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .scanner-analysis .metric-label {
        font-weight: var(--font-weight-regular);
        color: var(--text-normal, var(--ink-primary));
    }

    .scanner-analysis .metric-value {
        font-weight: var(--font-weight-regular);
    }

    .scanner-analysis .metric-positive { color: var(--signal-up); }
    .scanner-analysis .metric-negative { color: var(--signal-down); }
    .scanner-analysis .metric-neutral  { color: var(--signal-warn); }

    /* Streaming cursor */
    .scanner-cursor {
        display: inline-block;
        width: 2px;
        height: 1em;
        background: var(--signal-up);
        margin-left: 2px;
        vertical-align: text-bottom;

    }

    /* ── Chat Bubbles ── */
    .scanner-chat-bubble {
        max-width: 90%;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        line-height: 1.6;
        font-size: 13px;
        color: var(--text-primary);
        letter-spacing: 0.02em;
    }

    .scanner-chat-bubble-user {
        margin-left: auto;
        background: var(--signal-up-surface);
        border: 1px solid var(--signal-up-surface);
        border-right: 1px solid var(--signal-up);
        white-space: pre-wrap;
    }

    .scanner-chat-bubble-assistant {
        margin-right: auto;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-left: 1px solid var(--line-strong);
    }

    /* Markdown inside chat bubbles */
    .scanner-chat-bubble-assistant h1 { font-size: 17px; font-weight: var(--font-weight-regular); color: var(--text-primary); margin: 10px 0 5px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
    .scanner-chat-bubble-assistant h2 { font-size: 15px; font-weight: var(--font-weight-regular); color: var(--text-primary); margin: 10px 0 4px; }
    .scanner-chat-bubble-assistant h3 { font-size: 13px; font-weight: var(--font-weight-regular); color: var(--text-primary); margin: 8px 0 3px; }
    .scanner-chat-bubble-assistant p   { margin: 4px 0; line-height: 1.65; }
    .scanner-chat-bubble-assistant strong { font-weight: var(--font-weight-regular); color: var(--channel-selected, var(--ink-primary)); }
    .scanner-chat-bubble-assistant em  { font-style: italic; color: var(--ink-secondary); }
    .scanner-chat-bubble-assistant ul,
    .scanner-chat-bubble-assistant ol  { margin: 6px 0; padding-left: 18px; }
    .scanner-chat-bubble-assistant li  { margin: 3px 0; line-height: 1.55; }

    .scanner-chat-bubble-assistant .metric-line    { display: block; margin: 7px 0; line-height: 1.64; }
    .scanner-chat-bubble-assistant .metric-summary { margin-top: 8px; margin-bottom: 10px; }
    .scanner-chat-bubble-assistant .metric-label   { font-weight: var(--font-weight-regular); color: var(--text-normal, var(--ink-primary)); }
    .scanner-chat-bubble-assistant .metric-value   { font-weight: var(--font-weight-regular); }
    .scanner-chat-bubble-assistant .metric-positive { color: var(--signal-up); }
    .scanner-chat-bubble-assistant .metric-negative { color: var(--signal-down); }
    .scanner-chat-bubble-assistant .metric-neutral  { color: var(--signal-warn); }
    .scanner-chat-bubble-assistant .scanner-cursor  { background: var(--control-selected); }

    /* ── Error Block ── */
    .scanner-block.scanner-error {
        border-color: var(--signal-down-line);
        border-left-color: var(--signal-down);
        background: var(--signal-down-surface);
    }

    .scanner-block.scanner-error .scanner-block-title {
        color: var(--signal-down);
    }

    /* ── Table (from markdown) ── */
    .scanner-table-wrap {
        overflow-x: auto;
        margin: 12px 0;
        border-radius: var(--radius-md);
        border: 1px solid var(--line);
    }

    .scanner-table-wrap table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .scanner-table-wrap thead tr {
        background: var(--scrim);
    }

    .scanner-table-wrap th {
        padding: 10px 14px;
        text-align: left;
        color: var(--ink-muted);
        font-weight: var(--font-weight-regular);
        font-size: 10px;

        letter-spacing: normal;
        border-bottom: 1px solid var(--line);
    }

    .scanner-table-wrap td {
        padding: 10px 14px;
        color: var(--text-primary);
        border-bottom: 1px solid var(--line-subtle);
    }

    .scanner-table-wrap tbody tr:hover td {
        background: var(--surface-raised);
    }

    /* ── Custom Confirm Modal ── */
    .scanner-confirm-overlay {
        position: fixed;
        inset: 0;
        background: var(--surface-panel);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-modal);

    }

    .scanner-confirm-overlay[hidden] {
        display: none;
    }

    .scanner-confirm-dialog {
        background: var(--bg-secondary);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 24px 24px 20px;
        width: 300px;
        display: flex;
        flex-direction: column;
        gap: 16px;

    }

    .scanner-confirm-icon {
        font-size: 20px;
        color: var(--signal-warn);
        line-height: 1;
    }

    .scanner-confirm-msg {
        color: var(--text-primary);
        font-family: var(--font-label);
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
    }

    .scanner-confirm-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 4px;
    }

    /* ── Abgelaufene TradingView-Sitzung ─────────────────────────────── */

    .scanner-auth-overlay {
        position: fixed;
        inset: 0;
        /* Scrim, kein deckendes Panel: der leere Chart dahinter bleibt sichtbar
           und erklaert, warum die Warnung kommt. */
        background: oklch(0% 0 0 / 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: var(--z-modal);
    }

    .scanner-auth-overlay[hidden] {
        display: none;
    }

    .scanner-auth-dialog {
        background: var(--bg-secondary);
        /* Rot statt der gelben Warnfarbe des Confirm-Dialogs: hier laeuft nichts
           weiter, bis jemand handelt. */
        border: 1px solid var(--signal-down-line);
        border-top: 2px solid var(--signal-down);
        border-radius: var(--radius-md);
        padding: 22px 24px 18px;
        max-width: 460px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .scanner-auth-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .scanner-auth-icon {
        inline-size: var(--icon-feature);
        block-size: var(--icon-feature);
        color: var(--signal-down);
        flex: none;
    }

    .scanner-auth-title {
        color: var(--signal-down);
        font-family: var(--font-label);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        margin: 0;
    }

    .scanner-auth-msg {
        color: var(--text-primary);
        font-family: var(--font-label);
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
    }

    .scanner-auth-steps {
        color: var(--text-secondary);
        font-family: var(--font-label);
        font-size: 12px;
        line-height: 1.75;
        margin: 0;
        padding-inline-start: 18px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .scanner-auth-steps code,
    .scanner-auth-steps kbd {
        background: var(--surface-panel);
        border: 1px solid var(--border-strong);
        border-radius: 3px;
        padding: 0 4px;
        font-family: var(--font-mono, monospace);
        font-size: 11px;
    }

    .scanner-auth-steps a {
        color: var(--signal-down);
    }

    .scanner-auth-note {
        background: var(--signal-down-surface);
        border-inline-start: 2px solid var(--signal-down);
        color: var(--text-secondary);
        font-family: var(--font-label);
        font-size: 12px;
        line-height: 1.6;
        margin: 0;
        padding: 8px 10px;
    }

    .scanner-auth-detail {
        color: var(--text-muted, var(--text-secondary));
        font-family: var(--font-mono, monospace);
        font-size: 10px;
        line-height: 1.5;
        margin: 0;
        opacity: 0.75;
        word-break: break-word;
    }

    .scanner-auth-detail:empty {
        display: none;
    }

    .scanner-auth-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 4px;
    }

    /* ── Scrollbar ── */
    .scanner-terminal::-webkit-scrollbar,
    .scanner-chat-log::-webkit-scrollbar {
        width: 3px;
    }

    .scanner-terminal::-webkit-scrollbar-thumb,
    .scanner-chat-log::-webkit-scrollbar-thumb {
        background: var(--surface-hover);
        border-radius: var(--radius-sm);
    }

    .scanner-terminal::-webkit-scrollbar-thumb:hover,
    .scanner-chat-log::-webkit-scrollbar-thumb:hover {
        background: var(--control-selected);
    }

    /* ── Responsive ── */
    @media (max-width: 980px) {
        .scanner-grid {
            grid-template-columns: 1fr;
        }

        .scanner-grid.chat-expanded {
            grid-template-columns: 1fr;
        }

        .scanner-grid.chat-expanded .scanner-panel--terminal {
            display: none;
        }

        .scanner-cmd-bar {
            flex-wrap: wrap;
        }

        .scanner-panel-head {
            flex-wrap: wrap;
        }

        .scanner-indicators {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================
       Scanner Chart V6 — On-Brand Terminal
       ============================================
       Design Identity: matches the platform theme.
       Warm dark surfaces · Emerald #10B981 accent ·
       Squared flat UI (4/8px). Candle + indicator
       colors are a data layer and stay untouched.
       ============================================ */

    /* ── Design Tokens (mapped to theme.css) ── */
    .chart-overlay {






    }

    /* ── Overlay Shell ── */

    .chart-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: radial-gradient(ellipse at top, var(--surface-panel) 0%, var(--surface-canvas) 100%);
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;

    }

    .chart-overlay[hidden] {
        display: none;
    }

    .chart-overlay.visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Top white scanline — identity marker */
    .chart-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--surface-raised) 10%,
            var(--control-selected) 35%,
            var(--control-selected) 50%,
            var(--control-selected) 65%,
            var(--surface-raised) 90%,
            transparent 100%
        );
        z-index: var(--z-sticky);
    }

    .chart-overlay::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            var(--surface-hover),
            transparent
        );
        z-index: var(--z-sticky);

    }

    /* ── Toolbar ── */

    .chart-toolbar {
        height: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        border-bottom: 1px solid var(--line-subtle);
        background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-panel) 100%);
        flex-shrink: 0;
        position: relative;
        z-index: var(--z-local);
    }

    .chart-toolbar__left {
        display: flex;
        align-items: center;
        gap: 9px;
        padding-right: 14px;
        border-right: 1px solid var(--line-subtle);
        align-self: stretch;
        flex-shrink: 0;
    }

    .chart-brand-mark {
        display: none;
        flex: none;
        inline-size: 26px;
        block-size: 26px;
        object-fit: contain;
    }

    .chart-overlay.is-fullscreen .chart-brand-mark {
        display: block;
    }

    .chart-toolbar__ticker-symbol {
        font-family: var(--font-ui);
        font-size: 17px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-primary);
        line-height: 1;
    }

    .chart-toolbar__ticker-price {
        font-family: var(--font-data);
        font-size: 13px;
        font-weight: var(--font-weight-medium);
        color: var(--ink-secondary);
        letter-spacing: 0.02em;

        min-width: 70px;
    }
    .chart-toolbar__price-change {
        font-family: var(--font-data);
        font-size: 10px;
        color: var(--ink-muted);
    }

    .chart-toolbar__center {
        display: flex;
        align-items: center;
        margin-right: auto;
        min-width: 0;
    }

    .chart-toolbar__tools {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .chart-tool-group {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .chart-toolbar__divider {
        width: 1px;
        min-width: 1px;
        height: 22px;
        background: var(--surface-hover);
        margin: 0 9px;
        flex: 0 0 1px;
        align-self: center;
    }

    .chart-toolbar__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        flex-shrink: 0;
    }

    .chart-mode-toggle {
        width: 150px;
    }

    /* ── Tool Buttons ── */

    .chart-tool {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--ink-muted);
        border-radius: var(--radius-control);
        cursor: pointer;

        font-size: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    /* Custom inline-SVG tool icons */
    .chart-tool .ti {
        width: 19px;
        height: 19px;
        display: block;
        pointer-events: none;
    }

    .chart-tool:hover {
        color: var(--ink-primary);
        background: var(--surface-hover);
    }

    .chart-tool:active {
        background: var(--surface-selected);
    }

    .chart-tool.active {
        color: var(--ink-primary);
        background: var(--surface-selected);
    }

    .chart-tool--close:hover {
        color: var(--signal-down);
        background: var(--signal-down-surface);
    }

    .chart-tool--action {
        width: auto;
        height: 32px;
        min-width: 0;
        padding: 0 12px;
        gap: 6px;
        border-radius: var(--radius-control);
        font-family: var(--font-data);
        font-size: 11px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);
        background: var(--surface-raised);
        border: 1px solid var(--line-subtle);
    }

    .chart-tool--action .ti {
        width: 15px;
        height: 15px;
        opacity: 0.9;
    }

    .chart-tool--action:hover {
        color: var(--ink-primary);
        border-color: var(--line-strong);
        background: var(--surface-selected);
    }

    .chart-tool--action:hover .ti {
        color: var(--ink-primary);
        opacity: 1;
    }

    .chart-tool--action:disabled {
        opacity: 0.38;
        cursor: default;
        background: transparent;
    }

    /* TradingView-style per-pane value legend (top-left of each pane). */
    /* Neutral, readable data labels on the chart canvas. */
    .chart-pane-legend {
        position: absolute;
        z-index: var(--z-sticky);
        pointer-events: none;
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-family: var(--font-data);
        font-size: 12px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;

    }

    /* One stacked line (OHLC, then VWAP, then EMA …) */
    .chart-pane-legend .cpl-row {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    /* OHLC row sits slightly larger; indicator rows a touch smaller */
    .chart-pane-legend .cpl-row:first-child {
        font-size: 12px;
        gap: 6px;
    }

    .chart-pane-legend .cpl-row:not(:first-child) {
        font-size: 12px;
    }

    /* Lower-pane (VOL / RSI / TTM subpanes) legends stay compact. */
    .chart-pane-legend.chart-pane-legend--lower,
    .chart-pane-legend.chart-pane-legend--lower .cpl-row,
    .chart-pane-legend.chart-pane-legend--lower .cpl-row:first-child,
    .chart-pane-legend.chart-pane-legend--lower .cpl-row:not(:first-child) {
        font-size: 12px;
        gap: 5px;
    }

    .chart-pane-legend .cpl-tag {
        flex-shrink: 0;
        font: inherit;
        color: var(--ink-secondary);
        background: transparent;
    }

    /* Compact red X used in place of a wide "Abbrechen" label. */
    .chart-tool--cancel-x {
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        color: var(--signal-down);
        font-size: 18px;
        line-height: 36px;
        text-align: center;
        padding: 0;
    }
    .chart-tool--cancel-x:hover {
        background: var(--signal-down-surface);
        border-color: var(--signal-down-line);
    }

    /* Abbrechen button next to Erstellen in alert-create form */
    .chart-alarm-edit__cancel {
        background: transparent;
        border: 1px solid var(--signal-down-line);
        border-radius: var(--radius-chip);
        color: var(--signal-down);
        padding: 8px 18px;
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        cursor: pointer;

        min-width: 120px;
    }
    .chart-alarm-edit__cancel:hover {
        background: var(--signal-down-surface);
        border-color: var(--signal-down);
    }

    .chart-tool i { pointer-events: none; }

    .chart-tool__count {
        position: absolute;
        top: 3px;
        right: 3px;
        min-width: 12px;
        height: 12px;
        padding: 0 3px;
        border-radius: var(--radius-chip);
        background: var(--accent);
        color: var(--accent-ink);
        font-family: var(--font-data);
        font-size: 8px;
        font-weight: var(--font-weight-regular);
        line-height: 12px;
    }

    /* ── Chart Container ── */

    /* `.chart-container` heisst im Chat ein zweites Mal so — dort ist es
       das Diagramm im Verlauf und steht auf `display: none`, bis eines
       kommt (channels/chat.css). Solange scanner_chart.css ausserhalb
       jeder Schicht stand, fiel das nicht auf: es hat `display` nie
       gesetzt, also galt die Regel des Chats auch hier und die
       Chartflaeche war 0 x 0 — die Kerzen wurden gezeichnet, aber auf
       nichts. Seit dem Umzug in dieselbe Schicht muss es dastehen. Die
       Klasse wird nicht umbenannt (4380 Zeilen JavaScript haengen daran),
       deshalb wird die Regel hier auf das Chart-Fenster eingegrenzt. */
    .chart-overlay .chart-container {
        display: block;
    }

    .chart-container {
        flex: 1;
        position: relative;
        overflow: hidden;
        background: var(--surface-panel);
    }

    /* ── Indicator Panel ── */

    .chart-indicator-panel {
        position: absolute;
        top: 56px;
        left: 50%;
        width: 284px;
        max-width: calc(100% - 20px);
        transform: translateX(-50%) translateY(-6px) scale(0.97);
        opacity: 0;
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        z-index: var(--z-dropdown);
        overflow: hidden;

    }
    .chart-indicator-panel[hidden] {
        display: none;
    }

    .chart-indicator-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 10px 8px 12px;
        border-bottom: 1px solid var(--line-subtle);
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-secondary);
    }

    .chart-indicator-panel__list {
        display: grid;
        padding: 6px;
        gap: 2px;
    }

    .chart-indicator-item {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        padding: 0 8px 0 10px;

    }

    .chart-indicator-item:hover {
        background: var(--surface-raised);
        color: var(--ink-secondary);
    }

    .chart-indicator-item.active {
        background: transparent;
        border-color: transparent;
        color: var(--ink-primary);
    }

    .chart-indicator-item__name {
        font-family: var(--font-data);
        font-size: 13px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;

    }

    .chart-indicator-item__toggle {
        width: 28px;
        height: 16px;
        border-radius: 999px;
        background: var(--chart-selected);
        border: 1px solid var(--line-strong);
        position: relative;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-data);
        font-size: 8px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);

    }

    .chart-indicator-item__toggle::after {
        content: '';
        position: absolute;
        left: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--chart-muted);
    }

    .chart-indicator-item.active .chart-indicator-item__toggle {
        background: var(--accent);
        border-color: var(--accent);
    }

    .chart-indicator-item.active .chart-indicator-item__toggle::after {
        content: '';
        transform: translateX(12px);
        background: var(--accent-ink);
    }

    /* Lower indicators share one switch column and a separate reorder column. */
    .chart-indicator-panel__divider {
        height: 1px;
        margin: 5px 8px;
        background: var(--surface-hover);
    }

    .chart-indicator-panel__reorder {
        display: grid;
        gap: 2px;
    }

    .chart-indicator-item--lower .chart-indicator-item__name {
        flex: 1 1 auto;
    }

    .chart-indicator-item__control {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        align-self: stretch;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .chart-indicator-panel__list > button.chart-indicator-item {
        padding-right: 70px;
    }

    .chart-indicator-item__arrows {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        gap: 2px;
    }

    .chart-indicator-item__move-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        background: none;
        border: none;
        color: var(--ink-secondary);
        font-size: 11px;
        cursor: pointer;
        line-height: 1;
        border-radius: var(--radius-chip);

    }
    .chart-indicator-item__move-btn .icon {
        width: 14px;
        height: 14px;
    }

    .chart-indicator-item__move-btn:hover:not(:disabled) {
        color: var(--ink-primary);
    }

    .chart-indicator-item__move-btn:disabled {
        color: var(--ink-muted);
        opacity: 0.3;
        cursor: default;
    }

    /* ── Alert Panel — Redesigned ── */

    .chart-alert-panel {
        position: absolute;
        bottom: 36px;
        right: 10px;
        width: 256px;
        max-height: 252px;
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        z-index: var(--z-dropdown);
        overflow: hidden;
        display: flex;
        flex-direction: column;

        /* Collapsed by default — expands only when the alarm tool is active. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(0.98);
        transform-origin: bottom right;

    }

    .chart-alert-panel.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .chart-alert-panel__header {
        padding: 9px 12px 8px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-muted);
        border-bottom: 1px solid var(--line-subtle);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Pulse dot — amber for alarm identity */
    .chart-alert-panel__header::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--signal-warn);
        flex-shrink: 0;

    }

    .chart-alert-panel__list {
        padding: 3px 0;
        overflow-y: auto;
        flex: 1;
        scrollbar-width: thin;
        scrollbar-color: var(--ink-muted) transparent;
    }

    .chart-alert-panel__empty {
        padding: 16px 12px;
        font-size: 10px;
        color: var(--ink-muted);
        font-family: var(--font-data);
        letter-spacing: 0.03em;
    }

    /* ── Alert Items ── */

    .chart-alert-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 12px;

        position: relative;
        cursor: pointer;
        border-bottom: 1px solid var(--line-subtle);
    }

    .chart-alert-item:last-child {
        border-bottom: none;
    }

    .chart-alert-item:hover {
        background: var(--surface-raised);
    }

    .chart-alert-item.inactive {
        opacity: 0.18;
    }
    .chart-alert-item__info {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-data);
        font-size: 11px;
        color: var(--ink-primary);
        min-width: 0;
    }

    .chart-alert-item__direction {
        color: var(--signal-warn);
        font-size: 12px;
        line-height: 1;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .chart-alert-item__price {
        font-weight: var(--font-weight-regular);
        letter-spacing: 0.01em;
        color: var(--ink-secondary);
    }

    .chart-alert-item__label {
        color: var(--ink-muted);
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
    }

    .chart-alert-item__controls {
        display: flex;
        gap: 2px;
        flex-shrink: 0;
    }

    .chart-alert-item__recurring,
    .chart-alert-item__delete {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        background: transparent;
        color: var(--ink-muted);
        border-radius: var(--radius-chip);
        cursor: pointer;
        font-size: 11px;
        font-family: var(--font-data);

    }

    .chart-alert-item__recurring:hover {
        background: var(--signal-warn-surface);
        border-color: var(--signal-warn-line);
        color: var(--signal-warn);
    }

    .chart-alert-item__delete:hover {
        background: var(--signal-down-surface);
        border-color: var(--signal-down-line);
        color: var(--signal-down);
    }

    /* ── Status Bar ── */

    .chart-status-bar {
        height: 24px;
        min-height: 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 0 14px;
        border-top: 1px solid var(--line-subtle);
        background: var(--surface-panel);
        font-family: var(--font-data);
        font-size: 10px;
        color: var(--ink-secondary);
        letter-spacing: normal;
        flex-shrink: 0;
    }

    .chart-status-bar span::before {
        content: '·';
        margin-right: 7px;
        opacity: 0.20;
        font-size: 12px;
        vertical-align: middle;
        color: var(--ink-muted);
        line-height: 1;
    }

    .chart-status-bar span:first-child::before {
        display: none;
    }

    .chart-status-bar .chart-status-bar__warning {
        color: var(--signal-warn);
    }

    .chart-status-bar .chart-status-bar__ok {
        color: var(--ink-muted);
    }

    /* ── Color Picker Popover ── */

    .chart-color-picker {
        position: absolute;
        z-index: var(--z-dropdown);
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        padding: 12px;

        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 240px;
        max-width: calc(100% - 16px);
        box-sizing: border-box;

    }

    .chart-color-picker[hidden] { display: none; }

    .chart-color-picker__presets {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 6px;
    }

    /* Quadratisch, klein, ruhig. Die Kacheln waren 1,3 : 1 breit, sprangen
       beim Ueberfahren um 10 % und trugen einen 2-px-Rahmen — eine
       Farbauswahl ist ein Werkzeug, kein Regal. Das Springen faellt weg:
       im Scanner gibt es keine Bewegung (§9.3). */
    .chart-color-swatch {
        padding: 0;
        min-inline-size: 0;
        inline-size: 100%;
        aspect-ratio: 1;
        border: 1px solid var(--line);
        border-radius: 2px;
        cursor: pointer;
    }

    .chart-color-swatch:hover { border-color: var(--line-strong); }

    /* Gewaehlt wird ueber einen Ring ausserhalb der Kachel, nicht ueber
       einen dicken Rahmen darin — sonst frisst der Rahmen die Farbe, die
       man gerade beurteilen will. */
    .chart-color-swatch.active {
        border-color: var(--surface-menu);
        box-shadow: 0 0 0 2px var(--ink-primary);
    }

    .chart-color-picker__custom input {
        width: 100%;
        background: var(--surface-raised);
        border: 1px solid var(--line);
        border-radius: var(--radius-chip);
        color: var(--ink-primary);
        padding: 6px 8px;
        font-family: var(--font-data);
        font-size: 12px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;

        box-sizing: border-box;
    }

    .chart-color-picker__custom input:focus {
        outline: 1px solid var(--line-focus);
        outline-offset: 1px;
        border-color: var(--line-focus);
    }

    .chart-color-picker__section-label {
        font-family: var(--font-data);
        font-size: 12px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;

        color: var(--ink-muted);
        margin-top: 2px;
    }

    /* Ein Segmentumschalter wie die Kerzenaufloesung, kein Kachelfeld:
       fuenf Staerken sind eine Reihe, keine Sammlung. */
    .chart-linewidth-picker {
        display: flex;
        gap: 0;
        padding: 2px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-panel);
    }

    .chart-linewidth-option {
        appearance: none;
        flex: 1;
        text-align: center;
        border: 0;
        border-radius: calc(var(--radius-control) - 1px);
        background: transparent;
        color: var(--ink-secondary);
        font-family: var(--font-data);
        font-size: 12px;
        min-block-size: 28px;
        font-weight: var(--font-weight-regular);
        cursor: pointer;
        padding: 7px 0 6px;
        line-height: 1;

    }

    .chart-linewidth-option:hover {
        transform: translateY(-1px);
        border-color: var(--line-strong);
        background: var(--surface-hover);
    }

    .chart-linewidth-option.active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    /* ── Drawings Manager Panel — Redesigned ── */

    .chart-manager-panel {
        position: absolute;
        top: 46px;
        right: 0;
        bottom: 24px;
        width: 268px;
        background: var(--surface-menu);
        border-left: 1px solid var(--line);
        z-index: var(--z-dropdown);
        display: flex;
        flex-direction: column;

        opacity: 0;
        transform: translateX(100%);
        pointer-events: none;

    }

    .chart-manager-panel.is-visible {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .chart-manager-panel.is-closing {
        opacity: 0;
        transform: translateX(100%);
        pointer-events: none;
    }

    .chart-manager-panel[hidden] { display: none; }

    .chart-manager-panel__header {
        padding: 12px 14px 11px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-muted);
        border-bottom: 1px solid var(--line-subtle);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .chart-manager-panel__close {
        background: none;
        border: none;
        color: var(--ink-muted);
        font-size: 16px;
        cursor: pointer;
        padding: 0 2px;
        line-height: 1;

    }

    .chart-manager-panel__close:hover {
        color: var(--ink-primary);
    }

    .chart-manager-panel__list {
        flex: 1;
        overflow-y: auto;
        padding: 4px 0;
        scrollbar-width: thin;
        scrollbar-color: var(--ink-muted) transparent;
    }

    .chart-manager-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        cursor: pointer;

        border-left: 1px solid transparent;
        border-bottom: 1px solid var(--line-subtle);
    }

    .chart-manager-item:last-child {
        border-bottom: none;
    }

    .chart-manager-item:hover {
        background: var(--surface-raised);
    }

    .chart-manager-item.selected {
        background: var(--surface-hover);
        border-left-color: var(--accent);
    }

    .chart-manager-item__icon {
        width: 20px;
        font-size: 13px;
        color: var(--ink-muted);
        text-align: center;
        flex-shrink: 0;
    }

    .chart-manager-item.selected .chart-manager-item__icon {
        color: var(--ink-secondary);
    }

    .chart-manager-item__color {
        width: 9px;
        height: 9px;
        border-radius: var(--radius-chip);
        flex-shrink: 0;
        border: 1px solid var(--line);
    }

    .chart-manager-item__info {
        flex: 1;
        min-width: 0;
    }

    .chart-manager-item__type {
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);

    }

    .chart-manager-item.selected .chart-manager-item__type {
        color: var(--ink-secondary);
    }

    .chart-manager-item__detail {
        font-family: var(--font-data);
        font-size: 9px;
        color: var(--ink-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 2px;
    }

    .chart-manager-item__delete {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid transparent;
        border-radius: var(--radius-chip);
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 12px;
        flex-shrink: 0;

    }

    .chart-manager-item__delete:hover {
        color: var(--signal-down);
        border-color: var(--signal-down-line);
        background: var(--signal-down-surface);
    }

    .chart-manager-empty {
        padding: 24px 14px;
        font-family: var(--font-data);
        font-size: 10px;
        color: var(--ink-muted);
        text-align: center;
        letter-spacing: normal;
    }

    /* ── Alarm Edit Modal ── */

    .chart-alarm-edit {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: var(--z-local);
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        padding: 0;
        width: 296px;

        overflow: hidden;

    }
    .chart-alarm-edit[hidden] { display: none; }

    .chart-alarm-edit__header {
        padding: 13px 16px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);

        border-bottom: 1px solid var(--line-subtle);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chart-alarm-edit__body {
        padding: 18px 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .chart-alarm-edit__field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .chart-alarm-edit__field > span {
        font-family: var(--font-data);
        font-size: 9px;

        letter-spacing: normal;
        color: var(--ink-muted);
    }

    .chart-alarm-edit__field input[type="number"],
    .chart-alarm-edit__field input[type="text"],
    .chart-alarm-edit__field select {
        background: var(--surface-raised);
        border: 1px solid var(--line);
        border-radius: var(--radius-chip);
        color: var(--ink-secondary);
        padding: 9px 10px;
        font-family: var(--font-data);
        font-size: 12px;

    }

    .chart-alarm-edit__field input:focus,
    .chart-alarm-edit__field select:focus {
        outline: none;
        border-color: var(--line-strong);
    }

    .chart-alarm-edit__field select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='var(--control-selected)' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 30px;
    }

    .chart-alarm-edit__field--row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .chart-alarm-edit__field--row input[type="checkbox"] {
        accent-color: var(--ink-secondary);
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

    .chart-alarm-edit__actions {
        padding: 11px 16px 13px;
        border-top: 1px solid var(--line-subtle);
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .chart-alarm-edit__save {
        background: var(--surface-hover);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-chip);
        color: var(--ink-primary);
        padding: 8px 18px;
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        cursor: pointer;

    }

    .chart-alarm-edit__save:hover {
        background: var(--control-selected);
        border-color: var(--line-strong);
        color: var(--ink-primary);
    }

    /* ── Scrollbars ── */

    .chart-alert-panel__list::-webkit-scrollbar,
    .chart-manager-panel__list::-webkit-scrollbar {
        width: 2px;
    }

    .chart-alert-panel__list::-webkit-scrollbar-track,
    .chart-manager-panel__list::-webkit-scrollbar-track {
        background: transparent;
    }

    .chart-alert-panel__list::-webkit-scrollbar-thumb,
    .chart-manager-panel__list::-webkit-scrollbar-thumb {
        background: var(--surface-hover);
        border-radius: 1px;
    }

    .chart-alert-panel__list::-webkit-scrollbar-thumb:hover,
    .chart-manager-panel__list::-webkit-scrollbar-thumb:hover {
        background: var(--surface-selected);
    }

    /* ── Segmented Direction Toggle ── */

    .chart-seg-toggle {
        display: flex;
        gap: 0;
        background: var(--surface-raised);
        border: 1px solid var(--line-subtle);
        border-radius: var(--radius-panel);
        padding: 2px;
        height: 32px;
        box-sizing: border-box;
    }

    .chart-seg-btn {
        flex: 1;
        padding: 0 12px;
        background: transparent;
        border: none;
        border-radius: var(--radius-control);
        color: var(--ink-muted);
        font-family: var(--font-data);
        font-size: 11px;
        font-weight: var(--font-weight-regular);
        letter-spacing: 0.03em;
        cursor: pointer;

        white-space: nowrap;
        position: relative;
    }

    .chart-seg-btn:hover {
        color: var(--ink-primary);
    }

    .chart-seg-btn.active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    .chart-seg-btn.active::after {
        content: none;
    }

    /* ── Custom Toggle Switch ── */

    .chart-toggle-wrap {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .chart-toggle-track {
        display: block;
        width: 32px;
        height: 18px;
        background: var(--surface-hover);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        position: relative;

    }

    .chart-toggle-thumb {
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        background: var(--control-selected);
        border-radius: 50%;

    }

    .chart-toggle-wrap.active .chart-toggle-track {
        background: var(--control-selected);
        border-color: var(--line-strong);
    }

    .chart-toggle-wrap.active .chart-toggle-thumb {
        transform: translateX(14px);
        background: var(--ink-primary);
    }

    /* ── Custom Prompt Modal ── */

    .chart-prompt-modal {
        position: absolute;
        inset: 0;
        z-index: var(--z-dropdown);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--scrim);

        opacity: 0;

        pointer-events: none;
    }

    .chart-prompt-modal.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .chart-prompt-modal[hidden] {
        display: none;
    }

    .chart-prompt-card {
        width: 300px;
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        overflow: hidden;

        transform: translateY(6px) scale(0.98);

        opacity: 0;
    }

    .chart-prompt-modal.visible .chart-prompt-card {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .chart-prompt-card__header {
        padding: 13px 16px 11px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-muted);
        border-bottom: 1px solid var(--line-subtle);
    }

    .chart-prompt-card__body {
        padding: 16px;
    }

    .chart-prompt-input {
        width: 100%;
        background: var(--surface-raised);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        color: var(--ink-primary);
        padding: 10px 12px;
        font-family: var(--font-data);
        font-size: 12px;
        letter-spacing: 0.02em;
        outline: none;
        box-sizing: border-box;

    }

    .chart-prompt-input:focus {
        border-color: var(--line-strong);
        background: var(--surface-hover);
    }

    .chart-prompt-card__actions {
        padding: 0 16px 14px;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    .chart-prompt-btn {
        padding: 7px 18px;
        border-radius: var(--radius-chip);
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        cursor: pointer;

        border: 1px solid transparent;
    }

    .chart-prompt-btn--cancel {
        background: transparent;
        border-color: var(--line);
        color: var(--ink-muted);
    }

    .chart-prompt-btn--cancel:hover {
        background: var(--surface-raised);
        color: var(--ink-secondary);
    }

    .chart-prompt-btn--confirm {
        background: var(--surface-hover);
        border-color: var(--line-strong);
        color: var(--ink-primary);
    }

    .chart-prompt-btn--confirm:hover {
        background: var(--control-selected);
        border-color: var(--line-strong);
        color: var(--ink-primary);
    }

    /* ── Trades Panel ── */
    /* Same slide-in panel as the drawings manager; only the rows differ. */

    .chart-trade-panel {
        width: 300px;
    }

    .chart-trade-notice {
        padding: 9px 14px;
        font-family: var(--font-data);
        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: var(--ink-secondary);
        border-bottom: 1px solid var(--line-subtle);
        flex-shrink: 0;
    }

    .chart-trade-notice[hidden] { display: none; }

    .chart-trade-notice--warning {
        color: var(--signal-warn);
        background: var(--signal-warn-surface);
    }

    .chart-trade-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 9px 14px;
        cursor: pointer;

        border-left: 1px solid transparent;
        border-bottom: 1px solid var(--line-subtle);
    }

    .chart-trade-item:last-child {
        border-bottom: none;
    }

    .chart-trade-item:hover {
        background: var(--surface-raised);
    }

    .chart-trade-item__head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-family: var(--font-data);
        font-size: 10px;
        letter-spacing: normal;
    }

    .chart-trade-item__date {
        color: var(--ink-muted);
    }

    .chart-trade-item__ticker {
        font-weight: var(--font-weight-regular);
        color: var(--ink-secondary);
    }

    .chart-trade-item__direction {
        font-weight: var(--font-weight-regular);
    }

    .chart-trade-item__outcome {
        margin-left: auto;
        font-size: 9px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);
    }

    .chart-trade-item__outcome--win { color: var(--signal-up); }
    .chart-trade-item__outcome--loss { color: var(--signal-down); }
    .chart-trade-item__outcome--draw { color: var(--ink-secondary); }
    .chart-trade-item__outcome--open { color: var(--signal-warn); }

    .chart-trade-item__status {
        font-family: var(--font-data);
        font-size: 9px;
        color: var(--ink-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Trade Modals ── */
    /* Backdrop + card, identical mechanics to the prompt modal. */

    .chart-trade-modal {
        position: absolute;
        inset: 0;
        z-index: var(--z-dropdown);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--scrim);

        opacity: 0;

        pointer-events: none;
    }

    .chart-trade-modal.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .chart-trade-modal[hidden] {
        display: none;
    }

    .chart-trade-card {
        width: 360px;
        max-height: calc(100% - 96px);
        display: flex;
        flex-direction: column;
        background: var(--surface-menu);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        overflow: hidden;

        transform: translateY(6px) scale(0.98);

        opacity: 0;
    }

    .chart-trade-card--detail {
        width: 420px;
    }

    .chart-trade-modal.visible .chart-trade-card {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .chart-trade-card__header {
        padding: 13px 16px 11px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);

        letter-spacing: normal;
        color: var(--ink-muted);
        border-bottom: 1px solid var(--line-subtle);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .chart-trade-card__body {
        padding: 18px 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .chart-trade-card__body--scroll {
        overflow-y: auto;
        gap: 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--ink-muted) transparent;
    }

    .chart-trade-card__body--scroll::-webkit-scrollbar { width: 2px; }
    .chart-trade-card__body--scroll::-webkit-scrollbar-track { background: transparent; }
    .chart-trade-card__body--scroll::-webkit-scrollbar-thumb {
        background: var(--surface-hover);
        border-radius: 1px;
    }

    .chart-trade-readout {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-family: var(--font-data);
        font-size: 10px;
        letter-spacing: 0.03em;
        color: var(--ink-muted);
    }

    /* Outcome choice starts empty on purpose — no default, no guess. */
    .chart-seg-btn--win.active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    .chart-seg-btn--loss.active {
        background: var(--signal-down-surface);
        color: var(--signal-down);
    }

    .chart-seg-btn--draw.active {
        background: var(--surface-selected);
        color: var(--ink-primary);
    }

    /* The note field is the one place a human writes — it gets real room. */
    .chart-trade-textarea {
        background: var(--surface-raised);
        border: 1px solid var(--line);
        border-radius: var(--radius-chip);
        color: var(--ink-secondary);
        padding: 9px 10px;
        font-family: var(--font-data);
        font-size: 12px;
        line-height: 1.55;
        min-height: 104px;
        resize: vertical;
        box-sizing: border-box;

    }

    .chart-trade-textarea:focus {
        outline: none;
        border-color: var(--line-strong);
    }

    .chart-trade-textarea::placeholder {
        color: var(--ink-muted);
    }

    .chart-alarm-edit__save:disabled {
        opacity: 0.38;
        cursor: default;
    }

    .chart-alarm-edit__save:disabled:hover {
        background: var(--surface-hover);
        border-color: var(--line-strong);
        color: var(--ink-primary);
    }

    /* ── Trade Detail: context and result never share a block ── */

    .chart-trade-block {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        overflow: hidden;
    }

    .chart-trade-block__header {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 9px 12px 8px;
        background: var(--surface-raised);
        border-bottom: 1px solid var(--line-subtle);
    }

    .chart-trade-block__title {
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-secondary);
    }

    .chart-trade-block__subtitle {
        font-family: var(--font-data);
        font-size: 9px;
        letter-spacing: 0.02em;
        color: var(--ink-muted);
    }

    .chart-trade-block__body,
    .chart-trade-detail__summary {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
    }

    .chart-trade-detail__summary {
        padding: 0;
    }

    .chart-trade-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        font-family: var(--font-data);
        font-size: 10px;
        letter-spacing: 0.02em;
    }

    .chart-trade-row__label {
        flex: 0 0 108px;
        color: var(--ink-muted);
    }

    .chart-trade-row__value {
        flex: 1;
        min-width: 0;
        color: var(--ink-secondary);
        word-break: break-word;
    }

    .chart-trade-subhead {
        margin-top: 6px;
        font-family: var(--font-data);
        font-size: 9px;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;

        color: var(--ink-muted);
    }

    .chart-trade-note {
        font-family: var(--font-data);
        font-size: 10px;
        line-height: 1.6;
        color: var(--ink-secondary);
        white-space: pre-wrap;
    }

    /* A number that is not calculated yet must never look like a calculated zero. */
    .chart-trade-hint {
        font-family: var(--font-data);
        font-size: 10px;
        line-height: 1.6;
        letter-spacing: 0.02em;
        color: var(--ink-secondary);
    }

    .chart-trade-hint--blocked {
        color: var(--signal-warn);
    }

    /* --- Position Tool: Direction Picker --- */
    .position-direction-picker {
        display: flex;
        gap: 6px;
        padding: 6px 8px;
        background: var(--surface-panel);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);

    }

    .position-dir-btn {
        padding: 5px 14px;
        min-block-size: 30px;
        font: 400 13px/1 var(--chart-font);
        letter-spacing: normal;
        border-radius: var(--radius-chip);
        border: 1px solid transparent;
        cursor: pointer;

        color: var(--ink-primary);
    }

    .position-dir-btn--long {
        background: var(--chart-up-label);
        border-color: var(--signal-up-line);
    }

    .position-dir-btn--long:hover {
        background: var(--chart-up-label);
        border-color: var(--signal-up);
    }

    .position-dir-btn--short {
        background: var(--chart-down-label);
        border-color: var(--signal-down-line);
    }

    .position-dir-btn--short:hover {
        background: var(--chart-down-label);
        border-color: var(--signal-down);
    }


    /* ====================================================================
       DER AUFBAU — Gruppe 4, Schritt 4 und 5

       Die Umkehrung aus STEP_04_SCANNER.md §2: der Chart fuellt den Kanal,
       die Werkzeuge stehen senkrecht links (40 px), die AI ist ein Feld
       rechts (340 px), das ueber ein Icon in der Kanalkopfzeile auf- und
       zuklappt. Terminal und Befehlszeile sind stillgelegt.

       Die Werte sind aus docs/redesign/entwurf_scanner.html ausgelesen,
       nicht geschaetzt. Wo Entwurf und Wirklichkeit sich widersprechen,
       gewinnt die Wirklichkeit — der Entwurf zeigt einen Zustand, die App
       hat viele.

       Dieser Block steht bewusst am Ende der Datei: er liegt in derselben
       Schicht wie alles davor und gewinnt bei gleicher Spezifitaet ueber
       die Quellreihenfolge. So bleibt der umgezogene Altbestand lesbar,
       statt in tausend Einzelstellen korrigiert zu werden.
       ==================================================================== */

    /* Der Kanal traegt sonst 24 px Rand und eigenen Bildlauf. Der Scanner
       geht bis an die Kante — der Chart ist die Flaeche. */
    .content-body:has(#live-scanner-root) {
        padding: 0;
        overflow: hidden;
    }

    .scanner-shell {
        gap: 0;
        block-size: 100%;
        min-block-size: 0;
        background: var(--surface-panel);
    }

    /* Zwei Spuren: der Chart nimmt, was da ist, das AI-Feld seine 340 px.
       Zugeklappt faellt seine Spur auf 0 — kein Uebergang, §9.3. */
    .scanner-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 0;
        block-size: 100%;
        min-block-size: 0;
        overflow: hidden;
    }

    .scanner-grid[data-ki="zu"] {
        grid-template-columns: minmax(0, 1fr) 0;
    }

    .scanner-grid[data-ki="zu"] .scanner-panel--chat {
        display: none;
    }

    /* „Gross" — derselbe Knopf wie vorher, nur ein breiteres Feld statt
       einer Animation ueber grid-template-columns. */
    .scanner-grid.chat-expanded {
        grid-template-columns: minmax(0, 1fr) 560px;
    }

    /* ── Der Chart ist kein Overlay mehr ───────────────────────────────
       Die Klasse heisst weiter so (4380 Zeilen JavaScript haengen daran),
       aber sie liegt jetzt IN der Flaeche statt darueber. Die Panels und
       Dialoge darin bleiben absolut positioniert und beziehen sich auf
       diesen Kasten. */
    .chart-overlay {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        z-index: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: var(--surface-panel);
        min-inline-size: 0;
        overflow: hidden;
    }

    .chart-overlay[hidden] {
        display: none;
    }

    body.scanner-chart-fullscreen {
        overflow: hidden;
    }

    .chart-overlay.is-fullscreen {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        z-index: var(--z-modal);
    }

    /* Die beiden Leuchtstreifen an der Oberkante des alten Overlays sind
       weg — Leuchtraender sind in STIL.md §7 verboten, und eine Kante
       braucht der Chart nicht, er steht ohnehin an der Kanalgrenze. */
    .chart-overlay::before,
    .chart-overlay::after {
        content: none;
    }

    /* ── Werkzeugleiste, senkrecht, 40 px ────────────────────────────── */
    .chart-tool-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        /* 40 px feste Spalte mit 28-px-Knoepfen darin. Ohne Breite richtet
           sich die Spalte nach den Knoepfen und die Werkzeuge stehen ohne
           Rand an der Kante — genau das wirkt gequetscht. */
        flex: none;
        inline-size: 40px;
        min-inline-size: 40px;
        padding-block: 6px;
        border-inline-end: 1px solid var(--line-subtle);
        background: var(--surface-canvas);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
    }

    .chart-tool-rail::-webkit-scrollbar {
        display: none;
    }

    .chart-tool-rail .chart-tool-group {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .chart-tool-rail__divider {
        inline-size: 18px;
        block-size: 1px;
        margin-block: 5px;
        background: var(--line-subtle);
        flex: none;
    }

    /* ── Die Chartspalte ───────────────────────────────────────────────
       Kopf, Legendenzeile, Chartflaeche. Die Flaeche nimmt den Rest. */
    .chart-stack {
        display: flex;
        flex-direction: column;
        min-inline-size: 0;
        min-block-size: 0;
    }

    #chart-canvas-container { isolation: isolate; }

    /* ── Chartkopf ─────────────────────────────────────────────────────
       32 px statt 48, Maschinenschrift, Gewicht 400 (§9.3). */
    .chart-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        block-size: 32px;
        min-block-size: 32px;
        padding-inline: 10px;
        border-block-end: 1px solid var(--line-subtle);
        background: var(--surface-panel);
        font-family: var(--font-data);
        font-size: var(--text-xs);
        flex: none;
        min-inline-size: 0;
        overflow: hidden;
    }

    .chart-toolbar__left {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0;
        border: 0;
        align-self: center;
        flex: none;
    }

    .chart-toolbar__ticker-symbol {
        font-family: var(--font-ui);
        font-size: var(--text-base);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-primary);
        line-height: 1;
    }

    .chart-toolbar__ticker-price {
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-primary);
        min-inline-size: 0;
    }

    .chart-toolbar__divider {
        inline-size: 1px;
        min-inline-size: 1px;
        block-size: 16px;
        margin: 0;
        background: var(--line-subtle);
        flex: 0 0 1px;
        align-self: center;
    }

    .chart-toolbar__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-inline-start: auto;
        flex: none;
    }

    /* ── Kerzenaufloesung ─────────────────────────────────────────────── */
    /* Die Aufloesungsreihe ist das Einzige im Kopf, das nachgeben darf:
       wird die Chartspalte eng, laeuft sie waagerecht statt den
       Umschalter rechts hinauszudruecken. */
    .chart-interval {
        display: flex;
        gap: 0;
        flex: 0 1 auto;
        min-inline-size: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chart-interval::-webkit-scrollbar {
        display: none;
    }

    .chart-interval__btn {
        flex: none;
    }

    .chart-interval__btn {
        border: 0;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        font: var(--font-weight-regular) var(--text-xs) / 1 var(--font-data);
        padding: 3px 7px;
        border-radius: var(--radius-control);
    }

    .chart-interval__btn.active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    @media (hover: hover) and (pointer: fine) {
        .chart-interval__btn:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    /* ── Die Legendenzeile ueber dem Chart ─────────────────────────────
       Sie heisst weiter `chart-status-bar`, weil scanner_chart.js sie
       fuellt. Sie steht nur nicht mehr unten, sondern da, wo man sie beim
       Lesen des Charts ohnehin streift. */
    .chart-status-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        block-size: auto;
        min-block-size: 0;
        padding: 5px 10px;
        border: 0;
        background: transparent;
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-muted);
        white-space: nowrap;
        overflow: hidden;
        flex: none;
    }

    /* Die Punkte vor jedem Feld waren Zierat; der Abstand trennt (R3). */
    .chart-status-bar span::before {
        content: none;
    }

    .chart-status-bar span:empty {
        display: none;
    }

    .chart-status-bar .chart-status-bar__session {
        color: var(--ink-secondary);
    }

    .chart-status-bar .chart-status-bar__warning {
        color: var(--signal-warn);
    }

    .chart-status-bar .chart-status-bar__ok {
        color: var(--ink-muted);
    }

    /* ── Die Chartflaeche ─────────────────────────────────────────────── */
    .chart-overlay .chart-container {
        display: block;
        flex: 1;
        min-block-size: 0;
        background: var(--surface-panel);
    }

    .chart-overlay {
        font-weight: var(--font-weight-regular);
        font-variant-numeric: tabular-nums;
    }

    /* ── Die Bedienknoepfe im Kopf und in der Leiste ───────────────────
       28 x 28 statt 32, Icons 16 px (Terminal-Dichte), grau. Farbe traegt
       hier nur der Kurs (R2, in §9.2 fuer den Scanner verschaerft). */
    .chart-tool {
        inline-size: 28px;
        block-size: 28px;
        padding: 0;
        font-weight: var(--font-weight-regular);
        border-radius: var(--radius-control);
        color: var(--ink-primary);
        font-size: var(--text-xs);
    }

    .chart-tool .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        display: block;
        pointer-events: none;
    }

    .chart-tool.active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    .chart-tool:active {
        background: var(--control-selected);
    }

    @media (hover: hover) and (pointer: fine) {
        .chart-tool:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }

        .chart-tool--close:hover {
            background: var(--surface-hover);
            color: var(--signal-down);
        }
    }

    .chart-tool--action {
        inline-size: auto;
        block-size: 28px;
        padding-inline: 8px;
        gap: 5px;
        border-radius: var(--radius-control);
        border: 1px solid var(--line-subtle);
        background: transparent;
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-primary);
    }

    .chart-tool--action .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        opacity: 1;
    }

    /* „Fix" und „Cache" stehen ohne Beschriftung. Bei offenem AI-Feld
       bleiben der Chartspalte rund 450 px; mit den beiden Woertern lief
       der Kopf ueber und der Umschalter Standard/Viewer wurde
       abgeschnitten. Der Entwurf zeigt die rechte Seite ohnehin nur mit
       Motiven — die Bedeutung traegt der Tooltip. */
    .chart-tool--action {
        inline-size: 28px;
        padding-inline: 0;
        justify-content: center;
    }

    .chart-tool__label {
        display: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .chart-tool--action:hover {
            background: var(--surface-hover);
            border-color: var(--line);
            color: var(--ink-primary);
        }

        .chart-tool--action:hover .icon {
            color: var(--ink-primary);
        }
    }

    /* Kein Abzeichen mehr. Eine helle Scheibe mit einer Ziffer darin ist
       eine Meldung ("da ist etwas passiert"); hier steht nur, wie viele
       Indikatoren an sind. Das ist eine Zahl, keine Nachricht — sie steht
       schlicht neben dem Zeichen, in der leisesten Schriftfarbe. */
    .chart-tool__count {
        position: static;
        min-inline-size: 0;
        block-size: auto;
        margin-inline-start: 3px;
        border-radius: 0;
        background: transparent;
        color: var(--ink-muted);
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: var(--font-weight-regular);
        line-height: 1;
    }

    .chart-tool--indicator {
        inline-size: auto;
        min-inline-size: 40px;
        padding-inline: 5px;
    }

    /* ── Der Umschalter Standard / Viewer ──────────────────────────────
       Er sass auf 150 px fester Breite und in Versalien. Beides weg. */
    .chart-mode-toggle {
        inline-size: auto;
    }

    .chart-seg-btn {
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        padding: 3px 9px;
        border-radius: var(--radius-control);
    }

    /* ── Panels und Dialoge im Chart ──────────────────────────────────
       Sie haengen jetzt an der Chartflaeche statt am Fenster. Die
       Abstaende folgen dem neuen Kopf (32 px statt 48). */
    .chart-indicator-panel {
        inset-block-start: 38px;
        inset-inline: auto 10px;
        left: auto;
        transform: none;
        border-radius: var(--radius-panel);
        border: 1px solid var(--line);
        background: var(--surface-menu);
        z-index: var(--z-dropdown);
    }

    .chart-manager-panel {
        inset-block-start: 32px;
        inset-block-end: 0;
        z-index: var(--z-dropdown);
        border-radius: 0;
        background: var(--surface-menu);
    }

    .chart-alert-panel {
        inset-block-end: 10px;
        z-index: var(--z-dropdown);
        border-radius: var(--radius-panel);
        background: var(--surface-menu);
    }

    .chart-color-picker {
        border-radius: var(--radius-panel);
        border: 1px solid var(--line);
        background: var(--surface-menu);
        z-index: var(--z-dropdown);
    }

    .chart-alarm-edit {
        z-index: var(--z-modal);
        border-radius: var(--radius-panel);
        background: var(--surface-menu);
    }

    .chart-trade-modal,
    .chart-prompt-modal {
        z-index: var(--z-modal);
    }

    /* Der Punkt, der im Alarmkopf gepulst hat, ist weg (§9.3: im Scanner
       gibt es keine Bewegung) — und er war Zierat, kein Signal. */
    .chart-alert-panel__header::before {
        content: none;
    }

    .chart-indicator-panel__header,
    .chart-manager-panel__header,
    .chart-alert-panel__header,
    .chart-alarm-edit__header,
    .chart-trade-card__header {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-secondary);
    }

    .chart-manager-panel__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 20px;
        block-size: 20px;
        margin-inline-start: auto;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 0;
    }

    .chart-manager-panel__close .icon {
        inline-size: var(--icon-inline);
        block-size: var(--icon-inline);
    }

    @media (hover: hover) and (pointer: fine) {
        .chart-manager-panel__close:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    /* Die acht Zeichenfarben. Sie sind die einzige Stelle im Scanner, an
       der Farbe frei gewaehlt wird — sie gehoert der Zeichnung, nicht der
       Oberflaeche. Deshalb Rollen in tokens.css und keine Literale hier. */
    .chart-color-swatch[data-role="--draw-white"]  { background: var(--draw-white); }
    .chart-color-swatch[data-role="--draw-cyan"]   { background: var(--draw-cyan); }
    .chart-color-swatch[data-role="--draw-green"]  { background: var(--draw-green); }
    .chart-color-swatch[data-role="--draw-orange"] { background: var(--draw-orange); }
    .chart-color-swatch[data-role="--draw-red"]    { background: var(--draw-red); }
    .chart-color-swatch[data-role="--draw-purple"] { background: var(--draw-purple); }
    .chart-color-swatch[data-role="--draw-blue"]   { background: var(--draw-blue); }
    .chart-color-swatch[data-role="--draw-yellow"] { background: var(--draw-yellow); }

    /* ── Das AI-Feld ──────────────────────────────────────────────────── */
    .scanner-panel--chat {
        display: flex;
        flex-direction: column;
        min-inline-size: 0;
        min-block-size: 0;
        border: 0;
        border-inline-start: 1px solid var(--line-subtle);
        border-radius: 0;
        background: var(--surface-canvas);
        overflow: hidden;
    }

    .scanner-panel--chat .scanner-panel-head {
        display: flex;
        align-items: center;
        gap: 7px;
        block-size: 32px;
        min-block-size: 32px;
        padding-inline: 10px;
        border-block-end: 1px solid var(--line-subtle);
        background: transparent;
        flex: none;
    }

    .scanner-panel--chat .scanner-panel-head > .icon {
        inline-size: var(--icon-inline);
        block-size: var(--icon-inline);
        color: var(--ink-muted);
        flex: none;
    }

    .scanner-panel--chat .scanner-panel-title {
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        color: var(--ink-secondary);
    }

    .scanner-panel--chat .scanner-panel-actions {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        gap: 1px;
    }

    .scanner-btn--icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 24px;
        block-size: 24px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
    }

    .scanner-btn--icon .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
    }

    @media (hover: hover) and (pointer: fine) {
        .scanner-btn--icon:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    /* Der Umschalter zeigt immer das Gegenteil des Zustands. */
    .scanner-icon-collapse { display: none; }
    .scanner-btn--icon.is-expanded .scanner-icon-expand { display: none; }
    .scanner-btn--icon.is-expanded .scanner-icon-collapse { display: block; }

    .scanner-panel--chat .scanner-chat-log {
        flex: 1;
        min-block-size: 0;
        padding: 12px;
        overflow-y: auto;
        background: transparent;
    }

    .scanner-panel--chat .scanner-chat-compose {
        border-block-start: 1px solid var(--line-subtle);
        padding: 8px;
        background: transparent;
        flex: none;
    }

    .scanner-panel--chat .scanner-chat-compose-inner {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        padding: 7px 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    .scanner-panel--chat .scanner-chat-compose-inner textarea {
        flex: 1;
        min-inline-size: 0;
        border: 0;
        background: transparent;
        color: var(--ink-primary);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        outline: none;
    }

    .scanner-panel--chat .scanner-chat-compose-inner textarea::placeholder {
        color: var(--ink-muted);
    }

    /* ── Der Umschalter in der Kanalkopfzeile ─────────────────────────── */
    .content-header-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 28px;
        block-size: 28px;
        margin-inline-start: auto;
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        flex: none;
    }

    .content-header-action[hidden] {
        display: none;
    }

    .content-header-action .icon {
        inline-size: var(--icon-lg);
        block-size: var(--icon-lg);
    }

    .content-header-action.is-active {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    @media (hover: hover) and (pointer: fine) {
        .content-header-action:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    /* ── Der Bestaetigungsdialog ─────────────────────────────────────── */
    .scanner-confirm-icon {
        inline-size: var(--icon-feature);
        block-size: var(--icon-feature);
        color: var(--signal-warn);
    }

    /* Light popup/drawer motion; chart interaction itself stays immediate. */
    .chart-position-menu {
        position: absolute;
        z-index: var(--z-dropdown);
        display: flex;
        flex-direction: column;
        min-inline-size: 168px;
        padding: 5px;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        background: var(--surface-menu);
    }
    .chart-position-menu[hidden] { display: none; }
    .chart-position-menu button {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-primary);
        font: 400 13px/1.3 var(--font-ui);
        text-align: left;
        cursor: pointer;
    }
    .chart-position-menu button:hover { background: var(--surface-hover); }
    .chart-position-menu .icon { width: 16px; height: 16px; }
    .chart-position-menu [data-direction="long"] .icon { color: var(--signal-up); }
    .chart-position-menu [data-direction="short"] .icon { color: var(--signal-down); }
    .chart-alert-create { transform: none; max-inline-size: calc(100% - 16px); max-block-size: calc(100% - 16px); overflow-y: auto; }

    .chart-linewidth-picker {
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .chart-linewidth-option {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 7px;
        min-inline-size: 0;
        min-block-size: 44px;
        padding: 7px 2px;
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        color: var(--ink-muted);
        background: transparent;
    }
    .chart-linewidth-option span { font: inherit; font-size: 10px; }
    .chart-linewidth-option.active {
        color: var(--ink-primary);
        border-color: var(--line-strong);
        background: var(--surface-hover);
    }
    .chart-linewidth-option:hover { color: var(--ink-primary); background: var(--surface-hover); }
    .chart-linewidth-sample { display: block; width: 22px; background: currentColor; border-radius: 1px; }
    .chart-linewidth-option[data-width="1"] .chart-linewidth-sample { height: 1px; }
    .chart-linewidth-option[data-width="2"] .chart-linewidth-sample { height: 2px; }
    .chart-linewidth-option[data-width="3"] .chart-linewidth-sample { height: 3px; }
    .chart-linewidth-option[data-width="4"] .chart-linewidth-sample { height: 4px; }
    .chart-linewidth-option[data-width="6"] .chart-linewidth-sample { height: 6px; }

    .chart-manager-item { gap: 7px; padding-inline: 10px; }
    .chart-manager-item__find, .chart-manager-item__delete {
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 26px; width: 26px; height: 26px; padding: 0;
        color: var(--ink-muted); background: transparent;
        border: 0; border-radius: var(--radius-control); cursor: pointer;
    }
    .chart-manager-item__find .icon, .chart-manager-item__delete .icon { width: 15px; height: 15px; pointer-events: none; }
    .chart-manager-item__find:hover, .chart-manager-item__delete:hover { color: var(--ink-primary); background: var(--surface-hover); }

    .chart-manager-panel, .chart-trade-modal, .chart-prompt-modal,
    .chart-trade-card, .chart-prompt-card, .chart-alert-panel {
        transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    .chart-manager-panel.is-closing { transition-duration: var(--dur-instant); }
    .chart-manager-panel:not(.is-visible), .chart-manager-panel.is-closing { transform: translateX(6px); }
    .chart-trade-modal:not(.visible), .chart-prompt-modal:not(.visible),
    .chart-trade-modal:not(.visible) .chart-trade-card, .chart-prompt-modal:not(.visible) .chart-prompt-card {
        transition-duration: var(--dur-instant);
    }
    :is(.chart-color-picker, .chart-position-menu, .chart-indicator-panel, .chart-alarm-edit) {
        opacity: 1;
        translate: 0 0;
        transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete;
    }
    :is(.chart-color-picker, .chart-position-menu, .chart-indicator-panel, .chart-alarm-edit):is([hidden], .is-closing) {
        opacity: 0;
        translate: 0 -4px;
        pointer-events: none;
        transition-duration: var(--dur-instant);
    }
    @starting-style {
        :is(.chart-color-picker, .chart-position-menu, .chart-indicator-panel, .chart-alarm-edit):not([hidden]) {
            opacity: 0;
            translate: 0 -4px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .chart-overlay *, .scanner-panel--chat { transition: none; animation: none; translate: none; }
    }

    /* ── Wenn der Kanal eng wird ───────────────────────────────────────
       Gemessen bei 1100 px Fensterbreite mit beiden Leisten offen: dem
       Chart blieben 312 px und der Chartkopf lief um 103 px ueber. Die
       Antwort ist baulich, nicht typografisch (Register `product`): das
       AI-Feld gibt zuerst Breite ab und faellt dann ganz weg.

       Gemessen wird der KANAL, nicht das Fenster — die beiden Leisten
       lassen sich zuklappen, das Fenster sagt also nichts ueber den
       Platz, der hier wirklich da ist. */
    .scanner-shell {
        container-type: inline-size;
        container-name: scanner;
    }

    @container scanner (max-width: 900px) {
        .scanner-grid {
            grid-template-columns: minmax(0, 1fr) 280px;
        }

        .scanner-grid.chat-expanded {
            grid-template-columns: minmax(0, 1fr) 380px;
        }
    }

    @container scanner (max-width: 720px) {
        .scanner-grid,
        .scanner-grid.chat-expanded {
            grid-template-columns: minmax(0, 1fr) 0;
        }

        .scanner-grid .scanner-panel--chat {
            display: none;
        }
    }
}

@layer channels {
    @container scanner (max-width: 720px) {
        .scanner-grid, .scanner-grid.chat-expanded { grid-template-columns: minmax(0, 1fr); }
        .scanner-grid[data-ki="auf"] .scanner-panel--chat { display: flex; min-width: 0; }
        .scanner-grid[data-ki="auf"] > .chart-overlay:not(.is-fullscreen) { display: none; }
        .scanner-grid .scanner-panel-head { min-height: 48px; }
        .scanner-grid .scanner-chat-compose { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
        #live-scanner-expand-chat { display: none; }
    }
    @media (max-width: 767px) {
        .chart-toolbar, .chart-status-bar { min-width: 0; overflow-x: auto; }
        .chart-toolbar > * { flex-shrink: 0; }
        .chart-pane-legend { max-width: calc(100% - 64px); overflow-x: auto; pointer-events: auto; }
        .chart-overlay.is-fullscreen { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
        .chart-popup { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; }
    }
    @media (pointer: coarse) {
        .chart-manager-item { flex-wrap: wrap; }
        .chart-manager-item__info { flex-basis: calc(100% - 60px); }
        .chart-manager-item :is(.chart-manager-item__find, .chart-manager-item__delete) { flex-basis: 44px; width: 44px; height: 44px; }
        .chart-manager-item__delete { opacity: 1; }
        .chart-toolbar button, .chart-tool, .scanner-panel--chat button { min-height: 44px; min-width: 44px; }
        .chart-draw-toolbar { overflow-y: auto; }
        .scanner-panel--chat .scanner-chat-compose-inner textarea, .chart-overlay :is(input, select, textarea) { font-size: 16px; }
    }
}

/* Smart-Routing-Hinweis im Scanner-Chat: eine Zeile in der Warnfarbe,
   keine Karte, kein eigener Block. */
@layer channels {
    .scanner-chat-note {
        align-self: center;
        max-inline-size: 90%;
        padding: 4px 10px;
        border-radius: var(--radius-chip);
        background: var(--signal-warn-surface);
        color: var(--signal-warn);
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        text-align: center;
    }
}