/* The Support page (resources/views/support, public/js/support.js): PressUp AI's chat in a box like the home
   page's start box (.prompt in app.css), a light thread of answers, the hand-off to the team, Your requests and
   the guides. Loaded after app.css, whose tokens it uses. */

.support-container{max-width:880px}
.support-top{padding:56px 0 40px;text-align:center}
.support-top h1{margin:0;font:560 clamp(36px,5vw,58px)/1.04 var(--display);letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.support-top .lede{margin:14px auto 0;font-size:18px}
.support-owner .support-top{padding-top:8px}
.support-owner.dash{padding-top:28px}

/* The chat */
.sc{margin-top:28px;text-align:left}
.sc-panel{display:flex;flex-direction:column;gap:18px;padding:20px 20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(26,26,23,.04),0 12px 32px rgba(26,26,23,.06)}
.sc-panel:focus-within{border-color:#cfc7b8}

/* The conversation: the customer's words in a soft bubble, the answers as plain readable text */
.sc-thread{display:flex;flex-direction:column;gap:18px;margin:0;padding:4px 0 18px;border-bottom:1px solid var(--line-soft);list-style:none}
.sc-thread[hidden]{display:none}
.sc-turn{display:flex;gap:12px;min-width:0;animation:sc-in .25s ease}
@keyframes sc-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sc-you{justify-content:flex-end}
.sc-you p{max-width:min(560px,86%);margin:0;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--chip);color:var(--ink);font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sc-ai .faq-avatar{width:26px;height:26px;margin-top:1px;border-radius:8px}
.sc-ai-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;max-width:640px;font-size:16.5px;line-height:1.6}
.sc-ai-body p,.sc-ai-body ul{margin:0;overflow-wrap:anywhere}
.sc-ai-body ul{padding-left:20px}
.sc-ai-body li+li{margin-top:4px}
.sc-ai-body .sc-links{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.sc-links li+li{margin-top:0}
.sc-links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.2;text-decoration:none}
.sc-links a:hover{border-color:#cfc7b8;color:var(--ink)}
.sc-links a:focus-visible,.sc-chip:focus-visible,.sc-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-offer{margin-top:2px}
.sc-thinking .faq-dots{border-radius:14px 14px 14px 4px}

/* Asking */
.sc-ask{display:flex;flex-direction:column;gap:10px}
.sc-ask[hidden],.sc-handoff[hidden],.sc-sent[hidden],.sc-below[hidden],.sc-suggest[hidden]{display:none}
.sc-ask label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em}
.sc-ask textarea{width:100%;min-height:64px;padding:0;border:0;background:transparent;color:var(--ink);font:400 19px/1.5 var(--body);resize:vertical}
.sc-ask textarea:focus{outline:none}
.sc-ask .error{margin:0}
.sc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.sc-foot .hint{flex:1 1 220px}
.sc-foot .btn{margin-left:auto}

/* Under the box: suggested questions, a person, starting over */
.sc-below{margin-top:18px}
.sc-suggest .examples-label{text-align:center}
.sc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.sc-chip{min-height:40px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:500 15px/1.3 var(--body);text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.sc-chip:hover{border-color:#cfc7b8;transform:translateY(-1px)}
.sc-links-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;margin:16px 0 0}
.sc-links-row form{margin:0}
.sc-links-row form[hidden]{display:none}
.sc-link{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 4px;border:0;background:none;color:var(--accent-hover);font:600 15px/1.2 var(--body);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;cursor:pointer}
.sc-link:hover{color:var(--accent-hover);text-decoration-color:currentColor}

/* The hand-off to the team */
.sc-handoff{display:flex;flex-direction:column;gap:16px}
.sc-handoff h2{margin:0;font:500 clamp(22px,2.6vw,26px)/1.25 var(--display);letter-spacing:-.01em}
.sc-handoff h2:focus{outline:none}
.sc-note{margin:-8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.5}
.sc-note.is-notice{margin:0;padding:10px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn-ink)}
.sc-handoff .field label{color:var(--ink)}
.sc-handoff .hint,.req-reply .hint{margin:0}
.sc-handoff .error{margin:0}
.sc-handoff .error[hidden]{display:none}
.sc-textarea{min-height:120px;padding:12px 14px;font:400 16.5px/1.5 var(--body);resize:vertical}
.sc-handoff input[readonly]{background:var(--paper);color:var(--muted)}
.sc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sc-optional{color:var(--subtle);font-weight:400}
.sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* Sent */
.sc-sent{display:flex;align-items:flex-start;gap:14px;padding:6px 0}
.sc-sent:focus{outline:none}
.sc-sent-icon{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.sc-sent p{margin:0 0 6px;font-size:17px;line-height:1.5}
.sc-sent-text{font-weight:600}
.sc-sent-more{color:var(--muted)}
.sc-sent .btn{margin-top:8px}

/* Your requests, and the guides */
.support-requests,.support-guides{padding:48px 0;border-top:1px solid var(--line)}
.support-owner .support-requests,.support-owner .support-guides{border-top:0;padding:28px 0 8px}
.support-requests h2,.support-guides h2{margin:0;font:500 clamp(26px,3vw,32px)/1.15 var(--display);letter-spacing:-.015em}
.support-section-text{margin:8px 0 22px;color:var(--muted);font-size:16px}
.req-list,.sg-grid{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.req-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.req-item:hover{border-color:#cfc7b8;color:var(--ink)}
.req-text{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.req-text b{font-size:16px;font-weight:650;overflow-wrap:anywhere}
.req-text small{color:var(--muted);font-size:13.5px}
.sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-card{display:flex;align-items:flex-start;gap:14px;height:100%;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.sg-card:hover{border-color:#cfc7b8;color:var(--ink);transform:translateY(-1px)}
.sg-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-text b{font-size:16px;font-weight:650}
.sg-text small{color:var(--muted);font-size:14px;line-height:1.45}

/* One request's thread */
.req-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--muted);font-size:15px;font-weight:600;text-decoration:none}
.req-back:hover{color:var(--ink)}
.req-head h1{margin:0;font:500 clamp(28px,3.6vw,38px)/1.15 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.req-head p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;color:var(--muted);font-size:14.5px}
.req-thread{display:flex;flex-direction:column;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.req-msg{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.req-msg.is-team{border-color:#F2CDB8;background:#FFFBF8}
.req-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-size:14.5px}
.req-who time{color:var(--subtle);font-size:13.5px}
.req-body{font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.req-reply{display:flex;flex-direction:column;gap:14px;margin-top:24px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.req-reply .notice{margin:0}

@media (max-width:700px){
  .support-top{padding:36px 0 28px}
  .sc-panel{padding:16px 16px 14px;border-radius:18px}
  .sc-ask textarea{font-size:17px}
  .sc-row,.sg-grid{grid-template-columns:1fr}
  .sc-you p{max-width:92%}
  .sc-foot .btn{width:100%}
  .req-item{flex-wrap:wrap}
  .req-item .status-pill{margin-left:52px}
  .support-requests,.support-guides{padding:36px 0}
}
@media (prefers-reduced-motion:reduce){
  .sc-turn{animation:none}
  .sc-chip,.sg-card{transition:none}
  .sc-chip:hover,.sg-card:hover{transform:none}
}