/**
 * Website assistant: the warmer layer (client feedback 2026-10-29).
 * A face on the launcher and header, an online/away status, a call and text row,
 * starter choices with "Something else", and a once-per-visit nudge bubble.
 * Builds on the base chat styles in ti-components.css.
 */

/* Launcher: a photo instead of the chat glyph */
.ti-w .ask__face { padding: 0; overflow: hidden; background: var(--leaf-200); box-shadow: 0 0 0 2px var(--leaf-400); }
.ti-w .ask__face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* Header: face, name and office open/closed status (a steady dot: the office is open, not "live chat") */
.ti-w .assist header { align-items: center; }
.ti-w .assist__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ti-w .assist__face { position: relative; flex: none; width: 46px; height: 46px; }
.ti-w .assist__face img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px rgba(244,239,230,.85); }
.ti-w .status-dot { position: absolute; right: -1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #8A8A80; box-shadow: 0 0 0 2px var(--forest-700); }
.ti-w .assist.is-open-hours .status-dot { background: #6FD15A; }
.ti-w .assist header small.status { margin-top: 2px; }

/* "Prefer a person?" call and text row */
.ti-w .reach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 10px 18px; background: var(--leaf-100);
  border-bottom: 1px solid var(--sand-200); font-size: var(--t-cap); line-height: 1.3; color: var(--stone-700); }
.ti-w .reach__label { font-weight: 600; color: var(--forest-700); margin-right: 2px; }
.ti-w .reach a { display: inline-flex; align-items: baseline; gap: 4px; min-height: 32px; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--forest-200); color: var(--forest-700); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ti-w .reach a span { font-weight: 500; color: var(--stone-600); }
.ti-w .reach a:hover { background: var(--forest-100); border-color: var(--forest-500); }

/* Greeting bubble reads a little friendlier */
.ti-w .thread > .msg.bot:first-child { font-size: 1rem; }

/* "Something else…" opens the full list */
.ti-w .chips .chips__more { border-style: dashed; color: var(--bark-600); border-color: var(--bark-500); }
.ti-w .chips .chips__more:hover { background: var(--sand-100, #F4EFE6); }

/* Typing dots */
.ti-w .msg.typing { display: inline-flex; gap: 4px; align-items: center; width: auto; }
.ti-w .msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--stone-500); animation: ti-dot 1.2s infinite ease-in-out; }
.ti-w .msg.typing i:nth-child(2) { animation-delay: .15s; }
.ti-w .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ti-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Once-per-visit nudge, beside the launcher */
.ti-w .ask-nudge { position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: calc(clamp(16px, 2.5vw, 28px) + 64px); z-index: var(--z-launcher);
  display: flex; align-items: flex-start; gap: 4px; max-width: min(280px, calc(100vw - 32px)); padding: 12px 8px 12px 16px; border-radius: 14px 14px 4px 14px;
  background: var(--white); color: var(--stone-900); box-shadow: 0 18px 40px -18px rgba(18,36,15,.55), 0 0 0 1px rgba(29,54,23,.08);
  animation: pop .35s var(--ease-out); }
.ti-w .ask-nudge[hidden] { display: none; }
.ti-w .ask-nudge__open { all: unset; cursor: pointer; font: 500 var(--t-sm)/1.45 var(--f-body); color: var(--stone-900); }
.ti-w .ask-nudge__open:focus-visible { outline: 2px solid var(--forest-500); outline-offset: 3px; border-radius: 4px; }
.ti-w .ask-nudge__x { flex: none; width: 28px; height: 28px; margin-top: -4px; border: 0; border-radius: 4px; background: none; color: var(--stone-600); font-size: 18px; line-height: 1; cursor: pointer; }
.ti-w .ask-nudge__x:hover { background: var(--sand-100, #F4EFE6); }

@media (prefers-reduced-motion: reduce) {
  .ti-w .msg.typing i, .ti-w .ask-nudge { animation: none; }
}

/* "Request a callback" offered under a reply, before the form opens */
.ti-w .chips .cb-offer__yes { background: var(--bark-500); border-color: var(--bark-500); color: #fff; font-weight: 600; }
.ti-w .chips .cb-offer__yes:hover { background: var(--bark-600); border-color: var(--bark-600); }