/* «Мій простір» — спільна основа. Джерело токенів: app/tokens.css */
:root{--nero:#252525;--egyptian-blue:#2D3794;--egyptian-blue-deep:#232b77;--powder-blue:#BACFF0;--dark-spring-green:#1D703E;--celadon:#ABD6B7;--coral:#FF764D;--coral-deep:#e85a30;--isabelline:#F7EFEC;--isabelline-warm:#FAF4F1;--tuscan-sun:#FFD84D;--bg:var(--isabelline);--bg-alt:var(--isabelline-warm);--text:var(--nero);--text-muted:rgba(37,37,37,.68);--text-faint:rgba(37,37,37,.38);--accent:var(--coral);--primary:var(--egyptian-blue);--line:rgba(37,37,37,.12);--line-strong:rgba(37,37,37,.22);--r-card:24px;--r-pill:999px;--font-display:'Unbounded',sans-serif;--font-body:'Inter',sans-serif;--font-hand:'Caveat',cursive}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
button,input,select,textarea{color:inherit;font-family:inherit}
a{color:var(--egyptian-blue);text-decoration:none}
a:hover{color:var(--coral)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.1;margin:0}
.hand{font-family:var(--font-hand);font-weight:500;color:var(--coral)}
.muted{color:var(--text-muted)}
.eyebrow{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0}
:focus-visible{outline:2.5px solid var(--egyptian-blue);outline-offset:2px;border-radius:6px}
/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 24px;border-radius:var(--r-pill);font-family:var(--font-body);font-size:15px;font-weight:500;border:none;cursor:pointer;text-decoration:none;transition:transform .16s ease,background .16s ease,box-shadow .16s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--coral);color:var(--isabelline);box-shadow:0 6px 16px rgba(255,118,77,.28)}
.btn--primary:hover{background:var(--coral-deep);color:var(--isabelline)}
.btn--dark{background:var(--egyptian-blue);color:var(--isabelline)}
.btn--dark:hover{background:var(--egyptian-blue-deep);color:var(--isabelline)}
.btn--ghost{background:transparent;color:var(--nero);border:1.5px solid var(--line-strong)}
.btn--ghost:hover{border-color:var(--nero);color:var(--nero)}
.btn--sm{height:38px;padding:0 16px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;background:var(--isabelline-warm);color:var(--text);border:1px solid var(--line);cursor:pointer}
.chip--blue{background:var(--powder-blue);border-color:transparent;color:var(--egyptian-blue)}
.chip--green{background:var(--celadon);border-color:transparent;color:var(--dark-spring-green)}
.chip--yellow{background:var(--tuscan-sun);border-color:transparent;color:var(--nero)}
.chip[aria-pressed="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
.aura{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
/* Шапка сайту (макет) + панель зон */
.site-top{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:18px 32px;font-size:14px;color:var(--text-muted)}
.site-top b{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:.02em;color:var(--nero)}
.is-fullscreen .site-top{display:none}
.zone-bar .zone-switch{margin-right:auto}
.zone-bar{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:10px;max-width:1200px;margin:0 auto;padding:10px 32px 14px;background:linear-gradient(var(--bg) 78%,transparent)}
.zone-switch{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px}
.zone-switch a{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--text-muted);white-space:nowrap}
.zone-switch a:hover{color:var(--nero)}
.zone-switch a.is-on{background:var(--nero);color:var(--isabelline)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--nero);position:relative}
.icon-btn:hover{border-color:var(--nero)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.help-menu{position:absolute;top:52px;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px;min-width:230px;box-shadow:0 12px 32px rgba(37,37,37,.1);display:none}
.help-menu.is-open{display:block}
.help-menu button{display:block;width:100%;text-align:left;background:none;border:none;border-radius:11px;padding:11px 14px;font-size:14px;cursor:pointer}
.help-menu button:hover{background:var(--isabelline)}
.fs-exit{display:none;position:fixed;top:14px;right:14px;z-index:130}
.is-fullscreen .fs-exit{display:inline-flex}
/* Каркас */
.space{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;max-width:1200px;margin:0 auto;padding:4px 32px 40px;position:relative}
.snav{align-self:start;position:sticky;top:84px}
.mtabs{display:none}
.tabpane{display:none}
.tabpane.is-open{display:block}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--coral);color:#fff;font-size:11.5px;font-weight:600;line-height:1}
/* Картка-модуль: заголовок · тіло · одна дія */
.m-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;position:relative}
.m-card>h3{font-family:var(--font-display);font-size:17px;font-weight:500;margin:0 0 12px}
.m-card .act{margin-top:16px}
/* Чек-ін */
.emoji-row{display:flex;gap:10px;flex-wrap:wrap}
.emoji-btn{width:56px;height:56px;border-radius:50%;font-size:27px;line-height:1;background:#fff;border:1.5px solid var(--line);cursor:pointer;transition:transform .15s ease,border-color .15s ease;display:inline-flex;align-items:center;justify-content:center}
.emoji-btn:hover{transform:scale(1.12);border-color:var(--coral)}
/* Форма відмітки: настрій з підписами + впливи */
.eyebrow .opt{text-transform:none;letter-spacing:.01em;font-weight:400;color:var(--text-faint)}
.mood-row{display:flex;gap:12px;flex-wrap:wrap}
.mood-opt{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:96px;background:var(--isabelline-warm);border:1.5px solid var(--line);border-radius:16px;padding:20px 8px;cursor:pointer;font-size:13.5px;color:var(--text-muted);font-weight:500;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.mood-opt .face{font-size:30px;line-height:1}
.mood-opt:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.mood-opt[aria-pressed="true"]{border-color:var(--nero);background:rgba(37,37,37,.05);color:var(--nero)}
.inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.inf{display:flex;align-items:center;gap:10px;background:var(--isabelline-warm);border:1.5px solid var(--line);border-radius:16px;padding:13px 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--text);text-align:left}
.inf:hover{border-color:var(--line-strong)}
.inf[aria-pressed="true"]{border-color:var(--nero);background:rgba(37,37,37,.05)}
.inf i{font-style:normal;font-size:19px;line-height:1}
#new-entry .chip{background:#fff}
#new-entry .chip[aria-pressed="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
/* Хітмапа */
.hm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
/* Круглими робимо лише стрілки: .btn у шапці має власну ширину під
   текст, інакше «Сьогодні» не вміщається у 36px. */
.hm-head button:not(.btn){background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:15px}
.hm-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:11px;color:var(--text-faint);text-align:center;margin-bottom:6px}
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hm b{aspect-ratio:1;border-radius:9px;background:rgba(37,37,37,.045);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:12px;color:rgba(37,37,37,.55);position:relative}
.hm b.is-future{background:transparent;border:1.5px dashed rgba(37,37,37,.14);color:rgba(37,37,37,.28)}
.hm b.is-today{outline:2px solid var(--coral);outline-offset:2px}
.hm b{cursor:pointer}
.hm b.is-out{cursor:default;pointer-events:none}
.hm b.is-sel{outline:2px solid var(--egyptian-blue);outline-offset:2px}
.hm-info{font-size:14px;color:var(--text-muted);margin:14px 0 0;min-height:21px}
.entry-done{text-align:center;padding:34px 12px}
#new-entry.is-saved>*:not(.entry-done){display:none!important}
#new-entry:not(.is-saved)>.entry-done{display:none}
.goal-card{background:var(--powder-blue);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.reason{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:baseline}
.reason:last-of-type{border-bottom:none}
.reason>span{color:var(--text-muted);font-size:12.5px}
.hm-info b{font-weight:600;color:var(--text)}
.hm b.is-out{background:transparent}
.hm-legend{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;color:var(--text-muted)}
.hm-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
/* Графік і бари */
.spark-tip{position:absolute;background:var(--nero);color:var(--isabelline);font-size:12.5px;padding:6px 10px;border-radius:9px;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}
.spark-tip.on{opacity:1}
.spark{display:block}
.bar-row{display:grid;grid-template-columns:118px 1fr 26px;align-items:center;gap:10px;font-size:14px;padding:5px 0}
.bar-row i{height:8px;border-radius:var(--r-pill);background:var(--coral);display:block}
.bar-row em{font-style:normal;color:var(--text-muted);font-size:13px;text-align:right}
.range-seg{display:inline-flex;background:var(--isabelline);border-radius:var(--r-pill);padding:4px;gap:2px}
.range-seg button{border:none;background:none;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;cursor:pointer;color:var(--text-muted)}
.range-seg button[aria-pressed="true"]{background:#fff;color:var(--nero);border:1px solid var(--line)}
/* Історія записів */
.entry{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:10px}
.entry summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-size:14.5px}
.entry summary::-webkit-details-marker{display:none}
.entry .ebody{padding:0 18px 16px;font-size:14px;color:var(--text-muted)}
.entry .edel{background:none;border:none;color:var(--text-faint);font-size:13px;cursor:pointer;margin-left:auto}
.entry .edel:hover{color:var(--coral)}
.day-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin:18px 0 8px}
/* Сесії */
.hw{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.hw:first-of-type{border-top:none}
.hw .st{flex-shrink:0;margin-top:2px}
.st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:12px;font-weight:500}
.st--work{background:var(--isabelline);border:1px solid var(--line);color:var(--text-muted)}
.st--you{background:var(--tuscan-sun);color:var(--nero)}
.st--ok{background:var(--celadon);color:var(--dark-spring-green)}
.talk-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.talk-item:first-child{border-top:none}
.talk-item input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:23px;height:23px;border:1.5px solid var(--line-strong);border-radius:8px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease,border-color .15s ease}
.talk-item input[type="checkbox"]:hover{border-color:var(--coral)}
.talk-item input[type="checkbox"]:checked{background:var(--coral);border-color:var(--coral)}
.talk-item input[type="checkbox"]:checked::after{content:'✓';font-family:var(--font-hand);font-weight:600;font-size:17px;line-height:1;color:#fff}
.talk-item.is-done span{text-decoration:line-through;color:var(--text-faint)}
.talk-add{display:flex;gap:10px;margin-top:12px}
.talk-add input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 18px;font-size:14px;background:var(--isabelline-warm)}
.talk-add input:focus{outline:none;border-color:var(--egyptian-blue)}
.note-card{border-radius:18px;padding:18px 52px 18px 20px;margin-bottom:10px;font-size:14.5px;position:relative;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
.note-card .nd{grid-column:1}
.note-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.note-view{grid-column:1/-1;justify-self:start;background:#fff;height:34px;padding:0 16px;font-size:12.5px;margin-top:10px}
.note-card .nd{font-size:12.5px;color:rgba(37,37,37,.55);margin-bottom:6px}
.note-card--new{background:var(--celadon)}
.note-card--old{background:var(--isabelline-warm);border:1px solid var(--line)}
.note-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(37,37,37,.2);background:rgba(255,255,255,.55);cursor:pointer;font-size:13px;line-height:1;color:var(--text-muted)}
.note-x:hover{background:#fff;color:var(--nero)}
/* Історія сесій */
.sess{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:10px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center}
.sess-date{width:54px;height:54px;border-radius:14px;background:var(--isabelline);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.sess-date b{font-size:19px;font-weight:600;color:var(--text);line-height:1.1}
.sess-t b{display:block;font-family:var(--font-display);font-weight:500;font-size:15.5px;margin-bottom:2px}
.sess-t span{font-size:13.5px;color:var(--text-muted)}
.sess-t em{font-style:normal;font-weight:500}
.sess-t em.ok{color:var(--dark-spring-green)}
.sess-t em.plan{color:var(--egyptian-blue)}
.sess-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl-notes{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-pill);border:none;background:var(--celadon);color:var(--dark-spring-green);font-size:13px;font-weight:500;cursor:pointer}
.tl-notes:hover{background:#9ccfae}
.tl-notebox{grid-column:1/-1;margin-top:10px}
.tl-notebox .note-card{padding-right:20px;margin-bottom:8px}
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1.5px;background:var(--line-strong)}
.tl li{list-style:none;position:relative;padding:0 0 18px;font-size:14.5px}
.tl li::before{content:'';position:absolute;left:-24px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.tl li.past::before{background:var(--line-strong)}
/* Чат: розмови + тред */
.convs-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px 8px}
.convs-head .eyebrow{margin:0;padding:0 6px}
.convs-col{width:34px;height:34px;border-radius:10px;flex-shrink:0;border:none;background:none;color:var(--text-muted)}
.convs-col:hover{color:var(--nero);border:none;background:var(--isabelline)}
.convs-col svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dot{width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block;flex-shrink:0}
.zone-switch .dot{margin-left:8px}
.snav a .dot{margin-left:auto}
body.nav-min .snav a{position:relative}
body.nav-min .snav a .dot{position:absolute;top:6px;right:10px;margin:0}
.chat-wrap.convs-min{grid-template-columns:72px minmax(0,1fr)}
.chat-wrap.convs-min .cvt,.chat-wrap.convs-min .cv .badge,.chat-wrap.convs-min .convs-head .eyebrow{display:none}
.chat-wrap.convs-min .cv{justify-content:center;padding:9px 0}
.chat-wrap.convs-min .convs-head{justify-content:center}
.chat-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);transition:grid-template-columns .25s ease}
.convs{border-right:1px solid var(--line);background:var(--isabelline-warm);padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.cv{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;background:none;text-align:left;width:100%;font-family:inherit}
.cv:hover{background:#fff}
.cv.is-on{background:#fff;border-color:var(--coral)}
.av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.cv .cvt{min-width:0}
.cv b{display:block;font-size:13.5px;line-height:1.25}
.cv small{font-size:12px;color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv .badge{margin-left:auto;flex-shrink:0}
.doc-chip{display:inline-flex;align-items:center;gap:6px;max-width:230px;background:var(--isabelline-warm);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:12px;color:var(--text-muted);margin:5px 0 2px}
.doc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-msg{display:flex;align-items:center;gap:10px;background:var(--coral);color:#fff;border-radius:14px;padding:12px 14px;margin-top:10px;font-size:13.5px;max-width:340px}
.doc-msg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.doc-msg em{font-style:normal;opacity:.85;font-size:11.5px;white-space:nowrap}
.test-invite{display:flex;align-items:center;gap:12px;background:var(--egyptian-blue);color:#fff;border-radius:14px;padding:12px 16px;margin-top:10px;max-width:340px;text-decoration:none}
.test-invite:hover{background:var(--egyptian-blue-deep);color:#fff}
.test-invite b{display:block;font-size:14px;color:#fff}
.test-invite small{opacity:.75;font-size:12px}
.test-invite em{margin-left:auto;font-style:normal;font-size:17px}
.chat-msg time{display:block;font-size:11px;color:rgba(37,37,37,.4);margin-top:6px}
.chat-msg[title]{cursor:default}
.thread{display:flex;flex-direction:column;min-width:0}
.thread-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:14.5px}
.thread-body{padding:18px;flex:1;background:var(--isabelline);display:flex;flex-direction:column}
/* Тред не розтягуємо на всю ширину екрана: у кабінеті клієнтки він
   вужчий, і читати рядок на 1200px незручно — око губить початок. */
/* Обмежуємо колонку повідомлень, але не ламаємо вирівнювання бульбашок:
   центруємо лише пігулку дати, решта лишається на своїх боках. */
/* Спадок старої верстки: центрована колонка 720px. У Чаті 2.0
   бульбашки прив'язані до країв, а це правило центрувало «пише…»
   посеред стрічки (27.08). Ширину лишаємо, вирівнювання — за
   самим елементом. */
.thread-body>*{max-width:720px;width:100%}
.thread-body>.chat-msg{width:auto}
.thread-body>.chat-msg--her{margin-right:auto;margin-left:calc(50% - 360px)}
.thread-body>.chat-msg--me{margin-left:auto;margin-right:calc(50% - 360px)}
.thread-body>.chat-day{width:auto;max-width:none;align-self:center}
@media (max-width:820px){
  .thread-body>.chat-msg--her{margin-left:0}
  .thread-body>.chat-msg--me{margin-right:0}
}
.thread-body>div[data-when="filled"]{display:flex;flex-direction:column}
.thread-body .chat-msg{max-width:min(70%,460px);border-radius:20px;padding:11px 15px;line-height:1.55;box-shadow:0 1px 2px rgba(37,37,37,.04);margin-bottom:8px}
.thread-body .chat-msg--her{background:#fff;border:1px solid var(--line);border-bottom-left-radius:7px}
.thread-body .chat-msg--me{border:none;border-bottom-right-radius:7px}
.thread-body .chat-msg--me time{text-align:right}
.chat-day{align-self:center;white-space:nowrap;font-size:12px;color:var(--text-muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 13px;margin:0 0 14px}
.chat-msg .chip{height:auto!important;padding:5px 12px;line-height:1.35;white-space:normal}
#tab-diary .grid2{align-items:stretch}
#tab-diary .grid2>div>.m-card:last-child{margin-bottom:0}
#tab-diary .grid2>.m-card{height:100%}
.chat-read{display:block;text-align:right;font-size:11px;color:var(--text-muted);margin-top:2px}
.typing{align-self:flex-start;display:inline-flex;gap:5px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:11px 15px;font-size:12.5px;color:var(--text-muted)}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--text-faint);animation:typ 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.thread-foot{background:#fff}
.thread-head{background:#fff}
.thread-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.thread-foot input{flex:1;min-width:0;height:48px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 18px;background:var(--isabelline-warm);font-size:14.5px}
.thread-foot input:focus{outline:none;border-color:var(--egyptian-blue)}
.attach-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted)}
.attach-btn:hover{color:var(--nero);border-color:var(--nero)}
.attach-btn svg,.send-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.send-btn{width:48px;height:48px;border-radius:14px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--coral);border:none;color:#fff;cursor:pointer}
.send-btn:hover{background:var(--coral-deep)}
/* Вікно результату тесту */
.rmodal{position:fixed;inset:0;z-index:940;background:rgba(37,37,37,.5);display:none;align-items:center;justify-content:center;padding:20px}
.rmodal.is-open{display:flex}
.rbox{background:#fff;border-radius:var(--r-card);padding:30px;width:min(560px,100%);max-height:88vh;overflow:auto;position:relative}
.rbox .eyebrow{margin-bottom:6px}
.rscore{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:10px 0 4px}
.rscore b{font-family:var(--font-display);font-weight:400;font-size:38px;color:var(--coral)}
.rnote{font-size:13.5px;color:var(--text-muted);border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.rx{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:15px;line-height:1}
.rx:hover{border-color:var(--nero)}
.rsub{margin-top:18px}
.rsub h4{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px}
.rmodal .bar-row{grid-template-columns:170px 1fr 48px}
/* «Як складається робота» */
.fb-card{background:linear-gradient(115deg,#fff 55%,rgba(255,216,77,.35));border:1px solid var(--line);border-radius:var(--r-card);padding:24px;position:relative;margin-bottom:16px}
.fb-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fb-head h3{font-family:var(--font-display);font-weight:500;font-size:18px;margin:0}
.fb-opts{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.fb-opt{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;font-size:14.5px;font-weight:500;cursor:pointer;flex:1;min-width:180px;color:var(--text)}
.fb-opt:hover{border-color:var(--nero)}
.fb-opt[aria-pressed="true"]{border-color:var(--nero);background:rgba(37,37,37,.04)}
.fb-opt i{font-style:normal;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.fb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--text-faint);flex-wrap:wrap}
.fb-foot a{color:var(--coral);font-weight:500}
/* Зона «Кабінет» */
body.zone-office #zone-space{display:none}
body:not(.zone-office) #zone-office{display:none}
.o-user{display:flex;align-items:center;gap:12px;padding:8px 10px 16px}
.o-user .av{width:44px;height:44px;background:var(--powder-blue);color:var(--egyptian-blue);font-size:15px}
.o-user .ou{display:flex;flex-direction:column;min-width:0}
.o-user .ou b{font-size:14.5px;line-height:1.3}
.o-user .ou span{font-size:12px;color:var(--text-muted)}
body.nav-min .o-user{justify-content:center;padding:8px 0 16px}
body.nav-min .o-user .ou{display:none}
.tab-hint{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px 10px 16px;font-size:13.5px;color:var(--text-muted);margin-bottom:14px;transition:opacity .25s}
.tab-hint .hint-x{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--text-faint);font-size:13px;line-height:1}
.tab-hint .hint-x:hover{color:var(--nero);background:var(--isabelline)}
.segc{display:inline-flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.segc button{height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:500;display:inline-flex;gap:8px;align-items:center;cursor:pointer;color:var(--text)}
/* Головна кнопка ВСЕРЕДИНІ ряду фільтрів не має ставати фільтром.
   `.segc button` задає білий фон, рамку й висоту 40px — і «+ Новий
   запис» / «+ Створити групу» виглядали блідими, тоді як «+ Новий
   клієнт» (він поза .segc) лишався коралевим. Три однакові за змістом
   кнопки мали три різні вигляди (фідбек Іллі 11.09.2026).
   Виняток нижче повертає їм стиль .btn — зовнішній вигляд тепер один. */
.segc .btn{height:auto;min-height:38px;padding:0 18px;border:0;background:none;
  font-size:13px;font-weight:600;border-radius:var(--r-pill)}
.segc .btn--primary{background:var(--coral);color:var(--isabelline)}
.segc .btn--primary:hover{background:var(--coral)}
/* ghost лишається прозорим, але з нормальною висотою — без min-height
   він стискався до висоти тексту (15px). */
.segc .btn--ghost{border:1px solid var(--line);background:#fff;color:var(--text)}
.segc button b{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--isabelline);font-size:11.5px;align-items:center;justify-content:center;font-weight:600;color:var(--text-muted)}
.segc button[aria-pressed="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
.segc button[aria-pressed="true"] b{background:var(--coral);color:#fff}
.tbadge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);font-weight:600;flex-shrink:0}
.doc-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;flex-wrap:wrap}
.doc-row .dn{min-width:0;flex:1}
.doc-row .dn b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-row .dn span{font-size:12.5px;color:var(--text-muted)}
.pay-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px 16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;font-size:14px}
.pay-row .pn{font-weight:600;font-size:13px;color:var(--text-muted)}
.pay-row .pt b{display:block;font-size:14.5px}
.pay-row .pt span{font-size:12.5px;color:var(--text-muted)}
.pay-row .sum{font-family:var(--font-display);font-weight:400;font-size:16px;white-space:nowrap}
.ref-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.ref-tiles .tile b{font-family:var(--font-display);font-weight:300;font-size:22px}
.ref-link{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--isabelline-warm);border:1.5px dashed var(--line-strong);border-radius:14px;padding:12px 16px;font-size:13.5px}
.ref-link code{font-family:var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:120px}
.bonus-note{background:var(--celadon);color:var(--dark-spring-green);border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:500;margin-top:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:5px}
.field input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-size:14.5px;background:var(--isabelline-warm)}
.field input:focus{outline:none;border-color:var(--egyptian-blue)}
.switch{position:relative;display:inline-flex;width:46px;height:27px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;border-radius:var(--r-pill);background:rgba(37,37,37,.18);transition:background .2s;cursor:pointer}
.switch i::after{content:'';position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+i{background:var(--dark-spring-green)}
.switch input:checked+i::after{transform:translateX(19px)}
.loading{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:13.5px;padding:14px 4px}
.loading i{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--coral);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Кнопка в процесі ────────────────────────────────────────────────
   Три крапки «дихають» по черзі — той самий мотив, що в індикаторі
   набору в чаті. Ширину кнопки фіксуємо на час дії, інакше вона
   стрибає під час зміни підпису. */
.btn.is-busy{position:relative;pointer-events:none}
.btn.is-busy>span.btn-lbl{opacity:.55}
.btn.is-busy .btn-dots{display:inline-flex;gap:4px;margin-left:8px;align-items:center}
.btn.is-busy .btn-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:btnDot 1s infinite ease-in-out}
.btn.is-busy .btn-dots i:nth-child(2){animation-delay:.15s}
.btn.is-busy .btn-dots i:nth-child(3){animation-delay:.3s}
@keyframes btnDot{0%,70%,100%{opacity:.3;transform:translateY(0)}
  35%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy .btn-dots i{animation:none;opacity:.7}}
.danger-zone{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;font-size:13px;color:var(--text-muted)}
.danger-zone a{color:var(--text-muted);text-decoration:underline}
.danger-zone a:hover{color:#c0392b}
.ref-tiles .tile{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.ref-tiles .tile span{font-size:12.5px;color:var(--text-muted);display:block}
.o-title{font-family:var(--font-display);font-weight:500;font-size:22px;margin:2px 0 14px}
/* Порожні стани */
.empty{border:1.5px dashed var(--line-strong);border-radius:var(--r-card);padding:34px 28px;text-align:center;color:var(--text-muted);font-size:15px}
.empty .btn{margin-top:16px}
body.demo-empty [data-when="filled"]{display:none!important}
body:not(.demo-empty) [data-when="empty"]{display:none!important}
body:not(.demo-gap) [data-when-gap]{display:none!important}
/* Криза */
.crisis{text-align:center;font-size:13px;color:var(--text-faint);padding:26px 20px 34px;max-width:1200px;margin:0 auto}
/* Дихання 4-7-8 */
.breath{position:fixed;inset:0;z-index:950;background:radial-gradient(130% 100% at 50% 0%,#FAF4F1 0%,#F5EDE6 55%,#EFE9E0 100%);display:none;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.breath::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:var(--celadon);filter:blur(95px);opacity:.5;top:-140px;left:-100px;animation:breathDrift 16s ease-in-out infinite}
.breath::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:var(--powder-blue);filter:blur(95px);opacity:.45;bottom:-140px;right:-90px;animation:breathDrift 16s ease-in-out infinite;animation-delay:-8s}
.breath.is-open{display:flex}
.breath-inner{position:relative;z-index:1}
.breath-circle{width:190px;height:190px;margin:0 auto 44px;border-radius:50%;position:relative;background:radial-gradient(circle at 36% 30%,#eaf6ec 0%,#c8e4cf 42%,#9fd1ae 78%,#8ec7a0 100%);box-shadow:0 0 70px 18px rgba(171,214,183,.55),0 0 150px 60px rgba(186,207,240,.3),inset 0 -20px 44px rgba(29,112,62,.14),inset 0 14px 30px rgba(255,255,255,.65);transform:scale(.72);transition:transform 4s ease-in-out}
.breath-circle::before{content:'';position:absolute;inset:-14%;border-radius:50%;border:1.5px solid rgba(29,112,62,.22)}
.breath-circle::after{content:'';position:absolute;inset:-30%;border-radius:50%;border:1px solid rgba(45,55,148,.14)}
.breath.phase-in .breath-circle{transform:scale(1.25);transition-duration:4s}
.breath.phase-hold .breath-circle{transform:scale(1.25);transition-duration:.3s}
.breath.phase-out .breath-circle{transform:scale(.72);transition-duration:8s}
.breath-word{font-family:var(--font-display);font-weight:300;font-size:26px;min-height:36px;letter-spacing:.02em;color:var(--dark-spring-green)}
.breath-hint{color:var(--text-muted);font-size:14px;margin-top:8px}
@keyframes breathDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,36px) scale(1.18)}}
.breath-close{position:fixed;top:18px;right:18px}
/* Статистика дихання */
.breath-stats{margin-top:14px;font-size:12.5px;color:var(--text-muted)}
.bd-row{display:flex;gap:6px;margin-bottom:7px}
.bd{width:15px;height:15px;border-radius:50%;background:rgba(37,37,37,.07);display:inline-block}
.bd.on{background:var(--celadon)}
/* Екскурсія */
.tour-overlay{position:fixed;inset:0;z-index:900;background:rgba(37,37,37,.55);display:none}
body.tour-on .tour-overlay{display:block}
body.tour-on .tour-target{position:relative;z-index:901;box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 6.5px rgba(232,90,48,.55),0 0 70px rgba(255,255,255,.35);border-radius:var(--r-card)}
/* Разова підсвітка з банера налаштування: та сама рамка, що в екскурсії,
   але без затемнення й без картки з текстом — це вказівник «сюди», а не
   режим навчання. Гасне сама за 4 с або від першого кліку. */
body.spot-on .tour-overlay{display:none}
body.spot-on .tour-card{display:none}
body.spot-on .tour-target{animation:spotPulse 1.1s ease-out 2}
@keyframes spotPulse{
  0%{box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 6.5px rgba(232,90,48,.55),0 0 0 rgba(232,90,48,.35)}
  60%{box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 9px rgba(232,90,48,.32),0 0 28px rgba(232,90,48,.22)}
  100%{box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 6.5px rgba(232,90,48,.55),0 0 0 rgba(232,90,48,0)}
}
@media (prefers-reduced-motion:reduce){body.spot-on .tour-target{animation:none}}

.tour-card{position:fixed;z-index:902;width:min(330px,calc(100vw - 32px));background:#fff;border-radius:var(--r-card);padding:22px;box-shadow:0 24px 60px rgba(37,37,37,.25);display:none}
body.tour-on .tour-card{display:block}
.tour-card h4{font-size:16px;margin:0 24px 8px 0}
.tour-card p{margin:0;font-size:14px;color:var(--text-muted)}
.tour-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:15px;line-height:1}
.tour-foot{display:flex;align-items:center;gap:12px;margin-top:18px}
.tour-dots{display:flex;gap:5px;margin-right:auto}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.tour-dots i.on{background:var(--coral)}
.tour-count{font-size:12.5px;color:var(--text-faint);white-space:nowrap}
/* Демо-панель (для перегляду макета) */
.demo{position:fixed;left:16px;bottom:16px;z-index:800;display:flex;align-items:center;gap:6px;background:var(--nero);color:var(--isabelline);border-radius:var(--r-pill);padding:7px 8px 7px 16px;font-size:12.5px}
.demo button{background:rgba(255,255,255,.14);border:none;color:inherit;border-radius:var(--r-pill);height:30px;padding:0 13px;font-size:12.5px;cursor:pointer}
.demo button:hover{background:rgba(255,255,255,.26)}
body.tour-on .tour-lift{z-index:1000;background:none}
body.tour-on .tour-lift>*{opacity:.25}
body.tour-on .tour-lift>.tour-target,body.tour-on .tour-lift>*:has(.tour-target){opacity:1}
body.nav-min .space{grid-template-columns:84px minmax(0,1fr)}
body.nav-min .snav a{justify-content:center;padding:0;gap:0}
body.nav-min .snav .lbl,body.nav-min .snav .badge{display:none}
body.nav-min .snav-foot{flex-direction:column;gap:8px;justify-content:center}
/* У згорнутому меню «Вийти» ховаємо: випадковий клік = вибита сесія */
body.nav-min .snav-exit{display:none!important}
/* Вихід має лишатись доступним і в згорнутому меню — ховаємо лише
   підпис, іконка стає квадратною кнопкою поруч із перемикачем. */
.snav-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.snav-exit{display:inline-flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14.5px;padding:6px 10px;border-radius:12px}
.snav-exit:hover{color:var(--nero)}
.snav-exit svg,.nav-col svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-col{width:38px;height:38px;flex-shrink:0;border:none;background:none;color:var(--text-muted)}
.nav-col:hover{border:none;background:var(--isabelline);color:var(--nero)}
.nav-col svg{transition:opacity .2s ease}
body.nav-min .nav-col svg{opacity:.55}
/* Жвавість інтерфейсу */
.space{transition:grid-template-columns .25s ease}
.tabpane.is-open{animation:paneIn .28s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Каскад карток при вході на вкладку ──────────────────────────────
   Плитки виринають знизу по черзі. Затримку рахує JS (--i), стеля —
   8 кроків: далі різниця вже не читається, а чекати набридає. */
.fp-stagger>[style*="--i"]{animation:cardUp .42s cubic-bezier(.22,.9,.3,1) backwards;
  animation-delay:calc(var(--i, 0) * 45ms)}
@keyframes cardUp{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
/* Керовані рухом і скролом елементи анімувати не треба: календарна
   сітка й тред чату «стрибали» б при кожному оновленні. */
.fp-stagger>.tg,.fp-stagger>.bigcal,.fp-stagger>.chat-wrap{animation:none}

@media (prefers-reduced-motion:reduce){
  .tabpane.is-open,.fp-stagger>*{animation:none}
}
.snav a{transition:background .15s ease,color .15s ease,transform .15s ease}
.snav a:hover{transform:translateX(2px)}
.emoji-btn:active{transform:scale(.9)}
.emoji-btn.picked{animation:pickPop .5s ease;border-color:var(--coral);background:rgba(255,118,77,.14)}
@keyframes pickPop{0%{transform:scale(1)}45%{transform:scale(1.4)}70%{transform:scale(.95)}100%{transform:scale(1)}}
[data-checkin-done]{animation:paneIn .35s ease}
.chip{transition:background .15s ease,border-color .15s ease,transform .12s ease}
.chip:active,.inf:active,.mood-opt:active,.tl-notes:active{transform:scale(.96)}
/* Мобільна адаптація */
@media (max-width:880px){
.convs-col{display:none}
.pay-row{grid-template-columns:1fr auto}
.site-top{padding:14px 20px}
.zone-bar{padding:8px 20px 12px;flex-wrap:wrap}
.zone-switch a{height:44px;padding:0 18px;font-size:14px}
.space{grid-template-columns:1fr;gap:0;padding:0 20px 32px}
.snav{display:none}
.mtabs{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 14px;margin:0 -20px;scrollbar-width:none;position:sticky;top:64px;z-index:110;background:linear-gradient(var(--bg) 80%,transparent)}
.mtabs::-webkit-scrollbar{display:none}
.mtabs button{flex-shrink:0;height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.mtabs button[aria-selected="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
.m-card{padding:20px}
.emoji-btn{width:52px;height:52px}
.hm{gap:4px}
.hm b{border-radius:7px}
.chat-wrap{grid-template-columns:1fr}
.convs{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:10px}
.convs .eyebrow{display:none}
.cv{flex-shrink:0;width:auto}
.cv small{display:none}
.sess{grid-template-columns:auto 1fr}
.sess-act{grid-column:1/-1}
.demo{left:10px;bottom:10px}
}
/* Панель фахівця — стилі поверх myspace/base.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
.fp{--font-body:'Inter',system-ui,-apple-system,sans-serif,'Noto Color Emoji';--font-display:'Unbounded',sans-serif,'Noto Color Emoji';--font-hand:'Caveat',cursive,'Noto Color Emoji'}
.fp .space{max-width:1360px}
.fp{padding-bottom:0}
/* ── Бенто-сітка й варіанти карток (з «Мого простору») ── */
.greet{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card,24px);padding:20px 24px;margin-bottom:14px}
.greet h1{font-weight:300;font-size:clamp(26px,3.4vw,34px)}
.greet .eyebrow{margin:0}
h2.sec{font-weight:300;font-size:22px;margin:34px 0 16px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sp2{grid-column:span 2}.sp3{grid-column:span 3}.sp4{grid-column:span 4}.sp6{grid-column:span 6}
.bento .m-card{padding:22px}
.card-coral{background:linear-gradient(135deg,#FF8B62,#FF764D 55%,#f0632f);border:none;color:#fff}
.card-coral .muted,.card-coral a{color:rgba(255,255,255,.85)}
.card-coral h3{color:rgba(255,255,255,.9)}
.card-green{background:var(--celadon);border:none}
.card-blue{background:var(--powder-blue);border:none}
.card-yellow{background:rgba(255,216,77,.4);border:none}
.card-dark{background:var(--nero);border:none;color:var(--isabelline)}
.card-dark .muted{color:rgba(247,239,236,.65)}
.card-dark h3{color:rgba(247,239,236,.8)}
.card-ghost{background:transparent;border:1.5px dashed var(--line-strong);color:var(--text-faint);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:14px;min-height:120px}
.bignum{font-family:var(--font-display);font-weight:300;font-size:30px;line-height:1.15;margin:2px 0 4px}
.sub{font-size:13px;opacity:.75}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:880px){.bento>*{grid-column:auto}.bento{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}h2.sec{margin-top:26px}.m-card{padding:20px}}
/* ── Topbar ── */
.fp-top{position:sticky;top:0;z-index:300;background:linear-gradient(var(--bg) 82%,rgba(247,239,236,0))}
.fp-top-in{max-width:1360px;margin:0 auto;padding:12px 32px 10px;display:flex;align-items:center;gap:12px}
.fp-top-in>.fp-icons{margin-left:auto}
.fp-brand{display:flex;align-items:center;gap:10px;min-width:0}
.fp-brand b{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.02em;color:var(--nero);white-space:nowrap}
.fp-brand span{font-size:12px;color:var(--text-muted);white-space:nowrap;border-left:1px solid var(--line-strong);padding-left:10px}
.fp-icons{display:flex;align-items:center;gap:8px;justify-content:flex-end;position:relative}
.fp-icons .icon-btn{width:42px;height:42px}
.fp-count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--coral);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.fp-ava{width:42px;height:42px;border-radius:50%;background:var(--powder-blue);color:var(--egyptian-blue);border:none;cursor:pointer;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.fp-ava:hover{outline:2px solid var(--line-strong);outline-offset:2px}
/* ── Спливні панелі ── */
.fp-pop{position:absolute;top:52px;right:0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(37,37,37,.18);display:none;z-index:420}
.fp-pop.is-open{display:block}
.fp-pop--menu{width:230px;padding:8px}
.fp-pop--menu .pm-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.fp-pop--menu .pm-head b{display:block;font-size:14px}
.fp-pop--menu .pm-head span{font-size:12px;color:var(--text-muted)}
.fp-pop--menu a,.fp-pop--menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:12px;padding:11px 12px;font-size:14px;color:var(--text);cursor:pointer}
.fp-pop--menu a:hover,.fp-pop--menu button:hover{background:var(--isabelline)}
.fp-pop--menu svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* Центр сповіщень */
.fp-ntf{width:400px;max-height:min(560px,72vh);display:none;flex-direction:column;overflow:hidden}
.fp-ntf.is-open{display:flex}
.ntf-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.ntf-head h4{font-size:15px;flex:1}
.ntf-head button{background:none;border:none;font-size:12.5px;color:var(--egyptian-blue);cursor:pointer;font-weight:500;padding:4px}
.ntf-head button:hover{color:var(--coral)}
.ntf-filters{display:flex;gap:6px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
.ntf-filters button{height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer}
.ntf-filters button[aria-pressed="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
.ntf-list{overflow-y:auto;padding:8px}
.ntf{display:flex;gap:12px;padding:12px;border-radius:14px;align-items:flex-start;position:relative;margin-bottom:6px}
.ntf:last-child{margin-bottom:0}
.ntf:hover{background:var(--isabelline)}
.ntf.is-unread{background:var(--isabelline-warm)}
.ntf.is-unread::after{content:'';position:absolute;top:16px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.ntf i{width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ntf i svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ntf .nt{min-width:0;flex:1}
.ntf .nt b{display:block;font-size:13.5px;font-weight:500;line-height:1.35}
.ntf .nt span{font-size:12px;color:var(--text-muted)}
.ntf time{font-size:11px;color:var(--text-faint);white-space:nowrap;margin-right:14px}
/* ── Сайдбар доповнення ── */
.fp .snav{background:#fff;border:1px solid var(--line);border-radius:var(--r-card,24px);padding:10px;display:flex;flex-direction:column;gap:4px}
.fp .snav a{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:14px;color:var(--text);font-size:15px;font-weight:500}
.fp .snav a:hover{background:var(--isabelline)}
.fp .snav a.is-active{background:var(--nero);color:var(--isabelline)}
.fp .snav a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fp .snav .badge{margin-left:auto}
.fp .snav{top:76px}
.fp .snav .zlbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:6px 16px 10px;font-weight:500}
body.nav-min .snav .zlbl{display:none}
.snav .soon{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--line);border-radius:99px;padding:2px 8px}
body.nav-min .snav .soon{display:none}
.fp .mtabs{top:60px}
/* ── Нижня навігація (мобільна) ── */
.fp-bnav{display:none}
.fp-sheet,.fp-sheet-bg{display:none}
@media (max-width:880px){
body.fp{padding-bottom:84px}
.fp-top-in{grid-template-columns:1fr auto;padding:10px 16px 8px;row-gap:8px}
.fp-brand span{display:none}
.fp-zone{grid-row:2;grid-column:1/-1;justify-self:center}
.fp-zone .zone-switch a{height:38px;padding:0 16px;font-size:13.5px}
.fp-icons .icon-btn[data-hide-mobile]{display:none}
.fp-ntf{position:fixed;top:64px;left:10px;right:10px;width:auto}
/* Чипи вкладок на мобільному прибрані: нижня навігація вже дає «Сьогодні
   / Чат / Календар / Клієнти», а «Меню» відкриває шторку з усіма
   розділами обох зон. Два однакові меню на 390px — це вкрадений екран. */
.fp .mtabs{display:none!important}
.fp-bnav{position:fixed;left:0;right:0;bottom:0;z-index:360;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
.fp-bnav a,.fp-bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-radius:12px;font-size:10.5px;font-weight:500;color:var(--text-muted);background:none;border:none;position:relative;cursor:pointer;font-family:inherit}
.fp-bnav .is-on{color:var(--nero)}
.fp-bnav svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fp-bnav .bdot{position:absolute;top:6px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:var(--coral)}
.fp-sheet-bg{position:fixed;inset:0;z-index:370;background:rgba(37,37,37,.45)}
.fp-sheet-bg.is-open{display:block}
.fp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:380;background:#fff;border-radius:24px 24px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
.fp-sheet.is-open{display:block}
.fp-sheet .zlbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin:14px 4px 8px;font-weight:500}
.fp-sheet a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-size:15px;font-weight:500;color:var(--text);min-height:44px}
.fp-sheet a:hover{background:var(--isabelline)}
.fp-sheet a.is-on{background:var(--nero);color:var(--isabelline)}
.fp-sheet svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
}
/* ── Модальні вікна ── */
.fpm{position:fixed;inset:0;z-index:500;background:rgba(37,37,37,.5);display:none;align-items:center;justify-content:center;padding:20px}
.fpm.is-open{display:flex}
.fpm-box{background:#fff;border-radius:24px;padding:28px;width:min(560px,100%);max-height:90vh;overflow-y:auto;position:relative;animation:paneIn .25s ease;scrollbar-width:none;-ms-overflow-style:none}
/* Системна смуга різала кут модалки й виглядала чужою */
.fpm-box::-webkit-scrollbar{width:0;height:0}
.fpm-box>h3{font-size:20px;font-weight:500;margin:0 24px 6px 0}
.fpm-box .sub{font-size:13.5px;color:var(--text-muted);margin:0 0 18px}
.fpm-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--text-muted)}
.fpm-x:hover{border-color:var(--nero);color:var(--nero)}
.fpm-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
.fpm-note{background:var(--powder-blue);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--egyptian-blue);margin-top:16px}
.fpm-warn{background:rgba(255,216,77,.4);border-radius:14px;padding:12px 16px;font-size:13.5px;margin-top:16px}
/* Міні-календар у модалках */
.mini-cal{display:grid;grid-template-columns:repeat(7,38px);grid-auto-rows:38px;gap:8px;justify-content:center;margin:8px 0 4px}
.mini-cal b{width:38px;height:38px;justify-self:center;border-radius:9px;background:rgba(37,37,37,.045);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:12.5px;color:rgba(37,37,37,.4);cursor:default}
.mini-cal b.av{cursor:pointer;background:#fff;border:1.5px solid var(--line);color:var(--text)}
.mini-cal b.av:hover{border-color:var(--nero)}
.mini-cal b.is-sel{background:var(--nero);border-color:var(--nero);color:var(--isabelline)}
.slots{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.slots button{height:38px;padding:0 15px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font-size:13.5px;font-weight:500;cursor:pointer}
.slots button:hover{border-color:var(--nero)}
.slots button[aria-pressed="true"]{background:var(--nero);color:var(--isabelline);border-color:var(--nero)}
/* ── Власна випадайка (див. fpSelect в app.js) ────────────────────
   Нативний список малює ОС, тож у панелі він виглядав чужим. Сам
   <select> лишається в DOM для подій і доступності, але прихований. */
.fpsel{position:relative;width:100%}
.fpsel>select{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;left:0;top:0}
.fpsel-btn{width:100%;height:48px;border:1.5px solid var(--line);border-radius:14px;padding:0 40px 0 16px;font-size:14.5px;font-family:inherit;background:var(--isabelline-warm);color:var(--text);cursor:pointer;text-align:left;display:flex;align-items:center;transition:border-color .14s ease;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23252525' stroke-width='1.8' stroke-linecap='round'><path d='M6 8l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.fpsel-btn:hover{border-color:var(--line-strong)}
.fpsel-btn:focus-visible{outline:2px solid var(--egyptian-blue);outline-offset:2px}
.fpsel-btn:disabled{opacity:.55;cursor:default}
.fpsel.is-open .fpsel-btn{border-color:var(--egyptian-blue)}
.fpsel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fpsel-lbl.is-ph{color:var(--text-faint)}
.fpsel-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 44px rgba(37,37,37,.16);padding:6px;max-height:260px;overflow-y:auto}
.fpsel.drop-up .fpsel-list{top:auto;bottom:calc(100% + 6px)}
.fpsel.is-open .fpsel-list{display:block;animation:fpselIn .14s ease}
@keyframes fpselIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Мобільний аркуш вибору. Причина: .fpsel-list лежить усередині .fpm-box
   з overflow-y:auto, тому на вузькому екрані його обрізало межами модала
   і селекти («Особливий день», час «з — до») здавались непрацюючими.
   position:fixed виносить список із прокрутного контейнера. */
@media (max-width:640px){
  .fpsel.fpsel-sheet.is-open .fpsel-list{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:min(62vh,440px);
    border-radius:22px 22px 0 0;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 48px rgba(37,37,37,.22);
    z-index:1002;
    animation:fpselUp .18s ease;
    -webkit-overflow-scrolling:touch;
  }
  /* Затемнення під аркушем — окремим ЕЛЕМЕНТОМ (.fpsel-scrim), не
     body::after. Псевдоелемент body створює власний контекст накладання,
     тож його z-index не порівнювався з z-index списку: затемнення лягало
     ПОВЕРХ аркуша і зʼїдало дотик — elementFromPoint у центрі списку
     повертав <body>, і список клієнтів у «Новому записі» неможливо було
     прокрутити (фідбек 08.09.2026). */
  body.fpsel-sheet-on{overflow:hidden}
  .fpsel.fpsel-sheet.is-open .fpsel-list{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
  .fpsel.fpsel-sheet.is-open .fpsel-opt{padding:14px 14px;font-size:15.5px}
  .fpsel.fpsel-sheet.is-open .fpsel-search{top:-10px;margin:-10px -10px 6px;padding:10px}
}
@keyframes fpselUp{from{transform:translateY(100%)}to{transform:none}}
/* Затемнення мусить лежати НИЖЧЕ модалки (.fpm має z-index:500 і створює
   власний контекст накладання, тому z-index списку всередині неї не
   конкурує з кореневим шаром). z-index:499 — під модалкою, але над
   рештою сторінки; аркуш лишається клікабельним. */
.fpsel-scrim{position:fixed;inset:0;background:rgba(37,37,37,.38);z-index:499;touch-action:none}
.fpsel-search{position:sticky;top:-6px;margin:-6px -6px 4px;padding:8px;background:#fff;border-bottom:1px solid var(--line);z-index:1}
.fpsel-search input{width:100%;height:38px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:13.5px;background:var(--isabelline-warm)}
.fpsel-search input:focus{outline:none;border-color:var(--egyptian-blue)}
.fpsel-opt{padding:10px 12px;border-radius:11px;font-size:14px;cursor:pointer;line-height:1.35}
.fpsel-opt:hover{background:var(--isabelline)}
.fpsel-opt[aria-selected="true"]{background:var(--isabelline);font-weight:600}
.fpsel-opt.is-dis{color:var(--text-faint);cursor:default}
.fpsel-opt.is-dis:hover{background:none}
.fpm .field select,.field select{width:100%;height:48px;border:1.5px solid var(--line);border-radius:14px;padding:0 40px 0 16px;font-size:14.5px;font-family:inherit;background:var(--isabelline-warm);color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23252525' stroke-width='1.8' stroke-linecap='round'><path d='M6 8l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.fpm .field select:focus,.field select:focus{outline:none;border-color:var(--egyptian-blue)}
.fpm .field label,.field label{font-weight:500}
/* ── Пігулки-вкладки зі слайд-індикатором ── */
.ptabs-wrap{overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.ptabs-wrap::-webkit-scrollbar{display:none}
.ptabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;position:relative}
.ptabs .ind{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--nero);transition:left .28s cubic-bezier(.5,0,.2,1),width .28s cubic-bezier(.5,0,.2,1)}
.ptabs button{position:relative;z-index:1;height:40px;padding:0 18px;border:none;background:none;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center;gap:7px}
.ptabs button[aria-selected="true"]{color:var(--isabelline)}
.ptabs button .badge{position:relative;z-index:1}
/* ── Картки, що ведуть кудись ── */
.m-card--hov{transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.m-card--hov:hover{transform:translateY(-3px) scale(1.008);box-shadow:0 14px 40px rgba(37,37,37,.09)}
a.m-card{display:block;color:inherit}
a.m-card:hover{color:inherit}
/* ── Рядки-таблиці ── */
.frow{display:grid;gap:6px 16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:10px;font-size:14px}
.frow .fn b{display:block;font-size:14.5px}
.frow .fn span{font-size:12.5px;color:var(--text-muted)}
.frow .sum{font-family:var(--font-display);font-weight:400;font-size:16px;white-space:nowrap}
.fhead{display:grid;gap:16px;padding:4px 18px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:500}
/* ── Статуси ── */
.st--plan{background:var(--powder-blue);color:var(--egyptian-blue)}
.st--warn{background:var(--tuscan-sun);color:var(--nero)}
.st--off{background:var(--isabelline);border:1px solid var(--line);color:var(--text-muted)}
.st--bad{background:rgba(232,90,48,.12);color:var(--coral-deep)}
/* ── Календар (місяць) ── */
.cal-dow{display:grid;grid-template-columns:repeat(7,38px);gap:8px;justify-content:center;font-size:11px;color:var(--text-faint);text-align:center;margin-bottom:2px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal>b{aspect-ratio:1;border-radius:12px;background:rgba(37,37,37,.045);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:500;font-size:13px;color:rgba(37,37,37,.6);cursor:pointer;border:1.5px solid transparent;position:relative}
.cal>b:hover{border-color:var(--line-strong)}
.cal>b.is-out{background:transparent;cursor:default;pointer-events:none}
.cal>b.is-today{outline:2px solid var(--coral);outline-offset:1px}
.cal>b.is-sel{border-color:var(--nero);background:#fff}
.cal .dts{display:flex;gap:3px;min-height:6px}
.cal .dts i{width:6px;height:6px;border-radius:50%;background:var(--egyptian-blue);display:inline-block}
.cal .dts i.c2{background:var(--coral)}
.cal .dts i.c3{background:var(--celadon)}
/* ── QR та смугасті заглушки ── */
.ph-stripes{background:repeating-linear-gradient(45deg,rgba(37,37,37,.05) 0 8px,rgba(37,37,37,0) 8px 16px);border:1.5px dashed var(--line-strong);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:ui-monospace,monospace;font-size:11px;color:var(--text-faint);padding:8px}
/* ── Повзунки ── */
input[type=range]{width:100%;accent-color:var(--coral);height:32px}
.calc-out{background:var(--nero);color:var(--isabelline);border-radius:18px;padding:18px 22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.calc-out b{font-family:var(--font-display);font-weight:400;font-size:30px}
.calc-out span{font-size:12.5px;color:rgba(247,239,236,.65)}
/* ── Воронка ── */
.funnel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.funnel .fstep{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;position:relative}
.funnel .fstep b{font-family:var(--font-display);font-weight:300;font-size:26px;display:block}
.funnel .fstep span{font-size:12.5px;color:var(--text-muted)}
.funnel .fstep i{display:block;height:7px;border-radius:99px;background:var(--powder-blue);margin-top:10px}
.funnel .fstep:nth-child(2) i{background:var(--celadon)}
.funnel .fstep:nth-child(3) i{background:var(--coral)}
@media (max-width:880px){.funnel{grid-template-columns:1fr}}
/* ── Чат фахівця ── */
.fp .chat-wrap{height:calc(100vh - 190px);min-height:520px}
/* Скрол живе всередині треду, а не на сторінці: інакше при довгій
   переписці шапка й список розмов їдуть угору разом із бульбашками. */
.fp .chat-wrap .thread{min-height:0;overflow:hidden}
.fp .chat-wrap .thread-body{overflow-y:auto;min-height:0}
.fp .chat-wrap .convs{min-height:0;overflow-y:auto}
.thread-head .btn{margin-left:auto}
/* Імʼя клієнта в шапці чату — клікабельне, відкриває картку */
.thread-who{display:flex;align-items:center;gap:10px;border:none;background:none;padding:6px 10px 6px 6px;margin:-6px 0 -6px -6px;border-radius:14px;font:inherit;color:inherit;text-align:left;min-width:0}
button.thread-who{cursor:pointer;transition:background .14s ease}
button.thread-who:hover{background:var(--isabelline)}
.thread-who-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.thread-back{display:none}
.attach-pop{position:absolute;bottom:64px;left:12px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(37,37,37,.16);padding:14px 16px;width:min(320px,calc(100vw - 40px));display:none;z-index:50}
.attach-pop.is-open{display:block}
.attach-pop h5{font-family:var(--font-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 10px;font-weight:600}
.drop-zone{border:1.5px dashed var(--line-strong);border-radius:14px;padding:16px;text-align:center;font-size:13px;color:var(--text-muted);margin-bottom:12px}
.thread-foot{position:relative}
@media (max-width:880px){
.fp .chat-wrap{display:block;min-height:0}
.fp .chat-wrap.convs-min{display:block}
.fp .convs{flex-direction:column;border-right:none;border-bottom:none;padding:6px 4px;background:transparent}
.fp .cv{width:100%}
.fp .cv small{display:block}
.fp .convs-head .eyebrow{display:block}
.fp .thread{display:none}
body.chat-full .thread{display:flex;position:fixed;inset:0;z-index:400;background:var(--isabelline)}
/* Повноекранний чат перекриває все. Дві поправки з мобільного аудиту 22.08:
   1) tour-lift піднімає .fp-top до z-index:1000 і, якщо клас tour-on завис
      на body, шапка сторінки малюється ПОВЕРХ чату, ховаючи імʼя клієнта
      і кнопку «назад». Тут повертаємо її під оверлей беззастережно.
   2) тло скролилось під відкритим чатом — на iOS гумовий скрол забирав
      жест у стрічки повідомлень. */
body.chat-full .fp-top,
body.chat-full.tour-on .fp-top.tour-lift{z-index:300}
body.chat-full{overflow:hidden}
body.chat-full .thread-head{padding-top:calc(12px + env(safe-area-inset-top))}
body.chat-full .thread-body{overflow-y:auto}
body.chat-full .thread-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
body.chat-full .fp-bnav{display:none}
.thread-back{display:inline-flex;width:38px;height:38px;border-radius:50%;border:none;background:none;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-left:-8px}
.thread-back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
}
/* ── Стани підписки ── */
.sub-state{border-radius:18px;padding:16px 18px;font-size:13.5px;border:1px solid var(--line);background:#fff}
.sub-state .sl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:8px;display:block;color:var(--text-faint)}
.sub-state b{display:block;font-size:14.5px;margin-bottom:3px}
.sub-state span{color:var(--text-muted);font-size:13px}
.sub-state .btn{max-width:100%;white-space:normal;height:auto;min-height:38px;padding:9px 16px;line-height:1.2;text-align:center}
/* ── Модал першого входу ── */
.fpm--welcome .fpm-box{width:min(680px,100%)}
.terms-scroll{height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:13px;line-height:1.6;color:var(--text-muted);background:var(--isabelline-warm);margin:16px 0}
.terms-scroll h5{font-family:var(--font-body);font-size:12.5px;margin:14px 0 4px;color:var(--text)}
.terms-scroll h5:first-child{margin-top:0}
.terms-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer}
.terms-check input{width:22px;height:22px;accent-color:var(--coral);flex-shrink:0;margin-top:1px}
.wl-bullets{display:grid;gap:10px;margin:18px 0 0}
.wl-bullets div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.wl-bullets i{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-style:normal}
/* ── Демо-панель, події ── */
.evt{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.evt:first-of-type{border-top:none}
.evt i{width:32px;height:32px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.evt i svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.evt time{margin-left:auto;font-size:11.5px;color:var(--text-faint);white-space:nowrap}
[data-ptab-pane].is-open{animation:paneIn .28s ease}
[data-ptab-pane][hidden],[data-seg-pane][hidden]{display:none!important}
/* Токени доступності руху */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.fp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--nero);color:var(--isabelline);padding:13px 22px;border-radius:99px;font-size:14px;font-weight:500;box-shadow:0 12px 32px rgba(37,37,37,.25);z-index:600;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.fp-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:880px){.fp-toast{bottom:96px}}

/* ══ Фікси й доповнення реалізації (поверх дизайну) ══════════════════ */
/* Вирівнювання таблиці Фінансів: шапка і рядки — ОДНАКОВІ треки */
@media (max-width:880px){.pay-tbl .frow{grid-template-columns:minmax(0,1fr) auto}.pay-tbl .fhead{display:none}}
/* Сітки в картках не розпирає контентом */
.grid2>*{min-width:0}
.bento>*{min-width:0}
.frow>*,.rrow>*{min-width:0}
/* Завантаження вкладки */
.fp-skel{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14px;padding:26px 8px}
.fp-skel i{display:block;position:relative;flex:0 0 22px;width:22px;height:22px}
.fp-skel i::before,.fp-skel i::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--coral);opacity:.55;animation:bounceFade 1.9s infinite ease-in-out}
.fp-skel i::after{background:var(--egyptian-blue);animation-delay:-.95s}
@keyframes bounceFade{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .fp-skel i::before{animation:none;transform:scale(.8)}
  .fp-skel i::after{animation:none;transform:scale(.5)}
}
/* Порожні дані */
.fp-empty{border:1.5px dashed var(--line-strong);border-radius:18px;padding:26px 20px;text-align:center;color:var(--text-muted);font-size:14px;margin:8px 0}
/* Помилка завантаження */
.fp-err{background:rgba(232,90,48,.08);border:1px solid rgba(232,90,48,.25);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--coral-deep)}
/* Тач-цілі */
@media (max-width:880px){.icon-btn,.btn--sm{min-height:40px}.hint-x,.fpm-x{min-width:40px;min-height:40px}}
/* Демо-панель макета в проді не існує */
.demo{display:none!important}
/* Аватар-зображення */
.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Аватарка в сайдбарі — квадрат зі скругленням під square-vertical файл */
.o-user .av{border-radius:14px;overflow:hidden}
/* Textarea автозростання в чаті */
.thread-foot textarea{flex:1;min-width:0;min-height:44px;max-height:160px;border:1.5px solid var(--line);border-radius:14px;padding:11px 16px;background:var(--isabelline-warm);font-size:14.5px;resize:none;font-family:inherit;line-height:1.5}
.thread-foot textarea:focus{outline:none;border-color:var(--egyptian-blue)}
/* Emoji-only повідомлення */
.chat-msg.is-emoji{background:none!important;border:none!important;box-shadow:none!important;font-size:38px;padding:2px 6px}
/* Клікабельні сповіщення */
.ntf{cursor:pointer}
/* Скрол довгих списків у попапі сповіщень */
.ntf-list{max-height:420px}
/* Виписка: прихований iframe друку */
.print-frame{position:fixed;width:0;height:0;border:0;visibility:hidden}

/* ══ Guard: hidden завжди перемагає display-класи ══ */
[hidden]{display:none!important}

/* ══ Стилі екрана «Сьогодні» (з макета) ══ */
.sched{display:flex;flex-direction:column}
.sched .sr{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;width:100%;text-align:left;border-left:none;border-right:none;border-bottom:none;background:none;font-family:inherit;cursor:pointer;color:inherit;border-radius:10px;padding-left:8px;padding-right:8px;margin:0 -8px}
.sched .sr:first-of-type{border-top:none;padding-top:10px}
.sched .sr b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sched .sr .who{min-width:0;flex:1}
.sched .sr .who i{font-style:normal;display:block;font-size:11.5px;color:var(--text-muted)}
.sched .sr.is-done{opacity:.45}
.sched .sr.is-now b{color:var(--coral)}
.sched .sr:hover{background:var(--isabelline-warm)}
.sched .sr.is-sel{background:var(--isabelline-warm);box-shadow:inset 3px 0 0 var(--coral)}
.reason-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 15px;margin-top:16px;font-size:13.5px;line-height:1.5}
.reason-box .rl{display:flex;gap:6px;align-items:center;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(247,239,236,.55);margin-bottom:6px}
.wk{display:flex;gap:0;justify-content:space-between}
.wk div b{font-family:var(--font-display);font-weight:300;font-size:26px;display:block}
.wk div span{font-size:11.5px;color:var(--text-muted)}
.sub-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.chatp{padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.chatp:first-of-type{border-top:none;padding-top:0}
.chatp b{font-size:13.5px}
.chatp p{margin:2px 0 0;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* GCal-банер: іконка завжди фіксована */
.gc-banner svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Мобайл: сайдбар точно прихований (fp-стилі не мають його воскрешати) */
@media (max-width:880px){.fp .snav{display:none!important}}

/* ── Мобільний чат: жорстко в межах екрана ────────────────────────── */
@media (max-width:880px){
.fp .chat-wrap{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%}
.fp .convs{width:100%;max-width:100%;box-sizing:border-box}
.fp .cv{max-width:100%}
body.chat-full .thread{width:100%;max-width:100vw;overflow-x:hidden}
body.chat-full .thread-body{max-width:100%;padding:14px 12px}
body.chat-full .thread-body .chat-msg{max-width:82%}
body.chat-full .thread-foot{width:100%;box-sizing:border-box}
#chat-card{max-width:100%;overflow-x:hidden}
}

/* ── Фінанси: рядок сесії не злипається ───────────────────────────── */
.pay-tbl .frow .fn{min-width:0}
.pay-tbl .frow .fn b,.pay-tbl .frow .fn span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-tbl .frow .sum{white-space:nowrap;text-align:right}
.pay-tbl .frow .dest{white-space:nowrap}
@media (max-width:1200px){
.pay-tbl .fhead{display:none}
.pay-tbl .frow{grid-template-columns:52px minmax(0,1fr) auto;row-gap:6px}
.pay-tbl .frow .st{grid-column:2;justify-self:start}
.pay-tbl .frow .dest{grid-column:3;justify-self:end}
}

/* ── Мобільні вкладки не мають розпирати сторінку ─────────────────── */
@media (max-width:880px){
.fp .space{min-width:0;max-width:100%}
.fp .mtabs{width:100%;max-width:100vw;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fp main{min-width:0;max-width:100%}
.fp .tabpane{min-width:0;max-width:100%}
}

/* ── Дрібні хвости мобільного чату ────────────────────────────────── */
@media (max-width:880px){
body.chat-full .thread-foot textarea{min-height:44px;padding:11px 14px;font-size:16px} /* <16px = iOS зумить сторінку при фокусі */
body.chat-full .thread-head{gap:8px}
body.chat-full .thread-head .btn{padding:0 12px;font-size:12px;height:34px;flex-shrink:0}
body.chat-full .thread-head>span:not(.av){min-width:0;overflow:hidden}
body.chat-full .thread-head .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Роль у налаштуваннях: не ріже текст, а переносить */
.field input[readonly]{text-overflow:ellipsis}
/* Slack-логотип (viewBox 32) — рівний розмір з рештою іконок топбара */
.fp-icons a.icon-btn svg[viewBox="0 0 32 32"]{width:19px;height:19px;stroke:none;fill:currentColor}
.fp-sheet svg[viewBox="0 0 32 32"],.snav svg[viewBox="0 0 32 32"]{stroke:none;fill:currentColor}

/* ══ Анімації як у клієнтському кабінеті (/account) ══════════════════
   Джерело: mentality-next/app/newaccount/space-css.ts — слайд-індикатор
   перемикача зон, fade-up вкладок, hover-ліфт бенто. */

/* 1. Перемикач зон зі слайд-індикатором */
.fp .zone-switch{position:relative}
.fp .zs-ind{position:absolute;top:5px;bottom:5px;border-radius:var(--r-pill);background:var(--nero);z-index:0;
  transition:left .38s cubic-bezier(.3,.9,.25,1.08),width .38s cubic-bezier(.3,.9,.25,1.08)}
.fp .zone-switch a{position:relative;z-index:1;transition:color .28s ease}
.fp .zone-switch.zs-ready a.is-on{background:transparent}

/* 2. Поява вмісту вкладки */
.fp .tabpane.is-open{animation:fpTab .3s cubic-bezier(.25,.8,.3,1)}
@keyframes fpTab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 3. Бенто-картки: ліфт на hover (ghost — без) */
.fp .bento>.m-card{transition:transform .25s cubic-bezier(.3,.7,.3,1),box-shadow .25s ease,border-color .2s ease}
@media (hover:hover){
.fp .bento>.m-card:hover{transform:translateY(-3px) scale(1.008);box-shadow:0 14px 34px rgba(37,37,37,.10)}
.fp .bento>.card-ghost:hover{transform:none;box-shadow:none}
}

/* 4. Дрібна моторика: кнопки, чипи, пункти меню */
.fp .btn{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.fp .btn:hover{transform:translateY(-1px)}
.fp .btn:active{transform:translateY(0) scale(.98)}
.fp .chip,.fp .segc button,.fp .slots button{transition:background .15s ease,border-color .15s ease,transform .12s ease}
.fp .chip:active,.fp .segc button:active,.fp .slots button:active{transform:scale(.96)}
.fp .snav a{transition:background .15s ease,color .15s ease,transform .15s ease}
.fp .snav a:hover{transform:translateX(2px)}
.fp .cl-card{transition:transform .2s cubic-bezier(.3,.7,.3,1),box-shadow .2s ease}
@media (hover:hover){.fp .cl-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,37,37,.09)}}

/* 5. Модалки й попапи — м'яка поява */
.fp .fpm.is-open .fpm-box{animation:fpPop .26s cubic-bezier(.25,.8,.3,1)}
@keyframes fpPop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.fp .fp-pop.is-open{animation:fpPop .2s ease}

/* 6. Повага до налаштувань доступності */
@media (prefers-reduced-motion:reduce){
.fp .zs-ind,.fp .bento>.m-card,.fp .cl-card,.fp .btn,.fp .snav a{transition:none!important}
.fp .tabpane.is-open,.fp .fpm.is-open .fpm-box,.fp .fp-pop.is-open{animation:none!important}
}

/* ── Банер нагадування про умови (після «Пізніше») ─────────────────── */
.fp-terms-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:480;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:10px 12px 10px 22px;box-shadow:0 16px 40px rgba(37,37,37,.16);
  font-size:13.5px;color:var(--text-muted);max-width:calc(100vw - 32px);
  animation:fpPop .3s cubic-bezier(.25,.8,.3,1)}
.fp-terms-banner span{min-width:0}
@media (max-width:880px){
.fp-terms-banner{bottom:96px;border-radius:20px;padding:12px 16px;text-align:center;left:16px;right:16px;transform:none;max-width:none}
}

/* Тап-цілі на мобільному: аудит 22.08 знайшов «?» 18×18 і чекбокс умов
   22×22 — пальцем не влучити. Збільшуємо саме область натискання, не
   роздуваючи макет (для «?» — псевдоелемент, для чекбокса — сам розмір). */
@media (hover:none){
  /* Футер модалки липне до низу скрол-області: на телефоні довга форма
     («Новий запис» після вибору клієнта й послуги) ховала «Створити
     запис» за згином, тоді як «Скасувати» лишалась на видноті —
     небезпечна дія видима, потрібна ні (аудит 22.08). sticky працює,
     бо скролиться сам .fpm-box. */
  .fpm-foot{position:sticky;bottom:-28px;margin-bottom:-28px;
    padding:14px 0 28px;background:linear-gradient(to top,#fff 72%,rgba(255,255,255,0));z-index:3}
  .fp a.hlp{position:relative}
  .fp a.hlp::after{content:"";position:absolute;top:50%;left:50%;
    width:40px;height:40px;transform:translate(-50%,-50%)}
  .fp .terms-agree input[type=checkbox],
  .fp #fp-welcome input[type=checkbox]{width:24px;height:24px;
    min-width:24px;min-height:24px;padding:8px;box-sizing:content-box;
    margin:-8px 4px -8px -8px}
  .fp a.grw-page{min-width:40px;min-height:40px;display:inline-flex;
    align-items:center;justify-content:center}
  .fp button[data-back]{min-width:44px;min-height:44px}
}

/* ── Іконки незавершених підключень (шапка, зліва від дзвіночка) ───
   Живуть рівно доти, доки річ не підключено. Кораловий акцент і крапка
   — щоб око чіплялось, але без тривоги: нічого не зламалось, просто
   ще не доналаштовано. Клік веде у вкладку й підсвічує ціль. */
.fp .fp-setup-ic{position:relative;color:var(--coral-deep);
  border-color:rgba(232,90,48,.32);background:rgba(255,118,77,.07)}
.fp .fp-setup-ic:hover{background:rgba(255,118,77,.14);border-color:rgba(232,90,48,.5)}
.fp .fp-setup-mark{position:absolute;top:5px;right:5px;width:9px;height:9px;
  border-radius:50%;background:var(--coral);border:2px solid #fff}
@media (prefers-reduced-motion:no-preference){
.fp .fp-setup-ic .fp-setup-mark{animation:setupPing 2.6s ease-in-out infinite}
@keyframes setupPing{0%,72%,100%{transform:scale(1);opacity:1}82%{transform:scale(1.32);opacity:.75}}
}

/* ── Бренд у топбарі: лого + MENTALITY (без підпису) ──────────────── */
.fp .fp-brand{gap:11px;text-decoration:none;color:inherit;border-radius:12px;padding:2px 6px 2px 2px;transition:opacity .15s ease}
.fp .fp-brand:hover{opacity:.75;color:inherit}
/* ── Кнопка «На сайт» ────────────────────────────────────────────────
   Як у кабінеті клієнтки: логотип завжди, підпис виїжджає при наведенні.
   На телефоні ховаємо — там для повернення є нижнє меню. */
.fp .fp-home{display:inline-flex;align-items:center;height:46px;padding:0 9px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);justify-self:start;width:fit-content;overflow:hidden;text-decoration:none;
  transition:border-color .2s ease,box-shadow .25s ease}
.fp .fp-home:hover,.fp .fp-home:focus-visible{border-color:var(--line-strong);box-shadow:0 6px 18px rgba(37,37,37,.08)}
.fp .fp-home img{display:block;flex-shrink:0;width:26px;height:26px;object-fit:contain}
.fp .fp-home-lbl{max-width:0;opacity:0;margin-left:0;white-space:nowrap;overflow:hidden;font-size:13.5px;
  font-weight:500;color:var(--text);
  transition:max-width .35s cubic-bezier(.3,.8,.3,1),opacity .25s ease .05s,margin-left .35s cubic-bezier(.3,.8,.3,1)}
.fp .fp-home:hover .fp-home-lbl,.fp .fp-home:focus-visible .fp-home-lbl{max-width:110px;opacity:1;margin-left:9px}
@media (hover:none){.fp .fp-home-lbl{max-width:110px;opacity:1;margin-left:9px}}
@media (max-width:880px){.fp .fp-home{display:none!important}}
.fp .fp-brand img{width:34px;height:34px;object-fit:contain;flex-shrink:0;display:block}
.fp .fp-brand b{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.03em;color:var(--nero);white-space:nowrap}
@media (max-width:880px){
.fp .fp-brand img{width:30px;height:30px}
.fp .fp-brand b{font-size:15.5px}
}
/* Шапка таблиці фінансів — той самий шаблон колонок, що й рядки */
/* Поле чату: плейсхолдер має вміщатись */
@media (max-width:880px){.fp .thread-foot textarea{font-size:16px}} /* <16px = iOS зумить сторінку при фокусі */

/* Фінанси: ФІКСОВАНІ треки — auto рахується окремо для .fhead і .frow,
   через що шапка «їхала» на 58px відносно рядків. */
.fp .pay-tbl{--pay-cols:52px minmax(120px,1fr) 92px 104px 92px 36px}
.fp .pay-tbl .fhead,.fp .pay-tbl .frow{grid-template-columns:var(--pay-cols);gap:8px 12px}
.fp .pay-tbl .fhead>span:nth-child(3),.fp .pay-tbl .frow>.sum{text-align:right}
.fp .pay-tbl .fhead>span:nth-child(4),.fp .pay-tbl .fhead>span:nth-child(5){text-align:center}
.fp .pay-tbl .frow>.st{justify-self:center}
.fp .pay-tbl .frow>.dest{text-align:center}
@media (max-width:1200px){
.fp .pay-tbl .fhead{display:none}
.fp .pay-tbl .frow{grid-template-columns:52px minmax(0,1fr) auto;row-gap:6px}
.fp .pay-tbl .frow>.st{grid-column:2;justify-self:start}
.fp .pay-tbl .frow>.dest{grid-column:3;justify-self:end;text-align:right}
}

/* ── Аватарка в топбарі: кругле фото на всю кнопку. Розміри — примусово:
   інакше каскад стискав img до 30×40 і навколо світився незаповнений круг ── */
.fp .fp-ava{overflow:hidden;padding:0} /* дефолтний padding кнопки (1px 6px) стискав фото до 30×40 */
.fp .fp-ava img{width:100%!important;height:100%!important;object-fit:cover;
  border-radius:50%!important;object-position:center top;display:block}
.fp .fp-pop--menu .pm-head{display:flex;gap:12px;align-items:center}

/* ── Попапи й модалки: свій тонкий скрол замість системного ─────────── */
.fp .fpm-box,.fp .ntf-list,.fp .terms-scroll,.fp .fp-pop{
  scrollbar-width:thin;scrollbar-color:rgba(37,37,37,.18) transparent}
/* Вкладені скрол-блоки модалок (графіки тестів, довгі списки) задають
   overflow інлайново — системний скролбар ховаємо для всіх одразу */
.fp .fpm-box div{scrollbar-width:none;-ms-overflow-style:none}
.fp .fpm-box div::-webkit-scrollbar{width:0;height:0}
.fp .fpm-box::-webkit-scrollbar,.fp .ntf-list::-webkit-scrollbar,
.fp .terms-scroll::-webkit-scrollbar,.fp .fp-pop::-webkit-scrollbar{width:6px;height:6px}
.fp .fpm-box::-webkit-scrollbar-track,.fp .ntf-list::-webkit-scrollbar-track,
.fp .terms-scroll::-webkit-scrollbar-track,.fp .fp-pop::-webkit-scrollbar-track{background:transparent}
.fp .fpm-box::-webkit-scrollbar-thumb,.fp .ntf-list::-webkit-scrollbar-thumb,
.fp .terms-scroll::-webkit-scrollbar-thumb,.fp .fp-pop::-webkit-scrollbar-thumb{
  background:rgba(37,37,37,.18);border-radius:99px}
.fp .fpm-box::-webkit-scrollbar-thumb:hover,.fp .ntf-list::-webkit-scrollbar-thumb:hover,
.fp .terms-scroll::-webkit-scrollbar-thumb:hover,.fp .fp-pop::-webkit-scrollbar-thumb:hover{
  background:rgba(37,37,37,.32)}
/* Кнопка ✕ не має ховатись під смугою скролу */
.fp .fpm-box{padding-right:30px}
.fp .fpm-x{right:14px}

/* Банер протермінованої сесії. Показується поверх усього: якщо токен
   помер, будь-яка дія на сторінці все одно провалиться, тож ховати
   повідомлення за контентом немає сенсу (аудит 22.08). */
.fp-session-gone{position:fixed;inset:0;z-index:9000;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(37,37,37,.55);backdrop-filter:blur(3px)}
.fp-session-gone>div{background:var(--isabelline,#fff);border-radius:24px;
  padding:28px 30px;max-width:420px;text-align:center;
  box-shadow:0 18px 50px rgba(37,37,37,.2)}
.fp-session-gone b{font-size:18px;font-weight:500;display:block;margin-bottom:8px}
.fp-session-gone p{margin:0 0 18px;font-size:14px;line-height:1.6;
  color:rgba(37,37,37,.7)}

/* ── Підписка: перемикач періоду і квитанція (макет Claude Design 22.08) ── */
.bill-seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px;gap:2px}
.bill-seg button{border:none;background:none;height:36px;padding:0 16px;border-radius:99px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--text-muted)}
.bill-seg button[aria-pressed="true"]{background:var(--nero);color:var(--isabelline)}
.inv-line .cr{color:var(--dark-spring-green)}
.sub-perks{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.sub-perks li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:rgba(37,37,37,.78)}
.sub-perks li::before{content:"✓";flex:0 0 18px;height:18px;border-radius:50%;background:var(--celadon);color:var(--dark-spring-green);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.m-card .sl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(37,37,37,.55)}

/* Статус активації профілю (26.08) */
.fp .fp-actv-chip{height:34px;padding:0 14px;border-radius:99px;border:1.5px solid var(--coral-deep,#e2531f);background:#fff;color:var(--coral-deep,#e2531f);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.fp .fp-actv-chip:hover{background:#fff4ef}
.fp .fp-actv-chip.warn{border-color:#8a6d3b;color:#8a6d3b}
.fp .fp-actv-chip.warn:hover{background:#faf6ee}
.fp .actv-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.fp .actv-step:first-of-type{border-top:none}
.fp .actv-step .tick{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);color:transparent;font-size:13px}
.fp .actv-step.done .tick{background:var(--dark-spring-green,#1D703E);border-color:var(--dark-spring-green,#1D703E);color:#fff}
.fp .actv-step b{font-size:14.5px;display:block}
.fp .actv-step p{margin:2px 0 0;font-size:13px;color:var(--text-muted)}
.fp .actv-step .go{margin-left:auto;flex-shrink:0}
@media(max-width:760px){.fp .fp-actv-chip{padding:0 10px;font-size:11.5px}}

/* ══════════ Вкладка «База знань» (tabs/kb.js, дизайн бз-панель.html) ══════════ */
.kbx{position:relative}
.kbx-i{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Біла картка-оболонка — як .pshell у макеті бз-панель.html */
.kbx-shell{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 32px 34px}
.kbx-phead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kbx-title{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0;letter-spacing:-.01em}
.kbx-newbtn{margin-left:auto}
.kbx-newbtn .kbx-i{width:15px;height:15px}
.kbx-tools{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.kbx-srch{display:flex;gap:10px;align-items:center;background:var(--isabelline);border-radius:999px;padding:11px 16px;font-size:13.5px;color:var(--text-muted);flex:1;min-width:220px}
.kbx-srch input{border:0;background:none;outline:none;flex:1;font-size:13.5px;color:var(--nero);min-width:0}
.kbx-srch input::placeholder{color:var(--text-muted)}
.kbx-srch .kbx-i{width:17px;height:17px}
.kbx-srch--sm{margin-bottom:12px;flex:none}
/* Фільтр автора — така сама пігулка, як інші чипи, з випадаючим меню
   (нативний select виглядав чужим: системний шрифт і подвійна стрілка). */
.kbx-filters{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.kbx-pill{position:relative;display:inline-flex}
.kbx-chip--sel{max-width:230px;overflow:hidden;white-space:nowrap}
.kbx-chip--sel .kbx-i{width:13px;height:13px;margin-left:2px;opacity:.6}
.kbx-chip--sel.on .kbx-i{opacity:1}
.kbx-authmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  min-width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 40px rgba(37,37,37,.14);padding:8px;display:flex;flex-direction:column;gap:2px}
.kbx-authmenu button{text-align:left;border:0;background:none;font-family:inherit;
  font-size:13.5px;color:var(--nero);padding:9px 12px;border-radius:10px;cursor:pointer;
  white-space:nowrap}
.kbx-authmenu button:hover{background:var(--isabelline)}
.kbx-authmenu button.on{background:var(--isabelline);font-weight:600}


.kbx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.kbx-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--isabelline);color:var(--nero);border:1px solid transparent;cursor:pointer}
.kbx-chip.on{background:var(--nero);color:#fff}
.kbx-chip--hw{border-color:var(--line);background:#fff}
.kbx-chip--hw.on{background:var(--nero);color:#fff;border-color:var(--nero)}
.kbx-chip .kbx-i{width:14px;height:14px}
.kbx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kbx-card{border:1px solid var(--line);border-radius:18px;padding:17px 18px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s;text-align:left;font-family:inherit;display:block;width:100%}
.kbx-card:hover{border-color:var(--nero);box-shadow:0 8px 22px rgba(37,37,37,.08)}
.kbx-krow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kbx-ty{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.kbx-ty .kbx-i{width:14px;height:14px}
.kbx-ty--a{color:var(--egyptian-blue)}
.kbx-ty--h{color:var(--coral)}
.kbx-card h4{margin:0 0 6px;font-size:14.5px;font-weight:600;line-height:1.35;font-family:var(--font-body);letter-spacing:0}
.kbx-card p{margin:0;font-size:12.5px;color:var(--text-muted)}
.kbx-pl{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap}
.kbx-pl .kbx-i{width:12px;height:12px;stroke-width:2}
.kbx-pl--ver{background:rgba(186,207,240,.55);color:var(--egyptian-blue)}
.kbx-pl--rev{background:rgba(255,216,77,.32);color:#6b5410}
.kbx-pl--nv{border:1px solid var(--line);color:var(--text-muted);background:#fff}
.kbx-pl--new{background:var(--isabelline);color:var(--text-muted)}
.kbx-pl--ok{background:rgba(171,214,183,.4);color:var(--dark-spring-green)}
.kbx-pl--rej{border:1px solid var(--line);color:var(--text-muted);background:#fff}
.kbx-skl{border:1px solid var(--line);border-radius:18px;padding:17px 18px;background:#fff;display:flex;flex-direction:column;gap:9px}
.kbx-sk{background:linear-gradient(90deg,var(--isabelline) 25%,#f2e8e2 50%,var(--isabelline) 75%);background-size:400% 100%;animation:kbxsh 1.4s infinite;border-radius:7px;display:block}
@keyframes kbxsh{0%{background-position:100% 0}100%{background-position:0 0}}
.kbx-empty{text-align:center;padding:48px 30px;max-width:420px;margin:0 auto}
.kbx-evg{width:84px;height:84px;border-radius:50%;background:rgba(186,207,240,.55);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--egyptian-blue)}
.kbx-evg .kbx-i{width:34px;height:34px;stroke-width:1.6}
.kbx-evg--c{background:rgba(255,118,77,.1);color:var(--coral)}
.kbx-empty h5{font-family:var(--font-display);font-weight:400;font-size:16px;margin:0 0 8px}
.kbx-empty p{font-size:13.5px;color:var(--text-muted);margin:0 0 18px;line-height:1.6}
.kbx-mut{font-size:13px;color:var(--text-muted)}
/* Шторка превʼю */
/* Шар модалок: нижче .fpm(500), але ВИЩЕ липкого топбара(300), мобільної
   нижньої навігації(360) і шторки меню(380) — інакше хрестик і кнопка
   «Надіслати» ховаються під ними (аудит 27.08). */
.kbx-dim{position:fixed;inset:0;background:rgba(37,37,37,.3);z-index:420}
.kbx-drawer{position:fixed;top:10px;right:10px;bottom:10px;width:448px;max-width:calc(100vw - 20px);background:#fff;border-radius:18px;box-shadow:-24px 0 48px rgba(37,37,37,.16);padding:26px 28px;display:flex;flex-direction:column;z-index:421;overflow-y:auto}
body.kbx-lock{overflow:hidden}
.kbx-dx{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer}
.kbx-dx .kbx-i{width:15px;height:15px}
.kbx-dey{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 10px}
.kbx-drawer h4{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.25;margin:0 0 12px;padding-right:30px}
.kbx-dh2{font-size:18px !important;padding-right:0 !important}
.kbx-dmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.kbx-fmeta{font-size:12px;color:var(--text-muted)}
.kbx-dbody{flex:1;position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:16px;min-height:80px}
.kbx-dbody p{margin:0 0 12px;font-size:13.5px;line-height:1.65;color:var(--nero)}
.kbx-fade{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,#fff)}
.kbx-dfoot{display:flex;flex-direction:column;gap:9px;padding-top:16px}
.kbx-dfoot--auto{margin-top:auto}
.kbx-w{width:100%}
.kbx-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;margin-bottom:14px;border:0;background:none;padding:0;font-family:inherit}
.kbx-back .kbx-i{width:15px;height:15px}
.kbx-mref{background:var(--isabelline);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.kbx-mref b{display:block;font-size:13px}
.kbx-mref span{font-size:11.5px;color:var(--text-muted)}
.kbx-clist{max-height:230px;overflow-y:auto;margin-bottom:4px}
.kbx-crow{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;margin-bottom:8px;background:#fff;width:100%;font-family:inherit;text-align:left}
.kbx-crow.on{border-color:var(--egyptian-blue);background:rgba(45,55,148,.09)}
.kbx-crow b{font-size:13.5px;font-weight:500;flex:1}
.kbx-crow .kbx-i{color:var(--egyptian-blue);width:16px;height:16px}
.kbx-cav{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:#fff}
/* Форми */
.kbx-flb{display:block;font-size:12.5px;font-weight:600;margin:16px 0 7px}
.kbx-flb i{font-style:normal;font-weight:400;color:var(--text-faint)}
.kbx-fin{width:100%;height:46px;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;font-size:14px;background:#fff;font-family:inherit;color:var(--nero)}
.kbx-fin::placeholder{color:var(--text-faint)}
.kbx-fta{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;background:#fff;font-family:inherit;min-height:64px;resize:none;color:var(--nero)}
.kbx-fta::placeholder{color:var(--text-faint)}
.kbx-explain{background:var(--isabelline);border-radius:16px;padding:14px 18px;font-size:13px;color:var(--text-muted);line-height:1.6;max-width:660px;margin-bottom:20px}
.kbx-prow{display:flex;align-items:center;gap:16px;padding:16px 2px;border-top:1px solid var(--line)}
.kbx-prow:first-of-type,.kbx-explain+.kbx-prow{border-top:0}
.kbx-pc{flex:1;min-width:0}
.kbx-pc b{display:block;font-size:14px}
.kbx-pc span{font-size:12px;color:var(--text-muted)}
.kbx-reason{display:block;font-size:12px;color:var(--text-muted)}
.kbx-lnk{font-size:12.5px;font-weight:500;flex:none}
.kbx-fh{font-family:var(--font-display);font-weight:400;font-size:21px;margin:0 0 18px}
.kbx-formw{max-width:660px}
.kbx-edbar{display:flex;gap:4px;border:1.5px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;padding:8px 10px;background:var(--isabelline)}
.kbx-edbar button{width:32px;height:32px;border:0;background:none;border-radius:8px;font-size:13px;font-family:inherit;color:var(--text-muted);cursor:pointer;font-weight:600}
.kbx-edbar button:hover{background:#fff;color:var(--nero)}
.kbx-edbody{border:1.5px solid var(--line);border-radius:0 0 14px 14px;padding:16px;min-height:170px;font-size:14px;line-height:1.6;background:#fff;outline:none}
.kbx-edbody h2{font-family:var(--font-body);font-size:14.5px;font-weight:600;margin:0 0 8px;letter-spacing:0;line-height:1.4}
.kbx-edbody p{margin:0 0 10px}
.kbx-edbody ul,.kbx-edbody ol{margin:0 0 10px;padding-left:20px}
.kbx-selrow{display:flex;gap:10px}
.kbx-sel{flex:1;position:relative;display:flex;align-items:center;height:46px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.kbx-sel select{appearance:none;-webkit-appearance:none;border:0;background:none;outline:none;width:100%;height:100%;padding:0 38px 0 14px;font-size:14px;font-family:inherit;color:var(--nero);cursor:pointer}
.kbx-sel .kbx-i{position:absolute;right:12px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.kbx-cbx{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin-top:16px;cursor:pointer;border:0;background:none;padding:0;font-family:inherit;text-align:left}
.kbx-bx{width:22px;height:22px;border:1.5px solid var(--line-strong);border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff}
.kbx-cbx.on .kbx-bx{background:var(--coral);border-color:var(--coral);color:#fff}
.kbx-bx .kbx-i{width:13px;height:13px;stroke-width:2.4}
.kbx-cbx span i{display:block;font-style:normal;font-size:12px;color:var(--text-muted);margin-top:2px}
.kbx-dz{border:1.8px dashed var(--line-strong);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--text-muted);font-size:13.5px;background:var(--isabelline);cursor:pointer}
.kbx-dz .kbx-i{width:26px;height:26px;color:var(--coral)}
.kbx-dz b{color:var(--nero);font-weight:500}
.kbx-dz small{font-size:12px;color:var(--text-faint)}
.kbx-dz.err{border-color:var(--coral);background:rgba(255,118,77,.1)}
.kbx-dz--over{border-color:var(--coral)}
.kbx-derr{display:flex;gap:7px;align-items:center;color:var(--coral-deep);font-size:12.5px;margin-top:8px;font-weight:500}
.kbx-derr .kbx-i{width:15px;height:15px;flex:none}
.kbx-fatt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:10px}
.kbx-ftile{width:38px;height:38px;border-radius:12px;background:rgba(45,55,148,.09);color:var(--egyptian-blue);display:flex;align-items:center;justify-content:center;flex:none}
.kbx-fnm{min-width:0}
.kbx-fnm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbx-fnm span{font-size:11.5px;color:var(--text-muted)}
.kbx-dx2{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;flex:none}
.kbx-dx2 .kbx-i{width:13px;height:13px}
.kbx-facts{display:flex;gap:10px;margin-top:24px}
/* Мобільний: картки в колонку, чипи скролом, шторка на весь екран */
@media(max-width:1100px){.kbx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .kbx-grid{grid-template-columns:1fr}
  /* Скрол ряду чипів тримаємо В МЕЖАХ картки: від'ємні поля виносили
     пігулки за її край і обрізали їх (скарга 27.08). */
  .kbx-chips{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:10px}
  .kbx-chips::-webkit-scrollbar{display:none}
  .kbx-chip{flex:none}
  .kbx-filters{margin-left:0;margin-bottom:16px}
  .kbx-drawer{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:88vh;border-radius:22px 22px 18px 18px}
  .kbx-selrow{flex-direction:column}
  .kbx-facts{flex-direction:column}
  .kbx-facts .btn{width:100%}
  .kbx-shell{padding:18px 16px 22px;border-radius:20px}
  .kbx-newbtn{width:100%;justify-content:center}
}

/* Запрошені клієнти — чекають підтвердження пошти (11.09.2026) */
.cl-inv-row{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:8px;
  background:var(--isabelline-warm);border:1px solid var(--line);border-radius:14px}
.cl-inv-row .btn{flex:none}
@media(max-width:640px){
  .cl-inv-row{flex-wrap:wrap}
  .cl-inv-row>div{flex:1 1 100%;margin-bottom:6px}
}

/* Форма «Новий клієнт»: парні поля (11.09.2026).
   minmax(0,1fr) — без нього input із власною min-width (особливо
   type=date на iOS) розсуває свою колонку, і поля виходять різної
   ширини. На вузькому екрані складаємо в один стовпчик. */
.inv-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.inv-2col>.field{min-width:0}
.inv-2col input{width:100%;box-sizing:border-box}
@media(max-width:480px){
  .inv-2col{grid-template-columns:1fr;gap:0}
}
/* Підвал модалки на телефоні: «Скасувати» + довга дія не вміщались у
   рядок і кнопка переносилась під низ, лишаючи дію відірваною. Робимо
   повну ширину й головну дію ПЕРШОЮ (великим пальцем зручніше знизу). */
@media(max-width:480px){
  .fpm-foot{flex-direction:column-reverse;gap:8px}
  .fpm-foot .btn{width:100%;justify-content:center}
}