/* Studio Chatbot panel (chat.js; spec PSS-Automation/spec/studio-chatbot.md 8 (B)).
   Desktop: a 380px panel docked over the right of the 3D view, clear of the view and rotate toolbars at
   the bottom. Phone (the Studio's own 1050px breakpoint): a bottom sheet at 70vh over everything. Ids,
   not bare tags, carry the styles, because the Studio's long tail of body-level rules styles buttons,
   inputs and small text globally. Colors are the Studio's navy, steel blue and PSS orange. */
#pssChatLauncher,#pssChatPanel{
  --chat-ground:#071a28;--chat-raise:#0b2536;--chat-line:#2c4a5e;--chat-text:#e8f0f5;--chat-muted:#93adbf;
  --chat-accent:#f57832;--chat-accent-ink:#1a0d04;--chat-user:#123b55;--chat-ok:#7fd1a7;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;box-sizing:border-box;
}
#pssChatPanel *,#pssChatPanel *::before,#pssChatPanel *::after{box-sizing:border-box}
#pssChatLauncher[hidden],#pssChatPanel[hidden]{display:none!important}

#pssChatLauncher{
  position:fixed;right:18px;bottom:136px;z-index:60;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px 10px 13px;border:1px solid #ff9a5c;border-radius:999px;
  background:var(--chat-accent);color:var(--chat-accent-ink);font:800 14px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer;text-transform:none;width:auto;margin:0;
}
#pssChatLauncher:hover{background:#ff8a4a}
#pssChatLauncher:focus-visible{outline:3px solid #ffd2b3;outline-offset:3px}

#pssChatPanel{
  position:fixed;right:16px;top:64px;bottom:128px;z-index:61;width:380px;max-width:calc(100vw - 32px);min-height:320px;
  display:flex;flex-direction:column;background:var(--chat-ground);color:var(--chat-text);
  border:1px solid var(--chat-line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.55);overflow:hidden;
}
#pssChatPanel .pss-chat-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--chat-line);background:var(--chat-raise)}
#pssChatPanel .pss-chat-titles{flex:1 1 auto;min-width:0}
#pssChatPanel h2{margin:0;font:800 15px/1.2 Inter,system-ui,sans-serif;color:var(--chat-text);letter-spacing:0;text-transform:none}
#pssChatPanel .pss-chat-titles small{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--chat-muted);text-transform:none;letter-spacing:0}
#pssChatPanel .pss-chat-new,#pssChatPanel .pss-chat-close{
  flex:0 0 auto;min-height:32px;margin:0;padding:6px 10px;border:1px solid var(--chat-line);border-radius:8px;background:transparent;
  color:var(--chat-text);font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;width:auto;text-transform:none;letter-spacing:0;
}
#pssChatPanel .pss-chat-close{display:inline-flex;align-items:center;justify-content:center;width:32px;padding:0}
#pssChatPanel .pss-chat-new:hover,#pssChatPanel .pss-chat-close:hover{border-color:#4f7891;background:#0f2e42}

#pssChatPanel .pss-chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;outline:none}
#pssChatPanel .pss-chat-log:focus-visible{box-shadow:inset 0 0 0 2px #4f7891}
#pssChatPanel .pss-chat-row{display:flex;flex-direction:column;gap:4px;max-width:100%}
#pssChatPanel .pss-chat-bubble{
  max-width:88%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--chat-text);background:var(--chat-raise);border:1px solid var(--chat-line);
}
#pssChatPanel .pss-chat-bot{align-items:flex-start}
#pssChatPanel .pss-chat-bot .pss-chat-bubble{border-top-left-radius:4px}
#pssChatPanel .pss-chat-user{align-items:flex-end}
#pssChatPanel .pss-chat-user .pss-chat-bubble{background:var(--chat-user);border-color:#24597a;border-top-right-radius:4px}
#pssChatPanel .pss-chat-rate{display:flex;gap:4px;padding-left:4px}
#pssChatPanel .pss-chat-rate-btn{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;min-height:0;margin:0;padding:0;border:1px solid transparent;
  border-radius:6px;background:transparent;color:#6f8ea3;cursor:pointer;
}
#pssChatPanel .pss-chat-rate-btn:hover{color:var(--chat-text);border-color:var(--chat-line)}
#pssChatPanel .pss-chat-rate-btn[aria-pressed="true"]{color:var(--chat-accent);border-color:#7a4a2c}

#pssChatPanel .pss-chat-changes{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 0 2px 2px}
#pssChatPanel .pss-chat-chiplist{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
#pssChatPanel .pss-chat-change{
  margin:0;padding:4px 8px;border-radius:999px;border:1px solid #2e5b49;background:#0c2a22;color:#cdeedd;font-size:12px;line-height:1.3;
}
#pssChatPanel .pss-chat-change::before{content:"\2713\00a0";color:var(--chat-ok)}
/* A calculation the bot ran (layout, truck fit, comparison, fleet, requirements): quieter than a change, no numbers. */
#pssChatPanel .pss-chat-calc{border-color:var(--chat-line);background:transparent;color:var(--chat-muted)}
#pssChatPanel .pss-chat-calc::before{content:"\2022\00a0";color:#6f8ea3}
/* The guided step the chat moved the visitor to (chat.js advanceGuided): one plain sentence under the chips. */
#pssChatPanel .pss-chat-stepnote{flex:1 1 100%;margin:1px 0 0;padding:0 0 0 2px;font-size:12px;line-height:1.4;color:var(--chat-text)}
#pssChatPanel .pss-chat-stepnote::before{content:"\2192\00a0";color:var(--chat-accent)}
#pssChatPanel .pss-chat-detail{flex:1 1 100%;min-width:0;margin:2px 0 0;font-size:12px;color:var(--chat-text)}
#pssChatPanel .pss-chat-detail summary{cursor:pointer;color:var(--chat-muted);font-weight:700;padding:2px 0}
#pssChatPanel .pss-chat-detail summary:focus-visible{outline:2px solid #4f7891;outline-offset:2px;border-radius:4px}
#pssChatPanel .pss-chat-table-wrap{max-width:100%;overflow-x:auto;margin-top:4px;border:1px solid var(--chat-line);border-radius:8px}
#pssChatPanel .pss-chat-compare{width:100%;border-collapse:collapse;font-size:12px;line-height:1.3}
#pssChatPanel .pss-chat-compare th,#pssChatPanel .pss-chat-compare td{padding:4px 7px;text-align:left;border-bottom:1px solid var(--chat-line);overflow-wrap:anywhere;font-weight:400;color:var(--chat-text)}
#pssChatPanel .pss-chat-compare thead th{font-weight:700;background:var(--chat-raise)}
#pssChatPanel .pss-chat-compare tbody th{color:var(--chat-muted);white-space:nowrap}
#pssChatPanel .pss-chat-compare tr:last-child th,#pssChatPanel .pss-chat-compare tr:last-child td{border-bottom:0}
#pssChatPanel .pss-chat-reqlist{margin:4px 0 0;padding:0 0 0 16px;color:#cfdde7;line-height:1.45}
#pssChatPanel .pss-chat-undo,#pssChatPanel .pss-chat-action{
  min-height:28px;margin:0;padding:4px 10px;border-radius:7px;border:1px solid #7a4a2c;background:transparent;color:#ffb37a;
  font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;width:auto;text-transform:none;letter-spacing:0;
}
#pssChatPanel .pss-chat-undo:hover:not(:disabled),#pssChatPanel .pss-chat-action:hover:not(:disabled){background:#2a1709}
#pssChatPanel .pss-chat-undo:disabled,#pssChatPanel .pss-chat-action:disabled{opacity:.55;cursor:default;color:var(--chat-muted);border-color:var(--chat-line)}
#pssChatPanel .pss-chat-notice{max-width:92%;padding:8px 11px;border-radius:10px;border:1px dashed #5b6f7d;color:#d5e1ea;font-size:13px;line-height:1.45;background:rgba(255,255,255,.03)}
#pssChatPanel .pss-chat-actions{display:flex;gap:6px}

#pssChatPanel .pss-chat-typing .pss-chat-bubble{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
#pssChatPanel .pss-chat-typing span{width:6px;height:6px;border-radius:50%;background:#8fb2c7;animation:pssChatDot 1.2s infinite ease-in-out}
#pssChatPanel .pss-chat-typing span:nth-child(2){animation-delay:.15s}
#pssChatPanel .pss-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes pssChatDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

#pssChatPanel .pss-chat-starters{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}
#pssChatPanel .pss-chat-starters[hidden]{display:none}
#pssChatPanel .pss-chat-chip{
  min-height:32px;margin:0;padding:6px 11px;border-radius:999px;border:1px solid #3d6379;background:#0a2536;color:var(--chat-text);
  font:600 12.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer;width:auto;text-transform:none;letter-spacing:0;text-align:left;
}
#pssChatPanel .pss-chat-chip:hover{border-color:var(--chat-accent)}
#pssChatPanel .pss-chat-status{margin:0;padding:0 16px 6px;font-size:12px;color:var(--chat-muted)}
#pssChatPanel .pss-chat-status[hidden]{display:none}

#pssChatPanel .pss-chat-form{display:flex;align-items:flex-end;gap:8px;margin:0;padding:10px 12px 6px;border-top:1px solid var(--chat-line)}
#pssChatPanel textarea{
  flex:1 1 auto;min-width:0;min-height:42px;max-height:120px;margin:0;padding:10px 12px;resize:none;border-radius:10px;
  border:1px solid #355269;background:#05141f;color:var(--chat-text);font:400 14px/1.4 Inter,system-ui,sans-serif;
}
#pssChatPanel textarea::placeholder{color:#6f8ea3}
#pssChatPanel textarea:focus{outline:2px solid #4f7891;outline-offset:0;border-color:#4f7891}
#pssChatPanel textarea:disabled{opacity:.6}
#pssChatPanel textarea[readonly]{opacity:.8}
#pssChatPanel #pssChatSend{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:0;margin:0;padding:0;
  border-radius:10px;border:1px solid #ff9a5c;background:var(--chat-accent);color:var(--chat-accent-ink);cursor:pointer;
}
#pssChatPanel #pssChatSend:disabled{opacity:.45;cursor:default}
#pssChatPanel .pss-chat-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
#pssChatPanel .pss-chat-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#pssChatPanel .pss-chat-note{margin:0;padding:2px 14px 10px;font-size:11px;line-height:1.4;color:var(--chat-muted)}
#pssChatPanel .pss-chat-note a{color:#9fd0ee;text-decoration:underline}
#pssChatPanel button:focus-visible{outline:2px solid #ffd2b3;outline-offset:2px}

/* The leave-your-email card (chat.js showLeadCard, 2026-10-22): once per conversation, after the bot points to
   Request PSS review or says PSS engineers will handle something the Studio cannot show. Its fields never go into
   the chat text; they post to the function's op=lead. */
#pssChatPanel .pss-chat-lead{max-width:100%}
#pssChatPanel .pss-chat-lead-card{
  width:100%;margin:0;padding:12px 12px 10px;border:1px solid rgba(245,120,50,.65);border-radius:12px;background:rgba(245,120,50,.08);
  display:flex;flex-direction:column;gap:8px;
}
#pssChatPanel .pss-chat-lead-title{margin:0;font:800 14px/1.3 Inter,system-ui,sans-serif;color:var(--chat-text)}
#pssChatPanel .pss-chat-lead-text{margin:0;font-size:13px;line-height:1.4;color:#d5e1ea}
#pssChatPanel .pss-chat-lead-field{display:flex;flex-direction:column;gap:3px;margin:0;font:600 12px/1.2 Inter,system-ui,sans-serif;color:var(--chat-muted);text-transform:none;letter-spacing:0}
#pssChatPanel .pss-chat-lead-field input{
  width:100%;min-height:36px;margin:0;padding:7px 10px;border-radius:8px;border:1px solid #355269;background:#05141f;color:var(--chat-text);
  font:400 14px/1.3 Inter,system-ui,sans-serif;
}
#pssChatPanel .pss-chat-lead-field input:focus{outline:2px solid #4f7891;outline-offset:0;border-color:#4f7891}
#pssChatPanel .pss-chat-lead-field input[aria-invalid="true"]{border-color:#e0795a}
#pssChatPanel .pss-chat-lead-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#pssChatPanel .pss-chat-lead-send{
  min-height:34px;margin:0;padding:7px 14px;border-radius:8px;border:1px solid #ff9a5c;background:var(--chat-accent);color:var(--chat-accent-ink);
  font:800 13px/1 Inter,system-ui,sans-serif;cursor:pointer;width:auto;text-transform:none;letter-spacing:0;
}
#pssChatPanel .pss-chat-lead-send:disabled{opacity:.55;cursor:default}
#pssChatPanel .pss-chat-lead-status{margin:0;font-size:12.5px;line-height:1.4;color:#ffc9a6}
#pssChatPanel .pss-chat-lead-status:empty{display:none}
#pssChatPanel .pss-chat-lead-done{margin:0;font-size:13.5px;line-height:1.45;color:var(--chat-ok)}
#pssChatPanel .pss-chat-lead-fine{margin:0;font-size:11px;line-height:1.4;color:var(--chat-muted)}
#pssChatPanel .pss-chat-lead-fine a{color:#9fd0ee;text-decoration:underline}

/* What the bot points at when it suggests Request PSS review. It never clicks it. */
.pss-chat-pulse{animation:pssChatPulse 1s ease-in-out 3;box-shadow:0 0 0 3px rgba(245,120,50,.9)!important}
@keyframes pssChatPulse{0%,100%{box-shadow:0 0 0 2px rgba(245,120,50,.9)}50%{box-shadow:0 0 0 8px rgba(245,120,50,.25)}}

/* Ask the assistant entry points: the step buttons in guided.js and the empty-viewer chip chat.js adds to the
   3D view's overlay row. Hidden unless chat.js has put pss-chat-available on <body>, which it does only while
   the launcher may show (status on or paused) and removes when the chat goes off; one that is [hidden] (another
   guided step, a viewer with a part in it) stays hidden. Steel blue and PSS orange, like the launcher. */
.pss-chat-entry{display:none!important}
body.pss-chat-available .pss-chat-entry:not([hidden]){display:flex!important}
body.pss-chat-available .pss-chat-entry-chip:not([hidden]){display:inline-flex!important}
.pss-chat-entry .pss-chat-entry-icon,.pss-chat-entry-chip svg{flex:0 0 auto;color:#f57832}
.pss-chat-entry:focus-visible{outline:2px solid #ffd2b3;outline-offset:2px}
#guidedPanel .pss-chat-entry-card{
  align-items:flex-start;gap:10px;width:100%;margin:12px 0 4px;padding:11px 12px;text-align:left;cursor:pointer;
  border:1px solid rgba(245,120,50,.6);border-radius:10px;background:rgba(245,120,50,.09);color:#eef6fb;
}
#guidedPanel .pss-chat-entry-card:hover{background:rgba(245,120,50,.16);border-color:#f57832}
#guidedPanel .pss-chat-entry-card .pss-chat-entry-icon{width:20px;height:20px;margin-top:1px}
#guidedPanel .pss-chat-entry-card b{display:block;font-size:13px;line-height:1.3;font-weight:800;color:#fff}
#guidedPanel .pss-chat-entry-card small{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:#a9c2d2}
#guidedPanel .pss-chat-entry-link{
  align-items:center;gap:7px;width:auto;max-width:100%;margin:10px 0 2px;padding:6px 11px;text-align:left;cursor:pointer;
  border:1px solid #2f5166;border-radius:999px;background:rgba(10,37,54,.6);color:#cfe0eb;font-size:11.5px;line-height:1.3;
}
#guidedPanel .pss-chat-entry-link:hover{border-color:#f57832}
#guidedPanel .pss-chat-entry-link b{color:#ffb37a;font-weight:800}
.viewer-chip.pss-chat-entry-chip{align-items:center;gap:5px;margin:0;cursor:pointer;font-family:inherit;line-height:1.2;width:auto;text-transform:none;letter-spacing:0}
.viewer-chip.pss-chat-entry-chip svg{width:13px;height:13px}
.viewer-chip.pss-chat-entry-chip:hover{border-color:#f57832}

@media (prefers-reduced-motion:reduce){
  #pssChatPanel .pss-chat-typing span,.pss-chat-pulse{animation:none}
}

/* Phone and small tablet: the Studio's own breakpoint. The action bar (Save, Export PDF, PSS Review) is at
   the top there, and the 3D view's toolbar along the bottom, so the launcher sits just above that toolbar
   in the Full editor. In Guided setup chat.js lifts it to just above the steps sheet, on the left, clear
   of the size chip, and follows the sheet as it is swiped. The panel is a bottom sheet over everything. */
@media (max-width:1050px){
  #pssChatLauncher{right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);min-height:40px;padding:8px 13px 8px 11px;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  #pssChatLauncher.pss-chat-over-sheet{right:auto;left:12px}
  #pssChatPanel{left:0;right:0;top:auto;bottom:0;width:100%;max-width:100%;height:70vh;height:70dvh;min-height:0;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);z-index:1200}
  #pssChatPanel textarea{font-size:16px}
  body.pss-chat-open{overscroll-behavior:none}
}