/* Customer Support page, the "Message us" button and the staff Support inbox. */
.unread-badge,.tab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;background:var(--wine);color:#fff;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;vertical-align:1px}
.button .unread-badge{margin-left:-6px}
.button:hover .unread-badge{background:#fff;color:var(--wine)}

/* Office hours */
.office-card{background:var(--cream);padding:24px}
.office-card .eyebrow{margin-bottom:12px}
.office-status{display:flex;align-items:center;gap:10px;font-size:13px}
.office-dot{width:10px;height:10px;border-radius:50%;background:#a8563a;flex-shrink:0;box-shadow:0 0 0 4px #a8563a22}
.is-open .office-dot{background:#3d7a3a;box-shadow:0 0 0 4px #3d7a3a22}
.office-notice{background:#f6ead2;border-left:3px solid #b8893c;padding:10px 12px;margin:12px 0 0;font-size:12px;color:var(--ink)}
.office-hours{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:14px 0 0;font-size:12px}
.office-hours dt{color:var(--muted)}
.office-hours dd{margin:0}
.office-contact{font-size:11px;margin-top:12px}
.office-contact a,.support-signed-out a:not(.button){color:var(--wine);font-weight:600}

/* Layout */
.support-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:32px;align-items:start}
.support-signed-out{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:start}
.support-signed-out .login-card{max-width:none;margin:0}
.support-signed-out .login-card .button{width:auto}
.support-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 14px}
.support-list-head h2{font-size:28px}
.support-list,.inbox-list{display:grid;gap:8px;align-content:start}
.support-empty{font-size:12px;padding:14px;background:var(--cream)}

/* Conversation list items */
.support-item{display:grid;gap:3px;width:100%;text-align:left;border:1px solid var(--line);background:#fffdf8;padding:12px 14px;transition:border-color .2s}
.support-item:hover{border-color:#c5b6ac}
.support-item.is-current{border-color:var(--wine);background:#f7efe9}
.support-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.support-item-top strong{font-size:13px;font-weight:600}
.support-item-ref{font-size:10px;letter-spacing:.4px;color:var(--sage)}
.support-item-preview{font-size:11.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.support-item-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-top:3px}
.chat-state{font-size:9px;letter-spacing:.9px;text-transform:uppercase;font-weight:700;color:var(--muted)}
.chat-state.is-waiting{color:#8a5a1f}
.chat-state.is-replied{color:#2f6b3a}

/* The chat box */
.support-chat{border:1px solid var(--line);background:#fffdf8;display:flex;flex-direction:column;min-height:560px;max-height:calc(100vh - 140px);position:sticky;top:125px}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--cream)}
.chat-who{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.chat-who strong{display:block;font-size:14px;font-weight:600}
.chat-who span:not(.chat-avatar){font-size:11px;color:var(--muted)}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:var(--wine);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;flex-shrink:0}
.chat-back{background:none;border:0;font-size:20px;padding:2px 10px 2px 0;color:var(--wine)}
.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:#fbf8f2}
.bubble{max-width:82%;padding:12px 15px;font-size:13px;line-height:1.6;border-radius:14px;overflow-wrap:anywhere}
.bubble p{color:inherit}
.bubble p+p,.bubble p+div,.bubble div+p{margin-top:8px}
.bubble.is-bot,.bubble.is-staff,.bubble.is-customer{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.is-bot{background:#f3eee4}
.bubble.is-me{align-self:flex-end;background:var(--wine);color:#fff;border-bottom-right-radius:4px}
.bubble.is-me a:not(.button){color:#fff;text-decoration:underline}
.bubble a:not(.button){color:var(--wine);font-weight:600}
.bubble-meta{display:block;font-size:10px;opacity:.72;margin-top:6px}
.bot-aside{font-size:11px;color:var(--muted)!important}
.bubble .office-hours{margin:10px 0;max-width:340px}
.quick-options,.quick-replies{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.quick-groups{display:grid;gap:16px}
.quick-group-label{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.support-faq{max-width:760px;margin:0 auto}
.support-faq h2{margin-bottom:8px}
.support-faq h3{margin:24px 0 4px;font-size:16px;color:var(--muted)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--wine);list-style-position:inside}
.faq-item p{margin:0 0 10px;max-width:62ch}
.faq-item .bot-actions{margin:4px 0 16px}
.support-faq .small-note{margin-top:24px}
/* The "Let's talk" cover (pages.css, motion only) drops onto an empty page: the questions hide and settle in with the rest. */
.sd-arrive #main .support-faq{opacity:0}
.sd-settling #main .support-faq>*{animation:sd-enter 300ms var(--ease-out) 140ms both}
.quick-option{border:1px solid #c5b6ac;background:#fff;color:var(--wine);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:600;line-height:1.4;transition:background .2s,color .2s}
.quick-option:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.bot-requests{display:grid;gap:10px;margin:10px 0}
.bot-request{border:1px solid var(--line);background:#fffdf8;padding:12px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:start}
.bot-request strong{display:block;font-size:13px}
.bot-request span:not(.status-badge){display:block;font-size:11px;color:var(--muted)}
.bot-request p{grid-column:1/-1;font-size:12px}
.bot-request .text-link{grid-column:1/-1;justify-self:start;background:none;border:0;border-bottom:1px solid #bca298;padding:0 0 3px;font-size:11px;gap:10px}
.bot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chat-note{align-self:center;font-size:11px;background:var(--cream);padding:8px 12px;text-align:center;max-width:90%}
.chat-compose{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:12px;background:#fff}
.chat-compose .form-error-summary{margin:0}
.compose-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compose-row .field:only-child{grid-column:1/-1}
.chat-compose textarea{min-height:96px}
.compose-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.chat-reply{border-top:1px solid var(--line);padding:12px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:end;background:#fff}
.chat-reply textarea{min-height:48px;resize:vertical}
.chat-reply .field-error{grid-column:1/-1}

/* Floating "Message us" button for signed-in customers */
.support-launcher{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:8px;background:var(--wine);color:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 6px 24px #2a141a40;font-size:12px;font-weight:600;transition:background .2s,transform .2s}
.support-launcher:hover{background:var(--wine-dark);transform:translateY(-2px)}
.support-launcher-icon{font-size:15px;line-height:1}
.support-launcher .unread-badge{background:#fff;color:var(--wine);margin-left:2px}
/* A soft halo carries unread feedback without moving or repainting the button. */
a[href="/support"].has-unread-reply{isolation:isolate}
a[href="/support"].has-unread-reply:not(.support-launcher){position:relative}
a[href="/support"].has-unread-reply::after{content:"";position:absolute;inset:-4px;border:2px solid #bb8e36;border-radius:inherit;pointer-events:none;opacity:0;animation:reply-halo 2.6s ease-out infinite}
@keyframes reply-halo{0%{opacity:0;transform:scale(.96)}20%{opacity:.65}80%,100%{opacity:0;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){a[href="/support"].has-unread-reply::after{animation:none;opacity:.65;transform:none}}

/* "Request a quote" floats on a phone, where the menu hides it, in the right-hand corner. "Message us" moves to the
   left-hand corner opposite it when it is shown, and keeps the right when there is no quote button (owner, 14 Oct 2026).
   Flat and square like "Message us" (inner.css). */
.quote-float{display:none;position:fixed;right:20px;bottom:20px;z-index:50;align-items:center;gap:10px;min-height:48px;padding:0 16px;background:var(--wine);color:#fff;font:600 15px/1.2 var(--sans);text-decoration:none;outline:1px solid var(--paper);transition:background-color .2s,opacity 200ms ease}
.quote-float svg{flex:none}
@media (hover:hover) and (pointer:fine){.quote-float:hover{background:var(--wine-dark)}}
@media (max-width:1000px){
  .quote-float{display:inline-flex}
  body:has(.quote-float) .support-launcher{right:auto;left:20px}
  html.nav-open .quote-float,html.nav-open .support-launcher,html.ip-open .quote-float,html.ip-open .support-launcher{visibility:hidden;opacity:0;pointer-events:none}
  html.te-on .quote-float,html.te-on .support-launcher{display:none}
}
@media (max-width:600px){
  .quote-float{right:16px;bottom:16px}
  body:has(.quote-float) .support-launcher{left:16px}
}
@media (max-width:340px){
  .quote-float{gap:8px;padding:0 12px;font-size:14px}
  .quote-float svg{display:none}
}
@media (prefers-reduced-motion:no-preference){html.is-first-page .quote-float{animation:pg-settle 420ms var(--ease-out) 900ms backwards}}

/* Staff Support inbox */
.staff-tab .tab-count{margin-left:6px}
.support-tools{flex-wrap:wrap;align-items:center}
.support-tools .filter-bar{margin:0;justify-content:flex-start}
.inbox-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}
.inbox-list{max-height:72vh;overflow-y:auto}
.inbox-thread{border:1px solid var(--line);background:#fffdf8;padding:20px;display:grid;gap:14px;align-content:start}
.thread-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.thread-head h3{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:4px}
.thread-head p{font-size:12px}
.thread-head a{color:var(--wine)}
.thread-requests{font-size:12px;background:var(--cream);padding:10px 14px}
.thread-requests ul{margin:4px 0 0;padding-left:18px}
.thread-requests summary{cursor:pointer;color:var(--wine);font-weight:600}
.thread-requests .text-link{background:none;border:0;border-bottom:1px solid #bca298;padding:0;font-size:12px}
.staff-chat{max-height:440px;border:1px solid var(--line)}
.staff-reply{display:grid;gap:12px}
.staff-reply .form-error-summary{margin:0}
.staff-reply-actions{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.staff-reply-actions .field{flex:1;max-width:260px}
.office-settings{background:var(--cream);padding:20px;margin-bottom:20px;display:grid;gap:16px}
.office-settings fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.office-settings .form-actions{margin-top:0}
.hours-grid{display:grid;gap:8px}
.hours-row{display:grid;grid-template-columns:140px 150px auto 150px minmax(0,1fr);align-items:center;gap:10px;font-size:12px}
.hours-row input[type=time]{min-height:38px;padding:6px 8px}
.hours-row input:disabled{opacity:.45}

@media (max-width:900px){
  .support-layout,.support-signed-out,.inbox-layout{grid-template-columns:1fr}
  .support-layout .support-chat{order:-1;position:static;min-height:480px;max-height:80vh}
  .inbox-list{max-height:none}
}
@media (max-width:600px){
  .compose-row{grid-template-columns:1fr}
  .bubble{max-width:92%}
  .chat-body{padding:14px}
  .chat-head{padding:12px 14px}
  .chat-head .button{padding:9px 12px}
  .support-launcher{right:14px;bottom:14px;padding:11px 15px}
  .hours-row{grid-template-columns:1fr 1fr;row-gap:4px}
  .hours-row .check-row{grid-column:1/-1}
  .hours-row>span[aria-hidden]{display:none}
  .hours-row .field-error{grid-column:1/-1}
  .thread-head,.staff-reply-actions{flex-direction:column;align-items:stretch}
  .staff-reply-actions .field{max-width:none}
}

/* Staff inbox read receipts */
.read-state{font-size:9px;letter-spacing:.9px;text-transform:uppercase;font-weight:700;color:#8a5a1f;white-space:nowrap}
.read-state.is-read{color:#2f6b3a}
.support-item-meta{align-items:center;flex-wrap:wrap}
.thread-head .small-note{margin-top:2px}