/* The Bridge - Command Center | Phone-first dark theme */
@import url('design-tokens.css');

:root {
    /* App-specific layout tokens */
    --header-height: 56px;
    --output-collapsed: 44px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }


/* ========== LOGIN SCREEN ========== */

#login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-gradient);
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 28px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.login-icon {
    color: var(--accent);
    margin-bottom: 16px;
}

.login-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--text);
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#login-token {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

#login-token:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-btn {
    padding: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.login-btn:active {
    transform: scale(0.97);
}

.login-error {
    margin-top: 12px;
    color: var(--red);
    font-size: 14px;
}


/* ========== HEADER ========== */

#header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: linear-gradient(180deg, var(--header-gradient-start) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.header-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--text);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.connected {
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}

.status-dot.disconnected {
    background: var(--red);
    box-shadow: 0 0 8px var(--red-glow);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-xs);
    transition: color 0.15s, background 0.15s;
}

.icon-btn:hover, .icon-btn:active {
    color: var(--text);
    background: var(--surface-raised);
}


/* ========== MAIN CONTENT ========== */

#main {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    bottom: var(--output-collapsed);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 16px;
    padding-bottom: calc(20px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
}

.section {
    margin-bottom: 18px;
}

/* Compact section header: label + trailing hairline rule. Shared by the
   app board categories, Tools, and Room Controls so the page reads as one
   consistent system. */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-bright), transparent);
}


/* ========== ROOM CONTROLS ========== */

.room-controls {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
}

.control-row + .control-row {
    border-top: 1px solid var(--border);
}

.control-info {
    display: flex;
    align-items: center;
    gap: 13px;
}

.control-icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex-shrink: 0;
    transition: color 0.2s;
}

.control-icon.muted {
    color: var(--red);
}

.control-icon.caffeinated {
    color: var(--orange);
}

.caffeine-steam {
    transition: opacity 0.3s;
}

.control-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: block;
}

.control-desc {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
    display: inline-block;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-bright);
    border-radius: 15px;
    transition: background 0.25s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}


/* ========== APP DOCK ========== */

/* App Board: tight grouping of category grids so the whole dock reads at a
   single glance. Category headers collapse to a compact hairline rule. */
.app-board {
    margin-bottom: 20px;
}

.app-board .section {
    margin-bottom: 14px;
}

.app-board .section:last-child {
    margin-bottom: 0;
}

.app-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.dock-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 62px;
    padding: 10px 6px;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--tile-color) 22%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    position: relative;
}

@media (hover: hover) {
    .dock-tile:hover {
        border-color: color-mix(in srgb, var(--tile-color) 60%, var(--border));
        background: color-mix(in srgb, var(--tile-color) 7%, var(--surface));
    }
}

.dock-tile:active {
    transform: scale(0.95);
    border-color: var(--tile-color);
}

.dock-icon {
    width: 22px;
    height: 22px;
    color: var(--tile-color);
    flex-shrink: 0;
}

.dock-label {
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0.2px;
}

.dock-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Alerting state: pulse the dock tile when there's an unacked alert.
   Uses the tile-color so it works regardless of which tile gets flagged. */
.dock-tile.has-alerts {
    border-color: var(--tile-color);
    border-width: 2px;
    animation: dock-tile-flash 1s ease-in-out infinite;
    z-index: 1;
}

.dock-tile.has-alerts .dock-icon {
    animation: dock-tile-icon-flash 1s ease-in-out infinite;
}

.dock-tile.has-alerts .dock-badge {
    animation: dock-tile-badge-flash 1s ease-in-out infinite;
}

@keyframes dock-tile-flash {
    0%, 100% {
        background: var(--surface);
        box-shadow: 0 0 0 0 var(--tile-color), 0 0 12px 0 color-mix(in srgb, var(--tile-color) 70%, transparent);
        transform: scale(1);
    }
    50% {
        background: color-mix(in srgb, var(--tile-color) 28%, var(--surface));
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--tile-color) 50%, transparent), 0 0 28px 8px color-mix(in srgb, var(--tile-color) 30%, transparent);
        transform: scale(1.04);
    }
}

@keyframes dock-tile-icon-flash {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
    50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px var(--tile-color)); }
}

@keyframes dock-tile-badge-flash {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
    50%      { transform: scale(1.18); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .dock-tile.has-alerts {
        animation: none;
        border-color: var(--tile-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-color) 50%, transparent), 0 0 16px 0 color-mix(in srgb, var(--tile-color) 40%, transparent);
        background: color-mix(in srgb, var(--tile-color) 18%, var(--surface));
    }
    .dock-tile.has-alerts .dock-icon,
    .dock-tile.has-alerts .dock-badge {
        animation: none;
    }
}


/* ========== TOOLS GRID ========== */

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 62px;
    padding: 10px 6px;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--tool-color) 22%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.tool-btn svg { color: var(--tool-color); flex-shrink: 0; width: 22px; height: 22px; }
@media (hover: hover) {
    .tool-btn:hover {
        border-color: color-mix(in srgb, var(--tool-color) 60%, var(--border));
        background: color-mix(in srgb, var(--tool-color) 7%, var(--surface));
    }
}
.tool-btn:active { transform: scale(0.95); border-color: var(--tool-color); }
.tool-btn.running { opacity: 0.6; pointer-events: none; }
.tool-btn.running svg { animation: spin 1s linear infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ========== PANELS ========== */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    animation: panel-in 0.2s ease;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.panel-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.panel-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    line-height: 1;
}

.panel-close:active {
    background: var(--surface-raised);
    color: var(--text);
}
/* ========== TRADING PANEL ========== */

.trading-content {
    padding: 16px;
}

.trading-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.trading-stat {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

.trading-stat-value {
    font-size: 20px;
    font-weight: 800;
}

.trading-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.pnl-positive { color: var(--green); }
.pnl-negative { color: var(--red); }

.trading-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.trading-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}

.trading-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.trading-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 8px;
}

.text-muted { color: var(--text-muted); }


/* ========== PORTFOLIO PANEL ========== */

.portfolio-total {
    text-align: center;
    padding: 16px 0 8px;
}

.portfolio-total-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.5px;
}

.portfolio-total-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.portfolio-prices {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.portfolio-wallet-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 10px 0 4px;
}

.portfolio-wallet-label .text-muted {
    font-weight: 400;
    font-family: monospace;
    font-size: 11px;
}

.portfolio-timestamp {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 0 4px;
}


/* ========== CAST PANEL ========== */

.cast-content {
    padding: 0;
}

.cast-input-row {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

#cast-url {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

#cast-url:focus {
    border-color: var(--purple);
}

.cast-go-btn {
    width: 48px;
    height: 48px;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, opacity 0.15s;
}

.cast-go-btn:active {
    transform: scale(0.93);
}

.cast-go-btn.casting {
    pointer-events: none;
    background: color-mix(in srgb, var(--purple) 60%, var(--bg));
}

.cast-go-spinner { display: none; }
.cast-go-btn.casting .cast-go-icon { display: none; }
.cast-go-btn.casting .cast-go-spinner { display: block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cast-quick-btn.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.cast-quick-btn.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    border-top-color: var(--qc-color);
    animation: spin 0.8s linear infinite;
}

.cast-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.cast-platform-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple);
}

.cast-status-display {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

/* Favorites grid */
.cast-favorites-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.cast-favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.cast-fav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: var(--bg);
    border: 1.5px solid color-mix(in srgb, var(--fav-color) 30%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.cast-fav-btn:active {
    transform: scale(0.96);
    border-color: var(--fav-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--fav-color) 25%, transparent);
}

.cast-fav-btn.casting {
    border-color: var(--fav-color);
    background: color-mix(in srgb, var(--fav-color) 10%, var(--bg));
    pointer-events: none;
}

.cast-fav-btn.casting .cast-fav-dot {
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.cast-fav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fav-color);
    flex-shrink: 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--fav-color) 40%, transparent);
}

.cast-fav-info {
    flex: 1;
    min-width: 0;
}

.cast-fav-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.cast-fav-platform {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 2px;
}

.cast-volume-section {
    padding: 8px 16px 12px;
}

.cast-volume-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cast-volume-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cast-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cast-volume-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.cast-volume-btn:hover {
    border-color: var(--accent, #4a9eff);
    color: var(--accent, #4a9eff);
}

.cast-volume-btn:active {
    transform: scale(0.92);
}

.cast-volume-btn.muted {
    background: color-mix(in srgb, #ff5c5c 20%, var(--bg));
    border-color: #ff5c5c;
    color: #ff5c5c;
}

.cast-volume-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.cast-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4a9eff;
    cursor: pointer;
    border: 2px solid var(--bg);
}

.cast-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4a9eff;
    cursor: pointer;
    border: 2px solid var(--bg);
}

.cast-volume-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cast-quick-section {
    padding: 12px 16px;
}

.cast-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.cast-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.cast-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--qc-color) 25%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.cast-quick-btn svg {
    color: var(--qc-color);
    flex-shrink: 0;
}

.cast-quick-btn:active {
    transform: scale(0.96);
    border-color: var(--qc-color);
}

/* Stream discovery cards */
.stream-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 12px 0 8px;
}

.stream-group-label:first-child {
    margin-top: 0;
}

.stream-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--surface-raised);
    border: 1.5px solid color-mix(in srgb, var(--sc-color) 25%, var(--border));
    border-left: 4px solid var(--sc-color);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-size: inherit;
}

.stream-card:active {
    transform: scale(0.98);
    border-color: var(--sc-color);
    background: color-mix(in srgb, var(--sc-color) 8%, var(--surface-raised));
}

.stream-card.casting {
    border-color: var(--sc-color);
    background: color-mix(in srgb, var(--sc-color) 12%, var(--surface-raised));
    box-shadow: 0 0 8px color-mix(in srgb, var(--sc-color) 30%, transparent);
}

.stream-card.casting .stream-card-plat::after {
    content: ' \25B6';
}

.stream-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.stream-card-plat {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--sc-color);
}

.stream-card-viewers {
    font-size: 11px;
    color: var(--text-muted);
}

.stream-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-card-channel {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ========== TOTP (2FA) PANEL ========== */

.totp-services {
    display: flex;
    flex-direction: column;
}

.totp-content + .totp-content {
    border-top: 1px solid var(--border);
}

.totp-content {
    padding: 20px 16px;
}

.totp-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 16px;
}

.totp-code {
    font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--text);
    user-select: all;
    line-height: 1;
}

.totp-code.totp-expiring {
    color: var(--red);
    animation: totp-blink 0.5s ease-in-out infinite;
}

@keyframes totp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.totp-copy-btn {
    background: var(--surface-raised);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.totp-copy-btn:active {
    transform: scale(0.93);
    border-color: var(--accent);
    color: var(--accent);
}

.totp-copy-btn.copied {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, var(--surface-raised));
}

.totp-timer-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.totp-timer-fill {
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width 1s linear, background 0.3s;
}

.totp-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.totp-service {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.totp-remaining {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', monospace;
}


/* ========== TASK TRACKER (NEEDLE MOVER) ========== */

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header-actions .task-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.panel-header-actions .task-action-btn svg {
    flex-shrink: 0;
}

.panel-header-actions .task-action-btn.syncing svg {
    animation: spin 1s linear infinite;
}

.tasks-summary {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 6%, var(--surface)) 0%, var(--surface) 100%);
}

.tasks-summary-stats {
    display: flex;
    gap: 8px;
}

.tasks-stat {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.tasks-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--green);
    line-height: 1.2;
}

.tasks-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.stale-alert {
    margin-top: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--orange) 12%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border));
    border-radius: var(--radius-xs);
    font-size: 12px;
    color: var(--orange);
    line-height: 1.4;
}

/* Add Task Form */
.task-add-form {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

#task-title-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

#task-title-input:focus {
    border-color: var(--green);
}

/* Size select removed - no longer needed */

.task-add-btn {
    width: 44px;
    height: 44px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}

.task-add-btn:active {
    transform: scale(0.93);
}

/* Task List */
.tasks-list {
    max-height: 60vh;
    overflow-y: auto;
}

.tasks-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Task Card */
.task-card {
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s;
    margin: 0 4px;
}

.task-card + .task-card {
    margin-top: 2px;
}

.task-card:last-child {
    border-bottom: none;
}

.task-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.task-card.copied {
    background: rgba(74, 158, 255, 0.15);
    transition: background 0.1s;
}

.task-card.copied .task-title::after {
    content: ' copied';
    color: var(--accent);
    font-size: 0.75em;
    opacity: 0.8;
}

.microtask-text {
    -webkit-touch-callout: none;
    touch-action: manipulation;
    /* Task lines carry their full detail (see _derive_title in sync_tasks.py).
       Clamp to three lines so the list stays scannable; tap toggles the rest. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.microtask-text.micro-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Only hint at tappability on rows that actually have something hidden. */
.microtask-text.micro-clampable {
    cursor: pointer;
}

.microtask-text.micro-copied {
    color: var(--accent);
    transition: color 0.1s;
}

.microtask-text.micro-copied::after {
    content: ' copied';
    font-size: 0.75em;
    opacity: 0.8;
}

/* Needle Indicator (auto — shows if you moved the needle today) */
.task-needle-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid var(--border-bright);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-top: 2px;
}

.task-needle-indicator:active {
    transform: scale(0.85);
}

/* Flagged for today — orange ring with center dot (intent to work) */
.task-needle-indicator.flagged {
    border-color: var(--orange);
    background: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 20%, transparent);
}

.task-needle-indicator.flagged::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
}

/* Needle moved today — blue ring with filled center dot (active/progress) */
.task-needle-indicator.moved {
    border-color: var(--accent);
    background: transparent;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.task-needle-indicator.moved::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

/* Task fully done — filled green with checkmark */
.task-needle-indicator.done {
    border-color: var(--green);
    background: var(--green);
}

.task-needle-indicator.done::after {
    content: '';
    width: 7px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Stale — no progress in 3+ days, red outline pulse */
.task-needle-indicator.stale {
    border-color: var(--red);
    animation: stale-pulse 2s ease-in-out infinite;
}

@keyframes stale-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 25%, transparent); }
    50% { box-shadow: 0 0 0 5px transparent; }
}

/* Task card with needle moved today gets subtle blue accent */
.task-card.moved-today {
    border-left: 3px solid var(--accent);
}

.task-card.moved-today .task-card-header {
    padding-left: 13px;
}

/* Task Info */
.task-info {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    /* show the full task text — no line clamp, wrap as many lines as needed */
    /* break long unbroken strings (URLs, IDs) instead of overflowing the card */
    overflow-wrap: anywhere;
}

.task-card[data-status="deferred"] .task-title {
    color: var(--text-secondary);
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Status indicators (shown in meta area) */
.task-focus-indicator {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-deferred-indicator {
    font-size: 10px;
    font-weight: 700;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Focus action button */
.task-action-btn.focus {
    color: var(--accent);
    border-color: var(--accent);
}

.task-action-btn.defer {
    color: var(--yellow);
    border-color: var(--yellow);
}

/* Completed task card */
.task-card.completed {
    opacity: 0.5;
}

.task-card.completed .task-title {
    text-decoration: line-through;
}

/* Completion celebration: a green sweep crosses the card, then it slides right
   and fades out. The card is filtered off the board on the next loadTasks();
   this plays first so finishing a task feels like it landed. */
.task-card.completing {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    animation: task-complete-out 0.46s ease forwards;
}
.task-card.completing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent 0%,
        var(--green-glow) 38%,
        color-mix(in srgb, var(--green) 45%, transparent) 50%,
        var(--green-glow) 62%,
        transparent 100%);
    animation: task-complete-sweep 0.42s ease forwards;
}
@keyframes task-complete-sweep {
    to { transform: translateX(100%); }
}
@keyframes task-complete-out {
    0%   { opacity: 1; transform: translateX(0); }
    45%  { opacity: 1; transform: translateX(4px); }
    100% { opacity: 0; transform: translateX(48px); }
}
@media (prefers-reduced-motion: reduce) {
    .task-card.completing { animation: none; opacity: 0; }
    .task-card.completing::after { display: none; }
}

/* Stale label */
.task-stale-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--red);
    opacity: 0.8;
}

/* "targets set" label — microtasks flagged for today */
.task-has-targets {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--orange);
}

/* Done action button */
.task-action-btn.complete {
    color: var(--green);
    border-color: var(--green);
    font-weight: 700;
}

.task-project-tag {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.task-sourced-indicator {
    display: none;
}

.task-unsourced-indicator {
    font-size: 8px;
    color: var(--amber);
    opacity: 0.5;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-source-select {
    padding: 8px 10px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    outline: none;
    max-width: 180px;
    transition: border-color 0.2s;
}

.task-source-select:focus {
    border-color: var(--green);
}

.task-source-select.flash-warning {
    border-color: var(--amber);
    animation: flash-border 0.3s ease 2;
}

@keyframes flash-border {
    50% { border-color: var(--red); }
}

.task-micro-count {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
}

/* Micro progress bar in header */
.task-micro-bar {
    width: 48px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.task-micro-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Expand arrow */
.task-expand-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
    margin-top: 4px;
    opacity: 0.4;
}

.task-card.expanded .task-expand-arrow {
    transform: rotate(180deg);
}

/* Task Body (expanded) */
.task-body {
    display: none;
    padding: 0 16px 14px;
    border-top: 1px solid var(--border-subtle);
    margin-top: -2px;
}

.task-card.expanded .task-body {
    display: block;
}

/* Deferred reason display */
.task-deferred-info {
    padding: 8px 12px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--yellow) 8%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--yellow) 20%, var(--border));
    border-radius: var(--radius-xs);
    font-size: 12px;
    color: var(--yellow);
}

/* Needle log */
.task-needle-section {
    margin-bottom: 10px;
}

.task-needle-entry {
    font-size: 12px;
    color: var(--green);
    padding: 4px 0;
}

.task-needle-entry span {
    color: var(--text-muted);
    margin-right: 6px;
}

/* Microtask list */
.microtask-list {
    margin-bottom: 10px;
}

.microtask-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

/* Microtask flag (tackle today) button */
.micro-flag-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-bright);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    font-size: 10px;
}

.micro-flag-btn:hover {
    border-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 10%, transparent);
}

.micro-flag-btn.active {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
}

.micro-flag-btn.active::after {
    content: '!';
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.micro-flag-btn.worked {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
}

.micro-flag-btn.worked::after {
    content: '✓';
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.micro-flag-btn.done {
    border-color: var(--green);
    background: var(--green);
    cursor: default;
}

.micro-flag-btn.done::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Flagged microtask row highlight */
.microtask-item.micro-flagged {
    background: color-mix(in srgb, var(--orange) 5%, transparent);
    border-radius: 4px;
    margin: 0 -4px;
    padding: 8px 4px;
}

.microtask-item.micro-done {
    opacity: 0.5;
}

/* v5: Nested microtask depth indentation. The padding-left inline style
   handles spacing; these classes add subtle visual hierarchy markers. */
.microtask-item.depth-1 {
    border-left: 2px solid var(--border-subtle);
    margin-left: 4px;
}
.microtask-item.depth-2 {
    border-left: 2px solid var(--border-subtle);
    margin-left: 8px;
    opacity: 0.97;
}
.microtask-item.depth-3 {
    border-left: 2px solid var(--border-subtle);
    margin-left: 12px;
    opacity: 0.94;
}
.microtask-item.depth-4,
.microtask-item.depth-5 {
    border-left: 2px solid var(--border-subtle);
    margin-left: 16px;
    opacity: 0.9;
}

/* v5: Add-child button — small + that appears on hover */
.microtask-add-child-btn {
    opacity: 0;
    transition: opacity 0.15s;
    background: transparent;
    border: 1px dashed var(--border-bright);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.microtask-item:hover .microtask-add-child-btn {
    opacity: 1;
}
.microtask-add-child-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.microtask-text {
    flex: 1;
    cursor: default;
    font-size: 14px;
    color: var(--text);
    word-break: break-word;
    user-select: none;
}

.microtask-text.done {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Complete button — small checkmark, two-tap to confirm */
.micro-complete-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1.5px solid var(--border-bright);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    transition: all 0.15s;
    padding: 0;
}

.micro-complete-btn:hover {
    border-color: var(--green);
    color: var(--green);
}


/* Touch devices (no hover): enlarge the crowded microtask controls toward
   real tap targets, and always reveal the add-child "+" — on touch there is
   no hover to surface it. Desktop keeps its compact sizing. */
@media (hover: none) {
    .micro-flag-btn { width: 30px; height: 30px; }
    .micro-complete-btn { width: 34px; height: 34px; }
    .microtask-add-child-btn { opacity: 1; width: 30px; height: 30px; }
    .micro-undo-btn { padding: 6px 10px; }
}

/* Undo button for completed microtasks */
.micro-undo-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.micro-undo-btn:active {
    opacity: 1;
    color: var(--orange);
}

.micro-completed-toggle {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.micro-completed-toggle:hover {
    color: var(--text);
}

.microtask-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.microtask-delete:active {
    opacity: 1;
    color: var(--red);
}

/* Add microtask inline */
.microtask-add-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.microtask-add-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.microtask-add-input:focus {
    border-color: var(--green);
}

.microtask-add-btn {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--green) 20%, var(--bg));
    border: 1.5px solid color-mix(in srgb, var(--green) 30%, var(--border));
    border-radius: var(--radius-xs);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.microtask-add-btn:active {
    background: color-mix(in srgb, var(--green) 30%, var(--bg));
}

/* Task notes */
.task-notes-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: 13px;
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    outline: none;
    font-family: inherit;
    margin-top: 8px;
}

.task-notes-input:focus {
    border-color: var(--accent);
}

/* Task actions row */
.task-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.task-action-btn {
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.task-action-btn:active {
    background: var(--surface-raised);
}

.task-action-btn.danger {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 25%, var(--border));
}

.task-action-btn.danger:active {
    background: color-mix(in srgb, var(--red) 10%, var(--bg));
}

.task-action-btn.needle {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 25%, var(--border));
}

/* Today needle badge on card */
.task-needle-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px color-mix(in srgb, var(--green) 40%, transparent);
    flex-shrink: 0;
}

/* Stale warning dot */
.task-stale-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 6px color-mix(in srgb, var(--orange) 40%, transparent);
    flex-shrink: 0;
    animation: stale-blink 2s ease-in-out infinite;
}

@keyframes stale-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Defer Modal */
.defer-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.defer-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 340px;
}

.defer-modal-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}

#defer-reason {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    outline: none;
    margin-bottom: 16px;
}

#defer-reason:focus {
    border-color: var(--yellow);
}

.defer-modal-actions {
    display: flex;
    gap: 10px;
}

.defer-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.defer-cancel {
    background: var(--surface-raised);
    color: var(--text-muted);
}

.defer-confirm {
    background: var(--yellow);
    color: var(--text-on-light);
}


/* ========== OUTPUT PANEL ========== */

#output-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--surface);
    border-top: 1px solid var(--border);
    transition: height 0.25s ease;
    display: flex;
    flex-direction: column;
}

#output-panel.collapsed {
    height: var(--output-collapsed);
}

#output-panel.expanded {
    height: 45vh;
}

.output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    flex-shrink: 0;
    min-height: var(--output-collapsed);
    user-select: none;
}

#output-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

#output-title.active {
    color: var(--accent);
}

.output-controls {
    display: flex;
    gap: 8px;
}

.output-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-xs);
    transition: color 0.15s;
}

.output-btn:hover, .output-btn:active {
    color: var(--text);
}

#output-panel.expanded #output-toggle svg {
    transform: rotate(180deg);
}

.output-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px 16px;
    display: none;
}

#output-panel.expanded .output-body {
    display: block;
}

#output-text {
    font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}


/* ========== RESPONSIVE ========== */

@media (min-width: 600px) {
    .app-dock {
        grid-template-columns: repeat(5, 1fr);
    }
    #main {
        padding: 24px 20px;
    }
    .dock-tile {
        min-height: 68px;
    }
}

@media (min-width: 900px) {
    #main {
        max-width: 800px;
        margin: 0 auto;
        padding: 28px 24px;
    }
}


/* ========== SCROLLBAR ========== */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-bright);
}


/* ========== RESPONSIVE ========== */

@media (min-width: 600px) {
    .app-dock { grid-template-columns: repeat(5, 1fr); }
    .tools-grid { grid-template-columns: repeat(6, 1fr); }
    .cast-favorites-grid { grid-template-columns: repeat(3, 1fr); }
    .cast-quick-grid { grid-template-columns: repeat(4, 1fr); }
    .trading-stat-row { gap: 16px; }
}

@media (min-width: 1024px) {
    #main { max-width: 720px; margin: 0 auto; }
    .app-dock { grid-template-columns: repeat(6, 1fr); }
}

/* ==================== Toasts (action feedback) ==================== */
#toast-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
}

.toast {
    max-width: 360px;
    width: fit-content;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised, #1a2230);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-error { border-color: var(--red); }
.toast-success { border-color: var(--green); }

/* Completion toast with an inline Undo. #toast-host is pointer-events:none, so
   re-enable events here to make the button clickable. */
.toast-with-action {
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}
.toast-undo {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green-bright, var(--green));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.toast-undo:hover { background: var(--green); color: var(--bg); }
.toast-undo:active { transform: scale(0.95); }

/* Generic input modal — reuses .defer-modal chrome, needs its own field rule */
#input-modal-field {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    outline: none;
    margin-bottom: 16px;
}

#input-modal-field:focus {
    border-color: var(--accent);
}

/* Owner filter (2026-09-02): whose items the board shows. Mine = Al's + unassigned. */
.owner-filter {
    display: flex;
    gap: 6px;
    margin: 6px 0 10px;
}
.owner-chip {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted, inherit);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.8em;
    cursor: pointer;
}
.owner-chip.active {
    border-color: var(--accent, currentColor);
    color: var(--accent, inherit);
    font-weight: 600;
}
/* Per-item owner badge: shown only in the All view, where it carries information. */
.micro-owner {
    display: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    font-size: 0.65em;
    text-align: center;
    border: 1px solid var(--border-subtle);
    opacity: 0.8;
}
.tasks-list[data-owner-filter="all"] .micro-owner { display: inline-block; }
.micro-owner.claude { border-style: dashed; }
.micro-owner.unassigned { opacity: 0.5; }

/* ==================== ALERT RAIL (desktop side gutter) ====================
   At >=1024px #main is a 720px column centred in the window, which leaves
   (100vw - 720px) / 2 of dead space on each side: 600px at 1920, 323px at
   1366. The vertical is already spoken for, so live alerts go in the right
   gutter instead of pushing the tiles down. Below 1360px there is no gutter
   to spend and nothing here renders at all, so the phone is untouched. */

#alert-rail { display: none; }

@media (min-width: 1360px) {
    #alert-rail {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        top: var(--header-height);
        bottom: var(--output-collapsed);
        right: 0;
        /* Fill the gutter rather than float as a sliver in it, but never get
           so wide that a row turns into a paragraph. */
        width: clamp(280px, calc((100vw - 720px) / 2 - 40px), 400px);
        padding: 28px 20px 20px 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 5;
    }
}

.rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 2px 2px;
}

.rail-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rail-all {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
}

.rail-all:hover { color: var(--accent-bright); }

.rail-item {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--tier, var(--text-muted));
    border-radius: var(--radius-sm);
    padding: 9px 30px 9px 11px;
    text-decoration: none;
    color: inherit;
}

.rail-item:hover { background: var(--surface-raised); border-color: var(--border); }

/* The canary tier: a bait file was opened. Loudest thing the box can say. */
.rail-item.tier-max     { --tier: var(--red);   background: linear-gradient(90deg, var(--red-glow), var(--surface) 55%); }
.rail-item.tier-urgent  { --tier: var(--red); }
.rail-item.tier-high    { --tier: var(--orange); }
.rail-item.tier-default { --tier: var(--accent); }
.rail-item.tier-low     { --tier: var(--text-dimmed); }
.rail-item.tier-min     { --tier: var(--border); }

.rail-topic {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tier, var(--text-muted));
}

.rail-count {
    background: var(--surface-overlay);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 0 5px;
    font-size: 0.6rem;
    letter-spacing: 0;
}

.rail-msg {
    margin: 3px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    /* Three lines is enough to know what happened; the rest is on /alerts. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rail-age {
    margin-top: 3px;
    font-size: 0.64rem;
    color: var(--text-dimmed);
}

.rail-clear {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 22px;
    height: 22px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text-dimmed);
    font-size: 15px;
    cursor: pointer;
}

.rail-clear:hover { background: var(--surface-overlay); color: var(--text); }

.rail-more {
    text-align: center;
    padding: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
}

.rail-more:hover { color: var(--accent-bright); }