/* Isolated from the decorative .phone-frame used by service illustrations. */
.phone-consult {
  background: var(--paper);
  padding-top: 12px;
  padding-bottom: 85px;
}
.phone-consult .consult-heading { margin: 0 auto 28px; }
.phone-consult .consult-heading .eyebrow { display: none; }
.phone-consult .consult-heading h2 { font-size: clamp(22px, 2.6vw, 34px); margin: 0 0 12px; }
.phone-consult .consult-layout { display: block; width: 100%; max-width: 440px; margin: 0 auto; min-width: 0; }
.yb-chat-device.consult-chat {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  height: 580px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 43px 16px 25px;
  border: 7px solid #25272b;
  border-radius: 37px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 2px #babbbd, 0 18px 40px #20231e17;
}
.yb-chat-device::after {
  content: ''; position: absolute; bottom: 9px; left: 36%; width: 28%; height: 4px;
  background: #25272b; border-radius: 8px; pointer-events: none;
}
.yb-chat-status {
  position: absolute; left: 22px; right: 22px; top: 10px; height: 20px;
  display: flex; align-items: center; justify-content: space-between;
  font: 700 10px var(--sans); color: #25272b; pointer-events: none;
}
.yb-chat-island { position: absolute; left: 50%; transform: translateX(-50%); width: 80px; height: 20px; border-radius: 20px; background: #25272b; }
.yb-chat-island::after { content: ''; position: absolute; right: 8px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #3d4358; }
.yb-chat-device .chat-heading { flex: 0 0 auto; display: flex; gap: 9px; padding-bottom: 9px; min-width: 0; }
.yb-chat-device .chat-heading > div { flex: 1; min-width: 0; }
.yb-chat-device .chat-heading b { font-size: 14px; white-space: nowrap; }
.yb-chat-device .chat-heading small { font-size: 9px; line-height: 1.5; margin-top: 2px; }
.yb-chat-device .operator-avatar { width: 46px; height: 46px; flex: 0 0 46px; }
.yb-chat-device .guide-badge { font-size: 9px; white-space: nowrap; margin-left: auto; padding: 4px 8px; flex-shrink: 0; }
.yb-chat-device .chat-history {
  flex: 1 1 0; height: auto; min-height: 0; max-height: none; width: 100%;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 3px 0; gap: 9px; scrollbar-width: thin;
}
.yb-chat-device .guide-message, .yb-chat-device .user-message { flex-shrink: 0; font-size: 13px; line-height: 1.8; padding: 10px 12px; max-width: 94%; }
.yb-chat-device .consult-choices {
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; flex: 0 0 auto;
  width: 100%; min-width: 0; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.yb-chat-device .consult-choices button { flex: 0 0 auto; white-space: nowrap; font-size: 11px; line-height: 1.3; min-height: 36px; padding: 7px 11px; }
.yb-chat-device #consult-form { flex: 0 0 auto; width: 100%; min-width: 0; padding: 4px; gap: 4px; border-radius: 12px; }
.yb-chat-device #consult-input { width: 0; min-width: 0; flex: 1 1 0; font-size: 16px; padding: 6px 8px; }
.yb-chat-device #consult-input::placeholder { font-size: 12px; }
.yb-chat-device #consult-form button { flex: 0 0 36px; width: 36px; height: 36px; font-size: 24px; }
.yb-chat-footer { padding: 0 5px; }
.yb-chat-footer .guide-note { font-size: 11px; line-height: 1.8; margin: 17px 0 8px; color: var(--muted); }
.yb-chat-footer .guide-next { font-size: 11px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 15px; }
.yb-chat-footer .guide-next button, .yb-chat-footer .guide-next a { min-height: 44px; }
@media (max-width: 760px) {
  .phone-consult { padding: 0 5% 60px; }
  .phone-consult .consult-heading h2 { font-size: 22px; }
  .yb-chat-device.consult-chat {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 34px 12px 21px;
    border-width: 6px;
    border-radius: 30px;
    gap: 6px;
  }
  .yb-chat-status { top: 8px; height: 17px; font-size: 9px; }
  .yb-chat-island { width: 65px; height: 17px; }
  .yb-chat-island::after { top: 5px; width: 6px; height: 6px; }
  .yb-chat-device .chat-heading { gap: 7px; padding-bottom: 7px; }
  .yb-chat-device .operator-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .yb-chat-device .chat-heading b { font-size: 12px; }
  .yb-chat-device .chat-heading small { font-size: 8px; }
  .yb-chat-device .guide-badge { font-size: 8px; padding: 4px 6px; }
  .yb-chat-device .guide-message, .yb-chat-device .user-message { font-size: 12px; padding: 9px 10px; }
}
@media (max-width: 359px) {
  .yb-chat-device .chat-heading small { display: none; }
  .yb-chat-device .guide-badge { display: none; }
}