/* ==========================================================================
   Care Concierge — chat dialog (matches v3 "Clear Air" tokens from v3.css)
   Mobile: full-height sheet · Desktop (>=768px): right-side 420px panel
   ========================================================================== */
.concierge {
  --cc-pad: 18px;
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
  background: var(--paper, #f4f1ea); color: var(--ink, #12201f);
  font: 400 1rem/1.55 var(--sans, system-ui, sans-serif);
  overflow: hidden; overscroll-behavior: contain;
}
.concierge[open] { display: flex; flex-direction: column; }
.concierge::backdrop { background: rgba(11, 23, 25, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.cc-open { overflow: hidden; }

@media (min-width: 768px) {
  .concierge {
    inset: 16px 16px 16px auto; width: 420px; height: calc(100dvh - 32px); max-height: 860px;
    margin: auto 0; border-radius: var(--r-lg, 32px);
    box-shadow: 0 40px 80px -24px rgba(11, 23, 25, .45), 0 0 0 1px var(--line, rgba(18, 32, 31, .12));
  }
}

/* Header */
.cc-head { display: flex; align-items: center; gap: 10px; padding: var(--cc-pad) var(--cc-pad) 14px; padding-top: max(var(--cc-pad), env(safe-area-inset-top)); border-bottom: 1px solid var(--line, rgba(18, 32, 31, .12)); flex: none; }
.cc-mark { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--euc, #1f4d47); color: var(--mint, #9fe5d3); }
.cc-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cc-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cc-title h2 { margin: 0; font: 400 1.5rem/1.05 var(--display, Georgia, serif); letter-spacing: -.02em; color: var(--ink, #12201f); }
.cc-badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; background: var(--breath, #cfe3dc); color: var(--euc, #1f4d47); font: 500 .58rem/1 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cc-icon-btn { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2, rgba(18, 32, 31, .22)); background: transparent; color: var(--ink, #12201f); cursor: pointer; transition: background-color .2s, border-color .2s; }
.cc-icon-btn:hover { background: var(--white, #fbfaf7); border-color: var(--ink, #12201f); }
.cc-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Message log */
.cc-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px var(--cc-pad); display: flex; flex-direction: column; gap: 16px; }
.cc-log:focus-visible { outline: 2px solid var(--euc, #1f4d47); outline-offset: -4px; }
.cc-msg { display: flex; flex-direction: column; gap: 6px; max-width: 90%; min-width: 0; }
.cc-msg--user { align-self: flex-end; align-items: flex-end; }
.cc-msg--bot { align-self: flex-start; }
.cc-who { font: 400 .58rem/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #56645f); padding: 0 4px; }
.cc-msg--local .cc-who { color: #8a6418; }
.cc-bubble { padding: 12px 16px; border-radius: 20px; font-size: .97rem; line-height: 1.55; overflow-wrap: anywhere; }
.cc-msg--user .cc-bubble { background: var(--euc, #1f4d47); color: var(--white, #fbfaf7); border-bottom-right-radius: 6px; }
.cc-msg--bot .cc-bubble { background: var(--white, #fbfaf7); color: var(--ink, #12201f); border: 1px solid var(--line, rgba(18, 32, 31, .12)); border-bottom-left-radius: 6px; }
.cc-msg--local .cc-bubble { border-color: rgba(217, 164, 65, .45); box-shadow: inset 3px 0 0 var(--pollen, #d9a441); }
.cc-bubble p { margin: 0; }
.cc-bubble p + p, .cc-bubble p + ul, .cc-bubble ul + p { margin-top: .6em; }
.cc-bubble ul { margin: .5em 0 0; padding-left: 1.1em; display: grid; gap: .3em; }
.cc-bubble li::marker { color: var(--euc, #1f4d47); }
.cc-bubble a { color: var(--euc, #1f4d47); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cc-msg--user .cc-bubble a { color: var(--mint, #9fe5d3); }
.cc-bubble a.cc-tel { font-weight: 600; white-space: nowrap; text-decoration-thickness: 2px; padding: 2px 0; }

/* Typing indicator */
.cc-dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.cc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--euc, #1f4d47); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .cc-dots i { animation: ccDot 1.2s infinite var(--ease-breath, ease-in-out); }
  .cc-dots i:nth-child(2) { animation-delay: .15s; }
  .cc-dots i:nth-child(3) { animation-delay: .3s; }
  .cc-msg { animation: ccIn .35s var(--ease, ease-out) both; }
  .concierge[open] { animation: ccSheet .45s var(--ease, ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .concierge[open] { animation-name: ccPanel; }
}
@keyframes ccDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ccIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes ccSheet { from { transform: translateY(32px); opacity: 0; } }
@keyframes ccPanel { from { transform: translateX(40px); opacity: 0; } }

/* Quick-reply chips */
.cc-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--cc-pad) 12px; }
.cc-chips.is-compact { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cc-chips.is-compact::-webkit-scrollbar { display: none; }
.cc-chip { min-height: 44px; padding: 0 16px; flex: none; max-width: 100%; border-radius: 999px; border: 1px solid var(--line-2, rgba(18, 32, 31, .22)); background: transparent; color: var(--ink, #12201f); font: 400 .9rem/1.2 var(--sans, sans-serif); text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s; }
.cc-chip:hover { background: var(--white, #fbfaf7); border-color: var(--ink, #12201f); }
.cc-chip:active { transform: scale(.97); }

/* Composer */
.cc-form { flex: none; padding: 12px var(--cc-pad) 8px; border-top: 1px solid var(--line, rgba(18, 32, 31, .12)); }
.cc-field { display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 5px 5px 5px 18px; border-radius: 28px; background: var(--white, #fbfaf7); border: 1px solid var(--line-2, rgba(18, 32, 31, .22)); transition: border-color .2s, box-shadow .2s; }
.cc-field:focus-within { border-color: var(--euc, #1f4d47); box-shadow: 0 0 0 3px rgba(31, 77, 71, .18); }
.cc-field textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 11px 0; border: 0; outline: 0; background: transparent; resize: none; color: var(--ink, #12201f); font: 400 1rem/1.4 var(--sans, sans-serif); }
.cc-field textarea::placeholder { color: var(--muted, #56645f); opacity: .85; }
.cc-send { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--euc, #1f4d47); color: var(--white, #fbfaf7); cursor: pointer; transition: background-color .2s, transform .15s, opacity .2s; }
.cc-send:hover { background: var(--euc-2, #163a35); }
.cc-send:active { transform: scale(.94); }
.cc-send:disabled { opacity: .45; cursor: progress; }
.cc-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.concierge button:focus-visible, .cc-bubble a:focus-visible, .cc-note a:focus-visible { outline: 2px solid var(--euc, #1f4d47); outline-offset: 2px; }

/* Persistent disclaimer */
.cc-note { flex: none; margin: 0; padding: 4px var(--cc-pad) 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); color: var(--muted, #56645f); font: 400 .6rem/1.6 var(--mono, monospace); letter-spacing: .02em; text-align: center; text-wrap: balance; }
.cc-note a { color: var(--ink, #12201f); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.cc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 360px) {
  .concierge { --cc-pad: 14px; }
  .cc-title h2 { font-size: 1.3rem; }
  .cc-head { gap: 8px; }
  .cc-mark { display: none; }
}
@media (forced-colors: active) {
  .cc-bubble, .cc-chip, .cc-field { border: 1px solid CanvasText; }
}

/* Entry point in the header "Care" dropdown (2-col grid in v3.css): full-width row */
.dropdown__item--concierge { grid-column: 1 / -1; position: relative; padding-right: 120px; background: var(--paper, #f4f1ea); }
.dropdown__item--concierge::after { content: "AI assistant"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; padding: 6px 9px; border-radius: 999px; background: var(--euc, #1f4d47); color: var(--mint, #9fe5d3); font: 500 .66rem/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
.dropdown__item--concierge:hover { background: var(--breath, #cfe3dc); }