/* Колокольчик и уведомления.
   Раздел бывшего ui-fixes-20260926.css (порядок правил внутри раздела прежний; разложено tools/css-sections.py). */
/* Passenger booking: clear groups and a completed route timeline. */
.design-787 .notification-onboarding{min-height:52px;padding:8px 12px;box-shadow:none}
.design-787 .notification-onboarding>svg{width:22px;height:22px}
.design-787 .notification-onboarding strong{font-size:13px;line-height:1.3}
.design-787 .notification-onboarding .notification-more>summary{font-size:12px}
body .notification-inbox>summary{min-height:44px;align-content:center}

/* Passenger notifications stay available without displacing the order form. */
body .notification-bell{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;border:1px solid #ffffff60;border-radius:12px;background:#ffffff17;color:#fff}
.notification-bell svg{width:24px;height:24px}
.notification-bell-count{position:absolute;top:-3px;right:-5px;min-width:18px;height:18px;padding:0 4px;border:2px solid #173f64;border-radius:12px;background:#a73e00;color:#fff;font:700 10px/18px system-ui;box-sizing:content-box}
.notification-bell-attention{position:absolute;right:3px;top:3px;width:9px;height:9px;border:2px solid #173f64;border-radius:50%;background:#ffca70}
body.notification-center-open{overflow:hidden}
body .notification-center{padding:0;border:0;border-radius:20px;width:min(520px,calc(100% - 48px));max-width:calc(100% - 48px);height:min(720px,calc(var(--app-vh, 1vh) * 85));height:min(720px,85dvh);max-height:calc(var(--app-vh, 1vh) * 85);max-height:85dvh;background:#fff;color:#17354d;overflow:hidden;box-sizing:border-box;box-shadow:0 20px 70px #14243540}
body .notification-center[open]{display:flex;flex-direction:column}
.notification-center::backdrop{background:#14243580}
.notification-center>header{display:flex;align-items:center;gap:8px;padding:14px 16px;background:#173f64;color:white;flex:none}
.notification-center-heading{flex:1;min-width:0}
.notification-center h2{font-size:20px;line-height:1.3;margin:0;color:inherit}
.notification-center-count{margin:4px 0 0;font-size:12px;line-height:1.4;color:#d8e6f1}
body .notification-center-close,body .notification-center-settings{display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #a9bccf80;border-radius:12px;background:transparent;color:white;font-size:26px}
.notification-center-settings svg{width:24px;height:24px}
.notification-center-content{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px 20px 16px}
.notification-center-setup{margin:0 0 4px;border:1px solid #ecd7ad;border-radius:12px;background:#fff8e9}
.notification-center-setup>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;box-sizing:border-box;cursor:pointer;list-style:none;color:#70430c;font-size:13px;font-weight:600}
.notification-center-setup>summary::-webkit-details-marker{display:none}
.notification-center-setup>summary small{margin-left:auto;font-size:12px;font-weight:400}
.notification-center-setup>summary::after{content:'⌄';font-size:18px;line-height:1}
.notification-center-setup[open]>summary::after{transform:rotate(180deg)}
body.design-787 .notification-center #notification-onboarding:not([hidden]){display:grid!important;margin:0;padding:4px 12px 12px;width:100%;max-width:none;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;box-sizing:border-box;grid-template-columns:20px minmax(0,1fr);gap:6px 9px}
body.design-787 .notification-center #notification-onboarding .notification-onboarding-actions{grid-column:1/-1;flex-wrap:wrap;justify-content:flex-start}
body.design-787 .notification-center #notification-onboarding .notification-onboarding-actions button{min-height:44px}
body.design-787 .notification-center #notification-onboarding>.notification-diagnostics{grid-column:1/-1}
body .notification-center .notification-inbox{margin:0;padding:0;border:0;border-radius:0;background:transparent;max-width:100%;box-sizing:border-box}
.notification-center .notification-inbox>summary{display:none}
/* «Прочитать все» — над списком справа; видна, только пока есть непрочитанные. */
.notification-center-inbox{display:flex;flex-direction:column;min-width:0}
body .notification-center .notification-inbox-read-all{order:-1;align-self:flex-end;min-height:40px;margin:0 0 4px;padding:8px 14px;font-size:13px}
.notification-center .notification-inbox-read-all[hidden]{display:none}
.notification-center .notification-inbox>.form-hint:empty{display:none}
.notification-center .notification-inbox>.form-hint:not(:empty){padding:24px 4px 16px;line-height:1.6;color:#536779}
.notification-center .notification-inbox>.notification-inbox-empty:not(:empty){display:grid;justify-items:center;gap:16px;padding:48px 12px;text-align:center}
.notification-center .notification-inbox-empty::before{content:'✓';display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#edf4f8;color:#416782;font-size:24px}
.notification-center .notification-inbox .card-list{gap:0;max-height:none;overflow:visible}
.notification-center .notification-card{display:grid;grid-template-columns:1fr 1.3fr;gap:7px 8px;padding:18px 0;overflow-wrap:anywhere;min-width:0;border:0;border-bottom:1px solid #e4eaf0;border-radius:0;box-shadow:none;background:transparent}
.notification-center .notification-card>*{grid-column:1/-1}
.notification-center .notification-card>strong{font-size:15px;line-height:1.4}
.notification-center .notification-card>p{font-size:14px;line-height:1.5}
.notification-center .notification-card>small{font-size:12px;line-height:1.5;color:#627589}
body .notification-center .notification-card>button{grid-column:auto;justify-self:stretch;min-width:0;min-height:44px;padding:8px 9px;margin-top:3px;font-size:12px;line-height:1.35;white-space:normal}
.notification-center .notification-card>.form-hint:empty{display:none}
.notification-center .notification-history-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 0 0;font-size:12px}
.notification-center .notification-history-pager button{min-height:44px;padding:8px 12px;font-size:12px}
.notification-center [hidden]{display:none!important}
.notification-center :focus-visible{outline:3px solid #e97824;outline-offset:2px}
@media(max-width:759px){
 body.role-passenger .cabinet-head-actions{gap:8px;flex-shrink:0}
 body.role-passenger .cabinet-header .header-qr{display:none!important}
 body .notification-center{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;height:calc(var(--app-vh, 1vh) * 88);height:88dvh;max-height:calc(var(--app-vh, 1vh) * 88);max-height:88dvh;border-radius:20px 20px 0 0}
 .notification-center>header{padding:14px 16px}
 .notification-center-content{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));scrollbar-gutter:auto}
}
@media(max-width:359px){.notification-center h2{font-size:18px}.notification-center>header{gap:6px;padding-inline:12px}.notification-center-content{padding-inline:12px}}
@media(max-height:500px){body .notification-center{height:calc(calc(var(--app-vh, 1vh) * 100) - 16px);height:calc(100dvh - 16px);max-height:calc(calc(var(--app-vh, 1vh) * 100) - 16px);max-height:calc(100dvh - 16px)}}
/* Идея 3: кнопка «Включить уведомления» в карточке ожидания водителя. */
body.design-787.role-passenger .passenger-search-state .passenger-enable-notifications{justify-self:start;min-height:44px;margin:6px 0 0}

/* Живой проход телефоном 06.10: всплывающее сообщение ложится поверх шапки, а не на заголовок шага и карточку под ней. */
@media(max-width:560px){
 body.design-787 #cabinet-message:not([hidden]){top:calc(6px + env(safe-area-inset-top))!important;bottom:auto!important;z-index:96;max-height:52px;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.25}
}
/* Кнопки в центре уведомлений («Прочитать все» и другие) — не ниже 44 px под палец. */
body .notification-center button:not(.icon-button){min-height:44px}
body .notification-center details>summary{display:flex;align-items:center;min-height:44px}
body.design-787 details.notification-diagnostics>summary{min-height:44px;align-content:center}
/* Аудит интерфейса 21.10.2026: всплывающее сообщение закрывало шапку (колокольчик, баланс) и главную кнопку внизу.
   Теперь оно под шапкой, не выше двух строк, закрывается нажатием. */
body.design-787 #cabinet-message:not([hidden]){top:calc(64px + env(safe-area-inset-top))!important;bottom:auto!important;cursor:pointer;max-height:none}
@media(max-width:560px){body.design-787 #cabinet-message:not([hidden]){top:calc(62px + env(safe-area-inset-top))!important;max-height:64px}}
body.design-787 .notification-bell-count{white-space:nowrap}
/* На телефоне всплывающее сообщение — поверх шапки одной-двумя короткими строками, а не поверх содержимого экрана. */
@media(max-width:759px){
 body.design-787.cabinet-mode #cabinet-message:not([hidden]){top:calc(6px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;max-height:48px!important;min-height:0!important;margin:0 auto!important;padding:4px 12px!important;overflow:hidden;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px!important;line-height:1.3!important;text-align:center;z-index:120!important}
}
@media(max-width:759px){body.design-787.cabinet-mode #cabinet-message:not([hidden]){max-height:calc(2.6em + 8px)!important}}
.notification-bell-count:not([hidden])~.notification-bell-attention{top:auto;right:auto;bottom:3px;left:3px}
.notification-center-setup.notifications-off>summary{border-color:#e8a29a;background:#fff3f0;color:#9f1d0a}

/* Обход «нажми всё» 26.10.2026: сообщение в строке шапки закрывало колокольчик, баланс и QR. Теперь правый край сообщения —
   перед ними (ширина группы — переменная --cabinet-actions-w, её задаёт app.js), до трёх коротких строк.
   06.11.2026: и на планшете (до 1099 px) — там сообщение лежало поверх «Из аэропорта / По городу». */
@media(max-width:1099px){
 body.design-787.cabinet-mode #cabinet-message:not([hidden]){left:8px!important;right:calc(var(--cabinet-actions-w,108px) + 18px)!important;width:auto!important;max-width:none!important;margin:0!important;transform:none!important;font-size:12px!important;line-height:1.2!important;-webkit-line-clamp:3!important;max-height:calc(3.6em + 8px)!important;text-align:left}
}
@media(max-height:500px) and (pointer:coarse){
 body.design-787.cabinet-mode #cabinet-message:not([hidden]){top:calc(6px + env(safe-area-inset-top))!important;bottom:auto!important;left:8px!important;right:calc(var(--cabinet-actions-w,108px) + 18px)!important;width:auto!important;max-width:none!important;margin:0!important;transform:none!important;padding:4px 12px!important;font-size:12px!important;line-height:1.2!important;overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3!important;max-height:calc(3.6em + 8px)!important;text-align:left}
}
/* Планшет: сообщение — в строке шапки (сверху), а не под ней поверх содержимого. */
@media(min-width:760px) and (max-width:1099px){body.design-787.cabinet-mode #cabinet-message:not([hidden]){top:calc(8px + env(safe-area-inset-top))!important;bottom:auto!important;max-height:44px;overflow:hidden;left:max(20px,calc((100% - 960px)/2))!important;right:calc(var(--cabinet-actions-w,108px) + max(20px,calc((100% - 960px)/2)) + 10px)!important}}