/* Support desk widget. Uses the site's existing tokens so it reads as part of the
   product, not as a bolted-on chat plugin. Deliberately restrained: no avatars,
   no cartoon mascot, no fake presence indicator. */

.support-desk{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;font-size:.9rem}
.support-launcher{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.05rem;border:1px solid var(--brand-dark);border-radius:2rem;background:var(--brand);color:#fff;font:700 .8rem ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;cursor:pointer;box-shadow:0 14px 34px rgba(7,44,44,.22);transition:.2s ease}
.support-launcher:hover{background:var(--brand-dark);transform:translateY(-1px)}
.support-launcher:focus-visible,.support-icon-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.support-desk.is-open .support-launcher{display:none}

.support-panel{display:flex;flex-direction:column;width:min(calc(100vw - 2.5rem),400px);height:min(calc(100vh - 6rem),620px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 26px 70px rgba(7,44,44,.24);overflow:hidden}
/* An author `display` declaration beats the user-agent [hidden] rule regardless of
   specificity, so the panel must opt back out explicitly. Without this the panel
   renders permanently, the close button appears dead, and on mobile the panel
   swallows clicks aimed at the page behind it. app.css does the same for
   .cookie-banner, which is where this pattern comes from. */
.support-panel[hidden]{display:none}
.support-panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.1rem;background:var(--ink);color:#fff}
.support-panel__head h2{margin:0;font-size:1rem;letter-spacing:-.02em}
.support-panel__eyebrow{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#83dfd3}
.support-panel__head-actions{display:flex;gap:.35rem}
.support-icon-button{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.25);border-radius:.4rem;background:transparent;color:#fff;cursor:pointer;transition:.2s ease}
.support-icon-button:hover{background:rgba(255,255,255,.12)}

.support-notice{margin:0;padding:.7rem 1.1rem;background:#fff7e8;border-bottom:1px solid #eddcb9;color:#6b5320;font-size:.78rem;font-weight:600}

.support-log{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;background:var(--wash)}
.support-message{max-width:92%;padding:.7rem .85rem;border-radius:.7rem;line-height:1.55}
.support-message p{margin:0 0 .6rem;color:inherit}
.support-message p:last-child{margin-bottom:0}
.support-message--assistant{align-self:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.support-message--customer{align-self:flex-end;background:var(--brand);border:1px solid var(--brand-dark);color:#fff}
.support-message--agent{align-self:flex-start;background:var(--brand-pale);border:1px solid #9fd8ce;color:var(--ink)}
.support-message--error{align-self:stretch;background:#fff0ef;border:1px solid #ecc8c5;color:#8d3232;font-weight:600}
.support-message code,.support-part{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;letter-spacing:.02em}

.support-steps{display:flex;flex-direction:column;gap:.25rem;margin:0 0 .55rem;padding:0;list-style:none}
.support-steps li{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--muted)}
.support-steps li:before{content:"";width:6px;height:6px;border-radius:50%;background:#39a789;flex:none}
.support-steps li[data-failed]:before{background:#9a7373}
.support-steps--pending li:before{animation:support-pulse 1.1s ease-in-out infinite}
@keyframes support-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.support-steps--pending li:before{animation:none}}

.support-reference{display:inline-block;margin-top:.5rem;padding:.35rem .6rem;border:1px dashed var(--line);border-radius:.4rem;background:var(--wash);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--ink)}
.support-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.support-links a{display:inline-flex;align-items:center;padding:.45rem .75rem;border:1px solid var(--brand);border-radius:.4rem;background:var(--brand);color:#fff;font-size:.76rem;font-weight:700}
.support-links a:hover{background:var(--brand-dark)}

.support-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.support-quick button{padding:.4rem .7rem;border:1px solid var(--line);border-radius:1rem;background:var(--paper);color:var(--ink-2);font-size:.74rem;font-weight:600;cursor:pointer;transition:.2s ease}
.support-quick button:hover{border-color:var(--brand);color:var(--brand-dark)}

.support-form{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:var(--paper)}
.support-form textarea{flex:1;resize:none;max-height:120px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:.5rem;font:inherit;color:var(--ink);background:var(--paper)}
.support-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-pale)}
.support-form button{flex:none;padding:.6rem .75rem}
.support-form button[disabled]{opacity:.55;cursor:not-allowed}
.support-legal{margin:0;padding:.5rem .9rem .75rem;background:var(--paper);color:var(--muted);font-size:.68rem;line-height:1.45}

@media(max-width:820px){
    .support-desk{right:.75rem;left:.75rem;bottom:.75rem}
    .support-launcher{width:100%;justify-content:center}
    .support-panel{width:100%;height:min(calc(100dvh - 4.5rem),560px)}
    /* Product pages already pin a quote CTA to the bottom edge. */
    .has-sticky-cta .support-desk{bottom:4.6rem}
}

/* Photo attachments. The assistant never sees these; the team does. */
.support-attachments{display:flex;flex-wrap:wrap;gap:.5rem;padding:.7rem .75rem 0;background:var(--paper)}
.support-attachments[hidden]{display:none}
.support-chip{position:relative;display:flex;align-items:center;gap:.5rem;max-width:100%;padding:.35rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:var(--wash)}
.support-chip img{width:34px;height:34px;object-fit:cover;border-radius:.3rem;flex:none}
.support-chip span{font-size:.72rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem}
.support-chip button{flex:none;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:.3rem;background:var(--paper);color:var(--ink-2);cursor:pointer;font-size:.85rem;line-height:1}
.support-chip button:hover{border-color:var(--danger);color:var(--danger)}
.support-chip--busy{opacity:.6}
.support-chip--error{border-color:#ecc8c5;background:#fff0ef}
.support-chip--error span{color:#8d3232}
.support-icon-button--attach{border-color:var(--line);color:var(--ink-2);width:38px;height:38px}
.support-icon-button--attach:hover{background:var(--wash);border-color:var(--brand);color:var(--brand-dark)}
.support-icon-button--attach[disabled]{opacity:.5;cursor:not-allowed}
.support-message__photos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.support-message__photos a{display:block;border:1px solid rgba(255,255,255,.35);border-radius:.4rem;overflow:hidden;line-height:0}
.support-message--assistant .support-message__photos a{border-color:var(--line)}
.support-message__photos img{width:82px;height:82px;object-fit:cover}
