/* Єва — розмовний запис. Дизайн «Cosmos 2027» */
.chat { display: grid; gap: 1.1rem; padding: .6rem 0 1.5rem; }
.stp { display: grid; gap: .5rem; }
.msg { display: flex; gap: .55rem; align-items: flex-end; max-width: 100%; animation: msg-in .45s var(--ease) both; }
.msg.me { justify-content: flex-end; }
.msg.cont { margin-top: -.15rem; }
.ev-gap { width: 34px; flex: none; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.ev-av { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.ev-av i { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--magenta), var(--cyan)); animation: spin 5s linear infinite; filter: blur(.3px); opacity: .9; }
.ev-av b { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; color: #fff; background: radial-gradient(circle at 30% 25%, #4b4fb3, #141836 70%); box-shadow: inset 0 0 0 2px rgba(5,6,16,.9); }
.ev-mini { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #060814; background: var(--grad); }

.bubble { position: relative; max-width: min(86%, 440px); padding: .65rem .95rem; border-radius: 18px; line-height: 1.45; overflow-wrap: anywhere;
  background: linear-gradient(var(--glass-hi), var(--glass-hi)) padding-box, linear-gradient(140deg, rgba(150,190,255,.5), rgba(155,123,255,.12) 45%, rgba(255,107,214,.3)) border-box;
  border: 1px solid transparent; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.msg.eva .bubble { border-bottom-left-radius: 6px; }
.msg.me .bubble { border-bottom-right-radius: 6px; color: #060814; font-weight: 600; background: var(--grad); border: 0; box-shadow: var(--shadow-glow); }
.bubble .edit { display: block; margin: .15rem 0 0 auto; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; color: rgba(6,8,20,.65); text-decoration: underline; text-underline-offset: 2px; }
.bubble .edit:hover { color: #060814; }
.bubble.typing { display: inline-flex; gap: 5px; align-items: center; padding: .85rem 1rem; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: dots 1s ease-in-out infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; background: var(--violet); }
.bubble.typing i:nth-child(3) { animation-delay: .3s; background: var(--magenta); }
@keyframes dots { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }

.widget { margin-left: 42px; animation: rise .55s var(--ease) both; }
.stp.final .widget { margin-left: 0; }

/* ---------- номер телефону ---------- */
.ph-card { padding: 1rem; display: grid; gap: .75rem; transition: box-shadow .4s var(--ease); }
.ph-card[data-state="ok"] { box-shadow: 0 0 0 1.5px var(--mint), 0 0 40px -8px rgba(75,227,176,.55); }
.ph-card[data-state="bad"] { box-shadow: 0 0 0 1.5px var(--coral), 0 0 34px -10px rgba(255,122,138,.5); }
.ph-card.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ph-label { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }
.ph-label svg { flex: none; margin-top: 1px; color: var(--cyan); }
.ph-field { position: relative; border-radius: 16px; padding: 2px; background: linear-gradient(120deg, rgba(90,215,255,.35), rgba(155,123,255,.35), rgba(255,107,214,.35)); background-size: 200% 100%; animation: sheen 6s linear infinite; }
.ph-card[data-state="ok"] .ph-field { background: linear-gradient(120deg, var(--mint), var(--cyan)); }
.ph-card[data-state="bad"] .ph-field { background: var(--coral); animation: none; }
@keyframes sheen { to { background-position: 200% 0; } }
.ph-ring { position: absolute; inset: -6px; border-radius: 20px; border: 1.5px solid var(--cyan); opacity: 0; pointer-events: none; }
.ph-field:focus-within .ph-ring { animation: pulse-ring 2.2s ease-out infinite; }
@keyframes pulse-ring { 0% { opacity: .7; transform: scale(.985); } 100% { opacity: 0; transform: scale(1.04); } }
.ph-input { width: 100%; min-height: 58px; padding: .5rem 1rem; border: 0; border-radius: 14px; background: #070a1a; color: var(--ink); font-size: 1.45rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ph-input.name { font-size: 1.25rem; letter-spacing: 0; }
.ph-input:focus { outline: none; }
.ph-input::placeholder { color: var(--ink-3); font-weight: 500; }
.ph-status { min-height: 26px; font-size: .8125rem; }
.ph-status .chip { animation: rise .35s var(--ease); }
.ph-go { justify-self: stretch; }
.ph-card[data-state="ok"] .ph-go:not([disabled]), .ph-card .ph-go:not([disabled]) { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 14px 44px -6px rgba(130,110,255,.9); } }

/* ---------- послуги: компактні плитки ---------- */
.svc-box { display: grid; gap: .6rem; }
.svc-box .tabs { margin: 0 -2px; padding-inline: 2px; }
.sv-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.sv { position: relative; flex: 1 1 auto; min-width: 31%; max-width: 100%; display: flex; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: rgba(14, 18, 40, .7); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.sv::before { /* бокова паличка */ content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 10px var(--violet); transform: scaleY(0); transition: transform .3s var(--ease); z-index: 2; }
.sv::after { /* плавне заповнення з лівого краю */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(90,215,255,.26), rgba(155,123,255,.22) 60%, rgba(255,107,214,.16)); transform: scaleX(0); transform-origin: left; transition: transform .1s linear; }
@media (hover: hover) {
  .sv:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .sv:hover::before { transform: scaleY(1); }
  .sv:hover::after { transform: scaleX(1); transition: transform .9s var(--ease) .12s; }
}
.sv.sel { border-color: transparent; box-shadow: 0 0 0 1.5px var(--violet), 0 10px 30px -14px rgba(130,100,255,.8); }
.sv.sel::before { transform: scaleY(1); }
.sv.sel::after { transform: scaleX(1); transition: transform .5s var(--ease); background: linear-gradient(90deg, rgba(90,215,255,.34), rgba(155,123,255,.3) 60%, rgba(255,107,214,.22)); }
.sv.blink { animation: blink .5s ease; }
@keyframes blink { 0% { filter: brightness(1); } 25% { filter: brightness(2.1); box-shadow: 0 0 22px var(--cyan); } 50% { filter: brightness(1.1); } 75% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
.sv-main { flex: 1; text-align: left; padding: .5rem 1.7rem .5rem .8rem; display: grid; gap: 1px; min-width: 0; }
.sv-name { font-weight: 600; font-size: .875rem; line-height: 1.2; }
.sv-meta { font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.sv-meta b { color: var(--ink); font-weight: 700; }
.sv-meta i { font-style: normal; }
.sv-i { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: italic 700 .75rem Georgia, serif; color: var(--ink-3); border: 1px solid var(--line); transition: .25s var(--ease); z-index: 3; }
.sv-i:hover, .sv-i:focus-visible, .sv:hover .sv-i { color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 8px var(--cyan); box-shadow: 0 0 10px rgba(90,215,255,.4); }
.eva-tip { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: 14px; font-size: .8125rem; background: var(--grad-soft); border: 1px solid var(--line); animation: rise .4s var(--ease); }
.eva-tip span:nth-child(2) { flex: 1; }
.info-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- майстри ---------- */
.masters { display: grid; gap: .5rem; }
.master { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem .7rem; }
.master-main { flex: 1; display: flex; align-items: center; gap: .75rem; text-align: left; min-width: 0; }
.master-main:hover .orb { transform: scale(1.06); }
.master .orb { --s: 44px; font-size: 1.1rem; transition: transform .3s var(--ease); }
.master-txt { display: grid; min-width: 0; }
.master-txt small { color: var(--cyan); font-weight: 600; font-size: .75rem; }
.rt { display: inline-flex; align-items: center; gap: .35rem; margin-top: 2px; }
.rt i { font-style: normal; font-size: .75rem; color: var(--ink-3); }

/* ---------- нижня панель ---------- */
.tray { position: sticky; bottom: 0; z-index: 20; padding: 8px 0 calc(8px + var(--safe-b)); margin-top: auto; }
.tray .dock-in { max-width: none; margin: 0; }
.date-tray { padding: .5rem .55rem .4rem; border-radius: 22px; animation: rise .5s var(--ease); }
.slots-mini-box { min-height: 74px; padding: .1rem .2rem .35rem; display: grid; gap: .4rem; }
.slots-hint { text-align: center; color: var(--ink-3); font-size: .8125rem; padding: 1.1rem 0; }
.slots-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; text-transform: capitalize; }
.slots-head .dim { text-transform: none; }
.slots-load { display: grid; place-items: center; padding: .7rem; }
.slots-mini { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow-y: auto; scrollbar-width: thin; padding: 1px; }
.slot-mini { padding: .3rem .62rem; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: .2s var(--ease); animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
.slot-mini:hover { border-color: var(--cyan); background: rgba(90,215,255,.14); transform: translateY(-1px); }
.slot-mini[aria-pressed="true"] { color: #060814; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-glow); }
.slots-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.linkish { font-size: .75rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.linkish:hover { color: var(--cyan); }
.queue-offer { display: grid; gap: .5rem; justify-items: start; font-size: .8125rem; color: var(--ink-2); padding: .1rem 0 .25rem; }
.queue-offer .btn { justify-self: stretch; }
.q-parts { display: flex; gap: 6px; flex-wrap: wrap; }
.q-done { display: grid; gap: .6rem; justify-items: center; text-align: center; padding: .5rem 0 0; }
.orb-big { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: #060814; background: radial-gradient(circle at 30% 25%, #fff, var(--mint) 35%, #1fa97f); box-shadow: 0 0 56px -4px var(--mint); animation: pop .7s var(--ease); }

/* ---------- чек ---------- */
.receipt { position: relative; padding: 1rem 1.05rem 1.05rem; display: grid; gap: .5rem; border-radius: 16px; color: #e9edff; overflow: hidden;
  background: linear-gradient(180deg, rgba(34, 40, 86, .92), rgba(16, 20, 48, .94)); border: 1px solid var(--line-strong);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 7px at 0 54%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 54%, #0000 98%, #000) right / 51% 100% no-repeat;
  box-shadow: 0 20px 50px -24px rgba(110, 90, 255, .7); }
.rc-head { display: flex; justify-content: space-between; align-items: center; font-size: .6875rem; letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; }
.rc-brand { color: var(--cyan); font-weight: 700; }
.rc-when { display: flex; align-items: baseline; gap: .7rem; }
.rc-when strong { font-size: 2.1rem; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.rc-when span { color: var(--ink-2); text-transform: capitalize; }
.rc-sep { height: 1px; background: var(--line); margin: .1rem 0; }
.rc-sep.dashed { background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.rc-lines { display: grid; gap: .25rem; }
.rc-line, .rc-kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.rc-kv span { color: var(--ink-3); } .rc-kv b { text-align: right; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .2rem; padding-top: .55rem; border-top: 1px dashed var(--line-strong); font-size: .875rem; color: var(--ink-2); }
.rc-total b { font-size: 1.45rem; color: #fff; }
.rc-comment { margin-top: .3rem; min-height: 56px; font-size: 14px; }
.rc-confirm { margin-top: .3rem; transition: .4s var(--ease); }
.rc-confirm:not([disabled]) { animation: glow 2.4s ease-in-out infinite; }
.rc-confirm.working { opacity: .8; }
.rc-confirm.done { color: #06231a; background: linear-gradient(120deg, var(--mint), var(--cyan)); box-shadow: 0 0 40px -4px var(--mint); opacity: 1; animation: pop-btn .7s var(--ease); }
@keyframes pop-btn { 0% { transform: scale(.94); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.rc-stamp { position: absolute; right: 12px; top: 54px; padding: .2rem .6rem; border: 2px solid var(--mint); border-radius: 8px; color: var(--mint); font-weight: 800; letter-spacing: .12em; font-size: .8125rem; transform: rotate(-9deg) scale(1.6); opacity: 0; pointer-events: none; text-shadow: 0 0 12px var(--mint); }
.receipt.confirmed .rc-stamp { animation: stamp .55s var(--ease) .15s forwards; }
@keyframes stamp { to { opacity: .95; transform: rotate(-9deg) scale(1); } }

.actions { display: grid; gap: .5rem; }

/* ---------- відгуки ---------- */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars .st { color: rgba(255,255,255,.2); display: inline-flex; } .stars .st.on { color: var(--amber); filter: drop-shadow(0 0 4px rgba(255,200,97,.55)); }
.stars svg { fill: currentColor; stroke: none; }
.rv-list { display: grid; gap: .55rem; max-height: 38vh; overflow-y: auto; }
.rv-sum { display: flex; align-items: center; gap: .6rem; } .rv-sum b { font-size: 1.6rem; }
.rv-item { padding: .6rem .75rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.rv-top { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; } .rv-top .dim { margin-left: auto; font-size: .75rem; }
.rv-item p { margin-top: .25rem; font-size: .875rem; color: var(--ink-2); }
.rv-form { display: grid; gap: .55rem; }
.rv-pick { display: flex; gap: 2px; } .rv-star { color: rgba(255,255,255,.22); transition: .2s var(--ease); } .rv-star svg { fill: currentColor; stroke: none; }
.rv-star.on { color: var(--amber); filter: drop-shadow(0 0 6px rgba(255,200,97,.6)); } .rv-star:hover { transform: scale(1.15); }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rv-tabs { margin: 0; }

/* ---------- верхня панель ---------- */
.top-actions { display: flex; gap: .4rem; }
.top-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--ink-2); padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--line); transition: .2s; }
.top-btn:hover { color: var(--ink); border-color: var(--line-strong); text-decoration: none; background: rgba(255,255,255,.05); }
.top-btn svg { color: var(--cyan); }
@media (max-width: 440px) { .top-btn span { display: none; } .top-btn { padding: .5rem; } }

.app.eva { padding-bottom: 12px; display: flex; flex-direction: column; min-height: 100dvh; }

/* Стрічка дат усередині шторки: не розпирати сітку модалки (інакше дні й слоти «тікають» за край) */
.modal-body > * { min-width: 0; }
.date-tray.in-sheet { overflow: hidden; }
.date-tray .ds-row, .date-tray .ds-list { min-width: 0; }

/* Тестовий режим */
.dry-banner { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .2rem 0 .4rem; padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; color: var(--amber); border: 1px dashed rgba(255,200,97,.5); background: rgba(255,200,97,.08); }

/* MegaSale */
.offer { margin-top: .4rem; padding: .7rem; border-radius: 14px; display: grid; gap: .5rem; background: var(--grad-soft); border: 1px solid var(--line-strong); animation: rise .5s var(--ease); }
.offer-head { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; } .offer-head svg { color: var(--amber); }
.offer-cnt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .75rem; }
.offer-body { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.offer-name { font-weight: 600; } .offer-price { display: inline-flex; align-items: baseline; gap: .4rem; }
.offer-price s { color: var(--ink-3); font-size: .8125rem; } .offer-price b { font-size: 1.1rem; } .offer-price i { font-style: normal; font-size: .75rem; color: var(--mint); }
.offer-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.offer-ok { display: flex; align-items: center; gap: .4rem; color: var(--mint); font-weight: 600; font-size: .875rem; }


/* ===== v2 (за відгуком з телефону) ===== */
/* закріплена шапка */
.app.eva .topbar { position: sticky; top: 0; z-index: 40; margin: 0 -14px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: linear-gradient(180deg, rgba(4, 5, 11, .96) 55%, rgba(4, 5, 11, .78)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: padding .25s var(--ease); }
.app.eva .topbar .brand, .app.eva .topbar .brand small { transition: font-size .25s var(--ease); }
.app.eva .topbar .orb { transition: width .25s var(--ease), height .25s var(--ease); }
.app.eva .topbar.compact { padding-top: calc(5px + env(safe-area-inset-top, 0px)); padding-bottom: 5px; }
.app.eva .topbar.compact .brand { font-size: .8125rem; } .app.eva .topbar.compact .brand small { font-size: .6875rem; line-height: 1.1; } .app.eva .topbar.compact .orb { --s: 20px; width: 20px; height: 20px; }
.chat { padding-bottom: 62vh; }          /* запас під прокрутку: щоб останній діалог можна було підняти вгору */

/* чек: удвічі менший, шрифт на два кроки дрібніший */
.receipt { width: min(100%, 252px); padding: .5rem .6rem .55rem; gap: .22rem; border-radius: 12px; font-size: .75rem;
  -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 4px at 0 54%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 54%, #0000 98%, #000) right / 51% 100% no-repeat; }
.rc-head { font-size: .5625rem; letter-spacing: .14em; }
.rc-when { gap: .45rem; } .rc-when strong { font-size: 1.15rem; } .rc-when span { font-size: .6875rem; }
.rc-sep { margin: 0; } .rc-lines { gap: .12rem; }
.rc-line, .rc-kv { font-size: .6875rem; gap: .5rem; line-height: 1.25; }
.rc-total { margin-top: .1rem; padding-top: .3rem; font-size: .6875rem; } .rc-total b { font-size: .9375rem; }
.rc-comment { margin-top: .15rem; min-height: 34px; padding: .25rem .5rem; font-size: 12px; border-radius: 8px; }
.rc-confirm { --h: 32px; margin-top: .15rem; font-size: .75rem; gap: .3rem; } .rc-confirm svg { width: 14px; height: 14px; }
.rc-stamp { right: 6px; top: 26px; font-size: .5625rem; padding: .05rem .35rem; border-width: 1.5px; border-radius: 5px; }
.offer { padding: .4rem .5rem; gap: .3rem; border-radius: 10px; margin-top: .2rem; } .offer-head { font-size: .6875rem; } .offer-name { font-size: .75rem; } .offer-price b { font-size: .875rem; } .offer-price s, .offer-price i { font-size: .6875rem; }
.offer .btn { --h: 26px; font-size: .6875rem; padding: 0 .6rem; }

/* нижня смужка швидких дій (мінімальна) */
.qbar { display: flex; gap: .35rem; justify-content: center; padding: .25rem; border-radius: 999px; background: rgba(14, 18, 40, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(160, 180, 255, .14); animation: rise .4s var(--ease); }
.qb { display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .8rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #060814; background: var(--grad); white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s; }
.qb:active { transform: scale(.96); } .qb.alt { color: var(--ink); background: rgba(255, 255, 255, .1); } .qb svg { width: 13px; height: 13px; }


/* ===== v3: компактніше, без зайвого ===== */
.chat { gap: .7rem; padding-top: .3rem; } .stp { gap: .3rem; }
.bubble { font-size: .875rem; line-height: 1.38; padding: .45rem .75rem; border-radius: 15px; max-width: min(88%, 340px); }
.msg { gap: .45rem; } .ev-av, .ev-gap { width: 28px; height: 28px; } .ev-av b { font-size: .8125rem; }
.bubble .edit { font-size: .6875rem; }
.widget { margin-left: 36px; }
/* номер / імʼя: лише поле + кругла кнопка */
.ph-card { padding: .45rem; gap: .3rem; border-radius: 16px; display: grid; }
.ph-row { display: flex; align-items: center; gap: .45rem; } .ph-field { flex: 1; min-width: 0; border-radius: 13px; padding: 1.5px; }
.ph-input { min-height: 42px; padding: .3rem .75rem; font-size: 1.0625rem; letter-spacing: .01em; border-radius: 12px; } .ph-input.name { font-size: 1rem; }
.ph-ring { inset: -4px; border-radius: 17px; }
.ph-go { flex: none; width: 42px; height: 42px; min-height: 42px !important; padding: 0 !important; border-radius: 50% !important; }
.ph-status { min-height: 0; padding: 0 .2rem; } .ph-status:empty { display: none; } .ph-status .chip { font-size: .75rem; padding: .05rem .5rem; }
.ph-card .field-error { font-size: .75rem; padding: 0 .3rem; min-height: 0; } .ph-card .field-error:empty { display: none; }
/* послуги та інші елементи — на крок дрібніші */
.sv-name { font-size: .8125rem; } .sv-meta { font-size: .6875rem; } .sv-main { padding: .4rem 1.6rem .4rem .7rem; }
.tab { padding: .3rem .8rem; font-size: .75rem; } .eva-tip { font-size: .75rem; padding: .4rem .6rem; }
.dock-in { padding: .3rem .3rem .3rem .85rem; } .dock-info b { font-size: .9375rem; } .dock-info span { font-size: .75rem; }
.slots-head { font-size: .75rem; } .slot-mini { font-size: .75rem; padding: .25rem .55rem; }


/* ===== лёгкий режим для чату Єви ===== */
.lite .bubble, .lite .ph-card, .lite .receipt, .lite .dock-in, .lite .date-tray, .lite .qbar, .lite .app.eva .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .app.eva .topbar { background: rgba(4, 5, 11, .96); }
.lite .ev-av i, .lite .ph-field, .lite .ph-ring, .lite .ph-go, .lite .rc-confirm, .lite .bubble.typing i:nth-child(3) { animation: none !important; }
.lite .ev-av i { background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--magenta), var(--cyan)); }
.lite .ph-field { background: linear-gradient(120deg, rgba(90, 215, 255, .45), rgba(155, 123, 255, .45)); }
.lite .ph-field:focus-within { background: linear-gradient(120deg, var(--cyan), var(--violet)); }
.lite .rise { animation-duration: .25s; } .lite .msg { animation-duration: .2s; }
.lite .sv::after { transition: none; } .lite .sv.blink { animation: none; }

/* підказка Єви: текст + кнопка + закрити */
.eva-tip { align-items: center; gap: .45rem; } .eva-tip .tip-t { flex: 1; line-height: 1.3; }
.tip-x { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--ink-2); } .tip-x:hover { background: rgba(255, 255, 255, .22); }
/* нижня панель швидких дій — як панель вибору послуг */
.dock-in.dk-two { display: flex; gap: .5rem; padding: .35rem; } .dk-two .dk-b { flex: 1; min-height: 46px; font-size: .9375rem; white-space: nowrap; }
.dk-two .dk-b { flex: 1 1 0; min-width: 0; padding: 0 .6rem; font-size: .875rem; gap: .35rem; }


/* ===== v4: каркас як у месенджері, компактніші картки ===== */
/* Шапка й нижня панель нерухомі; прокручується лише переписка. Висоту каркаса синхронізує JS з visualViewport (клавіатура не зсуває шапку) */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.app.eva { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: 560px; top: 0; bottom: 0; height: auto; min-height: 0; margin: 0 auto; padding: 0 14px;
  display: flex; flex-direction: column; overflow: hidden; }
.app.eva .topbar { position: relative; flex: none; transition: none; }
.app.eva .dry-banner { flex: none; }
.chat { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -14px; padding: .3rem 14px 40vh; align-content: start; }
.chat::-webkit-scrollbar { display: none; }
.tray { position: relative; flex: none; margin-top: 0; }

/* номер / імʼя: ще компактніше, без рядка статусу */
.ph-card { width: min(100%, 288px); padding: .28rem; border-radius: 14px; }
.ph-input { min-height: 36px; padding: .2rem .65rem; font-size: 1rem; border-radius: 11px; } .ph-input.name { font-size: 1rem; }
.ph-field { border-radius: 12px; } .ph-ring { border-radius: 15px; }
.ph-go { width: 36px; height: 36px; min-height: 36px !important; }
.ph-card .ph-go.is-off { opacity: .45; animation: none !important; box-shadow: none; }

/* послуги: плитка закінчується там, де закінчується її зміст */
.sv-grid { gap: .35rem; align-items: flex-start; }
.sv { flex: 0 1 auto; min-width: 0; max-width: 100%; border-radius: 11px; }
.sv-main { padding: .36rem 1.5rem .36rem .65rem; }
.sv-name { max-width: 8.2rem; }
.sv.long .sv-name { max-width: none; }
.svc-box.t-more .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent); }

/* «як завжди» */
.usual { width: min(100%, 320px); padding: .6rem .65rem; display: grid; gap: .5rem; border-radius: 16px; }
.us-head { display: flex; align-items: center; gap: .45rem; font-size: .875rem; } .us-head .dim { margin-left: auto; font-size: .75rem; text-align: right; }
.us-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.us-chip { padding: .18rem .55rem; border-radius: 999px; font-size: .75rem; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.us-actions { display: flex; gap: .4rem; } .us-actions .btn { flex: 1; }
.us-res { display: grid; gap: .4rem; } .us-res:empty { display: none; }
.us-slots { display: flex; gap: .35rem; flex-wrap: wrap; }
.us-slot { display: grid; gap: 0; text-align: center; padding: .28rem .6rem; } .us-slot span { font-size: .625rem; color: var(--ink-3); } .us-slot b { font-size: .9rem; }
.us-slot:hover span { color: var(--ink-2); }
.us-note { font-size: .75rem; color: var(--ink-2); }
.us-more { text-align: center; }

/* день і час: слоти на 10% більші, дати вище */
.date-tray { margin-bottom: 18px; }
.slot-mini { font-size: .825rem; padding: .275rem .6rem; }
.slots-mini { max-height: 104px; }
.slot-mini.other { border-style: dashed; border-color: rgba(90, 215, 255, .5); color: var(--cyan); background: transparent; }
.q-join { justify-self: stretch; }
.app.eva .ds-today { height: 24px; padding: 0 .4rem; font-size: .5625rem; border-radius: 8px; align-self: center; }

/* черга */
.q-card { width: min(100%, 320px); padding: .65rem; display: grid; gap: .5rem; border-radius: 16px; }
.q-line { display: flex; justify-content: space-between; gap: .6rem; font-size: .8125rem; align-items: baseline; } .q-line b { text-transform: capitalize; } .q-line .dim { font-size: .75rem; text-align: right; }
.q-svc { font-size: .75rem; line-height: 1.3; }
.q-chip[aria-pressed="true"] { color: #060814; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-glow); }

/* чек +15% (шрифти без змін) */
.receipt { width: min(100%, 290px); padding: .58rem .69rem .63rem; gap: .25rem; }
.rc-lines { gap: .14rem; } .rc-comment { min-height: 39px; } .rc-confirm { --h: 37px; }
.rc-stamp { top: 46px; right: 38px; }
.q-line { flex-direction: column; gap: 0; } .q-line b { text-transform: none; } .q-line .dim { text-align: left; }
.q-card .field-error:empty { display: none; }

/* ===== v5 ===== */
/* Вибір послуги на телефоні: заливка зліва направо (як при наведенні мишкою на компʼютері). Працює й у легкому режимі: лише transform, дешево для GPU */
.sv.sel::after { transform: scaleX(1); animation: svfill .6s cubic-bezier(.2, .8, .2, 1) both;
  background: linear-gradient(90deg, rgba(90, 215, 255, .4), rgba(155, 123, 255, .36) 65%, rgba(255, 107, 214, .46)); }
@keyframes svfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv.sel::before { transform: scaleY(1); animation: svbar .45s var(--ease) both; }
@keyframes svbar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .sv.sel::after, .sv.sel::before { animation: none; } }

/* «змінити» — в одному рядку зі значенням, з відступом, щоб не зачепити номер */
.msg.me .bubble { display: flex; align-items: center; gap: .55rem; }
.msg.me .bubble > span { min-width: 0; overflow-wrap: anywhere; }
.msg.me .bubble .edit { display: inline-block; flex: none; margin: 0; padding: .35rem 0 .35rem .65rem; border-left: 1px solid rgba(6, 8, 20, .28); white-space: nowrap; }

/* шапка: назва −20%, адреса −15%, щільніший міжрядковий інтервал */
.app.eva .topbar .brand { font-size: .76rem; line-height: 1.15; }
.app.eva .topbar .brand small { font-size: .6375rem; line-height: 1.12; margin-top: 1px; }
.app.eva .topbar .orb { --s: 24px; }
.app.eva .topbar { padding-top: calc(7px + env(safe-area-inset-top, 0px)); padding-bottom: 5px; }

/* ===== v6 ===== */
/* значення і «змінити» — окрема плитка зі світловою смугою, обидва зʼєднані круглим пунктиром */
.msg.me .bubble { max-width: min(94%, 380px); gap: .35rem; font-weight: 700; }
.msg.me .bubble .val { flex: 0 1 auto; }
.msg.me .bubble .lnk { flex: 1 1 3.4rem; min-width: 1.6rem; align-self: center; height: 0; border-top: 3px dotted rgba(6, 8, 20, .42); border-radius: 3px; margin: 0 .15rem; }
.msg.me .bubble .edit { position: relative; overflow: hidden; flex: none; margin: 0; padding: .38rem .8rem; border: 1px solid rgba(255, 255, 255, .38); border-radius: 12px; white-space: nowrap;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; color: #fff; background: rgba(6, 8, 20, .5); box-shadow: 0 4px 14px -6px rgba(6, 8, 20, .7); }
.msg.me .bubble .edit::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; animation: editsweep 3.4s ease-in-out infinite; }
@keyframes editsweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.msg.me .bubble .edit:hover { background: rgba(6, 8, 20, .68); }
.lite .msg.me .bubble .edit::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .msg.me .bubble .edit::after { animation: none; display: none; } }

/* підказка Єви — вдвічі нижча */
.eva-tip { padding: .22rem .35rem .22rem .45rem; gap: .35rem; font-size: .6875rem; line-height: 1.2; border-radius: 11px; }
.eva-tip .tip-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eva-tip .ev-mini { width: 18px; height: 18px; font-size: .6rem; }
.eva-tip .btn-sm { --h: 26px; min-height: 26px; height: 26px; padding: 0 .65rem; font-size: .6875rem; }
.tip-x { width: 20px; height: 20px; }

.msg.me .bubble { max-width: min(98%, 400px); }
.msg.me .bubble.short .val { white-space: nowrap; }
.msg.me .bubble .lnk { flex: 1 1 3.6rem; min-width: 2rem; }
.msg.me .bubble .lnk { flex: 1 1 6rem; }

/* відстань між значенням і «змінити» ×3 (було ~45 px → до ~130 px, стискається лише якщо не вміщується) */
.msg.me .bubble { max-width: 100%; padding: .42rem .6rem .42rem .8rem; }
.msg.me .bubble .lnk { flex: 0 1 130px; min-width: 36px; }
.msg.me .bubble .edit { padding: .38rem .62rem; }
.msg.me .bubble .lnk { flex: 0 1 auto; width: 130px; min-width: 36px; }
.chat { grid-template-columns: minmax(0, 1fr); } .stp { min-width: 0; }

/* ===== v7: стрічка дат — 7 днів, «Сьогодні» як плитка, інерція; слоти — світлий наплив; підпис кнопки профілю ===== */
.app.eva .ds-list { scroll-snap-type: none; touch-action: auto; }

/* час: повільний наплив знизу вгору, світло розходиться від центру (біле сяйво в рамці) */
.slot-mini { position: relative; overflow: hidden; isolation: isolate; }
.slot-mini[aria-pressed="true"], .slot-mini[aria-pressed="true"]:hover { color: #0a1022; font-weight: 800; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .9); transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 16px 1px rgba(210, 232, 255, .65), inset 0 0 12px rgba(255, 255, 255, .5); }
.slot-mini[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .98) 0%, rgba(228, 242, 255, .9) 45%, rgba(170, 210, 255, .62) 100%);
  animation: slotfill 1.1s cubic-bezier(.25, .7, .2, 1) both; }
@keyframes slotfill { from { transform: scaleY(0); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slot-mini[aria-pressed="true"]::before { animation: none; } }

/* кнопка профілю з підписом */
.top-btn.prof { gap: .3rem; padding: .3rem .7rem .3rem .55rem; }
.top-btn.prof .lbl { display: inline; font-size: .6875rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.top-btn.prof .lbl.b, .top-btn.prof.open .lbl.a { display: none; }
.top-btn.prof.open .lbl.b { display: inline; }
.top-btn.prof.open, .top-btn.prof.open .lbl { color: #060814; } .top-btn.prof.open .lbl { font-weight: 800; }

/* ===== v8: відповіді гостя — без плитки-бульбашки: звичайний текст · пунктир · кнопка «змінити» ===== */
.msg.me { width: 100%; justify-content: stretch; }
.msg.me .bubble { width: 100%; max-width: 100%; min-width: 0; padding: .05rem .1rem .05rem .15rem; gap: .5rem; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); font-weight: 700; font-size: .9375rem; }
.msg.me .bubble .val { flex: 0 1 auto; }
.msg.me .bubble .lnk { flex: 1 1 auto; width: auto; min-width: 24px; border-top: 3px dotted rgba(160, 180, 255, .55); }
.msg.me .bubble .edit { background: rgba(130, 110, 255, .3); border-color: rgba(255, 255, 255, .42); }
.msg.me .bubble .edit:hover { background: rgba(130, 110, 255, .5); }


/* ===== v9 ===== */
/* календар — лівий кут плитки, «Сьогодні» — правий; стрічка дат займає всю ширину (плитки в прежньому розмірі) */
.slots-top { display: flex; align-items: center; gap: .5rem; min-height: 30px; }
.slots-top .ds-cal { width: 34px; height: 30px; flex: none; } .slots-top .ds-cal .face { border-radius: 10px; } .slots-top .ds-cal .face svg { width: 18px; height: 18px; }
.slots-top .slots-head { flex: 1; min-width: 0; }
.slots-hint-i { flex: 1; text-align: center; color: var(--ink-3); font-size: .8125rem; }
.slots-top .ds-today { flex: none; height: 26px; padding: 0 .6rem; border-radius: 9px; font-size: .625rem; }
.date-tray .ds-row { padding-top: 2px; }

/* відповіді: текст · три крапки · «змінити» (світловий відблиск — тільки на новій відповіді, анімація на GPU) */
.msg.me .bubble .sp { flex: 1 1 0; min-width: 0; }
.msg.me .bubble .dots { display: inline-flex; gap: 4px; flex: none; align-items: center; }
.msg.me .bubble .dots b { width: 4px; height: 4px; border-radius: 50%; background: rgba(170, 190, 255, .85); }
.msg.me .bubble .lnk { display: none; }
.msg.me .bubble { padding-left: 0; }
.msg.me .bubble .edit::after { inset: auto; top: 0; bottom: 0; left: 0; width: 55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); background-size: auto; background-position: 0 0; animation: none; transform: translateX(-130%); will-change: transform; }
.msg.me.live .bubble .edit::after { animation: editsweep2 3.8s ease-in-out infinite; }
@keyframes editsweep2 { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(260%); } }
.lite .msg.me.live .bubble .edit::after { animation: none; }

/* чек: на всю ширину віджета (рівно по правому краю), крупніші шрифти, підпис «Послуги» */
.receipt { width: 100%; padding: .65rem .8rem .75rem; gap: .3rem; }
.rc-head { font-size: .625rem; } .rc-when strong { font-size: 1.45rem; } .rc-when span { font-size: .8125rem; }
.rc-sec { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rc-line, .rc-kv { font-size: .8125rem; line-height: 1.3; gap: .75rem; }
.rc-kv b { min-width: 0; overflow-wrap: anywhere; }
.rc-total { font-size: .8125rem; } .rc-total b { font-size: 1.2rem; }
.rc-comment { min-height: 44px; font-size: 13px; } .rc-confirm { --h: 40px; font-size: .8125rem; }
.rc-stamp { top: 52px; right: 20px; font-size: .625rem; }
.stp { grid-template-columns: minmax(0, 1fr); } .stp > * { min-width: 0; }
.receipt.widget { width: auto; }

/* ===== v10: відповіді рівно в колонці плиток (від бульбашок Єви до правого краю), нижня плитка вища й просторіша ===== */
.msg.me { margin-left: 36px; margin-right: 8px; width: auto; }
.msg.me .bubble { font-size: .875rem; padding-right: 0; }
.msg.me .bubble .val { line-height: 1.25; }
.date-tray { margin-bottom: 30px; }
.slots-mini { max-height: 150px; gap: 6px; }
.slot-mini { padding: .32rem .66rem; }
.tray { padding-bottom: calc(8px + var(--safe-b)); }

/* ===== v11: каркас прикріплений до верху й НИЗУ видимої області (bottom:0), а не до 100vh — нижня плитка не ховається під панеллю браузера; плитка за потреби прокручується ===== */
.tray { max-height: 66%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tray::-webkit-scrollbar { display: none; }
.date-tray { margin-bottom: 38px; }

/* ===== v12: нижня плитка прикріплена до низу й росте ВГОРУ; на браузерах із панеллю, що перекриває сторінку, піднята над нею ===== */
.app.eva.bar-safe .tray { padding-bottom: calc(86px + var(--safe-b)); }
.date-tray { margin-bottom: 30px; }

/* нижній запас під панель браузера: завжди (мінімум), а на браузерах, що розтягують сторінку під панель, — повний */
.tray { padding-bottom: calc(52px + var(--safe-b)); }
.app.eva.bar-safe .tray { padding-bottom: calc(86px + var(--safe-b)); }

/* ===== v13: каркас — сітка з жорстким рядком minmax(0,1fr) для переписки (на iPhone flex-стиснення чату не спрацьовувало: плитка вилазила за низ на 79 px) ===== */
.app.eva { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.app.eva .topbar { grid-row: 1; } .app.eva .dry-banner { grid-row: 2; } .app.eva .chat { grid-row: 3; min-height: 0; height: 100%; } .app.eva .tray { grid-row: 4; }
.app.eva .tray { max-height: none; overflow: visible; }