* {
    box-sizing: border-box;
}


html {
    height: 100%;
}


body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, sans-serif;
    background: #f4f5f7;
    color: #222;
}


/*
    На экране чата запрещаем прокрутку
    всей страницы.

    Прокручиваться должна только история
    сообщений.
*/
.chat-body {
    height: var(--visible-height, 100dvh);
    overflow: hidden;
}



/* ========================================
   ГЛАВНАЯ
   ======================================== */


.app {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 28px 20px 40px;
}


.header {
    text-align: center;
    margin-bottom: 30px;
}


.logo {
    width: 92px;
    height: 72px;
    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    border-radius: 30px;

    font-size: 38px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}


h1 {
    margin: 0;
    font-size: 32px;
}


.subtitle {
    margin-top: 7px;
    color: #777;
    font-size: 15px;
}


.family {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.card {
    width: 100%;
    border: none;
    background: white;

    padding: 17px 18px;
    border-radius: 20px;

    display: flex;
    align-items: center;
    gap: 15px;

    text-align: left;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}


.card-link {
    text-decoration: none;
    color: inherit;
}


.card:active {
    transform: scale(0.98);
}


.avatar {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f0f1f3;

    font-size: 27px;
}


.info {
    flex: 1;
}


.name {
    font-size: 19px;
    font-weight: 600;
}


.description {
    margin-top: 4px;
    color: #888;
    font-size: 13px;
}


.arrow {
    font-size: 23px;
    color: #777;
}


.inactive {
    opacity: 0.55;
}


.section-title {
    margin: 28px 4px 12px;

    font-size: 13px;
    font-weight: 700;

    color: #999;

    text-transform: uppercase;
    letter-spacing: 1px;
}


.fridge .avatar {
    background: #eef5ef;
}


.footer {
    margin-top: 35px;

    text-align: center;

    color: #aaa;
    font-size: 12px;
}



/* ========================================
   ЧАТ
   ======================================== */


.chat-app {
    width: 100%;
    max-width: 480px;

    /*
        Эту величину теперь передаёт app.js.

        Когда появляется клавиатура,
        --visible-height уменьшается.
    */
    height: var(--visible-height, 100dvh);


    /*
        Некоторые мобильные браузеры не только
        уменьшают viewport, но и сдвигают его.

        Компенсируем этот сдвиг.
    */
    transform:
        translateY(
            var(--viewport-offset-top, 0px)
        );


    margin: 0 auto;

    display: flex;
    flex-direction: column;

    background: #f4f5f7;

    overflow: hidden;
}


.chat-header {
    height: 76px;
    flex-shrink: 0;

    padding: 12px 16px;

    display: flex;
    align-items: center;

    background: white;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.05);
}


.back {
    font-size: 42px;
    line-height: 1;

    text-decoration: none;
    color: #222;

    margin-right: 14px;
}


.chat-person {
    display: flex;
    align-items: center;
    gap: 12px;
}


.chat-avatar {
    width: 46px;
    height: 46px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eee;

    font-size: 24px;
}


.chat-name {
    font-size: 18px;
    font-weight: 600;
}


.chat-status {
    margin-top: 3px;

    font-size: 12px;
    color: #999;
}



/*
    Это единственная прокручиваемая
    область экрана чата.
*/
.messages {
    flex: 1 1 auto;
    min-height: 0;

    padding: 18px 14px;

    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
}


.message-row {
    display: flex;
    margin-bottom: 12px;
}


.message-row.incoming {
    justify-content: flex-start;
}


.message-row.outgoing {
    justify-content: flex-end;
}


.bubble {
    max-width: 78%;

    padding: 11px 14px;

    border-radius: 18px;

    font-size: 16px;
    line-height: 1.35;

    background: white;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04);
}


.outgoing .bubble {
    background: #dcf8c6;
}



/* ========================================
   ПОЛЕ ВВОДА
   ======================================== */


.composer {
    padding: 10px;

    /*
        На iPhone учитываем нижнюю
        безопасную область экрана.
    */
    padding-bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );

    display: flex;
    gap: 8px;

    background: white;

    flex-shrink: 0;
}


.composer input {
    flex: 1;

    border: 1px solid #ddd;

    border-radius: 22px;

    padding: 12px 16px;

    font-size: 16px;

    outline: none;
}


.composer button {
    width: 46px;
    height: 46px;

    border: none;

    border-radius: 50%;

    font-size: 20px;

    background: #222;
    color: white;
}
/* ========================================
   АВТОРИЗАЦИЯ
   ======================================== */


.login-body {
    min-height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background: #f4f5f7;
}


.login-page {
    width: 100%;
    max-width: 420px;

    text-align: center;
}


.login-logo {
    width: 92px;
    height: 72px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 30px;

    font-size: 38px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);
}


.login-title {
    font-size: 32px;
    font-weight: 700;
}


.login-subtitle {
    margin-top: 7px;
    margin-bottom: 30px;

    color: #777;

    font-size: 15px;
}


.login-card {
    padding: 24px;

    background: white;

    border-radius: 24px;

    text-align: left;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.07);
}


.login-caption {
    margin-bottom: 22px;

    text-align: center;

    font-size: 20px;
    font-weight: 600;
}


.login-label {
    display: block;

    margin:
        0
        0
        7px;

    font-size: 13px;
    font-weight: 600;

    color: #666;
}


.login-input {
    width: 100%;

    margin-bottom: 18px;

    padding: 13px 15px;

    border: 1px solid #ddd;

    border-radius: 14px;

    background: white;

    font-size: 16px;

    outline: none;
}


.login-input:focus {
    border-color: #999;
}


.login-button {
    width: 100%;

    margin-top: 5px;

    padding: 14px;

    border: none;

    border-radius: 16px;

    background: #222;

    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}


.login-button:active {
    transform: scale(0.98);
}


.login-note {
    margin-top: 18px;

    text-align: center;

    color: #aaa;

    font-size: 12px;
}


.login-footer {
    margin-top: 25px;

    color: #aaa;

    font-size: 12px;
}

/* ========================================
   АВТОРИЗАЦИЯ / НАСТРОЙКИ / СЛУЖЕБНОЕ
   ======================================== */

.login-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff0f0;
    color: #a33;
    font-size: 13px;
    text-align: center;
}

.home-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 4px;
}

.icon-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: #555;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.signed-in {
    margin-top: 10px;
    font-size: 13px;
    color: #999;
}

.unread-badge {
    min-width: 27px;
    height: 27px;
    padding: 0 8px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.empty-state {
    padding: 24px 18px;
    border-radius: 20px;
    background: white;
    color: #888;
    text-align: center;
}

.message-meta {
    margin-top: 4px;
    font-size: 10px;
    color: #999;
}

.settings-page {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px;
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.settings-back {
    font-size: 42px;
    line-height: 1;
    text-decoration: none;
    color: #222;
}

.settings-title {
    font-size: 24px;
    font-weight: 700;
}

.settings-subtitle {
    margin-top: 3px;
    color: #999;
    font-size: 12px;
}

.settings-card {
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 22px;
    background: white;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.settings-card-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.settings-result {
    min-height: 18px;
    margin-top: 12px;
    color: #777;
    font-size: 13px;
}

.settings-note {
    margin-top: 24px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
}


/* ========================================
   СООБЩЕНИЯ: ДАТА, АВТОР, ВРЕМЯ
   ======================================== */

.day-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 4px 18px;
    color: #929292;
    font-size: 12px;
    white-space: nowrap;
}

.day-separator::before,
.day-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.day-separator span {
    padding: 4px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.message-author {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.message-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-meta {
    min-height: 14px;
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    color: #8a8a8a;
    font-size: 10px;
    line-height: 1;
}

.message-edited {
    white-space: nowrap;
}


/* ========================================
   ГЛАВНАЯ: ЖИВЫЕ СЧЁТЧИКИ
   ======================================== */

.card-indicator {
    flex-shrink: 0;
}

.unread-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: white;
    font-size: 12px;
    font-weight: 700;
}


/* ========================================
   v0.4 — ДЕЙСТВИЯ С СООБЩЕНИЯМИ
   ======================================== */
.bubble { cursor: pointer; }
.message-row.deleted .bubble { opacity: .62; font-style: italic; }
.reply-preview {
    margin: -2px 0 8px; padding: 6px 9px; border-left: 3px solid rgba(0,0,0,.22);
    border-radius: 7px; background: rgba(0,0,0,.045); font-size: 12px; font-style: normal;
}
.reply-preview-author { font-weight: 700; margin-bottom: 2px; }
.reply-preview-text { color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; font-style:normal; }
.reaction-chip { border:0; border-radius:12px; padding:3px 7px; background:#f0f0f0; font-size:12px; }
.reaction-chip.mine { background:#dce9ff; }
.message-menu {
    position: fixed; z-index: 1000; left: 50%; bottom: 82px; transform: translateX(-50%);
    width: min(92vw, 390px); padding: 9px; border-radius: 18px; background: white;
    box-shadow: 0 8px 30px rgba(0,0,0,.20);
}
.reaction-picker { display:flex; justify-content:space-around; gap:4px; padding:4px 2px 9px; border-bottom:1px solid #eee; }
.reaction-picker button { border:0; background:transparent; font-size:25px; padding:5px; }
.message-actions { display:flex; gap:6px; padding-top:8px; overflow-x:auto; }
.message-actions button { border:0; border-radius:12px; background:#f2f2f2; padding:9px 11px; white-space:nowrap; font-size:13px; }
.message-actions button.danger { color:#a22; }
.compose-context {
    flex-shrink:0; display:flex; align-items:center; gap:8px; padding:8px 12px;
    background:#fff; border-top:1px solid #eee;
}
.compose-context[hidden], .message-menu[hidden] { display:none !important; }
.compose-context-text { min-width:0; flex:1; padding-left:9px; border-left:3px solid #777; }
.compose-context-title { font-size:12px; font-weight:700; }
.compose-context-preview { margin-top:2px; color:#777; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compose-context > button { border:0; background:transparent; font-size:25px; color:#777; }

/* ========================================
   v0.5 — СКРЕПКА И ВЛОЖЕНИЯ
   ======================================== */
.attach-button { flex-shrink:0; font-size:21px !important; background:transparent !important; color:#555 !important; }
.attachment-menu {
    position:fixed; z-index:1100; left:50%; bottom:82px; transform:translateX(-50%);
    width:min(92vw,390px); padding:8px; border-radius:18px; background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.20); display:flex; gap:7px;
}
.attachment-menu[hidden]{display:none!important;}
.attachment-menu button{flex:1;border:0;border-radius:13px;background:#f2f2f2;padding:12px 8px;font-size:13px;white-space:nowrap;}
.attachment{margin:2px 0 5px;max-width:280px;font-style:normal;}
.attachment img{display:block;max-width:100%;max-height:330px;border-radius:12px;object-fit:cover;cursor:pointer;}
.attachment video{display:block;width:min(270px,70vw);max-height:330px;border-radius:12px;background:#111;}
.document-card{display:flex;align-items:center;gap:10px;min-width:210px;max-width:280px;padding:9px 10px;border-radius:11px;background:rgba(0,0,0,.055);color:inherit;text-decoration:none;}
.document-icon{font-size:27px;flex-shrink:0;}
.document-info{min-width:0;display:flex;flex-direction:column;gap:3px;}
.document-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px;}
.document-info small{font-size:10px;color:#777;}


/* v0.6: голубь — конкретное сообщение ещё не увидено собеседником. */
.message-pigeon {
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}


/* v0.7 — пачка фото и подпись */
.attachment-draft{margin:0 12px 8px;padding:9px 10px 9px 12px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.attachment-draft-text{min-width:0;flex:1}.attachment-draft-title{font-size:13px;font-weight:700}.attachment-draft-preview{margin-top:2px;color:#888;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.attachment-draft>button{border:0;background:transparent;color:#888;font-size:22px;cursor:pointer}
.photo-gallery{display:grid;gap:3px;margin-bottom:5px;overflow:hidden;border-radius:12px}.photo-gallery-1{grid-template-columns:1fr}.photo-gallery-2{grid-template-columns:repeat(2,1fr)}.photo-gallery-3,.photo-gallery-4{grid-template-columns:repeat(2,1fr)}
.photo-tile{position:relative;min-width:0;padding:0;border:0;background:#e9e9e9;overflow:hidden;cursor:pointer}.photo-gallery-1 .photo-tile{aspect-ratio:4/3}.photo-gallery-2 .photo-tile,.photo-gallery-3 .photo-tile,.photo-gallery-4 .photo-tile{aspect-ratio:1/1}.photo-gallery-3 .photo-tile:first-child{grid-row:span 2;aspect-ratio:auto}.photo-tile img{width:100%;height:100%;display:block;object-fit:cover}.photo-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:24px;font-weight:700}


/* МОЙ АРХИВ v0.8 */
.archive-page { margin:0; min-height:100vh; background:#f4f5f7; color:#222; font-family:Arial,sans-serif; }
.archive-app { width:100%; max-width:600px; min-height:100vh; margin:0 auto; padding:18px 16px 40px; }
.archive-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.archive-back { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:white; color:#333; text-decoration:none; font-size:22px; box-shadow:0 3px 12px rgba(0,0,0,.05); }
.archive-heading { min-width:0; }
.archive-title { font-size:24px; font-weight:700; }
.archive-subtitle { margin-top:3px; color:#8b8b8b; font-size:13px; }
.archive-upload { margin-left:auto; width:42px; height:42px; border:0; border-radius:14px; background:#222; color:white; font-size:25px; cursor:pointer; }
.archive-tools { display:flex; gap:8px; margin-bottom:10px; }
.archive-tool { border:0; border-radius:12px; padding:10px 13px; background:white; color:#444; box-shadow:0 2px 10px rgba(0,0,0,.04); cursor:pointer; }
.archive-breadcrumbs { min-height:28px; display:flex; align-items:center; gap:7px; margin:2px 2px 9px; color:#999; font-size:12px; }
.crumb { border:0; padding:0; background:transparent; color:#666; cursor:pointer; }
.crumb-current { color:#999; }
.archive-list { display:flex; flex-direction:column; gap:9px; }
.archive-card { width:100%; min-height:64px; border-radius:17px; background:white; display:flex; align-items:stretch; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.045); }
.archive-system-card, .archive-open { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:12px; padding:11px 14px; text-align:left; cursor:pointer; }
.archive-icon { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:#f1f2f4; font-size:22px; flex-shrink:0; }
.archive-card-main { min-width:0; flex:1; }
.archive-card-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:600; }
.archive-card-subtitle { margin-top:4px; color:#999; font-size:12px; }
.archive-arrow { margin-left:auto; color:#999; font-size:22px; }
.archive-more { width:46px; border:0; background:transparent; color:#888; font-size:20px; cursor:pointer; }
.archive-section-title { margin:13px 4px 1px; color:#999; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.archive-empty { padding:30px 10px; color:#999; text-align:center; font-size:13px; }
.archive-small-empty { padding:8px 10px 12px; color:#aaa; text-align:center; font-size:12px; }
.archive-menu { position:fixed; z-index:1000; min-width:180px; padding:6px; border-radius:14px; background:white; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.archive-menu.hidden { display:none; }
.archive-menu-item { width:100%; border:0; border-radius:10px; padding:10px 12px; background:transparent; text-align:left; cursor:pointer; }
.archive-menu-item:hover { background:#f4f5f7; }
.archive-menu-item.danger { color:#a33; }


/* v0.9 — аудио */
.audio-card { min-width: 220px; max-width: 100%; padding: 8px 4px 2px; }
.audio-title { margin-bottom: 6px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-card audio { width: 100%; max-width: 320px; height: 36px; }
.archive-audio-player { display: block; width: min(280px, 100%); height: 32px; margin-top: 7px; }


/* ========================================
   ARCHIVE PICKER FROM CHAT
   ======================================== */

.archive-picker {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0,0,0,.28);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.archive-picker[hidden] { display: none; }

.archive-picker-card {
    width: min(640px, 100%);
    max-height: 78vh;
    background: #f4f5f7;
    border-radius: 22px 22px 0 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 35px rgba(0,0,0,.18);
}

.archive-picker-header,
.archive-picker-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.archive-picker-header {
    padding: 4px 2px 12px;
    font-size: 18px;
}

.archive-picker-header button {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 12px;
    background: white;
    font-size: 20px;
}

.archive-picker-nav {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 12px;
}

.archive-picker-nav button {
    border: none;
    background: transparent;
    padding: 0;
    color: #555;
}

.archive-picker-list {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0 10px;
}

.archive-picker-folder,
.archive-picker-row {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    background: white;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.archive-picker-folder { cursor: pointer; }

.archive-picker-row input { width: 18px; height: 18px; }
.archive-picker-icon { font-size: 21px; }
.archive-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archive-picker-empty {
    padding: 28px 10px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.archive-picker-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.07);
}
.archive-picker-footer span {
    flex: 1;
    color: #888;
    font-size: 12px;
}
.archive-picker-footer button {
    border: none;
    border-radius: 12px;
    padding: 10px 15px;
    background: #222;
    color: white;
}
.archive-picker-footer button:disabled {
    opacity: .4;
}

.save-to-archive {
    margin-top: 7px;
    border: none;
    border-radius: 10px;
    padding: 6px 9px;
    background: rgba(255,255,255,.72);
    color: #555;
    font-size: 11px;
    cursor: pointer;
}

.attachment-save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.attachment-menu #attachmentSourceMenu,
.attachment-menu #attachmentDeviceMenu {
    display: flex;
    flex-direction: column;
}

.attachment-menu #attachmentSourceMenu[hidden],
.attachment-menu #attachmentDeviceMenu[hidden] {
    display: none;
}


/* ========================================
   FILE UI POLISH V1.0.2
   ======================================== */

.photo-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.photo-tile-open {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    display: block;
    cursor: pointer;
}

.photo-tile-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.attachment-body {
    min-width: 0;
    flex: 1;
}

.attachment-more,
.archive-photo-more {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,.88);
    color: #666;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.photo-tile > .attachment-more {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 4;
}

.attachment-actions-menu {
    position: fixed;
    z-index: 1800;
    min-width: 190px;
    padding: 6px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

.attachment-actions-menu.hidden { display: none; }

.attachment-actions-item {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    background: transparent;
    text-align: left;
    color: #333;
    cursor: pointer;
}

.attachment-actions-item:hover { background: #f3f4f6; }

.photo-viewer,
.archive-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20,20,22,.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.photo-viewer[hidden],
.archive-photo-viewer[hidden] { display: none; }

.photo-viewer-card,
.archive-photo-viewer-card {
    position: relative;
    width: min(1000px, 96vw);
    height: min(820px, 92vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-card img,
.archive-photo-viewer-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
    background: #111;
    box-shadow: 0 16px 45px rgba(0,0,0,.35);
}

.photo-viewer-close,
.archive-photo-viewer-close {
    position: absolute;
    z-index: 4;
    right: 8px;
    top: 8px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 13px;
    background: rgba(255,255,255,.9);
    font-size: 24px;
    cursor: pointer;
}

.photo-viewer-nav,
.archive-photo-viewer-nav {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    font-size: 32px;
    cursor: pointer;
}

.photo-viewer-nav.prev,
.archive-photo-viewer-nav.prev { left: 8px; }
.photo-viewer-nav.next,
.archive-photo-viewer-nav.next { right: 8px; }

.photo-viewer-caption,
.archive-photo-viewer-caption {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 82%;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(0,0,0,.6);
    color: white;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    width: 100%;
}

.archive-photo-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 13px;
    background: #e9eaec;
}

.archive-photo-open {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.archive-photo-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-photo-more {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 3;
}

@media (min-width: 700px) {
    .archive-photo-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}


/* ========================================
   V1.0.7 SAFE NON-VIDEO POLISH
   Видео намеренно оставлено как в v1.0.2.
   ======================================== */

.archive-menu,
.attachment-actions-menu {
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
}

.archive-audio-card {
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
}

.archive-audio-main {
    min-width: 0;
    flex: 1;
}

.archive-audio-player {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 34px;
    margin-top: 7px;
}

.archive-picker-photo-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.archive-picker-photo-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: #e9eaec;
    cursor: pointer;
}

.archive-picker-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive-picker-photo-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.archive-picker-photo-mark {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    color: transparent;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.archive-picker-photo-check:checked + .archive-picker-photo-mark {
    background: #222;
    color: white;
}


/* ========================================
   HOME V1 — ДОМ КАК СЦЕНА
   Фон = единая картинка.
   Интерфейс = прозрачный SVG-слой поверх.
   ======================================== */

.house-home-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 15%, #fffdf8 0%, #f4f5f6 55%, #eceeef 100%);
    color: #232323;
    font-family: Arial, sans-serif;
}

.house-home-app {
    width: min(940px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: 18px 14px 28px;
    box-sizing: border-box;
}

.house-topbar {
    width: min(820px, 94vw);
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.house-greeting {
    font-size: 18px;
    font-weight: 700;
}

.house-caption {
    margin-top: 3px;
    color: #9a9a9a;
    font-size: 12px;
}

.house-tools {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.house-tool {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.86);
    color: #333;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    backdrop-filter: blur(8px);
}

.house-stage {
    position: relative;
    width: min(820px, 96vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.house-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.house-hotspots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.house-zone-group {
    outline: none;
    cursor: pointer;
}

.house-zone {
    fill: rgba(255, 224, 136, 0);
    stroke: rgba(255,255,255,0);
    stroke-width: 4;
    transition:
        fill .14s ease,
        stroke .14s ease,
        filter .14s ease,
        transform .14s ease;
    transform-box: fill-box;
    transform-origin: center;
}

@media (hover:hover) and (pointer:fine) {
    .house-zone-group:hover .house-zone,
    .house-zone-group:focus-visible .house-zone {
        fill: rgba(255, 224, 136, .18);
        stroke: rgba(255, 245, 205, .54);
        filter: drop-shadow(0 0 13px rgba(255, 208, 88, .34));
        transform: scale(1.018);
    }
}

.house-zone-group.touching .house-zone,
.house-zone-group:active .house-zone {
    fill: rgba(255, 224, 136, .23);
    stroke: rgba(255, 245, 205, .6);
    filter: drop-shadow(0 0 14px rgba(255, 205, 75, .38));
    transform: scale(.988);
}

.house-unread-badge {
    position: absolute;
    left: 45.15%;
    top: 39.35%;
    width: 5.15%;
    min-width: 30px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 50%;
    background: #e77c34;
    color: white;
    font-weight: 800;
    font-size: clamp(13px, 2.1vw, 23px);
    box-shadow: 0 4px 9px rgba(119,57,18,.22);
    cursor: pointer;
}

.house-unread-badge:not(.has-unread) {
    background: #d99055;
    color: rgba(255,255,255,.72);
}

.chimney-status {
    position: absolute;
    left: 64.5%;
    top: 13.5%;
    width: 12%;
    height: 14%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.smoke {
    position: absolute;
    border-radius: 50%;
    background: rgba(235, 225, 207, .68);
    filter: blur(.3px);
    animation: houseSmoke 4.8s ease-in-out infinite;
}

.smoke-one {
    width: 28%;
    aspect-ratio: 1;
    left: 38%;
    bottom: 28%;
}

.smoke-two {
    width: 22%;
    aspect-ratio: 1;
    left: 52%;
    bottom: 44%;
    animation-delay: -1.5s;
}

.smoke-three {
    width: 17%;
    aspect-ratio: 1;
    left: 46%;
    bottom: 61%;
    animation-delay: -3s;
}

@keyframes houseSmoke {
    0%,100% { transform: translate(0, 5px) scale(.88); opacity: .25; }
    45% { transform: translate(5px, -7px) scale(1.08); opacity: .67; }
}

.chimney-count {
    position: absolute;
    right: 2%;
    top: 3%;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 14px;
    background: #e77732;
    color: white;
    font-weight: 800;
    font-size: 12px;
    line-height: 25px;
    box-shadow: 0 3px 9px rgba(101,49,13,.22);
}

.chimney-status.has-unread .smoke {
    background: rgba(245, 216, 167, .86);
}

.house-hint {
    margin-top: -10px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
}

.home-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(25,25,25,.18);
    opacity: 0;
    transition: opacity .18s ease;
}

.home-sheet-backdrop[hidden] { display: none; }
.home-sheet-backdrop.open { opacity: 1; }

.home-sheet {
    position: fixed;
    z-index: 1210;
    left: 50%;
    bottom: 0;
    width: min(620px, 100%);
    max-height: min(76vh, 720px);
    padding: 8px 14px 24px;
    box-sizing: border-box;
    border-radius: 24px 24px 0 0;
    background: rgba(248,249,250,.98);
    box-shadow: 0 -14px 42px rgba(0,0,0,.15);
    transform: translate(-50%, 105%);
    transition: transform .18s ease;
    overflow: auto;
    backdrop-filter: blur(16px);
}

.home-sheet[hidden] { display: none; }
.home-sheet.open { transform: translate(-50%, 0); }

.home-sheet-handle {
    width: 46px;
    height: 5px;
    margin: 2px auto 13px;
    border-radius: 4px;
    background: #d5d5d5;
}

.home-sheet-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.home-sheet-title {
    font-size: 21px;
    font-weight: 750;
}

.home-sheet-subtitle {
    margin-top: 3px;
    color: #999;
    font-size: 12px;
}

.home-sheet-close {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 13px;
    background: white;
    color: #777;
    font-size: 23px;
    cursor: pointer;
}

.home-sheet-conversations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-sheet-conversations .card {
    margin: 0;
}

.house-toast {
    position: fixed;
    z-index: 1300;
    left: 50%;
    bottom: 22px;
    max-width: min(88vw, 440px);
    padding: 11px 15px;
    border-radius: 14px;
    background: rgba(34,34,34,.92);
    color: white;
    text-align: center;
    font-size: 13px;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.house-toast[hidden] { display: none; }

.house-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 600px) {
    .house-home-app {
        padding: 12px 8px 22px;
    }

    .house-topbar {
        width: 94vw;
        margin-bottom: 0;
    }

    .house-greeting {
        font-size: 16px;
    }

    .house-stage {
        width: 100vw;
        max-width: 100vw;
    }

    .house-hint {
        margin-top: -4px;
    }

    .house-unread-badge {
        min-width: 25px;
    }
}
\n/* HOMEGROWN RADIO V1 — фон + прозрачные управляющие слои */
.radio-body{margin:0;background:#18130e;min-height:100vh;display:flex;justify-content:center;font-family:Arial,sans-serif}.radio-stage{position:relative;width:min(100vw,1024px);aspect-ratio:1024/1448;margin:auto;overflow:hidden}.radio-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.radio-hit{position:absolute;border:0;background:rgba(255,225,145,0);cursor:pointer;border-radius:50%;transition:background .12s,box-shadow .12s,transform .12s}.radio-hit:hover,.radio-hit:active{background:rgba(255,224,140,.18);box-shadow:0 0 22px rgba(255,205,90,.35);transform:scale(.98)}.radio-hit.back{left:3.2%;top:2.4%;width:10.5%;height:7.2%;border-radius:22%}.radio-hit.prev-program{left:1.4%;top:60.7%;width:7.5%;height:7%}.radio-hit.next-program{left:40.2%;top:60.7%;width:7.5%;height:7%}.radio-hit.prev-track{left:52.2%;top:57.7%;width:9%;height:7%}.radio-hit.play{left:65.2%;top:56.7%;width:12%;height:8.5%}.radio-hit.next-track{left:81.2%;top:57.7%;width:9%;height:7%}.radio-range{position:absolute;appearance:none;-webkit-appearance:none;cursor:pointer;opacity:1;background:transparent;--pct:0%}
.radio-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,rgba(83,139,52,.96) 0 var(--pct),rgba(112,79,43,.34) var(--pct) 100%);box-shadow:inset 0 1px 2px #0003}
.radio-range.volume::-webkit-slider-runnable-track{background:linear-gradient(to right,rgba(194,132,38,.95) 0 var(--pct),rgba(112,79,43,.34) var(--pct) 100%)}
.radio-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border:2px solid #8b5b27;border-radius:50%;background:#c58a3b;box-shadow:0 2px 5px #0005}
.radio-range::-moz-range-track{height:6px;border:0;border-radius:999px;background:rgba(112,79,43,.34)}
.radio-range::-moz-range-progress{height:6px;border-radius:999px;background:rgba(83,139,52,.96)}
.radio-range.volume::-moz-range-progress{background:rgba(194,132,38,.95)}
.radio-range::-moz-range-thumb{width:16px;height:16px;border:2px solid #8b5b27;border-radius:50%;background:#c58a3b;box-shadow:0 2px 5px #0005}.radio-range.progress{left:52.4%;top:68.5%;width:39%;height:4%}.radio-range.volume{left:55%;top:73.7%;width:34%;height:4%}.radio-label{position:absolute;left:49%;top:44.5%;width:45%;text-align:center;color:#51351e;text-shadow:0 1px #fff8;pointer-events:none}.radio-label small{display:block;font-size:clamp(11px,1.7vw,18px);margin-bottom:.4em}.radio-label strong{display:block;font-family:Georgia,serif;font-size:clamp(18px,3vw,34px);font-weight:500}.radio-create{position:absolute;left:11%;top:73.7%;width:29%;padding:9px 10px;border:0;border-radius:14px;background:rgba(94,56,25,.78);color:#fff3d7;font-weight:700;cursor:pointer}.radio-dialog{width:min(88vw,480px);border:0;border-radius:22px;padding:20px;background:#f7ead0;color:#4b331e;box-shadow:0 20px 60px #0008}.radio-dialog::backdrop{background:#0007}.radio-dialog form{position:relative}.radio-dialog h2{margin:0 35px 8px 0}.radio-dialog p{margin:12px 0 6px}.radio-dialog input[type=text],#radioTitle{box-sizing:border-box;width:100%;padding:12px;border:1px solid #c9ab7d;border-radius:12px;background:#fffaf0;font-size:16px}.radio-dialog-close{position:absolute;right:0;top:0;border:0;background:none;font-size:26px}.radio-files{max-height:42vh;overflow:auto;margin:12px 0}.radio-files label{display:flex;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #dec9a5}.radio-save{width:100%;padding:12px;border:0;border-radius:13px;background:#6f4b27;color:white;font-weight:700;font-size:15px}@media(max-width:600px){.radio-stage{width:100vw}.radio-create{font-size:11px;padding:7px 5px}.radio-label{top:44.1%}}\n

/* ========================================
   HOME v2 — LAYERED SCENE
   background + transparent house + hotspots
   ======================================== */
.house-home-body{
    margin:0;
    min-height:100svh;
    overflow-x:hidden;
    background:#8fc8e7;
}
.house-home-app{
    position:relative;
    width:100%;
    min-height:100svh;
    margin:0;
    padding:0;
    overflow:hidden;
}
.house-topbar{
    position:absolute;
    z-index:30;
    top:max(16px, env(safe-area-inset-top));
    left:clamp(18px,4vw,48px);
    right:clamp(18px,4vw,48px);
    width:auto;
    margin:0;
    color:#182019;
    text-shadow:0 1px 1px rgba(255,255,255,.28);
}
.house-greeting{font-size:clamp(22px,4vw,38px);font-weight:800}
.house-caption{font-size:clamp(13px,2.1vw,20px);color:#283b2d;margin-top:3px}
.house-tools{gap:10px}
.house-tool{
    width:clamp(42px,7vw,58px);
    height:clamp(42px,7vw,58px);
    border-radius:16px;
    background:rgba(255,255,255,.93);
    box-shadow:0 5px 18px rgba(0,0,0,.12);
}

.house-stage{
    position:relative;
    width:100%;
    height:100svh;
    min-height:720px;
    margin:0;
    overflow:hidden;
}
.house-background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    pointer-events:none;
}
.house-object-wrap{
    position:absolute;
    z-index:10;
    left:50%;
    top:clamp(135px,17vh,190px);
    width:min(112vw,1050px);
    aspect-ratio:1536/1024;
    transform:translateX(-50%);
}
.house-object{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
}
.house-hotspots{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
}
.house-unread-badge{
    left:46.4%;
    top:39.0%;
    width:4.6%;
    min-width:28px;
    transform:translate(-50%,-50%);
}
.chimney-status{
    left:66.5%;
    top:9.5%;
    width:9.5%;
    height:24%;
}
.house-hint{display:none}

@media (min-width:800px){
    .house-object-wrap{
        width:min(76vw,1050px);
        top:clamp(100px,13vh,150px);
    }
}
@media (max-width:600px){
    .house-home-app{padding:0}
    .house-topbar{
        width:auto;
        margin:0;
        top:max(14px, env(safe-area-inset-top));
        left:18px;
        right:18px;
    }
    .house-stage{
        width:100%;
        max-width:none;
        min-height:100svh;
    }
    .house-object-wrap{
        width:118vw;
        top:clamp(155px,18vh,205px);
    }
    .house-unread-badge{min-width:25px}
}

/* ========================================
   RADIO v1.1 — NEW BACKGROUND GEOMETRY
   New background 1173×1341; drawn slider knobs are gone.
   ======================================== */
.radio-stage{
    width:min(100vw,1173px);
    aspect-ratio:1173/1341;
}
.radio-hit.back{left:2.7%;top:2.1%;width:10%;height:6.4%;border-radius:24%}
.radio-hit.prev-program{left:1.5%;top:64.8%;width:8%;height:7%}
.radio-hit.next-program{left:39.2%;top:64.8%;width:8%;height:7%}
.radio-hit.prev-track{left:49.2%;top:68.4%;width:7%;height:6%}
.radio-hit.play{
    left:65.1%;top:67.3%;width:9.5%;height:7.8%;
    background:rgba(170,111,52,.96);
    box-shadow:0 3px 9px rgba(69,39,15,.36), inset 0 1px rgba(255,230,180,.6);
    border:2px solid rgba(104,64,26,.65);
}
.radio-hit.play::after{
    content:"";
    position:absolute;
    left:54%;top:50%;
    transform:translate(-50%,-50%);
    width:0;height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:16px solid #2e2115;
}
.radio-hit.play.is-playing::before,
.radio-hit.play.is-playing::after{
    content:"";
    position:absolute;
    top:50%;
    width:6px;height:22px;
    background:#2e2115;
    border:0;
    transform:translateY(-50%);
}
.radio-hit.play.is-playing::before{left:38%}
.radio-hit.play.is-playing::after{left:56%}
.radio-hit.next-track{left:84.0%;top:68.4%;width:7%;height:6%}
.radio-range.progress{left:55.3%;top:69.8%;width:28.8%;height:4%}
.radio-range.volume{left:55.3%;top:76.3%;width:28.8%;height:4%}
.radio-label{left:48%;top:46.5%;width:47%}
.radio-create{left:10%;top:78.5%;width:31%}

@media(max-width:600px){
    .radio-stage{width:100vw}
    .radio-label{top:46.2%}
}


/* ========================================
   v1.2.3 calibration patch
   ======================================== */

/* Main: move the wall/heart hotspot onto the heart-shaped attic window. */
.house-hotspots .house-zone-group[data-action="wall"]{
    transform:translate(24px,-6px);
}

/* Radio: controls calibrated against radio-bg.png (1173 × 1341).
   The artwork already contains prev/next glyphs and two empty slots.
   The interactive sliders sit exactly in those slots; track buttons are
   clickable over the printed glyphs, and Play lives above the seek slot. */
.radio-hit.prev-track{left:30.2%;top:66.3%;width:10.5%;height:6.5%}
.radio-hit.next-track{left:81.5%;top:66.3%;width:10.5%;height:6.5%}
.radio-hit.play{
    left:60.0%;top:57.7%;width:12.5%;height:9.5%;
    border-radius:50%;
}
.radio-range.progress{
    left:40.0%;top:65.8%;width:42.0%;height:4.2%;
}
.radio-range.volume{
    left:40.0%;top:72.0%;width:42.0%;height:4.2%;
}

.attachment-draft[hidden]{display:none !important;}


/* ========================================
   HOME wall/chat badges
   ======================================== */
.chat-home-badge{
    left:64.0%;
    top:39.0%;
}
.wall-home-badge{
    position:absolute;
    left:47.9%;
    top:38.0%;
    width:4.6%;
    min-width:27px;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    z-index:25;
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;
    background:#ef7f42;
    color:white;
    font-size:clamp(16px,2vw,24px);
    font-weight:900;
    box-shadow:0 4px 10px rgba(86,43,16,.28);
    cursor:pointer;
}
.wall-home-badge[hidden]{display:none!important}

/* ========================================
   HOMEGROWN WALL v1
   ======================================== */
.wall-body{
    margin:0;
    min-height:100vh;
    background:#d8c7aa;
    color:#4b3624;
    font-family:Arial,sans-serif;
}
.wall-topbar{
    position:sticky;
    top:0;
    z-index:200;
    min-height:72px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px;
    box-sizing:border-box;
    background:rgba(247,239,221,.94);
    border-bottom:1px solid rgba(94,69,43,.18);
    box-shadow:0 3px 14px rgba(70,48,27,.08);
    backdrop-filter:blur(12px);
}
.wall-topbar h1{margin:0;font-family:Georgia,serif;font-size:clamp(22px,4vw,32px);font-weight:600}
.wall-subtitle{font-size:12px;color:#8b755e;margin-top:2px}
.wall-home-link{
    flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
    border-radius:14px;background:#fffaf0;color:#5c432c;text-decoration:none;font-size:24px
}
.wall-top-actions{margin-left:auto;display:flex;gap:8px}
.wall-top-actions button{
    border:0;border-radius:13px;padding:10px 13px;background:#fffaf0;color:#5d432d;font-weight:700;
    box-shadow:0 2px 8px rgba(60,40,20,.08)
}
.wall-top-actions button.active{background:#66503a;color:white}
.wall-top-actions .wall-add{width:43px;font-size:22px;padding:7px}

.wall-canvas{
    position:relative;
    width:min(100%,920px);
    height:190vh;
    min-height:1250px;
    max-height:2200px;
    margin:0 auto;
    overflow:hidden;
    background:
      linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.02)),
      repeating-linear-gradient(90deg,rgba(117,91,58,.025) 0 1px,transparent 1px 44px),
      #e5d6bb;
    box-shadow:inset 0 0 60px rgba(96,66,38,.11);
}
.wall-canvas::before{
    content:"";
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.38),transparent 30%),
               radial-gradient(circle at 80% 70%,rgba(116,78,43,.05),transparent 33%);
}
.wall-empty{
    position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);
    text-align:center;color:#9a846d;line-height:1.5;pointer-events:none
}
.wall-item{
    position:absolute;
    transform-origin:center center;
    touch-action:none;
    cursor:pointer;
    transition:filter .12s,box-shadow .12s;
}
.wall-item-body{position:relative;width:100%;box-sizing:border-box}
.wall-photo .wall-item-body{
    padding:5.5%;
    background:#fffaf0;
    border-radius:3px;
    box-shadow:0 8px 18px rgba(59,39,22,.24)
}
.wall-photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#eee}
.wall-note .wall-item-body{
    aspect-ratio:1/.82;
    padding:15% 11% 10%;
    border-radius:2px;
    box-shadow:0 7px 14px rgba(65,45,25,.2);
    display:flex;align-items:flex-start;justify-content:center
}
.paper-yellow{background:#f6e78a}
.paper-pink{background:#f5bdc8}
.paper-cream{background:#f6e4bd}
.wall-note-text{
    width:100%;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;
    font-size:clamp(12px,2.2vw,24px);
    line-height:1.24;
    color:#4b3b31
}
.wall-mount{position:absolute;z-index:4;pointer-events:none}
.wall-mount.tape{
    left:50%;top:-5%;width:34%;height:12%;transform:translateX(-50%) rotate(-2deg);
    background:rgba(237,218,165,.72);box-shadow:0 1px 2px rgba(80,60,35,.14)
}
.wall-mount.pin{
    left:50%;top:3%;transform:translateX(-50%);
    width:13px;height:13px;border-radius:50%;background:#c94f38;
    box-shadow:0 2px 4px rgba(50,25,15,.4),inset 0 1px rgba(255,255,255,.5)
}
.wall-mount.nail{
    left:50%;top:2%;transform:translateX(-50%);
    width:9px;height:9px;border-radius:50%;background:#615e58;
    box-shadow:0 2px 3px rgba(0,0,0,.4)
}
.wall-new-badge{
    position:absolute;right:-8px;top:-8px;
    width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
    background:#ef7f42;color:white;font-weight:900;font-size:19px;
    border:2px solid #fff6e7;box-shadow:0 3px 7px rgba(80,40,20,.3)
}
.wall-item.arranging{cursor:grab}
.wall-item.arranging:active{cursor:grabbing}
.wall-item.selected .wall-item-body{filter:drop-shadow(0 0 8px rgba(38,116,165,.75));outline:2px dashed rgba(42,120,165,.8);outline-offset:6px}

.wall-dialog{
    width:min(90vw,520px);border:0;border-radius:22px;padding:20px;background:#f8edd8;color:#4d3826;
    box-shadow:0 20px 65px rgba(0,0,0,.35)
}
.wall-dialog::backdrop{background:rgba(30,22,16,.55)}
.wall-dialog form{position:relative}
.wall-dialog h2{margin:0 40px 16px 0;font-family:Georgia,serif}
.wall-dialog-close{position:absolute;right:0;top:-4px;border:0;background:none;font-size:28px;color:#7b6650}
.wall-add-grid,.wall-mount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.wall-add-grid button,.wall-mount-grid button{
    min-height:100px;border:1px solid #d7bea0;border-radius:16px;background:#fff9ee;color:#4c3828;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:25px
}
.wall-add-grid span,.wall-mount-grid span{font-size:12px;font-weight:700}
.wall-dialog textarea{
    box-sizing:border-box;width:100%;resize:vertical;border:1px solid #d1b99a;border-radius:13px;padding:13px;
    background:#fffaf0;font:16px/1.4 Arial,sans-serif;color:#493628
}
.wall-paper-picker{display:flex;flex-wrap:wrap;gap:12px;margin:13px 0}
.wall-paper-picker label{display:flex;align-items:center;gap:5px;font-size:13px}
.paper-dot{width:18px;height:18px;border-radius:5px;display:inline-block;border:1px solid #bca888}
.paper-dot.yellow{background:#f6e78a}.paper-dot.pink{background:#f5bdc8}.paper-dot.cream{background:#f6e4bd}
.wall-select-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0;font-size:14px}
.wall-select-label select{padding:8px;border:1px solid #d1b99a;border-radius:10px;background:#fffaf0}
.wall-primary{width:100%;padding:12px;border:0;border-radius:13px;background:#69513b;color:white;font-weight:800;font-size:15px}
.wall-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:62vh;overflow:auto}
.wall-archive-tile{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:#ddd}
.wall-archive-tile img{width:100%;height:100%;object-fit:cover}
.wall-archive-tile span{position:absolute;left:0;right:0;bottom:0;padding:4px;background:#0008;color:white;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wall-viewer{
    position:fixed;inset:0;z-index:500;background:rgba(25,20,16,.86);
    display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box
}
.wall-viewer[hidden]{display:none}
.wall-viewer-close{
    position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));z-index:510;width:42px;height:42px;border:0;
    border-radius:14px;background:#fff;color:#555;font-size:26px
}
.wall-viewer-content{max-width:min(94vw,1000px);max-height:88vh;display:flex;align-items:center;justify-content:center}
.wall-viewer-content img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:10px}
.wall-view-note{
    width:min(78vw,540px);min-height:280px;max-height:78vh;overflow:auto;padding:50px 36px;box-sizing:border-box;
    font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;font-size:clamp(22px,5vw,38px);line-height:1.3;
    box-shadow:0 14px 40px rgba(0,0,0,.35);white-space:pre-wrap
}
.wall-edit-tools{
    position:fixed;z-index:400;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
    display:flex;gap:5px;padding:7px;border-radius:18px;background:rgba(55,44,34,.94);box-shadow:0 8px 25px rgba(0,0,0,.3)
}
.wall-edit-tools[hidden]{display:none}
.wall-edit-tools button{
    width:42px;height:42px;border:0;border-radius:12px;background:#fff8e9;color:#4f3a29;font-size:20px
}

@media(max-width:600px){
    .wall-topbar{min-height:68px}
    .wall-subtitle{display:none}
    .wall-top-actions button{padding:9px 10px;font-size:12px}
    .wall-canvas{height:190vh;min-height:1300px}
    .wall-add-grid{grid-template-columns:1fr}
    .wall-add-grid button{min-height:66px;flex-direction:row}
    .wall-note-text{font-size:clamp(12px,4vw,21px)}
    .wall-edit-tools button{width:38px;height:38px}
}


/* ========================================
   HOMEGROWN FRIDGE v1
   ======================================== */
.fridge-body{
    margin:0;min-height:100vh;background:#ded5c8;color:#493a2d;font-family:Arial,sans-serif;
}
.fridge-topbar{
    position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:12px;
    min-height:70px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;box-sizing:border-box;
    background:rgba(247,243,235,.95);border-bottom:1px solid rgba(76,64,50,.12);
    box-shadow:0 3px 15px rgba(58,47,35,.08);backdrop-filter:blur(12px)
}
.fridge-topbar h1{margin:0;font-family:Georgia,serif;font-size:clamp(23px,4vw,32px);font-weight:600}
.fridge-subtitle{font-size:12px;color:#8b7b69;margin-top:2px}
.fridge-home{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#fff;color:#594839;text-decoration:none;font-size:24px;box-shadow:0 2px 8px #0001}
.fridge-add{margin-left:auto;width:44px;height:44px;border:0;border-radius:14px;background:#637d63;color:white;font-size:24px;box-shadow:0 3px 10px rgba(49,71,49,.22)}
.fridge-door-wrap{position:relative;width:min(100%,900px);margin:0 auto;min-height:145vh;padding:22px 12px 80px;box-sizing:border-box;background:linear-gradient(100deg,#8c9e91 0%,#b8c4ba 14%,#e0e6df 48%,#b2beb4 83%,#8d9e91 100%);box-shadow:inset 12px 0 30px #36483b22,inset -12px 0 30px #36483b22}
.fridge-door-wrap::before{content:"";position:absolute;left:0;right:0;top:48%;height:8px;background:linear-gradient(#6f7e72,#aab6ac,#6e7d70);box-shadow:0 2px 5px #0003}
.fridge-door{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 15px;padding:12px 5px 30px}
.fridge-card{position:relative;min-height:158px;border:0;border-radius:5px;padding:30px 18px 18px;text-align:left;background:#fbf1cf;color:#51412d;box-shadow:0 8px 17px rgba(46,40,31,.23);transform:rotate(var(--tilt));transition:transform .14s ease,box-shadow .14s ease;cursor:pointer}
.fridge-card:nth-child(3n+2){background:#f5d6d6}.fridge-card:nth-child(3n+3){background:#dce8d0}
.fridge-card:hover,.fridge-card:active{transform:rotate(var(--tilt)) scale(1.025);box-shadow:0 11px 22px rgba(46,40,31,.29)}
.fridge-card strong{display:block;font-family:Georgia,serif;font-size:clamp(17px,3vw,23px);line-height:1.15;margin-bottom:19px;overflow-wrap:anywhere}
.fridge-magnet{position:absolute;left:50%;top:9px;width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:#c95747;box-shadow:0 2px 4px #0005,inset 0 1px #fff7}
.fridge-fake-lines{display:flex;flex-direction:column;gap:8px}
.fridge-fake-lines span{height:4px;border-radius:4px;background:rgba(82,67,48,.26)}
.fridge-fake-lines span:nth-child(2){width:78%}.fridge-fake-lines span:nth-child(3){width:62%}
.fridge-card-icons{position:absolute;right:12px;bottom:10px;font-size:18px;letter-spacing:4px}
.fridge-card.complete{outline:3px solid rgba(73,128,75,.48);outline-offset:-4px}
.fridge-card.complete .fridge-card-icons{color:#3f7b45;font-size:20px;font-weight:900}
.fridge-empty{position:absolute;z-index:3;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;color:#52635a;background:#ffffffa8;padding:18px 24px;border-radius:18px;line-height:1.5}
.fridge-empty[hidden]{display:none}

.fridge-dialog{width:min(92vw,590px);border:0;border-radius:22px;padding:20px;background:#f8f1e4;color:#49392b;box-shadow:0 24px 70px #0007}
.fridge-dialog::backdrop{background:#0008}.fridge-dialog form{position:relative}.fridge-dialog h2{margin:0 42px 18px 0;font-family:Georgia,serif}.fridge-dialog-close{position:absolute;right:0;top:-5px;border:0;background:none;font-size:28px;color:#766655}
.fridge-small-dialog{width:min(88vw,430px)}
.fridge-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fridge-choice-grid button{min-height:110px;border:1px solid #dac9b1;border-radius:18px;background:#fffaf1;color:#4f4032;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:30px}.fridge-choice-grid span{font-size:14px;font-weight:700}
.fridge-field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:13px;font-weight:700}.fridge-field input,.fridge-field textarea{box-sizing:border-box;width:100%;border:1px solid #d5c5af;border-radius:12px;background:#fffdf8;padding:12px;font:16px Arial,sans-serif;color:#46382d}.fridge-field textarea{resize:vertical;line-height:1.4}
.fridge-rows-editor{display:flex;flex-direction:column;gap:7px;margin:10px 0}.fridge-edit-row{display:flex;gap:6px}.fridge-edit-row input{flex:1;min-width:0;border:1px solid #d5c5af;border-radius:11px;background:#fffdf8;padding:11px;font-size:15px}.fridge-edit-row button{width:39px;border:0;border-radius:10px;background:#eadfd1;color:#6e5a48;font-size:21px}
.fridge-secondary{border:1px solid #cdbda8;border-radius:11px;background:#fffaf1;color:#5b4a3a;padding:10px 12px;font-weight:700}
.fridge-photo-line{display:flex;align-items:center;gap:8px;margin:15px 0;padding:10px 11px;border-radius:12px;background:#ece4d7;font-size:12px}.fridge-photo-line span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fridge-photo-line button{border:0;border-radius:9px;padding:8px;background:#fffaf1;color:#554434}
.fridge-primary{border:0;border-radius:13px;background:#607a60;color:white;padding:12px 16px;font-weight:800;font-size:15px}.fridge-create-section[hidden]{display:none}
.fridge-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:65vh;overflow:auto}.fridge-archive-tile{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:#ddd}.fridge-archive-tile img{width:100%;height:100%;object-fit:cover}.fridge-archive-tile span{position:absolute;left:0;right:0;bottom:0;padding:4px;background:#0008;color:#fff;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fridge-card-head{display:flex;align-items:flex-start;gap:10px}.fridge-card-head>div:first-child{flex:1}.fridge-card-meta{font-size:12px;color:#8b7764;margin-top:-10px;margin-bottom:15px}.fridge-photo-open{border:0;border-radius:11px;background:#e9e0d2;color:#514234;padding:9px 10px;font-weight:700}.fridge-photo-open[hidden]{display:none}
.fridge-check-list{display:flex;flex-direction:column;gap:0;border:1px solid #ded0bc;border-radius:14px;overflow:hidden;background:#fffdf7}.fridge-check-row{display:flex;align-items:center;gap:14px;min-height:50px;padding:10px 12px;border-bottom:1px solid #eee3d4;box-sizing:border-box}.fridge-check-row:last-child{border-bottom:0}.fridge-check-row span{flex:1;line-height:1.35}.fridge-check-row input{width:24px;height:24px;flex:0 0 24px;accent-color:#638263}.fridge-check-row.done span{text-decoration:line-through;color:#9a9288}.fridge-note-full{white-space:pre-wrap;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:clamp(17px,3.8vw,23px);line-height:1.45;padding:22px;background:#fff6c9;border-radius:5px;box-shadow:0 6px 15px #0002}
.fridge-card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.fridge-danger{margin-right:auto;border:0;border-radius:12px;background:#ead7d2;color:#8b4339;padding:10px 13px;font-weight:700}.fridge-card-actions button[hidden]{display:none}
.fridge-viewer{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:#171411dd}.fridge-viewer[hidden]{display:none}.fridge-viewer img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:10px}.fridge-viewer-close{position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));width:44px;height:44px;border:0;border-radius:14px;background:white;color:#555;font-size:28px}
@media(max-width:600px){.fridge-subtitle{display:none}.fridge-door-wrap{min-height:150vh;padding-left:8px;padding-right:8px}.fridge-door{gap:14px 9px}.fridge-card{min-height:142px;padding:27px 13px 15px}.fridge-card strong{font-size:17px}.fridge-choice-grid{grid-template-columns:1fr}.fridge-choice-grid button{min-height:72px;flex-direction:row}.fridge-archive-grid{grid-template-columns:repeat(3,1fr)}}
\n\n/* ========================================\n   v1.4.1 stabilization patch\n   ======================================== */\n.fridge-home-badge{\n    position:absolute;left:47.9%;top:58.7%;width:4.6%;min-width:27px;aspect-ratio:1;\n    transform:translate(-50%,-50%);z-index:25;border:2px solid rgba(255,255,255,.9);\n    border-radius:50%;background:#ef7f42;color:white;font-size:clamp(16px,2vw,24px);font-weight:900;\n    box-shadow:0 4px 10px rgba(86,43,16,.28);cursor:pointer\n}\n.fridge-home-badge[hidden]{display:none!important}\n.fridge-new-badge{\n    position:absolute;right:-8px;top:-8px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;\n    background:#ef7f42;color:white;font-weight:900;font-size:18px;border:2px solid #fff6e7;box-shadow:0 3px 7px rgba(80,40,20,.3)\n}\n.fridge-card.is-new{box-shadow:0 8px 17px rgba(46,40,31,.23),0 0 0 2px rgba(239,127,66,.24)}\n\n/* Фотография холодильника теперь сама dialog/top-layer и всегда выше открытой карточки. */\ndialog.fridge-viewer{\n    width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;\n    z-index:9999;padding:24px;box-sizing:border-box;background:#171411ee;overflow:hidden\n}\ndialog.fridge-viewer[open]{display:flex;align-items:center;justify-content:center}\ndialog.fridge-viewer::backdrop{background:rgba(18,15,12,.74)}\ndialog.fridge-viewer img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:10px}\n\n/* Верхнее левое окно: временный художественный слой Стены поверх старого пузыря/цифры.\n   Это отдельный слой, поэтому будущая замена рисунка дома не затронет механику. */\n.house-wall-window-art{\n    position:absolute;z-index:12;pointer-events:none;\n    left:33.2%;top:35.9%;width:16.8%;height:17.1%;border-radius:10%;overflow:hidden;\n    background:linear-gradient(145deg,#ffe8a8,#fff1bd 65%,#f6d98d);\n    box-shadow:inset 0 0 12px rgba(117,70,20,.18)\n}\n.house-wall-window-art .mini-photo{position:absolute;background:#fffaf0;padding:3%;box-sizing:border-box;box-shadow:0 2px 5px #6b472744}\n.house-wall-window-art .mini-photo::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(145deg,#75b6c8 0 45%,#79a45b 46% 100%)}\n.house-wall-window-art .mini-photo.one{left:12%;top:20%;width:39%;height:54%;transform:rotate(-7deg)}\n.house-wall-window-art .mini-photo.two{right:10%;top:13%;width:35%;height:48%;transform:rotate(6deg)}\n.house-wall-window-art .mini-note{position:absolute;left:38%;bottom:9%;width:34%;height:35%;background:#f6dd69;transform:rotate(2deg);box-shadow:0 2px 4px #6b472733}\n.house-wall-window-art .mini-note::before,.house-wall-window-art .mini-note::after{content:"";position:absolute;left:18%;right:18%;height:5%;background:#9b7d4866;border-radius:5px}\n.house-wall-window-art .mini-note::before{top:38%}.house-wall-window-art .mini-note::after{top:58%}\n\n/* Стена: y теперь рассчитывается JS от ширины полотна, поэтому расстановка масштабируется одинаково на ПК и телефоне. */\n.wall-canvas{min-height:max(1300px,190vh)}\n\n\n/* ========================================
   v1.4.2 field-test fixes
   ======================================== */
/* Closed <dialog> must never be painted by our flex viewer rule. */
dialog.fridge-viewer:not([open]){display:none!important}
dialog.fridge-viewer[open]{display:flex!important}

/* The house artwork itself now owns the wall-window illustration. */
.house-wall-window-art{display:none!important}
/* Hotspots stay in the native 1536x1024 image coordinate system. */
.house-hotspots .house-zone-group[data-action="wall"]{transform:none}

/* Radio controls calibrated to radio-bg.png 1173x1341.
   Transport buttons are above the two physical slots; sliders occupy slots. */
.radio-hit.prev-track{left:51.0%;top:62.0%;width:8.5%;height:6.8%;border-radius:50%}
.radio-hit.play{left:63.0%;top:61.0%;width:10.5%;height:8.3%;border-radius:50%}
.radio-hit.next-track{left:76.0%;top:62.0%;width:8.5%;height:6.8%;border-radius:50%}
.radio-range.progress{left:55.6%;top:69.2%;width:28.5%;height:4.0%}
.radio-range.volume{left:55.6%;top:75.7%;width:28.5%;height:4.0%}


/* ========================================
   Homegrown 1.0.3 — Fridge notification badge
   Same visual language as Wall notification.
   ======================================== */
.fridge-home-badge{
    position:absolute;
    left:47.9%;
    top:58.7%;
    width:4.6%;
    min-width:27px;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    z-index:25;
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;
    background:#ef7f42;
    color:#fff;
    font-size:clamp(16px,2vw,24px);
    font-weight:900;
    line-height:1;
    display:grid;
    place-items:center;
    padding:0;
    box-shadow:0 4px 10px rgba(86,43,16,.28);
    cursor:pointer;
}
.fridge-home-badge[hidden]{
    display:none !important;
}

/* New item marker on a refrigerator card: visually identical to Wall. */
.fridge-new-badge{
    position:absolute;
    right:-8px;
    top:-8px;
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#ef7f42;
    color:#fff;
    font-weight:900;
    font-size:19px;
    line-height:1;
    border:2px solid #fff6e7;
    box-shadow:0 3px 7px rgba(80,40,20,.3);
    padding:0;
    z-index:12;
    pointer-events:none;
}
.fridge-card.is-new{
    box-shadow:0 8px 17px rgba(46,40,31,.23);
}


/* Homegrown 1.0.4 — refrigerator photo viewer visibility fix.
   The viewer is a <dialog>; without [open] it must never occupy the page. */
dialog#fridgeViewer:not([open]),
dialog.fridge-viewer:not([open]),
#fridgeViewer[hidden]{
    display:none !important;
}
dialog#fridgeViewer[open],
dialog.fridge-viewer[open]{
    display:flex !important;
    align-items:center;
    justify-content:center;
}


/* Homegrown 1.0.5 — photo button in opened fridge card.
   Keep it away from the dialog close button: lower-left corner. */
.fridge-card-dialog{position:relative}
#fridgeViewPhoto{
    position:absolute !important;
    left:20px !important;
    right:auto !important;
    top:auto !important;
    bottom:20px !important;
    z-index:2;
}


/* Homegrown 1.0.6 — photo button in normal flow under card content.
   It never overlaps the title, checklist/note text, close button, or action buttons. */
.fridge-card-dialog #fridgeViewPhoto{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:auto !important;
}
.fridge-photo-row{
    display:flex;
    justify-content:flex-start;
    min-height:0;
    margin-top:12px;
}
.fridge-photo-row:has(#fridgeViewPhoto[hidden]){
    display:none;
}
.fridge-photo-open{
    flex:0 0 auto;
}


/* ========================================
   Homegrown 1.0.7 — final Radio control calibration
   Three visible transport buttons above seek/volume slots.
   ======================================== */

/* Transport row */
.radio-hit.prev-track,
.radio-hit.play,
.radio-hit.next-track{
    position:absolute;
    top:60.4%;
    height:8.4%;
    aspect-ratio:1;
    width:auto;
    border-radius:50%;
    background:rgba(174,113,54,.96);
    border:2px solid rgba(104,64,26,.68);
    box-shadow:
        0 4px 10px rgba(69,39,15,.34),
        inset 0 1px 0 rgba(255,230,180,.58);
    z-index:8;
}
.radio-hit.prev-track{left:50.0%}
.radio-hit.play{left:63.0%}
.radio-hit.next-track{left:76.0%}

.radio-hit.prev-track:hover,
.radio-hit.prev-track:active,
.radio-hit.play:hover,
.radio-hit.play:active,
.radio-hit.next-track:hover,
.radio-hit.next-track:active{
    background:rgba(188,126,64,.98);
    box-shadow:
        0 4px 10px rgba(69,39,15,.34),
        0 0 16px rgba(255,205,90,.28),
        inset 0 1px 0 rgba(255,230,180,.58);
}

/* Previous-track icon */
.radio-hit.prev-track::before,
.radio-hit.prev-track::after{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.radio-hit.prev-track::before{
    left:31%;
    width:4px;
    height:24%;
    background:#2e2115;
    border-radius:2px;
}
.radio-hit.prev-track::after{
    left:37%;
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-right:14px solid #2e2115;
}

/* Next-track icon */
.radio-hit.next-track::before,
.radio-hit.next-track::after{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.radio-hit.next-track::before{
    right:31%;
    width:4px;
    height:24%;
    background:#2e2115;
    border-radius:2px;
}
.radio-hit.next-track::after{
    right:37%;
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:14px solid #2e2115;
}

/* Play / pause icon remains dynamic. */
.radio-hit.play::after{
    content:"";
    position:absolute;
    left:54%;
    top:50%;
    transform:translate(-50%,-50%);
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:16px solid #2e2115;
}
.radio-hit.play.is-playing::before,
.radio-hit.play.is-playing::after{
    content:"";
    position:absolute;
    top:50%;
    width:6px;
    height:22px;
    background:#2e2115;
    border:0;
    transform:translateY(-50%);
}
.radio-hit.play.is-playing::before{left:38%}
.radio-hit.play.is-playing::after{left:56%}

/* Sliders sit directly on the two engraved grooves in radio-bg.png. */
.radio-range.progress{
    left:57.0%;
    top:70.6%;
    width:28.5%;
    height:4.0%;
    z-index:7;
}
.radio-range.volume{
    left:57.0%;
    top:77.35%;
    width:28.5%;
    height:4.0%;
    z-index:7;
}

/* Keep the clickable home/window layers tied to the house PNG coordinates. */
.house-hotspots .house-zone-group[data-action="wall"]{
    transform:none !important;
}


/* Homegrown 1.0.9 — global radio mini-player */
.global-radio-bar{position:fixed;z-index:8500;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(94vw,620px);box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid rgba(96,64,33,.22);border-radius:17px;background:rgba(250,239,216,.96);box-shadow:0 7px 24px rgba(48,31,18,.25);backdrop-filter:blur(10px);color:#513821}
.global-radio-bar button{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:12px;background:#fff8e9;color:#4e3724;font-size:17px;font-weight:800;cursor:pointer}.global-radio-bar button:active{transform:scale(.96)}
.global-radio-title{min-width:0;flex:1;padding:0 4px;line-height:1.1}.global-radio-title small,.global-radio-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-radio-title small{font-size:10px;color:#8b745c;margin-bottom:3px}.global-radio-title strong{font-family:Georgia,serif;font-size:14px;font-weight:600}.global-radio-bar .global-radio-close{background:transparent;font-size:24px;color:#826b55}.global-radio-audio{display:none}
@media(max-width:520px){.global-radio-bar{gap:4px;padding:6px}.global-radio-bar button{flex-basis:36px;width:36px;height:36px}.global-radio-title strong{font-size:13px}}

/* Homegrown beta finishing patch */
.archive-dialog-backdrop{
    position:fixed;inset:0;z-index:1200;background:rgba(20,18,15,.42);
    display:flex;align-items:center;justify-content:center;padding:18px;
}
.archive-dialog-backdrop[hidden]{display:none!important}
.archive-dialog-card{
    width:min(92vw,480px);max-height:76vh;overflow:hidden;background:#fffdf8;
    border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.28);display:flex;flex-direction:column;
}
.archive-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eadfce}
.archive-dialog-head button{border:0;background:transparent;font-size:28px;line-height:1}
.archive-destination-list,.archive-send-list{overflow:auto;padding:8px}
.archive-destination{
    width:100%;border:0;background:transparent;border-radius:12px;padding:12px 14px;
    display:flex;gap:10px;align-items:center;text-align:left;font:inherit;
}
.archive-destination:hover,.archive-destination:active{background:#f2eadf}
.archive-video-card{align-items:center}
.archive-video-preview{
    width:112px;height:76px;object-fit:cover;border-radius:12px;background:#2a2927;flex:0 0 auto;cursor:pointer;
}
.archive-picker-video-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#222}
.archive-picker-video-tile video{width:100%;height:100%;object-fit:cover;display:block}
.archive-video-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:rgba(0,0,0,.58);color:#fff;font-size:18px;pointer-events:none;
}

/* Homegrown 1.0.13 — settings/admin */
.settings-action-link{display:block;box-sizing:border-box;width:100%;padding:12px 14px;border:0;border-radius:14px;background:#f2f3f4;color:#333;text-align:center;text-decoration:none;font-weight:700;font-size:15px}
.settings-admin-link{background:#efe8dc;color:#5d4630}.settings-card-danger-lite .settings-action-link{background:#f3eceb;color:#8a443c}
.admin-body{background:#f4f5f7}.admin-help{margin:-4px 0 14px;color:#777;font-size:13px;line-height:1.45}
.admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.admin-stats div{padding:10px 12px;border-radius:12px;background:#f5f2ec;display:flex;flex-direction:column;gap:3px}.admin-stats span{font-size:11px;color:#888}.admin-stats strong{font-size:17px}
.admin-users{display:flex;flex-direction:column;gap:9px}.admin-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eee}.admin-user-row:last-child{border-bottom:0}.admin-user-row small{display:block;margin-top:3px;color:#999}
.admin-user-row button,.admin-clear-grid button{border:0;border-radius:12px;background:#f1eee9;color:#4e4438;padding:10px 12px;font-weight:700}.admin-clear-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.admin-clear-grid .admin-danger{grid-column:1/-1;background:#f1d9d6;color:#8a332b}.admin-lock-button{margin-bottom:26px;background:#e7e7e7}
@media(max-width:520px){.admin-clear-grid{grid-template-columns:1fr}.admin-clear-grid .admin-danger{grid-column:auto}}


/* Homegrown 1.0.14 — family-test polish */
/* Video must never cover the attachment actions button. */
.attachment-more{flex:0 0 28px;position:relative;z-index:6}
.attachment-video .attachment-body{max-width:calc(100% - 34px)}
.attachment-video video{width:100%;max-width:270px;height:auto}

/* Same, calmer note typography on Windows / Android / iOS. */
.wall-note-text,.wall-view-note{font-family:"Trebuchet MS",Arial,sans-serif!important;font-weight:400;letter-spacing:.01em}

/* Save a Wall photo to the current user's Archive; kept outside the media rectangle. */
.wall-viewer-save{
 position:absolute;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:512;
 border:0;border-radius:14px;padding:11px 14px;background:#fff;color:#4f453b;
 font:700 13px Arial,sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.22)
}
.wall-viewer-save[hidden]{display:none!important}.wall-viewer-save:disabled{opacity:.75}