/*!
 * Structure + behaviour styles for shared/chatbot.js and shared/whatsapp.js.
 * NO theme identity lives here: every colour, font and radius comes from --tc-* custom properties that the
 * theme sets on :root (see the "Concierge + WhatsApp skin" block in each theme's stylesheet).
 *
 *   --tc-bg --tc-ink --tc-muted --tc-line --tc-accent --tc-accent-ink --tc-accent-hover
 *   --tc-link (accent for text links; must reach 4.5:1 on --tc-bot-bg)  --tc-bot-bg --tc-user-bg --tc-user-ink --tc-focus
 *   --tc-font-display --tc-font-body --tc-radius --tc-shadow
 */
.tc-root, .wa-float { font-family: var(--tc-font-body, system-ui, sans-serif); }
/* One dock, bottom-right: [WhatsApp][Ask]. Never bottom-left, where it would sit over the reading column. */
.tc-dock { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: flex-end; gap: 8px; }
.tc-root { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tc-dock.chat-open .wa-float { display: none; }

/* Launcher — labelled, small. Collapses to an icon on phones so it never covers content. */
.tc-launcher {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  background: var(--tc-accent); color: var(--tc-accent-ink); border: 0; border-radius: var(--tc-radius, 2px);
  font: 600 0.9rem/1 var(--tc-font-body, inherit); letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--tc-shadow, none);
}
.tc-launcher:hover { background: var(--tc-accent-hover, var(--tc-accent)); }
.tc-launcher .icon { width: 20px; height: 20px; }
.tc-root.is-open .tc-launcher { display: none; }

.tc-panel {
  width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--tc-bg); color: var(--tc-ink); border: 1px solid var(--tc-line); border-radius: var(--tc-radius, 2px); box-shadow: var(--tc-shadow, none); overflow: hidden;
}
.tc-panel[hidden] { display: none; }
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--tc-line); }
.tc-title { margin: 0; font: 500 1.25rem/1.2 var(--tc-font-display, inherit); }
.tc-sub { margin: 4px 0 0; font-size: 0.8rem; color: var(--tc-muted); }
.tc-close { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; background: none; border: 0; color: var(--tc-ink); cursor: pointer; border-radius: var(--tc-radius, 2px); }
.tc-close:hover { background: var(--tc-bot-bg); }
.tc-close .icon { width: 20px; height: 20px; }

.tc-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.tc-msg { max-width: 88%; font-size: 0.95rem; line-height: 1.5; }
.tc-msg p { margin: 0; padding: 10px 14px; border-radius: var(--tc-radius, 2px); }
.tc-bot { align-self: flex-start; } .tc-bot p { background: var(--tc-bot-bg); }
.tc-user { align-self: flex-end; } .tc-user p { background: var(--tc-user-bg, var(--tc-accent)); color: var(--tc-user-ink, var(--tc-accent-ink)); }
.tc-pending p { color: var(--tc-muted); }
.tc-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px !important; padding: 0 !important; background: none !important; font-size: 0.85rem; }
.tc-links a { color: var(--tc-link, var(--tc-accent)); text-decoration: underline; text-underline-offset: 3px; }

.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.tc-chip { min-height: 36px; padding: 0 12px; background: none; border: 1px solid var(--tc-line); color: var(--tc-ink); border-radius: var(--tc-radius, 2px); font: 500 0.82rem var(--tc-font-body, inherit); cursor: pointer; }
.tc-chip:hover { border-color: var(--tc-ink); }
.tc-form { display: flex; border-top: 1px solid var(--tc-line); }
.tc-input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px 0 20px; background: transparent; border: 0; color: var(--tc-ink); font: 400 0.95rem var(--tc-font-body, inherit); }
.tc-input:focus { outline: none; }
.tc-form:focus-within { box-shadow: inset 0 -2px 0 var(--tc-focus, var(--tc-accent)); }
.tc-send { display: grid; place-items: center; width: 56px; background: none; border: 0; color: var(--tc-link, var(--tc-accent)); cursor: pointer; }
.tc-send .icon { width: 20px; height: 20px; }
.is-sending .tc-send { opacity: 0.4; }
.tc-launcher:focus-visible, .tc-close:focus-visible, .tc-chip:focus-visible, .tc-send:focus-visible, .wa-float:focus-visible { outline: 2px solid var(--tc-focus, var(--tc-accent)); outline-offset: 3px; }

/* WhatsApp — small, secondary, hides while the enquiry form is in view. */
.wa-float {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: var(--tc-bg); color: var(--tc-ink); border: 1px solid var(--tc-line); border-radius: var(--tc-radius, 2px);
  font: 600 0.82rem var(--tc-font-body, inherit); text-decoration: none; box-shadow: var(--tc-shadow, none); transition: opacity .2s, transform .2s;
}
.wa-float:hover { border-color: var(--tc-ink); }
.wa-float .icon { width: 18px; height: 18px; }
.wa-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }

@media (max-width: 720px) {
  .tc-dock { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .tc-launcher { width: 48px; padding: 0; justify-content: center; }
  .tc-launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tc-panel { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: min(72vh, 560px); }
  /* WhatsApp keeps its text label on phones (a bare phone icon reads as "call"); the dock stays one row. */
  .wa-float { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }