#vn-inbox .vn-chat-switch { order: 1; flex: none; }
#vn-inbox .vn-chat-switch button { white-space: nowrap; }
#vn-inbox .vn-chat-request-filters { width: max-content; max-width: 100%; margin: 0 auto 12px; }
.vn-tabs [data-tab="inbox"] > span { position: static; }
#vn-unread { position: absolute; inset-inline-start: calc(50% + 8px); top: 3px; bottom: auto; margin: 0; }
.vn-chat-list { max-width: 740px; }
.vn-chat-rows:not(:empty) {
 display: grid;
 overflow: hidden;
 border: 1px solid var(--vn-line);
 border-radius: var(--vn-radius);
 background: #fff;
}
.vn-chat-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: start;
 gap: 10px;
 padding: 11px 14px;
 border: 0;
 background: transparent;
 color: var(--vn-ink);
 text-align: start;
}
.vn-chat-row + .vn-chat-row { border-top: 1px solid var(--vn-line); }
.vn-chat-row:hover, .vn-chat-row:focus-visible { background: #fbf8f0; }
.vn-chat-row:focus-visible { outline-offset: -3px; }
.vn-chat-row-text { min-width: 0; }
.vn-chat-row strong, .vn-chat-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-chat-preview { color: var(--vn-muted); font-size: .9em; }
.vn-chat-row.has-unread .vn-chat-preview { color: var(--vn-ink); font-weight: 600; }
.vn-chat-row.has-unread strong::before {
 content: '';
 display: inline-block;
 width: 7px;
 height: 7px;
 margin-inline-end: 6px;
 border-radius: 50%;
 background: var(--vn-accent);
 vertical-align: .12em;
}
.vn-chat-row time, .vn-chat-message time { color: var(--vn-muted); font-size: .76rem; white-space: nowrap; }
.vn-chat-list-more { margin-top: 10px; }
.vn-chat-status { margin: 0; color: var(--vn-muted); overflow-wrap: anywhere; }

#vn-inbox.vn-chat-open { overflow: hidden; padding: 14px 20px; }
.vn-chat-screen {
 display: grid;
 grid-template-rows: auto minmax(0, 1fr) auto;
 height: 100%;
 max-width: 740px;
 border: 1px solid var(--vn-line);
 border-radius: var(--vn-radius);
 background: #fff;
}
.vn-chat-head {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: auto minmax(0, 1fr) auto;
 align-items: center;
 gap: 8px;
 padding: 6px 10px;
 border-bottom: 1px solid var(--vn-line);
}
.vn-chat-head h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.vn-chat-head h2:focus { outline: 0; }
.vn-chat-back { width: 42px; height: 42px; }
.vn-chat-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vn-chat-actions summary { padding: 8px; cursor: pointer; }
.vn-chat-actions > div {
 position: absolute;
 inset-inline-end: 6px;
 top: calc(100% - 4px);
 padding: 4px 10px;
 border: 1px solid var(--vn-line);
 border-radius: 9px;
 background: #fff;
 box-shadow: 0 6px 15px #2b231918;
}
.vn-chat-actions button { display: block; width: 100%; min-height: 40px; text-align: start; }
.vn-chat-scroll {
 display: flex;
 flex-direction: column;
 min-height: 0;
 overflow: auto;
 overflow-anchor: none;
 overscroll-behavior: contain;
 padding: 10px 14px;
}
.vn-chat-scroll > * { flex-shrink: 0; }
.vn-chat-empty { margin: 14px 0; text-align: center; color: var(--vn-muted); }
.vn-chat-older { display: block; margin: 0 auto 10px; }
.vn-chat-messages { display: flex; flex-direction: column; gap: 7px; margin: auto 0 0; padding: 0; list-style: none; }
.vn-chat-message {
 align-self: flex-start;
 max-width: min(82%, 560px);
 padding: 7px 11px 5px;
 border-radius: 12px 12px 12px 4px;
 background: #f3f2ee;
}
.vn-chat-message.mine { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #f7ecd3; }
.vn-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-chat-message time { display: block; margin-top: 3px; text-align: end; }
.vn-chat-compose { display: grid; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--vn-line); }
.vn-chat-compose > button { justify-self: start; }
.vn-chat-compose .vn-chat-jump { justify-self: center; }
.vn-chat-form { display: flex; align-items: end; gap: 8px; }
.vn-chat-form textarea {
 flex: 1;
 min-width: 0;
 min-height: 44px;
 max-height: 28vh;
 padding: 7px 9px;
 border: 1px solid #d3cbbd;
 border-radius: 8px;
 color: var(--vn-ink);
 font-size: 16px;
 resize: vertical;
}
.vn-chat-form button { min-height: 44px; }
#vn-inbox [hidden] { display: none !important; }

@media (max-width: 600px) {
 #vn-inbox .vn-view-heading { flex-wrap: wrap; gap: 6px 10px; }
 #vn-inbox .vn-chat-switch { order: 0; }
 #vn-inbox.vn-chat-open { padding: 0; }
 .vn-chat-screen { border: 0; border-radius: 0; }
 .vn-chat-scroll { padding-inline: 10px; }
 .vn-chat-message { max-width: 88%; }
 .vn-chat-form button { padding-inline: 8px; }
}