/* Components added with the platform features: booking flow, account, support chat, back office, settings. */

/* property gallery */
.stay-hero-wrap { position: relative; margin-bottom: 4px; }
.stay-hero-wrap > .art-chips { top: 12px; inset-inline: 12px; pointer-events: none; }
.gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 22px; }
.gallery::-webkit-scrollbar { display: none; }
.shot { position: relative; flex: 0 0 88%; height: 196px; border-radius: 22px; overflow: hidden; scroll-snap-align: center; background: var(--bg-3); }
.shot:only-child { flex-basis: 100%; }
.shot .art, .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; gap: 8px; }
.fact { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: .92rem; }
.fact .ico { color: var(--accent); }
.fact span { flex: 1; min-width: 0; }
.fact b { color: var(--accent); font-size: .84rem; }

/* notices */
.note-box { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: .93rem; margin-top: 10px; }
.note-box > .ico { margin-top: 1px; color: var(--muted); }
.note-box span { flex: 1; min-width: 0; }
.note-box.ok { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.note-box.ok > .ico { color: var(--accent); }
.note-box.warn { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.note-box.warn > .ico { color: var(--gold); }
.note-box.bad { border-color: color-mix(in srgb, var(--coral) 45%, transparent); background: color-mix(in srgb, var(--coral) 10%, transparent); }
.note-box.bad > .ico { color: var(--coral); }

/* booking wizard */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 14px; }
.steps span { text-align: center; font-size: .72rem; font-weight: 600; color: var(--faint); padding-top: 9px; border-top: 3px solid var(--card-2); }
.steps span.on { color: var(--accent); border-top-color: var(--accent); }
.check { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--line-2); background: var(--card); flex: none; display: grid; place-items: center; margin: 0; transition: background .15s, border-color .15s; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 6px; height: 12px; border-right: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink); transform: rotate(45deg) translate(-1px, -1px); }
.kvs .kv b { text-align: end; min-width: 0; overflow-wrap: anywhere; }

/* account */
.meter { height: 6px; border-radius: 6px; background: var(--card-2); margin-top: 12px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
a.kpi { color: inherit; }
.dot-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: #2a1a00; font-size: .74rem; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.chip .dot-n { min-width: 18px; height: 18px; font-size: .68rem; margin-inline-start: 2px; }

/* switches */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.switch-row:last-child { border-bottom: 0; }
.switch-row > div { min-width: 0; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-2); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.switch input:checked + i::after { background: var(--accent-ink); transform: translateX(20px); }
[dir="rtl"] .switch input:checked + i::after { transform: translateX(-20px); }
.switch input:disabled + i { opacity: .4; }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* support chat */
.support-scroll { gap: 10px; }
.sup-msg { max-width: 86%; display: grid; gap: 3px; align-self: flex-end; animation: rise .25s both; }
.sup-msg small { font-size: .7rem; color: var(--accent); font-weight: 600; }
.sup-msg.from-staff small { color: var(--gold); }
.sup-msg.from-agent small { color: var(--muted); }
.sup-text { padding: 11px 15px; border-radius: 20px 6px 20px 20px; background: var(--card); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
[dir="rtl"] .sup-text { border-radius: 6px 20px 20px 20px; }
.sup-msg.from-staff .sup-text { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.sup-msg time { font-size: .66rem; color: var(--faint); }
.sup-msg.mine { align-self: flex-start; justify-items: start; }
.sup-msg.mine .sup-text { background: var(--btn); color: var(--btn-ink); border-color: transparent; border-radius: 20px 20px 20px 6px; font-weight: 500; }
[dir="rtl"] .sup-msg.mine .sup-text { border-radius: 20px 20px 6px 20px; }
.sup-msg.pending { opacity: .6; }
.sys-msg { align-self: center; text-align: center; font-size: .78rem; color: var(--muted); padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px dashed var(--line-2); }
.composer .mic.busy { color: var(--accent); animation: spin 1s linear infinite; }

/* parallel chats: open conversations as tabs under the top bar */
.chat-tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 6px -16px 4px; padding: 2px 16px 6px; position: sticky; top: 0; z-index: 12; background: linear-gradient(180deg, var(--bg-2) 60%, transparent); }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab { display: inline-flex; align-items: center; flex: none; max-width: 200px; min-height: 38px; border-radius: 13px 13px 13px 5px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: .86rem; overflow: hidden; }
[dir="rtl"] .chat-tab { border-radius: 13px 13px 5px 13px; }
.chat-tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.chat-tab .tab-open { min-height: 38px; padding-inline: 13px 6px; min-width: 0; color: inherit; font-weight: inherit; }
.chat-tab .tab-open span { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tab .tab-x { width: 34px; height: 38px; display: grid; place-items: center; color: var(--faint); flex: none; }
.chat-tab .tab-x:active { color: var(--coral); }
button.chat-tab.new { gap: 5px; padding-inline: 11px 13px; border-style: dashed; border-color: var(--line-2); color: var(--accent); }
button.chat-tab.new.on { border-style: solid; }
.tab-count { flex: none; font-size: .72rem; color: var(--faint); padding-inline-start: 2px; font-family: var(--mono); }

/* open chats on the hello page: one tidy row per deal */
.chat-row { display: flex; align-items: center; gap: 4px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); padding-inline-end: 4px; }
.chat-row-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: start; color: inherit; }
.chat-row-open .dot { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.chat-row-open b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-open small { color: var(--muted); font-size: .78rem; }
.chat-row-open > .ico { color: var(--faint); }

/* ── Layout safety: content can never widen the page ──
   A grid or flex item refuses to shrink below its longest unbreakable content unless told otherwise, so one long
   chat title, client name or pasted link used to push the whole screen sideways. Every track may now shrink to
   zero, long words wrap, and the page itself clips anything that still tries to escape. */
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-wrap: break-word; }
#app, .sheet-body { overflow-x: clip; }
.list, .stack, .hero, .pulse, .suggest, .offers, .sk-list, .gate-form, .search-pass, .confirm, .field, .day, .opt, .dial, .facts,
.funnel, .timeline, .bignum, .kpi, .sup-msg, .empty, .edit-item, .gate-hero { grid-template-columns: minmax(0, 1fr); }
.kpis, .opt-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2, .dest-tiles, .actions, .dial-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.q-row { grid-template-columns: 74px minmax(0, 1fr); }
.ticket-body, .offer { grid-template-columns: minmax(0, 1fr) auto; }
.stop-item { grid-template-columns: 64px minmax(0, 1fr); }
.funnel .f { grid-template-columns: 78px minmax(0, 1fr) 30px; }
.seg, .flight, .steps, .bars { grid-auto-columns: minmax(0, 1fr); }
.kv > *, .row > *, .mini > *, .c-row > *, .pulse-item > *, .note-box > *, .switch-row > *, .opt-head > *, .day-head > *, .page-head > *, .fact > * { min-width: 0; }
.btn, .chip, .status, .icon-btn, .avatar, .demo-tag, .pill-profit, .dot-n, .switch, .tick, .day-n, .opt-thumb, .mini > .dot, .pulse-item > .dot, .ico { flex-shrink: 0; }
.kpi b, .kpi span { overflow: hidden; text-overflow: ellipsis; }
.msg-text, .sup-text, .tl p, .card p { overflow-wrap: anywhere; }

/* narrow phones: the top bar of the assistant must always fit */
.chat-top .brand { min-width: 0; overflow: hidden; }
.chat-top .brand img { min-width: 0; flex-shrink: 1; }
@media (max-width: 380px) {
  .chat-top { gap: 6px; }
  .chat-top .demo-tag { display: none; }
  .chat-top .icon-btn, .chat-top .avatar { width: 40px; height: 40px; border-radius: 13px; }
}

/* nested single-column grids inside rows and cards */
.q-row .body, .c-row .who, .stay-main, .ticket-stub, .titles, .dial-nums > div, .opt-money > div, .kvs { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.q-row h3, .c-row .who b { min-width: 0; }

/* branding editor */
.brand-preview { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.brand-preview img { width: 60px; height: 60px; border-radius: 16px; object-fit: contain; background: #fff; flex: none; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }