/* ════════════════════════════════════════════════════════════════
   MCP PLAYGROUND — assets/css/mcp-playground.css
   Design : Glassmorphism Minimal — AlphaVault AI v4.1
   100% Responsive Mobile — Fix scroll + input zone
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. CSS VARIABLES
══════════════════════════════════════════════════════════════ */
:root {
    --mcp-bg            : #eef0f8;
    --mcp-sidebar-bg    : rgba(255, 255, 255, 0.72);
    --mcp-header-bg     : rgba(255, 255, 255, 0.80);
    --mcp-card          : rgba(255, 255, 255, 0.78);
    --mcp-card-hover    : rgba(255, 255, 255, 0.92);
    --mcp-input-bg      : rgba(255, 255, 255, 0.45);
    --mcp-overlay-bg    : rgba(255, 255, 255, 0.12);
    --mcp-glass         : rgba(255, 255, 255, 0.60);
    --mcp-glass-strong  : rgba(255, 255, 255, 0.85);
    --mcp-border        : rgba(102, 126, 234, 0.12);
    --mcp-border-hover  : rgba(102, 126, 234, 0.24);
    --mcp-border-focus  : rgba(102, 126, 234, 0.45);
    --mcp-border-glass  : rgba(255, 255, 255, 0.55);
    --mcp-text          : #0f172a;
    --mcp-text-muted    : #475569;
    --mcp-text-dim      : #94a3b8;
    --mcp-purple        : #667eea;
    --mcp-purple-dark   : #764ba2;
    --mcp-purple-light  : #818cf8;
    --mcp-blue          : #4facfe;
    --mcp-cyan          : #00f2fe;
    --mcp-green         : #10b981;
    --mcp-green-light   : #38ef7d;
    --mcp-orange        : #f7971e;
    --mcp-yellow        : #ffd200;
    --mcp-amber         : #f59e0b;
    --mcp-pink          : #ee0979;
    --mcp-red           : #ef4444;
    --mcp-violet        : #764ba2;
    --mcp-purple-acc    : #8b5cf6;
    --grad-main         : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-blue         : linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --grad-green        : linear-gradient(135deg, #10b981 0%, #38ef7d 100%);
    --grad-orange       : linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    --grad-pink         : linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --cat-tech-color    : #667eea;
    --cat-news-color    : #f7971e;
    --cat-market-color  : #10b981;
    --cat-drive-color   : #4facfe;
    --cat-utility-color : #a18cd1;
    --font-main         : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono         : 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --header-h          : 56px;
    --mobile-nav-h      : 56px;
    --sidebar-left-w    : 288px;
    --sidebar-right-w   : 288px;
    --mcp-radius        : 10px;
    --mcp-radius-lg     : 14px;
    --mcp-radius-xl     : 20px;
    --shadow-xs         : 0 1px 3px rgba(102, 126, 234, 0.06);
    --shadow-sm         : 0 2px 8px rgba(102, 126, 234, 0.09);
    --shadow-md         : 0 4px 20px rgba(102, 126, 234, 0.12);
    --shadow-lg         : 0 8px 40px rgba(102, 126, 234, 0.16);
    --shadow-xl         : 0 16px 60px rgba(102, 126, 234, 0.2);
    --shadow-purple     : 0 4px 18px rgba(102, 126, 234, 0.35);
    --shadow-glass      : 0 8px 32px rgba(102, 126, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --glass-blur        : blur(24px) saturate(180%);
    --transition-fast   : all 0.13s ease;
    --transition-smooth : all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring : all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark Mode ─────────────────────────────────────────────── */
body.mcp-body:not(.light-mode) {
    --mcp-bg            : #070c18;
    --mcp-sidebar-bg    : rgba(10, 16, 30, 0.80);
    --mcp-header-bg     : rgba(7, 12, 24, 0.85);
    --mcp-card          : rgba(15, 24, 44, 0.75);
    --mcp-card-hover    : rgba(22, 34, 60, 0.85);
    --mcp-input-bg      : rgba(255, 255, 255, 0.04);
    --mcp-overlay-bg    : rgba(255, 255, 255, 0.02);
    --mcp-glass         : rgba(13, 21, 40, 0.65);
    --mcp-glass-strong  : rgba(15, 24, 44, 0.90);
    --mcp-border        : rgba(102, 126, 234, 0.10);
    --mcp-border-hover  : rgba(102, 126, 234, 0.22);
    --mcp-border-glass  : rgba(255, 255, 255, 0.06);
    --mcp-text          : #e4eaf6;
    --mcp-text-muted    : #94a3b8;
    --mcp-text-dim      : #3d5070;
    --shadow-xs         : 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-sm         : 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md         : 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg         : 0 8px 44px rgba(0, 0, 0, 0.6);
    --shadow-xl         : 0 16px 64px rgba(0, 0, 0, 0.7);
    --shadow-glass      : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ══════════════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    height    : 100%;
    overflow  : hidden;
    overflow-x: hidden;
}

body {
    height    : 100%;
    overflow  : hidden;
    overflow-x: hidden;
}

.mcp-body {
    font-family            : var(--font-main);
    color                  : var(--mcp-text);
    display                : flex;
    flex-direction         : column;
    height                 : 100dvh;
    overflow               : hidden;
    overflow-x             : hidden;
    font-size              : 13px;
    -webkit-font-smoothing : antialiased;
    line-height            : 1.5;
    transition             : background 0.4s ease, color 0.3s ease;
    position               : relative;
    overscroll-behavior    : none;
}

.mcp-body::before {
    content       : '';
    position      : fixed;
    inset         : 0;
    z-index       : -2;
    pointer-events: none;
}

.mcp-body.light-mode { background: #eef0f8; }

.mcp-body.light-mode::before {
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(102, 126, 234, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(118, 75,  162, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50%  50%, rgba(79,  172, 254, 0.05) 0%, transparent 70%),
        #eef0f8;
}

body.mcp-body:not(.light-mode) { background: #070c18; }

body.mcp-body:not(.light-mode)::before {
    background:
        radial-gradient(ellipse 70% 55% at 5%   5%,  rgba(102, 126, 234, 0.11) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 95% 95%,  rgba(118, 75,  162, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 45% 35% at 50%  20%, rgba(79,  172, 254, 0.05) 0%, transparent 60%),
        #070c18;
}

a               { color: inherit; text-decoration: none; }
button          { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ══════════════════════════════════════════════════════════════
   3. SCROLLBARS
══════════════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.18) transparent;
}

body.mcp-body:not(.light-mode) * {
    scrollbar-color: rgba(102, 126, 234, 0.12) transparent;
}

*::-webkit-scrollbar              { width: 4px; height: 4px; }
*::-webkit-scrollbar-track        { background: transparent; }
*::-webkit-scrollbar-thumb        { background: rgba(102, 126, 234, 0.22); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover  { background: rgba(102, 126, 234, 0.45); }

body.mcp-body:not(.light-mode) *::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.14);
}

/* ══════════════════════════════════════════════════════════════
   4. HEADER
══════════════════════════════════════════════════════════════ */
.mcp-header {
    height                 : var(--header-h);
    background             : var(--mcp-header-bg);
    border-bottom          : 1px solid var(--mcp-border);
    display                : flex;
    align-items            : center;
    padding                : 0 16px;
    gap                    : 10px;
    flex-shrink            : 0;
    z-index                : 200;
    position               : relative;
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    overflow               : hidden;
    min-width              : 0;
}

.mcp-body.light-mode .mcp-header {
    box-shadow: 0 1px 0 var(--mcp-border), 0 2px 20px rgba(102, 126, 234, 0.06);
}

body.mcp-body:not(.light-mode) .mcp-header {
    box-shadow: 0 1px 0 var(--mcp-border), 0 4px 24px rgba(0, 0, 0, 0.3);
}

.mcp-header-left {
    display    : flex;
    align-items: center;
    gap        : 10px;
    flex-shrink: 0;
    min-width  : 0;
}

.mcp-header-center {
    flex           : 1;
    display        : flex;
    justify-content: center;
    min-width      : 0;
    overflow       : hidden;
}

.mcp-header-right {
    display    : flex;
    align-items: center;
    gap        : 5px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Logo ─────────────────────────────────────────────────── */
.mcp-logo {
    display    : flex;
    align-items: center;
    gap        : 9px;
    flex-shrink: 0;
    transition : var(--transition-fast);
}

.mcp-logo:hover { opacity: 0.82; }

.mcp-logo-img-text {
    height    : 30px;
    object-fit: contain;
    max-width : 140px;
    display   : block;
}

.mcp-logo-icon-fallback {
    display        : none;
    width          : 32px;
    height         : 32px;
    background     : var(--grad-main);
    border-radius  : 9px;
    align-items    : center;
    justify-content: center;
    font-size      : 14px;
    color          : white;
    box-shadow     : var(--shadow-purple);
    flex-shrink    : 0;
}

.mcp-logo-img-text:not([src]),
.mcp-logo-img-text[src=""],
.mcp-logo-img-text.error { display: none; }

.mcp-logo-text {
    display       : flex;
    flex-direction: column;
    line-height   : 1.25;
}

.mcp-logo-title {
    font-size     : 13px;
    font-weight   : 800;
    color         : var(--mcp-text);
    letter-spacing: -0.4px;
}

.mcp-logo-accent {
    background             : var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
}

.mcp-logo-sub {
    font-size     : 9px;
    color         : var(--mcp-text-dim);
    font-weight   : 500;
    letter-spacing: 0.3px;
    white-space   : nowrap;
}

/* ── Divider ──────────────────────────────────────────────── */
.mcp-header-divider {
    width      : 1px;
    height     : 22px;
    background : linear-gradient(to bottom, transparent, var(--mcp-border), transparent);
    flex-shrink: 0;
}

/* ── Status Bar ───────────────────────────────────────────── */
.mcp-status-bar {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.mcp-status-item {
    display    : flex;
    align-items: center;
    gap        : 5px;
    font-size  : 10px;
    color      : var(--mcp-text-muted);
    font-weight: 600;
}

.mcp-status-dot {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    flex-shrink  : 0;
    transition   : var(--transition-smooth);
}

.dot-pending { background: var(--mcp-text-dim); }

.dot-ok {
    background: var(--mcp-green);
    box-shadow: 0 0 7px rgba(16, 185, 129, 0.6);
    animation : pulseGreen 2.5s infinite;
}

.dot-error {
    background: var(--mcp-red);
    box-shadow: 0 0 7px rgba(239, 68, 68, 0.6);
}

@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 3px rgba(16, 185, 129, 0.3); }
    50%       { box-shadow: 0 0 12px rgba(16, 185, 129, 0.8); }
}

/* ── Mode Selector ────────────────────────────────────────── */
.mcp-mode-selector {
    display                : flex;
    align-items            : center;
    gap                    : 2px;
    background             : var(--mcp-input-bg);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    padding                : 3px;
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink            : 0;
}

.mcp-mode-btn {
    padding      : 5px 13px;
    border-radius: 7px;
    border       : none;
    background   : transparent;
    color        : var(--mcp-text-dim);
    font-family  : var(--font-main);
    font-size    : 11px;
    font-weight  : 700;
    cursor       : pointer;
    transition   : var(--transition-fast);
    display      : flex;
    align-items  : center;
    gap          : 6px;
    white-space  : nowrap;
    min-height   : 32px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-mode-btn i { font-size: 10px; }

.mcp-mode-btn:hover {
    color     : var(--mcp-text-muted);
    background: rgba(102, 126, 234, 0.07);
}

.mcp-mode-btn.active {
    background: var(--grad-main);
    color     : #ffffff;
    box-shadow: 0 3px 14px rgba(102, 126, 234, 0.40);
}

/* ── Session Metrics ──────────────────────────────────────── */
.mcp-session-info {
    display    : flex;
    align-items: center;
    gap        : 12px;
    margin-right: 2px;
}

.mcp-metric-mini {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    line-height   : 1.2;
}

.mcp-metric-mini-val {
    font-size           : 13px;
    font-weight         : 800;
    color               : var(--mcp-text);
    font-variant-numeric: tabular-nums;
}

.mcp-metric-mini-label {
    font-size     : 8px;
    color         : var(--mcp-text-dim);
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ── Header Buttons ───────────────────────────────────────── */
.mcp-header-btn {
    display                : flex;
    align-items            : center;
    justify-content        : center;
    width                  : 32px;
    height                 : 32px;
    border-radius          : var(--mcp-radius);
    border                 : 1px solid var(--mcp-border);
    background             : var(--mcp-input-bg);
    color                  : var(--mcp-text-dim);
    font-size              : 12px;
    cursor                 : pointer;
    transition             : var(--transition-fast);
    text-decoration        : none;
    flex-shrink            : 0;
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width              : 32px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-header-btn:hover {
    color      : var(--mcp-purple);
    border-color: var(--mcp-border-hover);
    background : rgba(102, 126, 234, 0.08);
    box-shadow : 0 2px 12px rgba(102, 126, 234, 0.15);
}

/* ── Theme Toggle ─────────────────────────────────────────── */
.mcp-theme-toggle {
    width                  : 32px;
    height                 : 32px;
    display                : flex;
    align-items            : center;
    justify-content        : center;
    background             : var(--mcp-input-bg);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    cursor                 : pointer;
    color                  : var(--mcp-text-dim);
    font-size              : 13px;
    transition             : var(--transition-fast);
    flex-shrink            : 0;
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width              : 32px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-theme-toggle:hover {
    background  : rgba(245, 158, 11, 0.10);
    color       : var(--mcp-amber);
    border-color: rgba(245, 158, 11, 0.28);
    box-shadow  : 0 2px 12px rgba(245, 158, 11, 0.15);
}

/* ── Header User ──────────────────────────────────────────── */
.mcp-header-user {
    display                : flex;
    align-items            : center;
    gap                    : 8px;
    padding                : 4px 8px 4px 4px;
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    background             : var(--mcp-input-bg);
    cursor                 : pointer;
    flex-shrink            : 0;
    position               : relative;
    transition             : var(--transition-fast);
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height             : 36px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-header-user:hover {
    background  : rgba(102, 126, 234, 0.08);
    border-color: var(--mcp-border-hover);
    box-shadow  : 0 2px 14px rgba(102, 126, 234, 0.12);
}

.mcp-header-user-avatar {
    width          : 26px;
    height         : 26px;
    border-radius  : 7px;
    background     : var(--grad-main);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 11px;
    color          : white;
    flex-shrink    : 0;
    overflow       : hidden;
    box-shadow     : 0 2px 8px rgba(102, 126, 234, 0.35);
}

.mcp-header-user-info {
    display       : flex;
    flex-direction: column;
    line-height   : 1.2;
}

.mcp-header-user-name {
    font-size  : 11px;
    font-weight: 700;
    color      : var(--mcp-text);
    white-space: nowrap;
}

.mcp-header-user-status {
    font-size  : 9px;
    color      : var(--mcp-green);
    font-weight: 600;
}

.mcp-user-chevron {
    font-size  : 9px;
    color      : var(--mcp-text-dim);
    transition : transform 0.25s ease;
    flex-shrink: 0;
}

.mcp-user-chevron.open { transform: rotate(180deg); }

/* ── User Dropdown ────────────────────────────────────────── */
.mcp-user-dropdown {
    position               : absolute;
    top                    : calc(100% + 8px);
    right                  : 0;
    width                  : 278px;
    background             : var(--mcp-glass-strong);
    border                 : 1px solid var(--mcp-border-glass);
    border-radius          : var(--mcp-radius-xl);
    box-shadow             : var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    z-index                : 9999;
    overflow               : hidden;
    opacity                : 0;
    transform              : translateY(-8px) scale(0.97);
    pointer-events         : none;
    transition             : opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mcp-user-dropdown.open {
    opacity       : 1;
    transform     : translateY(0) scale(1);
    pointer-events: all;
}

.mcp-user-dropdown-header {
    display      : flex;
    align-items  : center;
    gap          : 11px;
    padding      : 15px 15px 12px;
    background   : linear-gradient(135deg, rgba(102, 126, 234, 0.07), rgba(118, 75, 162, 0.07));
    border-bottom: 1px solid var(--mcp-border);
}

.mcp-user-dropdown-avatar {
    width          : 42px;
    height         : 42px;
    border-radius  : 12px;
    background     : var(--grad-main);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white;
    font-size      : 15px;
    flex-shrink    : 0;
    overflow       : hidden;
    box-shadow     : 0 4px 14px rgba(102, 126, 234, 0.40);
}

.mcp-user-dropdown-name {
    display    : block;
    font-size  : 13px;
    font-weight: 700;
    color      : var(--mcp-text);
    line-height: 1.3;
}

.mcp-user-dropdown-email {
    display   : block;
    font-size : 11px;
    color     : var(--mcp-text-dim);
    margin-top: 2px;
}

.mcp-user-dropdown-divider {
    height    : 1px;
    background: var(--mcp-border);
    margin    : 4px 0;
}

.mcp-user-dropdown-item {
    display        : flex;
    align-items    : center;
    gap            : 11px;
    width          : 100%;
    padding        : 9px 13px;
    background     : transparent;
    border         : none;
    cursor         : pointer;
    text-decoration: none;
    color          : var(--mcp-text);
    transition     : background 0.14s ease;
    text-align     : left;
    min-height     : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-user-dropdown-item:hover { background: rgba(102, 126, 234, 0.06); }

.mcp-user-dropdown-item-icon {
    width          : 32px;
    height         : 32px;
    border-radius  : 9px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 13px;
    flex-shrink    : 0;
    color          : white;
}

.icon-drive     { background: var(--grad-main); }
.icon-dashboard { background: var(--grad-green); }
.icon-settings  { background: var(--grad-orange); }
.icon-help      { background: var(--grad-blue); }
.icon-kbd       { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.icon-signout   { background: var(--grad-pink); }

.mcp-user-dropdown-item-body { flex: 1; min-width: 0; }

.mcp-user-dropdown-item-label {
    display      : block;
    font-size    : 12px;
    font-weight  : 600;
    color        : var(--mcp-text);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.mcp-user-dropdown-item-desc {
    display   : block;
    font-size : 10px;
    color     : var(--mcp-text-dim);
    margin-top: 1px;
}

.mcp-user-dropdown-item-arrow {
    font-size  : 9px;
    color      : var(--mcp-text-dim);
    flex-shrink: 0;
}

.mcp-user-dropdown-signout .mcp-user-dropdown-item-label { color: #ef4444; }

body.mcp-body:not(.light-mode) .mcp-user-dropdown {
    background  : rgba(10, 16, 32, 0.90);
    border-color: rgba(102, 126, 234, 0.14);
    box-shadow  : var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Help / Keyboard Shortcuts Modals ─────────────────────── */
.mcp-help-modal-overlay {
    position               : fixed;
    inset                  : 0;
    background             : rgba(0, 0, 0, 0.55);
    backdrop-filter        : blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index                : 10000;
    display                : flex;
    align-items            : center;
    justify-content        : center;
    opacity                : 0;
    pointer-events         : none;
    transition             : opacity 0.2s ease;
    padding                : 16px;
}

.mcp-help-modal-overlay.open {
    opacity       : 1;
    pointer-events: all;
}

.mcp-help-modal {
    background             : var(--mcp-glass-strong);
    border                 : 1px solid var(--mcp-border-glass);
    border-radius          : var(--mcp-radius-xl);
    width                  : 540px;
    max-width              : 94vw;
    max-height             : 80vh;
    overflow-y             : auto;
    box-shadow             : var(--shadow-xl);
    transform              : translateY(16px);
    transition             : transform 0.25s ease;
    padding                : 26px;
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    -webkit-overflow-scrolling: touch;
}

.mcp-help-modal-overlay.open .mcp-help-modal { transform: translateY(0); }

.mcp-help-modal-title {
    font-size    : 17px;
    font-weight  : 800;
    color        : var(--mcp-text);
    margin-bottom: 20px;
    display      : flex;
    align-items  : center;
    gap          : 10px;
}

.mcp-help-modal-title i { color: var(--mcp-purple); }

.mcp-kbd-section { margin-bottom: 18px; }

.mcp-kbd-section-title {
    font-size     : 9.5px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color         : var(--mcp-text-dim);
    margin-bottom : 8px;
}

.mcp-kbd-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 8px 11px;
    border-radius  : 8px;
    margin-bottom  : 3px;
    background     : var(--mcp-input-bg);
    border         : 1px solid var(--mcp-border);
    transition     : var(--transition-fast);
}

.mcp-kbd-row:hover { background: rgba(102, 126, 234, 0.05); }

.mcp-kbd-desc { font-size: 12px; color: var(--mcp-text); }

.mcp-kbd-keys { display: flex; gap: 4px; }

.mcp-kbd-keys kbd {
    font-family  : var(--font-mono);
    font-size    : 10px;
    font-weight  : 600;
    background   : var(--mcp-card);
    color        : var(--mcp-text);
    border       : 1px solid var(--mcp-border);
    border-radius: 6px;
    padding      : 2px 7px;
    box-shadow   : 0 2px 0 var(--mcp-border);
}

/* ══════════════════════════════════════════════════════════════
   5. LAYOUT — Structure principale
══════════════════════════════════════════════════════════════ */
.mcp-layout {
    display  : flex;
    flex     : 1;
    overflow : hidden;
    height   : calc(100dvh - var(--header-h));
    position : relative;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   6. MOBILE OVERLAY
══════════════════════════════════════════════════════════════ */
.mcp-mobile-overlay {
    display                : none;
    position               : fixed;
    inset                  : 0;
    background             : rgba(7, 12, 24, 0.55);
    backdrop-filter        : blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index                : 300;
    opacity                : 0;
    transition             : opacity 0.25s ease;
    pointer-events         : none;
}

.mcp-mobile-overlay.active {
    opacity       : 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════
   7. MOBILE BOTTOM NAV
══════════════════════════════════════════════════════════════ */
.mcp-mobile-nav {
    display                : none;
    position               : fixed;
    bottom                 : 0;
    left                   : 0;
    right                  : 0;
    height                 : var(--mobile-nav-h);
    background             : var(--mcp-header-bg);
    border-top             : 1px solid var(--mcp-border);
    z-index                : 400;
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mcp-mobile-nav-btn {
    flex                       : 1;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
    justify-content            : center;
    gap                        : 3px;
    height                     : 100%;
    background                 : none;
    border                     : none;
    color                      : var(--mcp-text-dim);
    font-size                  : 9px;
    font-weight                : 700;
    text-transform             : uppercase;
    letter-spacing             : 0.5px;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    padding                    : 0;
    min-width                  : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-mobile-nav-btn i { font-size: 16px; }

.mcp-mobile-nav-btn:hover,
.mcp-mobile-nav-btn.active { color: var(--mcp-purple); }

/* ══════════════════════════════════════════════════════════════
   8. SIDEBARS
══════════════════════════════════════════════════════════════ */
.mcp-sidebar {
    flex-shrink            : 0;
    background             : var(--mcp-sidebar-bg);
    border-color           : var(--mcp-border);
    overflow               : hidden;
    display                : flex;
    flex-direction         : column;
    transition             : width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                             transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position               : relative;
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mcp-sidebar-left {
    width       : var(--sidebar-left-w);
    border-right: 1px solid var(--mcp-border);
}

.mcp-body.light-mode .mcp-sidebar-left {
    box-shadow: 2px 0 24px rgba(102, 126, 234, 0.07), inset -1px 0 0 rgba(255, 255, 255, 0.6);
}

body.mcp-body:not(.light-mode) .mcp-sidebar-left {
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.3);
}

.mcp-sidebar-right {
    width      : var(--sidebar-right-w);
    border-left: 1px solid var(--mcp-border);
    overflow   : hidden;
}

.mcp-body.light-mode .mcp-sidebar-right {
    box-shadow: -2px 0 24px rgba(102, 126, 234, 0.07), inset 1px 0 0 rgba(255, 255, 255, 0.6);
}

body.mcp-body:not(.light-mode) .mcp-sidebar-right {
    box-shadow: -2px 0 24px rgba(0, 0, 0, 0.3);
}

/* ── Collapsed ────────────────────────────────────────────── */
.mcp-sidebar-left.mcp-sidebar-collapsed { width: 56px; }

.mcp-sidebar-collapsed .mcp-tool-item-info,
.mcp-sidebar-collapsed .mcp-category-info,
.mcp-sidebar-collapsed .mcp-category-chevron,
.mcp-sidebar-collapsed .mcp-tools-label,
.mcp-sidebar-collapsed .mcp-sidebar-search input,
.mcp-sidebar-collapsed .mcp-sidebar-search-icon,
.mcp-sidebar-collapsed .mcp-tools-count,
.mcp-sidebar-collapsed .mcp-sidebar-tabs,
.mcp-sidebar-collapsed .mcp-sidebar-panel { display: none; }

.mcp-sidebar-collapsed .mcp-category-header {
    justify-content: center;
    padding        : 7px;
}

.mcp-sidebar-collapsed .mcp-tool-item {
    justify-content: center;
    padding        : 8px 7px;
}

.mcp-sidebar-collapsed .mcp-tool-item > i {
    width : auto;
    margin: 0;
}

/* ── Sidebar Toggle Button ────────────────────────────────── */
.mcp-sidebar-toggle {
    position               : absolute;
    right                  : -13px;
    top                    : 50%;
    transform              : translateY(-50%);
    width                  : 26px;
    height                 : 26px;
    border-radius          : 50%;
    background             : var(--mcp-glass-strong);
    border                 : 1px solid var(--mcp-border);
    display                : flex;
    align-items            : center;
    justify-content        : center;
    cursor                 : pointer;
    color                  : var(--mcp-text-dim);
    font-size              : 9px;
    z-index                : 50;
    transition             : var(--transition-fast);
    box-shadow             : var(--shadow-sm);
    flex-shrink            : 0;
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mcp-sidebar-toggle:hover {
    background  : var(--grad-main);
    color       : #fff;
    border-color: var(--mcp-purple);
    box-shadow  : var(--shadow-purple);
}

/* ══════════════════════════════════════════════════════════════
   9. SIDEBAR TABS
══════════════════════════════════════════════════════════════ */
.mcp-sidebar-tabs {
    display      : flex;
    border-bottom: 1px solid var(--mcp-border);
    flex-shrink  : 0;
    background   : transparent;
    padding      : 4px 8px 0;
    gap          : 2px;
}

.mcp-sidebar-tab {
    flex                       : 1;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 5px;
    padding                    : 8px 6px;
    border                     : none;
    border-bottom              : 2px solid transparent;
    background                 : transparent;
    color                      : var(--mcp-text-dim);
    font-family                : var(--font-main);
    font-size                  : 11px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    white-space                : nowrap;
    border-radius              : 6px 6px 0 0;
    min-height                 : 40px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-sidebar-tab i { font-size: 10px; }
.mcp-sidebar-tab:hover { color: var(--mcp-text-muted); }

.mcp-sidebar-tab.active {
    color              : var(--mcp-purple);
    border-bottom-color: var(--mcp-purple);
    background         : rgba(102, 126, 234, 0.05);
}

.mcp-sidebar-panel {
    display       : none;
    flex-direction: column;
    flex          : 1;
    overflow      : hidden;
    min-height    : 0;
}

.mcp-sidebar-panel.active { display: flex; }

/* ══════════════════════════════════════════════════════════════
   10. SIDEBAR LEFT — Tools Panel
══════════════════════════════════════════════════════════════ */
.mcp-sidebar-search {
    position     : relative;
    padding      : 10px 10px 8px;
    border-bottom: 1px solid var(--mcp-border);
    flex-shrink  : 0;
}

.mcp-sidebar-search-icon {
    position      : absolute;
    left          : 20px;
    top           : 50%;
    transform     : translateY(-50%) translateY(-1px);
    color         : var(--mcp-text-dim);
    font-size     : 10px;
    pointer-events: none;
}

.mcp-sidebar-search input {
    width                 : 100%;
    padding               : 7px 10px 7px 28px;
    background            : var(--mcp-input-bg);
    border                : 1px solid var(--mcp-border);
    border-radius         : 8px;
    color                 : var(--mcp-text);
    font-family           : var(--font-main);
    font-size             : 13px;
    outline               : none;
    transition            : var(--transition-fast);
    backdrop-filter       : blur(8px);
    -webkit-appearance    : none;
    height                : 36px;
}

.mcp-sidebar-search input:focus {
    border-color: var(--mcp-purple);
    background  : rgba(102, 126, 234, 0.05);
    box-shadow  : 0 0 0 3px rgba(102, 126, 234, 0.10);
}

.mcp-sidebar-search input::placeholder { color: var(--mcp-text-dim); }

.mcp-tools-header {
    padding    : 7px 12px 5px;
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-shrink: 0;
}

.mcp-tools-count {
    font-size              : 11px;
    font-weight            : 800;
    background             : var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
}

.mcp-tools-label {
    font-size  : 10px;
    color      : var(--mcp-text-dim);
    font-weight: 600;
}

/* ── Tools List ───────────────────────────────────────────── */
.mcp-tools-list {
    flex                      : 1;
    overflow-y                : auto;
    padding                   : 4px 0 10px;
    min-height                : 0;
    -webkit-overflow-scrolling: touch;
}

.mcp-category { margin-bottom: 1px; }

.mcp-category-header {
    display                    : flex;
    align-items                : center;
    gap                        : 8px;
    padding                    : 6px 10px;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    margin                     : 1px 6px;
    border-radius              : var(--mcp-radius);
    min-height                 : 40px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-category-header:hover {
    background   : rgba(102, 126, 234, 0.05);
    border-radius: var(--mcp-radius);
}

.mcp-category-icon {
    width          : 24px;
    height         : 24px;
    border-radius  : 7px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 10px;
    color          : white;
    flex-shrink    : 0;
    box-shadow     : 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cat-tech    { background: linear-gradient(135deg, #667eea, #764ba2); }
.cat-news    { background: linear-gradient(135deg, #f7971e, #ffd200); }
.cat-market  { background: linear-gradient(135deg, #10b981, #38ef7d); }
.cat-drive   { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.cat-utility { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.cat-user    { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.cat-trending{ background: linear-gradient(135deg, #f97316, #dc2626); }
.cat-forex   { background: linear-gradient(135deg, #10b981, #065f46); }
.cat-reports   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cat-quarterly { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.mcp-category-info {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    line-height   : 1.3;
    min-width     : 0;
}

.mcp-category-name {
    font-size  : 11px;
    font-weight: 700;
    color      : var(--mcp-text);
}

.mcp-category-count {
    font-size  : 9px;
    color      : var(--mcp-text-dim);
    font-weight: 600;
}

.mcp-category-chevron {
    font-size  : 8px;
    color      : var(--mcp-text-dim);
    transition : transform 0.22s ease;
    flex-shrink: 0;
}

.mcp-category-tools {
    max-height: 0;
    overflow  : hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding   : 0 6px;
}

.mcp-category-tools.open { max-height: 1000px; }

.mcp-tool-item {
    display                    : flex;
    align-items                : flex-start;
    gap                        : 8px;
    padding                    : 6px 9px;
    border-radius              : 8px;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    margin-bottom              : 1px;
    border                     : 1px solid transparent;
    position                   : relative;
    min-height                 : 40px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-tool-item:hover {
    background  : rgba(102, 126, 234, 0.07);
    border-color: rgba(102, 126, 234, 0.14);
    transform   : translateX(2px);
}

.mcp-tool-item.selected {
    background  : rgba(102, 126, 234, 0.10);
    border-color: rgba(102, 126, 234, 0.26);
    box-shadow  : 0 2px 10px rgba(102, 126, 234, 0.10);
}

.mcp-tool-item > i {
    font-size  : 10px;
    color      : var(--mcp-purple);
    margin-top : 3px;
    flex-shrink: 0;
    width      : 13px;
    text-align : center;
}

.mcp-tool-item-info {
    display       : flex;
    flex-direction: column;
    line-height   : 1.35;
    flex          : 1;
    min-width     : 0;
}

.mcp-tool-item-name {
    font-family  : var(--font-mono);
    font-size    : 10.5px;
    font-weight  : 600;
    color        : var(--mcp-text);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.mcp-tool-item-desc {
    font-size    : 9.5px;
    color        : var(--mcp-text-dim);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   11. HISTORY PANEL
══════════════════════════════════════════════════════════════ */
.mcp-history-header {
    padding       : 10px 10px 8px;
    border-bottom : 1px solid var(--mcp-border);
    display       : flex;
    flex-direction: column;
    gap           : 7px;
    flex-shrink   : 0;
}

.mcp-history-filter {
    display: flex;
    gap    : 4px;
}

.mcp-history-filter-btn {
    flex                       : 1;
    padding                    : 5px 8px;
    border                     : 1px solid var(--mcp-border);
    border-radius              : 7px;
    background                 : transparent;
    color                      : var(--mcp-text-dim);
    font-family                : var(--font-main);
    font-size                  : 10px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 4px;
    white-space                : nowrap;
    min-height                 : 36px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-history-filter-btn:hover {
    border-color: var(--mcp-border-hover);
    color       : var(--mcp-text-muted);
    background  : rgba(102, 126, 234, 0.04);
}

.mcp-history-filter-btn.active {
    background  : rgba(102, 126, 234, 0.10);
    border-color: rgba(102, 126, 234, 0.28);
    color       : var(--mcp-purple);
}

.mcp-history-search-wrap {
    position   : relative;
    display    : flex;
    align-items: center;
}

.mcp-history-search-wrap i {
    position      : absolute;
    left          : 9px;
    font-size     : 10px;
    color         : var(--mcp-text-dim);
    pointer-events: none;
}

.mcp-history-search-wrap input {
    width             : 100%;
    padding           : 6px 10px 6px 26px;
    background        : var(--mcp-input-bg);
    border            : 1px solid var(--mcp-border);
    border-radius     : 7px;
    color             : var(--mcp-text);
    font-family       : var(--font-main);
    font-size         : 13px;
    outline           : none;
    transition        : var(--transition-fast);
    -webkit-appearance: none;
    height            : 36px;
}

.mcp-history-search-wrap input:focus {
    border-color: var(--mcp-purple);
    box-shadow  : 0 0 0 3px rgba(102, 126, 234, 0.10);
}

.mcp-history-search-wrap input::placeholder { color: var(--mcp-text-dim); }

/* ── New Conversation Button ──────────────────────────────── */
.mcp-new-conv-btn {
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 7px;
    margin                     : 8px 10px;
    padding                    : 10px 14px;
    background                 : var(--grad-main);
    border                     : none;
    border-radius              : 9px;
    color                      : #fff;
    font-family                : var(--font-main);
    font-size                  : 12px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-spring);
    flex-shrink                : 0;
    box-shadow                 : 0 4px 16px rgba(102, 126, 234, 0.32);
    position                   : relative;
    overflow                   : hidden;
    min-height                 : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-new-conv-btn::before {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity   : 0;
    transition: opacity 0.2s ease;
}

.mcp-new-conv-btn:hover::before { opacity: 1; }
.mcp-new-conv-btn i { font-size: 11px; }

.mcp-new-conv-btn:hover {
    transform : translateY(-1px);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.48);
}

.mcp-new-conv-btn:active { transform: scale(0.97); }

/* ── History List ─────────────────────────────────────────── */
.mcp-history-list {
    flex                      : 1;
    overflow-y                : auto;
    padding                   : 4px 6px 12px;
    display                   : flex;
    flex-direction            : column;
    gap                       : 2px;
    min-height                : 0;
    -webkit-overflow-scrolling: touch;
}

.mcp-history-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    padding        : 32px 16px;
    text-align     : center;
    color          : var(--mcp-text-dim);
}

.mcp-history-empty i { font-size: 28px; opacity: 0.22; }

.mcp-history-empty p {
    font-size  : 11px;
    line-height: 1.55;
    color      : var(--mcp-text-dim);
}

.mcp-history-item {
    display                    : flex;
    align-items                : center;
    gap                        : 6px;
    padding                    : 8px 10px;
    border-radius              : 9px;
    border                     : 1px solid transparent;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    flex-shrink                : 0;
    min-height                 : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-history-item:hover {
    background  : rgba(102, 126, 234, 0.05);
    border-color: var(--mcp-border);
    box-shadow  : var(--shadow-xs);
}

.mcp-history-item.active {
    background  : rgba(102, 126, 234, 0.09);
    border-color: rgba(102, 126, 234, 0.22);
    box-shadow  : 0 2px 12px rgba(102, 126, 234, 0.10);
}

.mcp-history-item-main {
    flex          : 1;
    min-width     : 0;
    display       : flex;
    flex-direction: column;
    gap           : 3px;
}

.mcp-history-item-title {
    font-size    : 11.5px;
    font-weight  : 600;
    color        : var(--mcp-text);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
    line-height  : 1.3;
}

.mcp-history-item.active .mcp-history-item-title { color: var(--mcp-purple); }

.mcp-history-item-meta {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 9.5px;
    color      : var(--mcp-text-dim);
}

.mcp-history-item-meta span { font-weight: 500; }

.mcp-history-item-actions {
    display    : flex;
    align-items: center;
    gap        : 3px;
    flex-shrink: 0;
    opacity    : 0;
    transition : var(--transition-fast);
}

.mcp-history-item:hover .mcp-history-item-actions { opacity: 1; }

.mcp-history-item-btn {
    width                      : 28px;
    height                     : 28px;
    border-radius              : 6px;
    border                     : 1px solid var(--mcp-border);
    background                 : transparent;
    color                      : var(--mcp-text-dim);
    font-size                  : 9px;
    cursor                     : pointer;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    transition                 : var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mcp-history-item-btn:hover {
    background  : rgba(102, 126, 234, 0.10);
    color       : var(--mcp-purple);
    border-color: rgba(102, 126, 234, 0.22);
}

.mcp-history-item-btn.active {
    background  : rgba(102, 126, 234, 0.10);
    color       : var(--mcp-purple);
    border-color: rgba(102, 126, 234, 0.28);
}

.mcp-history-delete-btn:hover {
    background  : rgba(239, 68, 68, 0.08);
    color       : var(--mcp-red);
    border-color: rgba(239, 68, 68, 0.22);
}

/* ══════════════════════════════════════════════════════════════
   12. MAIN AREA
══════════════════════════════════════════════════════════════ */
.mcp-main {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    position      : relative;
    background    : transparent;
    min-width     : 0;
    min-height    : 0;
}

/* ── Conversation Titlebar ────────────────────────────────── */
.mcp-conv-titlebar {
    display                : flex;
    align-items            : center;
    justify-content        : space-between;
    padding                : 0 16px;
    height                 : 40px;
    border-bottom          : 1px solid var(--mcp-border);
    background             : var(--mcp-glass);
    flex-shrink            : 0;
    gap                    : 10px;
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow               : hidden;
    min-width              : 0;
}

.mcp-body.light-mode .mcp-conv-titlebar {
    box-shadow: 0 1px 0 var(--mcp-border), inset 0 -1px 0 rgba(255,255,255,0.5);
}

.mcp-conv-title-wrap {
    display   : flex;
    align-items: center;
    gap       : 7px;
    min-width : 0;
    flex      : 1;
    overflow  : hidden;
}

.mcp-conv-title-wrap i {
    font-size  : 11px;
    color      : var(--mcp-purple);
    flex-shrink: 0;
}

.mcp-conv-title-wrap span {
    font-size    : 12px;
    font-weight  : 600;
    color        : var(--mcp-text);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.mcp-conv-actions {
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-shrink: 0;
}

.mcp-conv-action-btn {
    width                      : 32px;
    height                     : 32px;
    border-radius              : 7px;
    border                     : 1px solid var(--mcp-border);
    background                 : transparent;
    color                      : var(--mcp-text-dim);
    font-size                  : 11px;
    cursor                     : pointer;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    transition                 : var(--transition-fast);
    min-width                  : 32px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-conv-action-btn:hover {
    background  : rgba(102, 126, 234, 0.08);
    color       : var(--mcp-purple);
    border-color: rgba(102, 126, 234, 0.22);
    box-shadow  : 0 2px 10px rgba(102, 126, 234, 0.10);
}

.mcp-conv-action-btn.active {
    background  : rgba(102, 126, 234, 0.11);
    color       : var(--mcp-purple);
    border-color: rgba(102, 126, 234, 0.28);
}

/* ── Views ────────────────────────────────────────────────── */
.mcp-view {
    display       : none;
    flex          : 1;
    flex-direction: column;
    overflow      : hidden;
    min-height    : 0;
}

.mcp-view.active {
    display  : flex;
    animation: avdFadeIn 0.2s ease;
}

@keyframes avdFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   13. QUICK PROMPTS
══════════════════════════════════════════════════════════════ */
.mcp-quick-prompts {
    padding                : 10px 16px;
    border-bottom          : 1px solid var(--mcp-border);
    background             : var(--mcp-glass);
    flex-shrink            : 0;
    transition             : var(--transition-smooth);
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-quick-prompts.hidden { display: none; }

.mcp-quick-label {
    font-size     : 8px;
    font-weight   : 800;
    color         : var(--mcp-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom : 7px;
    display       : flex;
    align-items   : center;
    gap           : 5px;
}

.mcp-quick-label i { color: var(--mcp-amber); font-size: 9px; }

.mcp-quick-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 5px;
}

.mcp-quick-btn {
    display                    : flex;
    align-items                : center;
    gap                        : 6px;
    padding                    : 6px 9px;
    background                 : var(--mcp-input-bg);
    border                     : 1px solid var(--mcp-border);
    border-radius              : 8px;
    color                      : var(--mcp-text-muted);
    font-family                : var(--font-main);
    font-size                  : 10.5px;
    font-weight                : 600;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    text-align                 : left;
    white-space                : nowrap;
    overflow                   : hidden;
    backdrop-filter            : blur(8px);
    -webkit-backdrop-filter    : blur(8px);
    min-height                 : 36px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-quick-btn i {
    font-size  : 10px;
    color      : var(--mcp-purple);
    flex-shrink: 0;
}

.mcp-quick-btn span { overflow: hidden; text-overflow: ellipsis; }

.mcp-quick-btn:hover {
    background  : rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.24);
    color       : var(--mcp-text);
    transform   : translateY(-1px);
    box-shadow  : 0 4px 14px rgba(102, 126, 234, 0.10);
}

/* ══════════════════════════════════════════════════════════════
   14. MESSAGES CHAT
══════════════════════════════════════════════════════════════ */
.mcp-messages {
    flex                      : 1;
    overflow-y                : auto;
    overflow-x                : hidden;
    padding                   : 18px;
    display                   : flex;
    flex-direction            : column;
    gap                       : 14px;
    background                : transparent;
    min-height                : 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y     : contain;
}

/* ── Message Base ─────────────────────────────────────────── */
.mcp-message {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
    animation  : msgSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    max-width  : 100%;
    flex-shrink: 0;
}

@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mcp-message-avatar {
    width          : 32px;
    height         : 32px;
    border-radius  : 9px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 13px;
    flex-shrink    : 0;
    background     : var(--grad-main);
    color          : white;
    box-shadow     : 0 4px 14px rgba(102, 126, 234, 0.35);
}

.mcp-message-avatar-user {
    background: var(--grad-blue);
    box-shadow: 0 4px 14px rgba(79, 172, 254, 0.32);
}

.mcp-message-user { flex-direction: row-reverse; }
.mcp-message-user .mcp-message-body { align-items: flex-end; }

.mcp-message-user .mcp-message-content {
    background   : rgba(102, 126, 234, 0.07);
    border-color : rgba(102, 126, 234, 0.16);
    border-radius: var(--mcp-radius-lg) 4px var(--mcp-radius-lg) var(--mcp-radius-lg);
}

.mcp-message-body {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    flex          : 1;
    min-width     : 0;
    max-width     : calc(100% - 44px);
}

.mcp-message-header {
    display    : flex;
    align-items: center;
    gap        : 7px;
}

.mcp-message-author {
    font-size  : 11px;
    font-weight: 700;
    color      : var(--mcp-text);
}

.mcp-message-time {
    font-size           : 9px;
    color               : var(--mcp-text-dim);
    font-variant-numeric: tabular-nums;
}

/* ── Content Bubble ───────────────────────────────────────── */
.mcp-message-content {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : 4px var(--mcp-radius-lg) var(--mcp-radius-lg) var(--mcp-radius-lg);
    padding                : 12px 15px;
    font-size              : 13px;
    line-height            : 1.68;
    color                  : var(--mcp-text);
    word-break             : break-word;
    overflow-wrap          : break-word;
    overflow               : hidden;
    transition             : var(--transition-fast);
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-body.light-mode .mcp-message-content {
    box-shadow: var(--shadow-glass);
}

body.mcp-body:not(.light-mode) .mcp-message-content {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mcp-message-content ul,
.mcp-message-content ol { padding-left: 18px; margin: 7px 0; }
.mcp-message-content li { margin-bottom: 3px; }
.mcp-message-content strong { color: var(--mcp-purple); font-weight: 700; }
.mcp-message-content p { margin-bottom: 7px; }
.mcp-message-content p:last-child { margin-bottom: 0; }

.mcp-message-content h1, .mcp-message-content h2,
.mcp-message-content h3, .mcp-message-content h4 {
    color      : var(--mcp-text);
    margin     : 12px 0 5px;
    font-weight: 800;
    line-height: 1.3;
}

.mcp-message-content h1 { font-size: 16px; }
.mcp-message-content h2 { font-size: 14px; color: var(--mcp-purple); }
.mcp-message-content h3 { font-size: 13px; color: var(--mcp-green); }

.mcp-message-content code {
    font-family  : var(--font-mono);
    font-size    : 11px;
    background   : rgba(102, 126, 234, 0.07);
    padding      : 2px 5px;
    border-radius: 4px;
    color        : var(--mcp-purple);
    border       : 1px solid rgba(102, 126, 234, 0.14);
    word-break   : break-all;
}

.mcp-message-content pre {
    background   : var(--mcp-input-bg);
    border       : 1px solid var(--mcp-border);
    border-radius: var(--mcp-radius);
    padding      : 11px;
    margin       : 9px 0;
    overflow-x   : auto;
    -webkit-overflow-scrolling: touch;
}

.mcp-message-content pre code {
    background: transparent;
    padding   : 0;
    color     : inherit;
    font-size : 11px;
    border    : none;
    word-break: normal;
}

.mcp-message-content table {
    width          : 100%;
    border-collapse: collapse;
    margin         : 9px 0;
    font-size      : 11.5px;
    display        : block;
    overflow-x     : auto;
    -webkit-overflow-scrolling: touch;
}

.mcp-message-content th {
    background : rgba(102, 126, 234, 0.07);
    padding    : 6px 10px;
    text-align : left;
    font-weight: 700;
    border     : 1px solid var(--mcp-border);
    color      : var(--mcp-purple);
    white-space: nowrap;
}

.mcp-message-content td {
    padding   : 5px 10px;
    border    : 1px solid var(--mcp-border);
    white-space: nowrap;
}

.mcp-message-content tr:hover td { background: var(--mcp-input-bg); }

.mcp-message-content blockquote {
    border-left : 3px solid;
    border-image: var(--grad-main) 1;
    padding-left: 12px;
    margin      : 8px 0;
    color       : var(--mcp-text-muted);
    font-style  : italic;
}

.mcp-response-markdown { line-height: 1.68; }

.welcome-msg .mcp-message-content {
    background   : rgba(102, 126, 234, 0.05);
    border-color : rgba(102, 126, 234, 0.14);
    border-radius: var(--mcp-radius-lg);
}

body.mcp-body:not(.light-mode) .welcome-msg .mcp-message-content {
    background  : rgba(102, 126, 234, 0.06);
    border-color: rgba(102, 126, 234, 0.16);
}

/* ── Thinking Indicator ───────────────────────────────────── */
.mcp-message-thinking {
    background  : rgba(102, 126, 234, 0.04) !important;
    border-color: rgba(102, 126, 234, 0.12) !important;
}

.mcp-thinking-dots {
    display       : flex;
    flex-direction: column;
    gap           : 7px;
}

.mcp-thinking-label {
    font-size  : 11px;
    color      : var(--mcp-purple);
    font-weight: 600;
    display    : flex;
    align-items: center;
    gap        : 7px;
}

.mcp-dots { display: flex; gap: 4px; }

.mcp-dots span {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : var(--mcp-purple);
    animation    : dotBounce 1.4s infinite;
}

.mcp-dots span:nth-child(2) { animation-delay: 0.18s; }
.mcp-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%           { transform: scale(1.2); opacity: 1; }
}

/* ── Response Meta ────────────────────────────────────────── */
.mcp-response-meta {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 0 0 9px;
    border-bottom: 1px solid var(--mcp-border);
    margin-bottom: 10px;
    flex-wrap    : wrap;
}

.mcp-response-meta-item {
    display    : flex;
    align-items: center;
    gap        : 4px;
    font-size  : 9.5px;
    color      : var(--mcp-text-dim);
    font-weight: 600;
}

.mcp-response-meta-item i { color: var(--mcp-purple); font-size: 9px; }

/* ── Tool Calls ───────────────────────────────────────────── */
.mcp-tool-calls-section {
    margin-top   : 9px;
    border       : 1px solid var(--mcp-border);
    border-radius: var(--mcp-radius);
    overflow     : hidden;
}

.mcp-tool-calls-toggle {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 6px 11px;
    cursor     : pointer;
    font-size  : 10.5px;
    font-weight: 600;
    color      : var(--mcp-text-muted);
    background : var(--mcp-input-bg);
    transition : var(--transition-fast);
    user-select: none;
    min-height : 36px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-tool-calls-toggle:hover {
    background: rgba(102, 126, 234, 0.05);
    color     : var(--mcp-text);
}

.mcp-tool-calls-toggle i {
    font-size : 8px;
    transition: transform 0.2s ease;
    color     : var(--mcp-purple);
}

.mcp-tool-calls-list { padding: 5px; }

.mcp-tool-call-item {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 5px 9px;
    border-radius: 6px;
    margin-bottom: 2px;
    font-size    : 10.5px;
    border       : 1px solid transparent;
}

.tc-success { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.12); }
.tc-error   { background: rgba(239, 68, 68, 0.05);  border-color: rgba(239, 68, 68, 0.12); }

.mcp-tool-call-icon {
    width          : 18px;
    height         : 18px;
    border-radius  : 5px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 9px;
    flex-shrink    : 0;
}

.tc-success .mcp-tool-call-icon { background: rgba(16, 185, 129, 0.10); color: var(--mcp-green); }
.tc-error   .mcp-tool-call-icon { background: rgba(239, 68, 68, 0.10);  color: var(--mcp-red); }

.mcp-tool-call-body {
    display    : flex;
    flex       : 1;
    gap        : 7px;
    min-width  : 0;
    flex-wrap  : wrap;
    align-items: center;
}

.mcp-tool-call-name {
    font-family: var(--font-mono);
    font-weight: 700;
    color      : var(--mcp-text);
    font-size  : 10px;
    flex-shrink: 0;
}

.mcp-tool-call-params {
    color        : var(--mcp-text-dim);
    font-size    : 9px;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
    flex         : 1;
    min-width    : 0;
}

.mcp-tool-call-duration {
    font-size           : 9px;
    color               : var(--mcp-text-dim);
    flex-shrink         : 0;
    font-variant-numeric: tabular-nums;
}

.mcp-agents-used {
    margin-top : 7px;
    font-size  : 9.5px;
    color      : var(--mcp-text-dim);
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-wrap  : wrap;
}

.mcp-agent-tag {
    padding      : 2px 7px;
    background   : rgba(102, 126, 234, 0.08);
    border       : 1px solid rgba(102, 126, 234, 0.18);
    border-radius: 20px;
    font-size    : 9.5px;
    font-weight  : 700;
    color        : var(--mcp-purple);
}

.mcp-error-block {
    display    : flex;
    align-items: flex-start;
    gap        : 9px;
    color      : var(--mcp-red);
    font-size  : 12.5px;
}

.mcp-error-block i      { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.mcp-error-block strong { display: block; margin-bottom: 3px; }
.mcp-error-block p      { color: var(--mcp-text-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════
   15. INPUT ZONE
══════════════════════════════════════════════════════════════ */
.mcp-input-area {
    padding                : 12px 16px;
    border-top             : 1px solid var(--mcp-border);
    background             : var(--mcp-glass);
    flex-shrink            : 0;
    backdrop-filter        : blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mcp-body.light-mode .mcp-input-area {
    box-shadow: 0 -1px 0 var(--mcp-border), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mcp-input-wrapper {
    display                : flex;
    align-items            : flex-end;
    gap                    : 7px;
    background             : var(--mcp-input-bg);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius-lg);
    padding                : 9px 11px;
    transition             : var(--transition-fast);
    position               : relative;
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mcp-input-wrapper:focus-within {
    border-color: var(--mcp-purple);
    background  : rgba(102, 126, 234, 0.04);
    box-shadow  : 0 0 0 3px rgba(102, 126, 234, 0.10), 0 4px 20px rgba(102, 126, 234, 0.10);
}

.mcp-agent-indicator {
    display      : flex;
    align-items  : center;
    gap          : 5px;
    padding      : 3px 7px;
    border-radius: 6px;
    font-size    : 9.5px;
    font-weight  : 700;
    flex-shrink  : 0;
    align-self   : flex-end;
    margin-bottom: 2px;
    white-space  : nowrap;
    transition   : var(--transition-fast);
}

.agent-orchestrator {
    background: rgba(102, 126, 234, 0.09);
    border    : 1px solid rgba(102, 126, 234, 0.18);
    color     : var(--mcp-purple);
}

.agent-direct {
    background: rgba(79, 172, 254, 0.09);
    border    : 1px solid rgba(79, 172, 254, 0.18);
    color     : var(--mcp-blue);
}

.mcp-agent-indicator i { font-size: 8px; }

.mcp-textarea {
    flex       : 1;
    background : transparent;
    border     : none;
    color      : var(--mcp-text);
    font-family: var(--font-main);
    font-size  : 14px;
    line-height: 1.6;
    resize     : none;
    outline    : none;
    min-height : 22px;
    max-height : 160px;
    overflow-y : auto;
    -webkit-overflow-scrolling: touch;
}

.mcp-textarea::placeholder { color: var(--mcp-text-dim); }

.mcp-input-actions {
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-shrink: 0;
}

.mcp-attach-btn {
    width                      : 32px;
    height                     : 32px;
    border-radius              : 7px;
    border                     : 1px solid var(--mcp-border);
    background                 : var(--mcp-input-bg);
    color                      : var(--mcp-text-dim);
    font-size                  : 11px;
    cursor                     : pointer;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    transition                 : var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mcp-attach-btn:hover {
    background  : rgba(245, 158, 11, 0.09);
    color       : var(--mcp-amber);
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow  : 0 2px 10px rgba(245, 158, 11, 0.12);
}

.mcp-send-btn {
    width                      : 36px;
    height                     : 36px;
    border-radius              : var(--mcp-radius);
    border                     : none;
    background                 : var(--grad-main);
    color                      : white;
    font-size                  : 12px;
    cursor                     : pointer;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    transition                 : var(--transition-spring);
    box-shadow                 : 0 4px 16px rgba(102, 126, 234, 0.38);
    position                   : relative;
    overflow                   : hidden;
    flex-shrink                : 0;
    -webkit-tap-highlight-color: transparent;
}

.mcp-send-btn::before {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
    opacity   : 0;
    transition: opacity 0.2s;
}

.mcp-send-btn:hover::before { opacity: 1; }

.mcp-send-btn:hover {
    transform : translateY(-1px);
    box-shadow: 0 6px 22px rgba(102, 126, 234, 0.55);
}

.mcp-send-btn:active   { transform: scale(0.94); }
.mcp-send-btn:disabled { opacity: 0.52; cursor: not-allowed; transform: none; box-shadow: none; }

.mcp-input-footer {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 5px 2px 0;
}

.mcp-input-hint { font-size: 9.5px; color: var(--mcp-text-dim); }

.mcp-input-hint kbd {
    background   : var(--mcp-input-bg);
    border       : 1px solid var(--mcp-border);
    border-radius: 3px;
    padding      : 1px 4px;
    font-size    : 9px;
    font-family  : var(--font-mono);
}

.mcp-char-count {
    font-size           : 9.5px;
    color               : var(--mcp-text-dim);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   16. TOOL EXPLORER
══════════════════════════════════════════════════════════════ */
.mcp-tool-explorer {
    flex                      : 1;
    overflow-y                : auto;
    overflow-x                : hidden;
    padding                   : 20px 22px;
    display                   : flex;
    flex-direction            : column;
    gap                       : 16px;
    background                : transparent;
    min-height                : 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y     : contain;
    /* Permet aux enfants de ne PAS se compresser → la hauteur totale dépasse l'écran → scroll actif */
    align-items               : stretch;
}

.mcp-tool-explorer-header {
    text-align   : center;
    padding      : 0 0 16px;
    border-bottom: 1px solid var(--mcp-border);
}

.mcp-tool-explorer-header h2 {
    font-size      : 17px;
    font-weight    : 800;
    color          : var(--mcp-text);
    margin-bottom  : 4px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 9px;
}

.mcp-tool-explorer-header h2 i { color: var(--mcp-purple); }

.mcp-tool-explorer-header p {
    font-size: 11.5px;
    color    : var(--mcp-text-muted);
}

.mcp-tool-explorer-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 12px;
}

.mcp-explorer-card {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius-lg);
    padding                : 14px;
    display                : flex;
    flex-direction         : column;
    gap                    : 9px;
    transition             : var(--transition-fast);
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-shrink            : 0; /* ← NOUVEAU : empêche la compression */
}

.mcp-body.light-mode .mcp-explorer-card {
    box-shadow: var(--shadow-glass);
}

body.mcp-body:not(.light-mode) .mcp-explorer-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mcp-explorer-card:hover {
    border-color: var(--mcp-border-hover);
    box-shadow  : var(--shadow-md);
    transform   : translateY(-1px);
}

.mcp-explorer-card-header {
    display       : flex;
    align-items   : center;
    gap           : 6px;
    font-size     : 10px;
    font-weight   : 800;
    color         : var(--mcp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.mcp-explorer-card-header i { color: var(--mcp-purple); }

.mcp-explorer-select {
    width             : 100%;
    padding           : 8px 11px;
    background        : var(--mcp-input-bg);
    border            : 1px solid var(--mcp-border);
    border-radius     : var(--mcp-radius);
    color             : var(--mcp-text);
    font-family       : var(--font-main);
    font-size         : 14px;
    outline           : none;
    cursor            : pointer;
    transition        : var(--transition-fast);
    appearance        : auto;
    -webkit-appearance: auto;
    height            : 42px;
}

.mcp-explorer-select:focus {
    border-color: var(--mcp-purple);
    box-shadow  : 0 0 0 3px rgba(102, 126, 234, 0.10);
}

.mcp-explorer-select option,
.mcp-explorer-select optgroup { background: #ffffff; color: #1e293b; }

body.mcp-body:not(.light-mode) .mcp-explorer-select option,
body.mcp-body:not(.light-mode) .mcp-explorer-select optgroup { background: #0d1526; color: #e2e8f0; }

.mcp-explorer-tool-desc {
    font-size    : 11.5px;
    color        : var(--mcp-text-muted);
    line-height  : 1.6;
    padding      : 9px 11px;
    background   : var(--mcp-input-bg);
    border-radius: var(--mcp-radius);
    border       : 1px dashed var(--mcp-border);
    flex         : 1;
}

.mcp-explorer-tool-desc i { color: var(--mcp-blue); margin-right: 5px; }

.mcp-explorer-textarea {
    flex         : 1;
    width        : 100%;
    background   : var(--mcp-input-bg);
    border       : 1px solid var(--mcp-border);
    border-radius: var(--mcp-radius);
    color        : var(--mcp-text);
    font-family  : var(--font-mono);
    font-size    : 13px;
    padding      : 9px 11px;
    outline      : none;
    resize       : vertical;
    min-height   : 110px;
    line-height  : 1.6;
    tab-size     : 2;
    transition   : var(--transition-fast);
}

.mcp-explorer-textarea:focus {
    border-color: var(--mcp-purple);
    box-shadow  : 0 0 0 3px rgba(102, 126, 234, 0.09);
}

.mcp-explorer-format-btn {
    padding      : 3px 8px;
    background   : rgba(102, 126, 234, 0.07);
    border       : 1px solid rgba(102, 126, 234, 0.18);
    border-radius: 6px;
    color        : var(--mcp-purple);
    font-size    : 9.5px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : var(--transition-fast);
    display      : flex;
    align-items  : center;
    gap          : 4px;
    margin-left  : auto;
    -webkit-tap-highlight-color: transparent;
}

.mcp-explorer-format-btn:hover {
    background  : rgba(102, 126, 234, 0.14);
    border-color: var(--mcp-purple);
}

.mcp-explorer-execute-btn {
    width                      : 100%;
    padding                    : 10px;
    background                 : var(--grad-main);
    border                     : none;
    border-radius              : var(--mcp-radius);
    color                      : white;
    font-family                : var(--font-main);
    font-size                  : 12px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-spring);
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 6px;
    box-shadow                 : 0 4px 16px rgba(102, 126, 234, 0.32);
    position                   : relative;
    overflow                   : hidden;
    min-height                 : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-explorer-execute-btn::before {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent);
    opacity   : 0;
    transition: opacity 0.2s;
}

.mcp-explorer-execute-btn:hover::before { opacity: 1; }

.mcp-explorer-execute-btn:hover {
    transform : translateY(-1px);
    box-shadow: 0 6px 22px rgba(102, 126, 234, 0.48);
}

.mcp-explorer-execute-btn:disabled {
    opacity  : 0.52;
    cursor   : not-allowed;
    transform: none;
}

.mcp-explorer-result {
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius-lg);
    overflow               : hidden;
    animation              : avdFadeIn 0.22s ease;
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink            : 0; /* ← NOUVEAU : section visible entièrement */
}

.mcp-body.light-mode .mcp-explorer-result { box-shadow: var(--shadow-sm); }

.result-success { border-color: rgba(16, 185, 129, 0.30); }
.result-error   { border-color: rgba(239, 68, 68, 0.30); }

.mcp-explorer-result-header {
    display      : flex;
    align-items  : center;
    gap          : 9px;
    padding      : 8px 13px;
    background   : var(--mcp-input-bg);
    border-bottom: 1px solid var(--mcp-border);
}

.mcp-explorer-result-status {
    font-size  : 11.5px;
    font-weight: 700;
    display    : flex;
    align-items: center;
    gap        : 5px;
    flex       : 1;
}

.result-success .mcp-explorer-result-status { color: var(--mcp-green); }
.result-error   .mcp-explorer-result-status { color: var(--mcp-red); }

.mcp-explorer-result-meta {
    font-size           : 10px;
    color               : var(--mcp-text-dim);
    font-variant-numeric: tabular-nums;
}

.mcp-explorer-copy-btn {
    display      : flex;
    align-items  : center;
    gap          : 4px;
    padding      : 4px 9px;
    background   : var(--mcp-input-bg);
    border       : 1px solid var(--mcp-border);
    border-radius: 6px;
    color        : var(--mcp-text-muted);
    font-size    : 10px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mcp-explorer-copy-btn:hover {
    background  : rgba(102, 126, 234, 0.07);
    color       : var(--mcp-purple);
    border-color: rgba(102, 126, 234, 0.22);
}

.mcp-explorer-result-pre {
    background: var(--mcp-card);
    padding   : 13px;
    margin    : 0;
    overflow-x: auto;
    /* max-height supprimé → le contenu s'affiche en entier */
    /* Le scroll se fait au niveau de .mcp-tool-explorer */
    overflow-y: visible;
}

.mcp-explorer-result-pre code {
    font-family: var(--font-mono);
    font-size  : 11px;
    line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   17. RIGHT SIDEBAR — ReAct Monitor
══════════════════════════════════════════════════════════════ */
.mcp-right-tabs {
    display      : flex;
    background   : transparent;
    border-bottom: 1px solid var(--mcp-border);
    flex-shrink  : 0;
}

.mcp-right-tab {
    flex                       : 1;
    padding                    : 9px 5px;
    background                 : transparent;
    border                     : none;
    border-bottom              : 2px solid transparent;
    color                      : var(--mcp-text-dim);
    font-family                : var(--font-main);
    font-size                  : 10.5px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-fast);
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 4px;
    white-space                : nowrap;
    min-height                 : 42px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-right-tab i { font-size: 10px; }
.mcp-right-tab:hover { color: var(--mcp-text-muted); }

.mcp-right-tab.active {
    color              : var(--mcp-purple);
    border-bottom-color: var(--mcp-purple);
    background         : rgba(102, 126, 234, 0.04);
}

.mcp-right-content {
    display                   : none;
    flex-direction            : column;
    flex                      : 1;
    overflow-y                : auto;
    overflow-x                : hidden;
    padding                   : 10px 9px;
    gap                       : 9px;
    min-height                : 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y     : contain;
}

.mcp-right-content.active { display: flex; }

/* ── ReAct Monitor ────────────────────────────────────────── */
.mcp-react-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-shrink    : 0;
}

.mcp-react-title {
    font-size  : 11.5px;
    font-weight: 700;
    color      : var(--mcp-text);
    display    : flex;
    align-items: center;
    gap        : 5px;
}

.mcp-react-title i { color: var(--mcp-purple); }

.mcp-react-clear {
    width          : 28px;
    height         : 28px;
    border-radius  : 6px;
    border         : 1px solid var(--mcp-border);
    background     : transparent;
    color          : var(--mcp-text-dim);
    font-size      : 9px;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mcp-react-clear:hover {
    background  : rgba(239, 68, 68, 0.07);
    color       : var(--mcp-red);
    border-color: rgba(239, 68, 68, 0.25);
}

.mcp-react-log {
    flex                      : 1;
    overflow-y                : auto;
    overflow-x                : hidden;
    display                   : flex;
    flex-direction            : column;
    gap                       : 2px;
    min-height                : 80px;
    max-height                : 45vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y     : contain;
}

.mcp-react-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 7px;
    padding        : 20px;
    text-align     : center;
    color          : var(--mcp-text-dim);
}

.mcp-react-empty i { opacity: 0.22; font-size: 20px; }
.mcp-react-empty p { font-size: 10.5px; line-height: 1.55; color: var(--mcp-text-dim); }

.mcp-react-entry {
    display                : flex;
    align-items            : flex-start;
    gap                    : 6px;
    padding                : 5px 8px;
    border-radius          : 8px;
    border                 : 1px solid transparent;
    animation              : reactEntryIn 0.18s ease;
    flex-shrink            : 0;
    backdrop-filter        : blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes reactEntryIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.react-reasoning   { background: rgba(102, 126, 234, 0.05); border-color: rgba(102, 126, 234, 0.10); }
.react-acting      { background: rgba(247, 151, 30,  0.05); border-color: rgba(247, 151, 30,  0.10); }
.react-observe,
.react-ok          { background: rgba(16,  185, 129, 0.05); border-color: rgba(16,  185, 129, 0.10); }
.react-error       { background: rgba(239, 68,  68,  0.05); border-color: rgba(239, 68,  68,  0.12); }
.react-status      { background: rgba(118, 75,  162, 0.05); border-color: rgba(118, 75,  162, 0.10); }
.react-agent-start { background: rgba(79,  172, 254, 0.05); border-color: rgba(79,  172, 254, 0.10); }
.react-agent-done  { background: rgba(16,  185, 129, 0.05); border-color: rgba(16,  185, 129, 0.10); }

.mcp-react-entry-icon {
    width          : 16px;
    height         : 16px;
    border-radius  : 4px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 8px;
    flex-shrink    : 0;
    margin-top     : 1px;
}

.react-reasoning .mcp-react-entry-icon { background: rgba(102, 126, 234, 0.14); color: var(--mcp-purple); }
.act-icon                               { background: rgba(247, 151, 30,  0.14); color: var(--mcp-orange); }
.obs-icon                               { background: rgba(16,  185, 129, 0.14); color: var(--mcp-green); }
.react-error .mcp-react-entry-icon     { background: rgba(239, 68,  68,  0.14); color: var(--mcp-red); }
.status-icon                            { background: rgba(118, 75,  162, 0.14); color: var(--mcp-violet); }
.agent-icon                             { background: rgba(79,  172, 254, 0.14); color: var(--mcp-blue); }
.done-icon                              { background: rgba(16,  185, 129, 0.14); color: var(--mcp-green); }

.mcp-react-entry-body {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    gap           : 1px;
    min-width     : 0;
}

.mcp-react-step-label {
    font-size     : 7.5px;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    flex-shrink   : 0;
}

.react-reasoning .mcp-react-step-label { color: var(--mcp-purple); }
.act-label                              { color: var(--mcp-orange); }
.obs-label                              { color: var(--mcp-green); }
.orch-label                             { color: var(--mcp-violet); }
.agent-label                            { color: var(--mcp-blue); }
.done-label                             { color: var(--mcp-green); }

.mcp-react-step-text {
    font-size    : 10px;
    color        : var(--mcp-text);
    font-weight  : 500;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.react-duration {
    font-size           : 8.5px;
    color               : var(--mcp-text-dim);
    background          : var(--mcp-input-bg);
    padding             : 1px 4px;
    border-radius       : 3px;
    margin-left         : 4px;
    font-variant-numeric: tabular-nums;
}

.mcp-react-step-params {
    font-family  : var(--font-mono);
    font-size    : 8.5px;
    color        : var(--mcp-text-dim);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.mcp-react-entry-time {
    font-size           : 7.5px;
    color               : var(--mcp-text-dim);
    flex-shrink         : 0;
    font-variant-numeric: tabular-nums;
    margin-top          : 2px;
}

/* ══════════════════════════════════════════════════════════════
   18. METRICS TAB
══════════════════════════════════════════════════════════════ */
.mcp-metrics-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 6px;
    flex-shrink          : 0;
}

.mcp-metric-card {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    padding                : 9px;
    display                : flex;
    align-items            : center;
    gap                    : 7px;
    transition             : var(--transition-fast);
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-body.light-mode .mcp-metric-card { box-shadow: var(--shadow-glass); }

body.mcp-body:not(.light-mode) .mcp-metric-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mcp-metric-card:hover {
    border-color: var(--mcp-border-hover);
    transform   : translateY(-1px);
    box-shadow  : var(--shadow-md);
}

.mcp-metric-icon {
    width          : 30px;
    height         : 30px;
    border-radius  : 8px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 12px;
    color          : white;
    flex-shrink    : 0;
    box-shadow     : 0 3px 10px rgba(0, 0, 0, 0.15);
}

.mcp-metric-body { flex: 1; min-width: 0; }

.mcp-metric-val {
    font-size           : 16px;
    font-weight         : 900;
    color               : var(--mcp-text);
    line-height         : 1.1;
    font-variant-numeric: tabular-nums;
}

.mcp-metric-label {
    font-size     : 8.5px;
    color         : var(--mcp-text-dim);
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mcp-top-tools {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    padding                : 10px;
    flex-shrink            : 0;
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-body.light-mode .mcp-top-tools { box-shadow: var(--shadow-glass); }

.mcp-top-tools-header {
    font-size    : 10.5px;
    font-weight  : 700;
    color        : var(--mcp-text);
    margin-bottom: 7px;
    display      : flex;
    align-items  : center;
    gap          : 5px;
}

.mcp-top-tools-header i { color: var(--mcp-amber); }

.mcp-top-tools-empty,
.mcp-errors-empty {
    font-size : 10.5px;
    color     : var(--mcp-text-dim);
    text-align: center;
    padding   : 7px 0;
}

.mcp-top-tool-row {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    margin-bottom: 4px;
}

.mcp-top-tool-name {
    font-family  : var(--font-mono);
    font-size    : 9px;
    color        : var(--mcp-text-muted);
    width        : 80px;
    flex-shrink  : 0;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.mcp-top-tool-bar-wrap {
    flex         : 1;
    height       : 3px;
    background   : var(--mcp-input-bg);
    border-radius: 2px;
    overflow     : hidden;
}

.mcp-top-tool-bar {
    height       : 100%;
    background   : linear-gradient(90deg, var(--mcp-purple), var(--mcp-blue));
    border-radius: 2px;
    transition   : width 0.5s ease;
    box-shadow   : 0 0 6px rgba(102, 126, 234, 0.4);
}

.mcp-top-tool-count {
    font-size           : 9.5px;
    color               : var(--mcp-text-dim);
    font-weight         : 700;
    font-variant-numeric: tabular-nums;
    width               : 16px;
    text-align          : right;
    flex-shrink         : 0;
}

.mcp-errors-panel {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    padding                : 9px;
    flex-shrink            : 0;
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-body.light-mode .mcp-errors-panel { box-shadow: var(--shadow-glass); }

.mcp-errors-header {
    font-size    : 10.5px;
    font-weight  : 700;
    color        : var(--mcp-text);
    margin-bottom: 6px;
    display      : flex;
    align-items  : center;
    gap          : 5px;
}

.mcp-errors-header i { color: var(--mcp-amber); }

.mcp-errors-count {
    margin-left  : auto;
    background   : rgba(239, 68, 68, 0.09);
    color        : var(--mcp-red);
    font-size    : 9.5px;
    padding      : 1px 6px;
    border-radius: 10px;
    font-weight  : 700;
}

.mcp-error-entry {
    display      : flex;
    align-items  : flex-start;
    gap          : 6px;
    padding      : 5px 7px;
    background   : rgba(239, 68, 68, 0.04);
    border-radius: 6px;
    border       : 1px solid rgba(239, 68, 68, 0.09);
    margin-bottom: 3px;
}

.mcp-error-entry i { color: var(--mcp-red); font-size: 9.5px; flex-shrink: 0; margin-top: 2px; }
.mcp-error-entry-body { flex: 1; min-width: 0; }

.mcp-error-msg {
    font-size    : 9.5px;
    color        : var(--mcp-text-muted);
    display      : block;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.mcp-error-time { font-size: 8.5px; color: var(--mcp-text-dim); display: block; }

/* ══════════════════════════════════════════════════════════════
   19. ROUTING TAB
══════════════════════════════════════════════════════════════ */
.mcp-intent-header {
    font-size     : 11.5px;
    font-weight   : 700;
    color         : var(--mcp-text);
    display       : flex;
    align-items   : center;
    gap           : 5px;
    padding-bottom: 7px;
    border-bottom : 1px solid var(--mcp-border);
    flex-shrink   : 0;
}

.mcp-intent-header i { color: var(--mcp-purple); }

.mcp-intent-log {
    overflow-y                : auto;
    overflow-x                : hidden;
    display                   : flex;
    flex-direction            : column;
    gap                       : 4px;
    min-height                : 50px;
    max-height                : 180px;
    flex-shrink               : 0;
    -webkit-overflow-scrolling: touch;
}

.mcp-intent-entry {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    padding                : 7px 9px;
    animation              : avdFadeIn 0.18s ease;
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mcp-body.light-mode .mcp-intent-entry { box-shadow: var(--shadow-xs); }

.mcp-intent-entry-header {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    margin-bottom: 4px;
    flex-wrap    : wrap;
}

.mcp-intent-strategy {
    font-size    : 9.5px;
    font-weight  : 700;
    color        : var(--mcp-purple);
    background   : rgba(102, 126, 234, 0.08);
    border-radius: 4px;
    padding      : 2px 5px;
}

.mcp-intent-confidence {
    font-size  : 9.5px;
    color      : var(--mcp-green);
    font-weight: 600;
    display    : flex;
    align-items: center;
    gap        : 3px;
}

.mcp-intent-time {
    font-size           : 8.5px;
    color               : var(--mcp-text-dim);
    margin-left         : auto;
    font-variant-numeric: tabular-nums;
}

.mcp-intent-agents { display: flex; flex-wrap: wrap; gap: 3px; }

.mcp-intent-agent-tag {
    font-family  : var(--font-mono);
    font-size    : 8.5px;
    font-weight  : 700;
    color        : var(--mcp-text-muted);
    background   : var(--mcp-input-bg);
    border       : 1px solid var(--mcp-border);
    border-radius: 4px;
    padding      : 1px 5px;
}

.mcp-agents-panel {
    background             : var(--mcp-card);
    border                 : 1px solid var(--mcp-border);
    border-radius          : var(--mcp-radius);
    overflow               : hidden;
    flex-shrink            : 0;
    backdrop-filter        : blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mcp-body.light-mode .mcp-agents-panel { box-shadow: var(--shadow-glass); }

.mcp-agents-header {
    padding      : 8px 11px;
    font-size    : 10.5px;
    font-weight  : 700;
    color        : var(--mcp-text);
    background   : var(--mcp-input-bg);
    border-bottom: 1px solid var(--mcp-border);
    display      : flex;
    align-items  : center;
    gap          : 5px;
}

.mcp-agents-header i { color: var(--mcp-purple); }

.mcp-agents-list { display: flex; flex-direction: column; }

.mcp-agent-item {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 7px 11px;
    border-bottom: 1px solid var(--mcp-border);
    transition   : var(--transition-fast);
    min-height   : 44px;
}

.mcp-agent-item:last-child  { border-bottom: none; }
.mcp-agent-item:hover       { background: rgba(102, 126, 234, 0.04); }

.mcp-agent-icon-dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    flex-shrink  : 0;
    box-shadow   : 0 0 5px currentColor;
}

.mcp-agent-info { flex: 1; min-width: 0; }

.mcp-agent-name {
    font-size  : 10.5px;
    font-weight: 700;
    color      : var(--mcp-text);
}

.mcp-agent-scope {
    font-size    : 9px;
    color        : var(--mcp-text-dim);
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.mcp-agent-calls {
    font-size           : 11px;
    font-weight         : 800;
    color               : var(--mcp-purple);
    background          : rgba(102, 126, 234, 0.08);
    border              : 1px solid rgba(102, 126, 234, 0.16);
    border-radius       : 6px;
    padding             : 2px 7px;
    min-width           : 24px;
    text-align          : center;
    font-variant-numeric: tabular-nums;
    transition          : var(--transition-spring);
    flex-shrink         : 0;
}

/* ══════════════════════════════════════════════════════════════
   20. TOOL DETAIL MODAL
══════════════════════════════════════════════════════════════ */
.mcp-modal-overlay {
    position               : fixed;
    inset                  : 0;
    background             : rgba(7, 12, 24, 0.55);
    backdrop-filter        : blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display                : flex;
    align-items            : center;
    justify-content        : center;
    z-index                : 1000;
    opacity                : 0;
    pointer-events         : none;
    transition             : opacity 0.2s ease;
    padding                : 16px;
}

.mcp-modal-overlay.open { opacity: 1; pointer-events: all; }

.mcp-modal {
    background                : var(--mcp-glass-strong);
    border                    : 1px solid var(--mcp-border-glass);
    border-radius             : var(--mcp-radius-xl);
    width                     : 100%;
    max-width                 : 540px;
    max-height                : 90dvh;
    overflow-y                : auto;
    box-shadow                : var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform                 : scale(0.97) translateY(10px);
    transition                : transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter           : var(--glass-blur);
    -webkit-backdrop-filter   : var(--glass-blur);
    -webkit-overflow-scrolling: touch;
}

.mcp-modal-overlay.open .mcp-modal { transform: scale(1) translateY(0); }

.mcp-modal-header {
    display                : flex;
    align-items            : flex-start;
    justify-content        : space-between;
    padding                : 16px 18px 13px;
    border-bottom          : 1px solid var(--mcp-border);
    gap                    : 10px;
    background             : linear-gradient(135deg, rgba(102, 126, 234, 0.04), rgba(118, 75, 162, 0.04));
    position               : sticky;
    top                    : 0;
    z-index                : 1;
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mcp-modal-title-wrap {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    min-width     : 0;
    flex          : 1;
}

.mcp-modal-category-badge {
    display       : inline-flex;
    align-items   : center;
    font-size     : 9.5px;
    font-weight   : 700;
    padding       : 2px 8px;
    border-radius : 20px;
    width         : fit-content;
    letter-spacing: 0.3px;
}

.mcp-modal-category-badge.cat-tech    { background: rgba(102, 126, 234, 0.09); color: var(--mcp-purple);     border: 1px solid rgba(102, 126, 234, 0.20); }
.mcp-modal-category-badge.cat-news    { background: rgba(247, 151, 30,  0.09); color: var(--mcp-orange);     border: 1px solid rgba(247, 151, 30,  0.20); }
.mcp-modal-category-badge.cat-market  { background: rgba(16,  185, 129, 0.09); color: var(--mcp-green);      border: 1px solid rgba(16,  185, 129, 0.20); }
.mcp-modal-category-badge.cat-drive   { background: rgba(79,  172, 254, 0.09); color: var(--mcp-blue);       border: 1px solid rgba(79,  172, 254, 0.20); }
.mcp-modal-category-badge.cat-utility { background: rgba(161, 140, 209, 0.09); color: var(--mcp-purple-acc); border: 1px solid rgba(161, 140, 209, 0.20); }
.mcp-modal-category-badge.cat-user     { background: rgba(167, 139, 250, 0.09); color: #7c3aed;  border: 1px solid rgba(167, 139, 250, 0.20); }
.mcp-modal-category-badge.cat-trending { background: rgba(249, 115, 22,  0.09); color: #f97316;  border: 1px solid rgba(249, 115, 22,  0.20); }
.mcp-modal-category-badge.cat-forex    { background: rgba(16,  185, 129, 0.09); color: #065f46;  border: 1px solid rgba(16,  185, 129, 0.20); }
.mcp-modal-category-badge.cat-reports  { background: rgba(245, 158, 11,  0.09); color: #d97706;  border: 1px solid rgba(245, 158, 11,  0.20); }
.mcp-modal-category-badge.cat-quarterly{ background: rgba(14,  165, 233, 0.09); color: #0284c7;  border: 1px solid rgba(14,  165, 233, 0.20); }

.mcp-modal-title {
    font-family  : var(--font-mono);
    font-size    : 15px;
    font-weight  : 800;
    color        : var(--mcp-text);
    margin       : 0;
    overflow     : hidden;
    text-overflow: ellipsis;
    word-break   : break-all;
}

.mcp-modal-close {
    width                      : 32px;
    height                     : 32px;
    border-radius              : 7px;
    border                     : 1px solid var(--mcp-border);
    background                 : var(--mcp-input-bg);
    color                      : var(--mcp-text-dim);
    font-size                  : 11px;
    cursor                     : pointer;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    transition                 : var(--transition-fast);
    flex-shrink                : 0;
    -webkit-tap-highlight-color: transparent;
}

.mcp-modal-close:hover {
    background  : rgba(239, 68, 68, 0.08);
    color       : var(--mcp-red);
    border-color: rgba(239, 68, 68, 0.22);
}

.mcp-modal-body {
    padding       : 16px 18px 18px;
    display       : flex;
    flex-direction: column;
    gap           : 13px;
}

.mcp-modal-desc {
    font-size    : 12.5px;
    color        : var(--mcp-text-muted);
    line-height  : 1.65;
    padding      : 11px 13px;
    background   : var(--mcp-input-bg);
    border-radius: var(--mcp-radius);
    border       : 1px solid var(--mcp-border);
}

.mcp-modal-params h4 {
    font-size     : 10px;
    font-weight   : 700;
    color         : var(--mcp-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom : 7px;
    display       : flex;
    align-items   : center;
    gap           : 5px;
}

.mcp-modal-params h4 i { color: var(--mcp-purple); }

.mcp-modal-pre {
    background                : var(--mcp-input-bg);
    border                    : 1px solid var(--mcp-border);
    border-radius             : var(--mcp-radius);
    padding                   : 11px;
    margin                    : 0;
    overflow-x                : auto;
    -webkit-overflow-scrolling: touch;
}

.mcp-modal-pre code {
    font-family: var(--font-mono);
    font-size  : 11.5px;
    line-height: 1.65;
}

.mcp-modal-actions { display: flex; gap: 7px; }

.mcp-modal-btn-primary,
.mcp-modal-btn-secondary {
    flex                       : 1;
    padding                    : 10px 13px;
    border-radius              : var(--mcp-radius);
    font-family                : var(--font-main);
    font-size                  : 12px;
    font-weight                : 700;
    cursor                     : pointer;
    transition                 : var(--transition-spring);
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    gap                        : 5px;
    border                     : 1px solid transparent;
    position                   : relative;
    overflow                   : hidden;
    min-height                 : 44px;
    -webkit-tap-highlight-color: transparent;
}

.mcp-modal-btn-primary {
    background: var(--grad-main);
    color     : #fff;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.32);
}

.mcp-modal-btn-primary::before {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent);
    opacity   : 0;
    transition: opacity 0.2s;
}

.mcp-modal-btn-primary:hover::before { opacity: 1; }

.mcp-modal-btn-primary:hover {
    transform : translateY(-1px);
    box-shadow: 0 6px 22px rgba(102, 126, 234, 0.50);
}

.mcp-modal-btn-secondary {
    background  : var(--mcp-input-bg);
    border-color: var(--mcp-border);
    color       : var(--mcp-text-muted);
}

.mcp-modal-btn-secondary:hover {
    background  : rgba(102, 126, 234, 0.06);
    color       : var(--mcp-text);
    border-color: rgba(102, 126, 234, 0.20);
    transform   : translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   21. TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
.mcp-toasts {
    position      : fixed;
    bottom        : 20px;
    right         : 20px;
    display       : flex;
    flex-direction: column;
    gap           : 6px;
    z-index       : 9999;
    pointer-events: none;
}

.mcp-toast {
    display                : flex;
    align-items            : center;
    gap                    : 8px;
    padding                : 10px 13px;
    background             : var(--mcp-glass-strong);
    border                 : 1px solid var(--mcp-border-glass);
    border-radius          : var(--mcp-radius);
    font-size              : 11.5px;
    font-weight            : 600;
    color                  : var(--mcp-text);
    box-shadow             : var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter        : var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    min-width              : 200px;
    max-width              : 290px;
    pointer-events         : all;
    transform              : translateX(10px);
    opacity                : 0;
    transition             : all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mcp-toast.show { transform: translateX(0); opacity: 1; }
.mcp-toast i { font-size: 12px; flex-shrink: 0; }

.mcp-toast-success { border-left: 3px solid var(--mcp-green); }
.mcp-toast-success i { color: var(--mcp-green); }
.mcp-toast-error { border-left: 3px solid var(--mcp-red); }
.mcp-toast-error i { color: var(--mcp-red); }
.mcp-toast-warning { border-left: 3px solid var(--mcp-amber); }
.mcp-toast-warning i { color: var(--mcp-amber); }
.mcp-toast-info { border-left: 3px solid var(--mcp-blue); }
.mcp-toast-info i { color: var(--mcp-blue); }

/* ══════════════════════════════════════════════════════════════
   22. CODE & MONO
══════════════════════════════════════════════════════════════ */
.mcp-code-input { font-family: var(--font-mono); tab-size: 2; }
.hljs           { background: transparent !important; font-size: 11px; }

.mcp-body.light-mode .mcp-explorer-result-pre,
.mcp-body.light-mode .mcp-modal-pre,
.mcp-body.light-mode .mcp-message-content pre {
    background  : rgba(240, 244, 255, 0.8);
    border-color: rgba(102, 126, 234, 0.10);
}

.mcp-body.light-mode .hljs { color: #1e293b; }

/* ══════════════════════════════════════════════════════════════
   23. SKELETON
══════════════════════════════════════════════════════════════ */
.mcp-skeleton {
    background     : linear-gradient(90deg,
        rgba(102, 126, 234, 0.04) 25%,
        rgba(102, 126, 234, 0.10) 50%,
        rgba(102, 126, 234, 0.04) 75%
    );
    background-size: 200% 100%;
    animation      : shimmer 1.5s infinite;
    border-radius  : var(--mcp-radius);
}

body.mcp-body:not(.light-mode) .mcp-skeleton {
    background     : linear-gradient(90deg,
        rgba(102, 126, 234, 0.04) 25%,
        rgba(102, 126, 234, 0.09) 50%,
        rgba(102, 126, 234, 0.04) 75%
    );
    background-size: 200% 100%;
}

@keyframes shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   24. UTILITY
══════════════════════════════════════════════════════════════ */
.mcp-gradient-text {
    background             : var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
}

/* ══════════════════════════════════════════════════════════════
   25. LIGHT MODE FINE-TUNING
══════════════════════════════════════════════════════════════ */
.mcp-body.light-mode .mcp-sidebar-left,
.mcp-body.light-mode .mcp-sidebar-right { background: rgba(255, 255, 255, 0.75); }

.mcp-body.light-mode .mcp-quick-prompts { background: rgba(255, 255, 255, 0.70); }
.mcp-body.light-mode .mcp-input-area    { background: rgba(255, 255, 255, 0.75); }
.mcp-body.light-mode .mcp-conv-titlebar { background: rgba(255, 255, 255, 0.70); }

.mcp-body.light-mode .mcp-sidebar-search input,
.mcp-body.light-mode .mcp-history-search-wrap input { background: rgba(245, 247, 255, 0.80); }

.mcp-body.light-mode .mcp-explorer-select,
.mcp-body.light-mode .mcp-explorer-textarea { background: rgba(245, 247, 255, 0.80); }

.mcp-body.light-mode .mcp-right-tab.active { background: rgba(102, 126, 234, 0.05); }
.mcp-body.light-mode .mcp-react-entry      { opacity: 0.94; }

.mcp-body.light-mode .mcp-modal {
    box-shadow: 0 24px 80px rgba(102, 126, 234, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mcp-body.light-mode .mcp-modal-overlay { background: rgba(7, 12, 36, 0.35); }

.mcp-body.light-mode .welcome-msg .mcp-message-content {
    background  : rgba(102, 126, 234, 0.04);
    border-color: rgba(102, 126, 234, 0.12);
}

.mcp-body.light-mode .mcp-toast {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════════════════
   26. RESPONSIVE — Tablet ≤ 1280px
══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    :root {
        --sidebar-left-w : 256px;
        --sidebar-right-w: 260px;
    }
    .mcp-quick-grid  { grid-template-columns: repeat(3, 1fr); }
    .mcp-session-info{ gap: 8px; }
}

@media (max-width: 1080px) {
    .mcp-sidebar-right { display: none; }
    .mcp-quick-grid    { grid-template-columns: repeat(3, 1fr); }
    .mcp-session-info  { display: none; }
    :root              { --sidebar-left-w: 240px; }
}

/* ══════════════════════════════════════════════════════════════
   27. RESPONSIVE — Mobile ≤ 860px
   FIX PRINCIPAL : flex:none sur .mcp-layout + scroll output
══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

    :root { --header-h: 52px; }

    /* ═══════════════════════════════════════════════════════
       FIX #1 — Layout height
       flex:1 ignorait height calculée → input cachée derrière nav
       Solution : flex:none + height et max-height explicites
    ═══════════════════════════════════════════════════════ */
    .mcp-layout {
        flex      : none;
        height    : calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        max-height: calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        overflow  : hidden;
        width     : 100%;
    }

    /* ═══════════════════════════════════════════════════════
       FIX #2 — Main area doit être bornée
    ═══════════════════════════════════════════════════════ */
    .mcp-main {
        flex          : 1;
        display       : flex;
        flex-direction: column;
        overflow      : hidden;
        min-height    : 0;
        max-height    : 100%;
    }

    /* ═══════════════════════════════════════════════════════
       FIX #3 — La vue active doit être bornée
    ═══════════════════════════════════════════════════════ */
    .mcp-view.active {
        flex          : 1;
        display       : flex;
        flex-direction: column;
        overflow      : hidden;
        min-height    : 0;
        max-height    : 100%;
    }

    /* ═══════════════════════════════════════════════════════
       FIX #4 — Messages scrollable (output des outils)
       overscroll-behavior-y: contain évite le rebond iOS
    ═══════════════════════════════════════════════════════ */
    .mcp-messages {
        flex                      : 1;
        overflow-y                : auto;
        overflow-x                : hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y     : contain;
        min-height                : 0;
        max-height                : 100%;
    }

    /* ═══════════════════════════════════════════════════════
       FIX #5 — Tool Explorer scrollable
    ═══════════════════════════════════════════════════════ */
    .mcp-tool-explorer {
        flex                      : 1;
        overflow-y                : auto;
        overflow-x                : hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y     : contain;
        min-height                : 0;
        max-height                : 100%;
    }

    /* ── Show mobile elements ─────────────────────────────── */
    .mcp-mobile-nav     { display: flex; }
    .mcp-mobile-overlay { display: block; }

    /* ── Toasts au-dessus de la bottom nav ────────────────── */
    .mcp-toasts { bottom: calc(var(--mobile-nav-h) + 12px); right: 12px; }

    /* ── Sidebars en slide-over ───────────────────────────── */
    .mcp-sidebar-left,
    .mcp-sidebar-right {
        position  : fixed;
        top       : var(--header-h);
        bottom    : var(--mobile-nav-h);
        z-index   : 350;
        width     : 300px !important;
        max-width : 88vw;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-xl);
        overflow  : hidden;
    }

    .mcp-sidebar-left {
        left     : 0;
        transform: translateX(-100%);
        border-right: 1px solid var(--mcp-border);
    }

    .mcp-sidebar-right {
        right    : 0;
        transform: translateX(100%);
        border-left: 1px solid var(--mcp-border);
        display  : flex !important;
    }

    .mcp-sidebar-left.mobile-open,
    .mcp-sidebar-right.mobile-open { transform: translateX(0); }

    /* ── Masquage éléments desktop ────────────────────────── */
    .mcp-sidebar-toggle   { display: none; }
    .mcp-status-bar       { display: none; }
    .mcp-header-divider   { display: none; }
    .mcp-session-info     { display: none; }
    .mcp-header-user-info { display: none; }
    .mcp-user-chevron     { display: none; }
    .mcp-input-hint       { display: none; }

    /* ── Mode selector : icônes seulement ─────────────────── */
    .mcp-mode-btn span { display: none; }
    .mcp-mode-btn      { padding: 5px 9px; min-width: 36px; }

    /* ── Grilles ──────────────────────────────────────────── */
    .mcp-quick-grid         { grid-template-columns: 1fr 1fr; }
    .mcp-tool-explorer-grid { grid-template-columns: 1fr; }

    /* ── Messages & input compacts ────────────────────────── */
    .mcp-messages   { padding: 12px; gap: 10px; }
    .mcp-input-area { padding: 10px 12px; }

    /* ── Conv titlebar compact ────────────────────────────── */
    .mcp-conv-titlebar { padding: 0 10px; height: 38px; }
    .mcp-quick-prompts { padding: 8px 12px; }

    /* ── Actions history : toujours visibles sur mobile ────── */
    .mcp-history-item-actions { opacity: 1; }

    /* ── User dropdown ────────────────────────────────────── */
    .mcp-user-dropdown { right: -6px; }

    /* ── Right content scrollable ─────────────────────────── */
    .mcp-right-content {
        overflow-y                : auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y     : contain;
    }
}

/* ══════════════════════════════════════════════════════════════
   28. RESPONSIVE — Small Mobile ≤ 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root { --header-h: 50px; }

    /* Même fix layout */
    .mcp-layout {
        flex      : none;
        height    : calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        max-height: calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        overflow  : hidden;
    }

    .mcp-header        { padding: 0 10px; gap: 6px; }
    .mcp-logo-text     { display: none; }
    .mcp-logo-img-text { height: 26px; max-width: 90px; }

    .mcp-quick-grid { grid-template-columns: 1fr 1fr; }

    .mcp-modal         { border-radius: var(--mcp-radius-lg); }
    .mcp-modal-actions { flex-direction: column; }
    .mcp-modal-overlay { padding: 8px; }
    .mcp-modal-body    { padding: 14px 14px 16px; }
    .mcp-modal-header  { padding: 12px 14px 10px; }

    .mcp-message-content { padding: 10px 12px; }
    .mcp-messages        { padding: 10px; gap: 8px; }
    .mcp-input-area      { padding: 8px 10px; }

    .mcp-header-btn,
    .mcp-theme-toggle { width: 30px; height: 30px; min-width: 30px; font-size: 11px; }

    .mcp-sidebar-left,
    .mcp-sidebar-right { width: calc(100vw - 24px) !important; }

    .mcp-toasts {
        right : 8px;
        left  : 8px;
        bottom: calc(var(--mobile-nav-h) + 8px);
    }

    .mcp-toast { min-width: unset; max-width: 100%; width: 100%; }

    .mcp-user-dropdown {
        width   : calc(100vw - 16px);
        right   : -6px;
        max-width: 100%;
    }

    .mcp-mode-selector { padding: 2px; }
    .mcp-mode-btn      { padding: 4px 8px; min-width: 32px; }

    .mcp-conv-action-btn { width: 30px; height: 30px; min-width: 30px; }
    .mcp-send-btn        { width: 38px; height: 38px; }

    .mcp-message-avatar { width: 28px; height: 28px; }
    .mcp-message-body   { max-width: calc(100% - 38px); }

    .mcp-react-log  { max-height: 28vh; }
    .mcp-intent-log { max-height: 130px; }

    .mcp-quick-prompts { padding: 7px 10px; }
    .mcp-quick-btn     { font-size: 10px; padding: 5px 7px; min-height: 34px; }

    .mcp-tool-explorer { padding: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   28b. RESPONSIVE — Very Small Mobile ≤ 360px
══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    :root { --header-h: 48px; }

    /* Même fix layout */
    .mcp-layout {
        flex      : none;
        height    : calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        max-height: calc(100dvh - var(--header-h) - var(--mobile-nav-h));
        overflow  : hidden;
    }

    .mcp-header { padding: 0 8px; gap: 4px; }

    .mcp-logo-img-text      { display: none; }
    .mcp-logo-icon-fallback {
        display        : flex;
        width          : 28px;
        height         : 28px;
        border-radius  : 8px;
        font-size      : 12px;
    }

    .mcp-mode-btn   { padding: 4px 6px; min-width: 28px; font-size: 10px; }
    .mcp-mode-btn i { font-size: 11px; }

    .mcp-header-btn,
    .mcp-theme-toggle { width: 28px; height: 28px; min-width: 28px; }

    .mcp-header-user { padding: 3px; gap: 0; }

    .mcp-sidebar-left,
    .mcp-sidebar-right { width: 100vw !important; }

    .mcp-messages        { padding: 8px; gap: 7px; }
    .mcp-message-content { padding: 9px 11px; font-size: 12px; }
    .mcp-message-avatar  { width: 26px; height: 26px; }
    .mcp-message-body    { max-width: calc(100% - 34px); }
    .mcp-input-area      { padding: 7px 8px; }

    .mcp-quick-grid    { grid-template-columns: 1fr; }
    .mcp-quick-prompts { padding: 6px 8px; }

    .mcp-modal-overlay { padding: 4px; }
    .mcp-modal         { border-radius: var(--mcp-radius); max-height: 95dvh; }

    .mcp-toasts        { right: 4px; left: 4px; }

    .mcp-mobile-nav-btn   { font-size: 8px; gap: 2px; }
    .mcp-mobile-nav-btn i { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   29. ACCESSIBILITY & FOCUS
══════════════════════════════════════════════════════════════ */
:focus-visible {
    outline       : 2px solid var(--mcp-purple);
    outline-offset: 2px;
    border-radius : 4px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════════════════════
   30. PRINT
══════════════════════════════════════════════════════════════ */
@media print {
    .mcp-header,
    .mcp-sidebar-left,
    .mcp-sidebar-right,
    .mcp-input-area,
    .mcp-mobile-nav,
    .mcp-quick-prompts,
    .mcp-toasts { display: none !important; }

    .mcp-messages { max-height: none; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════
   31. PERFORMANCE — Reduce Motion
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration      : 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration     : 0.01ms !important;
    }
}