/* walbi.css — widget bodies + theme presets (skins). Themes override CSS vars on body[data-theme]. */
:root { --up: #2bd576; --down: #ff4d4d; --accent: #7b5cff; --dim: #7e8aa0; --txt: #c9d3e0; --panel: #11151e; --panel2: #161b26; --line: #232c3a; --bg: #0b0e14; }
/* skins */
body[data-theme="midnight"] { --accent: #3d7bff; --up: #2bd576; --down: #ff5a7a; }
body[data-theme="neon"] { --accent: #00e5ff; --up: #39ff14; --down: #ff2e88; --bg: #07060f; --panel: #100c20; --panel2: #170f2e; --line: #2a1f4d; }
body[data-theme="bloomberg"] { --accent: #ff9f0a; --up: #f0a800; --down: #ff5630; --txt: #d8d2c4; --bg: #060606; --panel: #0e0e0e; --panel2: #151512; --line: #2a2a24; }
body[data-theme="walbi"] { --accent: #7b5cff; --up: #2bd576; --down: #ff4d4d; }
/* map theme vars onto the dock engine vars so the whole shell recolours */
.dk-root { --dk-bg0: var(--bg); --dk-bg1: var(--panel); --dk-bg2: var(--panel2); --dk-line: var(--line); --dk-line2: var(--line);
  --dk-txt: var(--txt); --dk-dim: var(--dim); --dk-accent: var(--accent); --dk-accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --dk-up: var(--up); --dk-down: var(--down); }

.dk-content { font: 12px/1.4 -apple-system, "IBM Plex Sans", system-ui, sans-serif; color: var(--txt); }
.dk-content .mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.up { color: var(--up); } .down { color: var(--down); } .dim { color: var(--dim); } .acc { color: var(--accent); } .sm { font-size: 10px; }
.wd-src { position: absolute; top: 6px; right: 8px; z-index: 6; font-size: 9px; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--dim); pointer-events: none; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-src.live::before { content: "● "; color: var(--up); }
.wd-fill, .wd-tape, .wd-signals, .wd-agents, .wd-chat, .wd-inbox { height: 100%; overflow: auto; }
.wd-pad { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wd-spark { width: 80px; height: 22px; vertical-align: middle; }
.wd-chart { background: var(--bg); }

/* table */
.wd-tbl { display: flex; flex-direction: column; height: 100%; overflow: auto; }
.wd-th { display: flex; position: sticky; top: 0; background: var(--panel2); color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.wd-th span, .wd-tr span { flex: 1 1 0; min-width: 0; } .wd-th span:not(:first-child), .wd-tr span:not(:first-child) { text-align: right; }
.wd-tr { display: flex; align-items: center; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,.03); } .wd-tr:hover { background: var(--panel2); }
.wd-cls { font-size: 9px; opacity: .5; }
button.mini { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); border: none; border-radius: 5px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }

/* order book */
.wd-ob { display: flex; flex-direction: column; height: 100%; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.ob-s { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .ob-s.bids { justify-content: flex-start; }
.ob-r { position: relative; display: flex; justify-content: space-between; padding: 2px 10px; } .ob-r i { position: absolute; right: 0; top: 0; bottom: 0; opacity: .13; } .ob-r.up i { background: var(--up); } .ob-r.down i { background: var(--down); } .ob-r span { position: relative; }
.ob-mid { text-align: center; padding: 5px; background: var(--panel2); border-block: 1px solid var(--line); font-weight: 600; font-size: 10px; }

/* ticket */
.wd-ticket { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .seg.sm button { font-size: 11px; padding: 5px; }
.seg button { flex: 1; background: var(--panel2); color: var(--dim); border: none; padding: 8px; cursor: pointer; font: inherit; }
.seg button.on.up { background: color-mix(in srgb, var(--up) 20%, transparent); color: var(--up); } .seg button.on.down { background: color-mix(in srgb, var(--down) 20%, transparent); color: var(--down); } .seg button.on { background: var(--dk-accent-soft); color: var(--txt); }
.wd-ticket label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--dim); } .wd-ticket input { width: 130px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--txt); padding: 6px 8px; font: inherit; text-align: right; }
.submit { background: color-mix(in srgb, var(--up) 85%, black 5%); color: #04210f; border: none; border-radius: 8px; padding: 11px; font: 600 12px/1 inherit; cursor: pointer; } .submit.down { background: color-mix(in srgb, var(--down) 85%, black 5%); color: #2a0710; }

/* time & sales */
.tp-r { display: flex; justify-content: space-between; padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,.03); font-family: "IBM Plex Mono", monospace; font-size: 11px; } .tp-r.up { background: color-mix(in srgb, var(--up) 6%, transparent); } .tp-r.down { background: color-mix(in srgb, var(--down) 6%, transparent); }

/* signals */
.wd-signals { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sg-card { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 9px; padding: 10px; } .sg-card.down { border-left-color: var(--down); }
.sg-h { display: flex; align-items: center; gap: 8px; } .sg-h b { flex: 1; } .sg-dir { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); } .sg-card.down .sg-dir { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.sg-imp { font-size: 9px; padding: 1px 6px; border-radius: 4px; } .imp-high { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); } .imp-med { background: rgba(255,159,10,.18); color: #ff9f0a; } .imp-low { background: rgba(125,138,160,.18); color: var(--dim); }
.sg-px { font-size: 11px; color: var(--dim); margin: 6px 0; } .sg-go { width: 100%; background: var(--dk-accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 7px; padding: 7px; font: inherit; font-size: 11px; cursor: pointer; }

/* predictions */
.wd-predict { padding: 14px; } .pr-q { font-size: 13px; margin-bottom: 12px; } .pr-bar { height: 8px; border-radius: 4px; background: var(--down); overflow: hidden; } .pr-bar i { display: block; height: 100%; background: var(--up); } .pr-pct { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0; } .pr-cd { text-align: center; font-size: 20px; margin: 10px 0; } .pr-btns { display: flex; gap: 8px; } .pr-btns button { flex: 1; padding: 12px; border: none; border-radius: 9px; font: 600 13px/1 inherit; cursor: pointer; } .pr-btns .up { background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; } .pr-btns .down { background: color-mix(in srgb, var(--down) 85%, black); color: #2a0710; }

/* agents + chat */
.wd-agents { padding: 8px; display: flex; flex-direction: column; gap: 8px; } .ag-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px; } .ag-h { display: flex; align-items: center; } .ag-h b { flex: 1; } .ag-st { font-size: 10px; color: var(--dim); } .ag-st.on { color: var(--up); } .ag-stats { font-size: 11px; margin: 4px 0 8px; } .ag-go { width: 100%; border: none; border-radius: 7px; padding: 7px; font: inherit; font-size: 11px; cursor: pointer; } .ag-go.up { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); } .ag-go.down { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.wd-chat { display: flex; flex-direction: column; } .ch-log { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .ch-m { max-width: 85%; padding: 7px 10px; border-radius: 10px; font-size: 12px; } .ch-m.ai { background: var(--panel2); align-self: flex-start; } .ch-m.me { background: var(--dk-accent-soft); align-self: flex-end; } .ch-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); } .ch-in input { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); padding: 7px 10px; font: inherit; } .ch-in button { width: 34px; border: none; border-radius: 8px; background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; cursor: pointer; }

/* misc */
.at-row { display: flex; justify-content: space-between; align-items: baseline; } .wl-big { font-size: 28px; font-weight: 700; } .wl-btns, .pf { display: flex; gap: 8px; } .wl-btns button { flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 9px; font: inherit; cursor: pointer; } .wl-btns .up { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); border-color: transparent; }
.wd-inbox .ib-r { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--line); } .ib-i { font-size: 16px; } .ib-t { font-size: 12px; }
.pf { align-items: center; } .pf-av { width: 42px; height: 42px; border-radius: 50%; background: var(--dk-accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.vc-card { background: var(--panel2); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 10px; padding: 14px; text-align: center; } .vc-amt { font-size: 26px; font-weight: 700; } .vc-card button { border: none; border-radius: 7px; padding: 7px 14px; background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; cursor: pointer; }

/* live-state widgets */
.wd-load, .wd-empty, .wd-offline { display: grid; place-items: center; height: 100%; min-height: 60px; color: var(--dim); font-size: 12px; text-align: center; padding: 16px; }
.wd-offline { color: var(--down); } .wd-offline .dim { color: var(--dim); margin-top: 4px; }
.wd-load { opacity: .7; }
.wd-load::before { content: "◌ "; }

button.mini.close { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); margin-left: 6px; padding: 0 6px; }
.t-status { margin-top: 4px; } .submit:disabled { opacity: .55; cursor: default; }

/* cross-widget: clickable symbols in watchlist drive the chart */
.wl-sym { cursor: pointer; transition: color .12s; }
.wl-sym:hover { color: var(--accent); }

/* polished empty/load states */
.wd-empty { font-style: italic; opacity: .8; }
.wd-empty::before { content: "○ "; opacity: .5; }