#flux-chat, #flux-chat * { box-sizing: border-box; }
#flux-chat { --fc-navy: var(--navy,#062747); --fc-navy-2: var(--navy-2,#0b355a); --fc-gold: var(--gold,#f4c967); --fc-ink: var(--ink,#102338); --fc-muted: var(--muted,#617080); --fc-line: var(--line,#dfe5ea); position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:2147483000; font:14px/1.5 Arial,"Microsoft YaHei",sans-serif; color:var(--fc-ink); text-align:left; }
#flux-chat button, #flux-chat input, #flux-chat textarea { font:inherit; }
#flux-chat button { cursor:pointer; }
#flux-chat [hidden] { display:none!important; }
#flux-chat .flux-chat-launch { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:58px; padding:8px 22px 8px 9px; border:1px solid rgba(244,201,103,.45); border-radius:999px; background:var(--fc-navy); color:#fff; font-size:13px; font-weight:700; box-shadow:0 12px 32px rgba(6,39,71,.28); transition:transform .2s,box-shadow .2s,background .2s; }
#flux-chat .flux-chat-launch:hover { background:var(--fc-navy-2); box-shadow:0 16px 36px rgba(6,39,71,.32); transform:translateY(-2px); }
#flux-chat .flux-chat-launch-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--fc-gold); color:var(--fc-navy); }
#flux-chat .flux-chat-launch-icon svg { display:block; }
#flux-chat .flux-chat-dot { position:absolute; top:-3px; right:-3px; z-index:2; width:15px; height:15px; border:2px solid #fff; border-radius:50%; background:#e03935; box-shadow:0 2px 6px rgba(122,21,19,.35); pointer-events:none; }
html.flux-chat-panel-open { overscroll-behavior:none; }
#flux-chat .flux-chat-backdrop { position:fixed; inset:0; z-index:0; background:rgba(6,39,71,.2); touch-action:none; overscroll-behavior:none; }
#flux-chat .flux-chat-panel { overscroll-behavior:none; }
#flux-chat .flux-chat-messages, #flux-chat .flux-chat-intro { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#flux-chat .flux-chat-panel { z-index:1; position:absolute; right:0; bottom:calc(100% + 14px); display:flex; flex-direction:column; width:min(392px,calc(100vw - 24px)); height:min(590px,calc(100dvh - 110px)); min-height:300px; overflow:hidden; border:1px solid #dce4eb; border-radius:16px; background:#fff; box-shadow:0 22px 65px rgba(6,39,71,.22); }
#flux-chat .flux-chat-head { display:flex; align-items:center; gap:12px; flex:none; min-height:78px; padding:15px 18px; background:linear-gradient(115deg,var(--fc-navy),var(--fc-navy-2)); color:#fff; border-bottom:3px solid var(--fc-gold); }
#flux-chat .flux-chat-avatar { display:grid; place-items:center; flex:none; width:43px; height:43px; border:1px solid rgba(244,201,103,.65); border-radius:12px; background:rgba(244,201,103,.13); color:var(--fc-gold); font-size:17px; font-weight:800; letter-spacing:-.04em; }
#flux-chat .flux-chat-head strong { display:block; color:#fff; font-size:15px; line-height:1.4; font-weight:700; }
#flux-chat .flux-chat-head small { display:flex; align-items:center; gap:6px; color:#e0eaf3; font-size:11px; }
#flux-chat .flux-chat-online { width:7px; height:7px; border-radius:50%; background:var(--fc-gold); box-shadow:0 0 0 3px rgba(244,201,103,.16); }
#flux-chat .flux-chat-close { margin-left:auto; padding:3px 6px; align-self:flex-start; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; opacity:.8; }
#flux-chat .flux-chat-close:hover { opacity:1; }
#flux-chat .flux-chat-intro { flex:none; margin:15px 17px 0; padding:11px 13px; border-left:3px solid var(--fc-gold); border-radius:0 7px 7px 0; background:#f5f7f9; color:#33485c; font-size:12px; line-height:1.65; }
#flux-chat .flux-chat-messages { flex:1; min-height:0; display:flex; flex-direction:column; gap:13px; overflow-y:auto; padding:18px 17px; overscroll-behavior:contain; scrollbar-color:#cbd5de transparent; }
#flux-chat .flux-chat-bubble { max-width:84%; padding:10px 13px; border:1px solid var(--fc-line); border-radius:12px 12px 12px 3px; background:#f5f7fa; color:var(--fc-ink); font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
#flux-chat .flux-chat-bubble small { display:block; margin:0 0 3px; color:var(--fc-muted); font-size:10px; }
#flux-chat .flux-chat-agent { align-self:flex-start; }
#flux-chat .flux-chat-visitor { align-self:flex-end; border-color:#c9d8e5; border-radius:12px 12px 3px 12px; background:#eaf1f7; }
#flux-chat .flux-chat-error { margin:0 17px 8px; padding:8px 10px; border-radius:6px; background:#fff0ec; color:#9a3424; font-size:12px; }
#flux-chat .flux-chat-form { flex:none; margin:0; padding:13px 17px 15px; border-top:1px solid var(--fc-line); background:#fff; }
#flux-chat .flux-chat-compose { display:flex; align-items:stretch; gap:8px; }
#flux-chat .flux-chat-input { flex:1; min-width:0; min-height:58px; max-height:120px; margin:0; padding:9px 10px; resize:vertical; border:1px solid #cdd8e0; border-radius:7px; background:#fff; color:var(--fc-ink); font-size:12px; outline:none; }
#flux-chat .flux-chat-input:focus { border-color:var(--fc-navy-2); box-shadow:0 0 0 2px rgba(6,39,71,.09); }
#flux-chat .flux-chat-submit { flex:none; min-width:66px; border:0; border-radius:7px; padding:0 13px; background:var(--fc-navy); color:#fff; font-size:12px; font-weight:700; }
#flux-chat .flux-chat-submit:hover { background:var(--fc-navy-2); }
#flux-chat .flux-chat-submit:disabled { opacity:.5; cursor:not-allowed; }
#flux-chat .flux-chat-new { align-self:center; margin:0 17px 10px; padding:9px 14px; border:1px solid #c3d0d9; border-radius:6px; background:#f6f8fa; color:var(--fc-navy); font-size:12px; font-weight:700; }
#flux-chat :focus-visible { outline:2px solid var(--fc-gold); outline-offset:2px; }
@media(max-width:480px) { #flux-chat { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); } #flux-chat .flux-chat-panel { position:fixed; left:10px; right:10px; bottom:calc(72px + env(safe-area-inset-bottom)); width:auto; height:min(75dvh,590px); } #flux-chat .flux-chat-launch { min-height:54px; } }
@media(prefers-reduced-motion:reduce) { #flux-chat .flux-chat-launch { transition:none; } }
#flux-chat .flux-chat-avatar img { width:100%; height:100%; object-fit:contain; border-radius:inherit; }
#flux-chat .flux-chat-brand { min-width:0; flex:1; }
#flux-chat .flux-chat-head { min-width:0; }
#flux-chat .flux-chat-head strong,#flux-chat .flux-chat-head small { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#flux-chat .flux-chat-head small { white-space:nowrap; }
#flux-chat .flux-chat-subtitle { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#flux-chat .flux-chat-close { flex:none; }
#flux-chat .flux-chat-intro { max-height:96px; overflow:auto; overflow-wrap:anywhere; }
#flux-chat .flux-chat-meta { display:flex; justify-content:space-between; gap:8px; margin-top:6px; color:var(--fc-muted); font-size:10px; }
#flux-chat .flux-chat-count { flex:none; font-variant-numeric:tabular-nums; }

/* Keep the conversation above its launcher even if the launcher wraps. */
@media(max-width:480px) {
  #flux-chat .flux-chat-panel { bottom:calc(max(12px, env(safe-area-inset-bottom)) + var(--flux-chat-launch-height, 54px) + 10px); }
}

/* On phones, the conversation itself replaces the launcher. */
@media(max-width:700px) {
  body.flux-chat-panel-open { overflow:hidden; }
  body.flux-chat-panel-open #flux-chat .flux-chat-launch { display:none; }
  body.flux-chat-panel-open #flux-chat .flux-chat-panel {
    position:fixed; top:0; right:0; bottom:0; left:0;
    width:100%; height:100vh; height:100dvh; min-height:0; max-height:none;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
    border:0; border-radius:0; box-shadow:none;
  }
}

/* Compact icon-only launcher, aligned with the theme's 54px mobile cart. */
#flux-chat .flux-chat-launch {
  width:54px; height:54px; min-width:54px; min-height:54px;
  padding:0; gap:0; border-radius:50%;
}
#flux-chat .flux-chat-launch-icon { width:40px; height:40px; }
#flux-chat .flux-chat-launch-icon svg {
  width:23px; height:23px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
#flux-chat .flux-chat-launch-icon svg path:last-child { stroke-width:2.8; }

@media(max-width:700px) {
  #flux-chat { right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); }
}

/* Phone form controls use readable text so focusing a field does not zoom the page. */
@media(max-width:700px) {
  #flux-chat .flux-chat-panel { max-width:100vw; }
  #flux-chat .flux-chat-head, #flux-chat .flux-chat-form { min-width:0; }
  #flux-chat .flux-chat-compose { min-width:0; }
  #flux-chat .flux-chat-input { font-size:16px; line-height:1.4; resize:none; }
  #flux-chat .flux-chat-submit { min-width:64px; }
}

/* Follow the visible phone viewport when the on-screen keyboard appears. */
@media(max-width:700px) {
  body.flux-chat-panel-open #flux-chat .flux-chat-panel {
    top:var(--flux-chat-visual-top, 0px);
    bottom:auto;
    height:var(--flux-chat-visual-height, 100dvh);
  }
}
@media(max-width:700px) and (max-height:420px) {
  #flux-chat .flux-chat-head { min-height:56px; padding:8px 12px; }
  #flux-chat .flux-chat-intro { max-height:56px; margin:7px 12px 0; padding:7px 9px; }
  #flux-chat .flux-chat-messages { padding:8px 12px; }
  #flux-chat .flux-chat-form { padding:8px 12px; }
  #flux-chat .flux-chat-input { min-height:42px; max-height:70px; }
}

@media(max-width:700px) {
  body.flux-chat-short-viewport #flux-chat .flux-chat-head { min-height:56px; padding:8px 12px; }
  body.flux-chat-short-viewport #flux-chat .flux-chat-intro { max-height:56px; margin:7px 12px 0; padding:7px 9px; }
  body.flux-chat-short-viewport #flux-chat .flux-chat-messages { padding:8px 12px; }
  body.flux-chat-short-viewport #flux-chat .flux-chat-form { padding:8px 12px; }
  body.flux-chat-short-viewport #flux-chat .flux-chat-input { min-height:42px; max-height:70px; }
}