/* Drag menu & tool items */
.drag-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(30, 30, 30, 0.9);
    padding: 0.4em 0.5em;
    border-radius: 0.5em;
    min-width: 100px;
    flex: 1;
}

.tool-item {
    /* Same soft-neumorphic slab as .btn (components/controls-responsive.css's own base rule) -
       this predates that pass and was never brought along with it, since
       Entry/TP/SL use their own .tool-item class instead of .btn. */
    background: var(--color-raised);
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-raised);
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.2s, transform 0.1s ease;
    /* Without this, a touch-drag starting on one of these gets read as a
       scroll/pan gesture instead - the browser hands it off to native
       scrolling (and fires pointercancel) within the first few pixels of
       movement, before dragDrop.js's own pointer-based drag (see
       initButtonDragToChart) ever gets a chance to react. Needed now that
       dragging is custom pointer events rather than native HTML5
       draggable, which handled its own touch gesture arbitration. */
    touch-action: none;
}

/* The Entry/TP/SL drag chips specifically - shrunk further than plain
   .tool-item (which also covers #trash-bin, a drop TARGET that needs to
   stay a comfortable size to actually hit while dragging, so this doesn't
   touch that one). */
.drag-menu .tool-item {
    padding: 3px 8px;
    min-height: 1.8em;
}

.tool-item:active {
    cursor: grabbing;
    transform: scale(0.96);
    box-shadow: var(--shadow-inset);
}

.tool-item:hover {
    box-shadow: var(--shadow-raised-hover);
}

/* Immediate visual feedback the instant a draggable tool/chip is pressed
   (see dragDrop.js's initButtonDragToChart) - a class rather than relying
   on :active alone, since it needs to stay applied for the whole drag via
   pointer capture, even once the cursor has moved away from the button's
   own bounds (which would otherwise clear :active on its own). */
.tool-item.dragging,
.strategy-btn.dragging,
.indicator-btn.dragging,
.popup-sacrifice-btn.dragging {
    cursor: grabbing;
    transform: scale(0.96);
    opacity: 0.85;
}

/* Buttons that belong together as a compact, horizontal row (e.g. magnet/edit-lock/
   delete, or parameters/results/save trade) */
.tool-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* safety net for the now-wider combined icon row (6 buttons) on very narrow/manually-shrunk panels - each item's own flex-basis (below) still lets it fill a row when there's room */
    gap: 0.4em;
}

/* Separation from the row above (params/results/save-trade) - on the row
   itself rather than on individual buttons (.place-order-btn/.flatten-btn
   used to each carry their own margin-top, misaligning them against
   connect/disconnect-account-btn, which had none). */
.trade-action-row {
    margin-top: 0.5em;
}

.tool-row .btn,
.tool-row #trash-bin {
    padding: 0.7em 0.4em;
    min-height: 3.6em;
    max-height: 4.4em;
    font-size: clamp(18px, 1.8vw, 26px);
    white-space: nowrap;
}

/* The rule above sizes text via vw (viewport width) - correct for
   .drawing-panel-row (a fixed page-level panel, not inside any scaled
   container) but wrong for these same buttons inside .chart-controls: vw
   ties their size to the whole browser window instead of this panel's own
   (often much narrower, manually resizable) width, so a long label like
   "Fibonacci Golden Pocket" or "Cancel & Close" renders sized for a wide
   desktop window and overflows straight past its own button regardless of
   how far the panel itself is shrunk. cqw (this panel's own container-
   relative unit, same as every other button here - see the plain
   ".chart-controls button" rule above) fixes that; allowing the text to
   wrap (instead of nowrap) is a second line of defense for whichever
   labels are still too long even at the smallest size - the button's own
   height range above already has the room for a second line, so it wraps
   instead of spilling outside the button's edges. */
.chart-controls .tool-row .btn,
.chart-controls .tool-row #trash-bin {
    font-size: clamp(12px, 1.6cqw, 20px);
    white-space: normal;
}


/* Eye/magnet/lock/trash at rest - "soft neumorphic" tiles (see the icon-
   workshop artifact's Direction I): a flat colored tinted tile read as
   "washed out" at low contrast, so instead each tile is a plain, slightly
   RAISED slab - one shade lighter than the drawing panel's own background
   (rgba(19, 23, 34, 0.92), i.e. --color-bg #131722) - using a soft dual
   shadow (dark down-right, faint light up-left) instead of a border for
   depth. No per-tool background tint; only the icon itself (currentColor)
   and a matching soft glow on hover carry each tool's accent, so nothing
   reads as a pastel wash. .tool-item.trash-bin gets the same treatment
   further down (its red already matches --color-down, reused as-is since
   "delete" is the same kind of action as SL/down). Plain ID selectors
   already out-specificity the shared .btn/.tool-row rules, so no
   !important needed here. */
/* Background/box-shadow/:active-inset now come from .btn's own base rule
   (components/controls-base.css) - only each tool's own icon color and its
   matching hover-glow tint are special-cased here. */
#toggle-candles-btn { color: #99a1b3; }
#toggle-candles-btn:hover { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 5px rgba(153, 161, 179, 0.07); }

#toggle-magnet-btn { color: #e26c8a; }
#toggle-magnet-btn:hover { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 5px rgba(226, 108, 138, 0.085); }

#toggle-line-drag-btn { color: #d9a355; }
#toggle-line-drag-btn:hover { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 5px rgba(217, 163, 85, 0.085); }

.drawing-panel-row .btn svg,
.drawing-panel-row .tool-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Special active state for the line-drag button */
#toggle-line-drag-btn.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

#toggle-line-drag-btn.active:hover {
    background-color: #1e88e5 !important;
}

/* Magnet mode active: lines snap to candle values while dragging */
#toggle-magnet-btn.active {
    background-color: #FFD700 !important;
    border-color: #C9A700 !important;
    color: #1a1a1a !important;
    /* Containing block for the ⚡⚡ pseudo-elements below - a plain
       position:relative, no offset of its own, so it doesn't shift the
       button/row layout at all. */
    position: relative;
}

#toggle-magnet-btn.active:hover {
    background-color: #f0c800 !important;
}

/* Blue "electric" glow on the icon itself plus two small lightning bolts
   flickering at opposite corners - the magnetic/electric association reads
   clearer than the plain gold highlight alone. Only paid for while active;
   :not(.active) never creates these pseudo-elements at all. Kept as a
   modest -0.2em poke (not further out) since #drawing-panel's own
   overflow:hidden (needed for its rounded corners/collapse animation,
   see .trash-confirm's own comment above) would otherwise clip anything
   reaching much past the button's own box. */
#toggle-magnet-btn.active svg {
    filter: drop-shadow(0 0 3px #4fc3ff) drop-shadow(0 0 6px #2979ff);
}

#toggle-magnet-btn.active::before,
#toggle-magnet-btn.active::after {
    content: '⚡';
    position: absolute;
    font-size: 0.85em;
    line-height: 1;
    color: #4fc3ff;
    text-shadow: 0 0 5px #2979ff, 0 0 9px #2979ff;
    pointer-events: none;
    animation: magnet-spark 1.1s ease-in-out infinite;
}

#toggle-magnet-btn.active::before {
    top: -0.2em;
    left: -0.2em;
    animation-delay: 0s;
}

#toggle-magnet-btn.active::after {
    bottom: -0.2em;
    right: -0.2em;
    animation-delay: 0.55s;
}

@keyframes magnet-spark {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Global ❓ - top-right corner of the chart itself (.chart-canvas, which is
   position:relative - see layout.css), not the page and not inside any
   panel/tab (see index.html/helpMode.js), and deliberately standalone
   (no pill/background) unlike the .top-bar group to its left (all 4
   controls pinned there, see .top-bar-left/layout.css). Deliberately no
   button chrome (background/border) of its own either - just the bare
   glyph, "mini" sized; padding only pads the tap target, it stays
   invisible. Above the chart/trade-zones/work-in-progress label (z-index
   1-2, plot.css) but below .top-bar (20, layout.css) and the disclaimer/
   tutorial overlays (1000). The right offset (132px/62px, narrower on
   mobile below) is the same clearance the old .top-bar-right pill used to
   need to stay clear of Lightweight Charts' own price-scale labels
   (~120px/~55px, see chartConfig.js's priceScaleMinWidth) - this bare
   glyph doesn't strictly need as much room, but reusing the exact value
   already proven to clear it is simpler than re-deriving a tighter one. */
.help-toggle-btn {
    position: absolute;
    /* Not 0.6em like .top-bar's own anchor just above it, on purpose - this
       button sits in a different font-size context (its computed px value
       doesn't match .top-bar's), and even matching px values wouldn't
       center it against the top-bar row anyway: this button is short
       (padding + its own small svg) while the row's buttons are taller
       (padding/min-height), so anchoring both to the same TOP edge leaves
       their centers offset - the shorter one's center sits closer to the
       top. Fixed px instead, tuned so this glyph's own vertical center
       lands on the row's (measured via getBoundingClientRect on both). */
    top: 13px;
    right: 132px;
    z-index: 5;
    display: flex;
    background: none;
    border: none;
    padding: 6px;
    margin: 0;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: filter 0.15s ease, color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.help-toggle-btn svg {
    width: clamp(24px, 6vw, 32px);
    height: clamp(24px, 6vw, 32px);
}

.help-toggle-btn:hover {
    color: var(--color-text);
}

/* First visit (until the tutorial has been opened once - see
   tutorialOverlay.js's HELP_SEEN_KEY): ❓ turns amber, grows to well
   past its normal size and sends out a pulsing ring so a new visitor
   can't miss it. The whole button scales (not just the svg) so the ring
   grows with it instead of starting hidden under the enlarged glyph. */
.help-toggle-btn.first-visit {
    color: #ffb74d;
    border-radius: 50%;
    z-index: 6;
    animation: help-first-visit-pulse 1.6s ease-out infinite,
               help-first-visit-bounce 1.6s ease-in-out infinite;
}

.help-toggle-btn.first-visit svg {
    filter: drop-shadow(0 0 6px rgba(255, 183, 77, 0.8));
}

@keyframes help-first-visit-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 183, 77, 0.75); }
    70% { box-shadow: 0 0 0 12px rgba(255, 183, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 183, 77, 0); }
}

@keyframes help-first-visit-bounce {
    0%, 100% { transform: scale(1.6); }
    50% { transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
    .help-toggle-btn.first-visit,
    .help-toggle-btn.first-visit svg {
        animation: none;
    }
    .help-toggle-btn.first-visit {
        transform: scale(1.6);
        box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.6);
    }
}

/* Narrower clearance on mobile - must come after the base rule above (not
   in the earlier @media (max-width: 768px) block near .top-bar-account),
   since an unscoped rule appearing later in the file would otherwise win
   the cascade over an equally-specific one scoped inside an earlier media
   block, hiding this button behind #network-select on phones. */
@media (max-width: 768px) {
    .help-toggle-btn {
        right: 62px;
        /* Mobile's row buttons render shorter (smaller font clamps/padding
           in the mobile .top-bar-account .btn / .profile-btn rules above),
           so the row's own center sits higher up than on desktop - this
           needs its own, smaller top to match. */
        top: 10px;
    }
}

/* ❓ is also dragged onto controls (helpMode.js) - no browser pan/scroll
   gesture may take that over. */
.help-toggle-btn {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Fades the price scale's own labels out before they'd reach the currency
   indicator just below (.currency-indicator below) - solid
   chart background at the very top, transparent by the bottom, so a price
   label sliding up into this zone visually dissolves instead of running
   into (or showing through) the indicator's own semi-opaque pill. Sized
   to roughly cover the price scale's own width (chartConfig.js's
   priceScaleMinWidth: 120 desktop / 55 mobile) - doesn't need to be exact,
   just wide enough that no digit renders past its edge unfaded. Under the
   indicator's own z-index (5) but above the chart canvas (1-2, plot.css);
   pointer-events:none so it never blocks the price scale's own drag-to-
   zoom gesture underneath it, same reasoning as the indicator itself. */
.price-scale-fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 44px;
    background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 40%, transparent 100%);
    z-index: 4;
    pointer-events: none;
}

@media (max-width: 768px) {
    .price-scale-fade {
        width: 55px;
        height: 34px;
    }
}

/* Settlement currency of the selected exchange/pair (see index.html's
   #currency-indicator, currencyIndicator.js) - deliberately floats ON TOP
   of Lightweight Charts' own price scale (a small pill background keeps it
   readable over live price labels) instead of needing a reserved clear
   margin before it, like .help-toggle-btn's own right:132px/62px - that
   approach depended on there being enough width left for it beside the
   help toggle, which wasn't reliably true on narrower phones. Not a real
   button (nothing to click) - pointer-events:none so it never blocks the
   price scale's own drag-to-zoom gesture underneath it. */
.currency-indicator {
    position: absolute;
    top: 0.6em;
    right: 6px;
    z-index: 5;
    padding: 0.15em 0.45em;
    border-radius: 0.35em;
    background: rgba(19, 23, 34, 0.7);
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Same reasoning as .tool-item's touch-action above - these are also
   dragged onto the chart now (see pointPicker.js's phase 1), so a
   touch-drag starting on one must not be read as a scroll instead. */
.strategy-btn,
.indicator-btn {
    touch-action: none;
}

/* Icon-only (no label) unlike its .strategy-btn row-mates - stays compact
   instead of stretching to fill the row's flex:1 1 0 (.tool-row .btn above),
   which would otherwise leave a single tiny glyph lost in a wide empty bar. */
.indicator-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 0.6em 1em;
}

.indicator-btn svg {
    display: block;
}

/* Strategy/indicator button armed: waiting for its two chart clicks (see
   strategy.js/indicatorMenu.js/pointPicker.js) - only one of these can
   ever be armed at once, so at most one is ever active. */
.strategy-btn.active,
.indicator-btn.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

.strategy-btn.active:hover,
.indicator-btn.active:hover {
    background-color: #1e88e5 !important;
}

/* Candle visibility toggle: swaps to a closed-eye icon while candles are
   hidden (see candleVisibility.js) - text-decoration:line-through used to
   sit here for the same purpose back when this was a plain 👁️ emoji
   character, but never actually rendered once it became an SVG icon
   (text-decoration has no effect on non-text content). */
#toggle-candles-btn.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* This is the trash bin, which looks exactly like a .tool-item, just red -
   same soft-neumorphic slab as its 3 neighbors (see the block near
   #toggle-candles-btn above) instead of a flat tinted red fill. */
.tool-item.trash-bin {
    background-color: #1a1e28 !important;
    border-color: transparent !important;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 5px rgba(255, 255, 255, 0.025);
    color: #ef5350 !important;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.tool-item.trash-bin:hover {
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 5px rgba(239, 83, 80, 0.085);
}

/* Not a .btn (it's a div), so it doesn't pick up .btn:active's own inset
   pressed state automatically - added explicitly here instead. */
.tool-item.trash-bin:active {
    box-shadow: var(--shadow-inset);
}

/* Optional: when a line is dragged over the trash bin */
/* Lights up when a line is dragged over it */
#trash-bin.drag-over {
    background-color: #ef5350 !important;
    border-color: #c23b39 !important;
    color: #fff !important;
    transform: scale(1.03);
}

/* Confirmation box: "Delete all lines?" (appears when clicking the trash
   bin) - a top-level element (see index.html), not nested inside
   #drawing-panel: that panel's own overflow:hidden (needed for its
   rounded corners/collapse animation) would clip anything wider than its
   narrow, fixed content width, which this - text plus two buttons side by
   side - always is. position:fixed and given a comfortable width of its
   own instead; initTrashBinClearAll (lineDrag.js) sets its left/top right
   next to the drawing panel's own current on-screen position/height each
   time it's shown, so it still reads as "belonging" to that panel. */
.trash-confirm {
    position: fixed;
    /* Above .chart-controls (z-index:10) too, not just the drawing panel -
       that floats freely on desktop and can end up over this same spot. */
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    width: max-content;
    max-width: min(80vw, 220px);
    padding: 0.6em 0.8em;
    background: #241414;
    border: 1px solid rgba(239, 83, 80, 0.4);
    border-radius: 0.5em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: clamp(13px, 1.1vw, 18px);
}

.trash-confirm span {
    text-align: center;
    color: #fff;
}

.trash-confirm-buttons {
    display: flex;
    gap: 0.5em;
}

.trash-confirm-buttons .btn {
    flex: 1;
    min-height: 2em;
}

.trash-confirm-yes {
    background-color: rgba(239, 83, 80, 0.7) !important;
    border-color: #c23b39 !important;
    color: #fff !important;
}

.trash-confirm-yes:hover {
    background-color: #ef5350 !important;
}

/* Small disconnect icon at the edge of the Place Order row, next to Cancel
   & Close - only shown once a wallet is connected (accountConnect.js).
   Deliberately narrower than the row's other buttons (which stay at the
   shared .tool-row .btn sizing) since it's a single icon, not a labelled
   action - same red as the trash bin. */
.disconnect-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    max-height: none;
    padding: 0.5em 0.7em;
    font-size: 1.2em;
    background-color: rgba(239, 83, 80, 0.15) !important;
    border-color: rgba(239, 83, 80, 0.4) !important;
    color: #ff8a80 !important;
}

.disconnect-btn:hover {
    background-color: rgba(239, 83, 80, 0.3) !important;
}

/* Wallet connection method choice (appears when clicking the key button) */
.connect-method-popup {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.6em 0.8em;
    background: var(--color-raised);
    border: none;
    box-shadow: var(--shadow-raised);
    border-radius: 0.5em;
    font-size: clamp(13px, 1.1vw, 18px);
}

.connect-method-popup .btn {
    min-height: 2em;
}

/* ===== Explanation popup (helpMode.js) =====
   Placed above or below the control it explains (never over it), its
   arrow pointing at that control - .below/.above say which side, --arrow-x
   where along the edge. The arrow tip itself is a drag handle: dropped on
   another control, the popup switches to that one. Above the full-page
   overlays (1000) and the custom dropdown lists (1100), so it also works
   inside those. */
.help-popover {
    position: fixed;
    z-index: 1200;
    --arrow-x: 50%;
    width: max-content;
    min-width: 200px;
    padding: 0.6em 0.75em 0.5em;
    background: #1b1530;
    border: 1px solid rgba(156, 39, 176, 0.7);
    border-radius: 0.6em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 12px rgba(156, 39, 176, 0.25);
    color: #e6e1f0;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.4;
    animation: help-popover-in 0.14s ease-out;
}

.help-popover[hidden] {
    display: none;
}

@keyframes help-popover-in {
    from { opacity: 0; transform: translateY(var(--help-pop-dy, 4px)); }
    to   { opacity: 1; transform: none; }
}

.help-popover.above {
    --help-pop-dy: -4px;
}

/* A rotated square half-hidden behind the popup's edge - large enough to
   grab with a finger (the invisible ::after enlarges the hit area). */
.help-popover-arrow {
    position: absolute;
    left: var(--arrow-x);
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: #9C27B0;
    border-radius: 2px;
    transform: rotate(45deg);
    cursor: grab;
    touch-action: none;
}

.help-popover-arrow::after {
    content: "";
    position: absolute;
    inset: -12px;
}

.help-popover.below .help-popover-arrow {
    top: -8px;
}

.help-popover.above .help-popover-arrow {
    bottom: -8px;
}

.help-popover.dragging-arrow .help-popover-arrow {
    opacity: 0.35;
    cursor: grabbing;
}

.help-popover-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.25em;
}

.help-popover-name {
    flex: 1;
    font-weight: 700;
    color: #d9a6e6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-popover-text {
    margin: 0;
    white-space: normal;
}

.help-popover-close,
.help-popover-nav button {
    flex: none;
    width: auto;
    min-height: 0;
    padding: 0.15em 0.55em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.4em;
    color: #e6e1f0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.help-popover-close:hover,
.help-popover-nav button:hover {
    background: rgba(156, 39, 176, 0.35);
}

.help-popover-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-top: 0.45em;
}

.help-popover-count {
    opacity: 0.6;
    font-size: 0.9em;
}

/* The control being explained, and the one a dragged ❓/arrow tip would
   land on. box-shadow, not outline, so it follows rounded corners. */
.help-target {
    box-shadow: 0 0 0 2px #9C27B0, 0 0 10px rgba(156, 39, 176, 0.6) !important;
    border-radius: 0.35em;
}

.help-drop-target {
    box-shadow: 0 0 0 2px #d9a6e6, 0 0 14px rgba(217, 166, 230, 0.7) !important;
    border-radius: 0.35em;
}

.help-drag-marker {
    position: fixed;
    z-index: 1300;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.help-drag-question {
    font-size: 26px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    /* Sits just above the fingertip, so the control under it stays visible. */
    transform: translate(-50%, -120%);
}

.help-drag-tip {
    width: 14px;
    height: 14px;
    background: #9C27B0;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.8);
}

/* A held finger shows an explanation - no system callout on top of it. */
[data-help] {
    -webkit-touch-callout: none;
}