/* Local stand-in for the ChatWith "jAI" window. Figma has no chat window (ASK-DESIGN(chat-window)), so it
   follows the v2 design system: deep-teal header like the "Chat with us" tab, square corners, Poppins body,
   Saol name, sand bot bubbles, contact-form field and coral send button. */
/* Bookmark: the panel slides out from the right edge, vertically centered like the tab, and the tab
   (shell.css, z-index 40) slides left by the panel's width so it stays attached to the panel. */
.chat-mock { --chat-w: 400px;
  position: fixed; z-index: 41; right: 0; top: 50%; visibility: hidden;
  transform: translate(100%, -50%); transition: transform .35s ease, visibility 0s .35s;
  font-family: var(--font-body); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--color-ink); }
.chat-mock.is-open { visibility: visible; transform: translate(0, -50%); transition: transform .35s ease; }
.chat-tab { transition: transform .35s ease; }
.chat-mock-open .chat-tab { transform: translate(calc(-1 * var(--chat-w, 400px)), -50%) rotate(180deg); }

.chat-mock__window { display: flex; flex-direction: column; width: var(--chat-w); height: min(600px, calc(100vh - 40px));
  background: var(--color-white); box-shadow: 0 10px 40px var(--color-image-dim); }

.chat-mock__head { display: flex; align-items: center; gap: var(--space-15); padding: var(--space-15) var(--space-20);
  background: var(--color-teal-deep); color: var(--color-white); }
.chat-mock__who { display: grid; flex: 1; }
.chat-mock__name { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.chat-mock__status { font-size: 12px; line-height: 18px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-on-dark-muted); }
.chat-mock__close { display: grid; padding: 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.chat-mock__close:hover { color: var(--link-hover-on-dark); }
.chat-mock__close .icon { width: 22px; height: 22px; }

.chat-mock__log { flex: 1; display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-20); overflow-y: auto; }
.chat-mock__msg { max-width: 85%; }
.chat-mock__bubble { padding: var(--space-10) var(--space-15); background: var(--color-sand); overflow-wrap: anywhere; }
.chat-mock__bubble p { margin: 0; }
.chat-mock__bubble p + p { margin-top: var(--space-10); }
.chat-mock__bubble a { color: inherit; }
.chat-mock__bubble a:hover { color: var(--link-hover-on-light); }
.chat-mock__msg--user { align-self: flex-end; }
.chat-mock__msg--user .chat-mock__bubble { background: var(--color-teal-deep); color: var(--color-white); white-space: pre-wrap; }

.chat-mock__typing { display: flex; gap: 4px; padding: 8px 0; }
.chat-mock__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-muted); animation: chat-mock-dot 1s infinite; }
.chat-mock__typing i:nth-child(2) { animation-delay: .15s; }
.chat-mock__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-mock-dot { 50% { opacity: .3; } }

/* Field and button: the contact form's (square, 1px line border; coral with peach) */
.chat-mock__form { display: flex; gap: var(--space-10); padding: var(--space-15) var(--space-20) var(--space-20); border-top: 1px solid var(--color-line); }
.chat-mock__form textarea { flex: 1; height: var(--size-control-md); max-height: 120px; padding: 14px var(--space-15);
  border: 1px solid var(--color-line); border-radius: var(--radius-none); resize: none;
  font: inherit; color: var(--color-ink); background: var(--color-white); }
.chat-mock__send { display: grid; place-items: center; flex: none; width: var(--size-control-md); height: var(--size-control-md);
  border: 0; background: var(--color-coral); color: var(--color-peach); cursor: pointer; }
.chat-mock__send:disabled { opacity: .5; cursor: default; }
.chat-mock__send:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 3px; }

/* Phones: full screen over the tab; the tab doesn't move */
@media (max-width: 575.98px) {
  .chat-mock { inset: 0; z-index: 90; transform: translateX(100%); }
  .chat-mock.is-open { transform: none; }
  .chat-mock-open .chat-tab { transform: translateY(-50%) rotate(180deg); }
  .chat-mock__window { width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-mock, .chat-mock.is-open, .chat-tab { transition: none; }
  .chat-mock__typing i { animation: none; }
}