/* «Диалог»: sellers who sell right in a Telegram or MAX channel — booking button → shop bot → seller notice and cabinet.
 * The screens are drawn from the bot's real messages (api/app/Services/Bookings/BookingBot.php, NotifyChannelReservationJob). */
.kc-route{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 6px}
.kc-route>div{padding:14px 12px;border-radius:18px;background:var(--blue-t);text-align:center}
.kc-route b,.kc-route small{display:block}
.kc-route small{font-size:12.5px;margin-top:6px;line-height:1.45;color:var(--ink-2)}
.kc-route>span{color:var(--blue);font-size:23px}
.kc-note{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:12px}

/* step captions and screen grid */
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:14px 0 4px;align-items:start}
.screen{display:flex;flex-direction:column;gap:10px;min-width:0}
.screen-cap{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--ink)}
.screen-cap i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-style:normal;font-family:var(--head);font-weight:900;font-size:13px}
.screen-cap small{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}

/* messenger screen */
.phone{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#DCE6F2;box-shadow:var(--lift);font-size:14px;line-height:1.42}
.ph-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.ph-ava{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--head);font-weight:900;font-size:13px;background:linear-gradient(135deg,#1E9A52,#2FBF6A)}
.ph-ava.bot{background:linear-gradient(135deg,var(--blue),#7A5CFF)}
.ph-who{min-width:0}
.ph-who b{display:block;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-who small{display:block;font-size:12px;color:var(--ink-3)}
.ph-tag{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--sky-t);color:var(--sky-d)}
.ph-tag.max{background:var(--violet-t);color:#5B3FE0}
.ph-body{display:flex;flex-direction:column;gap:6px;padding:12px 10px 14px}
.pm{align-self:flex-start;max-width:92%;background:#fff;border-radius:16px 16px 16px 5px;padding:8px 11px 6px;color:#1B2440;box-shadow:0 1px 1px rgba(22,36,92,.08);white-space:pre-line;overflow-wrap:anywhere}
.pm.out{align-self:flex-end;background:#E3F4D6;border-radius:16px 16px 5px 16px}
.pm.photo{padding:0;overflow:hidden;white-space:normal}
.pm.photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pm.photo .pm-text{padding:8px 11px 6px;white-space:pre-line}
.pm time{display:block;text-align:right;font-size:11px;color:#8A93AE;margin-top:2px}
.pm a,.pm u{color:#1E6FD0;text-decoration:underline;text-underline-offset:2px}
.pm .q{color:#5B6584}
.pm-kb{align-self:stretch;display:grid;gap:4px;max-width:92%}
.pm-kb .row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.pm-kb span{display:block;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.62);color:#1B4F9C;font-weight:600;font-size:13px;line-height:1.25;text-align:center;backdrop-filter:blur(2px)}
.pm-kb span.tap{background:#fff;box-shadow:0 0 0 2px var(--orange)}
.pm-sys{align-self:center;font-size:12px;color:#55607E;background:rgba(255,255,255,.55);padding:3px 10px;border-radius:999px}

/* cabinet screen (Point → Заказы → Брони из каналов) */
.cab{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--lift);font-size:14px;line-height:1.45}
.cab-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--mist);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.cab-top b{color:var(--ink)}
.cab-top .dots{display:flex;gap:5px}
.cab-top .dots i{width:9px;height:9px;border-radius:50%;background:#D5DCEB}
.cab-body{padding:14px 16px 16px;display:grid;gap:10px}
.cab-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.cab-h strong{font-size:15.5px}
.cab-badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--orange-t);color:var(--orange-d)}
.cab-hint{font-size:12.5px;color:var(--ink-3)}
.cab-row{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:6px}
.cab-row a{color:var(--blue);font-weight:700;text-decoration:none}
.cab-item{display:flex;justify-content:space-between;gap:8px;align-items:center}
.cab-item em{font-style:normal;font-size:12.5px;font-weight:700;color:#D33A4C}
.cab-ans{display:grid;grid-template-columns:1fr;gap:1px;padding:9px 11px;border-radius:10px;background:#F5F7FB;font-size:13px}
.cab-ans dt{color:#667085}
.cab-ans dd{margin:0 0 5px;font-weight:600;color:#1F2937;overflow-wrap:anywhere}
.cab-ans dd:last-child{margin-bottom:0}
.cab-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cab-btns span{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:9px;border:1px solid rgba(47,91,255,.35);color:var(--blue)}
.cab-btns span.main{background:var(--blue);border-color:var(--blue);color:#fff}
.cab-btns span.neg{border-color:transparent;color:#D33A4C}

/* question editor preview */
.qed{display:grid;gap:8px;margin-top:12px}
.qed>div{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.qed b{display:block;font-size:14.5px}
.qed small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.qed .opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.qed .opts span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--violet-t);font-weight:600}

@media (max-width:620px){
  .kc-route{grid-template-columns:1fr;gap:6px}.kc-route>span{transform:rotate(90deg);text-align:center}.kc-route>div{padding:11px}
  .screens{grid-template-columns:1fr}
}