/* ============================================
   Стійка ЖК — основні стилі
   Цільовий пристрій: 1080×1920 (portrait)
   Мінімум touch-target: 80×80px, відступи 16px+
   ============================================ */

:root {
    /* Бренд КРЕАТОР БУД (brandbook 2021) */
    --brand-red: #E20413;
    --brand-red-hover: #b80310;
    --brand-black: #0A0A0A;
    --brand-gray: #DFDFDF;

    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-primary: var(--brand-red);
    --color-primary-hover: var(--brand-red-hover);
    --color-text: var(--brand-black);
    --color-text-muted: #6b6b6b;
    --color-border: var(--brand-gray);
    --color-accent: var(--brand-red);
    --color-danger: var(--brand-red);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;

    --shadow-card: 0 4px 16px rgba(10, 10, 10, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(10, 10, 10, 0.14);

    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   App container & screens
   ============================================ */

#app {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    background: var(--color-bg);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--transition), transform var(--transition);
}

.screen.active {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   Welcome screen
   ============================================ */

/* Welcome screen — бренд КРЕАТОР БУД (білий фон, декор-кружки, плашка-лого) */
.screen--welcome {
    background: #ffffff;
    color: var(--brand-black);
    position: relative;
    overflow: hidden;
}

/* Декоративні кружки в стилі бренд-буку (асиметрія) */
.screen--welcome::before,
.screen--welcome::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.screen--welcome::before {
    width: 520px;
    height: 520px;
    background: var(--brand-gray);
    bottom: -160px;
    left: -160px;
    opacity: 0.55;
}

.screen--welcome::after {
    width: 420px;
    height: 420px;
    background: var(--brand-red);
    bottom: -120px;
    right: -120px;
    opacity: 0.85;
}

.welcome__inner {
    margin: auto;
    text-align: center;
    padding: 48px 24px;
    max-width: 1040px;
    max-height: 100%;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}

.welcome__logo {
    width: 360px;
    height: 360px;
    margin: 0 auto 56px;
    display: block;
    object-fit: contain;
}

.welcome__title {
    font-size: 72px;
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--brand-black);
    white-space: nowrap;
}

.welcome__title-accent {
    color: var(--brand-red);
}

.welcome__subtitle {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 80px;
    color: var(--color-text-muted);
}

.welcome__start {
    display: inline-block;
    min-height: 120px;
    padding: 32px 64px;
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand-red);
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 36px rgba(226, 4, 19, 0.35);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.welcome__start:active {
    transform: scale(0.97);
    background: var(--brand-red-hover);
    box-shadow: 0 8px 20px rgba(226, 4, 19, 0.45);
}

/* Компактний мовний перемикач — знизу welcome screen */
.lang-switcher {
    margin-top: 64px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.lang-switcher__btn {
    min-height: 64px;
    min-width: 110px;
    padding: 12px 22px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: transparent;
    border: 2px solid var(--brand-gray);
    border-radius: var(--radius-md);
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.lang-switcher__btn:active {
    transform: scale(0.96);
}

.lang-switcher__btn--active {
    color: #ffffff;
    background: var(--brand-black);
    border-color: var(--brand-black);
}

/* Adaptive: коротка висота вікна (landscape dev preview) — стискаємо welcome */
@media (max-height: 1000px) {
    .welcome__logo {
        width: 200px;
        height: 200px;
        margin-bottom: 24px;
    }
    .welcome__title {
        font-size: 56px;
        margin-bottom: 20px;
    }
    .welcome__subtitle {
        font-size: 22px;
        margin-bottom: 36px;
    }
    .welcome__start {
        min-height: 88px;
        padding: 20px 48px;
        font-size: 28px;
    }
    .lang-switcher {
        margin-top: 32px;
    }
    .lang-switcher__btn {
        min-height: 56px;
        min-width: 96px;
        padding: 10px 18px;
        font-size: 17px;
    }
}

/* ============================================
   Menu screen — header
   ============================================ */

.screen__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 32px 40px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.header__back,
.header__home {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    min-width: 88px;
    padding: 16px 28px;
    font-size: 26px;
    font-weight: 600;
    color: var(--brand-black);
    background: var(--color-surface);
    border: 2px solid var(--brand-red);
    border-radius: var(--radius-md);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.header__back:active,
.header__home:active {
    background: var(--brand-red);
    color: #ffffff;
    transform: scale(0.96);
}

.header__back-icon,
.header__home-icon {
    font-size: 36px;
    line-height: 1;
    color: var(--brand-red);
    transition: color var(--transition);
}

.header__back:active .header__back-icon,
.header__home:active .header__home-icon {
    color: #ffffff;
}

.header__title-wrap {
    text-align: center;
    overflow: hidden;
}

.header__title {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Мульти-лайн привітання AI-консьєржа на головному екрані */
.header__title--greeting {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-line;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.header__breadcrumbs {
    margin-top: 6px;
    font-size: 22px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Menu screen — content
   ============================================ */

.screen__content {
    flex: 1;
    min-height: 0;
    padding: 48px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Wrapper around prompt + grid — keeps them centered vertically together */
.menu-wrap {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Prompt — subheading under section title, above the grid */
.menu-prompt {
    margin: 0 0 32px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    max-width: 900px;
}

/* Section label — full-width divider inside the grid (resident menu groups) */
.menu-section-label {
    grid-column: 1 / -1;
    margin: 8px 0 0 0;
    padding: 0 4px 12px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.menu-section-label:first-child {
    margin-top: 0;
}

/* Grid of menu buttons (root + sub-menus) */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-content: start;
    width: 100%;
    max-width: 1000px;
}

.menu-wrap .menu-grid {
    margin: 0;
}

.menu-grid--root {
    grid-template-columns: repeat(2, 1fr);
}

/* Список (заявки, підменю): flex замість grid, щоб будь-яка кількість карток
   центрувалася — у т.ч. одна картка чи непарний «хвіст» останнього ряду. */
.menu-grid--list {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
}

.menu-grid--list .menu-btn {
    width: 100%;
}

.menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    padding: 32px 24px;
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.menu-btn:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-card-hover);
    background: #fafbff;
}

.menu-btn__icon {
    font-size: 96px;
    line-height: 1;
}

.menu-btn__label {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

/* List-style buttons (deeper submenus, no icon) */
.menu-grid--list .menu-btn {
    flex-direction: row;
    justify-content: space-between;
    min-height: 120px;
    padding: 24px 32px;
    text-align: left;
}

.menu-grid--list .menu-btn__label {
    flex: 1;
    font-size: 28px;
}

.menu-grid--list .menu-btn::after {
    content: '›';
    font-size: 48px;
    color: var(--color-text-muted);
    line-height: 1;
}

.menu-grid--list .menu-btn--leaf::after {
    content: 'ⓘ';
    font-size: 32px;
}

/* Кнопки підтвердження (Так/Ні, Перенести/Скасувати) — в один рядок, кольорові */
.menu-grid--confirm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 800px;
}

.menu-grid--confirm .menu-btn {
    flex: 1 1 0;
    flex-direction: row;
    justify-content: center;
    min-height: 120px;
    padding: 24px 32px;
    text-align: center;
}

.menu-grid--confirm .menu-btn::after {
    content: none;  /* без ⓘ / › */
}

.menu-grid--confirm .menu-btn__label {
    flex: none;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

.menu-btn--confirm-yes {
    background: var(--brand-red);
}
.menu-btn--confirm-yes:active {
    background: var(--brand-red-hover);
}

.menu-btn--confirm-no {
    background: var(--brand-black);
}
.menu-btn--confirm-no:active {
    background: #2a2a2a;
}

/* Content card (leaf node answer) */
.content-card {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 48px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.content-card__title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--color-text);
}

.content-card__text {
    font-size: 28px;
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-line;
}

/* Згадка сайту КК у тексті відповіді → клікабельна (нова вкладка).
   Інлайн-лінк — дрібніша ціль за кнопку (правило 80×80px), тож даємо
   помітний колір + підкреслення з відступом і трохи «повітря» навколо. */
.content-card__link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    font-weight: 600;
    word-break: break-word;   /* довгий URL не рве картку на вузькому екрані */
    padding: 2px 0;
}

.content-card__text--stub {
    padding: 32px;
    background: #fff7ed;
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.content-card__cta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.content-card__cta-btn {
    min-height: 88px;
    padding: 20px 36px;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    transition: background var(--transition), transform var(--transition);
}

.content-card__cta-btn:active {
    background: var(--color-primary-hover);
    transform: scale(0.97);
}

.content-card__cta-btn--secondary {
    color: var(--color-text);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
}

/* ============================================
   Footer
   ============================================ */

.screen__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.footer__finish {
    min-height: 80px;
    padding: 18px 32px;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-danger);
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: background var(--transition), border-color var(--transition);
}

.footer__finish:active {
    background: #fef2f2;
    border-color: var(--color-danger);
}

.footer__timer {
    font-size: 20px;
    color: var(--color-text-muted);
}

/* ============================================
   Idle warning overlay
   ============================================ */

.idle-warning {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.idle-warning[hidden] {
    display: none;
}

.idle-warning__card {
    background: #fff;
    padding: 48px;
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 600px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.idle-warning__title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.idle-warning__text {
    font-size: 28px;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.idle-warning__btn {
    min-height: 100px;
    padding: 24px 48px;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-md);
}

.idle-warning__btn:active {
    background: var(--color-primary-hover);
    transform: scale(0.97);
}

/* ============================================
   Landscape orientation tweaks
   ============================================ */

@media (orientation: landscape) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1400px;
    }
    .menu-grid--list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        max-width: 1200px;
    }
    /* До 2 карток у рядок (≤560px кожна); неповний ряд лишається центрованим */
    .menu-grid--list .menu-btn {
        flex: 1 1 480px;
        max-width: 560px;
        width: auto;
    }
    .welcome__logo {
        font-size: 180px;
        margin-bottom: 32px;
    }
    .welcome__title {
        font-size: 72px;
    }
}

/* ============================================
   AI-Чат
   ============================================ */

.screen--chat {
    background: var(--color-bg);
}

.chat__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 32px 0;
    overflow: hidden;
}

.chat__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chat__msg {
    display: flex;
    max-width: 100%;
}

.chat__msg--bot,
.chat__msg--error {
    justify-content: flex-start;
}

.chat__msg--user {
    justify-content: flex-end;
}

.chat__bubble {
    max-width: 86%;
    padding: 24px 28px;
    border-radius: 28px;
    font-size: 28px;
    line-height: 1.45;
    box-shadow: var(--shadow-card);
    word-wrap: break-word;
    word-break: break-word;
}

.chat__msg--bot .chat__bubble {
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom-left-radius: 10px;
}

.chat__msg--user .chat__bubble {
    background: var(--brand-red);
    color: #ffffff;
    border-bottom-right-radius: 10px;
}

.chat__msg--error .chat__bubble {
    background: #fef2f2;
    color: var(--brand-red);
    border: 2px solid #fecaca;
    border-bottom-left-radius: 10px;
}

.chat__bubble b { font-weight: 700; }
.chat__bubble i { font-style: italic; }

/* Анімовані крапки "Думаю…" */
.chat__bubble--thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
}

.chat__dot {
    width: 12px;
    height: 12px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: chatDot 1.2s infinite ease-in-out both;
}

.chat__dot:nth-child(1) { animation-delay: -0.32s; }
.chat__dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes chatDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* Quick-replies (6 початкових кнопок) */
.chat__quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 8px 16px;
    justify-content: center;
}

.chat__quick-replies[hidden] {
    display: none;
}

.chat__quick-btn {
    min-height: 72px;
    padding: 16px 28px;
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-black);
    background: var(--color-surface);
    border: 2px solid var(--brand-gray);
    border-radius: 24px;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.chat__quick-btn:active {
    background: var(--brand-red);
    color: #ffffff;
    border-color: var(--brand-red);
    transform: scale(0.96);
}

/* Input bar */
.chat__input-bar {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 32px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.chat__input {
    flex: 1;
    min-height: 88px;
    padding: 20px 24px;
    font-size: 28px;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: 200px;
    position: relative;
}

.chat__input.chat__input--empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    pointer-events: none;
}

.chat__send {
    min-width: 100px;
    min-height: 88px;
    padding: 0 24px;
    font-size: 36px;
    color: #ffffff;
    background: var(--brand-red);
    border-radius: var(--radius-md);
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
}

.chat__send:active {
    background: var(--brand-red-hover);
    transform: scale(0.96);
}

.chat__send:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.chat__kb-toggle {
    min-width: 88px;
    min-height: 88px;
    padding: 0 16px;
    font-size: 36px;
    color: var(--brand-black);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.chat__kb-toggle:active {
    transform: scale(0.96);
}

.chat__kb-toggle--active {
    background: var(--brand-black);
    border-color: var(--brand-black);
    color: #ffffff;
}

/* ============================================
   On-screen клавіатура (OSKeyboard)
   ============================================ */

.chat__keyboard {
    padding: 12px 16px 16px;
    background: #ececec;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 800px;
    overflow: hidden;
    transition: max-height var(--transition), padding var(--transition), opacity var(--transition);
}

.chat__keyboard--collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
    border-top-color: transparent;
}

.osk__row {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.osk__row--bottom {
    margin-top: 4px;
}

.osk__key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 78px;
    padding: 0 4px;
    font-size: 30px;
    font-weight: 500;
    color: var(--brand-black);
    background: #ffffff;
    border: 1px solid #cfcfcf;
    border-radius: 12px;
    box-shadow: 0 1px 0 #b8b8b8;
    transition: background 80ms linear, transform 80ms linear;
    user-select: none;
}

.osk__key--press,
.osk__key:active {
    background: var(--brand-red);
    color: #ffffff;
    transform: scale(0.95);
}

.osk__key--util {
    background: #d4d4d4;
    font-size: 22px;
    font-weight: 600;
}

.osk__key--space {
    flex: 4 1 0;
    font-size: 22px;
}

.osk__key--back {
    flex: 1.4 1 0;
    font-size: 32px;
    background: #d4d4d4;
}

.osk__key--send {
    flex: 1.4 1 0;
    background: var(--brand-red);
    color: #ffffff;
    font-size: 36px;
}

.osk__key--send:active {
    background: var(--brand-red-hover);
}

.osk__key--toggle,
.osk__key--lang {
    flex: 1.2 1 0;
}

/* CTA-button — варіант "AI" */
.content-card__cta-btn--ai {
    background: var(--brand-black);
    color: #ffffff;
}

.content-card__cta-btn--ai:active {
    background: #1f1f1f;
}

/* ============================================
   Role picker (Гість / Мешканець)
   ============================================ */

.screen--role .screen__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.role__wrap {
    margin: auto;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.role__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ЖК-грід: flex із центруванням, щоб картки були по центру
   незалежно від кількості (особливо коли комплекс лише один). */
#complex-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

#complex-grid .role__btn {
    width: 380px;
    max-width: 100%;
}

.role__btn {
    min-height: 320px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.role__btn:active {
    transform: scale(0.97);
    border-color: var(--brand-red);
    box-shadow: var(--shadow-card-hover);
}

.role__btn-icon {
    font-size: 96px;
    line-height: 1;
}

.role__btn-label {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-text);
}

.role__btn-desc {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.3;
    max-width: 320px;
}

/* ============================================
   Phone login (вхід мешканця за номером)
   ============================================ */

.screen--phone .screen__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.phone__wrap {
    margin: auto;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.phone__hint {
    margin: -8px 0 0;
    font-size: 22px;
    color: var(--color-text-muted);
    text-align: center;
}

.phone__display {
    width: 100%;
    min-height: 96px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.phone__error {
    margin: 0;
    padding: 12px 20px;
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-red);
    background: #fdeaec;
    border: 1px solid #f3b9bf;
    border-radius: var(--radius-sm);
}

.phone__pad {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.phone__key {
    min-height: 110px;
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.phone__key:active {
    transform: scale(0.95);
    border-color: var(--brand-red);
    background: #fafbff;
}

.phone__key--ok {
    color: #fff;
    background: var(--brand-red);
    border-color: var(--brand-red);
}

.phone__key--ok:active {
    background: var(--brand-red-hover);
}

.phone__key--back {
    color: var(--color-text-muted);
}

.phone__demo-hint {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-muted);
    text-align: center;
    opacity: 0.7;
}

/* Полевий ввід дати/часу (День/Місяць/Рік, Від–До) — замість «калькулятора» */
.bk-fields {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 16px 12px;
}

.bk-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bk-group__label {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bk-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bk-group__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bk-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bk-field__box {
    min-width: 92px;
    min-height: 92px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.bk-field--year .bk-field__box {
    min-width: 150px;
}

.bk-field__box--empty {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.bk-field--active .bk-field__box {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(226, 4, 19, 0.18);
}

.bk-field__label {
    font-size: 18px;
    color: var(--color-text-muted);
}

.bk-sep {
    align-self: center;
    padding-bottom: 30px;
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bk-range-sep {
    align-self: center;
    padding-bottom: 30px;
    font-size: 40px;
    font-weight: 700;
    color: var(--brand-red);
}

@media (orientation: landscape) {
    .phone__wrap {
        max-width: 520px;
    }
}

/* ============================================
   Route — вибір стартової точки + карта (iframe)
   ============================================ */

.screen--route-from .screen__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.route-from__wrap {
    margin: auto;
    width: 100%;
    max-width: 900px;
    padding: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Підказку центруємо в межах wrap (її max-width вужчий за сітку в landscape) */
.route-from__wrap .menu-prompt {
    align-self: center;
}

.route-from__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.route-from__btn {
    min-height: 180px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.route-from__btn:active {
    transform: scale(0.97);
    border-color: var(--brand-red);
}

.route-from__btn-icon {
    font-size: 56px;
    line-height: 1;
}

.route-from__btn-label {
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text);
}

@media (orientation: landscape) {
    .route-from__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .route-from__wrap {
        max-width: 1400px;
    }
}

/* Map iframe screen */
.screen--route-map .route-map__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.route-map__lang-warning {
    margin: 12px 16px 0;
    padding: 12px 16px;
    background: #fff8e1;
    border: 1px solid #f0c860;
    border-radius: var(--radius-sm);
    color: #6a4a00;
    font-size: 18px;
    text-align: center;
}

.route-map__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #ffffff;
}

/* CTA — варіант "Маршрут на карті" */
.content-card__cta-btn--route {
    background: var(--brand-red);
    color: #ffffff;
}

.content-card__cta-btn--route:active {
    background: var(--color-primary-hover);
}

/* ============================================
   Disable hover on touch — only :active feedback
   (hover "залипає" після кліку on touch)
   ============================================ */
@media (hover: hover) and (pointer: fine) {
    .menu-btn:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px);
    }
    .header__back:hover,
    .header__home:hover {
        background: var(--color-border);
    }
    .chat__quick-btn:hover {
        border-color: var(--brand-red);
    }
    .osk__key:hover {
        background: #f5f5f5;
    }
}