/* Book your delivery, as a conversation (site/_chat.html, static/js/book_chat.js): big, plain, like texting. */
.hq-form { display: grid; gap: 1rem; }
.ch { display: grid; gap: .75rem; }
.ch[hidden], .hq-form[hidden] { display: none; }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ch-who { display: flex; align-items: center; gap: .6rem; line-height: 1.15; }
.ch-who small { display: block; opacity: .7; font-size: .85rem; }
.ch-avatar { width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--color-base-200); padding: .3rem; }
.ch-loud.is-on { background: var(--color-primary); color: var(--color-primary-content); }
.ch-log { list-style: none; margin: 0; padding: .25rem; display: flex; flex-direction: column; gap: .55rem;
          min-height: 12rem; max-height: min(30rem, 58vh); overflow-y: auto; overscroll-behavior: contain; }
.ch-msg { max-width: 88%; padding: .7rem .95rem; border-radius: 1.15rem; font-size: 1.15rem; line-height: 1.4;
          overflow-wrap: anywhere; }
.ch-msg.is-us { align-self: flex-start; background: var(--color-base-200); border-bottom-left-radius: .35rem; }
.ch-msg.is-them { align-self: flex-end; background: var(--color-primary); color: var(--color-primary-content);
                  border-bottom-right-radius: .35rem; }
.ch-msg.has-price { display: grid; gap: .15rem; border: 2px solid var(--color-primary);
                    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100)); }
.ch-price-say { font-weight: 700; }
.ch-price { font-size: 2.6rem; font-weight: 900; line-height: 1.05; }
.ch-msg.is-booked { border: 2px solid var(--color-success);
                    background: color-mix(in srgb, var(--color-success) 12%, var(--color-base-100)); }
.ch-said { margin-left: .35rem; opacity: .8; }
.ch-dots { display: inline-flex; gap: .3rem; padding: .2rem 0; }
.ch-dots i { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; opacity: .35;
             animation: ch-blink 1.2s infinite; }
.ch-dots i:nth-child(2) { animation-delay: .2s; } .ch-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ch-blink { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ch-dots i { animation: none; } }
.ch-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-chips:empty { display: none; }
.ch-chip { display: inline-flex; align-items: center; min-height: 3rem; padding: .55rem 1.05rem; border-radius: 999px;
           border: 2px solid var(--color-primary); color: var(--color-primary); background: var(--color-base-100);
           font-size: 1.1rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: left; }
.ch-chip:hover, .ch-chip:focus-visible { background: var(--color-primary); color: var(--color-primary-content); }
/* The words get the whole width; Talk and Send sit under them, side by side. */
.ch-say { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ch-text { grid-column: 1 / -1; order: -1; width: 100%; min-height: 3.5rem; max-height: 9rem; resize: none;
           font-size: 1.15rem; line-height: 1.35; }
.ch-mic { justify-content: center; min-height: 3rem; }
.ch-mic[hidden] + .ch-text + .ch-send { grid-column: 1 / -1; }
.ch-mic { display: inline-flex; align-items: center; gap: .35rem; padding: 0 1rem; border-radius: var(--radius-field);
          background: var(--color-success); color: var(--color-success-content); font-weight: 800; font-size: 1.05rem;
          border: 0; cursor: pointer; }
.ch-mic[hidden] { display: none; }
.ch-mic i { font-size: 1.5rem; }
.ch-mic.is-live { background: var(--color-error); color: var(--color-error-content); animation: ch-pulse 1.2s infinite; }
.ch-mic.is-busy { opacity: .7; }
@keyframes ch-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-error) 60%, transparent); }
                      50% { box-shadow: 0 0 0 .5rem transparent; } }
.ch-alt { font-size: .95rem; text-align: right; }
.ch-alt[hidden] { display: none; }


/* Once they start, the conversation takes the whole screen (and the page behind it stops scrolling). */
.ch-tools { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.ch-full-only { display: none; }
.ch.is-full { position: fixed; inset: 0; z-index: 60; background: var(--color-base-100); margin: 0;
              padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right))
                       max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
              height: 100dvh; display: flex; flex-direction: column; gap: .6rem; }
.ch.is-full .ch-full-only { display: inline-flex; }
.ch.is-full .ch-head { border-bottom: 2px solid var(--color-base-300); padding-bottom: .5rem; }
.ch.is-full .ch-log { flex: 1; max-height: none; min-height: 0; width: 100%; max-width: 48rem; margin: 0 auto; }
.ch.is-full .ch-chips, .ch.is-full .ch-say { width: 100%; max-width: 48rem; margin: 0 auto; }
.ch.is-full .ch-alt { display: none; }
html.ch-open, html.ch-open body { overflow: hidden; }