/* An appointment concierge, using the site's existing visual language. */
.chat-backdrop { position: fixed; inset: 0; z-index: 44; background: #0B070859; backdrop-filter: blur(4px); }
.chat-backdrop[hidden] { display: none; }
.chat-widget { inset: auto 24px 24px auto; width: min(430px,calc(100vw - 40px)); max-width: none; height: min(760px,calc(100dvh - 48px)); max-height: none; grid-template-rows: auto auto minmax(0,1fr) auto; border: 1px solid #F7F1E830; border-radius: 24px; box-shadow: 0 32px 100px #0008; background: var(--cream); color: var(--ink); }
.chat-header { padding: 24px 22px 22px; background: linear-gradient(125deg,var(--wine-deep),#150F10); gap: 10px; }
.chat-identity { display: flex; gap: 13px; align-items: center; min-width: 0; }
.chat-avatar { flex: 0 0 49px; height: 49px; border-radius: 50%; background: #F7F1E80C; border: 1px solid #F7F1E82B; display: grid; place-items: center; }
.chat-avatar img { width: 37px; height: 37px; object-fit: contain; }
.chat-header .chat-identity span { font-size: 8px; letter-spacing: .15em; font-weight: 500; color: #F7F1E8AE; }
.chat-header .chat-identity strong { display: block; font-size: 25px; margin: 4px 0 5px; letter-spacing: -.035em; line-height: 1; }
.chat-header .chat-identity small { font-size: 10px; color: #F7F1E8B3; }
.chat-header-actions { align-self: flex-start; }
.chat-header-actions [data-close-chat] { width: 36px; height: 36px; border: 1px solid #F7F1E826; background: #F7F1E80B; padding: 0; font-size: 23px; font-weight: 300; }
.chat-header-actions [data-close-chat]:hover { background: #F7F1E826; }
.chat-header-actions [data-open-agenda][hidden] { display: none; }
.chat-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; list-style: none; margin: 0; padding: 17px 22px; border-bottom: 1px solid #7E273915; background: #FFFFFF70; }
.chat-steps li { color: #0B07086B; font-size: 9px; line-height: 1.5; padding-bottom: 8px; border-bottom: 2px solid #7E273918; }
.chat-steps li > span { display: block; font-size: 9px; font-weight: 600; letter-spacing: .08em; margin-bottom: 2px; }
.chat-steps li[aria-current], .chat-steps li.is-complete { border-color: var(--wine); color: var(--wine-deep); }
.chat-steps li[aria-current] { font-weight: 700; }
.chat-body { padding: 24px 22px; gap: 12px; min-height: 0; background: var(--cream); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #7E27394D transparent; scroll-behavior: smooth; }
.chat-body > * { flex-shrink: 0; }
.chat-widget .message { max-width: 91%; font-size: 13px; line-height: 1.65; padding: 15px 17px; border: 0; }
.chat-widget .message.bot { border-radius: 4px 17px 17px 17px; background: #FFFFFF; color: #150F10; box-shadow: 0 2px 10px #7E273905; }
.chat-widget .message.user { border-radius: 17px 4px 17px 17px; background: var(--wine-deep); color: var(--cream); font-size: 12px; }
.chat-widget .quick-replies { display: grid; gap: 9px; margin: 3px 0 0; max-height: none; overflow: visible !important; }
.chat-widget .chat-service-card { display: grid; grid-template-columns: 49px minmax(0,1fr) 20px; align-items: center; gap: 13px; min-height: 76px; padding: 12px 15px; border-radius: 14px; border: 1px solid #7E27391C; background: white; box-shadow: 0 3px 12px #7E273903; transition: border-color .2s, background .2s; }
.chat-service-card img { width: 49px; height: 49px; object-fit: contain; mix-blend-mode: multiply; }
.chat-service-card strong, .chat-service-card small { display: block; }
.chat-service-card strong { font-size: 12px; font-weight: 600; line-height: 1.45; }
.chat-service-card small { font-size: 11px; color: var(--wine-deep); font-weight: 500; margin-top: 4px; }
.chat-service-arrow { font-size: 18px; color: var(--wine); }
.chat-widget .quick-replies button { border-radius: 14px !important; }
.chat-widget .chat-service-card:hover, .chat-widget .chat-service-card:focus-visible { border-color: var(--wine); background: #C23F5C08; }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 10px; padding: 16px 20px 14px; background: white; border-top: 1px solid #7E273912; align-items: center; }
.chat-input-wrap { display: block; padding: 8px 13px; min-width: 0; border: 1px solid #7E27392B; border-radius: 13px; background: #F7F1E84D; }
.chat-input-wrap > span { display: block; font-size: 9px; color: var(--wine-deep); margin-bottom: 3px; }
.chat-form .chat-input-wrap input { padding: 0; min-height: 24px; height: 24px; line-height: 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 14px; width: 100%; color: var(--ink); }
.chat-input-wrap:focus-within { border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-tint); }
.chat-form input::placeholder { color: #0B07086B; }
.chat-form button { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; padding: 0; background: var(--wine-deep); }
.chat-form button:hover { background: var(--wine); }
.chat-form button:disabled { opacity: .35; cursor: default; }
.chat-form input:disabled { opacity: 1; -webkit-text-fill-color: #0B07086B; }
.chat-form-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 9px; color: #0B07087A; line-height: 1.4; }
.chat-widget .calendar-panel { padding: 17px !important; border: 1px solid #7E273919; border-radius: 17px; gap: 16px; }
.chat-widget .calendar-head strong { font-size: 22px; font-weight: 500; }
.chat-widget .calendar-head span { font-size: 11px; line-height: 1.6; font-weight: 400; }
.chat-widget .calendar-month-title { border: 0; border-radius: 9px; padding: 10px; background: #7E27390D; font-size: 12px; }
.chat-widget .calendar-standard .calendar-grid { gap: 5px; }
.chat-widget .calendar-standard .calendar-day { min-height: 48px; border-radius: 9px; border-color: #7E273924; }
.chat-widget .calendar-standard .calendar-day strong { font-size: 12px; font-weight: 500; }
.chat-widget .calendar-standard .calendar-day small { font-size: 7px; }
.chat-widget .calendar-standard .calendar-day:disabled { opacity: .4; }
.chat-widget .calendar-day:hover:not(:disabled) { background: var(--wine-deep); }
.chat-widget .calendar-day:hover:not(:disabled) strong, .chat-widget .calendar-day:hover:not(:disabled) small { color: white; }
.chat-widget .calendar-legend { flex-wrap: wrap; gap: 9px; font-size: 9px; }
.chat-widget .calendar-legend small { font-size: 9px; }
.chat-widget .slot-picker { gap: 9px; padding: 5px 0; }
.chat-widget .slot-picker button { min-height: 44px; border-radius: 10px !important; text-align: center !important; font-size: 12px; border-color: #7E27392B; }
.chat-widget .slot-picker button:hover { border-color: var(--wine); background: var(--wine-deep); color: white; }
.chat-widget .booking-summary { border-radius: 18px; border-color: #7E27391C; padding: 22px; gap: 17px; }
.chat-widget .booking-summary > strong { font-size: 26px; line-height: 1.2; }
.chat-widget .booking-summary > span { font-size: 8px; padding: 7px 10px; }
.chat-widget .booking-summary dl div { border: 0; border-radius: 9px; padding: 12px; }
.chat-widget .booking-summary dt { font-size: 9px; margin-bottom: 4px; }
.chat-widget .booking-summary dd { font-size: 12px; font-weight: 500; }
.chat-widget .booking-summary p { font-size: 11px; }
.chat-widget .booking-confirm-actions button { border-radius: 11px; font-size: 10px; }
@media(min-width:361px) { .chat-widget .booking-summary dl { grid-template-columns: repeat(2,minmax(0,1fr)); } .chat-widget .booking-summary dd { overflow-wrap: anywhere; } }
.chat-open .chat-fab { visibility: hidden; }
@media(max-width:900px) {
  body.chat-open { overflow: hidden; position: static !important; inset: auto !important; }
  .chat-widget { inset: auto !important; top: calc(var(--chat-view-top,0px) + 8px) !important; right: 8px !important; bottom: auto !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(var(--chat-view-height,100dvh) - 16px) !important; max-height: none !important; border-radius: 22px; }
  .chat-header { padding: 20px 18px; }
  .chat-body { padding: 20px 18px !important; }
  .chat-steps { padding-inline: 18px; }
  .chat-form { padding: 13px 16px max(12px,env(safe-area-inset-bottom)); }
  .chat-form .chat-input-wrap input { font-size: 16px; }
}
@media(max-width:360px), (max-height:500px) {
  .chat-header { padding: 13px 15px; }
  .chat-avatar { flex-basis: 39px; height: 39px; }
  .chat-avatar img { width: 30px; height: 30px; }
  .chat-header .chat-identity strong { font-size: 22px; }
  .chat-header .chat-identity span { font-size: 7px; }
  .chat-header .chat-identity small { font-size: 9px; }
  .chat-steps { padding: 11px 15px; gap: 8px; }
  .chat-body { padding: 16px 15px !important; }
  .chat-widget .message { font-size: 12px; padding: 12px 14px; }
  .chat-widget .chat-service-card { min-height: 64px; padding: 10px; grid-template-columns: 38px minmax(0,1fr) 16px; gap: 9px; }
  .chat-service-card img { width: 38px; height: 38px; }
  .chat-widget .calendar-panel { padding: 12px !important; }
}
