/* ============================================================
   DXCELL Rail Collapse — Agents · Alerts · VFT
   v12 (2026-05-07) · 4×2 grid · 6 character agents + Soon slot
   Top:    News · Ms Pros · Mr Moon · Crude
   Bottom: Data · Dexter · + Soon  (one empty cell on the right)
   ============================================================ */

/* ============================================================
   AGENT GRID · LOCKED to 4 columns so it is always 4-on-top + 3-below.
   The grid never breaks into a single row — the rail width adjusts the
   tile size instead, keeping everything tidy and predictable.
   ============================================================ */
.dxAgentsGrid--six,
.dxAgentsGrid--eight,
.dxAgentsGrid--seven,
.dxAgentsGrid--four{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  padding:10px;
}

/* Very narrow rails (under ~280px) drop to 3 columns so tiles don't get crushed */
@media (max-width: 320px){
  .dxAgentsGrid--six,
  .dxAgentsGrid--eight,
  .dxAgentsGrid--seven,
  .dxAgentsGrid--four{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.dxAgentsGrid--six .agentBtn,
.dxAgentsGrid--eight .agentBtn,
.dxAgentsGrid--seven .agentBtn,
.dxAgentsGrid--four .agentBtn{
  appearance:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;
  padding:8px 4px 7px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.05);
  /* Hollow effect — same colour family as the desk background, no white wash */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(67,255,164,.04), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.18));
  color:#cfe1da;cursor:pointer;text-decoration:none;
  transition:transform .18s ease, border-color .18s, box-shadow .22s, background .22s;
  min-height:84px;
  position:relative;
  overflow:hidden;
}
.dxAgentsGrid--six .agentBtn::before,
.dxAgentsGrid--eight .agentBtn::before,
.dxAgentsGrid--seven .agentBtn::before,
.dxAgentsGrid--four .agentBtn::before{
  content:"";position:absolute;inset:1px;border-radius:13px;
  border:1px solid rgba(255,255,255,.025);pointer-events:none;
}
.dxAgentsGrid--six .agentBtn:hover,
.dxAgentsGrid--eight .agentBtn:hover,
.dxAgentsGrid--seven .agentBtn:hover,
.dxAgentsGrid--four .agentBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(67,255,164,.40);
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 18px rgba(67,255,164,.16);
}
.dxAgentsGrid--six .agentBtn.is-active,
.dxAgentsGrid--eight .agentBtn.is-active,
.dxAgentsGrid--seven .agentBtn.is-active,
.dxAgentsGrid--four .agentBtn.is-active{
  border-color:rgba(67,255,164,.7);
  box-shadow:0 0 0 1px rgba(67,255,164,.4) inset, 0 0 22px rgba(67,255,164,.25);
}

/* Image — uniform sizing, properly transparent PNGs sit cleanly on the desk */
.dxAgentsGrid--six .agentBtn img,
.dxAgentsGrid--eight .agentBtn img,
.dxAgentsGrid--seven .agentBtn img,
.dxAgentsGrid--four .agentBtn img{
  width:46px;height:46px;
  object-fit:contain;display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  transition:transform .22s ease, filter .22s ease;
}
.dxAgentsGrid--six .agentBtn:hover img,
.dxAgentsGrid--eight .agentBtn:hover img,
.dxAgentsGrid--seven .agentBtn:hover img,
.dxAgentsGrid--four .agentBtn:hover img{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

.dxAgentsGrid--six .agentBtn__label,
.dxAgentsGrid--eight .agentBtn__label,
.dxAgentsGrid--seven .agentBtn__label,
.dxAgentsGrid--four .agentBtn__label{
  font:700 9.5px/1.15 'Inter',system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  color:#cfe1da;text-align:center;
  width:100%;
  white-space:normal;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Per-agent tints — subtle aura so each agent has its own colour */
.agentBtn--moon img{filter:drop-shadow(0 0 10px rgba(180,200,210,.40)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--news img{filter:drop-shadow(0 0 10px rgba(140,255,150,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--prosperous img{filter:drop-shadow(0 0 10px rgba(140,255,150,.40)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--dexter img{filter:drop-shadow(0 0 10px rgba(140,255,150,.40)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--rocket img{filter:drop-shadow(0 0 10px rgba(255,140,140,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--data img{filter:drop-shadow(0 0 10px rgba(67,255,164,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.agentBtn--crude img{filter:drop-shadow(0 0 10px rgba(120,255,140,.40)) drop-shadow(0 4px 10px rgba(0,0,0,.5));}

.agentBtn--data .agentBtn__label{color:#9bffc7}
.agentBtn--crude .agentBtn__label{color:#b5ffc8}

/* "+ Soon" placeholder — visually inert, lower contrast, fills empty grid cells */
.agentBtn--soon{
  cursor:default;
  opacity:.55;
}
.agentBtn--soon:hover{
  transform:none;border-color:rgba(255,255,255,.05);box-shadow:none;
}
.agentBtn--soon .agentBtn__plus{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.18);
  font:700 20px/1 'Inter',system-ui,sans-serif;color:rgba(220,236,245,.55);
  background:transparent;
}
.agentBtn--soon .agentBtn__label{color:rgba(220,236,245,.55);letter-spacing:.12em;}

/* Legacy logo class (kept harmless in case any cached page uses it) */
.agentBtn--logo{display:none !important;}

/* ============================================================
   GENERIC PANEL HEADER · used by Agents and VFT
   Click anywhere on the header to toggle that panel only.
   ============================================================ */
.dx-collapsible{display:flex;flex-direction:column;min-height:0;}
.dx-panel-header{
  display:flex;align-items:center;gap:8px;
  width:100%;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.20));
  border:0;border-bottom:1px solid rgba(255,255,255,.06);
  color:#cfe1da;cursor:pointer;
  font:700 11px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  text-align:left;
  user-select:none;
}
.dx-panel-header:hover{background:linear-gradient(180deg, rgba(67,255,164,.06), rgba(0,0,0,.20))}
.dx-panel-title{color:#dff3e9;flex:0 0 auto}
.dx-panel-hint{
  font:500 10px/1 'Inter',sans-serif;color:#7e9a8e;
  letter-spacing:.06em;text-transform:none;
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dx-panel-chev{
  display:inline-block;font-size:12px;color:#67d6a3;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.dx-collapsible.is-collapsed .dx-panel-chev{transform:rotate(-90deg)}
.dx-panel-body{flex:1 1 auto;min-height:0;overflow:auto}

/* Collapsed state — body hidden, header looks like a slim pill */
.dx-collapsible.is-collapsed{flex:0 0 auto !important;}
.dx-collapsible.is-collapsed .dx-panel-body{display:none !important}
.dx-collapsible.is-collapsed .dxSideChat__body{display:none !important}
.dx-collapsible.is-collapsed .dxAlertsCfg,
.dx-collapsible.is-collapsed .dxAlertsBrowser{display:none !important}

/* Agents panel default = OPEN, no quirky cross-panel handshake. */
.dxAgents.dx-collapsible:not(.is-collapsed) .dx-panel-body{display:block;}

/* Alerts panel — keeps its own chevron */
.dxAlerts .dxSideChat__title{cursor:pointer;}
.dxAlerts .dx-collapse-btn{
  background:transparent;border:0;color:#67d6a3;cursor:pointer;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;margin-left:4px;
  transition:background .18s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.dxAlerts .dx-collapse-btn:hover{background:rgba(67,255,164,.12)}
.dxAlerts.is-collapsed .dx-collapse-btn{transform:rotate(-90deg)}

/* When VFT is the only one expanded, give it room to breathe */
.dx-collapsible.dx-vft-wrap:not(.is-collapsed){flex:1 1 auto;min-height:240px}

/* Hide the legacy two-on-top primary block if it's still in any cached page */
.dxAgentsTop{display:none !important}
.dxAgentsGrid--three{display:none !important}

/* ============================================================
   v13.1 (2026-05-08) cleanup
   - Remove the legacy duplicate "AGENTS ▾" tab injected by the old
     initSidebarMinControls JS — our v11+ rail-collapse already gives the
     proper Agents panel its own click-to-toggle header, so this minimise
     bar is redundant and visually clashes with the panel below it.
   - Remove the floating side-rail edge collapse button — the same action
     is already in the chart toolbar at the top of the page.
   - Hide the inner scrollbars on the rail panels — users collapse/expand
     panels via the chevrons, they shouldn't need to scroll inside them.
   ============================================================ */

/* 1) Kill the duplicate AGENTS minimise bar */
.dxAgentsBar{display:none !important;}

/* 2) Kill the floating side-rail edge collapse pill */
.dxSideRailEdge,
#dxSideRailEdge{display:none !important;}

/* 3) Hide the ugly scrollbars on rail panel bodies.
      The content is still scrollable by trackpad/wheel, but visually clean. */
.dx-panel-body,
.dxSideBar,
.dxSideChat__body,
.dxAlertsBrowser,
.dxAlertsCfg{
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* legacy Edge / IE */
}
.dx-panel-body::-webkit-scrollbar,
.dxSideBar::-webkit-scrollbar,
.dxSideChat__body::-webkit-scrollbar,
.dxAlertsBrowser::-webkit-scrollbar,
.dxAlertsCfg::-webkit-scrollbar{
  width:0;height:0;
  display:none;                /* Chrome / Safari / new Edge */
}

/* ============================================================
   v15 (2026-05-08) — Agent picker watchlist switcher
   When a non-news agent is clicked, the chart engine sets
   .is-active on that tile. We give it a soft accent ring so
   the user can see at a glance which watchlist is loaded.
   News stays out of the rotation (it has a separate role).

   The rotation behaviour itself (move active tile to slot 0)
   is handled in setup-charts.js / crypto-charts.js.
   ============================================================ */
.dxAgentsGrid .agentBtn.is-active{
  border-color: rgba(108, 240, 150, .55) !important;
  box-shadow:
    0 0 0 1px rgba(108, 240, 150, .25) inset,
    0 0 24px rgba(108, 240, 150, .22),
    0 6px 20px rgba(0, 0, 0, .35);
  background: linear-gradient(180deg,
                rgba(108, 240, 150, .12),
                rgba(108, 240, 150, .03)) !important;
}
.dxAgentsGrid .agentBtn.is-active img{
  filter: drop-shadow(0 0 8px rgba(108, 240, 150, .45));
}
.dxAgentsGrid .agentBtn.is-active .agentBtn__label{
  color: rgba(180, 255, 200, .98) !important;
}

/* Smooth re-order transition when the picker rotates.
   View Transitions API would be nicer but isn't universally
   supported yet — a basic transform transition is enough. */
.dxAgentsGrid--seven .agentBtn{
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}