* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: #100806 url("../images/bg.jpg") center top / cover no-repeat fixed;
    color: #e0cbbd;
}
.top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 10px clamp(8px, 2vw, 20px);
    background: rgba(16, 8, 6, 0.78);
    border-bottom: 1px solid rgba(255, 176, 90, 0.28);
}
.brand { display: flex; align-items: center; justify-self: start; min-width: 0; max-width: 100%; text-decoration: none; line-height: 0; }
.brand img {
    height: clamp(32px, 6vw, 58px);
    width: auto;
    max-width: min(46vw, 226px, 100%);
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.5));
}
nav {
    display: flex;
    grid-column: 2;
    justify-self: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
nav::-webkit-scrollbar { display: none; }
.menutile {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: auto;
    text-decoration: none;
    color: #ffe7cf;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
}
.menutile span { font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }
.menutile img {
    width: clamp(40px, 7vw, 64px);
    height: clamp(40px, 7vw, 64px);
    object-fit: cover;
    border-radius: 14px;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 186, 92, 0.4), 0 8px 18px rgba(0, 0, 0, 0.4);
}
.menutile:hover img,
.menutile:focus-visible img {
    box-shadow: 0 0 0 1px #ffb15a, 0 0 18px rgba(255, 120, 40, 0.65);
}
.menutile:focus-visible { outline: 2px solid #ffb15a; outline-offset: 3px; border-radius: 8px; }
main { padding: 8px 24px 40px; max-width: 860px; width: 100%; margin-inline: auto; text-align: center; }
main > ul:not(.usage):not(.plus-reports):not(.live-log),
main > ol { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
body.home {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body.home main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    overflow: auto;
    width: 100%;
}
body.home main > p { max-width: 36em; margin-left: auto; margin-right: auto; }
body.home .offer {
    max-width: 22em;
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    line-height: 1.45;
    color: #f3ddd4;
}
body.home .home-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
body.home .home-actions .button { padding: 12px 22px; font-size: 1.05rem; }
body.home .home-note { margin-top: 14px; }
body.home .home-note a { color: #ffc27a; font-weight: 600; text-decoration: none; }
body.home .home-note a:hover,
body.home .home-note a:focus-visible { color: #ffe7cf; }
h1 { font-size: 2rem; font-weight: 600; margin-bottom: 12px; }
h1.section-title {
    font-family: Georgia, "Palatino Linotype", Palatino, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #e0b56a;
    margin: 6px 0 14px;
}
h1 .page-title { display: block; width: auto; height: clamp(34px, 6vw, 52px); max-width: 100%; margin: 8px auto 10px; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 20px 0 8px; color: #e0cbbd; }
p, li { line-height: 1.5; }
form { display: grid; gap: 12px; max-width: 420px; margin-top: 16px; margin-inline: auto; text-align: left; }
form.action { text-align: center; }
form.companion-form {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    max-width: 720px;
    color-scheme: dark;
}
form.companion-form > * { grid-column: 1 / -1; }
form.companion-form > label.half,
form.companion-form > button { grid-column: auto; }
form.companion-form > button:only-of-type { grid-column: 1 / -1; }
form.companion-form #traits-woman:not([hidden]),
form.companion-form #traits-man:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
form.companion-form label { color: #c4aa9a; font-size: 0.88rem; }
form.companion-form label.check,
.chat-head form.media-mode label {
    display: flex;
    align-items: center;
    gap: 8px;
}
form.companion-form label.check input,
.chat-head form.media-mode input {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: #e0b56a;
    background: transparent;
    border: 0;
    flex: 0 0 auto;
}
.chat-head form.media-mode { display: flex; width: auto; max-width: none; margin: 0; }
.chat-head form.media-mode label { color: #c4aa9a; font-size: 0.75rem; white-space: nowrap; gap: 6px; }
.chat-head form.media-mode input { width: 15px; height: 15px; }
form.companion-form input,
form.companion-form textarea,
form.companion-form select {
    background: rgba(16, 8, 6, 0.85);
    color: #e0cbbd;
    border: 1px solid rgba(255, 176, 90, 0.4);
}
form.companion-form select option { background: #1a0e0a; color: #e0cbbd; }
form.companion-form input:focus,
form.companion-form textarea:focus,
form.companion-form select:focus {
    outline: 2px solid #ffb15a;
    border-color: #ffb15a;
}
form.companion-form input:-webkit-autofill {
    -webkit-text-fill-color: #e0cbbd;
    caret-color: #e0cbbd;
    box-shadow: 0 0 0 1000px #1a0e0a inset;
}
label { display: grid; gap: 4px; font-size: 0.95rem; }
input, textarea, select, button {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid #e4d4c8;
    border-radius: 8px;
    color: #1a1a1a;
    background: #fffaf6;
}
button, .button {
    background: linear-gradient(180deg, #ffc27a, #e2582c);
    color: #1a0c08;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
}
.usage { list-style: none; display: grid; gap: 8px; margin-top: 12px; max-width: 640px; margin-inline: auto; text-align: left; }
.usage li { background: #fffaf6; border: 1px solid #eadfd4; border-radius: 12px; padding: 10px 12px; color: #1a1a1a; }
.cards { display: grid; gap: 12px; margin-top: 20px; }
.portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
a.companion-tile,
article.companion-tile {
    position: relative;
    display: block;
    min-height: 260px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #e0cbbd;
    background: #2a1612;
    border: 1px solid rgba(255, 176, 90, 0.35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.companion-tile img { width: 100%; height: 300px; object-fit: cover; object-position: center top; display: block; }
.companion-tile > span,
.companion-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 36px 12px 12px;
    background: linear-gradient(transparent, rgba(16, 8, 6, 0.92));
}
.companion-tile-hit { position: absolute; inset: 0; z-index: 0; }
.companion-tile strong { font-size: 1.05rem; line-height: 1.2; }
.companion-tile em { font-style: normal; font-size: 0.78rem; line-height: 1.3; color: #f3ddd4; font-weight: 400; }
a.companion-tile em:last-child { color: #ffc27a; font-weight: 600; margin-top: 4px; }
.companion-tile-caption .row-actions { margin-top: 6px; }
.companion-tile-caption a:not(.button) { color: #ffc27a; font-size: 0.78rem; font-weight: 600; text-decoration: none; }
.companion-tile-caption a:hover,
.companion-tile-caption a:focus-visible { color: #ffe7cf; }
.companion-tile-caption button { padding: 6px 10px; font-size: 0.78rem; }
a.companion-tile:hover,
article.companion-tile:hover,
a.companion-tile:focus-visible,
.companion-tile-hit:focus-visible {
    border-color: #ffb15a;
    box-shadow: 0 0 18px rgba(255, 120, 40, 0.45);
}
a.companion-tile:focus-visible,
.companion-tile-hit:focus-visible { outline: 2px solid #ffb15a; outline-offset: 3px; }
body:has(.picks) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body:has(.picks) main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin-inline: auto;
    padding: 6px 24px 8px;
}
body:has(.picks) .foot {
    flex: 0 0 auto;
    padding: 8px 10px 12px;
}
body:has(.picks) main > h1,
body:has(.picks) main > p { flex: 0 0 auto; }
body:has(.picks) main > h1 { margin-bottom: 4px; display: flex; justify-content: center; }
body:has(.picks) .page-title { height: clamp(28px, 5vh, 52px); margin: 2px auto 4px; }
.picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    flex: 1 1 auto;
    min-height: 0;
}
a.tile {
    position: relative;
    display: block;
    min-height: 0;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
}
a.tile:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
a.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}
.picks a.tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 12px) / 2);
    justify-self: center;
}
.unread {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 1.5em;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e0b56a;
    color: #1a0e0a;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
a.tile span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(8px, 1.4vh, 14px) 16px;
    background: rgba(26, 26, 26, 0.72);
    color: #fff;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 600;
}
@media (max-width: 640px) {
    body:has(.picks) {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
    }
    body:has(.picks) main {
        flex: none;
        overflow: visible;
    }
    .picks {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        flex: none;
    }
    body:has(.picks) a.tile {
        height: 240px;
        min-height: 240px;
    }
    .picks a.tile:last-child:nth-child(odd) {
        width: auto;
        justify-self: stretch;
    }
    .companion-tile, .companion-tile img { min-height: 0; }
    .companion-tile { min-height: 220px; }
    .companion-tile img { height: 240px; }
    form.companion-form,
    form.companion-form #traits-woman:not([hidden]),
    form.companion-form #traits-man:not([hidden]) { grid-template-columns: 1fr; }
    form.companion-form > button { grid-column: 1 / -1; }
    main { padding: 8px 16px 32px; }
    body:has(.picks) main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
    .top { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .brand { flex: 1 0 100%; max-width: none; }
    .brand img { height: 38px; max-width: 210px; }
    nav {
        flex: 0 1 auto;
        grid-column: auto;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        gap: 12px;
    }
    .menutile img { width: 44px; height: 44px; border-radius: 12px; }
}
@media (max-height: 720px) {
    body:has(.picks) .top { padding-top: 4px; padding-bottom: 4px; }
    body:has(.picks) .brand img { height: 30px; }
    body:has(.picks) .menutile img { width: 36px; height: 36px; }
    body:has(.picks) .page-title { height: 26px; }
    body:has(.picks) main { padding-top: 4px; padding-bottom: 4px; }
    body:has(.picks) main > p { font-size: 0.85rem; }
    body:has(.picks) .foot { padding: 4px 8px 6px; }
}
.card { background: rgba(16, 8, 6, 0.72); border: 1px solid rgba(255, 176, 90, 0.35); border-radius: 12px; padding: 16px; color: #e0cbbd; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.card.with-face { display: flex; gap: 14px; align-items: center; }
.card .face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; background: #2a1612; flex: 0 0 auto; border: 2px solid rgba(255, 186, 92, 0.7); }
.card h2 { font-size: 1.2rem; margin: 0 0 6px; color: #e0cbbd; }
.card a { color: #ffc27a; font-weight: 600; }
.card a:hover, .card a:focus-visible { color: #ffe7cf; }
html:has(body.chat) { height: 100%; overflow: hidden; }
body.chat,
body:has(.messenger) {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-top, 0px);
    width: 100%;
    height: var(--vv-height, 100svh);
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--vv-pad, 0px));
    background: #100806 url("../images/bg.jpg") center top / cover no-repeat fixed;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
    body.chat { padding-bottom: max(48px, env(safe-area-inset-bottom, 0px), var(--vv-pad, 0px)); }
}
body:has(.messenger) main { max-width: none; flex: 1; min-height: 0; padding: 4px 16px 8px; display: flex; flex-direction: column; text-align: left; }
body:has(.messenger) .chat-intro { flex: 0 0 auto; }
body:has(.messenger) .chat-intro h1.section-title { font-size: clamp(1.35rem, 2.8vw, 1.85rem); margin: 2px 0 4px; }
body:has(.messenger) .chat-intro p { margin: 0 0 8px; color: #c4aa9a; font-size: 0.92rem; }
.messenger { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px; }
.window { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border: 2px solid rgba(255, 186, 92, 0.55); border-radius: 18px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); background-color: #2a1612; }
.window-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(rgba(16, 8, 6, 0.45), rgba(16, 8, 6, 0.72)); }
.chat-head, .thread, .dock { position: relative; z-index: 1; }
.chat-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 12px; background: transparent; border-bottom: 0; }
.chat-head .who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; flex: 1 1 auto; }
.chat-head h1 { font-size: 1rem; margin: 0; line-height: 1.2; }
.chat-head .sub, .chat-head .price, .chat-head .quota { color: #c4aa9a; font-size: 0.75rem; margin: 0; line-height: 1.2; white-space: nowrap; }
.chat-head form.reset { display: flex; width: auto; max-width: none; margin: 0; }
.chat-head .tools { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; }
.chat-head form.defaults { margin: 0; }
.chat-head button.pack { padding: 8px 12px; font-size: 0.82rem; }
button.admin-toggle { margin: 0; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(224, 181, 106, 0.55); background: rgba(16, 8, 6, 0.55); color: #e0cbbd; font-size: 0.75rem; font-weight: 600; }
.admin-panel { position: relative; z-index: 1; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 12px 8px; padding: 10px 12px; border: 1px solid rgba(224, 181, 106, 0.35); border-radius: 14px; background: rgba(16, 8, 6, 0.92); max-height: 240px; overflow: hidden; }
.admin-panel[hidden] { display: none; }
.admin-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; min-width: 0; max-width: 100%; }
.admin-actions form, .admin-panel form.defaults { margin: 0; max-width: none; }
.admin-panel button:disabled { opacity: 0.45; cursor: default; }
.pack-note { color: #c4aa9a; font-size: 0.75rem; margin: 0; text-align: left; }
.pack-status { color: #e0b56a; }
form.set-board { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: none; margin: 0; padding: 0; min-height: 0; overflow: auto; flex: 1 1 auto; }
.set-tools { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; background: #140c09; }
.set-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 8px 10px; border-radius: 12px; background: rgba(8, 4, 3, 0.45); min-width: 0; }
.set-links { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; }
.admin-panel .set-pick, .admin-panel .set-all { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; color: #e0b56a; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.admin-panel input[type="checkbox"] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #e0b56a; }
button.set-link { margin: 0; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(224, 181, 106, 0.55); background: rgba(16, 8, 6, 0.55); color: #e0cbbd; font-size: 0.72rem; }
button.set-link.is-open { background: #e0b56a; color: #1a0c08; }
.set-board .media-result { grid-column: 1 / -1; max-width: 220px; margin: 0; }
.thread {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 1 0%;
    min-height: 0;
    margin: 0;
    padding: 8px 12px 4px;
    overflow-y: auto;
    background: transparent;
}
.intro { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 78%; }
.profile-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(255, 186, 92, 0.7); background: #2a1612; }
.bubble {
    position: relative;
    max-width: 78%;
    background: #5a342c;
    color: #f6e7da;
    border: 0;
    border-radius: 22px;
    padding: 12px 16px;
    line-height: 1.45;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.bubble.assistant { align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.assistant::after {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 10px;
    border-width: 7px 8px 7px 0;
    border-style: solid;
    border-color: transparent #5a342c transparent transparent;
}
.bubble.user {
    align-self: flex-start;
    background: #e39a45;
    color: #1a0c08;
    border-bottom-left-radius: 6px;
}
.bubble.user::after {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 10px;
    border-width: 7px 8px 7px 0;
    border-style: solid;
    border-color: transparent #e39a45 transparent transparent;
}
.bubble form { margin-top: 8px; max-width: none; }
button.act {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    background: rgba(16, 8, 6, 0.85);
    color: #e0cbbd;
    border: 1px solid rgba(255, 176, 90, 0.4);
    line-height: 1.2;
}
button.act.photo, button.act.clip, button.act.reset { justify-self: start; }
button.act .mark, button.act svg { background: transparent; }
button.act.photo svg, button.act.clip svg {
    width: 36px;
    height: 36px;
    padding: 7px;
    border-radius: 10px;
    background: #1a1a1a;
    fill: #fff;
    box-sizing: border-box;
}
button.act.send {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: linear-gradient(180deg, #ffc27a, #e2582c);
    color: #1a0c08;
    border: 0;
}
button.act.send svg { width: 18px; height: 18px; fill: #1a0c08; }
.dock { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; background: linear-gradient(rgba(16, 8, 6, 0.2), rgba(16, 8, 6, 0.55)); border-top: 0; padding: 8px 10px 12px; }
.suggest-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 8px; padding-top: 8px; border-top: 1px solid #e0b56a; }
.suggest-head:has(+ .suggest-row:empty) { display: none; }
.suggest-break { margin: 0; padding: 0; border: 0; color: #c4aa9a; font-size: 0.68rem; line-height: 1.2; }
button.suggest-hide { flex: 0 0 auto; margin: 0; padding: 2px 8px; border: 1px solid #e0b56a; border-radius: 999px; background: transparent; color: #c4aa9a; font-size: 0.68rem; font-weight: 400; line-height: 1.2; cursor: pointer; }
.dock[data-suggest="hidden"] .suggest-row { display: none; }
.suggest-row:empty { display: none; }
.suggest-row { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 0 8px; overflow: visible; }
.suggest-row form, form#composer { margin: 0; max-width: none; }
form#composer { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; }
form.photo-manual { margin: 8px 0 0; max-width: none; }
button.act.camera {
    width: auto;
    height: 42px;
    padding: 0 14px;
    border-radius: 21px;
    justify-content: center;
    gap: 6px;
    background: rgba(16, 8, 6, 0.85);
    color: #e0cbbd;
    border: 1px solid rgba(255, 176, 90, 0.4);
}
button.act.camera svg { width: 18px; height: 18px; padding: 0; border-radius: 0; background: transparent; fill: #e0cbbd; }
form#composer textarea { flex: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 44px; border: 0; border-radius: 22px; padding: 0 18px; line-height: 44px; resize: none; overflow: hidden; background: #e39a45; color: #1a0c08; }
form#composer textarea::placeholder { color: rgba(26, 12, 8, 0.55); }
button.act.reset {
    justify-self: start;
    padding: 6px 2px;
    background: transparent;
    color: #c4aa9a;
    border: 0;
    border-radius: 8px;
}
button.act.reset svg { width: 16px; height: 16px; fill: currentColor; }
form.reset { margin-top: 4px; }
.bubble button.thumb, button.thumb {
    width: 112px;
    height: 148px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e6edf2;
}
.hold {
    width: 168px;
    height: 220px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: #ff7a59;
}
.hold svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.hold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%);
    background-size: 220% 100%;
    animation: hold-shine 1.8s ease-in-out infinite;
}
.hold span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
@keyframes hold-shine {
    from { background-position: 130% 0; }
    to { background-position: -80% 0; }
}
video.clip-ready { width: 168px; max-width: 100%; border-radius: 10px; display: block; background: #111; }
.bubble button.thumb img, button.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble button.thumb.clip, button.thumb.clip {
    background-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l9-5z'/%3E%3C/svg%3E");
}
.meta { color: #c4aa9a; font-size: 0.92rem; margin-top: 8px; }
p.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.card .meta { color: #c4aa9a; }
.library .meta { color: #c4aa9a; }
.flash { padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; color: #1a1a1a; }
.flash-info { background: #f8efe6; }
.flash-error { background: #fde8e8; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; justify-content: center; }
form.reply-bubble {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
button.bubble.suggest {
    position: relative;
    display: block;
    width: auto;
    max-width: 78%;
    white-space: normal;
    text-align: left;
    background: #6a3d55;
    color: #f6e7da;
    border: 0;
    border-radius: 22px;
    border-bottom-left-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}
button.bubble.suggest::after {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 10px;
    border-width: 7px 8px 7px 0;
    border-style: solid;
    border-color: transparent #6a3d55 transparent transparent;
}
body[data-sending] .suggest-row button,
body[data-sending] #composer button,
body[data-sending] #composer textarea {
    pointer-events: none;
    opacity: 0.55;
}
.media-result { margin-top: 8px; max-width: 320px; }
.media-result img, .media-result video { width: 100%; border-radius: 8px; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.library article { background: rgba(16, 8, 6, 0.72); border: 1px solid rgba(255, 176, 90, 0.35); border-radius: 12px; padding: 10px; color: #e0cbbd; }
.library p { font-size: 0.85rem; margin-top: 8px; }
.foot {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 16px 12px 28px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(16, 8, 6, 0.78);
    border-top: 1px solid rgba(255, 176, 90, 0.22);
}
.foot::-webkit-scrollbar { display: none; }
.foot .menutile { width: auto; }
body.chat .foot,
body:has(.messenger) .foot { display: none; }
@media (max-height: 900px) {
    body.chat .chat-intro { display: none; }
    body.chat .flash { margin-bottom: 8px; }
    body.chat .chat-head { padding: 6px 12px; }
    body.chat .chat-head .quota { display: none; }
    body.chat .admin-panel { max-height: 158px; }
    body.chat .dock { padding: 4px 8px 6px; }
    body.chat .suggest-head { margin-bottom: 4px; padding-top: 4px; }
}
@media (max-width: 720px) {
    body.chat .chat-intro { display: none; }
    body.chat .top { display: flex; flex-wrap: nowrap; justify-content: center; padding: 4px 8px; }
    body.chat .brand { flex: 0 1 auto; max-width: 128px; }
    body.chat .brand img { height: 28px; max-width: 128px; }
    body.chat nav { flex: 1 1 auto; grid-column: auto; width: auto; max-width: none; margin: 0; justify-content: center; gap: 8px; }
    body.chat .top .menutile { gap: 0; }
    body.chat .top .menutile span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body.chat .top .menutile img { width: 34px; height: 34px; border-radius: 10px; }
    body.chat:has(.messenger) main { padding: 4px 8px; }
    body.chat .messenger { padding: 4px 0 0; }
    body.chat .chat-head { padding: 6px 10px; gap: 8px; }
    body.chat .chat-head h1 { font-size: 0.95rem; }
    body.chat .chat-head .quota { display: none; }
    body.chat .window { border-radius: 14px; }
    body.chat .thread { padding: 8px 10px 6px; }
    body.chat .bubble { max-width: 92%; padding: 10px 12px; }
    body.chat .dock { padding: 4px 8px 8px; }
}
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.row-actions form { margin: 0; }
.listing-photo { width: 120px; height: 160px; object-fit: cover; object-position: center top; border-radius: 12px; display: block; margin: 12px auto 0; }
.plus-feed { display: grid; gap: 16px; max-width: 640px; margin-top: 16px; margin-inline: auto; text-align: left; }
.plus-post { background: rgba(16, 8, 6, 0.72); border: 1px solid rgba(255, 176, 90, 0.35); border-radius: 12px; overflow: hidden; color: #e0cbbd; }
.plus-post img, .plus-post video { width: 100%; max-height: 520px; object-fit: cover; display: block; background: #1a0e0a; }
.plus-cover { min-height: 180px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px 16px; text-align: center; background: linear-gradient(160deg, rgba(255, 176, 90, 0.18), rgba(16, 8, 6, 0.2)), #2a1612; }
.plus-post .body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.plus-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; justify-content: center; margin-top: 12px; max-width: 640px; margin-inline: auto; }
.plus-inline label { flex: 1 1 160px; }
.plus-reports { list-style: none; display: grid; gap: 10px; max-width: 640px; margin-inline: auto; text-align: left; }
.plus-reports li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plus-reports form { margin: 0; }
.live-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: #9d174d; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; }
.live-stage { position: relative; max-width: 640px; background: #1a0e0a; border-radius: 12px; overflow: hidden; min-height: 240px; margin: 12px auto 0; }
.live-stage img, .live-stage video { width: 100%; max-height: 520px; min-height: 240px; object-fit: cover; display: block; background: #1a0e0a; }
.live-name { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(16, 8, 6, 0.72); color: #fff; padding: 4px 8px; border-radius: 8px; font-size: 0.9rem; }
.live-log { list-style: none; display: grid; gap: 8px; max-width: 640px; max-height: 280px; overflow: auto; margin: 12px auto 0; padding: 0; text-align: left; }
.live-log li { background: rgba(16, 8, 6, 0.72); border: 1px solid rgba(255, 176, 90, 0.35); border-radius: 10px; padding: 8px 10px; color: #e0cbbd; }
.live-log strong { color: #ffc27a; margin-right: 6px; }
body.people .window { position: relative; }
body.people .chat-head { flex-wrap: wrap; }
body.people .chat-head .tools { flex-wrap: wrap; justify-content: flex-end; }
.chat-head .tools form.person-tool { display: flex; width: auto; max-width: none; margin: 0; align-items: center; gap: 6px; }
.chat-head .tools form.person-tool input[name="note"] {
    width: 7.5rem;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 176, 90, 0.4);
    background: rgba(16, 8, 6, 0.85);
    color: #e0cbbd;
    font-size: 0.75rem;
}
.away-note { margin: 0 0 6px; color: #c4aa9a; font-size: 0.75rem; }
.turn-note { margin: 4px 0 0; color: #c4aa9a; font-size: 0.75rem; }
.media-options, .tip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; color: #f3ddd4; font-size: 0.78rem; }
.media-options label, .tip-row button, button.media-send { font-size: 0.78rem; }
.media-options select { height: 32px; border-radius: 8px; border: 1px solid rgba(255, 176, 90, 0.4); background: rgba(16, 8, 6, 0.85); color: #e0cbbd; }
button.act.mini { width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%; justify-content: center; }
button.act.mini svg { width: 18px; height: 18px; fill: #1a0c08; }
button.tip, button.media-send, button.media-cover, button.media-report, button.call-act {
    border-radius: 999px;
    border: 1px solid rgba(255, 176, 90, 0.45);
    background: rgba(16, 8, 6, 0.85);
    color: #ffc27a;
    padding: 6px 10px;
    width: auto;
}
button.media-cover { display: block; min-width: 148px; min-height: 84px; border-radius: 12px; }
button.media-report { display: block; margin-top: 6px; font-size: 0.72rem; }
.bubble video, .bubble img { max-width: 220px; width: 100%; border-radius: 10px; display: block; background: #111; }
.media-note { display: block; margin-top: 4px; font-size: 0.75rem; }
.call-panel { position: absolute; inset: 0; z-index: 6; background: #100806; display: flex; flex-direction: column; }
.call-panel[hidden] { display: none; }
.call-panel video.remote { flex: 1; width: 100%; min-height: 0; object-fit: cover; background: #1a0e0a; }
.call-panel video.local { position: absolute; width: 96px; height: 128px; right: 12px; top: 72px; object-fit: cover; border-radius: 10px; background: #1a0e0a; }
.call-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: rgba(16, 8, 6, 0.92); }
.call-bar p { margin: 0; color: #f3ddd4; font-size: 0.82rem; flex: 1; }
button#call-start[disabled] { opacity: 0.45; }