/* ============================================================
   Business Ocean — chat widget («Open Water»)
   Loaded from templates/partials/scripts.php after the main cascade, so it
   can lean on tokens.css and components.css (.btn, .chip, .field, .icon,
   .mono-label). Every raw value lives in tokens.css.

   DOM contract with assets/js/chat-widget.js — ids and classes the script
   reads or creates. Values may change here; names may not:
     #bk-chat-widget  #chat-btn (.open)  #chat-bubble .chat-bubble-close
     #chat-window  #chat-messages  #chat-input  #chat-send  #chat-close
     #chat-escalate  #chat-escalate-modal  #chat-escalate-form
     #chat-escalate-cancel  .chat-modal-submit
     .chat-msg .chat-msg-user .chat-msg-assistant .chat-msg-text
     .chat-md-p .chat-md-h  .chat-msg-time
     .chat-quick-replies .chat-quick-reply(.chip)
     .chat-contact-card .chat-contact-title .chat-contact-form
     .chat-contact-input .chat-contact-actions .chat-contact-skip
     .chat-contact-submit
     .chat-typing .chat-typing-dots
     .chat-rating .chat-rating-btn .chat-rating-up .chat-rating-down
     .chat-rating-thanks
   body.bk-chat-open — set by the script while the panel is open (locks
   page scroll under the mobile sheet).
   ============================================================ */

#bk-chat-widget {
  --chat-launcher: 3.5rem;
  --chat-offset: var(--space-5);
  --chat-w: min(24rem, 100vw - var(--chat-offset) * 2);
  --chat-h: min(36rem, 100vh - var(--chat-launcher) - var(--chat-offset) * 3);
  font-family: var(--font-body);
  font-size: var(--size--1);
  line-height: var(--leading-body);
  color: var(--ink);
}

#bk-chat-widget *,
#bk-chat-widget *::before,
#bk-chat-widget *::after { box-sizing: border-box; }

/* bare buttons inherit the widget's type; .btn keeps its own. No colour here:
   :not(.btn) carries .btn's specificity and would outrank .chat-btn's paper
   icon (every bare button below sets its own colour). */
#bk-chat-widget button:not(.btn) { font: inherit; }
#bk-chat-widget button { cursor: pointer; }

/* -- launcher ------------------------------------------------ */
#bk-chat-widget .chat-btn {
  position: fixed;
  right: var(--chat-offset);
  bottom: var(--chat-offset);
  z-index: 90;
  width: var(--chat-launcher);
  height: var(--chat-launcher);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-2);
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-out);
}

#bk-chat-widget .chat-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}

#bk-chat-widget .chat-btn:active {
  transform: translateY(-1px) scale(0.96);
  transition-duration: 70ms;
}

#bk-chat-widget .chat-btn:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
}

/* both icons share one cell; the script toggles .open to swap them */
#bk-chat-widget .chat-btn .icon {
  grid-area: 1 / 1;
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

#bk-chat-widget .chat-btn__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
#bk-chat-widget .chat-btn.open .chat-btn__icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); }
#bk-chat-widget .chat-btn.open .chat-btn__icon--close { opacity: 1; transform: none; }

/* one soft ring on first paint — attention without a bounce */
@keyframes chat-ring {
  from { box-shadow: var(--shadow-2), 0 0 0 0 var(--foam); }
  to   { box-shadow: var(--shadow-2), 0 0 0 1rem transparent; }
}

html:not(.no-motion) #bk-chat-widget .chat-btn:not(.open) {
  animation: chat-ring var(--dur-3) var(--ease-out) 1.2s 2;
}

/* -- greeting bubble ----------------------------------------- */
#bk-chat-widget .chat-bubble {
  position: fixed;
  right: var(--chat-offset);
  bottom: calc(var(--chat-offset) + var(--chat-launcher) + var(--space-3));
  z-index: 89;
  max-width: 18rem;
  padding: var(--space-4) var(--space-7) var(--space-4) var(--space-4);
  border-radius: var(--radius-2) var(--radius-2) var(--space-1) var(--radius-2);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
  cursor: pointer;
  animation: chat-rise var(--dur-2) var(--ease-out);
}

#bk-chat-widget .chat-bubble:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }

#bk-chat-widget .chat-bubble-text { display: block; color: var(--ink); }

#bk-chat-widget .chat-bubble-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-50);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

#bk-chat-widget .chat-bubble-close:hover { color: var(--ink); background: var(--mist); }
#bk-chat-widget .chat-bubble-close:focus-visible { outline: 2px solid var(--ocean); outline-offset: 1px; }
#bk-chat-widget .chat-bubble-close .icon { width: 1rem; height: 1rem; }

@keyframes chat-rise {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to   { opacity: 1; transform: none; }
}

/* -- panel --------------------------------------------------- */
#bk-chat-widget .chat-window {
  position: fixed;
  right: var(--chat-offset);
  bottom: calc(var(--chat-offset) + var(--chat-launcher) + var(--space-3));
  z-index: 95;
  width: var(--chat-w);
  height: var(--chat-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
  animation: chat-open var(--dur-2) var(--ease-out);
  transform-origin: 100% 100%;
}

@keyframes chat-open {
  from { opacity: 0; transform: translateY(var(--space-3)) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* header */
#bk-chat-widget .chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

#bk-chat-widget .chat-header__mark {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--foam);
  color: var(--ocean);
}

#bk-chat-widget .chat-header__mark .icon { width: 1.25rem; height: 1.25rem; }

#bk-chat-widget .chat-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

#bk-chat-widget .chat-wordmark {
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: var(--size-0);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bk-chat-widget .chat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
}

#bk-chat-widget .chat-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--state-good);
  box-shadow: 0 0 0 3px var(--state-good-bg);
}

#bk-chat-widget .chat-close {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-70);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

#bk-chat-widget .chat-close:hover { color: var(--ink); background: var(--mist); }
#bk-chat-widget .chat-close:focus-visible { outline: 2px solid var(--ocean); outline-offset: 1px; }
#bk-chat-widget .chat-close .icon { width: 1.25rem; height: 1.25rem; }

/* -- message list -------------------------------------------- */
#bk-chat-widget .chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

#bk-chat-widget .chat-msg {
  position: relative;
  max-width: 86%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  animation: chat-rise var(--dur-2) var(--ease-out);
}

#bk-chat-widget .chat-msg-assistant {
  align-self: flex-start;
  background: var(--mist);
  border-end-start-radius: var(--space-1);
}

#bk-chat-widget .chat-msg-user {
  align-self: flex-end;
  background: var(--foam);
  border-end-end-radius: var(--space-1);
}

#bk-chat-widget .chat-msg-text { overflow-wrap: anywhere; }

/* mono timestamp under the bubble, stamped by the script on live messages */
#bk-chat-widget .chat-msg-time {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-50);
}

#bk-chat-widget .chat-msg-user .chat-msg-time { text-align: end; }

/* markdown subset built by the script */
#bk-chat-widget .chat-md-p { margin: 0 0 var(--space-2); }
#bk-chat-widget .chat-md-p:last-child { margin-bottom: 0; }
#bk-chat-widget .chat-md-h { margin: var(--space-3) 0 var(--space-1); font-weight: 700; }
#bk-chat-widget .chat-md-h:first-child { margin-top: 0; }
#bk-chat-widget .chat-msg-text ul { margin: var(--space-2) 0; padding-inline-start: 1.25em; list-style: disc; }
#bk-chat-widget .chat-msg-text li { margin: var(--space-1) 0; }
#bk-chat-widget .chat-msg-text a { color: var(--ocean); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
#bk-chat-widget .chat-msg-text hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-3) 0; }
#bk-chat-widget .chat-msg-text code {
  padding: 0 0.35em;
  border-radius: var(--space-1);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* quick replies — .chip from components.css, made pressable */
#bk-chat-widget .chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 92%;
}

#bk-chat-widget .chat-quick-reply {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  white-space: normal;
  text-align: start;
  transition:
    background var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-spring);
}

#bk-chat-widget .chat-quick-reply:hover { background: var(--foam); box-shadow: inset 0 0 0 1px var(--ocean); transform: translateY(-1px); }
#bk-chat-widget .chat-quick-reply:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }

/* typing indicator */
#bk-chat-widget .chat-typing {
  align-self: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  border-end-start-radius: var(--space-1);
  background: var(--mist);
}

#bk-chat-widget .chat-typing-dots { display: flex; gap: var(--space-1); height: 1.25em; align-items: center; }

#bk-chat-widget .chat-typing-dots span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  animation: chat-dot 1.2s var(--ease-inout) infinite;
}

#bk-chat-widget .chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
#bk-chat-widget .chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-dot {
  0%, 60%, 100% { transform: none; opacity: 0.4; }
  30%           { transform: translateY(-0.25rem); opacity: 1; }
}

/* rating — two quiet icon buttons under an assistant answer */
#bk-chat-widget .chat-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: calc(var(--space-2) * -1);
}

#bk-chat-widget .chat-rating-btn {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-50);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

#bk-chat-widget .chat-rating-btn:hover { color: var(--ocean); background: var(--foam); }
#bk-chat-widget .chat-rating-btn:focus-visible { outline: 2px solid var(--ocean); outline-offset: 1px; }
#bk-chat-widget .chat-rating-btn .icon { width: 0.875rem; height: 0.875rem; }

#bk-chat-widget .chat-rating-thanks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--state-good);
}

#bk-chat-widget .chat-rating-thanks .icon { width: 0.875rem; height: 0.875rem; }

/* -- contact card (built by the script, .field from components.css) -- */
#bk-chat-widget .chat-contact-card {
  padding: var(--space-4);
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  animation: chat-rise var(--dur-2) var(--ease-out);
}

#bk-chat-widget .chat-contact-title {
  margin-block-end: var(--space-3);
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: var(--size--1);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

#bk-chat-widget .chat-contact-form {
  display: grid;
  gap: var(--space-3);
}

#bk-chat-widget .chat-contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

/* widget-scale overrides for the shared form primitives */
#bk-chat-widget .field { gap: var(--space-1); }
#bk-chat-widget .field > label { font-size: 0.6875rem; }
#bk-chat-widget .field input,
#bk-chat-widget .field textarea { padding: 0.7em 0.85em; font-size: var(--size--1); }
#bk-chat-widget .field textarea { min-height: 4em; }
#bk-chat-widget .field__hint { font-size: 0.75rem; }

#bk-chat-widget .btn--sm { padding: 0.75em 1.1em; font-size: var(--size--1); }

/* -- composer ------------------------------------------------ */
#bk-chat-widget .chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--paper);
}

#bk-chat-widget .chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 5rem;
  padding: 0.6em 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  resize: none;
  outline: none;
}

#bk-chat-widget .chat-input::placeholder { color: var(--ink-50); }

/* the send button is .btn--primary shrunk to a circle; the shared hover
   gradient and glow come along with the class */
#bk-chat-widget .chat-send {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-shrink: 0;
}

#bk-chat-widget .chat-send .icon { width: 1.125rem; height: 1.125rem; }
#bk-chat-widget .chat-send:hover .icon { transform: translate(2px, -2px); }
#bk-chat-widget .chat-send:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
#bk-chat-widget .chat-send:disabled::before,
#bk-chat-widget .chat-send:disabled::after { opacity: 0; }

/* -- footer: escalate to a person --------------------------- */
#bk-chat-widget .chat-footer {
  padding: 0 var(--space-4) var(--space-3);
  background: var(--paper);
}

#bk-chat-widget .chat-escalate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-70);
  transition: color var(--dur-1) var(--ease-out);
}

#bk-chat-widget .chat-escalate-btn:hover { color: var(--ocean); }
#bk-chat-widget .chat-escalate-btn:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; border-radius: var(--radius-1); }
#bk-chat-widget .chat-escalate-btn .icon { width: 0.875rem; height: 0.875rem; }

/* -- escalation dialog -------------------------------------- */
#bk-chat-widget .chat-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--ink-30);
  animation: chat-fade var(--dur-2) var(--ease-out);
}

@keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }

#bk-chat-widget .chat-modal-content {
  width: 100%;
  max-width: 26rem;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
  animation: chat-open var(--dur-2) var(--ease-out);
}

#bk-chat-widget .chat-modal-content h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: var(--size-1);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--ink);
}

#bk-chat-widget .chat-modal-content p { margin: 0 0 var(--space-5); color: var(--ink-70); }

#bk-chat-widget .chat-modal-fields { display: grid; gap: var(--space-3); }

#bk-chat-widget .chat-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

/* -- phone: full-width sheet -------------------------------- */
@media (max-width: 639px) {
  #bk-chat-widget .chat-window {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    animation: chat-sheet var(--dur-2) var(--ease-out);
  }

  @keyframes chat-sheet {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  #bk-chat-widget .chat-header { padding-block-start: max(var(--space-4), env(safe-area-inset-top)); }
  #bk-chat-widget .chat-footer { padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom)); }

  #bk-chat-widget .chat-btn { right: var(--space-4); bottom: var(--space-4); }
  #bk-chat-widget .chat-bubble { right: var(--space-4); left: var(--space-4); max-width: none; }
  #bk-chat-widget .chat-modal { padding: var(--space-4); }
  #bk-chat-widget .chat-modal-content { padding: var(--space-5); }

  /* the sheet covers the launcher; only the sheet's own close remains */
  body.bk-chat-open { overflow: hidden; }
}

/* -- reduced motion / ?static=1 ----------------------------- */
.no-motion #bk-chat-widget .chat-btn,
.no-motion #bk-chat-widget .chat-bubble,
.no-motion #bk-chat-widget .chat-window,
.no-motion #bk-chat-widget .chat-msg,
.no-motion #bk-chat-widget .chat-contact-card,
.no-motion #bk-chat-widget .chat-modal,
.no-motion #bk-chat-widget .chat-modal-content,
.no-motion #bk-chat-widget .chat-typing-dots span { animation: none; }

.no-motion #bk-chat-widget .chat-typing-dots span { opacity: 0.7; }