:root{
  color-scheme: light dark;

  /* Colors */
  --bg-primary: rgba(255,255,255,0.06);
  --bg-secondary: rgba(255,255,255,0.03);
  --border-primary: rgba(255,255,255,0.08);

  /* Xtrade Dark Theme */
  --bg-dark-primary: #1e1e1e;
  --bg-dark-secondary: #1F1F1F;
  --bg-dark-tertiary: #252525;
  --bg-card: #1F1F1F;
  --bg-card-hover: #1a1c26;

  /* Xtrade Accent - Blue */
  --accent-primary: #2196ee;
  --accent-dim: rgba(33, 150, 238, 0.3);
  --accent-glow: rgba(33, 150, 238, 0.15);

  /* Status Colors */
  --color-positive: #22C55E;
  --color-negative: #EF4444;

  /* Layout */
  --sidebar-w: 260px;
  --page-pad: clamp(4px, 1vw, 16px);
  --composer-bottom: 20px;
  --composer-gap: 16px;
  --input-x: 16px;

  /* Live height (updated by JS) */
  --composer-h: 110px;

  /* Derived for clipping/padding */
  --messages-clip: calc(var(--composer-h) + var(--composer-bottom) + env(safe-area-inset-bottom, 0px));
  --messages-bottom-pad: calc(var(--composer-h) + var(--composer-bottom) + var(--composer-gap) + env(safe-area-inset-bottom, 0px));

  /* Bubbles */
  --bubble-margin: clamp(8px, 3vw, 60px);
  --bubble-max: 1800px;

  /* ========== DESIGN COLORS (Phase G — squared minimalist, greyer tones) ========== */
  /* Background palette tuned for Mr. Billions: softer grey-on-grey hierarchy
     instead of near-black. Three steps of contrast give cards visual depth
     without harsh black outlines. */
  --xt-bg-primary: #1a1a1a;        /* page background — flat dark grey */
  --xt-bg-secondary: #232323;      /* one step lighter — sidebars, modals */
  --xt-bg-card: #262626;            /* card surfaces — readable contrast on primary */
  --xt-bg-card-hover: #2e2e2e;     /* hover surface — subtle lift, not blue */
  --xt-accent: #2196ee;
  --xt-accent-hover: #42a5f5;
  --xt-accent-dim: rgba(33, 150, 238, 0.15);
  /* Master grey — used for the auth header buttons, the bot avatar background,
     and the LLM-rendered action buttons under chat messages. */
  --xt-master-grey: #d4d4d4;
  --xt-master-grey-hover: #e8e8e8;
  --xt-master-grey-dim: rgba(212, 212, 212, 0.15);
  --xt-text-primary: #ffffff;
  --xt-text-secondary: rgba(255, 255, 255, 0.6);
  --xt-text-muted: rgba(255, 255, 255, 0.4);
  --xt-success: #22c55e;
  --xt-danger: #ef4444;
  --xt-warning: #f59e0b;
  --xt-border: rgba(255, 255, 255, 0.08);     /* softer border (was 0.14) */
  --xt-border-accent: rgba(33, 150, 238, 0.3);
  --xt-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);  /* softer than the old 0 8px 32px */
  /* Squared minimalist radii (Claude-style). Pills still allowed where they
     belong (auth header buttons keep their hardcoded 20px). */
  --xt-radius-sm: 4px;   /* inputs, chips */
  --xt-radius-md: 6px;   /* cards, modals */
  --xt-radius-lg: 8px;   /* large containers */
  --xt-radius-pill: 20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;max-width:100vw;overflow-x:hidden;position:relative}
body{font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--xt-bg-primary);color:#e5e7eb}
body::after{display:none}
.gradient{position:fixed;inset:0 0 auto 0;height:220px;z-index:-1;background:transparent;}
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
@media (max-width:920px){.shell{grid-template-columns:1fr}}

/* Sidebar */
.sidebar{
  background: #1F1F1F;
  background-image:
    linear-gradient(180deg,
      rgba(33, 150, 238, 0.06) 0%,
      transparent 40%);
  border-right:1px solid rgba(33, 150, 238, 0.1);
  padding:16px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;overflow:hidden
}
.sidebar::before{display:none}
.sidebar::after{display:none}
.sidebar-indicator{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, #2196ee, rgba(33, 150, 238, 0.3));z-index:3}
.sidebar>*{position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:4px}
.brand .logo{width:28px;height:28px;display:inline-block}
.badge{
  font-size:12px;
  padding:4px 8px;
  border:1px solid rgba(33, 150, 238, 0.3);
  border-radius:6px;
  background:transparent;
  color:rgba(245, 255, 255, 0.9);  /* Much whiter to match dropdowns */
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
  text-shadow: 0 0 20px rgba(33, 150, 238, 0.08);  /* Subtle teal glow */
}
.btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0.5px solid rgba(33, 150, 238, 0.15);border-radius:8px;background:rgba(255,255,255,0.03);cursor:pointer;transition:.2s}
.btn:hover{background:rgba(33, 150, 238, 0.08);border-color:rgba(33, 150, 238, 0.3)}

/* ========= AUTH HEADER BUTTONS ========= */
/* Three top-right buttons (Get a Call / Register Free / Sign In) share an
   identical box: same height, same horizontal padding, same font, same radius.
   Only the colour scheme differentiates them. */
.auth-buttons{display:flex;align-items:center;gap:8px}
.auth-buttons .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  font-size:13px;
  font-weight:500;
  line-height:1;
  border-radius:8px;
  white-space:nowrap;
  gap:6px;
  border:1px solid transparent;
  transition:filter .15s, transform .15s, box-shadow .15s;
}
/* Call + Register: master grey */
.auth-buttons .call-btn,
.auth-buttons .register-btn{
  background:var(--xt-master-grey);
  border-color:var(--xt-master-grey);
  color:#1e1e1e;
}
.auth-buttons .call-btn:hover,
.auth-buttons .register-btn:hover{
  background:var(--xt-master-grey-hover);
  border-color:var(--xt-master-grey-hover);
  filter:brightness(1.02);
}
/* Sign In: accent blue (was the orange CTA — now the only blue in the row) */
.auth-buttons .login-btn{
  background:var(--xt-accent);
  border-color:var(--xt-accent);
  color:#ffffff;
}
.auth-buttons .login-btn:hover{
  background:var(--xt-accent-hover);
  border-color:var(--xt-accent-hover);
}
/* Hide the call-button SVG on desktop — text-only at this width.
   Mobile keeps the SVG and hides the text instead (rule below at @media). */
.auth-buttons .call-btn svg{display:none}
.muted{opacity:.7;font-size:12px}

/* Main (nuke any external max-widths) */
.main{padding:16px 0;width:100% !important;max-width:none !important}
.wrap{width:100% !important;max-width:none !important;margin:0;padding:0 var(--page-pad)}
.shell .main, .shell .main .wrap, .main .wrap, main.main .wrap { max-width:none !important; width:100% !important; }

header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;width:100%}

/* Xtrade Branding */
.Xtrade-branding{
  display:flex;
  align-items:center;
  gap:12px;
}
.Xtrade-logo{
  width:36px;
  height:36px;
  background:linear-gradient(135deg, var(--accent-primary) 0%, #1565c0 100%);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  color:#fff;
  box-shadow:0 2px 8px var(--accent-primary-dim);
}
.Xtrade-name{
  font-size:18px;
  font-weight:600;
  color:#fff;
  letter-spacing:-0.3px;
}
/* Xtrade Logo Icon (blue rounded square + heartbeat SVG) */
.xtrade-logo {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.xtrade-logo svg {
  display: block;
}
/* Terminal-style activity log */
.xt-terminal-log { background: #0a0e14; border: 1px solid #1a3a2a; border-radius: 8px; padding: 12px; font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 12px; }
.xt-terminal-header { color: #22c55e; font-weight: bold; margin-bottom: 8px; }
.xt-terminal-body { max-height: 300px; overflow-y: auto; }
.xt-terminal-line { color: #a0a0a0; padding: 2px 0; white-space: nowrap; }
.xt-term-action { font-weight: bold; padding: 1px 6px; border-radius: 3px; color: #22c55e; }
/* ========= Xtrade GREETING MESSAGE ========= */
.Xtrade-greeting{
  display:flex;
  width:100%;
  margin:6px 0;
  align-items:flex-start;
}
.Xtrade-greeting .bubble{
  text-align:left;
  margin-left:0 !important;
  padding-left:10px;
}

/* Strategy Panel */
.strategy-panel{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:900px;
  max-width:95vw;
  height:600px;
  max-height:85vh;
  background:var(--bg-dark-primary);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  z-index:1000;
  display:none;
  flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.strategy-panel-header{
  display:flex;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  cursor:move;
  user-select:none;
}
.strategy-panel-header h3{
  margin:0;
  font-size:16px;
  color:#fff;
  flex:1;
}
.strategy-panel-header h3 span{
  color:var(--accent-primary);
  font-weight:700;
}
.strategy-close-btn{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:24px;
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}
.strategy-close-btn:hover{
  color:#fff;
}

/* Strategy Timeframe Selector */
.strategy-timeframe-selector{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  background:rgba(0,0,0,0.2);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.strategy-timeframe-selector label{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  font-weight:500;
}
.timeframe-buttons{
  display:flex;
  gap:4px;
}
.timeframe-btn{
  padding:4px 12px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.7);
  border-radius:4px;
  cursor:pointer;
  font-size:11px;
  font-weight:500;
  transition:all 0.2s;
}
.timeframe-btn:hover{
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.timeframe-btn.active{
  background:#f59e0b;
  border-color:#f59e0b;
  color:#1a1a2e;
}

.strategy-panel-body{
  display:flex;
  overflow:hidden;
  min-height:0;
  min-width:0;
  flex:1;
}
.strategy-column{
  padding:16px;
  border-right:1px solid rgba(255,255,255,0.05);
  min-height:0;
  min-width:0;
}
.strategy-column:last-child{
  border-right:none;
}
.strategy-column h4{
  margin:0 0 12px 0;
  font-size:13px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.5px;
  flex-shrink:0;
}
.strategy-column h5{
  margin:12px 0 8px 0;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
}
/* Left Column: Code + Chat */
.strategy-code-column{
  width:40%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overscroll-behavior:contain;
}
.strategy-code-display{
  flex:1;
  background:rgba(0,0,0,0.3);
  border-radius:8px;
  padding:12px;
  overflow-y:auto !important;
  overflow-x:hidden;
  margin-bottom:12px;
  max-height:40vh;
  min-height:0;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.strategy-code-display pre{
  margin:0;
  font-family:'IBM Plex Mono',ui-monospace,'Fira Code','Monaco','Consolas',monospace;
  font-size:11px;
  line-height:1.5;
  color:rgba(255,255,255,0.8);
  white-space:pre-wrap;
}
.strategy-chat-section{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:12px;
}
.strategy-chat-input{
  display:flex;
  align-items:center;
  gap:8px;
}
.strategy-chat-input input{
  flex:1;
  padding:10px 12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:#fff;
  font-size:13px;
}
.strategy-chat-input input:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.chat-disabled-note{
  font-size:10px;
  color:rgba(255,255,255,0.3);
  white-space:nowrap;
}
/* Code Header with Name and Toggle */
.code-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.strategy-name-input{
  flex:1;
  padding:8px 10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  color:#fff;
  font-size:13px;
  outline:none;
}
.strategy-name-input:focus{
  border-color:var(--accent-primary);
}
.code-toggle-group{
  display:flex;
  gap:2px;
  background:rgba(0,0,0,0.2);
  border-radius:6px;
  padding:2px;
}
.code-toggle-btn{
  padding:6px 12px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:11px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s;
}
.code-toggle-btn:hover{
  color:rgba(255,255,255,0.8);
}
.code-toggle-btn.active{
  background:var(--accent-primary);
  color:#fff;
}
.code-toggle-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}
/* LLM Response Area */
.llm-response-area{
  min-height:40px;
  max-height:60px;
  overflow-y:auto;
  background:rgba(33,150,238,0.05);
  border:1px solid rgba(33,150,238,0.2);
  border-radius:6px;
  padding:8px 10px 16px 10px;
  margin:8px 0;
  font-size:11px;
  color:rgba(255,255,255,0.7);
  overscroll-behavior:contain;
}
.llm-response-area:empty::before{
  content:'LLM responses will appear here...';
  color:rgba(255,255,255,0.3);
  font-style:italic;
}
/* Strategy Chat - Updated */
.strategy-chat-input{
  display:flex;
  align-items:center;
  gap:6px;
}
.strategy-chat-send{
  padding:10px 16px;
  background:var(--accent-primary);
  border:none;
  border-radius:6px;
  color:#fff;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.2s;
}
.strategy-chat-send:hover{
  background:var(--accent-primary-hover);
}
/* Strategy Action Buttons */
.strategy-action-buttons{
  display:flex;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.1);
  flex-shrink:0;
}
.btn-strategy-action{
  flex:1;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.2s;
}
.btn-strategy-action.btn-open{
  background:rgba(255,255,255,0.05);
  color:#fff;
}
.btn-strategy-action.btn-open:hover{
  background:rgba(255,255,255,0.1);
}
.btn-strategy-action.btn-save{
  background:var(--accent-primary);
  color:#fff;
  border-color:var(--accent-primary);
}
.btn-strategy-action.btn-save:hover{
  background:var(--accent-primary-hover);
}
.btn-strategy-action.btn-publish{
  background:rgba(255,255,255,0.05);
  color:var(--accent-primary);
  border-color:var(--accent-primary);
}
.btn-strategy-action.btn-publish:hover{
  background:rgba(33,150,238,0.1);
}
/* Publish Modal */
.publish-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--xt-bg-secondary);
  border:1px solid var(--xt-border);
  border-radius:12px;
  padding:20px;
  z-index:10100;
  min-width:300px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.publish-modal h3{
  margin:0 0 16px;
  color:var(--xt-text-primary);
  font-size:16px;
}
.publish-modal-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.publish-modal-options label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--xt-bg-card);
  border:1px solid var(--xt-border);
  border-radius:6px;
  cursor:pointer;
  color:var(--xt-text-primary);
  font-size:13px;
}
.publish-modal-options label:hover{
  background:rgba(33,150,238,0.15);
  border-color:var(--xt-accent);
}
.publish-modal-options input[type="radio"]{
  accent-color:var(--xt-accent);
}
.publish-modal-buttons{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.publish-modal-buttons button{
  padding:8px 16px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}
.publish-modal-buttons .btn-cancel{
  background:transparent;
  border:1px solid var(--xt-border);
  color:var(--xt-text-secondary);
}
.publish-modal-buttons .btn-confirm{
  background:var(--xt-accent);
  border:none;
  color:#fff;
}
/* Open Strategy Modal */
.open-strategy-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--xt-bg-secondary);
  border:1px solid var(--xt-border);
  border-radius:12px;
  padding:20px;
  z-index:10100;
  min-width:400px;
  max-height:70vh;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.open-strategy-modal h3{
  margin:0 0 16px;
  color:var(--xt-text-primary);
  font-size:16px;
  flex-shrink:0;
}
.open-strategy-modal .publish-modal-buttons{
  flex-shrink:0;
}
.strategy-modal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  margin-bottom:16px;
  padding-right:4px;
  overscroll-behavior:contain;
}
.strategy-modal-list::-webkit-scrollbar { width: 6px; }
.strategy-modal-list::-webkit-scrollbar-track { background: transparent; }
.strategy-modal-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.strategy-modal-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.strategy-modal-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:var(--xt-bg-card);
  border:1px solid var(--xt-border);
  border-radius:8px;
  cursor:pointer;
  color:var(--xt-text-primary);
}
.strategy-modal-item:hover{
  background:rgba(33,150,238,0.15);
  border-color:rgba(33,150,238,0.5);
}
.strategy-modal-item .strategy-name{
  font-weight:500;
  color:var(--xt-text-primary);
}
.strategy-modal-item .strategy-owner{
  font-size:11px;
  color:var(--xt-text-muted);
}
.strategy-modal-item .strategy-visibility{
  font-size:10px;
  padding:2px 6px;
  border-radius:4px;
  background:var(--xt-bg-primary);
  color:var(--xt-text-secondary);
}
.strategy-modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.strategy-delete-btn{
  background:transparent;
  border:none;
  color:var(--color-negative);
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  padding:0 6px;
  opacity:0.5;
  transition:opacity 0.2s, transform 0.2s;
  line-height:1;
}
.strategy-delete-btn:hover{
  opacity:1;
  transform:scale(1.2);
}
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.7);
  z-index:10050;
}
/* Center Column: Fast Builder */
.strategy-builder-column{
  width:30%;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
}
.builder-scroll-area{
  overflow-y:auto !important;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  padding-right:4px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
}
.builder-section{
  margin-bottom:16px;
}
.builder-item{
  display:flex;
  flex-direction:column;
  padding:8px 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  border-radius:6px;
  margin-bottom:4px;
  cursor:pointer;
  transition:all 0.2s;
}
.builder-item:hover{
  background:rgba(255,255,255,0.08);
}
.builder-item.active{
  background:rgba(33,150,238,0.1);
  border-color:var(--accent-primary);
}
.builder-item-header{
  display:flex;
  align-items:center;
  gap:8px;
}
.builder-item input[type="checkbox"]{
  accent-color:var(--accent-primary);
}
.builder-item-name{
  flex:1;
  font-size:12px;
  color:#fff;
}
.builder-item-params{
  display:flex;
  gap:4px;
  margin-top:6px;
}
.builder-param-input{
  width:40px;
  padding:3px 5px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;
  color:#fff;
  font-size:10px;
  text-align:center;
}
.builder-param-input:focus{
  outline:none;
  border-color:var(--accent-primary);
}
.builder-param-label{
  font-size:9px;
  color:rgba(255,255,255,0.4);
  margin-bottom:2px;
}
.builder-param{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.builder-item-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.builder-item-row .builder-item-name{
  flex-shrink:0;
}
.builder-item-row .builder-item-params{
  display:flex;
  gap:4px;
  margin-top:0;
  margin-left:auto;
}
/* Duplicate/Remove buttons in condition line */
.condition-btns{
  margin-left:auto;
  color:rgba(255,255,255,0.4);
  font-size:11px;
  white-space:nowrap;
}
.btn-dup,.btn-rem{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:11px;
  cursor:pointer;
  padding:0 1px;
}
.btn-dup:hover,.btn-rem:hover{
  color:#fff;
}
.builder-range-hint{
  font-size:9px;
  color:rgba(255,255,255,0.4);
  margin-left:auto;
}
.builder-condition{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:6px 8px;
  background:rgba(33,150,238,0.08);
  border-radius:4px;
  font-size:10px;
  color:rgba(255,255,255,0.7);
}
.builder-condition .condition-edit{
  margin-left:auto;
  color:var(--accent-primary);
  cursor:pointer;
  font-size:10px;
}
.builder-condition .condition-edit:hover{
  text-decoration:underline;
}
.builder-note{
  font-size:10px;
  color:rgba(255,255,255,0.3);
  margin-top:12px;
  font-style:italic;
  padding:0 4px;
  flex-shrink:0;
}
/* Right Column: Strategy List */
.strategy-list-column{
  width:30%;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
}
.strategy-list{
  overflow-y:auto !important;
  overflow-x:hidden;
  flex:0 1 auto;
  min-height:0;
  min-width:0;
  max-height:30vh;
  margin-bottom:12px;
  overscroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
}
.strategy-option{
  display:flex;
  flex-direction:column;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  border-radius:8px;
  margin-bottom:6px;
  cursor:pointer;
  transition:all 0.2s;
}
.strategy-option:hover{
  background:rgba(255,255,255,0.08);
}
.strategy-option.selected{
  background:rgba(33,150,238,0.15);
  border-color:var(--accent-primary);
}
.strategy-option input[type="radio"]{
  display:none;
}
.strategy-name{
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin-bottom:2px;
}
.strategy-desc{
  font-size:11px;
  color:rgba(255,255,255,0.5);
}
.strategy-results{
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  padding:12px;
  margin-bottom:12px;
  flex-shrink:0;
  min-height:150px;
}
.strategy-results .no-results,
.strategy-results .loading,
.strategy-results .error{
  font-size:12px;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:126px;
}
.strategy-results .error{
  color:var(--color-negative);
}
.backtest-results{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.result-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
}
.result-label{
  color:rgba(255,255,255,0.6);
}
.result-value{
  font-weight:600;
  color:#fff;
}
.result-value.positive{
  color:var(--color-positive);
}
.result-value.negative{
  color:var(--color-negative);
}
.result-value.signal-long{
  color:var(--color-positive);
}
.result-value.signal-short{
  color:var(--color-negative);
}
.result-value.signal-flat{
  color:rgba(255,255,255,0.5);
}
.btn-attach-strategy{
  width:100%;
  padding:12px;
  background:var(--accent-primary);
  color:#000;
  border:none;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  flex-shrink:0;
  cursor:pointer;
  transition:filter 0.2s;
}
.btn-attach-strategy:hover{
  filter:brightness(1.1);
}

/* ========= PRO VERSION STYLES ========= */

/* Pro Strategy Column (replaces Fast Builder) */
.strategy-pro-column{
  display:flex;
  flex-direction:column;
  padding:16px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
}
.pro-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.pro-title{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.undo-btn{
  padding:8px 12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  font-size:16px;
  transition:all 0.2s;
}
.undo-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}
.undo-btn:not(:disabled):hover{
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.pro-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.pro-action-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  color:#fff;
  cursor:pointer;
  transition:all 0.2s;
  font-size:14px;
  font-weight:500;
}
.pro-action-btn .btn-icon{
  font-size:20px;
}
.pro-action-btn:hover{
  background:rgba(255,255,255,0.08);
  transform:translateX(4px);
}
.pro-action-btn.quick{
  border-color:rgba(33,150,238,0.3);
}
.pro-action-btn.quick:hover{
  background:rgba(33,150,238,0.15);
  border-color:var(--accent-primary);
}
.pro-action-btn.improve{
  border-color:rgba(76,175,80,0.3);
}
.pro-action-btn.improve:hover{
  background:rgba(76,175,80,0.15);
  border-color:#4caf50;
}
.pro-action-btn.startover{
  border-color:rgba(244,67,54,0.3);
}
.pro-action-btn.startover:hover{
  background:rgba(244,67,54,0.15);
  border-color:#f44336;
}
.pro-info{
  margin-top:auto;
  padding-top:16px;
}
.pro-note{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin:0;
}

/* Quick Strategy Modal */
.quick-strategy-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10001;
  animation:fadeIn 0.2s ease;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.quick-strategy-content{
  background:var(--bg-dark-secondary);
  padding:28px;
  border-radius:16px;
  max-width:420px;
  width:90%;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.quick-strategy-content h3{
  margin:0 0 20px 0;
  font-size:18px;
  color:#fff;
  text-align:center;
}
.strategy-choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
}
.choice-btn{
  padding:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s;
  font-size:14px;
}
.choice-btn small{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
}
.choice-btn:hover{
  background:rgba(33,150,238,0.15);
  border-color:var(--accent-primary);
}
.choice-btn.aggressive:hover{
  background:rgba(239,68,68,0.15);
  border-color:#ef4444;
}
.choice-btn.conservative:hover{
  background:rgba(34,197,94,0.15);
  border-color:#22c55e;
}
.custom-prompt-section{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:16px;
  margin-top:8px;
}
.custom-prompt-section p{
  margin:0 0 12px 0;
  font-size:12px;
  color:rgba(255,255,255,0.6);
}
.custom-prompt-section textarea{
  width:100%;
  min-height:80px;
  padding:12px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:#fff;
  font-size:13px;
  resize:vertical;
  margin-bottom:12px;
  box-sizing:border-box;
}
.custom-prompt-section textarea::placeholder{
  color:rgba(255,255,255,0.4);
}
.choice-btn.custom{
  background:var(--accent-primary);
  color:#000;
  text-align:center;
  font-weight:600;
  width:auto;
  padding:10px 24px;
  font-size:12px;
  display:block;
  margin:0 auto;
}
.choice-btn.custom:hover{
  filter:brightness(1.1);
}
.quick-strategy-content .cancel-btn{
  width:100%;
  padding:12px;
  margin-top:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
}
.quick-strategy-content .cancel-btn:hover{
  background:rgba(255,255,255,0.05);
  color:#fff;
}

/* Leverage Slider */
.leverage-control{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
}
.leverage-slider{
  flex:1;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,0.1);
  border-radius:2px;
  cursor:pointer;
}
.leverage-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  background:var(--accent-primary);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.leverage-slider::-moz-range-thumb{
  width:16px;
  height:16px;
  background:var(--accent-primary);
  border-radius:50%;
  cursor:pointer;
  border:none;
}
.leverage-value{
  min-width:40px;
  font-weight:700;
  font-size:14px;
  color:var(--accent-primary);
  text-align:right;
}

/* Wallet Button */
.wallet-btn{
  background:none;
  border:none;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
}
.wallet-btn:hover{
  color:#fff;
}

/* Header Wallet Button (top right near dashboard) */
.header-wallet-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-wallet-btn:hover {
  background: rgba(255, 215, 0, 0.15);
}

/* Wallet header actions */
.wallet-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Withdraw button in wallet header */
.withdraw-header-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.withdraw-header-btn:hover {
  background: rgba(33, 150, 238, 0.2);
  border-color: #2196ee;
}

/* Withdraw section styles */
.withdraw-section {
  display: none;
  padding: 16px 0;
}
#radio-withdraw:checked ~ .withdraw-section {
  display: block;
}
.withdraw-info {
  text-align: center;
  margin-bottom: 20px;
}
.withdraw-info p {
  margin: 0;
  color: #fff;
}
.withdraw-note {
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 4px !important;
}
.withdraw-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 20px;
}
.withdraw-balance .balance-label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.withdraw-balance .balance-amount {
  font-weight: 600;
  color: #2196ee;
  font-size: 18px;
}
.withdraw-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.withdraw-input {
  width: 100%;
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}
.withdraw-input:focus {
  outline: none;
  border-color: #2196ee;
}
.max-withdraw-info {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin: 8px 0 16px;
}
.withdraw-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #2196ee, #2a9fa8);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.withdraw-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.withdraw-submit-btn:not(:disabled):hover {
  opacity: 0.9;
}

/* Wallet Panel */
.wallet-panel{
  position:fixed;
  top:0;
  right:-420px;
  width:400px;
  height:100vh;
  background:var(--bg-dark-primary);
  border-left:1px solid rgba(255,255,255,0.1);
  z-index:10000;
  transition:right 0.3s ease;
  overflow-y:auto;
}
.wallet-panel.visible{
  right:0;
}
.wallet-panel-content{
  padding:24px;
  position:relative;
}
.wallet-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
.wallet-header h3{
  margin:0;
  font-size:18px;
  color:#fff;
}
.close-wallet-btn{
  width:32px;
  height:32px;
  background:rgba(255,255,255,0.05);
  border:none;
  border-radius:6px;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.close-wallet-btn:hover{
  background:rgba(255,255,255,0.1);
}
.wallet-tabs{
  display:flex;
  gap:4px;
  margin-bottom:24px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  padding:4px;
}
.wallet-tab{
  flex:1;
  padding:10px 8px;
  background:transparent;
  border:none;
  border-radius:6px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  transition:all 0.2s;
}
.wallet-tab.active{
  background:var(--accent-primary);
  color:#000;
}

/* ========== PURE CSS TABS - Radio Button Approach ========== */
/* Hide radio inputs - they control tab state via CSS :checked */
.wallet-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}

/* Tab labels row - styled like buttons */
.wallet-tabs-row{
  display:flex;
  gap:4px;
  margin-bottom:24px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  padding:4px;
}

/* Tab labels - these are the clickable "buttons" */
.wallet-tab-label{
  flex:1;
  padding:10px 8px;
  background:transparent;
  border:none;
  border-radius:6px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  text-align:center;
  transition:all 0.2s;
}
.wallet-tab-label:hover{
  color:rgba(255,255,255,0.8);
}

/* Active tab label when corresponding radio is checked - PURE CSS */
#radio-deposit:checked ~ .wallet-tabs-row label[for="radio-deposit"],
#radio-buy:checked ~ .wallet-tabs-row label[for="radio-buy"],
#radio-account:checked ~ .wallet-tabs-row label[for="radio-account"]{
  background:var(--accent-primary);
  color:#000;
}

/* Hide all wallet sections by default */
.wallet-section{
  display:none;
}

/* Show section based on which radio is checked - PURE CSS, ZERO JavaScript */
#radio-deposit:checked ~ .deposit-section{ display:block; }
#radio-buy:checked ~ .buy-section{ display:block; }
#radio-account:checked ~ .account-section{ display:block; }
/* ========== END PURE CSS TABS ========== */

/* ========== END EXCHANGE GRID ========== */
/* ========== END ACCOUNT TAB STYLES ========== */

.wallet-info{
  color:rgba(255,255,255,0.6);
  font-size:13px;
  margin:0 0 16px 0;
  text-align:center;
}
.connect-wallet-btn{
  width:100%;
  padding:16px;
  background:linear-gradient(135deg,#f6851b,#e2761b);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.connect-wallet-btn:hover{
  filter:brightness(1.1);
}
.connect-wallet-btn:disabled{
  opacity:0.6;
  cursor:wait;
}
.wallet-providers{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
.connect-wallet-btn.walletconnect{
  background:linear-gradient(135deg,#3b99fc,#2d7dd2);
}
.wallet-hint{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin:0;
}
.buy-wallet-required{
  text-align:center;
  padding:20px;
}
.wallet-warning{
  font-size:16px;
  color:#f59e0b;
  margin:0 0 8px;
}
.wallet-warning-desc{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin:0 0 16px;
}
.connect-first-btn{
  padding:12px 24px;
  background:linear-gradient(135deg,var(--accent-primary),#1565c0);
  border:none;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.connect-first-btn:hover{
  filter:brightness(1.1);
}
.buy-address-info{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin:0 0 12px;
}
.buy-address{
  color:var(--accent-primary);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
}
.buy-note{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin-top:12px;
}
.wallet-icon{
  font-size:18px;
}
.wallet-address-display{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  margin-bottom:16px;
}
.wallet-label{
  font-size:11px;
  color:rgba(255,255,255,0.5);
}
.wallet-address{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;
  color:var(--accent-primary);
  flex:1;
}
.disconnect-btn{
  padding:6px 10px;
  background:rgba(239,68,68,0.2);
  border:none;
  border-radius:4px;
  color:#ef4444;
  font-size:11px;
  cursor:pointer;
}
.disconnect-btn:hover{
  background:rgba(239,68,68,0.3);
}
.token-balances{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}
.balance-row{
  flex:1;
  padding:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  text-align:center;
}
.token-name{
  display:block;
  font-size:10px;
  color:rgba(255,255,255,0.5);
  margin-bottom:4px;
}
.token-balance{
  font-size:16px;
  font-weight:600;
  color:#fff;
}
.deposit-form label{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,0.6);
  margin-bottom:8px;
}
.deposit-input{
  width:100%;
  padding:12px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:#fff;
  font-size:18px;
  font-weight:600;
  text-align:center;
  margin-bottom:8px;
  box-sizing:border-box;
}
.rate-info{
  font-size:11px;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin:0 0 16px 0;
}
.token-select{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.token-btn{
  flex:1;
  padding:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  font-weight:600;
  transition:all 0.2s;
}
.token-btn.active{
  background:var(--accent-primary);
  color:#000;
  border-color:var(--accent-primary);
}
.token-btn:not(.active):hover{
  background:rgba(255,255,255,0.1);
}
.deposit-btn{
  width:100%;
  padding:16px;
  background:var(--accent-primary);
  border:none;
  border-radius:10px;
  color:#000;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.deposit-btn:hover{
  filter:brightness(1.1);
}
.deposit-btn:disabled{
  opacity:0.6;
  cursor:wait;
}
.buy-info{
  color:rgba(255,255,255,0.6);
  font-size:13px;
  margin:0 0 16px 0;
}
.buy-providers{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.provider-btn{
  display:flex;
  flex-direction:column;
  padding:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s;
}
.provider-btn:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--accent-primary);
}
.provider-name{
  font-weight:600;
  font-size:14px;
}
.provider-desc{
  font-size:11px;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
}
.provider-frame{
  height:450px;
  background:rgba(0,0,0,0.2);
  border-radius:10px;
  overflow:hidden;
}
.provider-frame iframe{
  width:100%;
  height:100%;
  border:none;
}
.frame-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  color:rgba(255,255,255,0.4);
  font-size:13px;
}
.account-info{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:24px;
}
.credits-display-large{
  text-align:center;
  padding:24px;
  background:linear-gradient(135deg,rgba(33,150,238,0.1),rgba(33,150,238,0.05));
  border:1px solid rgba(33,150,238,0.2);
  border-radius:12px;
}
.credits-label{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}
.credits-amount{
  font-size:36px;
  font-weight:700;
  color:var(--accent-primary);
}
.subscription-display{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:rgba(255,255,255,0.03);
  border-radius:8px;
}
.sub-label{
  font-size:12px;
  color:rgba(255,255,255,0.6);
}
.sub-type{
  font-weight:600;
  color:#fff;
}
.subscription-options h4{
  font-size:14px;
  color:#fff;
  margin:0 0 12px 0;
}
.sub-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  margin-bottom:8px;
  cursor:pointer;
  transition:all 0.2s;
}
.sub-option:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--accent-primary);
}
.sub-name{
  font-weight:600;
  color:#fff;
  min-width:60px;
}
.sub-price{
  color:var(--accent-primary);
  font-weight:500;
}
.sub-benefit{
  margin-left:auto;
  font-size:11px;
  color:rgba(255,255,255,0.5);
}

/* Trading Setup Modal */
.trading-setup-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.trading-setup-content{
  background:rgba(30, 30, 35, 0.98);
  border:1px solid rgba(33, 150, 238, 0.2);
  border-radius:12px;
  padding:20px;
  width:90%;
  max-width:380px;
  box-shadow:0 16px 32px rgba(0,0,0,0.6);
}
.trading-setup-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.trading-setup-header h3{
  margin:0;
  color:#fff;
  font-size:18px;
}
.trading-setup-close{
  background:none;
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:24px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.trading-setup-close:hover{color:#fff;}
.setup-section{margin-bottom:20px;}
.setup-label{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:10px;
}
.mode-selection{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mode-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px;
  background:rgba(255,255,255,0.03);
  border:2px solid rgba(255,255,255,0.1);
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  transition:all 0.2s;
}
.mode-btn:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.2);
}
.mode-btn.active{
  background:rgba(33, 150, 238, 0.15);
  border-color:#2196ee;
}
.mode-btn svg{stroke:rgba(255,255,255,0.6);}
.mode-btn.active svg{stroke:#2196ee;}
.mode-title{font-size:14px;font-weight:600;}
.mode-desc{font-size:10px;color:rgba(255,255,255,0.5);text-align:center;}
.setup-credits-display{
  display:flex;
  justify-content:space-between;
  padding:12px;
  background:rgba(33, 150, 238, 0.1);
  border-radius:8px;
  margin-bottom:20px;
}
.setup-credits-label{font-size:12px;color:rgba(255,255,255,0.6);}
.setup-credits-amount{font-size:14px;font-weight:600;color:#2196ee;}
.leverage-control{display:flex;align-items:center;gap:16px;}
.leverage-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(255,255,255,0.1);
  border-radius:3px;
  outline:none;
}
.leverage-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  background:#2196ee;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(33, 150, 238, 0.4);
}
.leverage-display{
  display:flex;
  align-items:baseline;
  gap:2px;
  min-width:60px;
  justify-content:flex-end;
}
.leverage-value{font-size:24px;font-weight:700;color:#fff;}
.leverage-x{font-size:16px;color:#2196ee;}
.leverage-presets{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.leverage-preset{
  padding:6px 12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.7);
  font-size:12px;
  cursor:pointer;
  transition:all 0.2s;
}
.leverage-preset:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.2);
}
.leverage-warning, .setup-leverage-warning{
  font-size:11px;
  color:#f59e0b;
  margin-top:12px;
  padding:8px;
  background:rgba(245, 158, 11, 0.1);
  border-radius:6px;
}
/* Budget Section Styles */
.setup-budget-section{
  margin-bottom:16px;
}
.budget-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:10px 12px;
}
.budget-currency{
  font-size:16px;
  color:rgba(255,255,255,0.5);
  font-weight:600;
}
.budget-input{
  flex:1;
  background:transparent;
  border:none;
  color:#fff;
  font-size:18px;
  font-weight:600;
  outline:none;
  width:100%;
}
.budget-input::-webkit-outer-spin-button,
.budget-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
.budget-presets{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.budget-preset{
  flex:1;
  padding:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.7);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.budget-preset:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.2);
}
.budget-preset.active{
  background:rgba(33, 150, 238, 0.15);
  border-color:#2196ee;
  color:#2196ee;
}
.setup-credits-available{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  background:rgba(33, 150, 238, 0.1);
  border-radius:8px;
  margin-bottom:10px;
  font-size:13px;
}
.use-all-credits-btn{
  width:100%;
  padding:8px;
  margin-top:8px;
  background:transparent;
  border:1px solid rgba(33, 150, 238, 0.3);
  border-radius:6px;
  color:#2196ee;
  font-size:11px;
  cursor:pointer;
  transition:all 0.2s;
}
.use-all-credits-btn:hover{
  background:rgba(33, 150, 238, 0.1);
  border-color:#2196ee;
}
.confirm-trading-btn{
  width:100%;
  padding:12px;
  background:var(--color-positive, #22C55E);
  border:none;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}
.confirm-trading-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(34, 197, 94, 0.3);
}

/* Dashboard Asset Header */


/* Chat area */
.chat{margin-top:12px;display:flex;flex-direction:column;gap:0;position:relative;width:100%}
.messages{
  position:relative; z-index:0;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:8px 0 var(--messages-bottom-pad) 0;
  overflow-y:auto;overflow-x:hidden;
  height:calc(100vh - 160px);
  width:100%;
  -ms-overflow-style:none; scrollbar-width:none;
}
.messages::-webkit-scrollbar{width:0;height:0}
.row{display:flex;gap:8px;margin:6px 0;align-items:flex-start;width:100%}
.row.user{justify-content:flex-end}
.avatar{
  width:24px;height:24px;min-width:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-top:4px;
}
.avatar.bot{
  background: transparent;
}
/* While the bubble is still in its "Thinking…" state (animated spinner
   inside .thinking-line), hide the big static side avatar so the user
   sees only ONE logo at a time. `appendChunk` clears the thinking-line
   on the first real text chunk (activeBubble.textContent = partialText
   in app-ui.js:1390), so the :has() selector stops matching and the
   avatar reappears automatically. visibility:hidden keeps the row's
   left gap reserved so the bubble doesn't shift when the avatar shows. */
.row.bot:has(.thinking-line) .avatar.bot{ visibility: hidden; }
/* Favicon IS the avatar disc — fills the wrapper completely so there is
   no grey ring around a smaller blue disc. 24px reads as a "chat-app size"
   avatar (Discord/Slack-style) rather than the chunkier 32px we had before. */
.avatar.bot img{width:24px;height:24px;border-radius:50%;display:block;}
/* Three places hardcode the inline SVG with stroke="#fff" (app-ui.js:42,
   app-ui.js:1571, app-core.js:187). Override here so we don't have to edit
   every JS template — dark icon stroke on the now-light-grey background. */
.avatar.bot svg path[stroke="#fff"]{stroke:#1e1e1e !important}
.avatar.user,.row.user .avatar{display:none !important}

/* Bubbles (+1px font). Horizontal padding bumped 10→16 px so prose doesn't
   clip at the bubble's right edge (long words like "adjusting," were getting
   their last char eaten by the rounded border). overflow-wrap is the modern
   sibling of word-wrap; both ensure long-word breaking. */
.bubble{
  max-width:min(var(--bubble-max), calc(100% - var(--bubble-margin)*2));
  padding:8px 16px;border-radius:14px;
  white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.35;font-size:15px;
}
.bubble p{margin:4px 0;}
.bubble p:first-child{margin-top:0;}
.bubble p:last-child{margin-bottom:0;}
.bubble.bot,.bubble.user{
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 3px rgba(255,255,255,0.02), 0 1px 1px rgba(0,0,0,0.18);
}
.bubble.bot{background:transparent}
.bubble.user{background:linear-gradient(135deg, rgba(33, 150, 238, 0.25), rgba(33, 150, 238, 0.12));border-color:rgba(33, 150, 238, 0.2)}

/* ============================================================
   Assistant bubble — financial-report typography (Claude-style)
   Renders the markdown emitted by markdown-it without the old
   regex post-processing. Tables wrap in .md-table-wrap so wide
   ones scroll horizontally instead of overflowing the bubble.
   ============================================================ */
.bubble.bot{
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.bubble.bot > :first-child{ margin-top: 0; }
.bubble.bot > :last-child{ margin-bottom: 0; }

.bubble.bot p{ margin: 6px 0; }
.bubble.bot strong{ color: #fff; font-weight: 600; }
.bubble.bot em{ font-style: italic; color: rgba(255,255,255,0.85); }

.bubble.bot h1, .bubble.bot h2, .bubble.bot h3, .bubble.bot h4{
  font-weight: 600;
  color: #fff;
  margin: 14px 0 6px;
  line-height: 1.3;
}
.bubble.bot h1{ font-size: 17px; }
.bubble.bot h2{ font-size: 16px; }
.bubble.bot h3{ font-size: 15px; color: rgba(255,255,255,0.95); }
.bubble.bot h4{ font-size: 14px; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.04em; }

.bubble.bot ul, .bubble.bot ol{
  margin: 6px 0;
  padding-left: 22px;
}
.bubble.bot li{ margin: 3px 0; }
.bubble.bot li > ul, .bubble.bot li > ol{ margin: 2px 0; }

.bubble.bot a{
  color: #5fb4ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(95,180,255,0.35);
}
.bubble.bot a:hover{ border-bottom-color: #5fb4ff; }

.bubble.bot code{
  font-family: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.07);
  padding: 1px 5px;
  border-radius: 3px;
  color: #f0d8a8;
}
.bubble.bot pre{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.bubble.bot pre code{ background: transparent; padding: 0; color: inherit; }

.bubble.bot blockquote{
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid rgba(33,150,238,0.55);
  color: rgba(255,255,255,0.78);
}

.bubble.bot hr{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 12px 0;
}

/* Tables — wrapped so they scroll horizontally past the bubble width */
.bubble.bot .md-table-wrap{
  margin: 8px 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.bubble.bot table{
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bubble.bot th, .bubble.bot td{
  padding: 7px 11px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: left;
  vertical-align: top;
}
.bubble.bot tr:last-child td{ border-bottom: none; }
.bubble.bot th{
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
/* Right-align numeric columns (everything past the first) — common financial pattern */
.bubble.bot th:nth-child(n+2),
.bubble.bot td:nth-child(n+2){ text-align: right; }
.bubble.bot tbody tr:hover td{ background: rgba(255,255,255,0.025); }

/* Composer (fixed) */
.composer{
  position:fixed;bottom:var(--composer-bottom);
  left:calc(var(--sidebar-w) + var(--page-pad));right:var(--page-pad);
  padding:0;background:transparent;z-index:10
}
@media (max-width:920px){.composer{left:var(--page-pad);right:var(--page-pad)}}

/* Input bar */
.inputbar{
  display:flex;align-items:flex-end;gap:10px;
  background: #1F1F1F !important;
  border:1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius:14px !important;
  padding:4px 8px;
  margin:2px 0 6px 0;
  min-height:36px;
  max-height:200px !important;
  overflow:hidden !important;
  transition: height 0.1s ease, border-color 0.2s ease, background 0.3s ease;
  position: relative;
}
.inputbar:focus,
.inputbar:focus-within {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: #252525 !important;
}
textarea{
  flex:1;background:transparent;color:#e5e7eb !important;border:0 !important;outline:0 !important;resize:none;
  min-height:24px;
  max-height:116px !important;
  line-height:24px;padding:2px 4px;font-size:15px;
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  max-width:100%;overflow-y:auto !important;
  word-wrap:break-word;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.3) transparent;
  -webkit-text-size-adjust:100%;
  -webkit-appearance:none;
  appearance:none;
  position: relative;
  z-index: 1;
  border-radius:0 !important;
  box-shadow:none !important;
}
textarea:focus,
textarea:focus-visible {
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
textarea::-webkit-scrollbar{width:6px;}
textarea::-webkit-scrollbar-track{background:transparent;}
textarea::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px;}
textarea::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.4);}
textarea::placeholder{color:rgba(229,231,235,0.55) !important;}
.sendbtn{flex:0 0 40px;height:40px;width:40px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;display:grid;place-items:center;cursor:pointer;color:#ffffff}
.sendbtn:hover{background:rgba(255,255,255,0.15);color:#ffffff}
.sendbtn svg{width:20px;height:20px}

/* Centered hint (unchanged size) */
.meta{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:rgba(229,231,235,0.76) !important;
  font-size:11px;line-height:1.2;
}
.meta #hint{display:block;margin-top:6px}

/* In-stream thinking bubble (+1px font) */
.thinking-row{display:flex;gap:8px;margin:6px 0;align-items:flex-start;width:100%}
.thinking-bubble{
  max-width:min(var(--bubble-max), calc(100% - var(--bubble-margin)*2));
  padding:8px 10px;border-radius:8px;line-height:1.35;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg, rgba(225,225,225,0.07), rgba(185,185,185,0.03));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 3px rgba(255,255,255,0.02), 0 1px 1px rgba(0,0,0,0.18);
  opacity:.95;
}
.thinking-spinner{
  display:inline-block;width:14px;height:14px;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-5px)}
  20%,40%,60%,80%{transform:translateX(5px)}
}
/* Thinking line inside assistant bubble */
.thinking-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Reasoning text - left aligned, no animation, subtle */
.reasoning-text {
  display: block;
  color: inherit; /* Use parent text color */
  font-style: normal; /* Remove italic */
  font-family: inherit; /* Use same font as regular text */
  font-size: inherit; /* Use same size as regular text */
  line-height: inherit;
  opacity: 0.3; /* Make reasoning text subtle but more visible */
  text-align: left;
  width: 100%;
}

/* ========= MOBILE RESPONSIVE (320px - 920px) ========= */
@media (max-width: 920px) {
  :root {
    --sidebar-w: 0px;
    --page-pad: 12px;
    --composer-bottom: 12px;
    --composer-gap: 12px;
  }

  /* Hide sidebar on mobile */
  .sidebar {
    display: none;
  }

  /* Header adjustments — single row on mobile */
  header {
    padding: 6px 12px !important;
    flex-wrap: nowrap;
    gap: 8px;
    height: 48px;
    min-height: 48px;
  }

  /* Hide BETA badge on mobile */
  .Xtrade-branding .badge {
    display: none;
  }

  /* Hide call button text via CSS — AuthManager rebuilds innerHTML so no span trick.
     Mobile keeps the SVG (override the desktop "display:none" rule above). */
  .auth-buttons .call-btn {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 6px !important;
    gap: 0 !important;
    max-height: 32px;
    min-height: auto !important;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .auth-buttons .call-btn svg {
    display: inline-block !important;  /* override desktop hide */
    width: 14px;                       /* slightly smaller on mobile per design */
    height: 14px;
    flex-shrink: 0;
  }
  /* Inline path has stroke="#22c55e" (green) — override to use the master-grey
     variable so it tracks the theme: #d4d4d4 in dark mode (visible on dark
     page) and #6b7280 in light mode (visible on white page). The button is
     transparent-outline now, so the stroke must match the page contrast,
     not assume a solid background. */
  .auth-buttons .call-btn svg path { stroke: var(--xt-master-grey, #d4d4d4); }

  /* Compact register & login buttons (uniform with mobile call-btn height) */
  .auth-buttons .register-btn,
  .auth-buttons .login-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
    height: 32px !important;
    max-height: 32px;
    min-height: auto !important;
    white-space: nowrap;
  }

  /* Theme toggle compact */
  .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: auto !important;
  }

  /* Hamburger compact */
  .mobile-hamburger-btn {
    min-height: auto !important;
  }

  /* Send button normal proportions */
  .sendbtn {
    min-height: auto !important;
  }
  .inputbar {
    min-height: auto !important;
  }

  /* Hide desktop sidebar collapse button on mobile */
  .sidebar-collapse-btn {
    display: none !important;
  }


  /* Messages area */
  .messages {
    height: calc(100vh - 100px);
    padding: 8px var(--page-pad) var(--messages-bottom-pad) var(--page-pad);
  }

  /* Composer mobile */
  .composer {
    left: var(--page-pad) !important;
    right: var(--page-pad) !important;
    width: calc(100vw - 2 * var(--page-pad)) !important;
    max-width: calc(100vw - 2 * var(--page-pad)) !important;
    box-sizing: border-box;
  }

  .inputbar {
    gap: 3px !important;
    padding: 8px 10px !important;
    flex-wrap: nowrap;
    max-width: 100% !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 2px 0 6px 0 !important;
    overflow: hidden;
    min-height: 40px;
    border-radius: 10px !important;
  }

  textarea {
    font-size: 14px !important;
    padding: 6px 4px !important;
    min-height: 36px !important;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Send button mobile */
  .sendbtn {
    flex: 0 0 32px !important;
    height: 32px !important;
    width: 32px !important;
  }

  .sendbtn svg {
    width: 18px;
    height: 18px;
  }

  /* Meta hint mobile */
  .meta {
    font-size: 10px !important;
    padding: 0 4px;
  }

  .meta #hint {
    margin-top: 4px;
  }

  /* Example prompts card mobile */
  .example-prompts-card {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
    margin-left: 0;
    margin-right: 0;
    height: 100px;
  }

  .card-face {
    padding: 10px 30px 10px 10px;
    font-size: 11px;
  }

  .prompt-btn {
    font-size: 10px;
    padding: 5px 6px;
  }

  .refresh-prompts-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  /* Bubbles mobile */
  .bubble {
    font-size: 13px;
    max-width: 95%;
  }

  .row.user .bubble {
    max-width: 85%;
    font-size: 13px;
  }

  /* Financial bubble mobile */
  .row.bot .bubble.financial-bubble {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  /* Price chart mobile */
  .price-chart-container {
    padding: 12px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .chart-controls {
    width: 100%;
    align-items: flex-start;
  }

  .chart-canvas-wrapper {
    height: 240px;
  }

  .strategy-list-column {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .strategy-list {
    overflow-y: visible !important;
    max-height: none;
  }
}

/* Extra small phones (320px - 375px) */
@media (max-width: 375px) {
  :root {
    --page-pad: 8px;
  }

  .composer {
    left: var(--page-pad) !important;
    right: var(--page-pad) !important;
    width: calc(100vw - 2 * var(--page-pad)) !important;
    max-width: calc(100vw - 2 * var(--page-pad)) !important;
    box-sizing: border-box;
  }

  .inputbar {
    gap: 2px !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 6px 0 !important;
    overflow: hidden;
    min-height: 38px;
    border-radius: 10px !important;
  }

  textarea {
    font-size: 13px !important;
    padding: 5px 3px !important;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  .sendbtn {
    flex: 0 0 28px !important;
    height: 28px !important;
    width: 28px !important;
  }


  .bubble {
    font-size: 12px;
  }
}

/* Market closed message animation */

/* Send button fix */
.sendbtn {
  align-self: center;
  flex: 0 0 40px;
}

/* ========= MOBILE-SPECIFIC CLASSES ========= */
/* Use these classes to target specific mobile scenarios */

/* Target all mobile devices */
body.is-mobile {
  /* Prevent body scroll - only messages area should scroll */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.is-mobile .shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.is-mobile .main {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.is-mobile .wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.is-mobile .chat {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.is-mobile .messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

body.is-mobile .composer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  pointer-events: auto;
  padding: 12px;
  background: var(--bg-dark-primary, #1e1e1e);
}

body.is-mobile .inputbar {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.is-mobile textarea {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

/*
  Additional mobile targeting classes available via JavaScript:
  - body.is-desktop         : Desktop only
  - body.device-mobile      : Phones only
  - body.device-tablet      : Tablets only
  - body.screen-small       : < 480px
  - body.screen-medium      : 480px - 768px
  - body.screen-large-mobile: 768px - 920px

  iOS-specific detection:
  if (MobileDetect.isIOS()) { ... }
*/

/* ========= MOBILE SCROLL HELPER ========= */
body.is-mobile .scroll-helper {
  position: fixed;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 200px;
  z-index: 9999;
  pointer-events: none;
}

body.is-mobile .scroll-helper-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.1));
  border-radius: 1px;
}

body.is-mobile .scroll-helper-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.is-mobile .scroll-helper-ball:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.is-mobile .scroll-helper-ball.dragging {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Strategy-related styles */
.strategy-chart-container {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.price-chart-container {
  position: relative;
}

.chart-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.chart-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chart-timeframe-controls {
  margin-top: 32px;
}

.strategy-metrics {
  display: flex;
  gap: 12px;
  margin-right: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.strategy-metrics .metric {
  white-space: nowrap;
}

/* ========= TYPING CURSOR ANIMATION ========= */
.typing-cursor {
  display: inline-block;
  animation: blink-cursor 0.8s step-end infinite;
  color: var(--accent-primary, #2196ee);
  font-weight: bold;
}

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

/* ========= TRENDING SCREENER ========= */
.trending-container { flex:0 0 auto; max-height:340px; display:flex; flex-direction:column; gap:0; overflow:hidden; margin-top:16px; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:transparent; min-height:0; }
.trending-header { display:flex; align-items:center; gap:8px; padding:10px 14px; color:rgba(255,255,255,0.45); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.trending-header svg { opacity:0.4; }
.trending-updated { margin-left:auto; font-weight:400; font-size:9px; color:rgba(255,255,255,0.3); letter-spacing:0; }
.trending-section { padding:0; flex:0 1 auto; display:flex; flex-direction:column; min-height:0; }
.trending-section + .trending-section { padding-top:0; }
.trending-section + .trending-section .trending-list { padding-top:0; }
.trending-label { display:flex; align-items:center; gap:5px; font-size:9px; font-weight:700; letter-spacing:0.8px; padding:8px 12px 0; margin:0; flex-shrink:0; }
.trending-long-label { color:rgba(34,197,94,0.7); }
.trending-short-label { color:rgba(239,68,68,0.7); }
.trending-label svg { opacity:0.6; }
.trending-list { display:flex; flex-direction:column; gap:4px; flex:0 1 auto; padding:6px 6px; }
.trending-ticker { display:flex; align-items:center; gap:0; padding:5px 8px; transition:all 0.15s; border-radius:6px; margin:0; flex:0 0 auto; min-height:auto; cursor:pointer; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }
.trending-ticker:hover { background:rgba(255,255,255,0.05); }
.trending-rank { font-size:9px; font-weight:600; color:rgba(255,255,255,0.2); width:14px; text-align:center; flex-shrink:0; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; margin-left:-2px; }
.trending-info { flex:1; display:flex; flex-direction:row; align-items:center; gap:8px; padding:0 6px; min-width:0; }
.trending-symbol-row { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.trending-symbol { font-size:12px; font-weight:700; color:#fff; cursor:pointer; letter-spacing:0.5px; line-height:1.2; }
.trending-symbol:hover { color:#2196ee; }
.trending-ai { flex-shrink:0; }
.trending-ai .ai-validated-badge { margin-left:0; opacity:1; }
.trending-atr { font-size:9px; color:rgba(255,255,255,0.35); font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; line-height:1; }
.trending-score-wrap { display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; min-width:54px; margin-right:4px; }
.trending-launch-arrow { background:transparent; border:0; padding:2px 4px; margin-left:6px; color:rgba(255,255,255,0.55); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:4px; transition:all 0.15s; }
.trending-launch-arrow:hover { color:#fff; background:rgba(33,150,238,0.2); }
.trending-score { font-size:11px; font-weight:700; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; line-height:1; color:rgba(255,255,255,0.9); }
.trending-score.long { color:rgba(255,255,255,0.9); }
.trending-score.short { color:rgba(255,255,255,0.9); }
.trending-loading,.trending-empty { padding:20px 8px; text-align:center; color:rgba(255,255,255,0.25); font-size:11px; flex:1; display:flex; align-items:center; justify-content:center; }

/* ========= STRATEGY TRENDING ("Strategy Ready") ========= */
.strat-trending-container { flex:0 0 auto; display:flex; flex-direction:column; gap:0; overflow:hidden; margin-top:0; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:transparent; min-height:0; }
.strat-trending-header { display:flex; align-items:center; gap:8px; padding:10px 14px; color:rgba(255,255,255,0.45); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.strat-trending-header svg { opacity:0.4; }
.strat-trending-updated { margin-left:auto; font-weight:400; font-size:9px; color:rgba(255,255,255,0.3); letter-spacing:0; }
.strat-trending-list { display:flex; flex-direction:column; gap:6px; padding:8px 8px; }
.strat-trending-card { padding:8px 10px; background:rgba(255,255,255,0.03); border-radius:6px; border:1px solid rgba(255,255,255,0.04); }
.strat-trending-card:hover { background:rgba(255,255,255,0.05); }
.strat-trending-row1 { display:flex; align-items:center; gap:6px; }
.strat-trending-symbol { font-size:12px; font-weight:700; color:#fff; letter-spacing:0.5px; }
.strat-trending-ai { flex-shrink:0; }
.strat-trending-ai .ai-validated-badge { margin-left:0; opacity:1; }
.strat-trending-tf { margin-left:auto; font-size:10px; color:rgba(255,255,255,0.4); font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; padding:1px 6px; background:rgba(255,255,255,0.05); border-radius:3px; }
.strat-trending-row2 { display:flex; gap:12px; font-size:10px; color:rgba(255,255,255,0.45); margin:5px 0 4px; }
.strat-trending-stat { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; }
.strat-trending-stat strong { font-weight:600; color:rgba(255,255,255,0.85); margin-left:3px; }
.strat-trending-stat strong.pos { color:#22c55e; }
.strat-trending-stat strong.neg { color:#ef4444; }
.strat-trending-launch-arrow { background:transparent; border:0; padding:2px 4px; margin-left:6px; color:rgba(255,255,255,0.65); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:4px; transition:all 0.15s; }
.strat-trending-launch-arrow:hover { color:#fff; background:rgba(33,150,238,0.2); }

/* ========= POPULAR ASSETS (watchlist) =========
   Same visual family as Intraday Trending / Strategy Ready. The list caps at
   ~292px and scrolls internally so all 20 assets stay reachable without
   starving the collapsed Activity Log button below it. */
.watchlist-container { flex:0 1 auto; display:flex; flex-direction:column; gap:0; overflow:hidden; margin-top:0; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:transparent; min-height:0; }
.watchlist-header { display:flex; align-items:center; gap:8px; padding:10px 14px; color:rgba(255,255,255,0.45); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.watchlist-header svg { opacity:0.4; }
.watchlist-list { display:flex; flex-direction:column; gap:4px; padding:6px 6px; max-height:292px; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.watchlist-list::-webkit-scrollbar { width:4px; }
.watchlist-list::-webkit-scrollbar-track { background:transparent; }
.watchlist-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:2px; }
.watchlist-row { display:flex; align-items:center; gap:0; padding:5px 8px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); flex:0 0 auto; transition:all 0.15s; }
.watchlist-row:hover { background:rgba(255,255,255,0.05); }
.watchlist-name-wrap { flex:1; display:flex; align-items:baseline; gap:6px; min-width:0; padding:0 4px; }
.watchlist-name { font-size:12px; font-weight:700; color:#fff; letter-spacing:0.3px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.watchlist-symbol { font-size:9px; color:rgba(255,255,255,0.35); font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; flex-shrink:0; }
.watchlist-price { font-size:11px; font-weight:600; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; color:rgba(255,255,255,0.85); flex-shrink:0; margin-right:2px; }

.xt-suggestion-btn:hover {
  background: rgba(33, 150, 238, 0.15) !important;
  border-color: #2196ee !important;
}