/* ========= Global font scale ========= */
html, body { font-size:15px !important; }

/* ========= Conversation List Styles ========= */
.conversation-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 12px;
  border-top: 1px solid var(--border-primary);
  padding-top: 12px;
}

.conversation-list-header {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  max-height: calc(100vh - 300px);
}

/* Custom scrollbar for conversation list */
.conversation-list::-webkit-scrollbar {
  width: 6px;
}

.conversation-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.conversation-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.conversation-item {
  padding: 5px 10px;
  border-radius: 6px;
  background: #1c1c1c;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
}

.conversation-item:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.08);
}

.conversation-item.active {
  background: rgba(50, 184, 198, 0.15);
  border-color: rgba(50, 184, 198, 0.3);
}

.conversation-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  padding-right: 8px;
}

.conversation-date {
  display: none; /* Date removed */
}

.delete-conversation {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.conversation-item:hover .delete-conversation {
  display: flex;
}

.delete-conversation:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}

/* Mobile adjustments for conversation list */
@media (max-width: 920px) {
  .conversation-list-container {
    display: none; /* Hide on mobile since sidebar is hidden */
  }
}

/* Add toggle button for mobile sidebar */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10002;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 920px) {
  .sidebar-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 280px;
    z-index: 10001;
    transition: left 0.3s ease;
  }

  .sidebar.open {
    left: 0;
  }

  .conversation-list-container {
    display: flex; /* Show when sidebar is open */
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
  }

  .sidebar-overlay.show {
    display: block;
  }
}

/* ========= Sector Dropdown ========= */
.sector-dropdown {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #e5e7eb;
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  min-width: 130px;
  width: 130px;
  text-align: left;
  position: relative;
  /* Custom styling to control dropdown */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(229, 231, 235, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
}

.sector-dropdown:hover {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3);
}

.sector-dropdown:focus {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.4);
}

.sector-dropdown:active {
  background: none !important;
  background-color: transparent !important;
}

.sector-dropdown option {
  background: transparent !important;
  background-color: transparent !important;
  color: #e5e7eb;
}

.sector-dropdown option:checked {
  background: transparent !important;
  background-color: transparent !important;
}

.sector-dropdown option:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========= Prompt Category Buttons ========= */
.prompt-buttons-wrapper {
  display: flex;
  gap: 4px;
  margin-right: 8px;
  position: relative;
}

.prompt-category-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(145, 146, 148, 0.3);
  background: transparent;
  color: rgba(145, 146, 148, 0.8);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: monospace;
  padding: 0;
  position: relative;
}

/* Tooltip for prompt buttons - only show on hover BELOW the button */
.prompt-category-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(145, 146, 148, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: normal;
  letter-spacing: 0.3px;
  z-index: 1000;
}

.prompt-category-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

.prompt-category-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(145, 146, 148, 0.5);
  transform: translateY(-1px);
}

.prompt-category-btn:active {
  transform: translateY(0);
}

.prompt-category-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.prompt-category-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(145, 146, 148, 0.6);
  color: #ffffff;
}

/* ========= Centered, narrower column ========= */
.main .wrap, .wrap{
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.chat, .messages, .composer{
  width: min(720px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========= Performance optimizations ========= */
.messages { 
  background:transparent !important; 
  border:0 !important; 
  box-shadow:none !important;
  /* Add performance hints */
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}

.bubble{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:100% !important;
  line-height:1.55 !important;
  white-space:pre-wrap !important;
  word-wrap:break-word !important;
  word-break:break-word !important;
  /* Prevent layout thrashing */
  contain: layout style;
}

/* ========= INCREASED SPACING BETWEEN MESSAGES ========= */
.row{ 
  gap:.6rem !important; 
  margin: 24px 0 !important;  /* Increased from 8px to 24px */
}

/* Add extra spacing after user messages */
.row.user {
  margin-bottom: 32px !important;  /* Even more space after user messages */
}

/* Add extra spacing after bot messages */
.row.bot {
  margin-bottom: 32px !important;  /* Even more space after bot messages */
}

.avatar{ display:none !important; }

/* User messages: right, very light bg, tighter vertical padding */
.row.user{ justify-content:flex-end !important; }
.row.user .bubble{
  background: rgba(255,255,255,0.08) !important;
  color: #e5e7eb !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  line-height: 1.45 !important;
  max-width: 72% !important;
}

/* Assistant stays plain (no bubble) by default */
.row.bot .bubble{
  background: rgba(26, 26, 26, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

/* ========= FINANCIAL BUBBLE STYLE (for [3] responses) ========= */
.row.bot .bubble.financial-bubble {
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e5e5e5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease !important;
}

/* Remove ALL list spacing in financial bubbles */
.financial-bubble ul, .financial-bubble ol { margin: 0 !important; padding-left: 1em !important; }
.financial-bubble li { margin: 0 !important; padding: 0 !important; }
.financial-bubble ul ul, .financial-bubble ol ol { margin: 0 !important; }
.financial-bubble p { margin: 0 !important; }

/* Hover effect for financial bubbles */
.row.bot .bubble.financial-bubble:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Add a subtle white glow effect to financial bubbles */
.row.bot .bubble.financial-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.8), 
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Confidence Score Section Styling */
.confidence-score-section {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #383838 !important;
}

.confidence-score-section::after {
  content: '';
  display: block;
  height: 1px;
  background: #383838;
  margin-top: 16px;
}

/* Position Title Colors */
.position-title {
  font-weight: 600 !important;
  font-size: 16px !important;
  margin-bottom: 12px !important;
  color: #ffffff !important;  /* Keep POSITION: white */
}

.position-title .position-long {
  color: #32b8c6 !important;
}

.position-title .position-short {
  color: #ff5459 !important;
}

.position-title .position-hold {
  color: #ffffff !important;
}

/* Alternative professional bubble style (comment out the gradient one and use this if preferred) */
/*
.row.bot .bubble.financial-bubble {
  background: #0f172a !important;
  border: 2px solid #1e293b !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  margin: 16px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e2e8f0 !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
*/

/* ========= GPT-style composer (pill, no border line) ========= */
.inputbar{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,0.06) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
}
.inputbar:focus-within{
  background: rgba(255,255,255,0.08) !important;
}

/* Textarea inside the pill */
textarea{
  flex:1;
  background: transparent !important;
  color: #e5e7eb !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  min-height: 40px !important;
  max-height: 240px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  padding: 10px 12px !important;
}
textarea::placeholder{ color: rgba(229,231,235,0.55) !important; }

/* Hint/status line */
.composer .meta{
  margin-left: -8px !important;
  margin-top: 6px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(229,231,235,0.75) !important;
}

/* Send button */
.sendbtn{
  flex: 0 0 36px !important;
  height: 36px !important; width: 36px !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
  display: grid !important; place-items: center !important;
  cursor: pointer;
}
.sendbtn:hover{ background: rgba(255,255,255,0.18) !important; }
.sendbtn:active{ background: rgba(255,255,255,0.22) !important; }
.sendbtn svg{ width:20px; height:20px; }

/* Wrapper for toggle button and arrow */
.toggle-btn-wrapper {
  position: relative;
  flex: 0 0 24px !important;
  height: 24px !important;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toggle prompts button in textbox center right */
.toggle-prompts-btn-widget {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(145, 146, 148, 0.3) !important;
  background: transparent !important;
  color: rgba(145, 146, 148, 0.8) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: monospace;
}
.toggle-prompts-btn-widget:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgb(145, 146, 148) !important;
  border-color: rgba(145, 146, 148, 0.5) !important;
}

/* Arrow hint animation */
.toggle-hint-arrow {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  color: rgb(145, 146, 148);
  font-size: 16px;
  pointer-events: none;
  animation: bounce-up-down 1.5s ease-in-out infinite;
}

@keyframes bounce-up-down {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* ========= Spinner (progress) ========= */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.20); position:relative; visibility:hidden;
}
.spinner.show{ visibility:visible; }
.meta .spinner{ animation: spin .9s linear infinite !important; border-color: rgba(255,255,255,.25); }
.meta .spinner::after{
  content:""; position:absolute; top:-1px; left:50%;
  width:4px; height:4px; margin-left:-2px; background:rgba(255,255,255,.95); border-radius:50%;
}
/* fallback spinner if used inside messages */
.bubble .spinner{ border-top-color: rgba(255,255,255,.9); animation: spin .8s linear infinite !important; }

/* ========= Widget System ========= */
/* Widget container */
.widget-container {
  position: fixed;
  right: 20px;
  top: 100px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.widget-container::-webkit-scrollbar { display: none; }

/* Individual widget */
.widget {
  background: #1a1a1a;
  border: 1px solid rgba(60, 60, 60, 0.4);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  animation: slideInRight 0.3s ease-out;
  min-height: auto;
  max-height: none;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Widget status bar (top color indicator) */
.widget-status-bar {
  height: 1.5px;
  background: #ffffff;
  transition: background-color 0.3s ease;
}
.widget-status-bar.positive { background: #32b8c6; }
.widget-status-bar.negative { background: #ff5459; }
.widget-status-bar.neutral { background: #ffffff; }
.widget-status-bar.profit { background: #32b8c6; }
.widget-status-bar.loss { background: #ff5459; }

/* Widget header */
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 4px 8px;
  border-bottom: 1px solid rgba(60, 60, 60, 0.2);
}

.widget-title {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.widget-symbol {
  font-size: 11px;
  color: #ffffff;
  font-weight: 600;
}

/* Widget close button */
.widget-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.widget-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* Widget body */
.widget-body {
  padding: 8px;
  max-height: none;
  overflow: visible;
}

.widget-value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 2px;
}

.widget-value.positive { color: #32b8c6; }
.widget-value.negative { color: #ff5459; }
.widget-value.loading {
  color: #94a3b8;
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Smaller font for specvix dual percentage display */
.widget[data-tool="specvix"] .widget-value {
  font-size: 14px;
}

/* Position widget specific */
.widget-position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.widget-position-type {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 9px;
}

.widget-pnl {
  font-size: 14px;
  font-weight: bold;
  margin-top: 6px;
}

.widget-pnl.profit { color: #32b8c6; }
.widget-pnl.loss { color: #ff5459; }

/* Pagination button for indicators/technicals widgets */
.widget-pagination-btn {
  position: relative;
  display: block;
  margin: 8px 0 4px auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.widget-pagination-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.widget-pagination-btn:active {
  transform: scale(0.95);
}

/* Font size for paginated prompts (indicators/technicals) */
.paginated-prompt .prompt-text {
  font-size: 12px !important;
  line-height: 1.3;
}

/* Prompt button alignment */
.widget-prompt-btn {
  text-align: left;
  display: block;
  width: 100%;
}

/* Ensure widget body has relative positioning for absolute pagination button */
.widget-body {
  position: relative;
}

/* Last update time */
.widget-update-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  text-align: right;
}

/* Widget border for data responses - NOW CLICKABLE WITH DARK BACKGROUND */
.row.bot .bubble.widget-capable {
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e5e5e5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease !important;
}

/* Remove ALL list spacing in widget-capable bubbles */
.widget-capable ul, .widget-capable ol { margin: 0 !important; padding-left: 1em !important; }
.widget-capable li { margin: 0 !important; padding: 0 !important; }
.widget-capable ul ul, .widget-capable ol ol { margin: 0 !important; }
.widget-capable p { margin: 0 !important; }

/* Hover effect for widget-capable bubbles */
.row.bot .bubble.widget-capable:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Widget add button - MINIMAL ARROW */
.widget-add-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 300 !important;
  z-index: 10000 !important;
  box-shadow: none !important;
  font-family: monospace !important;
  line-height: 1 !important;
  min-width: auto !important;
  height: auto !important;
}

.widget-add-btn svg {
  display: none !important; /* Hide the SVG icon */
}

.widget-add-btn span {
  display: none !important; /* Hide the TRACK text */
}

/* Hide arrow for widget-capable bubbles (technical indicators) and financial bubbles (position advice) */
.bubble.widget-capable .widget-add-btn,
.bubble.financial-bubble .widget-add-btn {
  display: none !important;
}

/* Make HOLD position bubbles non-clickable */
.bubble.position-hold {
  cursor: default !important;
  pointer-events: none !important;
}

.widget-add-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.widget-add-btn:active {
  transform: translateY(0) scale(1.02) !important;
}

/* Widget add button for Mixtral bubbles */
.bubble.financial-bubble .widget-add-btn {
  top: 16px;
  right: 16px;
}

/* ========= PRICE CHART STYLING ========= */
.price-chart-container {
  max-width: 100%;
  margin: 24px 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 20px;
  box-shadow: none;
  overflow: hidden;
}

/* Indicator charts - with border restored */
.price-chart-container.indicator-chart {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 0 16px 0;
  margin-bottom: 16px;
}

.chart-symbol-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-symbol {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chart-price-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chart-current-price {
  font-size: 26px;
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #ffffff !important;
}

.chart-percent-change {
  font-size: 13px;
  font-weight: 600;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chart-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.chart-type-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 2px;
}

.chart-type-btn {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 12px;
  background: transparent;
  border-radius: 5px;
  border: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-type-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.chart-type-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.chart-timeframe-controls {
  display: flex;
  gap: 4px;
}

.chart-timeframe-btn {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 10px;
  background: transparent;
  border-radius: 3px;
  border: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-timeframe-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.chart-timeframe-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.chart-canvas-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
  background: transparent;
}

.chart-canvas-wrapper canvas {
  max-width: 100%;
  height: 100% !important;
  /* Add subtle shadow effect to the chart line */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.chart-error {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  margin: 16px 0;
  font-size: 13px;
}

/* ========= EXAMPLE PROMPTS FLIP CARD ========= */
.example-prompts-card {
  position: fixed;
  bottom: calc(var(--composer-h) + var(--composer-bottom) + var(--composer-gap) + 4px);
  left: var(--sidebar-w);
  right: 0;
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
  z-index: 5;
  perspective: 1000px;
  height: 110px;
  pointer-events: none;
}

.example-prompts-card * {
  pointer-events: auto;
}

@media (max-width: 920px) {
  .example-prompts-card {
    left: 0;
    right: 0;
  }
}

.example-prompts-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.example-prompts-card.flipped .example-prompts-card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: rgb(28, 28, 28);
  border: none;
  border-radius: 8px;
  padding: 12px 40px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-face::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

/* Flip card button (mirror) - HIDDEN until pro mode ready */
.flip-card-btn {
  display: none;
}

/* Refresh button for prompts - moved to top right */
.refresh-prompts-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.refresh-prompts-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(90deg);
}

.refresh-prompts-btn:active {
  transform: rotate(180deg);
}

.card-section {
  margin-bottom: 20px;
}

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

.card-section-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.prompt-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  color: rgb(145, 146, 148);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.3;
}

.prompt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Fade animation for prompt grid */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Split-flap animation - EXACT from your provided code */
@keyframes flip {
  from { transform: rotateX(-0deg); }
  to { transform: rotateX(-90deg); }
}

@keyframes bflip {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}

.prompt-btn .flap {
  display: inline-flex;
  flex-direction: column;
  perspective: 700px;
  overflow: hidden;
  position: relative;
  width: 8px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* Space characters should be completely invisible */
.prompt-btn .flap.space-char {
  width: 4px; /* Smaller width for spaces */
}

.prompt-btn .flap.space-char .top,
.prompt-btn .flap.space-char .bottom {
  background-color: transparent !important;
}

.prompt-btn .flap.space-char .top-flap-visible,
.prompt-btn .flap.space-char .top-flap-queued,
.prompt-btn .flap.space-char .bottom-flap-visible,
.prompt-btn .flap.space-char .bottom-flap-queued {
  background-color: transparent !important;
  color: transparent !important;
  opacity: 0;
}

.prompt-btn .flap.space-char .top {
  border-bottom: none !important;
}

.prompt-btn .top {
  border-bottom: none;
}

.prompt-btn .top,
.prompt-btn .bottom {
  width: 100%;
  height: 50%;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.prompt-btn .top-flap-visible,
.prompt-btn .top-flap-queued {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(20, 20, 20, 0.6);
  z-index: 2;
  color: rgb(255, 255, 255);
  font-size: 12px;
  overflow: hidden;
}

.prompt-btn .top-flap-queued {
  z-index: 1;
}

.prompt-btn .bottom-flap-visible,
.prompt-btn .bottom-flap-queued {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.6);
  z-index: 1;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-size: 12px;
}

.prompt-btn .top span {
  display: block;
  line-height: 15px;
  height: 15px;
  margin-top: 0;
}

.prompt-btn .bottom span {
  display: block;
  line-height: 15px;
  height: 15px;
  margin-top: -7.5px;
}

.prompt-btn .bottom-flap-queued {
  z-index: 2;
  transform: rotateX(90deg);
  overflow: hidden;
}

.prompt-btn .top-flap-animation {
  animation: flip 0.02s ease-in;
  transform-origin: bottom;
}

.prompt-btn .bottom-flap-animation {
  animation: bflip 0.02s ease-in;
  transform-origin: top;
  animation-delay: 0.02s;
}

/* ========= SCROLL TO BOTTOM BUTTON ========= */
.scroll-to-bottom-btn {
  position: fixed;
  bottom: calc(var(--composer-h) + var(--composer-bottom) + 12px);
  left: var(--sidebar-w);
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 32px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.scroll-to-bottom-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.scroll-to-bottom-btn svg {
  width: 20px;
  height: 20px;
}

/* ========= PREMIUM BLUR FOR KEY FACTORS ========= */
.premium-blur-section {
  position: relative;
  display: inline-block;
}

.premium-blur-content {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.premium-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  margin-left: 6px;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.premium-info-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.premium-info-icon .premium-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.95);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
}

.premium-info-icon:hover .premium-tooltip {
  visibility: visible;
  opacity: 1;
}

/* ========= MOBILE RESPONSIVE ========= */
@media (max-width: 920px) {
  /* Prompt category buttons tooltips - hide on mobile */
  .prompt-category-btn::after {
    display: none;
  }

  /* Scroll to bottom button mobile */
  .scroll-to-bottom-btn {
    width: 28px;
    height: 28px;
    bottom: calc(var(--composer-h) + var(--composer-bottom) + 8px);
  }

  .scroll-to-bottom-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Widget add button mobile */
  .widget-add-btn {
    font-size: 16px !important;
    padding: 2px 8px !important;
  }

  /* Chart mobile adjustments */
  .chart-symbol {
    font-size: 13px;
  }

  .chart-current-price {
    font-size: 20px;
  }

  .chart-percent-change {
    font-size: 12px;
  }

  .chart-type-btn,
  .chart-timeframe-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 375px) {
  /* Extra small mobile adjustments */
  .widget-container {
    top: 50px;
  }

  .scroll-to-bottom-btn {
    width: 26px;
    height: 26px;
  }
}