/* JobChat — production UI. Scoped under .jobchat- ; relies on globally-loaded
   Bootstrap 5.3.3 + Font Awesome 6.5.1. No external deps loaded here. */

.jobchat-app { --jc-primary:#2a6df4; --jc-primary-dark:#1b4fd6; --jc-ai:#f4f7ff;
    --jc-user:#2a6df4; --jc-ink:#1f2733; --jc-muted:#7b8794; --jc-line:#e8edf3;
    --jc-radius:16px; margin:0 auto; max-width:100%; padding:0; }  /* SPACIOUS 2026-08-22: was max-width:1180px; full-bleed (margin:0 auto harmless at 100%) */

.jobchat-shell { display:flex; gap:16px; height:calc(100vh - 220px); min-height:520px; }

/* ---- main column ---- */
/* POLISH4 2026-08-22 (#1+#2): flex-basis:0 (was auto) pins the main column width = shell minus
   rail(320px)+gap, CONTENT-INDEPENDENT — so the flex:0 0 320px rail never shifts when the first
   message/stream content arrives (kills the rail "crawl"/reflow flicker). keep min-width:0 (long
   stream words shrink). mobile keeps flex:1 1 auto in its @media (column layout, no side rail). */
.jobchat-main { flex:1 1 0; display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--jc-line); border-radius:var(--jc-radius);
    overflow:hidden; min-width:0; }

.jobchat-header { display:flex; align-items:center; justify-content:space-between;
    padding:13px 20px; border-bottom:1px solid var(--jc-line); }
.jobchat-brand { display:flex; align-items:center; gap:8px; }
.jobchat-brand-name { font-weight:600; color:var(--jc-ink); font-size:15px; line-height:1.1; }
.jobchat-brand-sub { font-size:12px; color:var(--jc-muted); margin-top:2px; }
.jobchat-dot { display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#28c76f; margin-right:5px; }
.jobchat-badge { font-size:11px; font-weight:600; color:var(--jc-muted); white-space:nowrap; }
.jobchat-badge i { margin-right:4px; }

/* ---- stream (clean, ChatGPT-like: no bubble fills, no avatars) ---- */
/* A3 2026-08-28 (owner): overscroll-behavior:contain on the base rule (desktop+mobile) stops
   scroll-chaining / elastic rubberband now that the body is locked on both pages (A1). Harmless on
   desktop where the body is already locked. */
.jobchat-stream { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:10px 26px 28px; scroll-padding-bottom:28px; }
/* Ensure the last message (incl. its follow-up line) clears the composer even after chips/widgets grow it. */
.jobchat-stream > .jobchat-row:last-child { scroll-margin-bottom:28px; }
.jobchat-row { display:flex; margin:18px 0; }
.jobchat-row:first-child { margin-top:0; }
/* tighten the gap between the greeting and the resume prompt that follows it */
#jobchat-resume-card { margin-top:6px; }
.jobchat-row-user { justify-content:flex-end; }
.jobchat-bubble { max-width:88%; font-size:15px; line-height:1.4; color:var(--jc-ink);
    word-wrap:break-word; white-space:pre-wrap; }
.jobchat-row-ai .jobchat-bubble { max-width:100%; }
.jc-vf-options { display:inline-block; line-height:2; }
.jobchat-row-user .jobchat-bubble { background:#f4f6f9; border-radius:14px; padding:10px 15px; max-width:80%; }
.jobchat-sysline { text-align:center; color:var(--jc-muted); font-size:13px; padding:16px; }
/* 4d report-deleted note — a small, light, centered one-liner (e.g. "You deleted your Salary report.") */
.jobchat-sysnote { text-align:center; color:var(--jc-muted); font-size:12px; opacity:.85; margin:10px 0; }
/* 4b action bar (ChatGPT-style) — a clean one-line row UNDER the guide's reply (AI only) holding copy (+ later
   thumbs/feedback). HIDDEN until the message row is hovered (desktop); always faintly visible on touch. Normal cursor
   over the message; POINTER (hand) only on the buttons. */
.jobchat-actions { display:flex; align-items:center; gap:2px; margin-top:6px;
    opacity:0; transition:opacity .12s ease; }
.jobchat-row-ai:hover .jobchat-actions { opacity:1; }
.jobchat-act { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px;
    border:0; border-radius:6px; background:none; cursor:pointer; color:var(--jc-muted); font-size:13px; line-height:1;
    transition:color .12s ease, background .12s ease; }
.jobchat-act:hover { color:var(--jc-ink); background:var(--jc-ai); }
.jobchat-actions-label { display:inline-flex; align-items:center; height:28px; margin-left:4px; padding:0 2px;
    color:var(--jc-muted); font-size:11.5px; font-weight:600; letter-spacing:.02em; }
/* 4b-ii feedback buttons carry a text label BEFORE the icon — tight 2px gap between the two */
.jobchat-fb-up, .jobchat-fb-down, .jobchat-fb-note { gap:2px; font-size:11.5px; font-weight:600; }
.jobchat-act.is-copied { color:#28c76f; }
/* 4b-ii feedback selected states + "Noted. Thanks!" */
.jobchat-fb-up.is-on { color:#28c76f; }
.jobchat-fb-down.is-on { color:#e03131; }
.jobchat-fb-done { display:inline-flex; align-items:center; height:28px; padding:0 8px; font-size:11.5px;
    font-weight:600; color:#28c76f; }
/* touch devices have no hover → keep the bar gently visible so it's usable */
@media (hover:none) { .jobchat-actions { opacity:.55; } }
/* 4c edit pencil — a footer action bar UNDER the last-3 user messages (flag-gated, added by JS), RIGHT-aligned to sit
   at the bottom-right of the user bubble, hover-revealed. Mirrors the AI copy control's footer style. The user row is
   a flex line (bubble right-aligned); flex-basis:100% wraps this bar onto its own line UNDER the bubble. */
.jobchat-row-user { flex-wrap:wrap; }
.jobchat-actions-user { flex-basis:100%; justify-content:flex-end; margin-top:4px; }
.jobchat-row-user:hover .jobchat-actions-user { opacity:1; }
@media (hover:none) { .jobchat-actions-user { opacity:.55; } }

/* 4b-ii written-feedback popup — a clean centered modal (own overlay; not the mobile drawer). HEX HARDCODED (not
   var(--jc-*)) because the modal may render outside .jobchat-app where those vars aren't in scope → text/buttons
   would go invisible. Values mirror the .jobchat-app palette. */
.jobchat-fb-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
    background:rgba(20,28,40,.45); padding:16px; }
.jobchat-fb-box { width:100%; max-width:440px; background:#fff; border-radius:14px; padding:20px;
    box-shadow:0 12px 40px rgba(0,0,0,.22); }
.jobchat-fb-title { font-size:16px; font-weight:600; color:#1f2733; }
.jobchat-fb-sub { font-size:13px; color:#7b8794; margin:4px 0 12px; }
.jobchat-fb-text { width:100%; box-sizing:border-box; border:1px solid #e8edf3; border-radius:10px; padding:10px 12px;
    font-size:14px; line-height:1.4; color:#1f2733; resize:vertical; font-family:inherit; }
.jobchat-fb-text:focus { outline:none; border-color:#2a6df4; }
.jobchat-fb-btns { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.jobchat-fb-cancel, .jobchat-fb-submit { border:0; border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; }
.jobchat-fb-cancel { background:#f1f3f5; color:#1f2733; }
.jobchat-fb-cancel:hover { background:#e9ecef; }
.jobchat-fb-submit { background:#2a6df4; color:#fff; }
.jobchat-fb-submit:hover { background:#1b4fd6; }
.jobchat-fb-submit:disabled { opacity:.6; cursor:default; }
/* 4a day divider — a light centered "Today / Yesterday / date" separator with a hairline on each side */
.jobchat-daysep { display:flex; align-items:center; text-align:center; margin:20px 0 6px; gap:12px; }
.jobchat-daysep::before, .jobchat-daysep::after { content:""; flex:1 1 auto; height:1px; background:var(--jc-line); }
.jobchat-daysep > span { flex:0 0 auto; color:var(--jc-muted); font-size:11.5px; font-weight:600; letter-spacing:.02em;
    text-transform:uppercase; white-space:nowrap; }

/* progress indicator — a single grounded status line with a subtle shimmer (no dots) */
.jobchat-typing { display:inline-flex; align-items:center; padding:13px 16px; }
.jobchat-typing-label { font-size:13px; font-weight:500; white-space:nowrap;
    /* shimmering text sweep = calm sense of real-time work */
    background:linear-gradient(90deg, var(--jc-primary) 0%, #9db8f0 40%, var(--jc-primary) 80%);
    background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:var(--jc-primary);
    animation:jcshim 1.6s linear infinite; }
@keyframes jcshim { 0%{ background-position:200% 0; } 100%{ background-position:-40% 0; } }
/* Growth-Mode preloader (owner 2026-08-05): a simple, clean three-dot typing indicator — no job-search label.
   Additive + namespaced; Job-Market preloader above is unchanged. */
.jobchat-typing-dots { gap:5px; }
.jobchat-typing-dots .jc-dot { width:7px; height:7px; border-radius:50%; background:var(--jc-primary); opacity:.35;
    display:inline-block; animation:jcbounce 1.2s ease-in-out infinite; }
.jobchat-typing-dots .jc-dot:nth-child(2){ animation-delay:.18s; }
.jobchat-typing-dots .jc-dot:nth-child(3){ animation-delay:.36s; }
@keyframes jcbounce { 0%,80%,100%{ transform:translateY(0); opacity:.35; } 40%{ transform:translateY(-4px); opacity:1; } }
/* "[Agent] is on the job…" header — pinned above the live status lines during a paid agent run (the wow) */
.jobchat-typing-agent { flex-direction:column; align-items:flex-start; gap:6px; }
.jobchat-agent-live { font-size:13.5px; color:var(--jc-ink); display:flex; align-items:center; gap:6px; }
.jobchat-agent-live b { color:var(--jc-primary); font-weight:600; }
/* Agent-live header uses the SAME clean circular ring as the Job List rail card (no zap icon). */
.jobchat-agent-live .jobchat-card-spin { width:13px; height:13px; }
/* follow-up question shown UNDER a results link (P1 continuity) */
.jobchat-followup { margin-top:9px; font-size:14.5px; font-weight:400; color:var(--jc-ink); opacity:.92; }
/* Follow-up rendered as its own bubble (after "Also try" links) — no top margin needed. */
.jobchat-followup-solo { margin-top:0; }
/* Honest demography/live-market "Tip" — soft amber, non-alarming; appears after links, before follow-up. */
.jobchat-tip { background:#fff8e6 !important; border:1px solid #ffe3a3; color:#555555;
    font-weight:600; font-size:13px; line-height:1.5; }
.jobchat-tip i { color:#d99a00; margin-right:5px; }

/* ---- suggestion chips ---- */
.jobchat-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.jobchat-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
    border:1px solid var(--jc-primary); background:rgba(42,109,244,.06); color:var(--jc-primary);
    border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
    transition:background .15s, transform .1s; }
.jobchat-chip:hover { background:var(--jc-primary); color:#fff; transform:translateY(-1px); }
.jobchat-chip i { font-size:12px; }

/* ---- composer ---- */
.jobchat-composer { border-top:1px solid var(--jc-line); padding:14px 16px; background:#fff; }
/* border-radius 12px to match base.css input[type=text]/[type=password] (owner 2026-08-05). */
.jobchat-inputwrap { display:flex; align-items:center; gap:3px; background:#f4f7fb;
    border:1px solid var(--jc-line); border-radius:12px; padding:5px 3px 1px 1px;
    transition:border-color .15s, box-shadow .15s; }
.jobchat-inputwrap:focus-within { border-color:var(--jc-primary); box-shadow:0 0 0 4px rgba(42,109,244,.1); background:#fff; }
/* + MOVED RIGHT (owner 2026-08-05) via flex order — input takes the left, controls sit right, inside the wrap.
   DOM order is unchanged (no fragile template move); order alone repositions. */
.jobchat-input { flex:1 1 auto; order:1; border:0; outline:0; background:transparent; font-size:15px; color:var(--jc-ink); -webkit-appearance:none; appearance:none; }
/* CSS6 2026-08-28: input is type="search" (suppresses Android-Chrome address/card/contact autofill on a plain text box); strip the webkit search chrome (clear-× + rounded pill) so it renders exactly like the prior type=text. */
.jobchat-input::-webkit-search-decoration, .jobchat-input::-webkit-search-cancel-button, .jobchat-input::-webkit-search-results-button, .jobchat-input::-webkit-search-results-decoration { -webkit-appearance:none; appearance:none; display:none; }
/* Tasks #1/#2 — a pending L2 "Change …" switch prompt shows blue (stripped on first edit/send). */
.jobchat-input.jc-input-switch { color:var(--jc-primary); font-weight:600; }
.jobchat-plus-wrap-right { order:2; }
#jobchat-send  { order:3; }
#jobchat-stop  { order:4; }
/* the "+" menu now anchors to the RIGHT edge (it lives on the right side of the wrap). */
.jobchat-plus-menu-right { left:auto !important; right:0; }
.jobchat-resumebtn { flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
    background:transparent; color:var(--jc-muted); cursor:pointer; font-size:16px;
    transition:background .15s, color .15s; }
.jobchat-resumebtn:hover { background:rgba(42,109,244,.1); color:var(--jc-primary); }
.jobchat-resumebtn:disabled { opacity:.4; cursor:not-allowed; }
.jobchat-sendbtn { flex:0 0 auto; width:42px; height:42px; border:0; border-radius:50%;
    background:var(--jc-primary); color:#fff; cursor:pointer; transition:background .15s, transform .1s; }
.jobchat-sendbtn:hover { background:var(--jc-primary-dark); }
.jobchat-sendbtn:active { transform:scale(.94); }
.jobchat-sendbtn:disabled, .jobchat-input:disabled { opacity:.5; cursor:not-allowed; }
.jobchat-hint { text-align:center; font-size:11.5px; color:var(--jc-muted); margin-top:9px; }
.jobchat-hint i { color:#28c76f; margin-right:4px; }

/* ---- "+" attach menu (modern-LLM composer) ---- */
.jobchat-plus-wrap { flex:0 0 auto; position:relative; }
.jobchat-plusbtn { width:38px; height:38px; border:0; border-radius:50%; background:transparent;
    color:#0e37f1; cursor:pointer; font-size:17px; transition:background .15s, color .15s, transform .15s; }
.jobchat-plusbtn:hover { background:rgba(42,109,244,.1); color:var(--jc-primary); }
.jobchat-plusbtn[aria-expanded="true"] { background:rgba(42,109,244,.12); color:var(--jc-primary); transform:rotate(45deg); }
.jobchat-plusbtn:disabled { opacity:.4; cursor:not-allowed; }
.jobchat-plus-menu { position:absolute; bottom:calc(100% + 10px); left:0; z-index:30; min-width:210px;
    background:#fff; border:1px solid var(--jc-line); border-radius:12px; padding:6px;
    box-shadow:0 10px 30px rgba(31,39,51,.16); }
.jobchat-plus-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0;
    background:transparent; padding:10px 12px; border-radius:9px; font-size:13.5px; color:var(--jc-ink);
    cursor:pointer; transition:background .12s; }
.jobchat-plus-item:hover { background:#f0f5ff; color:var(--jc-primary-dark); }
.jobchat-plus-item i { color:var(--jc-primary); width:16px; text-align:center; }

/* ---- STOP button (shown only during a free chat/search wait) ---- */
.jobchat-stopbtn { flex:0 0 auto; width:42px; height:42px; border:0; border-radius:50%;
    background:#e03131; color:#fff; cursor:pointer; transition:background .15s, transform .1s; }
.jobchat-stopbtn:hover { background:#c92a2a; }
.jobchat-stopbtn:active { transform:scale(.94); }

/* ---- rail drawer toggle (mobile) + close (X) — hidden on desktop ---- */
.jobchat-rail-toggle { display:none; margin-left:10px; width:38px; height:38px; border:0; border-radius:10px;
    background:rgba(42,109,244,.1); color:var(--jc-primary); cursor:pointer; font-size:15px; }
.jobchat-rail-close { display:none; margin-left:auto; border:0; background:transparent; color:var(--jc-muted);
    cursor:pointer; font-size:18px; line-height:1; padding:2px 4px; }
.jobchat-rail-head { display:flex; align-items:center; }
/* GUEST rail CTA (owner 2026-08-29): the join + 1-click sign-in block inside #jobchat-rail-empty shows ONLY
   on /jobchat MOBILE for guests (NOT the member-gated dashboard widget). Hidden by default; the mobile media
   query below flips it to flex. jd-* + firebaseauth-wrapper visual styling is global in the theme CSS.
   INDEX-WIDGET 2026-08-31 (-m68): base_index_page twin so the SAME guest CTA rides the /index mobile rail
   (index_widget.php sets $isGuest; block is guest-gated in dashboard_widget.html). Add-only; /dashboard is
   member-gated so $isGuest=0 there → no base_user_dashboard twin needed. */
body.jobchat_ctrl_chat_index .jd-hero-actions,
body.base_index_page .jd-hero-actions { display:none; }
/* ---- drawer backdrop (mobile) — dims chat while rail is open ---- */
.jobchat-backdrop { position:fixed; inset:0; background:rgba(15,23,35,.45); z-index:40;
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; }
.jobchat-backdrop.is-open { opacity:1; visibility:visible; }

/* ---- inline job link (in AI bubble): minimal clean blue text link ---- */
.jobchat-joblink { display:flex; align-items:center; gap:6px; margin-top:8px;
    color:var(--jc-primary); text-decoration:none; font-size:14px; font-weight:600; }
.jobchat-joblink span.jobchat-joblink-txt { border-bottom:1px solid transparent; transition:border-color .15s, color .15s; }
.jobchat-joblink:hover { color:var(--jc-primary-dark); }
.jobchat-joblink:hover span.jobchat-joblink-txt { border-bottom-color:var(--jc-primary-dark); }
.jobchat-joblink i { font-size:11px; opacity:.75; }
/* cap "Delete a few to run more" CTA — red, trash icon leads */
.jobchat-managelink { color:#e03131; }
.jobchat-managelink:hover { color:#c92a2a; }
.jobchat-managelink:hover span.jobchat-joblink-txt { border-bottom-color:#c92a2a; }
.jobchat-managelink i { opacity:1; font-size:12px; }

/* ---- result cards (salary / roles / roadmap) ---- */
/* Card bubbles hold structured HTML, not chat text — reset pre-wrap so the template's
   indentation/newlines don't render as phantom blank space (was adding ~96px). */
.jobchat-bubble-card { background:transparent !important; border:0 !important; padding:0 !important;
    white-space:normal !important; line-height:normal; width:100%; }
.jobchat-rescard { border:1px solid #d9e6ff; border-radius:12px; overflow:hidden; min-width:260px; max-width:340px;
    box-shadow:0 4px 14px rgba(42,109,244,.1); background:#fff; }
.jobchat-rescard-h { background:linear-gradient(135deg,var(--jc-primary),#6f42c1); color:#fff;
    padding:10px 14px; font-weight:600; font-size:13.5px; }
.jobchat-rescard-h i { margin-right:6px; }
.jobchat-sal-row { display:flex; justify-content:space-between; align-items:center;
    padding:9px 14px; font-size:13.5px; border-top:1px solid #f0f4fa; }
.jobchat-sal-row span { color:var(--jc-muted); }
.jobchat-sal-row b { color:var(--jc-ink); font-size:14.5px; }
.jobchat-role { padding:9px 14px; border-top:1px solid #f0f4fa; }
.jobchat-role-t { font-size:13.5px; font-weight:600; color:var(--jc-ink); }
.jobchat-role-sal { color:var(--jc-primary); font-weight:600; font-size:12px; }
.jobchat-role-r { font-size:12px; color:var(--jc-muted); margin-top:2px; }
.jobchat-rm-body { padding:11px 14px; font-size:13px; color:var(--jc-ink); border-top:1px solid #f0f4fa; }
/* Job List rail card — "building…" state (a small spinner in place of the icon + subtle accent) */
.jobchat-card-building { position:relative; }
.jobchat-card-building .jobchat-card { border-color:rgba(42,109,244,.35); background:linear-gradient(180deg,#fbfdff,#fff); }
.jobchat-card-spin { display:inline-block; width:15px; height:15px; border-radius:50%;
    border:2px solid rgba(42,109,244,.25); border-top-color:var(--jc-primary); animation:jcspin .8s linear infinite; }
@keyframes jcspin { to { transform:rotate(360deg); } }

/* Job List (4th tool) "building…" card */
.jobchat-jl-body { padding:12px 14px; border-top:1px solid #f0f4fa; }
.jobchat-jl-status { font-size:13px; color:var(--jc-ink); line-height:1.5; }
.jobchat-jl-note { font-size:12px; color:var(--jc-muted); margin-top:7px; line-height:1.5; }
.jobchat-jl-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px;
    background:var(--jc-primary); animation:jcpulse 1.4s infinite ease-in-out; vertical-align:middle; }
@keyframes jcpulse { 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }
/* Job List "ready" card — uses the same bluish rescard header as the other tool cards (no green). */
.jobchat-jl-status i { color:var(--jc-primary); margin-right:6px; }
.jobchat-rescard-f { display:block; text-align:center; padding:9px; font-size:12.5px; font-weight:600;
    color:var(--jc-primary); text-decoration:none; border-top:1px solid #eef2f8; background:#fafcff; }
.jobchat-rescard-f:hover { background:#f0f5ff; color:var(--jc-primary-dark); }
.jobchat-card-metric { font-size:11px; color:var(--jc-primary); font-weight:600; margin-top:2px; }

/* ---- interactive widgets ---- */
.jobchat-widget { margin-bottom:10px; }
.jobchat-wbtns { display:flex; flex-wrap:wrap; gap:8px; }
.jobchat-wbtn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:1px solid var(--jc-primary);
    background:#fff; color:var(--jc-primary); border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer;
    transition:background .15s, color .15s, transform .1s; }
.jobchat-wbtn:hover { background:var(--jc-primary); color:#fff; transform:translateY(-1px); }
/* R1-b (owner ruling R1, 2026-09-03): TWO-LINE picker button — label + the plugin's own muted hint (roadmap-mode picker
   mirrors /career-roadmap's mode chips). Only buttons carrying .jc-wbtn-2l change; single-line buttons are untouched. */
.jobchat-wbtn.jc-wbtn-2l { flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.jc-wbtn-sub { display:block; font-size:12px; font-weight:500; color:var(--jc-muted); line-height:1.3; }
.jobchat-wbtn:hover .jc-wbtn-sub { color:#fff; }
.jobchat-toggle-w, .jobchat-choices-w { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#f4f7fb; border:1px solid var(--jc-line); border-radius:12px; padding:12px 14px; }
.jobchat-toggle-lbl { font-size:14px; font-weight:600; color:var(--jc-ink); min-width:120px; }
.jobchat-toggle-hint { flex-basis:100%; font-size:12px; color:#6b7280; margin:2px 2px 0; line-height:1.4; }
.jobchat-toggle-side { font-size:14px; font-weight:600; color:#9aa3b2; transition:color .15s; }
.jobchat-toggle-side.jc-tg-on { color:#16a34a; }
.jobchat-choices-w { align-items:stretch; }
.jobchat-choices-w .choices { flex:1 1 auto; margin:0; min-width:200px; }
.jobchat-choices-w .jobchat-wbtn { align-self:center; }

.jobchat-alsotry { font-size:13px; color:var(--jc-muted); font-weight:600; }

/* ---- confirm-before-run ---- */
.jobchat-confirm { background:#f4f7fb; border:1px solid var(--jc-line); border-radius:12px; padding:12px 14px; }
.jobchat-confirm-t { font-size:14px; color:var(--jc-ink); margin-bottom:10px; }
/* agent brief line under the "Ready to activate…" title — the user reads it before activating */
.jobchat-confirm-sum { font-size:13px; color:var(--jc-muted); margin:-4px 0 10px; line-height:1.5; }
.jobchat-wbtn-go { background:var(--jc-primary); color:#fff; border-color:var(--jc-primary); }
.jobchat-wbtn-go:hover { background:var(--jc-primary-dark); color:#fff; }
/* re-run PRE-SELECT (owner 2026-08-16, softened 2026-08-24): the PRIOR choice shown as a SOFT highlight (light tint + primary text/border) so the user sees what's remembered but reads it as tap-to-keep-or-change, NOT a locked/done selection. No auto-submit. */
.jobchat-wbtn.jc-wbtn-on { background:rgba(42,109,244,0.10); color:var(--jc-primary); border-color:var(--jc-primary); box-shadow:0 0 0 2px rgba(42,109,244,0.12) inset; }
.jobchat-wbtn.jc-wbtn-on:hover { background:var(--jc-primary); color:#fff; }
.jobchat-wbtn-ghost { border-color:var(--jc-line); color:var(--jc-muted); }
.jobchat-wbtn-ghost:hover { background:#eef2f8; color:var(--jc-ink); }

/* ---- resume prompt (clean, minimal) ---- */
.jobchat-resume-prompt { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.jobchat-resume-sub { font-size:13px; color:var(--jc-muted); line-height:1.5; margin:0; }

/* ---- rail ---- */
/* z-index 99 (owner 2026-08-05, was effectively unset/50 on the drawer) so the rail + its cards sit above chat chrome. */
.jobchat-rail { flex:0 0 320px; background:#fff; border:1px solid var(--jc-line);
    border-radius:var(--jc-radius); position:relative; z-index:99;
    display:flex; flex-direction:column; overflow:hidden; }
.jobchat-rail-head { padding:15px 18px; font-weight:700; color:var(--jc-ink);
    border-bottom:1px solid var(--jc-line); font-size:14.5px; }
.jobchat-rail-head i { color:var(--jc-primary); margin-right:8px; }
.jobchat-rail-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px; }
.jobchat-rail-empty { text-align:center; color:var(--jc-muted); padding:30px 12px; }
.jobchat-rail-empty i { font-size:32px; color:#cfd8e6; display:block; margin-bottom:12px; }
.jobchat-rail-empty p { font-size:13px; line-height:1.5; margin:0; }
/* req-3 — sidebar trust strip, /jobchat-scoped clone of magic jh-footer-trust; lives inside
   #jobchat-rail-empty so it auto-hides via the existing addRailCard() .remove() on first tool card. */
.jobchat-rail-trust { margin-top:22px; padding-top:18px; border-top:1px solid var(--jc-line); text-align:center; }
.jobchat-rail-trust h4 { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--jc-muted); margin:0 0 14px; }
.jobchat-rail-trust-logos { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
.jobchat-rail-trust-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.jobchat-rail-trust-item img { width:auto; height:34px; max-width:100%; object-fit:contain;
    filter:grayscale(1); opacity:.7; transition:filter .2s ease, opacity .2s ease; }
.jobchat-rail-trust-item:hover img { filter:grayscale(0); opacity:1; }
.jobchat-rail-trust-item span { font-size:10.5px; line-height:1.3; color:var(--jc-muted); }
/* req-4a — inline Install App link under the honesty hint (reveal-gated by jobchat.js via oxpwa bridge). */
.jobchat-install-link { display:inline-flex; align-items:center; gap:6px; float:right; clear:both; margin:8px 0 0; padding:5px 12px;
    font-size:12px; font-weight:600; color:var(--jc-primary); background:rgba(42,109,244,.07);
    border:1px solid rgba(42,109,244,.18); border-radius:999px; text-decoration:none; width:max-content;
    transition:background .15s ease; }
.jobchat-install-link:hover { background:rgba(42,109,244,.13); text-decoration:none; }
.jobchat-install-link i { font-size:13px; }
.jobchat-card { position:relative; display:flex; align-items:center; gap:11px; padding:12px 22px 12px 12px;
    margin-bottom:10px;
    border:1px solid var(--jc-line); border-radius:12px; text-decoration:none; color:var(--jc-ink);
    background:#fff; transition:border-color .15s, box-shadow .15s, transform .1s; }
.jobchat-card:hover { border-color:var(--jc-primary); box-shadow:0 6px 16px rgba(42,109,244,.12);
    transform:translateY(-1px); color:var(--jc-ink); }
.jobchat-card-ic { flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:inline-flex;
    align-items:center; justify-content:center; background:rgba(42,109,244,.1); color:var(--jc-primary); }
.jobchat-card-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.jobchat-card-title { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jobchat-card-tool { font-size:11px; color:var(--jc-muted); }
/* ↗ open-icon lives in the bottom-right gutter; delete (below) sits top-right — no overlap. */
.jobchat-card-go { position:absolute; right:9px; bottom:9px; color:var(--jc-muted); font-size:11px; }

/* ---- rail filters (source chips) ---- */
.jobchat-rail-filters { display:flex; flex-wrap:wrap; gap:6px; padding:12px 16px 0; }
.jobchat-rf { font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; cursor:pointer;
    border:1px solid var(--jc-line); background:#fff; color:var(--jc-muted); transition:all .15s; }
.jobchat-rf:hover { border-color:var(--jc-primary); color:var(--jc-primary); }
.jobchat-rf.is-on { background:var(--jc-primary); border-color:var(--jc-primary); color:#fff; }
.jobchat-rf i { margin-right:4px; }

/* ---- rail card wrapper + delete ---- */
.jobchat-card-wrap { position:relative; }
.jobchat-card-wrap .jobchat-card { margin-bottom:10px; }
/* delete sits in the TOP-right gutter; the ↗ open-icon is in the BOTTOM-right gutter — they
   share the reserved 22px right padding of the card but never overlap (different corners). */
.jobchat-card-del { position:absolute; top:7px; right:6px; width:22px; height:22px; border:none;
    background:transparent; color:#c2ccda; border-radius:6px; cursor:pointer; font-size:11.5px; z-index:2;
    display:none; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.jobchat-card-wrap:hover .jobchat-card-del { display:inline-flex; }
.jobchat-card-del:hover { background:rgba(224,49,49,.1); color:#e03131; }
.jobchat-card-del:disabled { opacity:.5; cursor:default; }

/* ---- responsive ---- */
@media (max-width:900px){
    /* 3a — chat fills the viewport, no page scroll; the stream is the only scroller (composer pinned). */
    /* The desktop rule (below) sets .ow_page margin:0 18px 0 124px to reclaim the wide left gutter.
       On mobile that 124px/18px margin kills full-width — reset it so the chat spans the whole screen. */
    body.jobchat_ctrl_chat_index .ow_page,
    body.base_user_dashboard .ow_page,
    body.base_index_page .ow_page { margin:0 !important; }
    .jobchat-app { margin:auto; padding:0; max-width:100%; }
    /* WORLD-CLASS 2026-08-28 (owner): the DOCUMENT is the sole scroller on mobile now (body lock removed
       @A1). Kill the two nested scrollers (shell + stream) so the page grows naturally and there is no
       rubber-band; the .jobchat-composer is pinned via position:fixed below (1c). */
    .jobchat-shell { flex-direction:column; height:auto; min-height:0; gap:0; }
    .jobchat-main { order:1; flex:1 1 auto; height:auto; min-height:0; border:0; border-radius:0; box-shadow:none; }
    .jobchat-stream { height:auto; min-height:0; overflow:visible; overscroll-behavior:auto; }  /* base @33 kept for desktop; stream grows naturally, document scrolls */
    .jobchat-bubble { max-width:86%; }

    /* 2026-08-29 FIX2 (owner): hide the gotop #toTop button on /jobchat + /dashboard, mobile only.
       gotop JS toggles inline style.display on scroll → !important REQUIRED to beat the inline rule.
       jobchat.css loads ONLY on these two pages + body-scoped ⇒ no gotop/core edit, no other-role impact. */
    body.jobchat_ctrl_chat_index #toTop,
    body.base_user_dashboard #toTop,
    body.base_index_page #toTop { display:none !important; }

    /* 2026-08-29 FIX3 (owner): tighten chip gap+padding on mobile only. Base :137 kept for desktop. */
    .jobchat-chip{ gap:4px; padding:4px 7px; }

    /* WORLD-CLASS FIXED COMPOSER 2026-08-28: pinned to the visible-screen bottom while the page scrolls.
       iOS keyboard tracking is handled in JS (VisualViewport lifts the bottom); env(safe-area-inset-bottom)
       clears the iPhone home indicator at rest. z-index 35 > plus-menu 30 (@183) but < backdrop 40 (@205)
       < drawer 99 (@443) so an open rail + backdrop correctly cover it. */
    .jobchat-composer {
        position:fixed; left:0; right:0; bottom:0; z-index:35;
        background:#fff; border-top:1px solid var(--jc-line);
        padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
    }
    /* Reserve space so the last message clears the fixed composer. JS sets --jc-composer-h =
       composer.offsetHeight on init + chips/widget change; 132px is the safe static fallback before JS runs. */
    .jobchat-stream { padding-bottom: var(--jc-composer-h, 132px); }

    /* MOBILE-d (owner 2026-08-25): kill the CORE theme footer-reserve on /jobchat MOBILE.
       magic base.css:225 gives every page's .ow_page_padding a padding-bottom:99px (footer reserve).
       On /jobchat the .jobchat-shell is already pinned to the full viewport (height:100dvh above) and
       the .jobchat-composer pins as the shell's last flex child (NOT position:fixed) — so the 99px
       ancestor pad just adds dead space BELOW the pinned composer → a page-level gap/scroll under the
       chat on mobile. Zero it (mirrors the shipped DESKTOP rule @520 which sets the same on min-width:901px).
       SAFE at 0: the composer pins inside the 100dvh shell above .jobchat-stream (the only scroller) — the
       last message can't hide behind it. NO core/theme edit — this is a /jobchat-scoped body selector inside
       jobchat.css (which only loads on /jobchat), reusing the exact idiom already used for .ow_footer @455. */
    body.jobchat_ctrl_chat_index .ow_page_padding,
    body.base_user_dashboard .ow_page_padding,
    body.base_index_page .ow_page_padding { padding-bottom:0 !important; }

    /* CSS6-MOBILE-FREEZE 2026-08-28 (dashboard widget only): on MOBILE the desktop viewport-freeze
       (@media min-width:901 @523: body.base_user_dashboard{overflow:hidden} + dvh chain) does NOT apply,
       so on /dashboard the 95dvh .jobchat-shell sits inside FOUR un-height-locked widget ancestors
       (#place_sections > .place_section.top_section > .ow_dnd_widget.dashboard-JOBCHAT_CMP_DashboardWidget
       > .ow_box_empty — verified in the live /dashboard DOM) → the body over-scrolls past the fold and
       shows a phantom white gap + rubber-band below the chat. FIX (add-only, scoped to
       body.base_user_dashboard — CANNOT touch /jobchat (different body class) nor any page/role where the
       widget doesn't load): (a) lock the page scroll; (b) collapse the four deep widget ancestors to
       zero-margin/zero-pad block-flow so the self-pinned 95dvh shell owns the fold with nothing free-height
       above/below it. The .jobchat-stream inside the shell stays the only scroller (composer pins as the
       shell's last flex child, same as /jobchat mobile). NO core/theme edit. */
    /* WORLD-CLASS 2026-08-28 (owner): the mobile body/html overflow-LOCK (formerly here, covering both
       /dashboard AND /jobchat) is REMOVED — on mobile the DOCUMENT is now the sole scroller (the 49px
       .ow_site_panel scrolls away, the in-stream header scrolls with content, and .jobchat-composer is
       position:fixed to the visible-screen bottom). Locking the body reintroduced the two-nested-scroller
       rubber-band. Desktop (min-width:901 @582) keeps its own separate viewport lock — UNTOUCHED. */
    body.base_user_dashboard #place_sections,
    body.base_user_dashboard .place_section.top_section,
    body.base_user_dashboard .ow_dnd_widget.dashboard-JOBCHAT_CMP_DashboardWidget,
    body.base_user_dashboard .ow_box_empty.dashboard-JOBCHAT_CMP_DashboardWidget {
        margin:0 !important; padding:0 !important; }
    /* INDEX-WIDGET 2026-08-31 (-m67): parallel collapse for the /index DnD wrappers so the self-pinned
       shell owns the fold with no free-height ancestor above/below. Superset of the dashboard block
       (adds .top_content + generic .place_section) — the exact /index ancestor chain is owner live-DOM
       verified; add-only, scoped to body.base_index_page (cannot touch /jobchat or /dashboard). */
    body.base_index_page #place_sections,
    body.base_index_page .top_content,
    body.base_index_page .place_section,
    body.base_index_page .ow_dnd_widget.index-JOBCHAT_CMP_IndexWidget,
    body.base_index_page .ow_box_empty.index-JOBCHAT_CMP_IndexWidget {
        margin:0 !important; padding:0 !important; }

    /* MOBILE-c (owner 2026-08-25): on the mobile header, hide the brand name and the "AI Agents" badge
       to declutter the small header — KEEP .jobchat-brand-sub visible (owner ruling: the "Real-time job
       market of Bharat" tagline stays). NOTE: .jobchat-brand-sub is a CHILD of .jobchat-brand-txt in the
       DOM (chat_index.html), so we must NOT display:none the .jobchat-brand-txt container itself — doing
       so would also hide brand-sub. Hiding brand-name (its only other child) leaves the txt block showing
       just the tagline, which is the owner's intent. Pure header labels; #jobchat-rail-toggle (the mobile
       rail opener) is a separate element and is untouched. Desktop already hides the whole .jobchat-header
       (@media min-width:901px), so this is mobile-scoped only. */
    .jobchat-brand-name, .jobchat-badge { display:none; }

    /* MOBILE SCROLL-AWAY HEADER 2026-08-28 (owner): the .jobchat-header is now the FIRST child INSIDE
       #jobchat-stream (the sole scroller), so it scrolls UP with the chat content on mobile (more reading
       room, mirroring desktop where the header is display:none). Base .jobchat-header is position:static
       (verified @19) → it scrolls in-flow as row 1, no override needed. The stream gets a small padding-top
       so the scrolling header clears the FIXED toggle at rest. The rail-toggle was moved OUT of the header
       to be a direct child of .jobchat-main (sibling of the stream) so this position:fixed rule floats it,
       keeping it reachable while the header scrolls away. z-index:60 is above the stream but below the
       backdrop-covered drawer (z-index:99 @417) so the open drawer still overlays it. */
    .jobchat-stream { padding-top:8px; }
    /* 3b — the reports rail becomes a right-side slide-in DRAWER (overlay), not a stacked pane. */
    /* WORLD-CLASS 2026-08-28 (owner): top:10px. The body lock is removed (A1) so the 49px site panel now
       SCROLLS AWAY on both pages; a position:fixed toggle at 10px reads as a normal floating FAB pinned to
       the top-right of the viewport regardless of scroll. z-index:60 above the stream but below the
       backdrop-covered drawer (99) so an open drawer overlays it. */
    .jobchat-rail-toggle { display:inline-flex; align-items:center; justify-content:center;
        position:fixed; top:57px; right:10px; z-index:60; background:inherit; box-shadow:0 2px 8px rgba(15,23,35,.18); }
    /* SCROLL-REACTIVE (owner 2026-08-29): at rest (scrollTop 0) the toggle sits BELOW the 49px .ow_site_panel
       (57px = 49+8). jobchat.js adds .jc-toggle-stuck once window.scrollY > 49 (the panel has scrolled away),
       pinning it to top:10px as a normal floating FAB. background:inherit → inherits .jobchat-main #fff. */
    .jobchat-rail-toggle.jc-toggle-stuck { top:10px; }
    /* GUEST rail CTA — /jobchat + /index mobile only (see base rule ~:206). INDEX-WIDGET 2026-08-31 (-m68):
       base_index_page twin so the guest CTA shows in the /index mobile rail exactly like /jobchat. */
    body.jobchat_ctrl_chat_index .jd-hero-actions,
    body.base_index_page .jd-hero-actions { display:grid; }
    .jobchat-rail-close { display:block; }
    .jobchat-rail { position:fixed; top:0; right:0; bottom:0; height:100dvh; width:min(88vw,340px);
        max-width:none; flex-basis:auto; order:2; border-radius:0; border:0; box-shadow:-8px 0 30px rgba(31,39,51,.18);
        transform:translateX(100%); transition:transform .28s ease; z-index:99; }
    .jobchat-rail.is-open { transform:none; }
    /* while the drawer is open, stop the page behind it from scrolling */
    body.jobchat-drawer-open { overflow:hidden; }
    /* MOBILE composer (owner 2026-08-05): full-width, spacious, minimal padding so + / type / send are easy to tap. */
    .jobchat-inputwrap { gap:6px; padding:5px 6px 5px 12px; border-radius:12px; }
    .jobchat-input { font-size:16px; }               /* 16px = iOS no-zoom-on-focus */
    .jobchat-plusbtn { width:40px; height:40px; }
    .jobchat-sendbtn, .jobchat-stopbtn { width:40px; height:40px; }
}
/* Desktop safety: the drawer toggle/close + backdrop never show above the breakpoint (belt-and-braces). */
@media (min-width:901px){
    .jobchat-rail-toggle, .jobchat-rail-close, .jobchat-backdrop { display:none !important; }
}

/* ---- in-chat "ready" card: top-3 match preview (footer links to the job plugin's /job/saved page) ---- */
.jobchat-jl-top { margin-top:4px; display:flex; flex-direction:column; }
.jobchat-jl-job { display:block; padding:9px 0; border-top:1px solid #eef2f8; text-decoration:none; }
.jobchat-jl-job:first-child { border-top:0; }
.jobchat-jl-job-t { font-size:13px; font-weight:600; color:var(--jc-ink); line-height:1.3; }
.jobchat-jl-job-t i { font-size:10px; color:var(--jc-muted); margin-left:5px; }
.jobchat-jl-job:hover .jobchat-jl-job-t { color:var(--jc-primary); }
.jobchat-jl-job-co { font-size:11.5px; color:var(--jc-muted); margin-top:1px; }

/* ---- PAGE CHROME (jobchat index ONLY) — scoped to the unique body class so the rest of the site is
        untouched. Oxwall tags the <body> with {plugin}_ctrl_{controller}_{action}, so
        body.jobchat_ctrl_chat_index targets exactly this page. ---- */
body.jobchat_ctrl_chat_index .ow_page,
body.base_user_dashboard .ow_page,
body.base_index_page .ow_page { margin: 0 9px 0 124px; }   /* reclaim the wide left gutter -> near-full-width chat; SPACIOUS 2026-08-22: right 18px->9px (owner). DASHBOARD-WIDGET 2026-08-28 (-m54): /dashboard uses the SAME general.html master (verified) → same reclaim so the widget spans near-full-width like /jobchat. */
body.jobchat_ctrl_chat_index h1.ow_stdmargin,
body.base_user_dashboard h1.ow_stdmargin,
body.base_index_page h1.ow_stdmargin { display: none; }      /* hide the default page heading (on /jobchat + the /dashboard "Dashboard" heading) so the chat shell owns the area */
body.jobchat_ctrl_chat_index #ow_bottom_nav,
body.base_user_dashboard #ow_bottom_nav,
body.base_index_page #ow_bottom_nav { display: none !important; }  /* hide the theme bottom-nav on /jobchat + /dashboard ONLY (element lives in magic theme; scoped here so no theme edit + rest of site untouched) */

/* ===== OUT-OF-CREDITS UPSELL (monetization) — INLINE reply style (owner Jul 26). Additive only.
   Rendered inside a normal .jobchat-bubble-card via addAiHtml() → chat + composer stay visible. A
   soft-bordered panel, NOT a heavy card; reuses theme vars; elite/clean/minimal. ===== */
.jobchat-upsell { border:1px solid var(--jc-line); border-left:3px solid var(--jc-primary);
    border-radius:12px; padding:13px 15px; background:linear-gradient(180deg,#fbfdff,#fff); max-width:520px; }
.jobchat-upsell-head { font-size:15px; font-weight:600; color:var(--jc-ink); line-height:1.35;
    display:flex; align-items:center; gap:8px; }
.jobchat-upsell-head i { color:var(--jc-primary); }
.jobchat-upsell-body { margin-top:7px; font-size:14px; color:var(--jc-ink); line-height:1.5; }
.jobchat-upsell-cta { display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:10px 18px;
    background:var(--jc-primary); color:#fff !important; font-weight:600; font-size:14px; border-radius:10px;
    text-decoration:none; transition:background .15s ease; }
.jobchat-upsell-cta:hover, .jobchat-upsell-cta:visited, .jobchat-upsell-cta:focus {
    background:var(--jc-primary-dark); color:#fff !important; text-decoration:none; }
.jobchat-upsell-cta i { font-size:12px; }
.jobchat-upsell-links { display:flex; gap:16px; margin-top:11px; flex-wrap:wrap; }
.jobchat-upsell-toggle { font-size:12.5px; color:var(--jc-primary); text-decoration:none; cursor:pointer; }
.jobchat-upsell-toggle:hover { text-decoration:underline; }
.jobchat-upsell-exp { margin-top:8px; padding:10px 12px; background:var(--jc-ai); border-radius:10px;
    font-size:12.5px; color:var(--jc-ink); line-height:1.55; max-width:520px; }

/* ── Two-tab rail header: Career Reports | Career Growth (owner 2026-08-04). Spacious, ellipsis (never wrap), X flex:0. ── */
.jobchat-rail-tabs{display:flex;align-items:center;gap:6px;padding:10px 12px}
/* POLISH4 2026-08-22 (#4): allow 2 LINES (was white-space:nowrap + text-overflow:ellipsis, which cut
   "Career Reports"/"Career Growth"/"More Links" in the 3-way-split 320px rail). white-space:normal +
   -webkit-line-clamp:2 box + centered text + min-height for 2 lines so all 3 tabs share the row and
   fully show on two lines with underlines level. keep flex:1 1 0 + min-width:0 (equal 3-way split). */
.jobchat-rail-tab{flex:1 1 0;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.2;min-height:2.4em;text-align:center;background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 6px;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;border-radius:6px 6px 0 0}
.jobchat-rail-tab.is-on{color:#0b7a4b;border-bottom-color:#0b7a4b}
.jobchat-rail-tab i{margin-right:5px}
.jobchat-rail-tabs .jobchat-rail-close{flex:0 0 auto;margin-left:2px}
/* Panels: only the active one shows → the sidebar space is never cluttered by both at once. */
.jobchat-rail-panel{display:none}
/* UI-H1 FIX (2026-08-06): the active panel must be the SCROLL container. The 2-tab refactor left it display:block
   with no flex/height, so the child .jobchat-rail-body{flex:1;overflow-y:auto} had no flex context or bounded height
   → a long reports/chapters list expanded past the rail and got clipped (rail is overflow:hidden), with NO scrollbar.
   Make the active panel a flex column that fills the rail (flex:1 1 auto; min-height:0), so the body's overflow-y
   engages and a long list scrolls. min-height:0 is required (default min-height:auto blocks a flex child from shrinking). */
.jobchat-rail-panel.is-on{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* The "+"-menu Growth item spacing (matches resume item). */
.jobchat-plus-growth{display:flex;align-items:center;gap:8px}
@media (max-width:768px){
  /* Mobile drawer: keep the 2-tab header calm — tabs shrink, icons optional, single-column panels. */
  .jobchat-rail-tab{font-size:12px;padding:8px 4px}
  .jobchat-rail-tab i{margin-right:3px}
}

/* login link in a login-required reply — opens the default Oxwall sign-in modal */
.jobchat-login-link { color:var(--jc-primary); font-weight:600; cursor:pointer; text-decoration:underline; }
.jobchat-login-link:hover { color:var(--jc-primary-dark); }

/* ===== SPACIOUS CHATGPT-CLEAN /jobchat (2026-08-22) =====
   Owner-approved spacious/clean view. CSS-only, all scoped to body.jobchat_ctrl_chat_index
   (spec 0,1,1 beats base.css .ow_page / ties+wins vs .ow_page_container .ow_page). Mobile
   (<=900px) block above (jobchat.css:333-357) is UNCHANGED — the desktop chain here is fenced
   in @media(min-width:901px) so it never fights the mobile shell. ===== */

/* (f) HIDE THE THEME FOOTER on /jobchat only (analog of the shipped #ow_bottom_nav hide @377).
   Footer links are relocated into the "More" rail tab (chat_index.html). Other pages keep the footer. */
body.jobchat_ctrl_chat_index .ow_footer,
body.base_user_dashboard .ow_footer,
body.base_index_page .ow_footer { display:none !important; }
body.jobchat_ctrl_chat_index .sharethis-inline-share-buttons,
body.base_user_dashboard .sharethis-inline-share-buttons,
body.base_index_page .sharethis-inline-share-buttons { display:none !important; }

/* GUEST-SIDEBAR HIDE 2026-08-22: logged-OUT, the magic theme renders an extra <aside class="ow_sidebar">
   (hero/login/Google-CTA widget) that base.css (magic/base.css:252 .ow_sidebar{width:240px;float:right;
   margin-right:-260px}) uses to pull/shift the layout. It is absent logged-in (hence logged-in is clean).
   Scoped-hide it on /jobchat ONLY so guests get the same clean fixed layout. NOT inside @media — hidden at
   ALL widths on this page. Analog of the existing advancedblogs scoped hide (magic/base.css:8391). */
/* POLISH3 2026-08-22 (#1) FLICKER: display:none wins post-parse, but a pre-CSS/FOUC frame or a
   DND re-show can flash the sidebar. Belt-and-braces so even an un-suppressed frame reserves NO
   space + paints nothing (width:0 + visibility:hidden + overflow:hidden collapse it to zero-box). */
body.jobchat_ctrl_chat_index .ow_sidebar,
body.base_user_dashboard .ow_sidebar,
body.base_index_page .ow_sidebar {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    overflow:hidden !important;
}

/* (b) FLATTEN THE GHOSTWHITE CARD (overrides theme base.css .ow_page_container .ow_page). */
body.jobchat_ctrl_chat_index .ow_page_container .ow_page,
body.base_user_dashboard .ow_page_container .ow_page,
body.base_index_page .ow_page_container .ow_page {
    background-color: transparent;   /* was ghostwhite */
    border-radius: 0;                /* was 1em */
    min-height: 0;                   /* was 400px — remove card floor for the dvh chain */
    padding: 0;                      /* was 28px 16px 16px — kill card inner padding */
}

/* Desktop-only spacious chain — hidden site chrome + non-scroll viewport lock + flattened main.
   Fenced so the proven mobile shell (<=900px) is never touched. */
@media (min-width:901px){
    /* Hide the APP header (jobchat brand bar) on DESKTOP ONLY — mobile keeps it because it holds
       #jobchat-rail-toggle (the only mobile rail opener). On desktop the rail is an always-visible
       flex column, so no toggle is needed. */
    body.jobchat_ctrl_chat_index .jobchat-header,
    body.base_user_dashboard .jobchat-header,
    body.base_index_page .jobchat-header { display:none; }

    /* OWNER CORRECTION 2026-08-22: the SITE header (.ow_site_panel) and the left menu
       (.ow_menu_wrap / .ow_menu_fullpage) STAY VISIBLE on /jobchat. Only the in-app
       .jobchat-header hides (desktop-only rule above). The old site-header/menu hide
       rule was REMOVED here — see the --jc-chrome subtraction below that reserves the
       real header height so the page still fills to the fold without a scrollbar. */

    /* Lock the page to the viewport; nothing scrolls except the message stream. */
    body.jobchat_ctrl_chat_index,
    html:has(body.jobchat_ctrl_chat_index),
    body.base_user_dashboard,
    html:has(body.base_user_dashboard),
    body.base_index_page,
    html:has(body.base_index_page) { overflow:hidden; }   /* body rule is primary; :has is belt-and-braces */

    /* --jc-chrome = the real vertical chrome ABOVE the page box (the visible site header).
       magic base.css gives .ow_site_panel a CONCRETE height:56px (base.css:~665); the left
       .ow_menu_wrap is position:fixed on the LEFT so it consumes NO vertical space. Default
       92px = 56px header + safe margin so the page never overshoots the fold (a larger value
       only leaves a tiny bottom gap, never a scrollbar). OWNER: after a live look, if a small
       gap shows at the bottom, nudge this DOWN toward ~56-72px; if the composer is cut off /
       a scrollbar appears, nudge it UP. One-value tweak — nothing else changes. */
    /* POLISH3 2026-08-22 (#3): set to the MEASURED header height. base.css:666 gives
       .ow_site_panel a concrete height:56px (the left .ow_menu_wrap is position:fixed → 0
       vertical). 92px over-reserved by ~36px → the ~50-70px bottom gap. 56px fills to the
       exact fold, no gap, no scrollbar. OWNER: nudge ±a few px only if a hairline remains. */
    body.jobchat_ctrl_chat_index { --jc-chrome: 56px; }
    /* DASHBOARD-WIDGET 2026-08-28 (-m54): /dashboard uses the SAME general.html master page as /jobchat
       (verified — .ow_site_panel → .ow_page_padding → … → .ow_page; the h1 "Dashboard" heading is INSIDE
       .ow_page and is hidden above, the .ow_menu_wrap is position:fixed = 0 vertical). So the vertical
       chrome ABOVE .ow_page_padding is the identical 56px site header → same --jc-chrome value. OWNER: if a
       live look shows a hairline gap/clip on /dashboard specifically, nudge THIS value only (it is a separate
       decl from /jobchat's, so tuning one never affects the other). */
    body.base_user_dashboard { --jc-chrome: 56px; }
    /* INDEX-WIDGET 2026-08-31 (-m67): /index guest front door — same general.html master → same 56px site
       header above .ow_page_padding. OWNER: a GUEST /index top-bar may differ from the logged-in 56px
       .ow_site_panel; if a live look shows a hairline gap/clip on /index, nudge THIS value only (separate
       decl → tuning one never affects /jobchat or /dashboard). */
    body.base_index_page { --jc-chrome: 56px; }

    /* POLISH3 2026-08-22 (#3): .ow_page_container carries margin:0 auto 16px (base.css:238) — a
       16px BOTTOM margin that adds to the fold gap. Zero it so the bounded box reaches the fold. */
    body.jobchat_ctrl_chat_index .ow_page_container,
    body.base_user_dashboard .ow_page_container,
    body.base_index_page .ow_page_container { margin-bottom:0; }

    /* (c) kill the footer reserve (base.css .ow_page_padding{padding-bottom:99px}) + make it the
       ONE bounded box, reserving the visible-header height so the fold stays exact. */
    body.jobchat_ctrl_chat_index .ow_page_padding,
    body.base_user_dashboard .ow_page_padding,
    body.base_index_page .ow_page_padding { padding-bottom:0; height:calc(100dvh - var(--jc-chrome, 92px)); }

    /* (d) pass the bounded height down the wrapper chain; min-height:0 lets each flex child shrink. */
    body.jobchat_ctrl_chat_index .ow_page_padding,
    body.jobchat_ctrl_chat_index .ow_page_container,
    body.jobchat_ctrl_chat_index .ow_canvas,
    body.jobchat_ctrl_chat_index .ow_page,
    body.jobchat_ctrl_chat_index .ow_content,
    body.base_user_dashboard .ow_page_padding,
    body.base_user_dashboard .ow_page_container,
    body.base_user_dashboard .ow_canvas,
    body.base_user_dashboard .ow_page,
    body.base_user_dashboard .ow_content,
    body.base_index_page .ow_page_padding,
    body.base_index_page .ow_page_container,
    body.base_index_page .ow_canvas,
    body.base_index_page .ow_page,
    body.base_index_page .ow_content { display:flex; flex-direction:column; min-height:0; }
    body.jobchat_ctrl_chat_index .ow_content,
    body.base_user_dashboard .ow_content,
    body.base_index_page .ow_content { flex:1 1 auto; }
    /* ROOTFIX 2026-08-22: .jobchat-app carried margin:0 auto (jobchat.css:6) which, on the cross-axis of
       the flex-COLUMN .ow_content, DEFEATS align-items:stretch and shrink-wraps the app to its content
       (CSS Flexbox §8.3 auto-margin beats stretch) → the whole shell became content-driven (grew as the
       stream typed). Neutralise the auto-margin + set width:100% so the app fills .ow_content deterministically. */
    body.jobchat_ctrl_chat_index .jobchat-app,
    body.base_user_dashboard .jobchat-app,
    body.base_index_page .jobchat-app { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
        margin:0; width:100%; }
    /* ROOTFIX 2026-08-22: set the FIRM box DIRECTLY on the shell instead of relaying width/height through 6
       ancestors. width:100% kills the content-driven growth (symptom A); an explicit dvh height pins the box
       (symptom C) so .jobchat-stream is the only scroller + .jobchat-composer/.jobchat-hint pin at the bottom;
       the 320px rail then sits flush-right automatically (symptom B) with zero rail edits. --jc-chrome reserves
       the visible site-header height so the fold stays exact (owner may fine-tune the value @478). */
    body.jobchat_ctrl_chat_index .jobchat-shell,
    body.base_user_dashboard .jobchat-shell,
    body.base_index_page .jobchat-shell { width:100%; height:calc(100dvh - var(--jc-chrome, 92px));
        flex:1 1 auto; min-height:0; }  /* was height:calc(100vh-220px) base + height:auto override. DASHBOARD-WIDGET 2026-08-28 (-m54): this desktop viewport-lock height DELIBERATELY OVERRIDES the .jobchat-host bounded 78vh (spec 0,2,1 > 0,1,1) so /dashboard fills the fold exactly like /jobchat; the .jobchat-host 78vh remains the fallback if the body class ever differs. */
    /* POLISH4 2026-08-22 (#3): the shell is a display:flex ROW; ensure the main column STRETCHES to
       the full shell height (align-items:stretch is default, but force min-height:0 so an over-tall
       stream can't push the shell) so the height chain reaches .jobchat-main. main is flex-COLUMN
       with .jobchat-stream{flex:1 1 auto} the only grower → .jobchat-composer (last child, no grow)
       pins to the very bottom, with .jobchat-hint (last child inside the composer) at the very bottom
       under the input. This makes the composer pin deterministically even if a wrapper settle lags. */
    body.jobchat_ctrl_chat_index .jobchat-main,
    body.base_user_dashboard .jobchat-main,
    body.base_index_page .jobchat-main { height:auto; align-self:stretch; min-height:0; }

    /* POLISH3 2026-08-22 (#2): the rail (flex:0 0 320px @292) had NO explicit height — it relied on
       align-items:stretch, so it visibly GREW to full-length only after the dvh/flex shell settled.
       Give it the SAME deterministic bounded height as the shell so it's full-length from FIRST paint,
       not stretch-timing dependent. Its .jobchat-rail-body{flex:1;overflow-y:auto @298} still scrolls
       inside. Desktop-only (fenced in @media 901) — the mobile position:fixed rail @350 is untouched. */
    body.jobchat_ctrl_chat_index .jobchat-rail,
    body.base_user_dashboard .jobchat-rail,
    body.base_index_page .jobchat-rail {
        height:calc(100dvh - var(--jc-chrome, 56px));
        align-self:stretch;
        min-height:0;
    }

    /* (e) FLATTEN THE MAIN (empty ChatGPT feel) — keep overflow:hidden + flex-column from the base rule. */
    body.jobchat_ctrl_chat_index .jobchat-main,
    body.base_user_dashboard .jobchat-main,
    body.base_index_page .jobchat-main {
        background: transparent;   /* was #fff */
        border: 0;                 /* was 1px solid var(--jc-line) — drops header border-bottom illusion at the edges */
        border-radius: 0;          /* was var(--jc-radius) */
    }
    /* Owner: drop the app-header border-bottom (header is hidden on desktop anyway) + KEEP the composer
       border-top hairline (grounds the pinned input). Composer keeps its own border-top from .jobchat-composer. */
}

/* Career Growth tab scroll: unlike the reports panel (which wraps its list in .jobchat-rail-body),
   #jobchat-rail-panel-growth holds #jobchat-growth DIRECTLY with no scrollable body child. The .is-on
   rule makes the panel a flex column (flex:1 1 auto; min-height:0), but #jobchat-growth itself must
   flex-fill + scroll so long chapter/growth content scrolls inside the rail instead of overflowing. */
body.jobchat_ctrl_chat_index #jobchat-rail-panel-growth #jobchat-growth {
    flex:1 1 auto; min-height:0; overflow-y:auto;
}

/* "More" rail tab — relocated footer, light text-only groups inside a Bootstrap accordion (bundle.js
   already loaded). Panel body scrolls (reuses .jobchat-rail-body flex:1;overflow-y:auto). */
body.jobchat_ctrl_chat_index .jobchat-more-body { padding-top:6px; }
body.jobchat_ctrl_chat_index .jobchat-more-body .accordion { --bs-accordion-border-color:var(--jc-line);
    --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-active-bg:#f4f7ff; --bs-accordion-active-color:#0b7a4b; }
body.jobchat_ctrl_chat_index .jobchat-more-body .accordion-button { padding:11px 12px; font-size:13.5px; font-weight:600; color:var(--jc-ink); }
body.jobchat_ctrl_chat_index .jobchat-more-body .accordion-body { padding:6px 12px 12px; }
body.jobchat_ctrl_chat_index .jobchat-more-body .accordion-body a { display:block; padding:5px 0; color:#1f2733; text-decoration:none; font-size:13px; }
body.jobchat_ctrl_chat_index .jobchat-more-body .accordion-body a:hover { color:var(--jc-primary); text-decoration:underline; }
body.jobchat_ctrl_chat_index .jobchat-more-legal { font-size:11px; color:#7b8794; line-height:1.5; margin:12px 2px 0; }
/* ===== /SPACIOUS ===== */

/* ============================================================================================
   DASHBOARD WIDGET HOST (-m53, 2026-08-28) — the chat shell rendered as a /dashboard widget
   (JOBCHAT_CMP_DashboardWidget). On a host page the auto body-class is NOT jobchat_ctrl_chat_index,
   so the body-scoped SPACIOUS chrome/viewport-lock rules above SILENTLY DIE — by design (the
   dashboard keeps its OWN header/footer/menu/sidebar; the widget must not touch host chrome or lock
   the viewport). We re-scope ONLY the ~9 COMPONENT-STYLE rules to a host-agnostic .jobchat-host
   wrapper (so the replica LOOKS like /jobchat), PLUS a NEW bounded panel-height that REPLACES the
   dropped 100dvh/viewport chain — so the rail + message stream scroll INSIDE the widget panel, not
   the page viewport. The bulk of jobchat component styling (.jobchat-app/-shell/-bubble/-chips/-card/
   -rail-trust/-install-link) is UNSCOPED elsewhere in this file → inherited for free by the markup.
   ⚠ /jobchat is untouched: none of the body.jobchat_ctrl_chat_index rules above are modified. ============================================================================================ */

/* (1) BOUNDED PANEL HEIGHT — replaces the viewport-lock chain that /jobchat gets from the SPACIOUS
   desktop @media. The widget is one block in a scrolling dashboard, so it takes a fixed, sane panel
   height and lets .jobchat-stream (main) + .jobchat-rail-body/#jobchat-growth (rail) scroll inside. */
.jobchat-host .jobchat-shell { height:95dvh; min-height:520px; max-height:max-content; }
.jobchat-host .jobchat-main  { height:auto; align-self:stretch; min-height:0; }
.jobchat-host .jobchat-rail  { align-self:stretch; min-height:0; }

/* P1-1 2026-08-28 (owner): the mobile /dashboard widget re-break. The UNCONDITIONAL base rule directly
   above `.jobchat-host .jobchat-shell { height:95dvh; ...; max-height:max-content }` has specificity
   (0,2,0) — HIGHER than the plain mobile rule @373 `.jobchat-shell{height:calc(100dvh - 49px)}` (0,1,0)
   — so on mobile /dashboard the widget shell stayed 95dvh → the 5dvh bottom white band returned. FIX:
   a matching-specificity (0,2,0) mobile override. @media adds NO specificity, so to WIN the (0,2,0)
   cascade tie the override must also come LATER IN SOURCE than the base rule — hence its own
   @media(max-width:900) block placed HERE, immediately AFTER the base rule (a copy inside the earlier
   max-width:900 block @422 would LOSE, since the base @712 is later in source). height = the same
   49px-panel-minus calc /jobchat gets; max-height:none so the base `max-content` cannot clip it;
   min-height:0. Desktop /dashboard keeps the bounded 95dvh/max-content look (min-width:901 → this block
   dead). /jobchat (no .jobchat-host wrapper) is untouched. */
@media (max-width:900px){
    /* WORLD-CLASS 2026-08-28: /dashboard widget also page-scrolls on mobile (document is the sole scroller,
       composer is position:fixed) — height:auto so the widget shell grows naturally, no inner scroller. */
    .jobchat-host .jobchat-shell { height:auto; min-height:0; max-height:none; }
}
/* CSS6 2026-08-28: dashboard-widget empty box zero-padding — page-scoped (body.base_user_dashboard)
   AND widget-scoped (the box node's own .dashboard-JOBCHAT_CMP_DashboardWidget class) so it targets
   ONLY the jobchat widget box, never another dashboard box nor any other page. Core .ow_box_empty
   theme class is NOT edited. */
body.base_user_dashboard .ow_box_empty.dashboard-JOBCHAT_CMP_DashboardWidget { padding:0; }
/* INDEX-WIDGET 2026-08-31 (-m67): the /index empty-box zero-padding twin — page-scoped
   (body.base_index_page) AND widget-scoped (.index-JOBCHAT_CMP_IndexWidget box node) so it targets ONLY
   the /index jobchat widget box, never another index box nor any other page. Core .ow_box_empty untouched. */
body.base_index_page .ow_box_empty.index-JOBCHAT_CMP_IndexWidget { padding:0; }

/* (2) COMPONENT-STYLE re-scope (the ~9 KEEP rules — mirror of the desktop body-scoped block @589-615). */
.jobchat-host .jobchat-main {          /* flatten (empty ChatGPT feel) — was #fff / 1px border / radius */
    background: transparent;
    border: 0;
    border-radius: 0;
}
/* Career Growth tab scroll: #jobchat-growth must flex-fill + scroll inside the rail. */
.jobchat-host #jobchat-rail-panel-growth #jobchat-growth {
    flex:1 1 auto; min-height:0; overflow-y:auto;
}
/* "More" rail tab — relocated footer accordion look. */
.jobchat-host .jobchat-more-body { padding-top:6px; }
.jobchat-host .jobchat-more-body .accordion { --bs-accordion-border-color:var(--jc-line);
    --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-active-bg:#f4f7ff; --bs-accordion-active-color:#0b7a4b; }
.jobchat-host .jobchat-more-body .accordion-button { padding:11px 12px; font-size:13.5px; font-weight:600; color:var(--jc-ink); }
.jobchat-host .jobchat-more-body .accordion-body { padding:6px 12px 12px; }
.jobchat-host .jobchat-more-body .accordion-body a { display:block; padding:5px 0; color:#1f2733; text-decoration:none; font-size:13px; }
.jobchat-host .jobchat-more-body .accordion-body a:hover { color:var(--jc-primary); text-decoration:underline; }
.jobchat-host .jobchat-more-legal { font-size:11px; color:#7b8794; line-height:1.5; margin:12px 2px 0; }
/* ===== /DASHBOARD WIDGET HOST ===== */