/* ═══════════════ AI Chat Widget — Chatbot Interface ═══════════════
   Styles for: chat header (persona selector, context badge),
   message bubbles, follow-up suggestions, input area,
   markdown rendering, code blocks, loading indicators,
   tool status indicators, UI components (cards, confirmations),
   responsive welcome screen (ResizeObserver breakpoints)
   ═════════════════════════════════════════════════════════════════ */

/* ═══════════════ Chat Header ═══════════════ */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 8px;
}
.ai-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ai-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ai-header-logo {
    border-radius: 6px;
    flex-shrink: 0;
}
.ai-chat-header-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

/* ─── Model Toggle (Nero Bot / Nero Bot V2) ─── */
.ai-model-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid var(--border);
}
.ai-model-toggle.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.ai-model-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.ai-model-btn:hover {
    color: var(--text-primary);
}
.ai-model-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.ai-model-btn.active[data-model="gemini"] {
    background: linear-gradient(135deg, #4285f4, #8e24aa);
}
.ai-header-context {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-muted);
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ai-new-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}
.ai-new-chat-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-muted);
}

/* ═══════════════ Persona Selector ═══════════════ */
.ai-persona-selector {
    position: relative;
}
.ai-persona-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 14px;
    line-height: 1;
}
.ai-persona-btn:hover {
    border-color: var(--accent);
    background: var(--accent-muted);
}
.ai-persona-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
    animation: msgIn 150ms ease;
}
.ai-persona-dropdown.open {
    display: block;
}
.ai-persona-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font);
}
.ai-persona-option:hover {
    background: var(--bg-hover);
}
.ai-persona-option.active {
    background: var(--accent-muted);
}
.ai-persona-opt-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.ai-persona-opt-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ai-persona-opt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.ai-persona-opt-desc {
    font-size: 10px;
    color: var(--text-muted);
}

.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Flexbox scroll fix */
    container-type: inline-size;
    container-name: ai-chat;
}

.ai-message {
    display: flex;
    gap: 8px;
    animation: msgIn 200ms ease;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Assistant avatar (Nero "N" icon) */
.ai-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.ai-avatar svg {
    filter: drop-shadow(0 2px 6px rgba(108, 92, 231, 0.25));
}

.ai-message-content {
    flex: 1;
    min-width: 0;
}
.ai-message-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
}
/* Coin logos in AI messages — inline, minimal */
.ai-message-text img.ai-coin-logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: -3px 4px 0 0;
    border-radius: 50%;
    object-fit: contain;
    background: var(--bg-tertiary);
}

/* ─── Container-relative image system ─── */
/* Widget boyutuna göre dinamik ölçeklenen görseller.
   Container query, chat-messages alanına uygulanır (widget genişliği). */

/* Rich images — kompakt thumbnail kart, tıklayınca lightbox */
.ai-rich-image-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    margin: 6px 0;
    padding: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.ai-rich-image-card:hover {
    border-color: var(--accent, #6c5ce7);
    box-shadow: 0 2px 12px rgba(108, 92, 231, 0.15);
    transform: translateY(-1px);
}
.ai-rich-image-card .ai-rich-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-tertiary);
}
.ai-rich-image-card .ai-rich-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-rich-image-card .ai-rich-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.ai-rich-image-card .ai-rich-hint {
    font-size: 9px;
    color: var(--text-muted, var(--text-secondary));
    display: flex;
    align-items: center;
    gap: 3px;
}
.ai-rich-image-card .ai-rich-hint svg {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}
@container ai-chat (max-width: 240px) {
    .ai-rich-image-card { max-width: 100%; }
    .ai-rich-image-card .ai-rich-thumb { width: 44px; height: 44px; min-width: 44px; }
    .ai-rich-image-card .ai-rich-label { font-size: 10px; }
}

/* Image gallery — widget genişliğine göre 1/2/3 sütun */
.ai-image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 8px 0;
}
.ai-image-gallery-item {
    position: relative;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ai-image-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.ai-image-gallery-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.ai-image-gallery-caption {
    padding: 4px 6px;
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Container queries — widget küçükken tek sütun, büyükken 3 sütun */
@container (max-width: 280px) {
    .ai-image-gallery { grid-template-columns: 1fr; }
    .ai-message-text img.ai-rich-image { aspect-ratio: 4 / 3; }
}
@container (min-width: 500px) {
    .ai-image-gallery { grid-template-columns: 1fr 1fr 1fr; }
}

/* Lightbox overlay */
.ai-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
    animation: aiLightboxIn 0.2s ease;
}
@keyframes aiLightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ai-lightbox img {
    max-width: 95%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.ai-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.ai-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.ai-lightbox-caption {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    max-width: 80%;
    text-align: center;
    background: rgba(0,0,0,0.5);
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
/* User messages: right-aligned bubble, no avatar */
.ai-message.user {
    justify-content: flex-end;
}
.ai-message.user .ai-message-content {
    flex: none;
    max-width: 85%;
}
.ai-message.user .ai-message-text {
    background: var(--accent-muted);
    padding: 8px 12px;
    border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
    color: var(--text-primary);
}
/* Assistant messages: left-aligned with avatar */
.ai-message.assistant .ai-message-content {
    max-width: 95%;
}

/* Markdown rendering */
.ai-message-text p { margin-bottom: 6px; }
.ai-message-text p:last-child { margin-bottom: 0; }
.ai-message-text strong { color: var(--text-primary); font-weight: 600; }
.ai-message-text em { color: var(--text-secondary); }
.ai-message-text code {
    background: var(--bg-primary);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.ai-message-text pre {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    margin: 6px 0;
    overflow-x: auto;
    position: relative;
}
.ai-message-text pre code {
    background: none;
    padding: 0;
    font-size: 11px;
}
.ai-message-text ul, .ai-message-text ol {
    padding-left: 18px;
    margin: 4px 0;
}
.ai-message-text li { margin-bottom: 2px; }
.ai-message-text a {
    color: var(--accent);
    text-decoration: none;
}
.ai-message-text a:hover { text-decoration: underline; }
.ai-message-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 6px 0;
}
.ai-message-text th, .ai-message-text td {
    padding: 4px 8px;
    border: 1px solid var(--border);
    text-align: left;
}
.ai-message-text th {
    background: var(--bg-secondary);
    font-weight: 600;
}

/* ═══════════════ AI Actions (copy, regenerate) ═══════════════ */
.ai-message-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}
.ai-message:hover .ai-message-actions {
    opacity: 1;
}
.ai-action-btn {
    padding: 2px 6px;
    font-size: 10px;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--transition);
}
.ai-action-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--bg-hover);
}
/* Copy success feedback (green checkmark state) */
.ai-action-btn--done {
    color: var(--green) !important;
    border-color: var(--green-border) !important;
}

/* ═══════════════ Error Message ═══════════════ */
.ai-error-msg {
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
}

/* ═══════════════ Tool Status (Pill Badges) ═══════════════ */
.ai-tool-status {
    margin-bottom: 6px;
    animation: msgIn 200ms ease;
}
.ai-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all var(--transition);
}
.ai-tool-pill.done {
    color: var(--green);
    border-color: var(--green-border);
    background: var(--green-bg);
}
.ai-tool-pill.fail {
    color: var(--red);
    border-color: var(--red-border);
    background: var(--red-bg);
}

/* Tool spinner */
.ai-tool-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: toolSpin 0.8s linear infinite;
}
@keyframes toolSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════ UI Components (cards) ═══════════════ */
.ai-ui-component {
    margin-top: 6px;
}
.ai-ui-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 12px;
    animation: msgIn 200ms ease;
}
.ai-ui-card-header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.ai-ui-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-ui-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.ai-ui-row span { color: var(--text-secondary); }
.ai-ui-row strong { color: var(--text-primary); }
.ai-ui-row .green { color: var(--green); }
.ai-ui-row .red { color: var(--red); }

/* Card types */
.ai-ui-success {
    border-color: rgba(0, 200, 83, 0.3);
    background: rgba(0, 200, 83, 0.06);
    color: var(--green);
    font-weight: 500;
}
.ai-ui-info {
    border-color: rgba(108, 92, 231, 0.3);
    background: rgba(108, 92, 231, 0.06);
    color: var(--accent);
    font-weight: 500;
}
.ai-ui-position {
    border-left: 3px solid var(--accent);
}

/* Trade confirmation */
.ai-ui-trade-confirm {
    border-color: rgba(255, 183, 77, 0.4);
    background: rgba(255, 183, 77, 0.06);
}
.ai-ui-trade-confirm .ai-ui-card-header {
    color: #ffb74d;
}
.ai-ui-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.ai-trade-confirm-btn, .ai-trade-cancel-btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.ai-trade-confirm-btn {
    background: var(--green);
    color: #fff;
}
.ai-trade-confirm-btn:hover {
    background: #00c853;
}
.ai-trade-cancel-btn {
    background: var(--bg-active);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.ai-trade-cancel-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ═══════════════ Chart Components ═══════════════ */
.ai-chart-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    animation: msgIn 200ms ease;
}
.ai-chart-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.ai-chart-canvas-wrap {
    width: 100%;
    overflow: hidden;
}
.ai-chart-canvas-wrap canvas {
    display: block;
    width: 100%;
}

/* ═══════════════ Toast Notification ═══════════════ */
.ai-toast {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    z-index: 100;
    animation: toastIn 300ms ease, toastOut 300ms ease 1.2s forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ═══════════════ Typing Indicator ═══════════════ */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px;
}
.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ═══════════════ Follow-up Suggestions ═══════════════ */
.ai-follow-up {
    display: none;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0 4px;
}
.ai-follow-up::-webkit-scrollbar { display: none; }
.ai-follow-up.visible {
    display: flex;
}
.ai-followup-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 11px;
    font-family: var(--font);
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-followup-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-muted);
}

/* ═══════════════ Chat Input ═══════════════ */
.ai-chat-input-area {
    padding: 8px 10px 6px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.ai-input-wrapper {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.ai-input-hint {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 0 4px 2px;
    line-height: 1.3;
}
.ai-chat-input {
    flex: 1;
    resize: none;
    padding: 7px 10px;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    max-height: 80px;
    min-height: 32px;
    line-height: 1.4;
    transition: border-color var(--transition);
}
.ai-chat-input:focus {
    border-color: var(--accent);
}
.ai-chat-input::placeholder {
    color: var(--text-muted);
}
.ai-send-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition);
}
.ai-send-btn:hover {
    background: var(--accent-hover);
}
.ai-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Stop button state */
.ai-send-btn--stop {
    background: var(--red, #ff5252);
}
.ai-send-btn--stop:hover {
    background: #ff1744;
}


/* ═══════════════ Welcome Screen ═══════════════ */
.ai-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    flex: 1;
    min-height: 0;
    animation: msgIn 400ms ease;
    overflow: hidden;
}
.ai-welcome-icon {
    margin-bottom: 12px;
    opacity: 0.9;
}
.ai-welcome-icon svg {
    filter: drop-shadow(0 4px 12px rgba(108, 92, 231, 0.3));
}
.ai-welcome-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.ai-welcome-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    max-width: 280px;
    line-height: 1.4;
}

/* ═══════════════ Suggestion Cards ═══════════════ */
.ai-suggestions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 380px;
}
.ai-suggestion-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
    color: var(--text-secondary);
    font-size: 10px;
    font-family: var(--font);
    min-height: 0;
    overflow: hidden;
}
.ai-suggestion-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.ai-suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius);
    background: var(--accent-muted);
    color: var(--accent);
}
.ai-suggestion-icon svg {
    stroke: currentColor;
}
.ai-suggestion-text {
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════ Responsive Welcome (data-size) ═══════════════ */
/* xs: < 250px height — hide cards entirely */
[data-size="xs"] .ai-welcome { padding: 16px 12px; }
[data-size="xs"] .ai-welcome-icon { display: none; }
[data-size="xs"] .ai-welcome-title { font-size: 14px; margin-bottom: 2px; }
[data-size="xs"] .ai-welcome-desc { display: none; }
[data-size="xs"] .ai-suggestions { display: none; }

/* sm: 250-350px — show 4 cards, compact */
[data-size="sm"] .ai-welcome { padding: 16px 12px; }
[data-size="sm"] .ai-welcome-icon { margin-bottom: 6px; }
[data-size="sm"] .ai-welcome-icon svg { width: 28px; height: 28px; }
[data-size="sm"] .ai-welcome-title { font-size: 14px; }
[data-size="sm"] .ai-welcome-desc { display: none; }
[data-size="sm"] .ai-suggestion-card:nth-child(n+5) { display: none; }
[data-size="sm"] .ai-suggestion-card { padding: 5px 8px; font-size: 9px; }
[data-size="sm"] .ai-suggestion-icon { width: 18px; height: 18px; }
[data-size="sm"] .ai-suggestion-icon svg { width: 10px; height: 10px; }

/* md: 350-500px — show 6 cards */
[data-size="md"] .ai-welcome { padding: 20px 16px; }
[data-size="md"] .ai-suggestion-card:nth-child(n+7) { display: none; }

/* lg: > 500px — show all 8 */

/* Single column when narrow (data-cols="1") */
[data-cols="1"] .ai-suggestions { grid-template-columns: 1fr; max-width: 200px; }

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 768px) {
    .ai-chat-header {
        padding: 8px 10px;
        gap: 6px;
    }
    .ai-header-left {
        gap: 6px;
        overflow: hidden;
        min-width: 0;
    }
    .ai-header-right {
        gap: 4px;
        flex-shrink: 0;
    }
    /* Otonom aktifken model toggle'ı gizle — alan aç */
    .ai-header-left:has(.ai-autonomous-badge) .ai-model-toggle {
        display: none;
    }
    .ai-chat-header-title {
        font-size: 14px;
    }
    .ai-header-context {
        font-size: 11px;
        padding: 3px 8px;
    }
    .ai-new-chat-btn,
    .ai-persona-btn,
    .ai-autonomous-header-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        flex-shrink: 0;
    }
    .ai-autonomous-badge {
        font-size: 10px;
        padding: 2px 7px;
        gap: 4px;
        flex-shrink: 0;
    }
    .ai-autonomous-badge .badge-dot {
        width: 5px;
        height: 5px;
    }
    .ai-autonomous-stop-btn {
        font-size: 10px;
        padding: 3px 8px;
        gap: 3px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* Otonom aktifken persona ve new-chat butonlarını gizle */
    .ai-header-right:has(.ai-autonomous-stop-btn) #aiPersonaSelector,
    .ai-header-right:has(.ai-autonomous-stop-btn) .ai-new-chat-btn {
        display: none;
    }
    .ai-persona-btn { font-size: 16px; }
    .ai-persona-dropdown { min-width: 200px; }
    .ai-persona-option { padding: 10px 12px; }
    .ai-persona-opt-label { font-size: 13px; }
    .ai-persona-opt-desc { font-size: 11px; }

    .ai-chat-messages {
        padding: 12px;
        gap: 12px;
    }

    .ai-message-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .ai-message-text code {
        font-size: 12px;
    }

    .ai-message-text pre code {
        font-size: 12px;
    }

    /* Avatar */
    .ai-avatar {
        width: 30px;
        height: 30px;
    }

    /* Mobilde mesaj aksiyonlari her zaman gorunur (hover yok!) */
    .ai-message-actions {
        opacity: 1;
    }
    .ai-action-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
    }

    /* Follow-up suggestions */
    .ai-followup-btn {
        padding: 7px 14px;
        font-size: 12px;
        min-height: 36px;
    }

    /* Chat input alani */
    .ai-chat-input-area {
        padding: 8px 12px 6px;
        padding-bottom: max(6px, var(--sa-bottom));
    }

    .ai-chat-input {
        padding: 10px 12px;
        font-size: 16px; /* iOS zoom fix */
        min-height: 44px;
        max-height: 120px;
    }

    .ai-send-btn {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    /* Welcome & suggestion cards */
    .ai-welcome {
        padding: 30px 16px;
    }
    .ai-suggestions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }
    .ai-suggestion-card {
        padding: 10px;
        font-size: 12px;
        min-height: 44px;
    }
    .ai-suggestion-icon {
        width: 28px;
        height: 28px;
    }

    /* Input hint */
    .ai-input-hint {
        font-size: 9px;
    }

    /* Typing indicator */
    .typing-dot {
        width: 8px;
        height: 8px;
    }

    /* Tool pills */
    .ai-tool-pill {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* UI cards */
    .ai-ui-card {
        padding: 12px;
        font-size: 14px;
    }
    .ai-ui-row {
        font-size: 14px;
    }
    .ai-trade-confirm-btn, .ai-trade-cancel-btn {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    /* Chart */
    .ai-chart-card {
        padding: 12px;
    }
    .ai-chart-title {
        font-size: 12px;
    }

    /* ─── Thinking Block (mobil) ─── */
    /* Mobilde düşünme süreci daha belirgin: büyük dokunma hedefi, okunur font, renkli aksan */
    .thinking-block {
        margin-bottom: 10px;
        border-radius: 12px;
        border: 1px solid rgba(139, 92, 246, 0.28);
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.09), rgba(99, 102, 241, 0.06));
        font-size: 13px;
        box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08);
    }
    .thinking-block.expanded {
        border-color: rgba(139, 92, 246, 0.5);
        box-shadow: 0 3px 12px -2px rgba(139, 92, 246, 0.22);
    }
    .thinking-toggle {
        padding: 11px 14px;
        min-height: 44px; /* WCAG dokunma hedefi */
    }
    .thinking-toggle-left {
        gap: 9px;
    }
    .thinking-sparkle {
        width: 16px;
        height: 16px;
        opacity: 0.85;
    }
    .thinking-block.expanded .thinking-sparkle {
        opacity: 1;
    }
    .thinking-label {
        font-size: 11px;
        letter-spacing: 0.6px;
        color: #a78bfa;
        opacity: 0.95;
    }
    .thinking-block.expanded .thinking-label {
        opacity: 1;
    }
    .thinking-duration {
        font-size: 11px;
        color: var(--text-muted, #9ca3af);
    }
    .thinking-chevron {
        width: 14px;
        height: 14px;
        opacity: 0.65;
    }
    .thinking-block.expanded .thinking-chevron {
        opacity: 1;
    }
    .thinking-body {
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .thinking-block.expanded .thinking-body {
        max-height: 320px; /* mobilde daha kısa — ekrana sığsın */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .thinking-text {
        font-size: 12.5px;
        line-height: 1.65;
        padding: 2px 14px 12px;
        color: var(--text-secondary, #b6b9c7);
        word-break: break-word;
    }

    /* Streaming sırasında pulse animasyonu — "düşünüyor" hissini verir */
    .thinking-block.expanded .thinking-sparkle {
        animation: thinkingSparklePulse 1.6s ease-in-out infinite;
    }
    @keyframes thinkingSparklePulse {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.15); }
    }

    /* ─── Markdown Tablolar (mobil scroll) ─── */
    /* AI tablo ürettiğinde mobilde bubble'ı taşırmasın — yatay kaydırılabilir */
    .ai-message-text {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ai-message-text table {
        display: block;
        width: max-content;
        min-width: 100%;
        max-width: none;
        font-size: 11.5px;
    }
    .ai-message-text th,
    .ai-message-text td {
        padding: 5px 8px;
        white-space: nowrap;
    }
}


/* ═══════ Autonomous Mode — Theme-aware accent colors ═══════ */
/* Wizard & otonom mod renkleri artık aktif temadan türetilir */

/* ═══════ Autonomous Mode — Header Button ═══════ */
.ai-autonomous-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}
.ai-autonomous-header-btn:hover {
    color: var(--accent);
    border-color: var(--accent-muted);
    background: var(--accent-muted);
}
/* Active state — accent glow when autonomous trading is running */
.ai-autonomous-header-btn.autonomous-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 0 8px var(--accent-muted), inset 0 0 4px var(--accent-muted);
    animation: autonomousBtnPulse 2s ease-in-out infinite;
}
@keyframes autonomousBtnPulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent-muted), inset 0 0 4px var(--accent-muted); }
    50% { box-shadow: 0 0 14px var(--accent-muted), inset 0 0 6px var(--accent-muted); }
}

/* ═══════════════ AI Autonomous Trading — Glow Effects ═══════════════
   Animated gradient line that travels around the widget border.
   Uses conic-gradient rotation via CSS Houdini @property.
   Gold → Orange → Crimson color palette.
   ═════════════════════════════════════════════════════════════════ */

@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ═══════ Desktop — Widget Container Glow ═══════ */

/*
 * Glow renders INSIDE .widget-frame as an overlay on top of content.
 * Uses inset:0 + z-index:2 — nothing extends outside any container.
 * No overflow:visible needed anywhere. No parent modifications.
 * No grid-stack-item or grid-stack-item-content changes.
 *
 * DOM:  .widget-frame.has-autonomous-glow
 *         ├── .widget-header
 *         ├── .widget-body
 *         └── .autonomous-glow-wrapper  (absolute, inset:0, z-index:2)
 *               ├── ::before  (conic-gradient + mask-composite = 2px animated ring)
 *               └── ::after   (blurred soft aura ring)
 */

.widget-frame.has-autonomous-glow {
    position: relative;
}

.autonomous-glow-wrapper {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.autonomous-glow-wrapper.active {
    opacity: 1;
}

/* Rotating gradient border — the main animated line (accent-based) */
.autonomous-glow-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0%,
        transparent 55%,
        var(--accent) 65%,
        var(--accent-hover, var(--accent)) 75%,
        var(--red) 85%,
        transparent 95%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: autonomousRotate 3s linear infinite;
}

/* Soft glow aura trailing behind the line (accent-based) */
.autonomous-glow-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0%,
        transparent 50%,
        var(--accent-muted) 62%,
        var(--accent-muted) 74%,
        var(--red-bg) 84%,
        transparent 94%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: blur(4px);
    animation: autonomousRotate 3s linear infinite;
}

@keyframes autonomousRotate {
    to { --glow-angle: 360deg; }
}

/* Fallback: browsers without @property support (Firefox < 128) */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .autonomous-glow-wrapper::before {
        background: none;
        border: 1.5px solid transparent;
        border-image: linear-gradient(90deg, var(--accent), var(--accent-hover, var(--accent)), var(--red), var(--accent-hover, var(--accent)), var(--accent)) 1;
        animation: autonomousFallbackPulse 2s ease-in-out infinite;
        -webkit-mask: none;
        mask: none;
        padding: 0;
    }
    .autonomous-glow-wrapper::after {
        display: none;
    }
}

@keyframes autonomousFallbackPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}


/* ═══════ Mobile — Tab Button Rotating Border ═══════ */

.mobile-tab-btn[data-tab="ai-chat"].autonomous-active {
    position: relative;
    color: var(--accent);
}

/* Dönen conic-gradient border — masaüstü glow ile aynı mantık */
.mobile-tab-btn[data-tab="ai-chat"].autonomous-active::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    padding: 1.5px;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0%,
        transparent 50%,
        var(--accent) 62%,
        var(--accent-hover, var(--accent)) 74%,
        var(--red) 84%,
        transparent 94%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: autonomousRotate 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Dönen border'ın blur'lu aura halkası */
.mobile-tab-btn[data-tab="ai-chat"].autonomous-active::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 13px;
    padding: 3px;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0%,
        transparent 45%,
        var(--accent-muted) 58%,
        var(--accent-muted) 72%,
        var(--red-bg) 82%,
        transparent 92%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: blur(3px);
    animation: autonomousRotate 3s linear infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
}

/* Firefox fallback — dönen border desteklenmiyorsa pulse border */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .mobile-tab-btn[data-tab="ai-chat"].autonomous-active::before {
        background: none;
        border: 1.5px solid var(--accent);
        -webkit-mask: none;
        mask: none;
        padding: 0;
        animation: autonomousFallbackPulse 2s ease-in-out infinite;
    }
    .mobile-tab-btn[data-tab="ai-chat"].autonomous-active::after {
        display: none;
    }
}


/* ═══════ Autonomous Mode — Chat Header Badge ═══════ */

.ai-autonomous-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent-muted);
    border: 1px solid var(--accent);
    color: var(--accent);
    animation: badgePulse 3s ease-in-out infinite;
    white-space: nowrap;
}

.ai-autonomous-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: dotGlow 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes dotGlow {
    0%, 100% { box-shadow: 0 0 4px var(--accent), 0 0 8px var(--accent-hover, var(--accent)); }
    50% { box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-hover, var(--accent)); }
}

@keyframes badgePulse {
    0%, 100% { border-color: var(--accent-muted); }
    50% { border-color: var(--accent); }
}


/* ═══════ Autonomous Mode — Responsive Header (data-width) ═══════ */
/* Widget küçüldükçe header elemanları kademeli olarak küçülür/gizlenir.
   data-width: "normal" (>340px) | "compact" (260-340px) | "mini" (<260px) */

/* ─── Compact (260-340px): Küçült ─── */
[data-width="compact"] .ai-chat-header { padding: 6px 8px; gap: 5px; }
[data-width="compact"] .ai-model-btn { font-size: 10px; padding: 3px 7px; }
[data-width="compact"] .ai-autonomous-badge { font-size: 10px; padding: 2px 7px; gap: 3px; }
[data-width="compact"] .ai-autonomous-stop-btn { font-size: 10px; padding: 3px 7px; gap: 3px; }
[data-width="compact"] .ai-new-chat-btn,
[data-width="compact"] .ai-persona-btn,
[data-width="compact"] .ai-autonomous-header-btn { width: 24px; height: 24px; min-width: 24px; }
[data-width="compact"] .ai-new-chat-btn svg,
[data-width="compact"] .ai-autonomous-header-btn svg { width: 12px; height: 12px; }
[data-width="compact"] .ai-header-right { gap: 3px; }
/* Otonom aktifken compact: persona ve yeni sohbet butonlarını gizle */
[data-width="compact"] .ai-header-right:has(.ai-autonomous-stop-btn) #aiPersonaSelector,
[data-width="compact"] .ai-header-right:has(.ai-autonomous-stop-btn) .ai-new-chat-btn { display: none; }

/* ─── Mini (<260px): Maksimum sıkıştırma ─── */
[data-width="mini"] .ai-chat-header { padding: 5px 6px; gap: 4px; }
[data-width="mini"] .ai-model-toggle { display: none; }
[data-width="mini"] .ai-model-btn { font-size: 9px; padding: 2px 5px; }
[data-width="mini"] .ai-autonomous-badge { font-size: 9px; padding: 2px 5px; gap: 2px; }
[data-width="mini"] .ai-autonomous-badge .badge-dot { width: 4px; height: 4px; }
/* Durdur butonu: sadece ikon, metin gizle */
[data-width="mini"] .ai-autonomous-stop-btn { font-size: 0; padding: 4px 6px; gap: 0; }
[data-width="mini"] .ai-autonomous-stop-btn svg { width: 10px; height: 10px; }
[data-width="mini"] .ai-new-chat-btn,
[data-width="mini"] .ai-persona-btn,
[data-width="mini"] .ai-autonomous-header-btn { width: 22px; height: 22px; min-width: 22px; }
[data-width="mini"] .ai-new-chat-btn svg,
[data-width="mini"] .ai-autonomous-header-btn svg { width: 11px; height: 11px; }
[data-width="mini"] .ai-header-right { gap: 2px; }
/* Otonom aktifken mini: persona, yeni sohbet ve model toggle'ı gizle */
[data-width="mini"] .ai-header-right:has(.ai-autonomous-stop-btn) #aiPersonaSelector,
[data-width="mini"] .ai-header-right:has(.ai-autonomous-stop-btn) .ai-new-chat-btn { display: none; }
[data-width="mini"] .ai-header-left:has(.ai-autonomous-badge) .ai-model-toggle { display: none; }


/* ═══════ Autonomous Mode — Wizard Overlay ═══════ */

.ai-wizard-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 0;
    overflow: hidden;
    container-type: size;
    container-name: wizard;
}
.ai-wizard-overlay.visible {
    opacity: 1;
}

.ai-wizard-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 12px 14px;
    text-align: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Step indicator */
.ai-wizard-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: clamp(4px, 2%, 12px);
    flex-shrink: 0;
}
.ai-wizard-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border: 2px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.ai-wizard-step.active {
    border-color: var(--accent);
    color: var(--text-inverse, #000);
    background: var(--accent);
}
.ai-wizard-step.done {
    border-color: var(--accent-muted);
    color: var(--accent);
    background: var(--accent-muted);
}
.ai-wizard-step-line {
    width: 20px;
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
}
.ai-wizard-step-line.done {
    background: var(--accent-muted);
}

.ai-wizard-title {
    font-size: clamp(12px, 3.5cqh, 15px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    flex-shrink: 0;
}

.ai-wizard-desc {
    font-size: clamp(10px, 2.8cqh, 12px);
    color: var(--text-muted);
    margin-bottom: clamp(4px, 2%, 12px);
    line-height: 1.3;
    flex-shrink: 0;
}

.ai-wizard-balance {
    color: var(--accent);
    font-weight: 600;
}

.ai-wizard-options {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1.2%, 6px);
    margin-bottom: clamp(4px, 2%, 12px);
    flex-shrink: 1;
    min-height: 0;
}

.ai-wizard-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(6px, 2cqh, 10px) 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-size: clamp(11px, 3cqh, 13px);
    flex-shrink: 1;
}

.ai-wizard-option:hover {
    border-color: var(--accent);
    background: var(--accent-muted);
}

.ai-wizard-option.selected {
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 0 0 1px var(--accent-muted);
}

.ai-wizard-option .option-icon {
    font-size: clamp(16px, 4cqh, 20px);
    flex-shrink: 0;
}

.ai-wizard-option .option-text {
    flex: 1;
}

.ai-wizard-option .option-title {
    font-weight: 600;
    display: block;
    margin-bottom: 1px;
    font-size: clamp(11px, 3cqh, 13px);
}

.ai-wizard-option .option-desc {
    font-size: clamp(9px, 2.5cqh, 11px);
    color: var(--text-muted);
    display: block;
    line-height: 1.2;
}

/* Budget buttons (grid) */
.ai-wizard-budget-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(3px, 1%, 6px);
    margin-bottom: clamp(4px, 2%, 12px);
    flex-shrink: 0;
}

.ai-wizard-budget-btn {
    padding: clamp(4px, 1.5cqh, 8px) 2px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(11px, 3cqh, 13px);
    font-weight: 600;
    text-align: center;
}

.ai-wizard-budget-btn:hover {
    border-color: var(--accent);
    background: var(--accent-muted);
}

.ai-wizard-budget-btn.selected {
    border-color: var(--accent);
    background: var(--accent-muted);
    color: var(--accent);
}

.ai-wizard-budget-btn .budget-amount {
    font-size: clamp(8px, 2.2cqh, 10px);
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
    font-weight: 400;
}
.ai-wizard-budget-btn.selected .budget-amount {
    color: var(--accent);
    opacity: 0.7;
}

/* Custom budget input */
.ai-wizard-custom-budget {
    margin-bottom: clamp(4px, 2%, 12px);
    flex-shrink: 0;
}
.ai-wizard-custom-label {
    display: block;
    font-size: clamp(9px, 2.5cqh, 11px);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ai-wizard-custom-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    margin: 0 auto;
}
.ai-wizard-custom-input {
    flex: 1;
    padding: clamp(5px, 1.5cqh, 8px) 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: clamp(11px, 3cqh, 13px);
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
}
.ai-wizard-custom-input::-webkit-inner-spin-button,
.ai-wizard-custom-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ai-wizard-custom-input:focus {
    border-color: var(--accent);
}
.ai-wizard-custom-suffix {
    font-size: clamp(10px, 2.8cqh, 12px);
    color: var(--text-muted);
    font-weight: 600;
}

/* Budget display */
.ai-wizard-budget-display {
    font-size: clamp(10px, 2.8cqh, 12px);
    color: var(--text-muted);
    margin-bottom: clamp(6px, 2%, 16px);
    padding: clamp(4px, 1.5cqh, 8px) 0;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-wizard-budget-display strong {
    color: var(--accent);
}

/* Wizard action buttons */
.ai-wizard-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
}

.ai-wizard-btn {
    padding: clamp(6px, 2cqh, 9px) 18px;
    border-radius: 7px;
    font-size: clamp(11px, 3cqh, 13px);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.ai-wizard-btn-primary {
    background: var(--accent);
    color: var(--text-inverse, #000);
}

.ai-wizard-btn-primary:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.ai-wizard-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.ai-wizard-btn-secondary {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.ai-wizard-btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Summary card */
.ai-wizard-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(6px, 2cqh, 10px) 10px;
    margin-bottom: clamp(4px, 2%, 12px);
    text-align: left;
    flex-shrink: 1;
    min-height: 0;
}

.ai-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(1px, 0.8cqh, 3px) 0;
    font-size: clamp(10px, 2.8cqh, 12px);
    color: var(--text-primary);
}

.ai-wizard-summary-row span:first-child {
    color: var(--text-muted);
}

.ai-wizard-summary-row strong {
    color: var(--accent);
}


/* ═══════ Autonomous Mode — Message Styles ═══════ */

/* Autonomous messages have a themed border accent */
.ai-message.autonomous .ai-message-content {
    border-left: 2px solid var(--accent);
    padding-left: 10px;
    opacity: 0.9;
}

/* Trade executed notification within autonomous flow */
.ai-autonomous-trade-card {
    background: var(--accent-muted);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 11px;
}

.ai-autonomous-trade-card .trade-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--accent);
    font-size: 11px;
}

.ai-autonomous-trade-card .trade-row {
    display: inline;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.5;
}

.ai-autonomous-trade-card .trade-row span:first-child {
    color: var(--text-muted);
}

.ai-autonomous-trade-card .trade-row + .trade-row::before {
    content: ' · ';
    color: var(--text-muted);
    opacity: 0.5;
}

.ai-autonomous-trade-card .trade-rows {
    line-height: 1.6;
}

/* Semi-auto approval card */
.ai-autonomous-approve-card {
    background: var(--accent-muted);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 11px;
}

.ai-autonomous-approve-card .trade-header {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--accent);
}

.ai-autonomous-approve-card .trade-row {
    display: inline;
    font-size: 11px;
    line-height: 1.5;
}

.ai-autonomous-approve-card .trade-row span:first-child {
    color: var(--text-muted);
}

.ai-autonomous-approve-card .trade-row + .trade-row::before {
    content: ' · ';
    color: var(--text-muted);
    opacity: 0.5;
}

.ai-autonomous-approve-card .trade-rows {
    line-height: 1.6;
    margin-bottom: 6px;
}

.ai-autonomous-approve-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.ai-approve-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.ai-approve-btn-yes {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.ai-approve-btn-yes:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.ai-approve-btn-no {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.ai-approve-btn-no:hover {
    color: var(--text-primary);
}

/* Stop button in header */
.ai-autonomous-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-autonomous-stop-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Scanning indicator */
.ai-scanning-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--accent-muted);
    border-radius: 8px;
    margin: 8px 14px;
    font-size: 12px;
    color: var(--accent);
}

.ai-scanning-dots {
    display: flex;
    gap: 3px;
}

.ai-scanning-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    animation: scanDot 1.4s infinite ease-in-out both;
}

.ai-scanning-dots span:nth-child(1) { animation-delay: 0s; }
.ai-scanning-dots span:nth-child(2) { animation-delay: 0.16s; }
.ai-scanning-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes scanDot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* Trade type badges (SCALP / SWING) */
.trade-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 4px;
    vertical-align: middle;
}

.trade-type-badge.badge-scalp {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.trade-type-badge.badge-swing {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #a855f7;
}


/* ═══════════════════════════════════════════════════════════════════
   Wizard & Autonomous — Theme Overrides
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light Theme ── */
[data-theme="light"] .ai-wizard-overlay {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}
[data-theme="light"] .ai-wizard-container {
    background: var(--bg-secondary);
    box-shadow: var(--shadow);
}
[data-theme="light"] .ai-wizard-btn-primary {
    color: #fff;
}
[data-theme="light"] .ai-wizard-step.active {
    color: #fff;
}
[data-theme="light"] .ai-wizard-option {
    background: var(--bg-primary);
}
[data-theme="light"] .ai-wizard-budget-btn {
    background: var(--bg-primary);
}

/* ── Glass Theme ── */
[data-theme="glass"] .ai-wizard-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="glass"] .ai-wizard-container {
    background: rgba(15, 15, 25, 0.8);
    backdrop-filter: blur(var(--glass-blur-heavy, 40px)) saturate(180%);
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.22));
    box-shadow: var(--glass-shine, inset 0 0.5px 1px rgba(255, 255, 255, 0.25)), 0 20px 50px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
[data-theme="glass"] .ai-wizard-option {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="glass"] .ai-wizard-option:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="glass"] .ai-wizard-option.selected {
    background: var(--accent-muted);
}
[data-theme="glass"] .ai-wizard-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="glass"] .ai-wizard-budget-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="glass"] .ai-wizard-budget-btn.selected {
    background: var(--accent-muted);
}
[data-theme="glass"] .ai-wizard-custom-input {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass"] .ai-wizard-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass"] .ai-wizard-btn-primary {
    color: var(--text-inverse, #050505);
}
[data-theme="glass"] .ai-wizard-step.active {
    color: var(--text-inverse, #050505);
}
[data-theme="glass"] .ai-wizard-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Glass Green Theme ── */
[data-theme="glass-green"] .ai-wizard-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="glass-green"] .ai-wizard-container {
    background: rgba(5, 7, 5, 0.85);
    backdrop-filter: blur(var(--glass-blur-heavy, 50px)) saturate(180%);
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shine), 0 20px 50px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
[data-theme="glass-green"] .ai-wizard-option,
[data-theme="glass-green"] .ai-wizard-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-green"] .ai-wizard-custom-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-green"] .ai-wizard-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="glass-green"] .ai-wizard-btn-primary {
    color: #fff;
}
[data-theme="glass-green"] .ai-wizard-step.active {
    color: #fff;
}
[data-theme="glass-green"] .ai-wizard-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Glass Purple Theme ── */
[data-theme="glass-purple"] .ai-wizard-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="glass-purple"] .ai-wizard-container {
    background: rgba(5, 2, 7, 0.85);
    backdrop-filter: blur(var(--glass-blur-heavy, 50px)) saturate(180%);
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shine), 0 20px 50px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
[data-theme="glass-purple"] .ai-wizard-option,
[data-theme="glass-purple"] .ai-wizard-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-purple"] .ai-wizard-custom-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-purple"] .ai-wizard-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="glass-purple"] .ai-wizard-btn-primary {
    color: #fff;
}
[data-theme="glass-purple"] .ai-wizard-step.active {
    color: #fff;
}
[data-theme="glass-purple"] .ai-wizard-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Glass Amber Theme ── */
[data-theme="glass-amber"] .ai-wizard-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="glass-amber"] .ai-wizard-container {
    background: rgba(13, 11, 8, 0.85);
    backdrop-filter: blur(var(--glass-blur-heavy, 50px)) saturate(180%);
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shine), 0 20px 50px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
[data-theme="glass-amber"] .ai-wizard-option,
[data-theme="glass-amber"] .ai-wizard-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-amber"] .ai-wizard-custom-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-amber"] .ai-wizard-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="glass-amber"] .ai-wizard-btn-primary {
    color: #000;
}
[data-theme="glass-amber"] .ai-wizard-step.active {
    color: #000;
}
[data-theme="glass-amber"] .ai-wizard-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Glass Carbon Theme ── */
[data-theme="glass-carbon"] .ai-wizard-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="glass-carbon"] .ai-wizard-container {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(var(--glass-blur-heavy, 50px)) saturate(180%);
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shine), 0 20px 50px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}
[data-theme="glass-carbon"] .ai-wizard-option,
[data-theme="glass-carbon"] .ai-wizard-budget-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-carbon"] .ai-wizard-custom-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="glass-carbon"] .ai-wizard-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="glass-carbon"] .ai-wizard-btn-primary {
    color: #fff;
}
[data-theme="glass-carbon"] .ai-wizard-step.active {
    color: #fff;
}
[data-theme="glass-carbon"] .ai-wizard-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ─── Kota / Premium Hata Kartı ─── */
.ai-quota-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 12px;
    padding: 20px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}
.ai-quota-icon {
    font-size: 32px;
    line-height: 1;
}
.ai-quota-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.ai-quota-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 260px;
}
.ai-quota-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.ai-quota-btn:hover {
    opacity: 0.85;
}

/* ─── Thinking Block ─── */
.thinking-block {
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(99,102,241,0.04));
    overflow: hidden;
    font-size: 0.82em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.thinking-block:hover {
    border-color: rgba(139,92,246,0.25);
    box-shadow: 0 0 0 1px rgba(139,92,246,0.08);
}
.thinking-block.expanded {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 2px 8px -2px rgba(139,92,246,0.12);
}
.thinking-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}
.thinking-toggle-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.thinking-sparkle {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.thinking-block.expanded .thinking-sparkle {
    opacity: 1;
}
.thinking-label {
    font-weight: 600;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8b5cf6;
    opacity: 0.75;
}
.thinking-block.expanded .thinking-label {
    opacity: 0.9;
}
.thinking-duration {
    font-size: 0.8em;
    color: var(--text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
}
.thinking-chevron {
    opacity: 0.4;
    transition: transform 0.3s, opacity 0.2s;
}
.thinking-block.expanded .thinking-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}
.thinking-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.thinking-block.expanded .thinking-body {
    max-height: 500px;
    overflow-y: auto;
}
.thinking-text {
    color: var(--text-muted, #9ca3af);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9em;
    padding: 0 10px 8px;
}
.thinking-block.expanded .thinking-text {
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.15) transparent;
}