html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #212529;
    color: #f8f9fa;
}

/* Split layout */
.chat-panel {
    width: 50%;
    height: 100%;
    border-left: 1px solid #343a40;
}

.trade-panel {
    width: 50%;
    height: 100%;
}

.panel-header {
    background-color: #1a1d21;
    border-bottom: 1px solid #343a40;
}

/* Chat container */
.chat-messages {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #495057 transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 3px;
}

/* Message bubbles */
.message-user {
    background-color: #0d6efd;
    color: white;
    border-radius: 1rem 1rem 0.25rem 1rem;
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    word-wrap: break-word;
    font-size: 0.9rem;
}

.message-assistant {
    background-color: #2b3035;
    color: #f8f9fa;
    border-radius: 1rem 1rem 1rem 0.25rem;
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    word-wrap: break-word;
    font-size: 0.9rem;
}

.message-assistant code {
    background-color: #1a1d21;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.message-assistant pre {
    background-color: #1a1d21;
    padding: 0.75rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-assistant pre code {
    padding: 0;
    background: none;
}

/* Markdown in assistant messages */
.message-assistant p {
    margin-bottom: 0.4rem;
}

.message-assistant p:last-child {
    margin-bottom: 0;
}

.message-assistant ul, .message-assistant ol {
    padding-left: 1.2rem;
    margin-bottom: 0.4rem;
}

/* Input area */
.chat-input-area {
    background-color: #1a1d21;
    border-top: 1px solid #343a40;
}

/* Recommendation cards */
.recommendation-area {
    background-color: #1a1d21;
    border-top: 1px solid #343a40;
}

.rec-card {
    border: 1px solid #495057;
}

.rec-long {
    border-left: 4px solid #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

.rec-short {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Market hours indicators */
.market-clocks span { white-space: nowrap; }

.market-open {
    color: #198754;
    font-size: 0.6rem;
    font-weight: bold;
    background: rgba(25, 135, 84, 0.2);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.2rem;
}

.market-closed {
    color: #6c757d;
    font-size: 0.6rem;
    margin-left: 0.2rem;
}

/* P&L chart */
.pnl-chart-container {
    height: 200px;
    min-height: 180px;
    max-height: 220px;
    overflow: hidden;
}

/* Image drop & preview */
.chat-panel.drag-over {
    outline: 2px dashed #ffc107;
    outline-offset: -4px;
}

.image-preview-area {
    background-color: #1a1d21;
    border-top: 1px solid #343a40;
}

.img-preview {
    height: 60px;
    width: auto;
    border: 1px solid #495057;
}

/* Quick action buttons */
.quick-actions {
    background-color: #1a1d21;
    border-bottom: 1px solid #343a40;
}

/* Trade journal cards */
.trade-card {
    border: 1px solid #3a3f44;
    font-size: 0.8rem;
    color: #e9ecef;
    cursor: pointer;
    transition: background-color 0.15s;
}

.trade-card:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.trade-card.expanded {
    border-color: #6c757d;
}

.trade-chevron {
    font-size: 0.6rem;
    color: #6c757d;
}

.trade-entry-compact {
    color: #6c757d;
    font-size: 0.75rem;
}

.trade-header {
    min-height: 28px;
}

.trade-detail {
    border-top: 1px solid #333;
    padding-top: 0.4rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

.trade-symbol {
    color: #f8f9fa;
    font-size: 0.9rem;
}

.trade-direction {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.4rem;
}

.dir-long {
    background: rgba(25, 135, 84, 0.3);
    color: #75b798;
}

.dir-short {
    background: rgba(220, 53, 69, 0.3);
    color: #ea868f;
}

.trade-details {
    margin-top: 0.4rem;
    color: #ced4da;
    font-size: 0.78rem;
}

.trade-details .sl { color: #ea868f; }
.trade-details .tp { color: #75b798; }

.trade-time {
    color: #6c757d;
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.trade-reasoning {
    color: #adb5bd;
    font-size: 0.72rem;
    margin-top: 0.3rem;
    font-style: italic;
}

.trade-lesson {
    color: #ffc107;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}

.trade-open {
    border-left: 4px solid #0dcaf0;
    background-color: rgba(13, 202, 240, 0.08);
}

.trade-win {
    border-left: 4px solid #198754;
    background-color: rgba(25, 135, 84, 0.08);
}

.trade-loss {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
}

/* Error UI (hidden — errors redirect to /error page) */
#blazor-error-ui {
    display: none !important;
}

#blazor-error-ui .error-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #dc3545;
    color: white;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 3px;
}

#blazor-error-ui .error-detail {
    padding: 0.5rem 1rem;
    max-height: 35vh;
    overflow-y: auto;
}

#blazor-error-ui .error-entry {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #333;
}

#blazor-error-ui .error-msg {
    color: #ff6b6b;
    font-weight: bold;
}

#blazor-error-ui .error-stack {
    color: #adb5bd;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0.3rem 0 0 0;
}

#blazor-error-ui .error-actions {
    padding: 0.5rem 1rem;
    border-top: 1px solid #333;
}

#blazor-error-ui .error-actions .reload {
    color: #ffc107;
    text-decoration: none;
}

/* Error page */
.error-block {
    background: #1a1a2e;
    border: 1px solid #dc3545;
    border-radius: 0.5rem;
    overflow: hidden;
}

.error-block-header {
    padding: 0.5rem 1rem;
    background: rgba(220, 53, 69, 0.15);
    border-bottom: 1px solid #333;
}

.error-block-message {
    padding: 0.75rem 1rem;
    color: #ff6b6b;
    font-weight: bold;
    font-size: 0.95rem;
}

.error-block-stack {
    padding: 0.75rem 1rem;
    margin: 0;
    color: #adb5bd;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    background: #0d0d1a;
    max-height: 300px;
    overflow-y: auto;
}

/* Loading animation — candlestick chart */
.loading-animation {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem !important;
    overflow: hidden;
}

.candle-chart {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 36px;
    flex-shrink: 0;
}

.candle {
    width: 5px;
    position: relative;
    border-radius: 1px;
    animation: candle-grow 1.6s ease-in-out infinite;
    animation-delay: var(--delay);
}

.candle::before,
.candle::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.candle::before {
    bottom: 100%;
    height: var(--wick-top);
}

.candle::after {
    top: 100%;
    height: var(--wick-bottom);
}

.candle.green {
    background: #198754;
    height: var(--height);
}

.candle.green::before,
.candle.green::after {
    background: #40916c;
}

.candle.red {
    background: #dc3545;
    height: var(--height);
}

.candle.red::before,
.candle.red::after {
    background: #e5636e;
}

@keyframes candle-grow {
    0%, 100% {
        opacity: 0.35;
        transform: scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.loading-dots .dot {
    animation: dot-blink 1.4s infinite;
    opacity: 0;
}

.loading-dots .dot:nth-child(1) { animation-delay: 0s; }
.loading-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Responsive — on mobile stack vertically */
@media (max-width: 768px) {
    .chat-panel, .trade-panel {
        width: 100%;
    }
    .trade-panel {
        display: none;
    }
    .chat-panel {
        border-left: none;
    }
}