/* FLOWHA UI LAB V0 -- launcher + overlay. Presentation only; reuses the MARKET FLOW tokens (:root in index.html).
   The overlay lives inside #chart-wrap as an absolutely positioned layer: it takes no layout space, so opening or closing it
   cannot move the chart. It stops short of the right-hand LIVE HEATMAP / CONTRATS / PRIX columns and of the time axis. */

/* ---- Launcher: compact text button, same height as the Settings gear, immediately to its left ---- */
.mf-flowha-launcher { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  height:26px; padding:0 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:10px; font-weight:600; letter-spacing:.3px;
  color:var(--accent); background:var(--pill); border:1px solid var(--pill-border); }
.mf-flowha-launcher:hover { border-color:var(--accent); }
.mf-flowha-launcher.active { border-color:var(--accent); box-shadow:inset 0 0 8px #e8b44a14; }
.mf-flowha-launcher:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Compact layout: the launcher is a STANDALONE button (#mf-flowha-slot), apart from the control groups, centred in the free space between the
   instrument selector and the gear. The control groups stay exactly centred: an empty flexible spacer on the left (#toolbar::before) mirrors
   the slot on the right. */
.mf-compact.mf-has-flowha #toolbar::before { content:""; flex:1 1 0; min-width:0; }
.mf-compact .mf-flowha-slot { flex:1 1 0; min-width:max-content; display:flex; align-items:center; justify-content:center; padding-right:40px; } /* 40px = gear */
@media (max-width:1100px) { .mf-compact .mf-flowha-slot { padding-right:0; } }
html:not(.mf-compact) .mf-flowha-launcher { margin-left:8px; }
/* Animated amber ring -- the SAME technique as the chatbox composer (.flowha-composer::after): a 1px border made by masking a conic-gradient
   whose angle is the registered custom property --fl-a (declared below with @property, animated 0 -> 360deg by @keyframes flowha-spin).
   Only a short amber segment is lit at any time and it travels slowly round the whole perimeter; the button itself keeps its dark background
   (the ring is a separate pseudo-element, mask-cut to the 1px border, so there is no fill, no glow, no size change). Always running, not only
   on hover / focus. Reduced motion: no animation, a quiet static amber border instead. */
.mf-flowha-launcher { position:relative; }
.mf-flowha-launcher::after { content:""; position:absolute; inset:-1px; border-radius:7px; pointer-events:none; padding:1px;
  background:conic-gradient(from var(--fl-a), transparent 0deg, #e8b44ab3 26deg, transparent 60deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:flowha-spin 5s linear infinite; }
@media (prefers-reduced-motion:reduce) {
  .mf-flowha-launcher { border-color:#80652f; }
  .mf-flowha-launcher::after { animation:none; background:none; }
}

/* ---- Overlay ---- */
.flowha-panel { --fl-w:372px; position:absolute; z-index:20; bottom:34px;
  right:calc(var(--lb-w, 0px) + var(--price-axis-w) + var(--live-depth-w) + var(--histo-live-gap-w) + 14px);
  width:var(--fl-w); max-width:calc(100% - 28px);
  display:flex; flex-direction:column; height:min(680px, calc(100% - 60px));
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 32px #0008; color:var(--text); font-size:12px; line-height:1.5;
  animation:flowha-in .16s ease-out; }
.flowha-panel[hidden] { display:none; }
@keyframes flowha-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.flowha-head { display:flex; align-items:center; gap:8px; padding:11px 10px 10px 14px; flex-shrink:0;
  border-bottom:1px solid var(--border); }
.flowha-brand { flex:1; display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.flowha-title { font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--accent); }
.flowha-subtitle { font-size:10.5px; color:var(--muted); }
.flowha-clear { background:none; border:0; padding:2px 4px; font-size:10px; color:var(--muted-2); cursor:pointer; }
.flowha-clear:hover { color:var(--muted); }
.flowha-close { width:22px; height:22px; padding:0; border:0; border-radius:5px; background:none;
  color:var(--muted); font-size:16px; line-height:20px; cursor:pointer; }
.flowha-close:hover { color:var(--text); background:var(--pill); }
.flowha-clear:focus-visible, .flowha-close:focus-visible, .flowha-chip:focus-visible,
.flowha-cmd:focus-visible, .flowha-send:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ---- Conversation ---- */
.flowha-log { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 14px 10px;
  display:flex; flex-direction:column; gap:9px;
  scrollbar-width:thin; scrollbar-color:var(--pill-border) transparent; }
.flowha-empty[hidden] { display:none; }
.flowha-empty-title { margin:0 0 8px; color:var(--muted); font-size:12px; }
.flowha-chips { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.flowha-chip { max-width:100%; text-align:left; padding:5px 9px; border-radius:6px; cursor:pointer;
  background:var(--pill); color:var(--muted); border:1px solid var(--pill-border); font:inherit; font-size:11px; line-height:1.4; }
.flowha-chip:hover { color:var(--text); border-color:#80652f; }

.flowha-msg { max-width:92%; word-wrap:break-word; overflow-wrap:anywhere; }
.flowha-user { align-self:flex-end; padding:6px 10px; border-radius:9px 9px 3px 9px; white-space:pre-wrap;
  background:#e8b44a14; border:1px solid #80652f66; color:var(--text); }
.flowha-bot { align-self:flex-start; max-width:100%; padding-left:10px; border-left:2px solid #80652f; color:var(--text); }
.flowha-bot-text { white-space:pre-wrap; }
.flowha-bot .flowha-chips { margin-top:8px; }
.flowha-resource { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;
  padding:7px 10px; border-radius:7px; background:var(--panel-2); border:1px solid var(--pill-border); }
.flowha-resource-body { display:flex; flex-direction:column; min-width:0; }
.flowha-resource-title { font-size:11px; font-weight:600; color:var(--text); }
.flowha-resource-sub { font-size:10.5px; color:var(--muted); }
.flowha-resource-tag { flex-shrink:0; font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--pill-border); border-radius:4px; padding:1px 5px; }
.flowha-typing { display:flex; gap:4px; padding-top:7px; padding-bottom:7px; }
.flowha-typing i { width:4px; height:4px; border-radius:50%; background:var(--muted-2); animation:flowha-dot 1s ease-in-out infinite; }
.flowha-typing i:nth-child(2) { animation-delay:.15s; }
.flowha-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes flowha-dot { 0%, 100% { opacity:.25; } 50% { opacity:.9; } }

/* ---- Composer ---- */
@property --fl-a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes flowha-spin { to { --fl-a:360deg; } }
.flowha-composer { position:relative; flex-shrink:0; margin:0; border-top:1px solid var(--border); background:var(--panel-2);
  border-radius:0 0 10px 10px; }
/* Restrained amber focus: a hairline border plus a faint slow arc; nothing glows. */
.flowha-composer::after { content:""; position:absolute; inset:-1px; border-radius:0 0 10px 10px; pointer-events:none;
  padding:1px; opacity:0; transition:opacity .4s ease;
  background:conic-gradient(from var(--fl-a), transparent 0deg, #e8b44a55 70deg, transparent 150deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.flowha-composer:focus-within { border-top-color:#80652f; }
.flowha-composer:focus-within::after { opacity:1; animation:flowha-spin 6s linear infinite; }
.flowha-input { display:block; width:100%; min-height:44px; max-height:96px; resize:none; border:0; outline:0;
  padding:11px 14px 4px; background:transparent; color:var(--text); font:inherit; font-size:12.5px; line-height:1.5;
  scrollbar-width:thin; scrollbar-color:var(--pill-border) transparent; }
.flowha-input::placeholder { color:var(--muted-2); }
.flowha-foot { display:flex; align-items:center; justify-content:space-between; padding:2px 10px 8px 14px; }
.flowha-cmd { padding:2px 0; border:0; background:none; color:var(--muted-2); font:inherit; font-size:10.5px; cursor:pointer; }
.flowha-cmd:hover { color:var(--muted); }
.flowha-send { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:6px; cursor:pointer;
  font:inherit; font-size:10.5px; font-weight:600; color:var(--accent-ink); background:var(--accent); border:1px solid var(--accent); }
.flowha-send:disabled { cursor:default; color:var(--muted-2); background:var(--pill); border-color:var(--pill-border); font-weight:500; }
.flowha-send kbd { font:inherit; font-size:10px; opacity:.7; }

.flowha-menu { position:absolute; left:10px; right:10px; bottom:calc(100% + 6px); z-index:2; margin:0; padding:4px; list-style:none;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px #0008; }
.flowha-menu[hidden] { display:none; }
.flowha-menu-item { display:flex; align-items:baseline; gap:10px; padding:5px 8px; border-radius:5px; cursor:pointer; }
.flowha-menu-item[aria-selected="true"] { background:var(--pill); }
.flowha-menu-name { font-size:11.5px; font-weight:600; color:var(--accent); min-width:74px; }
.flowha-menu-hint { font-size:10.5px; color:var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .flowha-panel { animation:none; }
  .flowha-composer:focus-within::after { animation:none; }
  .flowha-typing i { animation:none; opacity:.6; }
}