/* ============================================================================ NabGol — CHAT COMPOSER (the bottom bar: attach preview + input + send) ---------------------------------------------------------------------------- Owns EXACTLY one thing: `.chat-input` and everything inside it (including the attachment preview, `.file-preview`). Does not touch `#messages` or `.chat-header` — those are chat-canvas.css's and chat-header.css's, by the same one-owner-per-region rule. Why this file exists: same story as chat-header.css. The message area and the header now speak one visual language (chat-canvas.css / chat-header.css: hairline instead of frame, a three-level ink scale, green spent once). The composer still spoke the old one — a solid/gradient bar, a saturated green focus glow on the input pill, icon buttons in raw `#a1a1aa`/`#8b949e`. Scope decision — same exclusions as chat-header.css, plus one more: - size, padding, gap, the safe-area math, `--nabgol-composer-offset` (script.js measures this composer's real height and the typing indicator overlay positions off it — retinting colours never touches height, so this is safe by construction, not by carefulness). - `.voice-btn.recording`: a real state (the mic is live), no --nbgc-* equivalent, excluded below with `:not(.recording)` rather than left to specificity luck. - any self-painted CTA chip class (`.nabgol-live-tutor-cta`, `.suggestion-chip--live-power`) — those paint their own surface already (chip ink, not canvas ink); this file never touches those class names. `.live-call-btn--tutor`'s ring WAS on that list too, on the grounds that this file sets no box-shadow. Section 4b now does, for one declaration and one reason: the ring was a hard-coded accent that no theme switch could reach, and it is the composer's second accent element. It is re-tinted, never removed. The specificity problem — found by grepping "chat-input|input-wrapper| composer-" in chat-flagship-polish.css BEFORE writing a rule here (the lesson chat-header.css left in docs/CHAT_CANVAS_HANDOFF.md): that file already ships a light-theme unification pass for several of these exact selectors (`html[data-theme="light"] body:is(...) .chat-input .input-wrapper {...}`, `.composer-hint {...}`, `.composer-ai-disclaimer {...}`, a mobile-only `.input-wrapper` variant). Each carries an extra `[data-theme="light"]` attribute selector — one more specificity "class" than an equivalent plain rule here, so for any property BOTH files claim, a same-depth selector here LOSES even though this file loads later (a loss, not a tie load order could settle). Section 7 below duplicates each of those exact selector shapes to force a genuine tie, which this file's later load order then wins. Properties with no such competing rule (the bar itself, the attachment preview, the toolbar icons, send) don't need a duplicate — this file's own `.chat-input`-scoped selector already carries more classes than anything currently fighting it. Load order: after chat-canvas.css AND chat-header.css, in both templates. ========================================================================== */ /* --------------------------------------------------------------------------- 1) THE BAR ITSELF — hairline instead of a filled/gradient slab. --------------------------------------------------------------------------- */ body:is(.desktop-chat, .mobile-chat) .chat-input { background: none !important; background-image: none !important; border-top: 1px solid var(--nbgc-hairline) !important; } /* 2026-09-05, work 8 of docs/CHAT_REDESIGN_MASTER_PLAN.md §21. ON DESKTOP THERE IS NO LINE. The hairline above is right for the phone, where the bar spans the same width as the conversation and the rule reads as the edge of one column. On a 1440px desktop the bar spans the window while the conversation is 820px, so the same hairline drew a full-bleed rule under a narrow column — the "فوترِ تمام‌عرض" the owner reported. What separates the composer from the canvas there is the fade at the column's own width (chat-desktop-shell.css, .chat-input::before), not a line across the screen. Mobile is deliberately untouched: it has its own document and its own gate. */ body.desktop-chat .chat-input { border-top: none !important; /* AND IT PAINTS ITSELF, AT THE COLUMN'S WIDTH, NOT THE WINDOW'S. The bar has to stay a full-track grid item (it shares the column's centring with #messages), so the paint is narrowed with background-size instead of the element: the band starts and ends exactly where the reading column does, at every viewport width and with the dossier panel open. OPAQUE UNDER THE BAR, ON PURPOSE. «شفاف» in §21 means "no slab across the window", not "see through to the conversation". A translucent composer leaves the input pill's own controls legible on top of moving text, and a message's ویرایش/حذف chips legible and unclickable underneath — readable and dead, which test_controls_always_reachable.js treats as worse than an honest cover, and which it caught in this change's first draft. Only the top 24px fade, so an answer scrolling up dims into the band instead of meeting a hard edge. background-COLOR stays transparent and the gradient is a background-IMAGE: that is also what makes the reachability audit read this bar as a real cover (it counts an image as fully painted and cannot sample one), which a ::before pseudo-element could never do — the audit walks DOM ancestors. */ background-color: transparent !important; background-image: linear-gradient( to bottom, transparent 0, var(--nbgc-canvas-face, #0d1117) 24px, var(--nbgc-canvas-face, #0d1117) 100%) !important; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: var(--stage-col-width, 100%) 100% !important; } /* One font-family line, one token, owner's call: what the reader types is set in the same face as what they get back. Defined once, in chat-canvas.css. The selector has to name the field itself, not just the bar: a