/* Stage 6: readable secondary text without widening the Inbox. */
.data-freshness { margin: 0 0 8px; color: var(--muted); font-size: 0.75rem; line-height: 1.45; overflow-wrap: anywhere; }
.data-freshness.is-stale { color: #805214; background: #fff6df; border-radius: 8px; padding: 8px 12px; }
.section-load-note { color: #805214; background: #fff6df; padding: 10px; border-radius: 8px; font-size: 0.85rem; }
.data-unavailable > :not(.section-load-note) { opacity: .55; }
.conversation-message-author, .conversation-bubble footer,
.conversation-composer-actions small, .conversation-routing-reason,
.conversation-contact small, .conversation-contact .muted,
#settings-view .field-hint, #settings-view .settings-pane small { font-size: .75rem; line-height: 1.45; }
.conversation-bubble footer { flex-wrap: wrap; }
.conversation-routing-details { margin-top: 6px; font-size: .75rem; line-height: 1.45; color: var(--muted); }
.conversation-routing-details summary { cursor: pointer; width: fit-content; padding: 3px 0; }
.conversation-routing-details summary:focus-visible { outline: 2px solid var(--dialog-accent-strong); outline-offset: 3px; border-radius: 3px; }
.conversation-routing-details[open] summary { margin-bottom: 4px; }
.conversation-routing-reason { overflow-wrap: anywhere; }

/* Compact refresh status and contact controls. */
.refresh-control { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#data-updated-at { color: var(--muted); font: .7rem/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
body:has(#inbound-view:not([hidden])) main { padding-top: 8px; }
.conversation-routing-control { border-top: 0; padding-top: 10px; }
@media (max-width: 620px) {
  .refresh-control { display: none; }
}

.notification-colors-settings { min-width: 0; margin: 0 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.notification-colors-settings legend { font-weight: 650; padding: 0 5px; }
.notification-colors-settings .muted { font-size: .8rem; line-height: 1.45; }
.notification-color-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin: 12px 0 0; }
.notification-color-row input[type=color] { width: 42px; height: 34px; min-height: 34px; padding: 3px; cursor: pointer; }
.notification-color-preview { grid-column: 1 / -1; border-radius: 10px; padding: 9px 12px; font-size: .8rem; color: #202321; background: color-mix(in srgb, var(--preview-color) 22%, white); }
.has-notification-colors [data-notification-kind=crm] { --notification-color: var(--notification-crm); }
.has-notification-colors [data-notification-kind=auto] { --notification-color: var(--notification-auto); }
.has-notification-colors [data-notification-kind=system] { --notification-color: var(--notification-system); }
.has-notification-colors .conversation-message[data-notification-kind]:not([data-notification-kind=""]) .conversation-bubble {
  background: color-mix(in srgb, var(--notification-color) 22%, white);
  border-color: color-mix(in srgb, var(--notification-color) 50%, #d7dad7);
  color: #202321;
}
/* Stage 8: compact tools open on demand, without adding a permanent Inbox panel. */
#inbox-content-dialog { width: min(680px, calc(100vw - 24px)); max-height: 88dvh; padding: 0; }
.inbox-content-card { min-width: 0; grid-template-columns: minmax(0,1fr); overflow-wrap: anywhere; gap: 12px; padding: 20px; }
.inbox-content-card > * { min-width: 0; }
.inbox-content-card > p { margin: 0; }
#inbox-content-status:empty { display: none; }
.inbox-content-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inbox-content-toolbar h2, .inbox-content-toolbar input { flex: 1; min-width: 120px; }
.inbox-content-toolbar h2 { margin: 0; }
.inbox-content-item { padding: 12px 0; border-bottom: 1px solid #dddce6; }
.inbox-content-text { white-space: pre-wrap; margin: 6px 0; }
.inbox-content-item small { display: block; margin-bottom: 8px; }
#inbox-content-editor { padding: 12px; border: 1px solid #dddce6; border-radius: 12px; margin-top: 12px; }
#inbox-content-editor input, #inbox-content-editor textarea { width: 100%; box-sizing: border-box; }
#contact-notes-open { margin-top: 8px; width: 100%; }
.inbox-content-row { display: flex; align-items: start; gap: 4px; border-bottom: 1px solid #e2e3e6; min-width: 0; }
.quick-reply-choice { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 9px 8px; border-radius: 8px; cursor: pointer; color: inherit; }
.quick-reply-choice:hover { background: #f0effb; }
.quick-reply-choice strong, .quick-reply-choice span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick-reply-choice strong { font-size: .9rem; }
.quick-reply-choice span { font-size: .78rem; color: #636769; margin-top: 2px; }
.content-row-tools { flex: 0 0 34px; padding-top: 7px; }
.content-row-tools > summary { cursor: pointer; font-size: 20px; list-style: none; text-align: center; border-radius: 6px; }
.content-row-tools[open] { flex: 0 1 48%; min-width: 130px; }
.content-row-tools > div { padding: 8px; border: 1px solid #dddce6; border-radius: 8px; background: white; font-size: .8rem; }
.content-row-tools .row-action { display: block; padding: 7px; text-align: left; }
.content-note-detail { flex: 1; min-width: 0; padding: 10px 8px; }
.content-note-detail summary { cursor: pointer; display: flex; gap: 5px; }
.content-note-detail summary::before { content: '▸'; flex: none; }
.content-note-detail[open] summary::before { content: '▾'; }
.content-note-detail summary span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .9rem; }
.content-note-detail small { font-size: .75rem; }
.note-highlight { --note-color: #fff2b9; background: var(--note-color); border-radius: 8px; color: #25282b; margin-bottom: 6px; }
.note-highlight[data-note-color=none] { --note-color: #f5f5f7; }
.note-highlight[data-note-color=green] { --note-color: #def3df; }
.note-highlight[data-note-color=blue] { --note-color: #e0edff; }
.note-highlight[data-note-color=pink] { --note-color: #ffe4ee; }
.contact-note-preview { display: block; width: 100%; border: 1px solid #0000000d; padding: 9px 10px; text-align: left; cursor: pointer; font: inherit; font-size: .82rem; }
.contact-note-preview span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#contact-notes-preview { margin-top: 12px; }
.inbox-content-archive { font-size: .78rem; color: #636769; }
.inbox-content-archive summary { cursor: pointer; }
#inbox-content-body[rows="1"] { min-height: 42px; resize: vertical; }
.conversation-chat-header .conversation-response-time { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
#working-hours-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.working-hours-day { display: grid; grid-template-columns: 65px minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; margin-top: 8px; }
.working-hours-day label { margin: 0; }
.working-hours-day input[type="time"] { min-width: 0; width: 100%; min-height: 38px; padding: 6px; }
.working-hours-actions { display: flex; justify-content: flex-end; gap: 8px; }
.new-conversation-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(85vh, 820px); border: 1px solid var(--line, #d9e0e8); border-radius: 18px; padding: 24px; background: var(--surface, #fff); color: var(--text, #202321); box-shadow: 0 24px 70px rgb(15 23 42 / 25%); }
.new-conversation-dialog::backdrop { background: rgba(15, 23, 42, .48); }
.new-conversation-dialog h2, .new-conversation-dialog label { color: var(--text, #202321); }
.new-conversation-dialog input:not([type="checkbox"]), .new-conversation-dialog textarea { background: var(--surface, #fff); color: var(--text, #202321); border-color: var(--line, #d9e0e8); }
.new-conversation-dialog form { display: grid; gap: 14px; }
.new-conversation-dialog .panel-heading { display: flex; justify-content: space-between; align-items: center; }
.new-conversation-search-row { display: flex; gap: 8px; }
.new-conversation-search-row input { flex: 1; min-width: 0; }
.new-conversation-dialog textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.new-conversation-results { display: grid; gap: 8px; max-height: 290px; overflow: auto; }
.new-conversation-results > strong { margin-top: 8px; }
.new-recipient-result { display: flex; justify-content: space-between; gap: 12px; text-align: left; background: var(--surface, #fff); border: 1px solid var(--line, #d9e0e8); border-radius: 10px; padding: 10px 12px; color: inherit; cursor: pointer; }
.new-recipient-result:hover, .new-recipient-result.is-selected { border-color: var(--accent, #526de6); background: var(--surface-soft, #f3f6ff); }
.work-chat-picker-option { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; margin: 0; padding: 10px 12px; border: 1px solid var(--line, #d9e0e8); border-radius: 10px; background: var(--surface, #fff); color: var(--text); cursor: pointer; }
.work-chat-picker-option:hover { border-color: var(--accent, #526de6); background: var(--surface-soft, #f3f6ff); }
.work-chat-picker-option input[type="checkbox"] { appearance: auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border-radius: 4px; accent-color: var(--accent, #526de6); }
.work-chat-picker-option span { display: grid; gap: 3px; min-width: 0; text-align: left; }
.work-chat-picker-option b { overflow-wrap: anywhere; }
.work-chat-picker-option small { color: var(--muted, #64748b); }
.inbox-mode-tabs { display: flex; gap: 8px; padding: 0 0 14px; }
.inbox-mode-tabs button { border: 1px solid var(--line, #d9e0e8); border-radius: 10px; padding: 8px 15px; background: var(--surface, #fff); color: inherit; cursor: pointer; }
.inbox-mode-tabs button[aria-pressed="true"] { background: var(--surface-soft, #eef2ff); border-color: var(--accent, #526de6); font-weight: 700; }
.inbox-compose-button { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #665dea; color: #fff; font: inherit; font-size: 25px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgb(87 77 207 / 20%); }
.inbox-compose-button:hover { background: #554bd5; }
.inbox-compose-button:focus-visible { outline: 2px solid #3229a9; outline-offset: 2px; }
#inbound-view > .inbox-mode-tabs { align-items: center; overflow-x: auto; scrollbar-width: thin; }
.work-folder-tabs { display: contents; }
.inbox-folder-tabs > button, .inbox-folder-tabs .work-folder-tabs button { flex: 0 0 auto; white-space: nowrap; }
.work-folder-menu { position: relative; flex: 0 0 auto; }
.work-folder-menu[hidden] { display: none; }
.work-folder-menu > summary { display: grid; place-items: center; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); list-style: none; font-size: .84rem; cursor: pointer; }
.work-folder-menu > summary::-webkit-details-marker { display: none; }
.work-folder-menu > div { position: fixed; z-index: 50; display: grid; gap: 2px; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 24px rgb(15 23 42 / 18%); }
.work-folder-menu button { border: 0; border-radius: 7px; padding: 9px 11px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.work-folder-menu button:hover { background: var(--surface-soft); }
#work-unread-badge, #vk-comments-unread-badge, .work-folder-unread-badge { display: inline-block; min-width: 19px; padding: 1px 5px; border-radius: 10px; background: #d84a4a; color: #fff; text-align: center; font-size: .65rem; line-height: 1.35; }
#work-unread-badge[hidden], #vk-comments-unread-badge[hidden], .work-folder-unread-badge[hidden] { display: none; }
.work-inbox-layout { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: 14px; min-height: 500px; }
.work-inbox-layout[hidden], #client-inbox-layout[hidden] { display: none !important; }
.work-chat-sidebar, .work-chat-panel { min-width: 0; }
#work-chat-search { width: 100%; box-sizing: border-box; }
.work-chat-sidebar .panel-heading, .work-chat-panel .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.work-folder-tools, .work-folder-actions, .work-chat-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.work-folder-tools select { min-width: 140px; }
.work-chat-list { display: grid; gap: 4px; max-height: 65vh; overflow: auto; }
.work-chat-item { display: grid; gap: 4px; text-align: left; padding: 11px; border: 1px solid transparent; background: transparent; border-radius: 10px; color: inherit; cursor: pointer; }
.work-chat-item span { color: var(--muted, #64748b); font-size: .85em; }
.work-chat-item:hover, .work-chat-item.is-selected { background: var(--surface-soft, #f3f6ff); border-color: var(--line, #d9e0e8); }
.work-chat-messages { display: grid; align-content: start; gap: 12px; min-height: 290px; max-height: 56vh; overflow: auto; padding: 12px 0; }
.work-message { max-width: min(85%, 760px); padding: 10px 14px; background: var(--surface-soft, #f3f6ff); border-radius: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.work-message.is-outgoing { justify-self: end; background: #e4edff; }
.work-message.is-thread-reply { margin-left: min(7%, 45px); }
.vk-comment-reply { display: flex; gap: 8px; margin-top: 8px; }
.vk-comment-reply[hidden] { display: none; }
.vk-comment-reply textarea { flex: 1; min-width: 0; }
.work-message > div { display: flex; gap: 10px; justify-content: space-between; }
.work-message time, .work-message small { color: var(--muted, #64748b); font-size: .78em; }
.work-message p { margin: 6px 0 0; }
.work-phone { padding: 0; border: 0; background: transparent; color: #2f5cca; text-decoration: underline; cursor: pointer; font: inherit; }
#work-chat-composer { display: flex; gap: 8px; margin-top: 14px; }
#work-chat-composer textarea { flex: 1; min-width: 0; resize: vertical; }
@media (max-width: 760px) { .work-inbox-layout { grid-template-columns: 1fr; } .work-chat-list { max-height: 220px; } .work-chat-messages { max-height: 45vh; } }

/* Keep the same folder strip in both inbox modes; the add button stays visible. */
.inbox-folder-bar { display: flex; flex: 0 0 auto; min-width: 0; align-items: center; border-bottom: 1px solid var(--dialog-line); }
.inbox-folder-tabs { position: relative; flex: 1; min-width: 0; align-items: center; gap: 2px; margin: 0; padding: 3px 4px 8px; overflow-x: auto; scrollbar-width: none; }
.inbox-folder-tabs::-webkit-scrollbar { display: none; }
.inbox-folder-tabs > button, .inbox-folder-tabs .work-folder-tabs button { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; min-height: 33px; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: #697188; font-family: inherit; font-size: .72rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.inbox-folder-tabs > button[aria-pressed="true"], .inbox-folder-tabs .work-folder-tabs button[aria-pressed="true"] { background: transparent; color: #514bd1; font-weight: 500; }
.inbox-folder-indicator { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 8px; background: #efedff; pointer-events: none; }
.inbox-folder-indicator[hidden] { display: none; }
.inbox-folder-indicator.is-ready { transition: transform 280ms cubic-bezier(.22, .8, .25, 1), width 280ms cubic-bezier(.22, .8, .25, 1), height 280ms cubic-bezier(.22, .8, .25, 1), background-color 280ms ease; }
@media (prefers-reduced-motion: reduce) { .inbox-folder-indicator.is-ready { transition: none; } }
.inbox-folder-tabs .work-folder-menu > summary { min-height: 33px; padding: 0 8px; font-size: .72rem; }
.work-inbox-layout { grid-template-columns: minmax(260px, 320px) minmax(470px, 1fr) minmax(240px, 280px); height: var(--inbox-height, calc(100dvh - 150px)); min-height: 0; gap: 8px; order: 2; }
.work-inbox-layout > .work-chat-panel { grid-column: 2 / 4; }
#inbound-view .work-inbox-layout > .panel { padding: 0; border-color: var(--dialog-line); box-shadow: 0 10px 30px rgb(54 52 103 / 7%); }
.work-chat-sidebar { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.work-chat-sidebar > .panel-heading { flex: 0 0 auto; min-height: 68px; padding: 14px 13px 10px; background: #fff; border: 0; }
.work-chat-sidebar > .panel-heading h2 { margin: 0; font-size: 1.22rem; }
.work-chat-sidebar #work-add-chat { padding: 8px 10px; font-size: .72rem; background: var(--dialog-accent); }
.work-chat-sidebar > .inbox-mode-tabs:not(.inbox-folder-tabs) { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 8px 10px; }
.work-chat-sidebar > .inbox-mode-tabs:not(.inbox-folder-tabs) button { border-radius: 8px; }
#work-telegram-pane, #work-vk-pane { min-height: 0; display: flex; flex-direction: column; flex: 1; }
#work-telegram-pane[hidden], #work-vk-pane[hidden] { display: none; }
#work-chat-search { width: calc(100% - 20px); min-height: 36px; margin: 7px 10px; padding: 7px 10px; border-radius: 8px; font-size: .78rem; }
.work-chat-list { display: block; min-height: 0; max-height: none; flex: 1; overflow-y: auto; scrollbar-gutter: stable; border-top: 1px solid var(--dialog-line); }
.work-chat-list > .muted { padding: 12px; font-size: .78rem; }
.work-chat-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--dialog-line); border-left: 3px solid transparent; border-radius: 0; background: #fff; }
.work-chat-item.is-selected { border-left-color: var(--dialog-accent); border-bottom-color: var(--dialog-line); background: #f6f4ff; }
.work-chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #6861e8; color: #fff !important; font-size: .71rem !important; font-weight: 700; }
.work-chat-item-main { display: grid; min-width: 0; gap: 4px; }
.work-chat-item-heading { display: flex; min-width: 0; gap: 5px; align-items: center; }
.work-chat-item-heading strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .79rem; }
.work-chat-item-heading time { flex: 0 0 auto; color: var(--muted); font-size: .65rem; }
.work-chat-item .work-chat-item-preview { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.work-chat-unread { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--dialog-accent); color: #fff !important; font-size: .65rem !important; font-weight: 700; }
.work-chat-item[data-vk-post] { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; }
.work-chat-panel { display: flex; flex-direction: column; overflow: hidden; background: #f8f8fc; }
.work-chat-panel[hidden] { display: none; }
.work-chat-panel > .panel-heading { flex: 0 0 auto; min-height: 68px; padding: 11px 14px; border-bottom: 1px solid var(--dialog-line); background: #fff; }
.work-chat-title-block { flex: 1; min-width: 0; }
.work-chat-title-block h2, .work-chat-title-block p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-chat-panel > .panel-heading h2 { margin: 0; font-size: .95rem; }
.work-chat-panel > .panel-heading p { margin: 3px 0 0; font-size: .7rem; }
.work-chat-header-actions { display: flex; gap: 7px; align-items: center; }
#work-chat-folder-menu { position: relative; }
#work-chat-folder-menu[hidden] { display: none; }
#work-chat-folder-menu > summary { min-height: 32px; padding: 7px; border: 1px solid var(--dialog-line); border-radius: 8px; background: #fff; cursor: pointer; list-style: none; font-size: .72rem; }
#work-chat-folder-menu > summary::-webkit-details-marker { display: none; }
.work-chat-folders { position: absolute; z-index: 5; top: 32px; right: 0; display: grid; min-width: 190px; max-height: 240px; overflow: auto; margin: 0; padding: 8px; border: 1px solid var(--dialog-line); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgb(54 52 103 / 16%); }
.work-chat-folders label { display: flex; gap: 7px; align-items: center; padding: 5px; font-size: .76rem; }
.work-chat-folders input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--dialog-accent); }
.work-chat-messages { flex: 1; min-height: 0; max-height: none; padding: 14px; background-color: #f8f8fc; background-image: radial-gradient(circle at 15% 20%, rgb(104 97 232 / 4%) 0 1px, transparent 2px), radial-gradient(circle at 85% 70%, rgb(73 151 215 / 4%) 0 1px, transparent 2px); background-size: 34px 34px, 46px 46px; }
.work-message { max-width: min(78%, 560px); padding: 8px 10px 7px; border: 1px solid var(--dialog-line); border-radius: 15px 15px 15px 4px; background: #fff; box-shadow: 0 5px 16px rgb(52 55 87 / 6%); font-size: .84rem; }
.work-message { position: relative; }
.work-message:focus-visible { outline: 2px solid #6659e5; outline-offset: 2px; }
#inbound-view .work-message.is-outgoing .message-reaction-toolbar { left: auto; right: calc(100% + 7px); }
.work-message:hover, .work-message:focus-within { z-index: 12; }
#inbound-view .work-message:hover .message-reaction-toolbar,
#inbound-view .work-message:focus-visible .message-reaction-toolbar,
#inbound-view .work-message .message-reaction-toolbar:focus-within {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
#inbound-view .work-message:hover .message-reaction-toolbar { transition-delay: .45s; }
#inbound-view .work-message:focus-visible .message-reaction-toolbar,
#inbound-view .work-message .message-reaction-toolbar:focus-within { transition-delay: 0s; }
.work-message > .message-reactions { margin-top: 4px; }
.work-message.is-outgoing { border-color: #dcd9fb; border-radius: 15px 15px 4px 15px; background: linear-gradient(145deg, #f1efff, #e9e7fc); }
.work-message > div:not(.message-reaction-toolbar) strong { color: var(--dialog-accent-strong); font-size: .72rem; }
.work-message time { white-space: nowrap; font-size: .62rem; }
.work-message p { line-height: 1.5; }
.work-attachment { display: flex; width: 100%; gap: 7px; align-items: center; margin-top: 7px; padding: 7px; border: 1px solid var(--dialog-line); border-radius: 8px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.work-attachment > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.work-attachment small { white-space: nowrap; }
.work-media-preview { display: block; max-width: 100%; max-height: 260px; margin-top: 7px; border-radius: 8px; }
.work-message audio { display: block; max-width: 100%; margin-top: 7px; }
#work-load-history { align-self: start; margin: 4px 12px; }
#work-chat-composer { flex: 0 0 auto; display: grid; gap: 8px; margin: 0; padding: 9px 10px; border-top: 1px solid var(--dialog-line); background: #fff; }
#work-chat-composer[hidden] { display: none; }
#work-chat-composer textarea { width: 100%; min-height: 64px; padding: 10px; border: 1px solid var(--dialog-line); border-radius: 10px; background: #fcfcff; }
.work-composer-actions { display: flex; gap: 7px; justify-content: flex-end; }
.work-composer-actions button:not(.button) { min-width: 36px; min-height: 34px; border: 1px solid var(--dialog-line); border-radius: 8px; background: #fff; cursor: pointer; }
.work-composer-actions .conversation-icon-button { display: grid; place-items: center; width: 36px; min-width: 36px; height: 34px; padding: 7px; }
.work-composer-actions .conversation-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.work-composer-actions #work-chat-voice.is-recording { border-color: #db4a59; color: #c42d42; background: #fff0f1; }
#work-voice-status { align-self: center; margin-right: auto; color: var(--muted); font-size: .72rem; }
#work-voice-status[hidden] { display: none; }
.work-vk-hint { margin: 3px 10px 10px; font-size: .73rem; line-height: 1.4; }
#work-vk-sync { align-self: start; margin: 8px 10px; }
.work-vk-post-context { flex: 0 0 auto; display: grid; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--dialog-line); background: var(--surface); color: var(--text); }
.work-vk-post-context[hidden] { display: none; }
.work-vk-post-context p { margin: 0; font-size: .78rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.work-vk-post-context a { justify-self: start; color: var(--dialog-accent-strong); font-size: .72rem; text-decoration: none; }
.work-vk-post-context a:hover { text-decoration: underline; }
#work-chat-error, #work-vk-error { padding: 0 12px; }
@media (max-width: 760px) { .work-inbox-layout { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: auto; } .work-chat-sidebar { min-height: 270px; max-height: 42vh; } .work-chat-panel { min-height: 50vh; } .work-chat-messages { max-height: none; } }

/* Chats and VK comments use the same list typography and spacing as dialogs. */
#inbound-view .work-chat-sidebar-heading { flex: 0 0 auto; }
#inbound-view .work-chat-sidebar #work-add-chat { display: inline-grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; font-size: 25px; }
#inbound-view .work-chat-item { position: relative; grid-template-columns: 38px minmax(0,1fr); align-items: start; min-height: 75px; border-left: 0; color: var(--text); font-family: inherit; }
#inbound-view .work-chat-item:hover { background: var(--dialog-accent-faint); }
#inbound-view .work-chat-item.is-selected { background: linear-gradient(90deg, #efedff 0%, #f7f6ff 100%); box-shadow: inset 3px 0 0 var(--dialog-accent); }
#inbound-view .work-chat-item-main { display: block; }
#inbound-view .work-chat-item-heading { gap: 8px; align-items: baseline; justify-content: space-between; }
#inbound-view .work-chat-item-heading strong { font-size: .79rem; font-weight: 650; line-height: 1.35; }
#inbound-view .work-chat-item-preview { margin-top: 3px; font-size: .73rem; line-height: 1.4; }
#inbound-view .work-chat-unread { position: absolute; right: 12px; bottom: 10px; }
#inbound-view .work-chat-item[data-vk-post] { grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
#inbound-view .work-message { font-family: inherit; }
#inbound-view .work-message p { font-size: .85rem; line-height: 1.55; }
.work-header-actions { position: relative; display: flex; align-items: center; gap: 7px; }
.work-tabs-menu > summary { width: 34px; height: 34px; color: #4e5570; background: #fff; }
.work-tabs-menu .desktop-inbox-popover { top: calc(100% + 5px); right: 0; left: auto; min-width: 170px; }
.work-tabs-dialog { overflow-y: auto; }
.work-tabs-dialog > p { margin: 7px 0 16px; font-size: .83rem; }
.work-tabs-manage-list { display: grid; gap: 7px; margin-bottom: 16px; }
.work-tab-manage-row { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line, #d9e0e8); border-radius: 10px; }
.work-tab-manage-row.is-target { border-color: #665dea; background: #f8f7ff; }
.work-tab-manage-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.work-tab-manage-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.work-tab-manage-actions button { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px; border: 0; border-radius: 7px; background: transparent; color: #554bd5; cursor: pointer; font: inherit; }
.work-tab-manage-actions button:hover:not(:disabled) { background: #efedff; }
.work-tab-manage-actions button:disabled { color: #a2a7b6; cursor: default; }
.work-tab-manage-actions button[data-tab-action="delete"] { color: #b53343; }
@media (min-width: 761px) { #work-chat-search { display: none; } }
.vk-comment-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.vk-comment-actions a { color: var(--dialog-accent-strong); font-size: .72rem; text-decoration: none; }
.vk-comment-actions a:hover { text-decoration: underline; }
.inbox-pin-button { min-width: 32px; font-size: 21px; line-height: 1; color: var(--dialog-accent-strong); }
.conversation-item-avatar, .conversation-avatar, .mobile-contact-avatar, .work-chat-avatar { position: relative; overflow: hidden; }
.inbox-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.inbox-pin-button { display: inline-grid; place-items: center; }
.inbox-pin-icon { display: inline-block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.inbox-pin-button[aria-pressed="true"], .inbox-pinned-mark { color: #665dea; }
.inbox-pin-button[aria-pressed="true"] .inbox-pin-icon { fill: #eae8ff; }
.inbox-pinned-mark { display: inline-flex; align-items: center; margin-right: 4px; }
.inbox-pinned-mark .inbox-pin-icon { width: 13px; height: 13px; }
.conversation-pinned-messages { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; min-width: 0; padding: 7px 12px; border-bottom: 1px solid var(--dialog-line); background: #f7f6ff; color: #4e49ad; font-size: .72rem; }
.conversation-chat:has(> .conversation-pinned-messages:not([hidden])) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.conversation-pinned-messages[hidden] { display: none; }
.conversation-pinned-label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; font-weight: 700; }
.conversation-pinned-label .inbox-pin-icon { width: 13px; height: 13px; }
.conversation-pinned-items { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.conversation-pinned-items button { flex: 0 0 auto; max-width: 220px; overflow: hidden; padding: 4px 8px; border: 1px solid #dcd9fc; border-radius: 7px; background: #fff; color: #373477; font: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.conversation-pinned-items button:hover { background: #eeebff; }
.conversation-message-pin { display: inline-flex; margin: 0 0 3px; color: #665dea; }
.conversation-message-pin .inbox-pin-icon { width: 13px; height: 13px; }
.work-message-sender { border: 0; padding: 0; background: transparent; color: var(--dialog-accent-strong); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.work-message-sender:hover { text-decoration: underline; }
.work-vk-remove { color: #b53343; }
.work-folder-colors { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 16px; padding: 0; border: 0; }
.work-folder-colors legend { margin-bottom: 7px; font-size: .8rem; }
.work-folder-colors label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.work-folder-colors input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.work-folder-swatch { display: inline-block; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; font-size: .72rem; }
.work-folder-colors input:checked + .work-folder-swatch { outline: 2px solid currentColor; outline-offset: 2px; }
.work-folder-colors input:focus-visible + .work-folder-swatch { outline: 2px solid #242424; outline-offset: 3px; }
.work-folder-tabs [data-color="violet"], .work-folder-swatch[data-color="violet"], .inbox-folder-indicator[data-color="violet"] { --folder-ink: #554bd5; --folder-bg: #efedff; }
.work-folder-tabs [data-color="blue"], .work-folder-swatch[data-color="blue"], .inbox-folder-indicator[data-color="blue"] { --folder-ink: #1768c6; --folder-bg: #e6f1ff; }
.work-folder-tabs [data-color="green"], .work-folder-swatch[data-color="green"], .inbox-folder-indicator[data-color="green"] { --folder-ink: #197453; --folder-bg: #e5f6ed; }
.work-folder-tabs [data-color="orange"], .work-folder-swatch[data-color="orange"], .inbox-folder-indicator[data-color="orange"] { --folder-ink: #a95612; --folder-bg: #fff0dc; }
.work-folder-tabs [data-color="pink"], .work-folder-swatch[data-color="pink"], .inbox-folder-indicator[data-color="pink"] { --folder-ink: #a72c6c; --folder-bg: #fde9f2; }
.work-folder-swatch { background: var(--folder-bg); color: var(--folder-ink); }
.inbox-folder-indicator[data-color] { background: var(--folder-bg); }
#inbound-view .inbox-folder-tabs .work-folder-tabs button[data-color]:not([aria-pressed="true"]) { background: var(--folder-bg); color: var(--folder-ink); }
#inbound-view .inbox-folder-tabs .work-folder-tabs button[data-color][aria-pressed="true"] { background: transparent; color: var(--folder-ink); }
.vk-comment-actions .vk-comment-delete-link { margin-left: auto; }
.vk-comment-reply-error { margin: 6px 0 0; font-size: .76rem; }
#work-vk-post-body:empty { display: none; }
@media (min-width: 761px) { #inbound-view .work-chat-sidebar-heading #work-add-chat { right: 14px; } }
@media (min-width: 761px) and (max-width: 1180px) {
  .work-inbox-layout { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.5fr); }
  .work-inbox-layout > .work-chat-panel { grid-column: 2; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .work-inbox-layout { grid-template-columns: 1fr; height: auto; }
  .work-chat-sidebar { height: 360px; }
  .work-inbox-layout > .work-chat-panel { grid-column: 1; min-height: 560px; }
}
.vk-comments-setup { display: grid; gap: 6px; margin-top: 16px; }
.vk-comments-setup button { justify-self: start; }
.vk-comments-setup p { margin: 0; }