/* guest.css — modern caller modal. Scoped to the guest page only (.guest-user
   and its sections) so the shared index.css + the agent (auth) page are
   untouched. Loaded by index.html after index.css, so these rules win. */

body.guest {
  margin: 0;
  min-height: 100vh;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, #334155, transparent),
    radial-gradient(900px 500px at 100% 0%, #1d4ed8, transparent),
    linear-gradient(160deg, #0f172a, #1e293b);
}

/* The guest <main> becomes the centered card; whichever section is visible
   renders inside it. */
.guest-user {
  width: 400px;
  max-width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}

/* Brand header (added in index.html). */
.guest-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.guest-brand__logo {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.guest-brand__logo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guest-brand__name { font-weight: 700; font-size: 16px; color: #0f172a; }
.guest-brand__sub { color: #64748b; font-size: 13px; }

/* Reset the big stacked margins from index.css inside the card. */
.guest-user .greeting,
.guest-user .call,
.guest-user .call-incoming,
.guest-user .call-outgoing,
.guest-user .send-message,
.guest-user .alert { margin-bottom: 0; }

.guest-user h1 { font-size: 23px; line-height: 1.25; margin: 0 0 6px; color: #0f172a; font-weight: 700; }
.guest-user .no-agents-message,
.guest-user .greeting + .call .lede,
.guest-user .send-message-reason { color: #64748b; font-size: 15px; margin: 0 0 18px; }
.guest-lede { color: #64748b; font-size: 15px; margin: 0 0 20px; }

/* Call buttons -> full-width pill buttons with icons. */
.guest-user .call-buttons { display: flex; gap: 10px; margin: 0; }
.guest-user .call-buttons .call-button { flex: 1; }
.guest-user .call-buttons button,
.guest-user .submit-button,
.guest-user .cancel-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 16px; border-radius: 14px;
  font-size: 15px; font-weight: 600; border: none; cursor: pointer;
  background: #f1f5f9; color: #0f172a;
}
.guest-user .call-buttons button:hover,
.guest-user .submit-button:hover { text-decoration: none; }
.guest-user .audio-call-button,
.guest-user .accept-call-button,
.guest-user .submit-button { background: #2563eb; color: #fff; }
.guest-user .call-btn-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Video button disabled when no video-capable agent is online. */
.guest-user .video-call-button[disabled] { opacity: 0.45; cursor: not-allowed; }
.guest-video-hint { display: none; color: #94a3b8; font-size: 12px; margin: 8px 0 0; text-align: center; }
.guest-user.no-video .guest-video-hint { display: block; }

.guest-foot { color: #94a3b8; font-size: 12px; text-align: center; margin-top: 18px; }

/* Send-a-message form -> clean inputs (override index.css max-width + grey). */
.guest-user .send-message-form { max-width: none; }
.guest-user .send-message-form input {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; font-size: 15px; width: 100%;
}
.guest-user .send-message-form-buttons { display: flex; gap: 10px; margin-top: 4px; }

/* Device pickers (mic/camera) — two compact dropdowns under the call buttons. */
.guest-user .device-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 2px;
  text-align: left;
}
.guest-user .device-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.guest-user .device-pick select {
  font: inherit;
  font-weight: 400;
  color: #0f172a;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  max-width: 100%;
}
@media (max-width: 480px) {
  .guest-user .device-pickers { grid-template-columns: 1fr; }
}

/* Active call: break out of the card to a full-screen overlay. */
.guest-user .call-active {
  position: fixed; inset: 0; z-index: 1100; margin: 0;
  background: #0f172a; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px;
}
.guest-user .call-active .end-call-button {
  background: #dc2626; color: #fff; border-radius: 999px; padding: 12px 28px; font-weight: 600;
}

@media (max-width: 480px) {
  body.guest { padding: 0; }
  .guest-user { border-radius: 0; min-height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; }
}


/* ─── Chat dock: guest-only presentation ─────────────────────────────────
   index.css is shared with the agent console, so anything that moves or
   resizes the dock has to live here or it moves the console's Chats card too.
   That is not hypothetical — it happened. */

.im {
  /* CENTRED, not cornered. The chat is what the visitor came for, so it sits
     where their attention already is. left+translate rather than margins keeps
     it correct at any viewport width. */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Expanded: desktop only, on purpose. A phone is already effectively full
   width, so "expand" there would be a control that does nothing — worse than
   not offering it. The breakpoint is what makes the button meaningful. */
@media (min-width: 48rem) {
  .im.im-expanded {
    width: 46rem;
    max-width: calc(100vw - 4rem);
  }
  .im.im-expanded .im-messages {
    max-height: 60vh;
    min-height: 24rem;
  }
  .im-expand {
    display: inline-flex;
  }
}

/* Hidden below the breakpoint rather than merely inert. */
.im-expand {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}


/* ─── Desktop: controls at the top, chat grows into the space ─────────────
   The dock is a fixed, vertically-centred panel. On a tall desktop window it
   sat over the middle of the card and covered the very controls the visitor
   had just used — Chat/Audio/Video and the device pickers disappeared behind
   it the moment a chat opened.

   Floating over the page is right on a phone, where the chat IS the screen. On
   a desktop there is room for both, so the chat stops overlaying and becomes
   the last block of the card: controls above it, conversation below, and every
   remaining pixel of window height available to the transcript. */
@media (min-width: 48rem) {
  body.guest {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .guest-user > .im {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: 100%;
    margin-top: 18px;
    box-shadow: none;
    border-bottom: 1px solid var(--grey);
  }
  /* Anchored to the bottom once a conversation is open: the card takes the
     window height, the controls stay at the top, and `margin-top: auto` puts
     the whole distance between them. The composer then sits where the eye
     already expects a chat composer to be, and the transcript grows upward
     into the space instead of the card ending in the middle of the screen.
     Only when a chat exists — otherwise this would be a tall, empty card. */
  body.guest-chat-open {
    align-items: stretch;
  }
  body.guest-chat-open .guest-user {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  body.guest-chat-open .guest-user > .im {
    margin-top: auto;
  }
  /* Grows with the window instead of sitting at a fixed 18rem. The floor
     matters as much as the ceiling: a short window must not collapse the
     transcript to a couple of lines. */
  .guest-user > .im .im-thread {
    height: clamp(18rem, calc(100vh - 30rem), 40rem);
  }
  /* The thread keeps its clamped height rather than flex-growing. Growing and
     bottom-anchoring are mutually exclusive: `margin-top: auto` consumes the
     free space, so there is none left to grow into. Asking for both gave a
     SHORTER chat than asking for neither - 271px, then 141px once the dock
     itself became a flex column and its children started shrinking too.
     Anchoring is what Ron asked for, so the height comes from the clamp and
     the dock is left as an ordinary block. */
  body.guest-chat-open .guest-user > .im .im-thread {
    flex-shrink: 0;
  }
  .guest-user > .im .im-messages {
    max-height: none;
  }
  /* Expanded widens the CARD, since the chat is now part of it. */
  .guest-user.guest-expanded {
    width: 46rem;
    max-width: calc(100vw - 4rem);
  }
  .guest-user.guest-expanded > .im,
  .guest-user > .im.im-expanded {
    width: auto;
    max-width: 100%;
  }
  .guest-user > .im.im-expanded .im-messages {
    max-height: none;
    min-height: 20rem;
  }
}