/* dashboard.html -> <style> tag */
/* 1) Make the chip non-interactive so drags can scroll */
#sentimentIndicator { pointer-events: none;}

/* 2) Ensure the chart canvas itself allows vertical scroll + pinch */
#container canvas {
  touch-action: pan-y pinch-zoom !important;}
/* 3) Don’t let invisible toasts block touches */
/* 1) Toast: don't block touches when hidden */
#fg-toast {
  display: none !important;          /* hidden by default */
  pointer-events: none !important;   /* and not clickable */}
#fg-toast.show {
  display: flex !important;          /* only when shown */
  pointer-events: auto !important;   /* clickable only when visible */}          /* only clickable when shown */

/* 4) Stacking: keep tooltip/legend above the chip if needed */
/* 2) Chip: never intercept touches; keep it under the tooltip/legend */
#sentimentIndicator {
  pointer-events: none !important;
  z-index: 3 !important;}
#legend {
  z-index: 20 !important;}

/* sentiment chip — responsive type */
#sentimentIndicator, #sentimentChip{
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 44px);
  right: 10px;
  z-index: 8;

  /* instead of: font: 600 11px/1.1 'Orbitron',sans-serif; */
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw + 0.25rem, 18px); /* min, fluid, max */
  line-height: 1.2;

  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: #111;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
  max-width: 90vw;
  word-break: break-word;}

/* chip below legend */
.sentiment-chip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 44px);
  right: 10px;
  z-index: 3;             /* < legend's 40, so it sits behind */
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.4vw + 0.25rem, 18px);
  line-height: 1.2;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: #111;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;    /* avoids blocking scroll/taps */
  max-width: 90vw;
  word-break: break-word;}
.sentiment-chip strong { font-size: 1.15em;}
.sentiment-chip u { text-underline-offset: 2px;}
/* make the numeric score pop a bit more */
#sentimentIndicator strong, #sentimentChip strong{
  font-size: 1.15em;     /* ~15% larger than base */}

/* keep underline label readable but not huge */
#sentimentIndicator u, #sentimentChip u{
  font-size: 1em;
  text-underline-offset: 2px;}

/* tiny phones can scale a touch more */
@media (max-width: 400px){
  #sentimentIndicator, #sentimentChip{
    font-size: clamp(12px, 2.2vw + 0.35rem, 17px);
    top: calc(env(safe-area-inset-top, 0px) + 56px);
  }
}

/* big screens can breathe */
@media (min-width: 1400px){
  #sentimentIndicator, #sentimentChip{
    font-size: clamp(14px, 0.9vw + 0.4rem, 20px);
    padding: 0.5rem 0.75rem;
  }
}
/* Let vertical swipes scroll the page even over the chart */
#container, 
#container canvas,
.tv-lightweight-charts,
.tv-lightweight-charts canvas {
  touch-action: pan-y !important;     /* allow vertical scroll gestures */
  -ms-touch-action: pan-y !important;
  overscroll-behavior: auto;          /* don't trap scroll */}

/* 4) Belt & suspenders: ensure the page itself can scroll */
html, body {
  overflow-y: auto !important;
  height: auto !important;
  -webkit-overflow-scrolling: touch;}
 

.session-status {
  color: white;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Space between indicator and text */}

.session-status .indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;}

/* Green "ON" state for logged-in users */
.session-status.logged-in .indicator {
  background-color: #28a745; /* Bright Green */
  box-shadow: 0 0 8px #28a745, 0 0 12px #28a745, 0 0 16px #28a745;}

/* Red "OFF" state for logged-out users */
.session-status.logged-out .indicator {
  background-color: #dc3545; /* Bright Red */
  box-shadow: 0 0 8px #dc3545, 0 0 12px #dc3545;}

.login-button {
  background-color: transparent;
  color: white;
  padding: 8px 15px;
  border: 1px solid #dc3545;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s, box-shadow 0.3s;}

.login-button:hover {
  background-color: rgba(220, 53, 69, 0.2);
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.7);}

  .tf-note { margin-top: 6px; color:#555;}

  .wp-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
  .wp-card { display:flex; flex-direction:column; border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04); }
  .wp-thumb { aspect-ratio:16/9; width:100%; object-fit:cover; background:#f5f5f7; display:block; }
  .wp-meta { padding:12px 14px 6px; font-size:.85rem; color:#6b7280; }
  .wp-title { padding:0 14px; font-weight:700; line-height:1.25; margin:4px 0 8px; font-size:1rem; }
  .wp-excerpt { padding:0 14px 14px; color:#4b5563; font-size:.92rem; }
  .wp-kicker { letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:#64748b; }
  
  /* GRID of the three columns */
  .wp-row{
    display:grid;
    gap:24px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* <- valid */
    align-items:start;
  }
  
  /* column container (lets the header + description + cards stack) */
  .wp-col{ display:flex; flex-direction:column; gap:10px; }
  
  .wp-col h3{ margin:0; font-size:1.1rem; }
  .wp-card:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.06); transition:.18s ease; }
  
  /* description block styling */
  .wp-desc{ display:block; padding:10px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; color:#374151; }
  
  /* Responsive */
  @media (max-width:1100px){
    .wp-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:768px){
    .wp-row{ grid-template-columns: 1fr; }
  }
  
  /* Optional: prevent weird sizing */
  *, *::before, *::after{ box-sizing:border-box; }
/* ===================== ForexGPT — Light Theme Buttons & Chips ===================== */
:root{
  /* neutrals (light) */
  --fg-bg:#f7f8fa;          /* page bg */
  --fg-surface:#ffffff;     /* control bg */
  --fg-border:#d8dee9;      /* borders */
  --fg-text:#111827;        /* primary text */
  --fg-text-dim:#4b5563;    /* secondary text */

  /* brand cores */
  --brand-cyan:#1fb6ff;     /* logo cyan */
  --brand-amber:#ff7849;    /* logo amber/orange */

  /* role accents (de-saturated for a serious feel) */
  --acc-position:#0ea776;   /* green (long/steady) */
  --acc-swing:#8a5a20;      /* copper/brown (distinct from CTA) */
  --acc-intraday:#1f6feb;   /* blue (short term) */
  --acc-scalping:#c03221;   /* red (risk/high tempo) */}

/* ================================ RUN SCANNER (CTA) ================================ */
#scanExtremesBtn{
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-amber));
  color:#fff;
  font-weight:700;
  border:none;
  border-radius:22px;
  padding:10px 22px;
  box-shadow: 0 6px 16px rgba(17,24,39,.12);      /* soft elevation on light bg */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
#scanExtremesBtn:hover{ transform: translateY(-3px); box-shadow:0 8px 22px rgba(17,24,39,.16);}
#scanExtremesBtn:focus-visible{ outline:2px solid rgba(31,182,255,.8); outline-offset:3px;}
#scanExtremesBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;}

/* ==================================== TF CHIPS ==================================== */
/* Base: quiet outlined pills; readable on light surfaces */
.tf-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:14px;
  background: #fff;                 /* light theme surface */
  border: 1px solid #d8dee9;
  color: #4b5563;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition: background-color .18s, box-shadow .18s, transform .12s, color .18s, border-color .18s;}

/* Non-color cue: subtle left bar (works even in grayscale) */
.tf-chip::before{
  content:""; width:4px; height:60%;
  border-radius:2px; margin-right:2px; background: currentColor; opacity:.9;}

/* Map packs to accent via text color (drives ::before) */
.tf-chip[data-pack="position"]  { --chip-accent: #0ea776;}
.tf-chip[data-pack="swing"]     { --chip-accent: #eb8440;}
.tf-chip[data-pack="intraday"]  { --chip-accent: #557cb6cc;}
.tf-chip[data-pack="scalping"]  { --chip-accent: #c03221;}

/* Hover: light tint of the accent; keeps high contrast on light bg */
.tf-chip:hover{
  /* subtle tint on hover (optional) */
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--chip-accent) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--chip-accent) 25%, #d8dee9);
  color: #111827;}

/* Accent variables you already set elsewhere: --acc-position, etc. */
/* Each chip sets --chip-accent via its [data-pack] rule. */

/* Active/selected: lightened accent fill + black text */
.tf-chip.active,
.tf-chip[aria-pressed="true"]{
  /* Use a lighter mix of the accent so black text remains readable */
  background: color-mix(in srgb, var(--chip-accent) 78%, #ffffff);
  color: #111827;                /* black/dark text */
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(17,24,39,.10) inset, 0 3px 12px rgba(17,24,39,.10);}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, black 50%, white)) {
  .tf-chip.active,
  .tf-chip[aria-pressed="true"]{
    background: var(--chip-accent);
    /* If your accent is very dark, force a lighter variant for readability: */
    filter: brightness(1.25) saturate(.9);
    color: #111827;
  }
}

/* Keep the left accent bar visible on active (turn it dark instead of white) */
.tf-chip.active::before,
.tf-chip[aria-pressed="true"]::before{
  background: rgba(0,0,0,.35);
  opacity: 1;}

/* Keyboard focus (visible, not color-only) */
.tf-chip:focus-visible{ outline:2px solid rgba(31,182,255,.8); outline-offset:3px;}

/* =================================== “+” BUTTONS ================================== */
.add-btn{
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-amber));
  color:#fff; font-weight:700; border:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 4px 12px rgba(17,24,39,.12);}
.add-btn:hover{ transform: scale(1.05); box-shadow: 0 6px 18px rgba(17,24,39,.16);}
/* Make the + buttons the positioning context for their ::after pulse */
#addAssetBtn,
#addTimeframeBtn {
  position: relative;
  z-index: 0;            /* so the glow sits behind content */}
/* Attention pulse only when Analyze/Run is disabled & mode requires adding */
body.needs-assets  #addAssetBtn::after,
body.needs-tfs     #addTimeframeBtn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: 0 0 0 3px rgba(31,182,255,.14);
  animation: addPulseLight 1.0s ease-in-out infinite alternate;}
@keyframes addPulseLight{
  from{ box-shadow:0 0 0 4px rgba(31,182,255,.14); }
  to  { box-shadow:0 0 0 6px rgba(255,120,73,.22); }
}

/* --- Theme Toggle Switch --- */
.theme-switch {
  position: relative;
  display: inline-block;}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 50px;
  height: 26px;
  background: #2a3354; /* Dark mode background */
  border-radius: 26px;
  position: relative;
  transition: background-color .2s;
  padding: 0 5px;}

.theme-toggle .sun, .theme-toggle .moon {
  color: #f1c40f; /* Sun color */
  font-size: 16px;}

.theme-toggle .moon {
  color: #f39c12; /* Moon color */}

/* The sliding circle */
.theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform .2s;}

/* Light mode appearance */
.pro[data-theme="light"] .theme-toggle {
  background: #3498db; /* Light mode background */}

/* Move the circle when checked (light mode) */
input:checked + .theme-toggle::before {
  transform: translateX(23px);}

/* hide the mini "Mode · Simple / Pro" bar inside Pro */
/* Hides the "Simple / Pro" toggle inside the Pro dashboard, but keeps the theme switch */
.pro #modeBar .left { display: none !important;}

/* make the gallery logo sane everywhere */
.pro .thumb-card .thumb-logo{
  position:absolute; right:8px; bottom:8px;
  width:22px !important; height:auto; object-fit:contain;
  pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));}

/* ==================== PRO (scoped, no bleed) ==================== */
  
  /* base apply (Pro only) */
  .pro, .pro *{ box-sizing:border-box;}
  .pro{ background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
  .pro .panel{ background:var(--panel); border:1px solid var(--tile-br); border-radius:14px; padding:18px;}
 
  .pro header a{ color:var(--text); text-decoration:none;}
  .pro header img{ max-height:50px}
  .pro .wrap { max-width: min(1280px, 96vw); margin-inline:auto;}
  
  /* Classic/Pro slider (inside Pro) */
  .pro .fg-toggle-input{ display:none}
  .pro .fg-toggle-track{
    position:relative; display:inline-grid; grid-template-columns:1fr 1fr; gap:0;
    background:#0f1322; border:1px solid #242a44; border-radius:999px; padding:6px; cursor:pointer; user-select:none;
}
  .pro .fg-toggle-label{ z-index:2; padding:.35rem .85rem; text-align:center; color:#c7cbe2; font-weight:600; font-size:.95rem}
  .pro .fg-toggle-thumb{ position:absolute; z-index:1; top:4px; left:4px; height:calc(100% - 8px); width:50%;
    background:#212844; border-radius:999px; transition:transform .25s ease;}
  /* JS sets #simpleToggle.checked. These selectors allow both structures */
  .pro #simpleToggle:checked + .fg-toggle-track .fg-toggle-thumb{ transform:translateX(100%);}
  
  /* Preset chips (Intraday / Swing / Position) */
  .pro .chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px}
  .pro .chip{
    background:var(--chip-bg); border:1.5px solid var(--chip-br); color:var(--text);
    padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; transition:.15s;
}
  .pro .chip:hover{ border-color:var(--chip-active)}
  .pro .chip.active{
    background:var(--chip-active); color:var(--chip-active-text); border-color:transparent;
    box-shadow:0 0 0 2px rgba(37,99,235,.18) inset;
}
  
  /* Timeframe pills */
  .pro .tf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(97px,1fr)); gap:1px; margin:10px 0}
  .pro .tf-grid label{
    display:flex; gap:8px; align-items:center; padding:10px 12px;
    background:var(--tile-bg); color:var(--tile-text);
    border:1.5px solid var(--tile-br); border-radius:12px; cursor:pointer; transition:.15s;
}
  .pro .tf-grid label.lock{ opacity:.55; cursor:not-allowed;}
  .pro .tf-grid label.on{ background:var(--tile-on-bg); color:var(--tile-on-text); border-color:transparent;}
  /* checkbox remains visible on both themes */
  .pro .tf-grid input[type="checkbox"]{ accent-color: currentColor;}
  
  /* Buttons */
  .pro .btn{ border-radius:10px; padding:10px 12px; font-weight:700; border:1px solid var(--btn-ghost-br);
    background:transparent; color:var(--text);}
  .pro .btn.primary{ background:var(--btn-pri); border-color:var(--btn-pri); color:#fff;}
  .pro .btn.primary:hover{ filter:brightness(.95)}
  .pro .btn.ghost:hover{ border-color:var(--btn-pri)}
  
  /* Scan loader */
  .pro .scan-progress{
    display:none; background:#0f1322; border:1px solid #21284a; border-radius:12px; padding:12px; margin:10px 0; color:#cfd6f6;
}
  .pro .scan-progress .row{ display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .pro .scan-bar{ background:#0b0f1f; border:1px solid #1c2546; border-radius:999px; overflow:hidden; height:10px; margin-top:8px}
  .pro .scan-bar > span{ display:block; width:0%; height:100%; background:linear-gradient(90deg,#22c55e,#06b6d4); transition:width .25s linear}
  .pro .scan-eta{ font-variant-numeric:tabular-nums; opacity:.9;}
  
  /* Scan results cards */
  .pro .scan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:16px 0;}
  .pro .story-card{
    background:var(--panel); border:1px solid var(--tile-br); border-radius:14px;
    overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.15); display:flex; flex-direction:column;
}
  .pro .story-card header, .pro .story-card footer{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
}
  .pro .story-card img{ width:100%; height:auto; display:block; background:#06080f;}
  
  /* Latest snapshots gallery (thumbs) */
  .pro .thumb-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:16px 0;}
  .pro .thumb-card{
    position:relative; display:block; border:1px solid var(--tile-br); background:#0c1020;
    border-radius:14px; overflow:hidden; aspect-ratio:16/9;
}
  .pro .thumb-card > img:first-child{ width:100%; height:100%; object-fit:cover; display:block;}
  .pro .thumb-card .thumb-logo{
    position:absolute; right:8px; bottom:8px; width:22px !important; height:auto; object-fit:contain;
    pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
  .pro .thumb-card .thumb-caption{ padding:8px 10px; color:#19191d; font-size:.65rem; border-top:1px solid var(--tile-br)}
  
  /* Embedded (Pro page inside Classic iframe) */
  .embedded header, .embedded footer{ display:none !important;}
  .embedded .pro { background:#0b0f1a;}
  
  /* Host sizing for Pro when embedded in Classic */
  #pro-pane { width:100%;}
  #pro-host{
    box-sizing:border-box; width:min(100%, var(--pro-max)); margin:12px auto;
    border:1px solid #333; border-radius:8px; background:#0b0f1a;
    height:calc(100vh - var(--header-h,88px) - 120px);
}
  #pro-iframe{ display:block; width:100%; height:100%; border:0;}
  @media (max-width: 768px){
    #pro-host{ height: calc(100vh - var(--header-h,72px) - 140px); }
  }

/* Scan Results */
.thumb-card.from-scan .thumb-score { display:none;}
.scan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:16px 0}
.scan-card{position:relative;border:1px solid #e6e6e6;border-radius:10px;background:#fff;overflow:hidden}
.scan-card img{display:block;width:100%;height:auto}
.scan-meta{padding:10px;font-size:0.9rem}
.scan-badge{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:12px;background:rgba(0,0,0,0.5);color:#fff;font-size:.8rem}
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:8px 0}
.tf-grid label{display:flex;gap:6px;align-items:center;font-size:.95rem}
.small-muted{font-size:.85rem;color:#666}
.scan-progress {
    display:none;
    margin:10px 0 14px;
    padding:10px 12px;
    background:#0b0f19;
    color:#e5e7eb;
    border:1px solid #1f2937;
    border-radius:10px;
}
  .scan-progress .row {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    margin-bottom:8px; font-size:0.95rem;
}
  .scan-bar {
    position:relative; width:100%; height:10px; background:#111827;
    border-radius:999px; overflow:hidden;
}
  .scan-bar > span {
    position:absolute; inset:0; width:0%;
    background:linear-gradient(90deg,#22c55e,#06b6d4);
    transition:width .25s linear;
}
  .scan-eta {
    font-variant-numeric:tabular-nums; opacity:.9;
}

 /* ───────────────────── ForexGPT utility-bar v1 ───────────────────── */
/* ─── mode slider ───────────────────────────────────────────── */
.fg-mode-toggle{
    position:relative;        /* << new – becomes the containing block   */
    display:inline-block;     /* keeps width/height only around the pill */
    max-width:100%;        /* ← no more giant invisible box  */}

/* hide the native checkbox but keep it focusable */
.fg-toggle-input{
    position:absolute;
    width:100%;height:100%;
    opacity:0;cursor:pointer;z-index:3;}

/* track (background) */
.fg-toggle-track{
    display:flex;align-items:center;justify-content:space-between;
    background:#e8f5e9;
    border:1px solid #cce0d1;
    border-radius:30px;
    font-size:16px;font-weight:600;
    color:#222;
    padding:10px 22px;
    position:relative;
    user-select:none;}

 
/* labels – centred, unclickable, and ABOVE the thumb */
.fg-toggle-track .fg-toggle-label{
    flex:1;                 /* ← keeps the ‘Assets / Time-frames’ 50 / 50 */
    text-align:center;
    pointer-events:none;    /* slider remains fully clickable      */
    position:relative;      /* stacking context                    */
    z-index:2;              /* above the thumb (thumb is z-index:1)*/}
 

/* thumb (the moving pill) */
.fg-toggle-thumb{
    position:absolute;top:4px;left:4px;
    width:calc(50% - 8px);height:calc(100% - 8px);
    background:#228B55;border-radius:24px;
    transition:.25s cubic-bezier(.4,.0,.2,1);
    z-index:1;}

/* move thumb to the *right* half when checkbox is checked */
.fg-toggle-input:checked + .fg-toggle-track .fg-toggle-thumb{
    left:calc(50% + 4px);}

/* default text for both labels (good contrast on pale green track) */
.fg-toggle-track{ color:#222;}

/* ✅ thumb on the LEFT  →  white text on the LEFT label  */
.fg-toggle-input:not(:checked) + .fg-toggle-track .fg-left { color:#fff;}

/* ✅ thumb on the RIGHT →  white text on the RIGHT label */
.fg-toggle-input:checked      + .fg-toggle-track .fg-right{ color:#fff;}

/* Hover: whole switch lifts */
.fg-mode-toggle:hover .fg-toggle-track {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;}

/* Thumb independent hover effect */
.fg-mode-toggle:hover .fg-toggle-thumb {
  transform: scale(1.05);             /* slight grow */
  background: #2aa865;                /* brighter green */
  transition: transform .2s ease, background .2s ease;}

/* ------------------------------------------ *
   BIG header pill – desktop / tablet
 * ------------------------------------------ */
 #aiw-mode-tabs{
    width:clamp(320px,40vw,680px);}

/* ---------- phones ----------- */
@media (max-width:767px){
  #aiw-mode-tabs{
      width:clamp(260px,92vw,340px);
  }
}

/*─────────────────────────────────────────────────────────────
  SMALL mode-slider (“Assets / Time-frames”)
─────────────────────────────────────────────────────────────*/

/* desktop / tablet */
#asset-mode-group  .fg-mode-toggle,
#timeframe-mode-group .fg-mode-toggle{
    width:clamp(180px, 28vw, 300px);  /* fluid but never tiny or gigantic   */}

/* ────────────────────────────────────────────────
   Mobile layout for the small mode-slider
   (Assets ⇄ Time-frames)
─────────────────────────────────────────────────*/
@media (max-width:767px){

    /* overall slider width */
    #asset-mode-group  .fg-mode-toggle,
    #timeframe-mode-group .fg-mode-toggle{
        width:clamp(160px, 82vw, 260px);
    }
  
    /* track (background) */
    #asset-mode-group  .fg-toggle-track,
    #timeframe-mode-group .fg-toggle-track{
          padding:8px 18px;
          font-size:15px;
          border-radius:26px;
    }
  
    /* thumb – size & roundness (shared) */
    #asset-mode-group  .fg-toggle-thumb,
    #timeframe-mode-group .fg-toggle-thumb{
          position:absolute;
          top:3px;
          height:calc(100% - 6px);
          width:calc(50% - 6px);
          border-radius:9999px;
          transition:.25s cubic-bezier(.4,.0,.2,1);
    }
  
    /* OFF  → thumb on the left */
    #asset-mode-group  .fg-toggle-input:not(:checked) + .fg-toggle-track .fg-toggle-thumb,
    #timeframe-mode-group .fg-toggle-input:not(:checked) + .fg-toggle-track .fg-toggle-thumb
  
    /* ON → thumb on the right */
    #asset-mode-group  .fg-toggle-input:checked + .fg-toggle-track .fg-toggle-thumb,
    #timeframe-mode-group .fg-toggle-input:checked + .fg-toggle-track .fg-toggle-thumb{
          left:calc(50% + 3px);
    }
  }

/* mobile: shrink a bit so it never overflows */
@media(max-width:767px){
   /* 1)  let the wrapper grow/shrink fluidly instead of the hard 200 px */
   .fg-mode-toggle{
    position:relative;        /* << new – becomes the containing block   */
    display:inline-block;     /* keeps width/height only around the pill */
    width:max-content;        /* ← no more giant invisible box  */
}

  /* 2)  track: a bit slimmer than desktop so the pill stays round */
  .fg-toggle-track{
    padding:8px 18px;           /* was 10 / 22  */
    font-size:15px;             /* was 16        */
    border-radius:26px;         /* was 30        */
}

/* 3)  thumb: match the new track height (everything auto-scales) */
.fg-toggle-thumb{
    top:3px; 
    height:calc(100% - 6px);
    width:calc(50%  - 6px);
    border-radius:9999px;       /* stays perfectly round            */
}
}

    /* ───────── ForexGPT utility-bar v1 (full block) ───────── */
.fg-panel{
    display:flex;
    flex-direction:column;
    gap:12px;
    background:#fff;
    border:1px solid #e1e1e1;
    border-radius:12px;
    padding:16px 20px;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;}

.fg-select{height:34px;padding:0 10px;border:1px solid #ccc;border-radius:6px;background:#fafafa;font-size:13px}
.fg-select--asset{min-width:180px}

.fg-checkbox{display:flex;align-items:center;gap:6px;font-size:13px}

.fg-btn{
    height:36px;padding:0 20px;border:none;border-radius:20px;
    background:#228B55;color:#fff;font-weight:600;cursor:pointer;transition:.2s}
.fg-btn:hover{transform: translateY(-3px);background:#1b6d44}
.fg-btn--secondary{background:#e8f5e9;color:#228B55}
.fg-btn--secondary:hover{background:#d4ead6}
.fg-btn--warn{background:#ff6b6b}
.fg-btn--warn:hover{background:#e55b5b}

.fg-balance{display:flex;gap:28px;font-weight:600;font-size:14px}
.fg-balance div{display:flex;flex-direction:column}

.fg-label{font-size:11px;font-weight:500;color:#666;text-transform:uppercase}

/* ───────── defaults (desktop / tablet) ───────── */
.fg-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;}

/* ①  keep asset-group horizontal on large screens */
.fg-asset-group{
    display:flex;
    gap:6px;
    align-items:center;              /* vertically centre label + input */}
/* ②  fixed-width labels so both rows align perfectly */
.fg-asset-group>label{
    min-width:105px;                 /* enough for “Add Time-frame:” */
    text-align:right;}

.share-btn{
    display:block;margin:4px 0;
    background:#e8f5e9;border:none;border-radius:4px;
    padding:4px 8px;cursor:pointer;font-weight:700;color:#228B55;}
.share-btn:hover{transform: translateY(-3px);background:#d4ead6}

.share-col{
    display:flex;flex-direction:column;
    gap:6px;align-items:center;}

.delete-btn{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;}
.delete-btn:hover{transform: translateY(-3px);color:#d9534f}

/* ───────── mobile overrides ───────── */
@media (max-width:600px){

    /* ③  give the two mode-groups explicit stacking rules on mobile */
    #timeframe-mode-group,
    #asset-mode-group{
        display:flex;                /* JS toggles these to “flex” */
        flex-direction:column;
        gap:12px;
        width:100%;
    }

    .share-col{flex-direction:row;}

    /* existing tweaks */
    .fg-row     {flex-direction:column;align-items:flex-start;}
    .fg-balance {flex-direction:column;gap:8px;}

    /* stack the controls and make them full-width */
    .fg-asset-group{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }
    .fg-asset-group>.fg-select,
    .fg-asset-group>.fg-btn{width:100%;}

    /* labels go back to auto width on small screens */
    .fg-asset-group>label{
        min-width:auto;
        text-align:left;
    }
}   /* ←—— DO NOT delete this closing brace */

/* Generic disabled look for ANY .fg-btn you disable with JS */
.fg-btn.disabled,
.fg-btn:disabled{
    opacity: .35;
    cursor: not-allowed;}

  /* shared look */
.sentiment-cell          { font-weight:600; color:#000; text-align:center;pointer-events: auto;}

/* use the same hues you defined in updateSentimentVisualization() */
.strong-bullish          { background:#00c800;}   /* > 75  */
.bullish                 { background:#66cc00;}   /* 51 – 75 */
.medium-bullish          { background:#99cc00;}   /* 26 – 50 */
.slightly-bullish        { background:#cccc00;}   /* 11 – 25 */
.neutral                 { background:#ffff00;}   /* -10 – 10 */
.slightly-bearish        { background:#ff9900;}   /* -25 – -11 */
.medium-bearish          { background:#ff8000;}   /* -50 – -26 */
.bearish                 { background:#ff5000;}   /* -75 – -51 */
.strong-bearish          { background:#c00000;}   /* < -75 */
  /* ──────────────────────────────────────────────────────────────────── */

/* ───── centred, card-style toast ───────────────────────────── */
#fg-toast{
  position:fixed;
  /* centre on both axes */
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);

  /* card look */
  background:#fff;      /* white fill */
  color:#000;           /* black text */
  padding:14px 24px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  font-family:Inter,system-ui,sans-serif;
  font-size:15px;
  font-weight:600;

  /* animation */
  opacity:0;
  transition:
    opacity .25s ease,
    transform .25s cubic-bezier(.4,0,.2,1);

  z-index:9999;         /* above everything */}

/* when JS adds .show */
#fg-toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);}
th[data-sort]            { cursor:pointer; user-select:none;}
th[data-sort]::after     { content:""; margin-left:4px;}
th[data-sort][data-dir="asc"]::after  { content:" ▲";}
th[data-sort][data-dir="desc"]::after { content:" ▼";}

/* ——— active / inactive mode pills ——— */
.fg-mode-btn      { opacity:.35; cursor:pointer; transition:.2s}
.fg-mode-btn.on   { opacity:1;   cursor:default}

/* mode-switch buttons share .fg-btn but override colours here */
.fg-mode-btn          { background:#e8f5e9; color:#228B55;}   /* idle / greyed */
.fg-mode-btn.on       { background:#228B55; color:#fff;}   /* active / green */
 

 /* Center the AI-Watchlist ⇄ Heatmap toggle */
#aiw-toggle-wrap{
    display:flex;            /* create a flex container               */
    justify-content:center;  /* horizontally centre child elements    */
    margin:16px 0;           /* optional spacing above/below          */}

/* ────────────────────────────────────────────────────────────────
   “Sentiment Score Heat-map” – responsive table / card layout
   Only touches #lw-table  ✅   Never touches #watchlist-table  ✅
─────────────────────────────────────────────────────────────────*/

/* =========================  MOBILE  ========================= */
@media (max-width:600px){

/* hide header row – cards will carry their own labels */
#lw-table thead{display:none;}

/* every <tr> becomes a card */
#lw-table tr{
    display:block;
    margin:0 0 12px;
    border:1px solid #ccc;
    border-radius:8px;
    overflow:hidden;
}

/* coloured background still comes from the .bullish / .bearish … class
   that you apply in JS – nothing to add here */

/* label │ value rows inside the card ----------------------- */
#lw-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px;
    font-size:.9rem;
}
#lw-table td::before{
    content:attr(data-label) ": ";
    font-weight:600;
    color:#000;             /* label text colour */
}

/* hide the trailing “✕” column (delete icon) on mobile */
#lw-table td:last-child{display:none;}

/* ---------- mobile sort bar itself ---------- */
.lw-sort-mobile{
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0 14px;
    font-size:.9rem;
}
.lw-sort-mobile label{font-weight:600;}
.lw-sort-mobile select{
      min-width:130px;   /* ← was auto; now wide enough for “Time UTC”, etc. */
  }
.lw-sort-mobile button{
    padding:4px 6px;
    font-size:.9rem;
}
}

/* =========================  DESKTOP  ========================= */
@media (min-width:601px){

/* desktop keeps the classic header row and hides the sort bar */
.lw-sort-mobile{display:none;}

/* (optional) cursor-pointer & arrow hints already added by JS */
}

/* ---------------------------------------------------------------------- */

/* ── Sentiment-score tooltip (keeps AI- & Live-watchlist styles intact) ── */
td.sentiment-cell{                /* base cell */
    position:relative;
    overflow:visible;             /* lets the pop-up hang outside the cell */
    cursor:help;                  /* shows users it’s interactive          */
    pointer-events:auto;}

td.sentiment-cell::after{         /* the bubble itself, initially hidden   */
    content:attr(data-tip);
    position:absolute;
    bottom:calc(100% + 4px);      /* sits 4 px above the cell */
    left:50%; transform:translateX(-50%);
    background:#333; color:#fff;
    font:600 .75rem/1 system-ui;
    padding:2px 6px;
    white-space:nowrap;
    border-radius:4px;
    opacity:0; visibility:hidden;
    pointer-events:none;
    z-index:10000;                /* higher than sticky heads & previews   */
    transition:opacity .15s ease-out;}

td.sentiment-cell:hover::after{   /* reveal on hover */
    opacity:1; visibility:visible;}

/* tiny ForexGPT badge that sits ON TOP of tint + chart  */
.thumb-logo{
    position:absolute;
    right:6px;
    bottom:6px;

    /* pick ONE sizing approach */
    width:32px;          /* fixed → easiest & predictable       */
    height:auto;         /* keep aspect ratio                    */

    /* If you prefer fluid:  width:12%; min-width:18px; max-width:32px; */

    opacity:.80;
    pointer-events:none; /* clicks go through to the anchor      */
    z-index:2;           /* above the colour-wash (::before)     */
}

/* map the nine sentiment classes to colours (now on ::before) */
.thumb-card.strong-bullish::before{background:#00c800;}
.thumb-card.bullish::before       {background:#66cc00;}
.thumb-card.medium-bullish::before{background:#99cc00;}
.thumb-card.slightly-bullish::before{background:#cccc00;}
.thumb-card.neutral::before       {background:#ffff00;}
.thumb-card.slightly-bearish::before{background:#ff9900;}
.thumb-card.medium-bearish::before{background:#ff8000;}
.thumb-card.bearish::before       {background:#ff5000;}
.thumb-card.strong-bearish::before{background:#c00000;}

 
 
.thumb-card{ cursor:pointer;}  /* shows hand cursor on hover */
/* big translucent score in the middle */
.thumb-score{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    font:700 36px/1 system-ui;
    color:#000;opacity:1;
    z-index:2;
    pointer-events:none;
}

/* a translucent colour wash that sits ON TOP of the picture        */
.thumb-card::before{
    content:"";
    position:absolute; inset:0;
    opacity:.50;                    /* tweak to taste */
    z-index:1;                      /* below captions & score, above img   */
    pointer-events:none;
}

.wl-actions{
    text-align:center;
    white-space:nowrap;}
.wl-actions button{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    padding:2px 6px;}

/* ── responsive masonry-ish grid of thumbs ────────────────────────── */
.thumb-gallery{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    /*grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); */
    gap:12px;
    margin-bottom:32px;}

.thumb-card{
    position:relative;
    display: block;
    background:#111;
    border:1px solid #333;
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:16/9;
    cursor:pointer;         /* every cell reserves the space first   */}

/* keep the picture underneath the tint                              */
/* make only the chart image fill the card */
.thumb-card img:first-of-type{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
 /*.thumb-card img{
    width:100%;
    height:auto;
    object-fit:cover;
    display:block;}
 */
.thumb-caption{
    position:absolute;left:4px;bottom:4px;right:4px;
    font:900 11px/1.2 system-ui;
    color:#000; /* text-shadow:0 0 3px #000; */
    pointer-events:none;
    z-index: 3;}

/* ─── chart–preview bubble ───────────────────────────── */
#wc-thumb{
    position:fixed;              /* floats above everything        */
    width:320px;height:180px;    /* 16 : 9 mini-preview             */
    border:1px solid #ccc;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    background:#fff 50%/cover no-repeat;
    z-index:9999;display:none;   /* start hidden                   */}

.rerun-btn{
    height:28px;
    padding:0 14px;
    border:none;
    border-radius:14px;
    background:#e8f5e9;
    color:#228B55;
    font-weight:600;
    cursor:pointer;
}
  .rerun-btn:hover{transform: translateY(-3px);background:#d4ead6}
  .rerun-btn:disabled{opacity:0.4;cursor:not-allowed}
  
button.export-btn {
    background: #007bff;      /* blue */
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;}

button.export-btn:hover {
  transform: translateY(-3px);
  background:#0056b3;}

.custom-audio-player {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.4em;
    box-sizing: border-box;
}
  
  .custom-audio-player .play-btn {
    width: 100%;
    padding: 5px 0;
    border: none;
    font-size: 1em;
    border-radius: 4px;
    background: #f0f0f0;
    cursor: pointer;
}
  
  .play-btn.playing::after {
    content: "⏸️ Pause";
    color: #333; /* Dark text */
    font-weight: bold; /* Optional: makes it stand out */
    background: #f0f0f0; /* Light background for contrast */

}
  
  .play-btn:not(.playing)::after {
    content: "▶️ Play";
    color: #333; /* Dark text */
    font-weight: bold; /* Optional: makes it stand out */
    background: #f0f0f0; /* Light background for contrast */
}
  
  .controls-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
  
  .seek-bar {
    width: 100%;
    max-width: 100%;
}
  
  .timestamp {
    margin-top: 2px;
    font-size: 0.85em;
    text-align: right;
    white-space: nowrap;
}
  
  .volume-group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5em;
}
  
  .volume-icon {
    font-size: 1.1em;
    white-space: nowrap;
}
  
  .volume-bar {
    flex: 1;
    width: 100%;
}
  
  .audio-cell {
    vertical-align: top;
    max-width: 250px;
    overflow-wrap: break-word;
}
  
  @media (max-width: 768px) {
    .custom-audio-player {
      font-size: 0.95em;
    }
  }
  

/* Scroll wrapper for horizontal overflow on smaller screens */
#watchlist-scroll-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: white;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0;
    margin-top: 20px;
}

  #watchlist-wrapper h2 {
    box-sizing: border-box;
    margin: 20px 0;
}
  
  /* Main wrapper container */
  #watchlist-wrapper {
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 8px;
}
  
  /* Form controls layout */
  #watchlist-wrapper label,
  #watchlist-wrapper select,
  #watchlist-wrapper button {
    margin: 8px 0;
}
  
  #watchlist-wrapper select,
  #watchlist-wrapper button {
    width: 100%;
    max-width: 300px;
}
  
  /* Button styling */
  #watchlist-wrapper button {
    display: inline-block;
    margin: 5px 5px 5px 0;
    padding: 8px 12px;
    font-size: 14px;
}
  
  #watchlist-table thead {
    white-space: nowrap;
}
  
  #watchlist-table td, #watchlist-table th {
    word-wrap: break-word;
    white-space: normal;  /* Allows wrapping instead of truncating */
}
  

  #watchlist-table {
    width: 1080px;               /* Explicitly sets fixed width to trigger horizontal scrolling */
    table-layout: fixed;         /* Prevents auto-stretching and wraps cell content if needed */
    overflow-x: auto;
}
  /* Audio player width */
  audio {
    width: 120px;
    height: 22px;
}

.progress-bar {
    width: 100%;
    height: 25px;
    background-color: #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}

  .progress-fill {
    height: 100%;
    width: 0%;
    background-color: #4caf50;
    transition: width 3s ease-in-out;
}

  .remove-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
  .remove-btn:hover {
    transform: translateY(-3px);background-color: #d32f2f;
}
  

.padding-wrapper {
    padding: 30px; /* Adjust the padding value as needed */}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio for 16:9 videos */
    height: 0;
    overflow: hidden;}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

.legend-dot, .donchian-color {
    display: inline-block;
    width: 10px; /* Adjust size as needed */
    height: 10px; /* Adjust size as needed */
    border-radius: 50%;
    margin-right: 5px;
}
  
  .legend-dot, .sentimentscoreindicator-color {
    display: inline-block;
    width: 10px; /* Adjust size as needed */
    height: 10px; /* Adjust size as needed */
    border-radius: 50%;
    margin-right: 5px;
}

  .sentimentscoreindicator-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;}
  

.gradient-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    overflow: hidden; /* Ensures the pseudo-element's gradient is contained within the dot's circular shape */
    vertical-align: middle; /* Centers the dot relative to the adjacent text */}

.gradient-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #FF007F, #00FFD5); /* Your gradient */
    border-radius: 50%;}

.donchian-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;}

#tokenUsage {
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;}

#tokenUsage p {
    font-size: 16px;
    color: #333;}

@keyframes flashRed {
    0%, 100% { background-color: rgba(95, 68, 68, 0.63); }
    50% { background-color: red; }
  }
  
  .flash-background {
    animation: flashRed 4s infinite; /* Adjust the duration (1s) as needed */
}

/* Additional styles for "Open New Chart" button in header */
.open-chart-btn {
    padding: 8px 16px;
    font-size: 14px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
    margin-right: 15px;}

.select-asset-label, .select-timeframe-label { /* Adjust class names as necessary NOT SURE IF USED */
    padding-right: 10px; /* Adds space to the right of the label */
    padding-left: 10px; /* Adds space to the left of the label */
    display:contents;
    color: #333;}

.selection-row button {
    margin-top: 2px; /* Add space above the button default 10 */
    margin-bottom: 2px; /* Add space below the button defaul 10*/
    margin-right: 2px; /* Adds space to the right of the button deafult 2 */
    margin-left: 2px; /* Adds space to the left of the button default 2 */}

 

#pieChartCanvas {
 display: none; /* Initially hidden */}
.selection-row {
    display: contents;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Align items vertically */
    flex-wrap: nowrap; /* Prevent wrapping to ensure a row layout */
}

 

#sentimentLegend {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-radius: 15px;
    background-color: black; /* Ensures contrast with the colorful legend try #333 as well  */
    flex-wrap: nowrap; /* Allows items to wrap in smaller screens */
}

  .legend-item {
    color: black; /* Text color */
    padding: 2px 4px;
    border-radius: 5px;
    display: inline-block;
    flex-grow: 1;
    text-align: center; /* Ensures text is centered within each legend item */
    font-size: 1.5vw; /* Smaller font size for compactness */
    min-width: 50px; /* Ensures a minimum width for legend items */
    font-family: 'Orbitron', sans-serif; /* Futuristic font */
}

  /* Gradient backgrounds for legend items */
.strong-bearish { background: linear-gradient(to right, #8b0000, #ff0000); /* Very Negative Sentiment */}
.bearish { background: linear-gradient(to right, #ff0000, #ff6666); /* Negative Sentiment */}
.medium-bearish { background: linear-gradient(to right, #ff6666, #ffa500); /* Medium Negative Sentiment */}
.slightly-bearish { background: linear-gradient(to right, #ffa500, #ffcc66); /* Slightly Negative Sentiment */}
.neutral { background: linear-gradient(to right, #ffcc66, #ffff00); /* Neutral Sentiment */}
.slightly-bullish { background: linear-gradient(to right, #ffff00, #ccff66); /* Slightly Positive Sentiment */}
.medium-bullish { background: linear-gradient(to right, #ccff66, #7fff00); /* Medium Positive Sentiment */}
.bullish { background: linear-gradient(to right, #7fff00, #66ff66); /* Positive Sentiment */}
.strong-bullish { background: linear-gradient(to right, #66ff66, #008000); /* Very Positive Sentiment */}

/*#sentimentIndicator {
  width: 100%;
  height: 50px; /* Increased height for better visibility */
  /*border-radius: 20px; /* Rounded corners for a modern look */
  /*color: black; /* Ensures text color is black for better contrast */
  /*display: flex;
  justify-content: center; /* Centers text horizontally */
  /*align-items: center; /* Centers text vertically */
  /*font-size: 1.2rem; /* Larger font size for readability */
  /*font-family: 'Orbitron', sans-serif; /* Futuristic font */
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds subtle shadow for depth */
  /*transition: background-color 0.5s ease, color 0.5s ease; /* Smooth transition for color changes */
/*}*/
#sentimentIndicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Ensure it's above the chart but below interactive elements */
  padding: 5px 10px; /* Compact padding */
  background: rgba(255, 255, 255, 0.25); /* Semi-transparent background for legibility */
  border-radius: 15px; /* Rounded corners for a polished look */
  font-size: 1.5vw; /* Smaller font size for compactness */
  color: black; /* Text color */
  pointer-events: none; /* Allows interaction with chart elements beneath */
  white-space: wrap; /*  ensuring compactness */
  font-family: 'Orbitron', sans-serif; /* Futuristic font */}

.sentiment-text {
  font-weight: bold;}

#lastUpdatedTime {
    color: yellow; /* #b2aaaa;*/

}
.highlight {
    /*background: linear-gradient(to right, #FF007F, #00FFD5); */
    background-color: yellow; /* or any color of your choice */}

.gradient-highlight {
    display: inline; /* or inline-block, depending on your layout needs */
    background: linear-gradient(to right, #FF007F, #00FFD5);
    -webkit-background-clip: text;
    color: transparent;
    vertical-align: middle; /* Align text with the dot */}
html {

    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1rem; /* Responsive font size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem; /* Responsive font size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* try #f0f3fa */}
.hamburger-menu {
    display: none; /* Initially hidden */
    cursor: pointer; /* Change mouse pointer on hover */
}

.hamburger-menu .bar {
    width: 29px; /* Width of the bar */
    height: 3px; /* Height of the bar */
    background-color: white; /* Color of the bar */
    margin: 3px 0; /* Space between bars */
    transition: 0.4s; /* Smooth transition for bar transform */}
h1{
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    background: white; /* default white;*/
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1.5vw;}
h2{
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    background: white; /* default white;*/
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1.5vw;
}
.responsive-openai-badge{
    max-width: 22%;
    height: auto;
    padding-left: 4px;
}
header {
    display: flex;
    justify-content: space-between; /* Adjust spacing */
    align-items: center; /* Align items vertically */
    background-color: #333;
    padding: 0;
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}

header2 {
    display: flex;
    justify-content: space-evenly; /* Adjust spacing */
    align-items: center; /* Align items center */
    background-color: #f2f2f2; /*  default #333; */
    padding: 0;
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.header-top {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    /* ... other styles as needed ... */}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 0;
    width: 100%;
    margin-top: auto; /* Ensures footer sticks to bottom */}
footer1 {
    background-color: white;
    color: Black;
    text-align: center;
    font-size: 1rem; /* Responsive font size */
    width: 80%;
    max-width: 80%; /* Maximum width of the container */
    margin: auto; /* Centers the container */
    word-wrap: break-word; /* Breaks long words to prevent overflow */
    padding: 10px; /* Adds some padding inside the div */
    box-sizing: border-box; /* Includes padding in the element's total width */

    /* margin-top: auto; /* Ensures footer sticks to bottom */}

img {
    height: auto;  /* this may override images with no css*/
    width: auto;}

header img {
    height: auto;  /* default was max-height 50px; */
    width: auto;}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;}

nav li {
    display: inline;
    margin-right: 20px;}

nav a {
    color: white;
    text-decoration: none;}

.main-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensures that child elements fill the height */
    width: 100%;
    max-width: 2800px;
    margin: 20px 10px;}

.chart-container {  /* this div doesnt actually contain the chart but the context */
    width: 100%;
    max-width:100%;
    margin: 20px auto;
    padding: 10px;
    background: white; /* default white;*/
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height:auto; /* EXPERIMENTAL */
}

.chart-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 0 24px;
    box-sizing: border-box;   /* padding doesn’t increase visual width */
    /*overflow: hidden;         /* clip any canvas/legend bleed */
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative; /* For positioning the legend */}
.chart-legend-container,#screenshot-container img {
    text-align: left; /* Centers the left */
    max-width: 95%; /* Maximum width of the container, default is 90% */
    margin: auto; /* Centers the container */
    word-wrap: break-word; /* Breaks long words to prevent overflow */
    padding: 5px; /* Adds some padding inside the div, default is 50px */
    box-sizing: border-box; /* Includes padding in the element's total width */
    font-size: 1.5vw;}
.container { /* UNUSED>*/
    max-width: 100%; /* Adjust the maximum width as needed */
    margin: 0 auto; /* This centers the container horizontally */
    background: #4b7bd3;
    padding: 0 0px; /* Add padding for spacing if needed */
    /* Add any other styles you want */}
    /* Adjust the chart container with padding */
#container {
    position: relative;
    height: 750px; /* Adjust height as needed TRY AUTO*/
    width: 100%; /* Subtract padding from total width */
    margin: 0 auto; /* Center the container */
    padding: 0 0px; /* Add 20px padding on both sides */
    background-color: transparent;
}

#container {
  touch-action: pan-y pinch-zoom;   /* vertical scroll + pinch allowed; horizontal drag still pans chart */}
html, body {
  overflow-y: auto;
  overscroll-behavior-y: contain;   /* reduces scroll chaining “stickiness” on mobile */}

/* ── Don’t let the watermark block scrolling ── */
#container > div[style*="background-image"] {
  pointer-events: none;}

#legend {
    position: absolute;
    top: 5px;
    left: 30px;
    /*transform: translateX(-68%); /* move towards left the legend */
    background-color: rgba(255, 255, 255, 0.593);
    padding: 25px;
    border-radius:10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1.2vw;
    max-width: 85%; /* Limit the width to prevent overflow */
    z-index: 10; /* Higher than other elements */}
#context-info {
    text-align: center; /* Centers the text */
    max-width: 95%; /* Maximum width of the container */
    margin: auto; /* Centers the container */
    word-wrap: break-word; /* Breaks long words to prevent overflow */
    padding: 7px; /* Adds some padding inside the div - default was 50 */
    box-sizing: border-box; /* Includes padding in the element's total width */
    font-size: 1.5vw;}
#context-info img{
    max-width: 19%;
    height: auto;
    padding-left: 1%;}
.widget-row {
    display: flex;
    flex-direction: column; /* Stack widgets vertically */
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;}
.widget-row1 {
    display: flex;
    flex-direction: column; /* Stack widgets vertically */
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;}

.right-column {
    flex: 1;
    padding: 10px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left: 20px;}

.forexbrokers-container {
    width: 95%;
    margin: 20px auto;
    padding: 10px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}

.fx-logo img {
    width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;}

.fx-logo p {
    text-align: center;
    margin-top: 10px;
    margin: 10px 0;  /* Add vertical margin */
    font-size: 1.75vw; /* Responsive text size */
    padding: 0 20px; /* Add horizontal padding */
    box-sizing: border-box; /* Include padding in width calculation */
    word-wrap: break-word; /* Allows words to break and wrap onto the next line */
}

.sentiment-widget,.tradingview-widget-container {
    flex-basis: 100%;
    width: 100%;
    height: auto;
    min-height:fit-content;/* EXPERIMENTAL*/
    overflow: hidden;
    margin: 20px 0; /* Adjust the top and bottom margin */
    padding: 10px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.widget {
    flex-basis: 100%; /* Widgets take full width */
    width: 100%;
    height: auto;
    margin: 10px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 10px;
    justify-content: center;}

.flex-container {  /* DELETE IF NOT USED */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;}

#timeFrameSelect, #currencyPairSelect {
  font-size: 16px;
  padding: 12px 16px; /* default 12px and 16px */
  border: none;
  border-radius: 4px;
  color: white;
  background-color: #9f54b9; /* default #9f54b9 */}

button {
  background-color: #4CAF50;
  border: none;
  color: rgba(255, 255, 255, 1);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;}
#analysis-results,#feedback-container {
    font-family: 'Arial', sans-serif;
    color: #333;
    /*line-height: 1.6; /*consider changing or removing*/
    font-size: 1.15vw;
    justify-content: center;
    text-align: left;
    word-wrap: normal;
    width:95%;
}
@media screen and (max-width: 768px){  

  .chart-wrapper { padding: 0 14px; }

.padding-wrapper{
  padding:0%

}
    #watchlist-table {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 10px 0;
      }
    
      #watchlist-table thead {
        display: none;
      }
    
      #watchlist-table tr {
        background: #ffffff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        padding: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        font-size: 14px;
      }
    
      #watchlist-table td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 13px;
        border: none;
        padding: 0;
      }
    
      #watchlist-table td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 2px;
        color: #333;
      }
    
      #watchlist-table audio {
        width: 100%;
      }
    
      .remove-btn {
        width: 100%;
        margin-top: 6px;
      }
    
    
      #watchlist-table audio {
        width: 100%;
      }

    @keyframes flashRed {
        0%, 100% { background-color: rgba(142, 120, 120, 0.501); }
        50% { background-color: red; }
      }
      
      .flash-background {
        animation: flashRed 4s infinite; /* Adjust the duration (1s) as needed */
      }

    #currencyPairSelect, #timeFrameSelect {
        
        width: 44vw;          /* two selects fit on one row */
        max-width: 46%;
        min-width: 120px;
        padding: 8px 10px;
        font-size: 14px;
        /*margin-right: 5px; /* Add space to the right of the select NOT SURE IF USED*/
        /*margin-left: 5px; /* Add space to the left of the select */
        /*z-index: 2;*/
    
    }

    .open-chart-btn {
        width: auto;
        padding: 8px 12px;
        background-color: #4CAF50;
        color: white;
        /*border: none;*/
       /* border-radius: 6px; /* Rounded corners */
       /*cursor: pointer;*/
        /*z-index: 2;*/
        font-size: 14px;
        margin-right: 0; 
    }
    
    .select-asset-label, .select-timeframe-label { /* Adjust class names as necessary NOT SURE IF USED */
        padding-right: 10px; /* Adds space to the right of the label */
        padding-left: 10px; /* Adds space to the left of the label */
        color: white;
        display: none;
    }

    .selection-row button{
      margin:0;
      padding:6px 10px;
      font-size:12px;
      line-height:1.1;
      border-radius:8px;
      white-space:nowrap;
    }

    /* To ensure the last button doesn't have extra margin on the right */
    .selection-row button:last-child {
            margin-right: 2px; /* Adds space to the right of the button default was 0 */
    }

    /* ── Compact utility bar: wraps into 1–2 rows with tiny spacing ── */
.selection-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;                 /* allow wrap */
  column-gap:6px;                 /* small horizontal gap */
  row-gap:2px;                    /* very small vertical gap */
  padding:2px 6px;                /* minimal padding */
}

/* every control behaves like a small pill */
.selection-row > *{
  flex:0 0 auto;                 /* no stretch, wrap naturally */
  margin:0 !important;           /* kill old margins */
}

/* small, dense buttons */
.selection-row button{
  padding:5px 8px !important;
  line-height:1.1 !important;
  font-size:12px !important;
  border-radius:8px;
}

    @media (max-width: 480px){
      #themeToggleBtn::before{ content:"🌓 "; }
      #toggleLegendBtn::before{ content:"📋 "; }
      .open-chart-btn::before{ content:"➕ "; }
      /* optionally hide the words but keep icons: */
       /* If you want only icons, uncomment the 3 lines below */
      /* #themeToggleBtn, #toggleLegendBtn, .open-chart-btn{ font-size:0; }
         #themeToggleBtn::before, #toggleLegendBtn::before, .open-chart-btn::before{ font-size:14px; } */
    }
    
    
    
    
  
    
      /* hide long label to save room */
      .select-asset-label{ display:none; }
    
      /* optional: make selects narrower on mobile */
      #currencyPairSelect,
      #timeframeSelect{
        max-width: 140px;      /* adjust to taste */
      }
    
      /* audio group compact */
      #top-audio-player .controls-group,
      #top-audio-player .volume-group{
        display:inline-flex;
        align-items:center;
        gap:6px;
      }
    
   
    #sentimentIndicator {
        position: absolute;
        left: 45%;
        top: 60%;    
        transform: translate(-50%, -55%);
        z-index: 2; /* Ensure it's above the chart but below interactive elements */
        padding: 5px 10px; /* Compact padding */
        background: rgba(255, 255, 255, 0.75); /* Semi-transparent background for legibility */
        border-radius: 15px; /* Rounded corners for a polished look */
        font-size: 0.80rem; /* Smaller font size for compactness */
        color: black; /* Text color */
        pointer-events: none; /* Allows interaction with chart elements beneath */
        white-space: wrap; /*  ensuring compactness */
        font-family: 'Orbitron', sans-serif; /* Futuristic font */
    }

   .legend-item {
        padding: 2px 5px; /* Reduced padding */
        font-size: 12px; /* Smaller font size */
        min-width: 50px; /* Reduced minimum width */
   }

    #sentimentLegend {
        flex-direction: row; /* Stacks legend items vertically in narrow screens */
        align-items: center; /* Centers items when stacked */
        flex-wrap: wrap; /* Allows items to wrap in smaller screens */
    }
         
    #container {
        position: relative; 
        height: 650px; /* Adjust height as needed */
        width: 100%; /* Subtract padding from total width */
        margin: 0 auto; /* Center the container */
        padding: 0 0px; /* Add 20px padding on both sides */
        background-color: transparent;

    }
    #feedback-container {
        font-family: 'Arial', sans-serif;
        color: #333;
        /*line-height: 1.6; /*consider changing or removing*/
        font-size: 1.15vw;
        justify-content: center;
        text-align: left;
        word-wrap: normal;
        width:95%; 
    }
        
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 3vw; /* Responsive font size */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8f9fa; /* try #f0f3fa */
    }                         

    footer1{
        text-align: center; /* Centers the text */
        font-size: 5vw;
        max-width: 80%; /* Maximum width of the container */
        margin: auto; /* Centers the container */
        word-wrap: break-word; /* Breaks long words to prevent overflow */
        padding: 10px; /* Adds some padding inside the div */
        box-sizing: border-box; /* Includes padding in the element's total width */
    }
    header {
        display: flex;
        justify-content: space-between; /* Adjust spacing */
        align-items: center; /* Align items vertically */
        background-color: #333;
        padding: 0;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .header-top {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
        /* ... other styles as needed ... */
    }
    header2 {
        display: flex;
        justify-content: space-evenly; /* Adjust spacing */
        align-items: center; /* Align items center */
        background-color: #f2f2f2; /*  default #333; */
        padding: 0;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }  
    .hamburger-menu {
        display: block; /* Show hamburger on small screens */
        align-items: center;
    }
    .hamburger-menu .bar {
        width: 29px; /* Width of the bar */
        height: 3px; /* Height of the bar */
        background-color: white; /* Color of the bar */
        margin: 3px 0; /* Space between bars */
        transition: 0.4s; /* Smooth transition for bar transform */
    }

    nav ul {
        display: none; /* Hide the navigation menu initially */
        flex-direction: column; /* Stack the links vertically */
        align-items: center;
    }

    nav ul li {
        display: block; /* Stack list items vertically */
        margin: 10px 0; /* Space between menu items */
        align-items: center;
    }

    nav ul li a {
        display: block; /* Links take up full width of the container */
        text-align: center; /* Center align text */
        align-items: center;
    }

    H1{
        font-size: 5vw; /* Even smaller font size on very small screens */
        align-items: center;
        text-align: center; /* Centers the text */
    }
    #legend {
        position: absolute;
        top: 0px;
        left: 3%;
        transform: translateX(-8%); /* Left of the Center */
        background-color: rgba(255, 255, 255, 0.8);
        padding: 25px;
        border-radius:10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        font-size: 2.55vw;
        max-width: 85%; /* Limit the width to prevent overflow */
        white-space: nowrap; /* Prevents text wrapping */
        /*overflow: hidden; /* Hides overflow CONSIDERING REMOVING  */
        text-overflow: ellipsis; /* Adds ellipsis for overflowed text CONSIDERING REMOVING */

    }
    .widget-row ,.widget-row1{
        flex-direction: column;
        align-items: center;
    }

    .sentiment-widget,.tradingview-widget-container {
        flex-basis: 100%; /* Full width on smaller screens */
        margin: 10px;
        padding: 10px;
    }

    .chart-container, .right-column {
        width: 100%;
        margin: 0;
    }

    .widget {
        height: auto; /* Adjust height for smaller screens */
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav li {
        margin-bottom: 10px;
    }

    .fx-logo p {
        font-size: 3.5vw; /* Larger text size on smaller screens */
        padding: 0 20px; /* Add horizontal padding */
        box-sizing: border-box; /* Include padding in width calculation */
        word-wrap: break-word; /* Allows words to break and wrap onto the next line */
    
    }

    .widget-row,.widget-row1, .sentiment-widget,.tradingview-widget-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .widget, .sentiment-widget, .tradingview-widget-container {
        flex: 1;
        min-width: 0; /* Allows the widget to shrink below its base size */
        width: 100%; /* Full width of the container */
        align-items: center;
        height: fit-content; /* EXPERIMENTAL I think this is working */
        }

    /* Adjustments for text over the chart */
    #context-info,#screenshot-container img, audio {
        text-align: center; /* Centers the text */
        max-width: 95%; /* Maximum width of the container - default was 80 */
        margin: initial; /* Centers the container */
        word-wrap: break-word; /* Breaks long words to prevent overflow */
        padding: 5px; /* Adds some padding inside the div = default was 10*/
        box-sizing: border-box; /* Includes padding in the element's total width */
        font-size: 4.5vw; /*  -default was 5vw */
        }
    .screenshot-link{
        text-align: center; /* Centers the text */
        max-width: 90%; /* Maximum width of the container */
        margin: auto; /* Centers the container */
        word-wrap: break-word; /* Breaks long words to prevent overflow */
        padding: 10px; /* Adds some padding inside the div */
        box-sizing: border-box; /* Includes padding in the element's total width */

        }
    /* Adjustments for widgets to ensure they expand and contract uniformly */
    .widget, .sentiment-widget, .tradingview-widget-container {
        flex-basis: 100%; /* Ensures full width utilization */
        box-sizing: border-box; /* Includes padding and border in the element's total width and height */
        align-items: center;
        /* Other styling as required */
        }

    /* Remove min-width constraints to allow for more fluid responsiveness */
    .main-content, .chart-container, .widget-row,.widget-row1, .forexbrokers-container, .widget {
        min-width: 0; /* Removes any minimum width constraint */
        align-items: center;
        /* Other styling as required */
        }
    .responsive-openai-badge{
        max-width: 40%;
        height: auto;
        padding-left: 8px; 
    }
    #context-info img{
        max-width: 30%;
        height: auto;
        padding-left: 1%;
    }
    #timeFrameSelect,#currencyPairSelect {
        font-size: 14px;
        padding: 10px 14px;
    }

    button,ttsAudio {
        font-size: 14px;
        padding: 12px 24px;
    }

    p{
        font-family: 'Arial', sans-serif;
        color: #333;
        line-height: 1.6; /*consider changing or removing*/
        font-size: 4.5vw; 
    }
    .chart-legend-container,#feedback-container{
        text-align: left;
        max-width: 100;
        margin: auto;
        word-wrap: break-word;
        padding: 2px;
        box-sizing: border-box;
        font-size: 4.5vw;
    }

    #analysis-results {
        text-align: left;
        max-width: 100;
        margin: auto;
        word-wrap: break-word;
        padding: 6px;
        box-sizing: border-box;
        font-size: 4.5vw;
    }

}

@media screen and (max-width: 480px) {

    @keyframes flashRed {
        0%, 100% { background-color: rgba(116, 89, 89, 0.641); }
        50% { background-color: red; }
      }
      
      .flash-background {
        animation: flashRed 4s infinite; /* Adjust the duration (1s) as needed */
      }

    .select-asset-label,
    .select-timeframe-label {
        display: none;
        color: white;
    } 
    #pieChartCanvas {
        max-width: 100%; /* Allows the canvas to fill the container on smaller screens */
    }
    /* Hide the linear gradient legend */
      /*   #sentimentLegend {*/
       /*  display: none;*/
     /*}*/

    /* Additional styles for the pie chart container */
    .pieChartContainer {
        display: block; /* Initially set to none, shown only on small screens */
        /* Styling to make it futuristic */
    }

       
    #sentimentLegend {
        flex-direction: row; /* Keeps items in a row but allows them to wrap */
    }
    .legend-item {
        flex: 1 1 auto; /* Allows items to grow to fill the space; adjust as needed */
        min-width: 100px; /* Adjust based on your design for smaller screens */
    }

    #sentimentIndicator {
        position: absolute;
        left: 40%;
        top: 60%;
        transform: translate(-50%, -55%);
        z-index: 2; /* Ensure it's above the chart but below interactive elements */
        padding: 5px 10px; /* Compact padding */
        background: rgba(255, 255, 255, 0.25); /* Semi-transparent background for legibility default is 0.75 */
        border-radius: 15px; /* Rounded corners for a polished look */
        font-size: 0.80rem; /* Smaller font size for compactness */
        color: black; /* Text color */
        pointer-events: none; /* Allows interaction with chart elements beneath */
        white-space: wrap; /*  ensuring compactness */

    }

    #container {
        position: relative; 
        height: 500px; /* Adjust height as needed */
        width: 100%; /* Subtract padding from total width */
        margin: 0 auto; /* Center the container */
        padding: 0 0px; /* Add 20px padding on both sides */
        background-color: transparent;
          
    }
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 5vw; /* Responsive font size */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8f9fa; /* try #f0f3fa */
    }
    footer1{
        text-align: center; /* Centers the text */
        max-width: 80%; /* Maximum width of the container */
        margin: auto; /* Centers the container */
        font-size: 5vw;
        word-wrap: break-word; /* Breaks long words to prevent overflow */
        padding: 10px; /* Adds some padding inside the div */
        box-sizing: border-box; /* Includes padding in the element's total width */
        }
    /* Further adjustments for very small screens */
    body, .main-content, .chart-container, .widget-row, .widget-row1, .right-column, .widget {
        padding: 5px; /* Reduced padding */
        margin: 5px; /* Reduced margin */
    }
    #context-info {
        font-size: 4vw; /* Even smaller font size on very small screens */
        align-items: center;
        text-align: center; /* Centers the text */
        max-width: 98%; /* Maximum width of the container - default was 80 */
        margin: auto; /* Centers the container */
        word-wrap: break-word; /* Breaks long words to prevent overflow */
        padding: 3px; /* Adds some padding inside the div = default was 10*/
        box-sizing: border-box; /* Includes padding in the element's total width */
        
    }
    #legend {
        font-size: 3.25vw; /* smaller fontsize for smaller screens so that legend doesnt overwhelm chart */
        padding: 1px; /* Increased padding */
    }
    H1{
        font-size: 5vw; /* Even smaller font size on very small screens */
        align-items: center;
        text-align: center; /* Centers the text */
    }
    H2{
        font-size: 5vw; /* Even smaller font size on very small screens */
        align-items: center;
        text-align: center; /* Centers the text */

    }
    .hamburger-menu {
        display: block; /* Show hamburger on small screens */
        align-items: center;
    
    }
    header {
        display: flex;
        justify-content: space-between; /* Adjust spacing */
        align-items: center; /* Align items vertically */
        background-color: #333;
        padding: 0;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .header-top {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
        /* ... other styles as needed ... */
    }

    .hamburger-menu {
        display: block; /* Show hamburger on small screens */
        align-items: center;
    }
    .hamburger-menu .bar {
        width: 29px; /* Width of the bar */
        height: 3px; /* Height of the bar */
        background-color: white; /* Color of the bar */
        margin: 3px 0; /* Space between bars */
        transition: 0.4s; /* Smooth transition for bar transform */
    }

    nav ul {
        display: none; /* Hide the navigation menu initially */
        flex-direction: column; /* Stack the links vertically */
        align-items: center;
    }

    nav ul li {
        display: block; /* Stack list items vertically */
        margin: 10px 0; /* Space between menu items */
        align-items: center;
    }

    nav ul li a {
        display: block; /* Links take up full width of the container */
        text-align: center; /* Center align text */
        align-items: center;
    }
    .responsive-openai-badge{
        max-width: 40%;
        height: auto;
        padding-left: 12px; 
    }
    #context-info img{
        max-width: 38%;
        height: auto;
    }
    #timeFrameSelect,#currencyPairSelect {
    font-size: 12px;
    padding: 8px 12px;
    }

    button,ttsAudio  {
    font-size: 12px;
    padding: 10px 20px;
    }
    #analysis-results {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6; /*consider changing or removing*/
    font-size: 4.5vw; 
    padding:6%;
    width: 95%;
   }
   p{
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6; /*consider changing or removing*/
    font-size: 4.5vw; 
   }
   .chart-legend-container {
    text-align: left;
    max-width: 100%;
    margin: auto;
    word-wrap: break-word;
    padding: 10px;
    box-sizing: border-box;
    font-size: 4.5vw;
   }
}

/*─────────────────────────────────────────────────────────────
  Responsive width for EVERY fg-mode-toggle EXCEPT the header
  (#aiw-mode-tabs is the big “AI-Watchlist / Heatmap” pill)
─────────────────────────────────────────────────────────────*/

/* --- SCROLL RESCUE OVERRIDES (place at very end of CSS) --- */

/* 1) Root should not be a flex container. Let the page flow normally. */
html, body {
  display: block !important;
  position: static !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y pinch-zoom !important; /* allow vertical scroll + pinch */
  overscroll-behavior: auto !important;}

/* 2) Make sure nothing full-screen and fixed blocks scroll by accident */
#fg-toast { pointer-events: none !important;}
#fg-toast.show { pointer-events: auto !important;}

/* 3) Lightweight-charts + canvas: allow page to scroll when swiping vertically */
#container,
#container canvas,
.tv-lightweight-charts,
.tv-lightweight-charts canvas {
  touch-action: pan-y pinch-zoom !important;}

/* 4) Sentiment chip should never intercept scroll/taps */
#sentimentIndicator,
#sentimentChip,
.sentiment-chip {
  pointer-events: none !important;
  z-index: 3 !important; /* under legend/tooltips; change if you need */}

/* 5) Keep legend above chip so tooltips remain interactive */
#legend { z-index: 20 !important;}

/* 6) Kill any stray full-screen fixed overlays if they exist */
#wc-thumb { pointer-events: none !important;} /* it’s fixed; don’t let it trap input */

/* 7) Safety: avoid viewport locks hidden in media queries */
@media (max-width: 99999px) {
  html, body {
    overflow-y: auto !important;
    height: auto !important;
  }
}

/* ==== DASHBOARD MOBILE GUTTER REDUCER (scoped) ==== */
 

 
  
  
 /* body.dashboard .panel,*/
 /* body.dashboard .fg-panel {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;   /* tighter gutters */
    /*   padding-right: 8px !important;
}*/

 
 
 /* ───────── Dashboard/header hotfixes (scoped & safe) ───────── */

/* A) Header nav: always visible on desktop; hidden on mobile until hamburger opens it */
@media (min-width: 769px) {
  header nav ul { display: flex !important; }
}
@media (max-width: 768px) {
  header nav ul { display: none; } /* baseline; JS will flip it to flex */
}

/* B) Limit the dark "Pro" toggle styling to the BIG header tab only */
/*.pro #aiw-mode-tabs .fg-toggle-track { background:#0f1322; border-color:#242a44;}
/*.pro #aiw-mode-tabs .fg-toggle-thumb  { background:#212844;}

/* …and restore the light palette for all other toggles on the dashboard */
.dashboard .fg-toggle-track { background:#e8f5e9 !important; border:1px solid #cce0d1 !important; color:#222 !important;}
.dashboard .fg-toggle-thumb  { background:#228B55 !important;}

/* C) Prevent pills from spilling out of narrow cards */
/*#aiw-mode-tabs,
.fg-mode-toggle { max-width: 100%; margin-inline: auto; box-sizing: border-box;}

/* (Optional) clip any accidental overflows inside Pro cards */
.pro .panel { overflow: hidden;}

@media (max-width: 768px) {
  header nav ul { display:none; flex-direction:column; align-items:center; }
  header nav li { display:block; margin:10px 0; }
  header nav li a { display:block; text-align:center; }
}
  

/* inline, compact audio; stays short even when it wraps */
#top-audio-player{ order:1; min-width:220px;}
.custom-audio-player{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  width:auto;                    /* no full-width block */}
.custom-audio-player .play-btn{
  width:auto;
  padding:5px 8px !important;
  font-size:12px !important;}
.controls-group{ display:inline-flex; align-items:center; gap:6px;}
.seek-bar{ width:110px; max-width:110px;}
.timestamp{ font-size:11px; min-width:60px; text-align:right;}
.volume-group{ display:inline-flex; align-items:center; gap:6px;}
.volume-icon{ display:none;}              /* hide “Volume:” word */
.volume-bar{ width:70px; max-width:70px;}

/* ── Compact utility bar: wraps into 1–2 rows with tiny spacing ── */
.selection-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;                 /* allow wrap */
  column-gap:6px;                 /* small horizontal gap */
  row-gap:2px;                    /* very small vertical gap */
  padding:2px 6px;                /* minimal padding */}

/* every control behaves like a small pill */
.selection-row > *{
  flex:0 0 auto;                 /* no stretch, wrap naturally */
  margin:0 !important;           /* kill old margins */}

/* small, dense buttons */
.selection-row button{
  padding:5px 8px !important;
  line-height:1.1 !important;
  font-size:12px !important;
  border-radius:8px;}

/* lets the two selects sit side-by-side, then wrap if tight */
#currencyPairSelect, #timeFrameSelect{
  flex:1 1 120px;                /* grow a bit, min ~160px */
  max-width:180px;
  padding:6px 8px !important;
  font-size:12px !important;}

@media (max-width: 768px){
  /* order within the wrapping flex line */
  #top-audio-player{ order:1; }
  #currencyPairSelect{ order:2; }
  #timeFrameSelect{   order:3; }
  .open-chart-btn{    order:4; }          /* “Open New Chart” */
  #themeToggleBtn{    order:5; }
  #toggleLegendBtn{   order:6; }

  /* extra-tight on phones */
  .selection-row{ column-gap:6px; row-gap:2px; padding:2px 6px; }
  .selection-row button{ padding:5px 8px !important; font-size:12px !important; }
}

 

/* Emoji prefixes for quick recognition */
#themeToggleBtn::before{ content:"🌓 ";}
#toggleLegendBtn::before{ content:"📋 ";}
.open-chart-btn::before{ content:"➕ ";}

/* Inline, compact player (no stacking) */
 
.custom-audio-player{ display:inline-flex !important; align-items:center; gap:8px; width:auto;}
.custom-audio-player .play-btn{ width:auto; padding:6px 10px; font-size:12px;}

/* Keep controls narrow */
.custom-audio-player .controls-group{ display:inline-flex; align-items:center; gap:6px;}
.seek-bar{ width:120px; max-width:120px;}
.timestamp{ font-size:12px; min-width:70px; text-align:right;}

/* Volume group tight */
.volume-group{ display:inline-flex; align-items:center; gap:6px;}
.volume-icon{ font-size:14px;}        /* shows 🔊 text you already have */
.volume-bar{ width:100px; max-width:100px;}

/* Phones: go even smaller; hide “Volume:” label and rely on emoji */
@media (max-width: 600px){
  .seek-bar{ width:90px; max-width:90px; }
  .timestamp{ font-size:11px; min-width:60px; }
  .volume-icon{ display:none; }           /* remove 'Volume:' word */
  .volume-bar{ width:70px; max-width:70px; }
  .custom-audio-player .play-btn{ padding:5px 8px; font-size:11px; }
}
@media (max-width: 768px){
  #currencyPairSelect, #timeFrameSelect{
    max-width:140px !important;
    padding:6px 8px !important;
    font-size:12px !important;
  }
}
/* ======================= Compact Toolbar v2 ======================= */
/* Design tokens for tight UI */
:root{
  --ui-gap-x:6px;
  --ui-gap-y:2px;
  --ui-pad:6px;
  --ui-h:32px;                 /* control height on mobile */}

/* Kill the old layout */
.selection-row{ all: unset;}  /* reset previous declarations */

/* New, ultra-compact layout */
.selection-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;                     /* wrap into 2 rows when needed */
  gap: var(--ui-gap-y) var(--ui-gap-x);
  padding: 2px 6px;                   /* tiny vertical footprint */}

/* Every child = small pill */
.selection-row > *{
  flex:0 0 auto;
  margin:0 !important;}

/* Buttons – dense, neutral, modern */
.selection-row button{
  height: var(--ui-h);
  padding: 0 10px !important;
  line-height:1 !important;
  font-size:12px !important;
  border-radius:10px;
  border:1px solid #E5E7EB;
  background:#F8FAFC;
  color:#0F172A;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);}

/* Selects – same height as buttons */
#currencyPairSelect, #timeFrameSelect{
  appearance:none;
  height: var(--ui-h);
  padding: 0 10px !important;
  font-size:12px !important;
  border-radius:10px;
  border:1px solid #E5E7EB;
  background:#98989964 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2399A1B3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 8px center/10px 6px;
  color:#0F172A;
  flex:1 1 140px;                  /* sit side-by-side, then wrap */
  max-width: 180px;}

/* Audio – inline & very small */
#top-audio-player{ order:1;}
.custom-audio-player{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  width:auto;
  height: var(--ui-h);}
.custom-audio-player .play-btn{
  height: var(--ui-h);
  padding: 0 10px !important;
  font-size:12px !important;
  border-radius:10px;
  border:1px solid #E5E7EB;
  background:#F8FAFC;}
.custom-audio-player .controls-group{ display:inline-flex; align-items:center; gap:6px;}
.seek-bar{ width:120px; max-width:120px; height:4px;}
.timestamp{ font-size:11px; min-width:58px; text-align:right;}
.volume-group{ display:inline-flex; align-items:center; gap:6px;}
.volume-icon{ display:none;}              /* no “Volume:” text */
.volume-bar{ width:80px; max-width:80px; height:4px;}

/* Order so first row is Play + selects; others drop to line 2 */
#currencyPairSelect{ order:2;}
#timeFrameSelect{   order:3;}
.open-chart-btn{    order:4;}
#themeToggleBtn{    order:5;}
#toggleLegendBtn{   order:6;}

/* Tighten the whole header block */
.selection-row + *{ margin-top:6px !important;} /* less space before chart */

/* ----------------------- Mobile refinements ----------------------- */
@media (max-width: 768px){
  :root{ --ui-h:30px; }
  .selection-row{ gap: var(--ui-gap-y) 6px; padding:2px 6px; }
  #currencyPairSelect, #timeFrameSelect{ max-width:150px !important; }
  .seek-bar{ width:95px; }
  .volume-bar{ width:70px; }
}

/* icon-only secondary actions on small phones */
@media (max-width: 420px){
  .open-chart-btn, #themeToggleBtn, #toggleLegendBtn{ font-size:0 !important; padding:0 8px !important;background-color: #e8eee8e9; }
  .open-chart-btn::before{ content:"➕"; font-size:14px; }
  #themeToggleBtn::before{ content:"🌓"; font-size:14px; }
  #toggleLegendBtn::before{ content:"📋"; font-size:14px; }

  .seek-bar{ width:78px; }
  .timestamp{ display:none; }           /* hide time readout */
  .volume-group{ display:none; }        /* hide volume on xs to save height */
}

/* Prevent any stray rules from re-enlarging things */
.selection-row button,
#currencyPairSelect, #timeFrameSelect,
.custom-audio-player .play-btn { box-shadow:none;}

/* Hide the "Select Asset" and "Select Timeframe" text everywhere */
.select-asset-label,
.select-timeframe-label {
  display: none !important;}

/* Make "Show Legend" look like the other light pills */
#toggleLegendBtn{
  height: var(--ui-h, 32px);
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #F8FAFC;     /* light, not dark */
  color: #0F172A;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);}
#toggleLegendBtn:hover{
  background: #EEF2F7;}
 

/* ==== TOP BAR LAYOUT: snap to two neat rows without overlap ==== */

/* 1) Make the audio stay on one line (no internal wrap) */
#top-audio-player .custom-audio-player{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;        /* prevents Play/slider from breaking */}

/* Keep its inner groups inline too */
#top-audio-player .controls-group,
#top-audio-player .volume-group{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;}

/* Tighten the range widths so the row stays shallow */
#top-audio-player .seek-bar{ width: 120px; max-width:120px;}
#top-audio-player .volume-bar{ width: 100px; max-width:100px;}
#top-audio-player .timestamp{ font-size: 12px; min-width: 70px; text-align: right;}

/* 2) Utility row: wrap nicely with tiny spacing (no collisions) */
.selection-row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;                          /* gives the 2nd line room under slider */
  padding: 2px 6px;}

/* 3) Make the audio a “block” on mobile so the rest drops below it */
@media (max-width: 768px){
  #top-audio-player{
    flex: 1 0 100% !important;           /* consume full row */
    min-width: 0 !important;
  }
}

/* 4) Ensure legend/theme buttons don’t sit under the slider */
#themeToggleBtn, #toggleLegendBtn{
  align-self: center;                     /* respect row height */
  margin-top: 2px;                        /* tiny breathing room */}

/* 5) Match "Show/Hide Legend" to the light pill style */
#toggleLegendBtn{
  height: var(--ui-h, 32px);
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #F8FAFC;                   /* light, like the other pills */
  color: #0F172A;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);}
#toggleLegendBtn:hover{ background:#EEF2F7;}

/* 6) Hide the "Select Asset / Select Timeframe" text everywhere */
.select-asset-label, .select-timeframe-label{ display:none !important;}

/* 7) Keep selects compact so the top bar stays modern/clean */
#currencyPairSelect, #timeFrameSelect{
  flex: 0 1 auto;
  max-width: 180px;
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 10px;}
/* ===== Collapse the space between header and the top controls ===== */

/* reduce header bottom space on mobile/tablet */
@media (max-width: 1024px){
  header{ padding-bottom: 4px !important; }
}

/* the first panel/row under the header should have tiny top padding */
header + .fg-panel,
header + .selection-row,
header + #utilityBar{
  padding-top: 6px !important;   /* was 16px inside .fg-panel */
  margin-top: 0 !important;}

/* mobile: even tighter */
@media (max-width: 768px){
  header + .fg-panel,
  header + .selection-row,
  header + #utilityBar{
    padding-top: 4px !important;
  }
}

/* make sure the audio block itself doesn’t re-introduce space */
#top-audio-player,
#top-audio-player .custom-audio-player{
  margin-top: 0 !important;}

/* the whole control row shouldn’t add its own top margin either */
.selection-row{
  margin-top: 0 !important;
  padding-top: 0 !important;}

/* ── Remove the white band above the audio row (mobile-first) ── */
@media (max-width: 768px){
  /* Make header2 the containing block so child margins can't escape */
  header2{
    padding-top: 4px !important;    /* tiny, controlled spacing */
    margin-top: 0 !important;
    gap: 4px;                        /* compact internal spacing */
    display: flex;                   /* you already use flex; keep it explicit */
    flex-wrap: wrap;
    align-items: center;
    /* any of the three below prevents margin-collapsing—pick one */
    /* overflow: hidden; */          /* OR */
    /* display: flow-root; */        /* OR */
    border-top: 1px solid transparent;  /* harmless anti-collapse shim */
  }

  /* Ensure no child reintroduces a top margin */
  header2 > *{ margin-top: 0 !important; }
  header2 > :first-child{ margin-top: 0 !important; }
}

/* If your audio block has its own class/id, keep it tight everywhere */
#top-audio-player,
#top-audio-player .custom-audio-player{ margin-top: 0 !important;}

/* ── Make the audio rails denser on small screens ── */
@media (max-width: 768px){
  /* your custom player pieces */
  #top-audio-player .seek-bar{ height: 4px !important; }
  #top-audio-player .volume-bar{ height: 4px !important; }
  #top-audio-player .timestamp{ font-size: 11px !important; }
  #top-audio-player .play-btn{ padding: 4px 8px !important; font-size: 11px !important; }
}
header2 .selection-row,
header2 #top-audio-player { margin-top: 0 !important;}

/* Compact the top utility row (no extra white space) */
header2 .selection-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;              /* wrap into 2 rows when needed */
  justify-content:flex-start;
  column-gap:6px;              /* small horizontal gap */
  row-gap:2px;                 /* tiny vertical gap */
  padding:2px 6px !important;  /* slim inner padding */
  margin:2px 0 6px !important; /* kill big top margin */
  line-height:1.1;             /* prevents tall pills */}

/* Make sure children don’t re-introduce spacing */
header2 .selection-row > *{
  margin:0 !important;}

/* Tighter selects/buttons in the row */
header2 .selection-row select,
header2 .selection-row button{
  height: var(--ui-h, 32px);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;}

/* Audio stays compact inside the row */
header2 .selection-row .custom-audio-player{ gap:6px;}
header2 .selection-row .seek-bar{ width:110px; height:4px;}
header2 .selection-row .volume-bar{ width:80px;  height:4px;}
header2 .selection-row .timestamp{ font-size:11px;}

/* Phones: go ultra-dense */
@media (max-width: 600px){
  header2 .selection-row{
    column-gap:6px;
    row-gap:2px;
    padding:2px 4px !important;
    margin:2px 0 4px !important;
  }
  header2 .selection-row .seek-bar{ width:90px; }
  header2 .selection-row .volume-bar{ width:70px; }
  header2 .selection-row .play-btn{ padding:4px 8px; font-size:11px; }
}
/* ── kill the white gap above the utility row ── */

/* 1) Stop margin-collapsing at the top edge of header2 */
header2{
  overflow:hidden;                /* or: display:flow-root; */
  padding-top: 2px;               /* tiny breathing room */}

/* 2) Make the row itself ultra-compact */
header2 .selection-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  column-gap:6px;
  row-gap:2px;
  padding:2px 6px !important;
  margin:0 !important;            /* ← remove top/bottom margins */
  line-height:1.1;}

/* 3) Prevent any child from reintroducing spacing */
header2 .selection-row > *{ margin:0 !important;}

/* 4) Nuke default margins on audio + inputs (the big culprit) */
header2 .selection-row .custom-audio-player,
header2 .selection-row .custom-audio-player > *,
header2 .selection-row .play-btn,
header2 .selection-row .controls-group,
header2 .selection-row .volume-group,
header2 .selection-row input[type="range"],
header2 .selection-row button,
header2 .selection-row select{
  margin:0 !important;}

/* 5) Compact audio sizing */
header2 .selection-row .seek-bar{ width:110px; height:4px;}
header2 .selection-row .volume-bar{ width:80px; height:4px;}
header2 .selection-row .timestamp{ font-size:11px;}

/* 6) Phones: go even tighter */
@media (max-width:600px){
  header2{ padding-top:1px; }
  header2 .selection-row{ column-gap:6px; row-gap:2px; padding:2px 4px !important; }
  header2 .selection-row .seek-bar{ width:90px; }
  header2 .selection-row .volume-bar{ width:70px; }
  header2 .selection-row .play-btn{ padding:4px 8px; font-size:11px; }
}
/* --- Zero the header bar that holds the controls --- */
header2{
  display: grid !important;           /* simpler than the flex/column-reverse setup */
  grid-auto-flow: row;
  align-items: center;
  gap: 4px;                            /* tiny vertical breathing room */
  margin: 0 !important;                /* kill top gap */
  padding: 2px 8px !important;         /* just a couple pixels under the dark header */
  border: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;         /* stops top-margin collapse from first child */}

/* also make sure the dark header isn’t pushing it down */
header { margin-bottom: 0 !important;}

/* --- Make the controls row as compact as possible --- */
header2 .selection-row{
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  margin: 0 !important;                /* no top/bottom space */
  padding: 2px 6px !important;         /* tiny internal padding */
  line-height: 1.1;}

/* No child is allowed to reintroduce margins */
header2 .selection-row > *,
header2 .selection-row *{
  margin: 0 !important;}

/* Compact the audio bits (often the tallest item) */
header2 .selection-row .play-btn{ padding:4px 8px !important; font-size:11px !important;}
header2 .selection-row .seek-bar{ width:110px; height:4px;}
header2 .selection-row .volume-bar{ width:80px; height:4px;}
header2 .selection-row .timestamp{ font-size:11px; min-width:60px; text-align:right;}

/* Phones: go even tighter */
@media (max-width:600px){
  header2{ gap: 2px; padding: 1px 6px !important; }
  header2 .selection-row .seek-bar{ width:90px; }
  header2 .selection-row .volume-bar{ width:70px; }
}
/* Kill the legacy labels & any leftover placeholders in the top control bar */
header2 .selection-row .select-asset-label,
header2 .selection-row .select-timeframe-label,
header2 .selection-row label[for="currencyPairSelect"],
header2 .selection-row label[for="timeFrameSelect"],
header2 .selection-row .spacer,
header2 .selection-row br {
  display: none !important;      /* remove from flow */
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;}

/* If any pseudo-element is injecting text, kill it too */
header2 .selection-row .select-asset-label::before,
header2 .selection-row .select-timeframe-label::before,
header2 .selection-row label::before,
header2 .selection-row label::after {
  content: none !important;}





  /* ----------- attempt to fix right side cut off -----  */


  /* —— Fix mobile cutoff in header2 & selection row —— */
@media (max-width: 768px) {
  /* Let header2 size to the viewport and avoid clipping */
  header2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* Stop margin-collapsing WITHOUT clipping children */
    overflow: visible !important;         /* was hidden */
    display: flow-root !important;        /* establishes a new block formatting context */
    padding: 2px 6px !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  /* Make the row responsive, not fixed */
  header2 .selection-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    overflow: visible !important; /* allow children to wrap instead of clip */
  }

  /* Allow inner pills/inputs to actually shrink on one line */
  header2 .selection-row > * {
    min-width: 0 !important;
    flex: 0 0 auto; /* each control behaves like a pill */
    margin: 0 !important;
  }

  /* Make sure long text doesn’t force overflow */
  header2,
  header2 .selection-row {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* The legend occasionally overflows on very small screens; allow wrap */
  #legend {
    max-width: 100% !important;
    white-space: normal !important; /* you had nowrap in one mobile block */
    overflow: hidden;               /* just in case of filter/shadow spill */
    text-overflow: clip;
  }
}

/* === MOBILE GUTTER + LEFT-BIAS FIX (append at end) =================== */
@media (max-width: 768px) {
  :root { --gutter: 8px; }         /* unified, small side padding */
  /* If you want even tighter on 420px and below, bump to 6px there */
}
@media (max-width: 420px) {
  :root { --gutter: 6px; }
}

/* Make these containers use symmetric, compact side padding */
@media (max-width: 768px) {
  /* Top bar */
  header2 {
    padding-inline: var(--gutter) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;   /* avoid clipping */
  }
  header2 .selection-row {
    padding-inline: 0 !important;   /* keep pills tight (we already padded header2) */
    margin: 0 !important;
  }

  /* Chart shell + content blocks */
  .chart-container,
  .chart-wrapper,
  #context-info,
  #analysis-results,
  #feedback-container,
  .chart-legend-container,
  .forexbrokers-container,
  .widget,
  .sentiment-widget,
  .tradingview-widget-container,
  .widget-row,
  .widget-row1 {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Legend: remove left “shove” and keep it inside the gutter */
  #legend {
    left: var(--gutter) !important;
    transform: none !important;                   /* was translateX(-8%) */
    max-width: calc(100% - (var(--gutter) * 2)) !important;
    white-space: normal !important;               /* allow wrapping */
  }

  /* Any direct children in the selection row can shrink properly */
  header2 .selection-row > * {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Keep images/canvas from creating asymmetry via intrinsic margins */
  img, canvas, video, iframe {
    display: block;              /* removes inline whitespace quirks */
    margin: 0;                   /* no phantom left/right margins */
    max-width: 100%;             /* stay within their parents */
    height: auto;
  }
}

 /* Keep the custom tag block-level and light */
 footer2 { display:block; background:#fff; color:#111; }

 /* Full-width white strip; nothing fancy */
 footer2 .footer-disclosure-box{
   width:100%;
   background:#fff;
   border-top:1px solid #e5e7eb;   /* subtle divider */
 }
 
 /* Constrain line length + equal side padding; wrap long URLs */
 footer2 .footer-disclosure{
   max-width: 1000px;              /* desktop measure */
   margin: 0 auto;                  /* centered */
   padding: 12px 16px;              /* equal L/R gutters */
   line-height: 1.5;
   font-size: clamp(12px, 1.6vw, 15px);
   overflow-wrap: anywhere;         /* prevents bleeding on mobile */
   word-break: normal;
 }
 
 /* Link color on white */
 footer2 .footer-disclosure a{
   color:#0b63ce;
   text-decoration:underline;
 }
 footer2 .footer-disclosure a:hover{ color:#084a9b; }
 
 /* Tiny phones: a touch more side padding */
 @media (max-width:480px){
   footer2 .footer-disclosure{ padding-inline:18px; }
 }