/* AI Help Assistant chat styles — the shared chat panel (ai_help/_chat_panel.html)
   and its drag-and-drop overlay. Split out of custom.css so surfaces that do NOT
   load the main-site stylesheet (the Trading Bots console's standalone
   automation/layout.html) can style the on-page AI Help modal without pulling in
   all of custom.css. base.html links this file alongside custom.css, so the main
   site is unchanged. */

/* ── AI Help Assistant chat (#579) ──────────────────────────────────────
   The user's turns and the assistant's turns previously looked identical —
   plain text blocks separated only by a small muted "You"/"Assistant"
   label — which made a back-and-forth hard to scan. Give each role a tinted
   background, an accent-colored left border, and a bold color-matched label
   so the two are easy to tell apart at a glance. The .ai-help-msg-{role}
   wrapper classes already exist on every message (server-rendered history
   AND the JS-appended live turns in ai_help_chat.js); they just had no CSS.
   Light + dark variants below follow this file's existing role-block
   convention (cf. the .setup-*/.cal-* blocks above). */
.ai-help-msg {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
}
.ai-help-msg .small.text-muted {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    /* line-height + margin give the caps room so they don't look clipped
       against the block's top padding, and separate the label from the body. */
    line-height: 1.4;
    margin-bottom: 0.15rem;
}
/* User turns: blue accent. */
.ai-help-msg-user {
    background-color: #eef5ff;
    border-left-color: #0d6efd;
}
.ai-help-msg-user .small.text-muted {
    color: #0d6efd !important;
}
/* Assistant turns: purple accent, distinct from the user's blue. */
.ai-help-msg-assistant {
    background-color: #f5f0ff;
    border-left-color: #6f42c1;
}
.ai-help-msg-assistant .small.text-muted {
    color: #6f42c1 !important;
}

/* Dark-mode variants: muted, low-luminance fills so the accent reads without
   glare; brighter label/border hues to keep contrast on the dark surface. */
[data-bs-theme="dark"] .ai-help-msg-user {
    background-color: rgba(13, 110, 253, 0.12);
    border-left-color: #6ea8fe;
}
[data-bs-theme="dark"] .ai-help-msg-user .small.text-muted {
    color: #6ea8fe !important;
}
[data-bs-theme="dark"] .ai-help-msg-assistant {
    background-color: rgba(111, 66, 193, 0.15);
    border-left-color: #b18bec;
}
[data-bs-theme="dark"] .ai-help-msg-assistant .small.text-muted {
    color: #b18bec !important;
}

/* AI Help drag-and-drop (#750): the whole panel is a drop target for image
   attachments, not just the paperclip. The overlay is purely visual — it has
   pointer-events:none so every drag event lands on the panel root itself
   (see app/static/js/ai_help_chat.js), and it is only revealed while the
   root carries .ai-help-dragover. .ai-help-panel gets position:relative so
   the absolutely-positioned overlay pins to it. */
.ai-help-panel {
    position: relative;
}
.ai-help-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed #0d6efd;
    border-radius: 0.5rem;
    background-color: rgba(13, 110, 253, 0.08);
    pointer-events: none;
}
.ai-help-panel.ai-help-dragover .ai-help-drop-overlay {
    display: flex;
}
.ai-help-drop-overlay-inner {
    text-align: center;
    color: #0d6efd;
    font-weight: 600;
}
.ai-help-drop-overlay-inner i {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}
[data-bs-theme="dark"] .ai-help-drop-overlay {
    border-color: #6ea8fe;
    background-color: rgba(13, 110, 253, 0.16);
}
[data-bs-theme="dark"] .ai-help-drop-overlay-inner {
    color: #6ea8fe;
}


/* ── Modal surface: standout tint + brand accent (#1134, #1231) ────────────
   The floating AI Help pop-up (ai_help/_modal.html) started life as a plain
   white .modal-content on a white page body (custom.css sets body bg to #fff),
   so on most pages it blended almost completely into the background — the only
   cue was the drop shadow. #1134 tinted the surface; #1231 pushed it one more
   step because it still read as part of the page, and added the brand green so
   the pop-up is identifiable as the AI assistant at a glance (the floating
   launcher is brand-green; the panel carried no brand color at all).

   Direction differs by theme because the goal is SEPARATION, not a fixed
   lightness: against a white page the surface goes grayer, against the
   near-black dark body (#212529) it goes lighter.

   This lives in ai_help_chat.css because that sheet is loaded on every surface
   the modal appears on — the main site (base.html) AND the Trading Bots console
   subdomain (automation/layout.html) — so the pop-up looks the same "across all
   pages and sub domains". --brand-primary is undefined on the console (it does
   not load custom.css/brand_css), hence the literal fallback. */
#aiHelpModal .modal-content {
    background-color: #e9ecef;
    /* The tapered frame below IS the pop-up's border — Bootstrap's 1px would
       otherwise double up under the green along the sides and bottom. */
    border: 0;
    position: relative;  /* anchors the resize grip + accent frame below */
    --ai-frame-top: 3px;      /* thickness across the top */
    --ai-frame-end: 1px;      /* what the sides taper down to, and the bottom */
    --ai-frame-radius: 8px;   /* pinned, because the frame's arcs are cut to it */
    border-radius: var(--ai-frame-radius);
}

/* ── Tapered accent frame (#1235) ──────────────────────────────────────────
   #1231 accented only the top edge, which left the pop-up reading as
   half-framed. The green now goes the whole way round: full thickness across
   the top, narrowing down each side, and across the bottom at the thickness
   the sides ended on — so the weight sits where the eye enters the panel and
   thins as it travels away, framing without boxing it in.

   A plain border can't vary in thickness, so the frame is one overlay clipped
   to a RING: a full-size outer rectangle with a slightly-offset shape punched
   out of it. The hole's sides sit --ai-frame-top in from the edge at the top
   and only --ai-frame-end at the bottom, so each side of the ring is a
   straight line that narrows top-to-bottom — the taper falls out of the
   geometry rather than needing a gradient. evenodd makes the inner loop a
   hole regardless of winding direction.

   The hole's corners are ARCS, not square (#1237). The outer edge is rounded
   by border-radius, so against a square-cornered hole the rounding cut inside
   the band and pinched it to nothing: the top corners came off sliced and the
   1px bottom corners vanished outright. Each inner arc is therefore concentric
   with its outer corner — same centre, --ai-frame-radius minus the local
   thickness for its radius — which holds the band at full width the whole way
   round. That is what pins --ai-frame-radius to the modal's border-radius:
   the four arcs below are plotted against it (5px at the top, 7px at the
   bottom), so changing one means replotting the other. Points come from
   quarter arcs sampled every 22.5°, which is indistinguishable from a true
   curve at this radius.

   pointer-events:none is load-bearing: the overlay covers the entire panel,
   so without it the header drag (#682), the resize grip (#1231) and every
   control inside would be dead. z-index 2 lifts it over the header and body
   backgrounds while staying under the grip's 3. */
#aiHelpModal .modal-content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: var(--brand-primary, #22c55e);
    clip-path: polygon(evenodd,
        /* outer edge — border-radius rounds it */
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        /* hole, clockwise from the top edge. Straight runs are the frame's
           four sides; the 5-point clusters are the concentric corner arcs. */
        8px 3px,
        calc(100% - 8px) 3px,
        calc(100% - 6.09px) 3.38px,
        calc(100% - 4.46px) 4.46px,
        calc(100% - 3.38px) 6.09px,
        calc(100% - 3px) 8px,
        calc(100% - 1px) calc(100% - 8px),
        calc(100% - 1.53px) calc(100% - 5.32px),
        calc(100% - 3.05px) calc(100% - 3.05px),
        calc(100% - 5.32px) calc(100% - 1.53px),
        calc(100% - 8px) calc(100% - 1px),
        8px calc(100% - 1px),
        5.32px calc(100% - 1.53px),
        3.05px calc(100% - 3.05px),
        1.53px calc(100% - 5.32px),
        1px calc(100% - 8px),
        3px 8px,
        3.38px 6.09px,
        4.46px 4.46px,
        6.09px 3.38px,
        8px 3px
    );
}
[data-bs-theme="dark"] #aiHelpModal .modal-content {
    background-color: #3a4046;
}
/* The header robot, in brand green — the second, quieter green cue. */
#aiHelpModal .modal-title .bi-robot {
    color: var(--brand-primary, #22c55e);
}

/* ── Resize grip (#1231) ───────────────────────────────────────────────────
   The pop-up has been drag-to-move since #682 (header = handle, see
   ai_help_modal.js) but was locked to modal-lg. The grip is appended by
   ai_help_modal.js — not baked into _modal.html — so the dedicated /ai-help
   page, which renders the same panel inside a normal card, never grows one.
   Diagonal hatching is drawn in CSS to avoid depending on an icon glyph that
   the console subdomain may not load. */
#aiHelpModal .ai-help-resize-grip {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    z-index: 3;
    cursor: nwse-resize;
    touch-action: none;
    opacity: 0.55;
    color: var(--bs-secondary-color, #6c757d);
    background: repeating-linear-gradient(315deg,
        currentColor 0 1.5px, transparent 1.5px 4px);
}
#aiHelpModal .ai-help-resize-grip:hover {
    opacity: 0.9;
}

/* Once the user has actually resized, the panel has to FILL the height they
   dragged out — otherwise the message list keeps its authored max-height:55vh
   (inline on the element in _chat_panel.html, hence !important) and a taller
   pop-up is just empty space under the composer. Gated behind .ai-help-resized
   so an untouched pop-up keeps its original, well-tested layout exactly. */
#aiHelpModal.ai-help-resized .modal-content {
    overflow: hidden;
}
#aiHelpModal.ai-help-resized .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#aiHelpModal.ai-help-resized .ai-help-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#aiHelpModal.ai-help-resized .ai-help-panel > [data-role="messages"] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
}

/* ── Print ────────────────────────────────────────────────────────────────
   The floating launcher is position:fixed, so it lands on EVERY printed page
   of EVERY page in the app — it showed up mid-report in a saved Backtest
   Autopsy PDF (2026-08-16), a robot button stamped over the findings. The
   modal is hidden on screen but must never be resurrected by a print sheet
   either. Nothing here is actionable on paper. */
@media print {
    #aiHelpFab,
    #aiHelpModal,
    .ai-help-drop-overlay { display: none !important; }
}