.rgft-ai{
    --ai-accent: var(--rgft-primary, #b8963e);
    --ai-bg: #111317;
    --ai-panel: #16181d;
    --ai-card: #1a1d23;
    --ai-line: #2a2d34;
    --ai-ink: #eeeef1;
    --ai-muted: #969699;
    --ai-faint: #68686a;
    --ai-green: #4caf7d;
    --ai-orange: #d98c3f;
    --ai-red: #d9635a;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: var(--ai-ink);
    background: var(--ai-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
.rgft-ai *{ box-sizing: border-box; }
.rgft-ai a{ color: var(--ai-accent); text-decoration: none; }

.rgft-ai-shell{
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 26px 100px;
}

.rgft-ai-notice{
    background: #2a1e14;
    border: 1px solid #55371c;
    color: #e0a860;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 13px;
    margin-bottom: 18px;
    text-align: center;
}

.rgft-ai-layout{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px){
    .rgft-ai-layout{ grid-template-columns: 1fr; }
    /* On mobile, the layout collapses to one column and stacks in DOM
       order — panel first, chat second — burying the chat below a full
       screen of station cards before a worker even sees it. The chat is
       the actual point of this page; the status panel is reference
       material. Reorder (CSS only, no DOM/HTML change — safer given this
       plugin's history of bugs introduced by moving template blocks
       around) so the chat renders first, panel second. */
    .rgft-ai-chat{ order: 1; }
    .rgft-ai-panel{ order: 2; }
}

/* ── Live status panel ─────────────────────────────────────────────── */
.rgft-ai-panel{
    background: var(--ai-panel);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    padding: 20px;
    /* Grid items default to min-width:auto — bounded by their content's
       natural size, not the grid track's own width. On mobile the layout
       collapses to grid-template-columns:1fr, but without this, station
       rows/badges inside (fixed-ish widths, nowrap labels) still forced
       a wider-than-viewport minimum, pushing the WHOLE PAGE into
       horizontal scroll — the exact bug station.php's own grid cards
       already guard against with this same min-width:0 (see
       station-style.php's .rgft-picker-card etc.), just missing here. */
    min-width: 0;
}
.rgft-ai-panel__head{
    display: flex;
    align-items: center;
    gap: 8px;
}
.rgft-ai-panel__dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ai-green);
    box-shadow: 0 0 0 3px rgba(76,175,125,.2);
}
.rgft-ai-panel__head h2{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.rgft-ai-panel__section{
    margin: 18px 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ai-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rgft-ai-stations{ display: flex; flex-direction: column; gap: 8px; }
.rgft-ai-station{
    background: var(--ai-card);
    border: 1px solid var(--ai-line);
    border-radius: 10px;
    padding: 10px 12px;
}
.rgft-ai-station--stopped{
    background: #241a15;
    border-color: #5c3a1f;
}
.rgft-ai-station__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.rgft-ai-station__name{ font-size: 13px; font-weight: 500; }
.rgft-ai-station__badge{
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rgft-ai-station--working .rgft-ai-station__badge{ background: rgba(76,175,125,.15); color: var(--ai-green); }
.rgft-ai-station--stopped .rgft-ai-station__badge{ background: rgba(217,140,63,.18); color: var(--ai-orange); }
.rgft-ai-station--empty .rgft-ai-station__badge{ background: rgba(154,154,146,.15); color: var(--ai-muted); }
.rgft-ai-station__detail{ font-size: 11.5px; color: var(--ai-muted); line-height: 1.5; }
.rgft-ai-station--stopped .rgft-ai-station__detail{ color: #e0a860; }

.rgft-ai-materials{ display: flex; flex-direction: column; gap: 8px; }
.rgft-ai-material{
    background: var(--ai-card);
    border: 1px solid var(--ai-line);
    border-radius: 10px;
    padding: 10px 12px;
}
.rgft-ai-material__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.rgft-ai-material__name{ font-size: 13px; font-weight: 500; }
.rgft-ai-material__tag{
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rgft-ai-material__tag--out{ background: rgba(217,99,90,.18); color: var(--ai-red); }
.rgft-ai-material__tag--low{ background: rgba(217,140,63,.18); color: var(--ai-orange); }
.rgft-ai-material__detail{ font-size: 11.5px; color: var(--ai-muted); }

/* ── Profitability (proactive, permission-gated) ─────────────────────── */
.rgft-ai-panel__section--up{ color: var(--ai-green); }
.rgft-ai-panel__section--down{ color: var(--ai-red); }
.rgft-ai-profit-list{ display: flex; flex-direction: column; gap: 6px; }
.rgft-ai-profit-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--ai-card);
    border: 1px solid var(--ai-line);
    border-radius: 10px;
    padding: 8px 12px;
}
.rgft-ai-profit-row__name{
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgft-ai-profit-row__margin{ font-size: 13px; font-weight: 700; flex-shrink: 0; }
.rgft-ai-profit-row__margin--up{ color: var(--ai-green); }
.rgft-ai-profit-row__margin--down{ color: var(--ai-red); }

/* ── Chat ───────────────────────────────────────────────────────────── */
.rgft-ai-chat{
    background: var(--ai-panel);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.rgft-ai-chat__head{
    display: flex;
    align-items: center;
    gap: 10px;
}
.rgft-ai-chat__badge{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(184,150,62,.15);
    color: var(--ai-accent);
    border: 1px solid rgba(184,150,62,.35);
}
.rgft-ai-welcome-avatar{
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}
.rgft-ai-welcome-avatar img{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(184,150,62,.35);
    background: rgba(184,150,62,.15);
}
.rgft-ai-chat__head h1{
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    flex: 1;
}
.rgft-ai-reset{
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ai-line);
    background: transparent;
    color: var(--ai-muted);
    cursor: pointer;
    white-space: nowrap;
}
.rgft-ai-reset:hover{ border-color: var(--ai-accent); color: var(--ai-accent); }
.rgft-ai-chat__sub{
    font-size: 12px;
    color: var(--ai-faint);
    margin: 4px 0 20px;
}

.rgft-ai-log{
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 140px;
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 16px;
}
.rgft-ai-msg{
    max-width: 82%;
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    /* white-space:pre-wrap alone wraps at existing spaces/newlines but
       does NOT break a single long unbroken run of characters (a URL, a
       long order/reference number, a run-on English word) — that run
       just pushes the bubble wider than its own max-width instead of
       wrapping, which silently makes .rgft-ai-log's own overflow:auto
       become horizontally scrollable too (setting one overflow axis to
       non-visible implicitly does the same to the other, per spec) even
       though the page body itself doesn't grow — the AI page is the
       only one in the plugin showing free-form generated text (every
       other page's labels are short, known-length, human-authored), so
       this is the one place that actually needs the safeguard. */
    overflow-wrap: break-word;
}
.rgft-ai-msg--bot{
    align-self: flex-start;
    background: var(--ai-card);
    border: 1px solid var(--ai-line);
    color: var(--ai-ink);
}
/* Bot bubbles ride inside a flex row next to a small circular avatar
   (live request: the assistant's face should appear beside its replies,
   not only as the big welcome image). The row takes over the bot-side
   max-width/align-self so the avatar+bubble unit is what's constrained;
   dir=rtl flips it automatically for the English mode. */
.rgft-ai-msgrow{
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.rgft-ai-msgrow--bot{
    align-self: flex-start;
    max-width: 82%;
}
.rgft-ai-msgrow--bot .rgft-ai-msg{
    max-width: none;
    /* Flex items default to min-width:auto (min-content) — a long
       unbroken run (URL, reference number) would widen the row past its
       own max-width before overflow-wrap ever gets a chance to break it,
       recreating the exact horizontal-scroll bug the base .rgft-ai-msg
       comment guards against. min-width:0 lets the bubble shrink so the
       wrap guard keeps working inside the new row. */
    min-width: 0;
}
.rgft-ai-msg-avatar{
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(184,150,62,.35);
    background: rgba(184,150,62,.15);
}
.rgft-ai-msg-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rgft-ai-msg--user{
    align-self: flex-end;
    background: var(--ai-accent);
    color: #1a1408;
    font-weight: 500;
}
.rgft-ai-msg--thinking{ color: var(--ai-faint); font-style: italic; }

.rgft-ai-form{
    display: flex;
    gap: 10px;
    padding: 4px;
    border: 1px solid var(--ai-accent);
    border-radius: 12px;
    background: var(--ai-card);
}
.rgft-ai-form input[type="text"]{
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--ai-ink);
}
.rgft-ai-form input[type="text"]::placeholder{ color: var(--ai-faint); }
.rgft-ai-form input[type="text"]:focus{ outline: none; }
.rgft-ai-form input[type="text"]:disabled{ color: var(--ai-faint); }
.rgft-ai-form button{
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    height: 40px;
    margin: 3px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: var(--ai-accent);
    color: #1a1408;
    cursor: pointer;
}
.rgft-ai-form button:disabled{
    background: var(--ai-line);
    color: var(--ai-faint);
    cursor: not-allowed;
}
.rgft-ai-chat__hint{
    font-size: 11px;
    color: var(--ai-faint);
    margin: 10px 2px 4px;
}

.rgft-ai-suggestions{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ai-line);
}
.rgft-ai-chip{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 13px;
    text-align: start;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ai-ink);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.rgft-ai-chip:hover{ background: var(--ai-card); border-color: var(--ai-line); }
.rgft-ai-chip__num{
    font-size: 10px;
    font-weight: 600;
    color: var(--ai-faint);
    min-width: 18px;
}
.rgft-ai-chip__text{ flex: 1; }

/* The shared branded header logo box still renders inline in the chat
   head — keep it small and let it sit quietly next to the title rather
   than dominating, since this page's header is compact by design. */
.rgft-ai-chat__head .rgft-page-head-v2__logo{
    width: 100px;
    height: 40px;
    margin-inline-start: auto;
}

@media (max-width: 600px){
    .rgft-ai-msg{ max-width: 92%; }
    .rgft-ai-msgrow--bot{ max-width: 92%; }
    .rgft-ai-form{ flex-direction: column; border-radius: 12px; }
    .rgft-ai-form button{ width: calc(100% - 6px); }
    .rgft-ai-chat__head .rgft-page-head-v2__logo{ display: none; }
}