/* * ═══════════════════════════════════════════════════════════════════ * FABCONNECT — AI SUPPORT CHAT WIDGET * File: frontend-assets/css/support-chat.css * Load: LAST in , after components.css / landing.css * * Every colour, space, radius and shadow comes from tokens.css. * No hardcoded hex values. All classes namespaced `fcsc-` so the * widget is safe to drop into the frontend, customer and supplier * shells without colliding with existing styles. * * Badge styles are redefined here (mirroring the components.css * badge standard, same tokens) because components.css is not loaded * on the public frontend and the widget ships on every surface. * ═══════════════════════════════════════════════════════════════════ */ /* ── Widget-local tokens ── */ .fcsc-root { --fcsc-panel-w: 380px; --fcsc-panel-h: 560px; --fcsc-launcher: 56px; --fcsc-launcher-sm: 48px; --fcsc-gap: var(--space-5); --fcsc-bubble-max: 84%; position: fixed; right: var(--fcsc-gap); bottom: var(--fcsc-gap); z-index: 1080; /* above Bootstrap modals' backdrop siblings */ font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--color-default); } /* Supplier portal: clear the sidebar on wide screens (panel opens leftward anyway, but keep the launcher out of the sidebar's shadow). */ .fcsc-root.fcsc-in-portal { right: var(--space-6); bottom: var(--space-6); } /* The public shell already owns this corner: `.contct-us` is a fixed 48px pill with z-index 2147483000, so it will always paint over the launcher. Rather than fight it, sit above it. Scoped with :has() so the offset disappears on any page that does not render that button. NOTE for review: two floating CTAs in one corner is a product decision worth revisiting — the assistant arguably replaces the Contact Us pill. */ body:has(.contct-us) .fcsc-root { bottom: calc(var(--fcsc-gap) + 60px); } @media (max-width: 767px) { body:has(.contct-us) .fcsc-root { bottom: calc(var(--space-4) + 56px); } } /* ═══════════════ LAUNCHER ═══════════════ */ .fcsc-launcher { position: relative; display: flex; align-items: center; justify-content: center; width: var(--fcsc-launcher); height: var(--fcsc-launcher); margin-left: auto; padding: 0; border: none; border-radius: var(--radius-full); background-color: var(--color-primary-dark); color: var(--color-white); font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--transition-base), background-color var(--transition-fast); } .fcsc-launcher:hover { background-color: var(--color-secondary); transform: translateY(-2px); } .fcsc-launcher:focus-visible { outline: 3px solid var(--color-primary-dim); outline-offset: 3px; } .fcsc-launcher .fcsc-ico-close { display: none; } .fcsc-root.is-open .fcsc-launcher .fcsc-ico-open { display: none; } .fcsc-root.is-open .fcsc-launcher .fcsc-ico-close { display: block; } /* Unread indicator — the ONE place the orange accent is used. */ .fcsc-unread { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border: 2px solid var(--color-white); border-radius: var(--radius-full); background-color: var(--color-accent); display: none; } .fcsc-root.has-unread:not(.is-open) .fcsc-unread { display: block; } /* ═══════════════ PANEL ═══════════════ */ .fcsc-panel { position: absolute; right: 0; bottom: calc(var(--fcsc-launcher) + var(--space-3)); display: flex; flex-direction: column; width: var(--fcsc-panel-w); height: var(--fcsc-panel-h); max-height: calc(100vh - var(--fcsc-launcher) - var(--space-8)); overflow: hidden; border-radius: var(--radius-lg); background-color: var(--color-white); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: bottom right; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); } .fcsc-root.is-open .fcsc-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* ── Header ── */ .fcsc-head { flex: 0 0 auto; padding: var(--space-4); background-color: var(--color-primary-dark); color: var(--color-white); } .fcsc-head-row { display: flex; align-items: center; gap: var(--space-3); } .fcsc-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background-color: var(--color-primary-container); font-size: .95rem; } .fcsc-head-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--color-white); margin: 0; } .fcsc-head-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: .75rem; color: rgba(255,255,255,.62); } .fcsc-head-close { flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: transparent; color: rgba(255,255,255,.72); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .fcsc-head-close:hover { background-color: rgba(255,255,255,.12); color: var(--color-white); } .fcsc-head-close:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 1px; } /* Permanent, non-dismissible automation disclosure + human route. */ .fcsc-disclosure { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.13); font-size: .75rem; color: rgba(255,255,255,.62); } .fcsc-disclosure i { font-size: .7rem; } .fcsc-disclosure a { margin-left: auto; color: var(--color-accent-dim); font-weight: 600; white-space: nowrap; } .fcsc-disclosure a:hover { color: var(--color-accent); text-decoration: underline; } /* ── Message track ── */ .fcsc-log { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--space-4); background-color: var(--color-neutral-dim); scroll-behavior: smooth; overscroll-behavior: contain; } .fcsc-log::-webkit-scrollbar { width: 8px; } .fcsc-log::-webkit-scrollbar-thumb { background-color: var(--color-neutral-high); border-radius: var(--radius-full); } /* ═══════════════ MESSAGES ═══════════════ */ .fcsc-turn { margin-bottom: var(--space-5); } .fcsc-turn:last-child { margin-bottom: 0; } .fcsc-turn > * + * { margin-top: var(--space-3); } .fcsc-msg { max-width: var(--fcsc-bubble-max); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); word-wrap: break-word; /* `start`, not `left` — bubbles carry dir="auto", so an Arabic message must align to its own direction even though the surrounding page is LTR. */ text-align: start; } /* Arabic needs a little more leading than Hanken Grotesk's Latin default; Cairo is the fallback face that actually carries the glyphs. */ .fcsc-msg:lang(ar) { line-height: 1.75; } /* User — primary fill, right aligned, near corner tightened */ .fcsc-msg-user { margin-left: auto; background-color: var(--color-primary); color: var(--color-white); border-bottom-right-radius: var(--radius-sm); } /* Bot — white surface, hairline border */ .fcsc-msg-bot { margin-right: auto; background-color: var(--color-white); border: 1px solid var(--fc-border, var(--color-neutral-high)); color: var(--color-default); border-bottom-left-radius: var(--radius-sm); } .fcsc-msg-bot p { margin: 0 0 var(--space-2); } .fcsc-msg-bot p:last-child { margin-bottom: 0; } /* System / boundary states — full width, no border, quiet */ .fcsc-msg-system { max-width: 100%; background-color: var(--color-neutral-container); color: var(--color-default); border-radius: var(--radius-md); } .fcsc-msg-system .fcsc-sys-title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: .875rem; margin-bottom: var(--space-1); } .fcsc-msg-system p { margin: 0; font-size: .875rem; color: var(--color-text-body); } .fcsc-sys-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } /* ── Inline buttons ── */ .fcsc-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 14px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-body); font-size: .8125rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .fcsc-btn-primary { background-color: var(--color-primary); color: var(--color-white); } .fcsc-btn-primary:hover { background-color: var(--color-primary-deep); } .fcsc-btn-ghost { background-color: transparent; border-color: var(--color-neutral-high); color: var(--color-text-body); } .fcsc-btn-ghost:hover { border-color: var(--color-primary-dim); color: var(--color-primary); } .fcsc-btn:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 2px; } /* ═══════════════ CITATIONS ═══════════════ */ .fcsc-cites { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-1); } .fcsc-cite { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--color-neutral-high); border-radius: var(--radius-full); background-color: var(--color-white); color: var(--color-text-body); font-size: .75rem; line-height: 1.4; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); } .fcsc-cite i { font-size: .7rem; color: var(--color-neutral-gray); } .fcsc-cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .fcsc-cite:hover, .fcsc-cite:focus-visible, .fcsc-cite.is-active { border-color: var(--color-primary-dim); background-color: var(--color-primary-fixed); color: var(--color-primary-deep); } .fcsc-cite:hover i, .fcsc-cite.is-active i { color: var(--color-primary); } /* The sentences a chip supports, highlighted on hover/focus of that chip. is used as the semantic carrier, but its default quotation marks are suppressed — these are cited spans, not quotations shown to the reader. */ .fcsc-msg q[data-cite] { quotes: none; border-radius: 3px; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .fcsc-msg q[data-cite]::before, .fcsc-msg q[data-cite]::after { content: ''; } .fcsc-msg q[data-cite].is-lit { background-color: var(--color-primary-fixed); box-shadow: 0 0 0 2px var(--color-primary-fixed); } /* ═══════════════ DATA CARDS (lane B) ═══════════════ */ .fcsc-card { margin-top: var(--space-3); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-md); background-color: var(--color-white); overflow: hidden; } .fcsc-card-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-neutral-high); } .fcsc-card-id { font-family: var(--font-heading); font-weight: 700; font-size: .875rem; color: var(--color-default); } .fcsc-card-hd .fcsc-badge { margin-left: auto; } .fcsc-card-bd { padding: var(--space-3); } .fcsc-card-meta { font-size: .8125rem; color: var(--color-text-body); margin-bottom: var(--space-3); } .fcsc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-high); font-size: .8125rem; } .fcsc-card-cost { font-weight: 700; color: var(--color-primary-deep); } .fcsc-card-link { font-weight: 700; color: var(--color-accent); white-space: nowrap; } .fcsc-card-link:hover { color: var(--color-accent-deep); } /* Badges — mirrors the components.css badge standard, tokens only. */ .fcsc-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: var(--color-white); white-space: nowrap; } .fcsc-badge-primary { background-color: var(--color-primary); } .fcsc-badge-primary-container { background-color: var(--color-primary-container); } .fcsc-badge-success { background-color: var(--color-success); } .fcsc-badge-warning { background-color: var(--color-warning); } .fcsc-badge-danger { background-color: var(--color-danger); } .fcsc-badge-info { background-color: var(--color-info); } .fcsc-badge-neutral { background-color: var(--color-neutral-container); color: var(--color-default); } .fcsc-badge-muted { background-color: var(--color-text-muted); } /* ── Milestone progress ── */ .fcsc-mstones { display: flex; align-items: center; margin: var(--space-3) 0 var(--space-2); } .fcsc-mstone-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: var(--radius-full); background-color: var(--color-neutral-high); box-shadow: 0 0 0 3px var(--color-white); } .fcsc-mstone-dot.is-done { background-color: var(--color-success); } .fcsc-mstone-dot.is-active { background-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-fixed); } .fcsc-mstone-bar { flex: 1 1 auto; height: 3px; background-color: var(--color-neutral-high); } .fcsc-mstone-bar.is-done { background-color: var(--color-success); } .fcsc-mstone-label { font-size: .75rem; color: var(--color-text-body); } /* ── Stat row (nesting results) ── */ .fcsc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); } .fcsc-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-sm); background-color: var(--color-neutral-dim); text-align: center; } .fcsc-stat-v { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-primary-deep); font-variant-numeric: tabular-nums; } .fcsc-stat-l { font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-body); } /* ── CAD drawing preview ── */ .fcsc-cad { display: flex; align-items: center; justify-content: center; padding: var(--space-3); background-color: var(--color-neutral-dim); border-bottom: 1px solid var(--color-neutral-high); min-height: 120px; } .fcsc-cad img { display: block; max-width: 100%; /* Cap height so a long thin part cannot push the composer off screen. */ max-height: 220px; width: auto; height: auto; } .fcsc-cad.is-failed { font-size: .8125rem; color: var(--color-text-body); min-height: 60px; } /* ── Quote breakdown table ── */ .fcsc-tbl-wrap { overflow-x: auto; } .fcsc-tbl { width: 100%; border-collapse: collapse; font-size: .8125rem; } .fcsc-tbl th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-neutral-high); font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-body); font-weight: 700; white-space: nowrap; } .fcsc-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--color-neutral-dim); color: var(--color-text-body); } .fcsc-tbl td.fcsc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .fcsc-tbl tr.fcsc-total td { border-bottom: none; border-top: 1px solid var(--color-neutral-high); padding-top: 8px; font-weight: 700; color: var(--color-default); } /* ── Order picker (disambiguation) ── */ .fcsc-pick { display: block; width: 100%; text-align: left; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-md); background-color: var(--color-white); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .fcsc-pick:hover { border-color: var(--color-primary-dim); background-color: var(--color-primary-fixed); } .fcsc-pick:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 1px; } .fcsc-pick-top { display: flex; align-items: center; gap: var(--space-2); } .fcsc-pick-id { font-weight: 700; font-size: .8125rem; color: var(--color-default); } .fcsc-pick-top .fcsc-badge { margin-left: auto; } .fcsc-pick-sub { font-size: .75rem; color: var(--color-text-body); margin-top: 2px; } /* ═══════════════ IN-FLIGHT STATES ═══════════════ */ /* Thinking — dots only, deliberately no text label. */ .fcsc-thinking { display: inline-flex; align-items: center; gap: 5px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm); background-color: var(--color-white); } .fcsc-thinking i { width: 7px; height: 7px; border-radius: var(--radius-full); background-color: var(--color-neutral-border); animation: fcsc-pulse 1.2s infinite ease-in-out; } .fcsc-thinking i:nth-child(2) { animation-delay: .15s; } .fcsc-thinking i:nth-child(3) { animation-delay: .3s; } @keyframes fcsc-pulse { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Searching / looking-up — the trust moment. */ .fcsc-status { display: flex; align-items: center; gap: var(--space-2); font-size: .8125rem; color: var(--color-text-body); padding-left: var(--space-1); } .fcsc-status i { color: var(--color-primary); animation: fcsc-spin 1.1s linear infinite; } @keyframes fcsc-spin { to { transform: rotate(360deg); } } /* Streaming caret */ .fcsc-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background-color: var(--color-primary); animation: fcsc-blink .9s step-end infinite; } @keyframes fcsc-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fcsc-thinking i, .fcsc-status i, .fcsc-caret { animation: none; } .fcsc-panel, .fcsc-launcher { transition: none; } } /* ═══════════════ EMPTY STATE ═══════════════ */ .fcsc-empty { text-align: center; padding: var(--space-5) var(--space-2) var(--space-4); } .fcsc-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: var(--radius-full); background-color: var(--color-primary-fixed); color: var(--color-primary); font-size: 1.15rem; } .fcsc-empty h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-default); } .fcsc-empty p { font-size: .8125rem; color: var(--color-text-body); margin: 0 0 var(--space-4); } .fcsc-sugs { display: flex; flex-direction: column; gap: var(--space-2); } .fcsc-sug { padding: 9px var(--space-3); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--color-default); font-family: var(--font-body); font-size: .8125rem; text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .fcsc-sug:hover { border-color: var(--color-primary-dim); background-color: var(--color-primary-fixed); } .fcsc-sug:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 1px; } /* ═══════════════ FEEDBACK ═══════════════ */ .fcsc-fb { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding-left: var(--space-1); } .fcsc-fb button { width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-neutral-border); font-size: .7rem; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } .fcsc-fb button:hover { background-color: var(--color-neutral-container); color: var(--color-text-body); } .fcsc-fb button.is-on { color: var(--color-primary); } .fcsc-fb button.is-on.fcsc-fb-down { color: var(--color-danger); } .fcsc-fb:focus-within button:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 1px; } /* ── In-chat 3D viewer (STEP / IGES / STL) ── */ .fcsc-cad-3d { position: relative; min-height: 220px; padding: 0; background-color: #0a0e14; } .fcsc-cad-3d canvas { display: block; width: 100% !important; height: 220px !important; /* The card is inside a scrolling log, so the wheel must zoom the model without also scrolling the conversation out from under it. */ touch-action: none; cursor: grab; } .fcsc-cad-3d canvas:active { cursor: grabbing; } .fcsc-cad-status { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 220px; padding: var(--space-4); text-align: center; font-size: .8125rem; color: rgba(255, 255, 255, .55); } .fcsc-cad.is-failed .fcsc-cad-status { color: var(--color-danger); } /* ═══════════════ ATTACHMENTS ═══════════════ */ /* Staged-file tray. Sits between the log and the composer so it can wrap to several rows without competing with the textarea's auto-grow height. */ .fcsc-tray { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; background-color: var(--color-white); } .fcsc-tray[hidden] { display: none; } .fcsc-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: 5px var(--space-2) 5px var(--space-3); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-full); background-color: var(--color-neutral-dim); font-size: .8125rem; color: var(--color-text-body); } .fcsc-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15ch; } .fcsc-chip.is-uploading { opacity: .7; } .fcsc-chip.is-failed { border-color: var(--color-danger); background-color: var(--color-white); color: var(--color-danger); } .fcsc-chip-err { font-size: .75rem; } .fcsc-chip-x { flex: 0 0 auto; width: 20px; height: 20px; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-neutral-border); font-size: .65rem; cursor: pointer; } .fcsc-chip-x:hover { background-color: var(--color-neutral-container); color: var(--color-default); } .fcsc-chip-x:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 1px; } /* Paperclip, sized to match .fcsc-send so the composer row stays even. */ .fcsc-attach { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--color-neutral-high); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--color-text-body); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .fcsc-attach:hover:not(:disabled) { background-color: var(--color-neutral-dim); color: var(--color-primary); } .fcsc-attach:disabled { opacity: .45; cursor: not-allowed; } .fcsc-attach:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 2px; } /* Files echoed inside the sent user bubble. */ .fcsc-msg-files { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); } .fcsc-msg-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--space-2); border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .18); font-size: .75rem; } /* Drop overlay. Covers the panel only while a file is dragged over it — pointer-events stays none so the drop lands on the panel handler. */ .fcsc-drop { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border: 2px dashed var(--color-primary-dim); border-radius: inherit; background-color: rgba(255, 255, 255, .94); color: var(--color-primary-deep); font-weight: 600; pointer-events: none; } .fcsc-drop i { font-size: 1.75rem; } .fcsc-root.is-dropping .fcsc-drop { display: flex; } /* Small print under a card — route hints and measurement failures. */ .fcsc-card-note { margin-top: var(--space-2); font-size: .75rem; line-height: 1.45; color: var(--color-text-body); } /* ═══════════════ COMPOSER ═══════════════ */ .fcsc-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-neutral-high); background-color: var(--color-white); } .fcsc-input { flex: 1 1 auto; /* main.css declares `textarea { min-height: 120px !important }` site-wide, which beats any specificity and would leave the composer 120px tall while silently overriding max-height too. !important is the only thing that wins against !important, so it is used here deliberately and scoped to this one element. The auto-grow handler in support-chat.js manages height from 40px up to max-height. */ height: 40px !important; min-height: 40px !important; max-height: 96px !important; padding: 9px var(--space-3); border: 1px solid var(--color-neutral-high); border-radius: var(--radius-md); background-color: var(--color-white); font-family: var(--font-body); font-size: .875rem; line-height: 1.45; color: var(--color-default); resize: none; overflow-y: auto; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .fcsc-input::placeholder { color: var(--color-neutral-border); } .fcsc-input:focus { outline: none; border-color: var(--color-primary-dim); box-shadow: 0 0 0 3px rgba(0,87,192,.12); } .fcsc-input:disabled { background-color: var(--color-neutral-dim); cursor: not-allowed; } .fcsc-send { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: var(--radius-md); background-color: var(--color-primary); color: var(--color-white); cursor: pointer; transition: background-color var(--transition-fast), opacity var(--transition-fast); } .fcsc-send:hover:not(:disabled) { background-color: var(--color-primary-deep); } .fcsc-send:disabled { opacity: .45; cursor: not-allowed; } .fcsc-send:focus-visible { outline: 2px solid var(--color-primary-dim); outline-offset: 2px; } /* ═══════════════ MOBILE — full-screen sheet ═══════════════ */ @media (max-width: 767px) { .fcsc-root { right: var(--space-4); bottom: var(--space-4); } .fcsc-launcher { width: var(--fcsc-launcher-sm); height: var(--fcsc-launcher-sm); font-size: 1.1rem; } .fcsc-panel { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; transform: translateY(100%); transform-origin: bottom center; } .fcsc-root.is-open .fcsc-panel { transform: translateY(0); } .fcsc-root.is-open .fcsc-launcher { display: none; } .fcsc-head { padding-top: max(var(--space-4), env(safe-area-inset-top)); } .fcsc-composer { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); } .fcsc-root { --fcsc-bubble-max: 88%; } } /* ═══════════════ RTL ═══════════════ */ [dir="rtl"] .fcsc-root { right: auto; left: var(--fcsc-gap); } [dir="rtl"] .fcsc-panel { right: auto; left: 0; transform-origin: bottom left; } [dir="rtl"] .fcsc-msg-user { margin-left: 0; margin-right: auto; border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm); } [dir="rtl"] .fcsc-msg-bot { margin-right: 0; margin-left: auto; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-sm); } [dir="rtl"] .fcsc-disclosure a, [dir="rtl"] .fcsc-card-hd .fcsc-badge, [dir="rtl"] .fcsc-pick-top .fcsc-badge { margin-left: 0; margin-right: auto; } [dir="rtl"] .fcsc-tbl th { text-align: right; } [dir="rtl"] .fcsc-tbl td.fcsc-num { text-align: left; } [dir="rtl"] .fcsc-sug { text-align: right; }