/* V55.34: visible channels, stable conversation height, and recoverable UI state. */
/* Desktop lists must scroll independently when an open dialog locks the body. */
@media (min-width: 901px) {
  .app { height:100dvh; min-height:0; overflow:hidden; }
  .app > main { min-height:0; display:flex; flex-direction:column; }
  .app > main > .topbar { flex:none; }
  .app > main > .content { flex:1; min-height:0; width:100%; overflow-y:auto; overscroll-behavior-y:contain; }
  body[data-v20-view="today"] .v20-segments { position:sticky; top:0; z-index:5; }
}

.channel-badge { font-size: 11px; font-weight: 650; line-height: 1.35; white-space: normal; border: 1px solid transparent; }
.channel-max { background:#ede7ff; color:#562f93; border-color:#d9c8ff; }
.channel-telegram { background:#e2f2fc; color:#185d86; border-color:#b7dcf3; }
.channel-avito { background:#e7f5e8; color:#2a6934; border-color:#bfdcc3; }
.channel-site { background:#fff0d6; color:#79521a; border-color:#eed2a0; }
.message small { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:8px; }
.message.automated { background:#f1f3f5; }
.message-automation { padding:2px 7px; border-radius:8px; background:#e1e6ea; color:#3d4e59; font-weight:600; }
.message small > span:last-child { font-size:11px; }
.detail-dialog:has(.v20-client-grid) { height:var(--crm-viewport-height,100dvh); max-height:var(--crm-viewport-height,100dvh); overflow:hidden; }
#detail:has(.v20-client-grid) { height:100%; min-height:0; display:flex; flex-direction:column; }
.v20-chat-head,.v20-context { flex:none; }
.v20-client-grid { flex:1; min-height:0; height:auto; }
.v20-chat-column { height:100%; min-height:0; }
.v20-chat-panel { display:flex; flex-direction:column; min-height:0; }
.v20-chat-panel .timeline-filter,.v20-chat-panel .chat-sync,.v20-chat-panel .v20-compose { flex:none; }
.v20-chat-panel .messages { flex:1; height:auto; min-height:0; overflow-y:auto; }
/* A wide message bubble with attachment menu inside and send on the right. */
.v20-compose { grid-template-columns:minmax(0,1fr) 44px; row-gap:7px; }
.v20-compose > .crm-channel-select { grid-column:1/-1; grid-row:auto; display:flex; align-items:center; gap:10px; color:#3d5157; font-size:12px; font-weight:600; }
.crm-channel-select select { width:auto; flex:1; min-width:0; min-height:40px; background:#f3f7fa; padding:8px 10px; border:1px solid #c7d7e0; border-radius:10px; color:#21353d; }
.v20-compose textarea { grid-column:1; grid-row:1; min-width:0; min-height:48px; max-height:132px; padding:11px 54px 11px 14px; line-height:22px; border-radius:24px; background:#f4f5f7; border-color:#dfe4e9; overflow-y:auto; }
.v20-compose textarea:focus { border-color:#9ac7ef; box-shadow:0 0 0 2px #3390ec15; }
.v20-compose .compose-controls { display:contents; }
.v20-compose .compose-controls > button.primary { grid-column:2; grid-row:1; align-self:end; margin:0 0 2px; transform:none; background:#3390ec; color:#fff; }
.v20-compose .compose-controls > .ghost,.v20-compose .compose-controls > button.primary,.v20-compose-settings summary { width:44px; height:44px; min-height:44px; }
.v20-compose-settings { display:block; }
.v20-compose-settings > div { max-height:45vh; overflow-y:auto; bottom:50px; z-index:8; }
.composer-attachment,.composer-send-status { grid-column:1/-1; display:flex; align-items:center; gap:8px; font-size:12px; overflow-wrap:anywhere; background:#fff5df; padding:8px; border-radius:9px; }
.composer-send-status { flex-wrap:wrap; }
.composer-attachment button,.composer-send-status button { margin-left:auto; flex:none; min-height:36px; }
.chat-sync { min-height:28px; padding:3px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:#65777a; background:#f1f5f5; }
.chat-sync button { border:0; min-height:28px; padding:2px 5px; color:#28627e; background:transparent; font-size:11px; }
.chat-sync.is-error { background:#fff1d8; color:#805411; }
.loading-state,.load-error { padding:18px; border-radius:12px; background:#f0f5f8; }
.client-opening-state { position:fixed; bottom:calc(88px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:12px 18px; font-size:14px; box-shadow:0 4px 20px #17363a26; z-index:1100; pointer-events:none; }
.load-error { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff1e6; }
.client-pager { margin:18px 0; display:flex; align-items:center; justify-content:center; gap:16px; }
.client-pager button { min-height:44px; }
.client-pager span { font-size:13px; color:#56646b; text-align:center; }
#crm-status { min-height:36px; border:0; background:transparent; color:#5a6a71; font-size:12px; }
.system-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.system-status-grid > div { border:1px solid #dde4e6; padding:12px; border-radius:12px; display:grid; gap:6px; }
.system-status-grid span { font-size:12px; color:#607079; }
.message-delivery { display:inline-flex; margin-left:auto; white-space:nowrap; font-size:13px; line-height:1.2; letter-spacing:-2px; gap:3px; }
.message-delivery.is-sent { color:#5d777c; }
.message-delivery.is-read { color:#1688c3; }
.message-delivery.is-sending,.message-delivery.is-unknown { color:#87713e; letter-spacing:normal; }
.message-delivery.is-failed { color:#a03030; letter-spacing:normal; }
[hidden] { display:none!important; }
@media(max-width:900px) {
  .detail-dialog:has(.v20-client-grid) { top:var(--crm-viewport-top,0px); bottom:auto; }
  .v20-client-grid { display:block; }
  .v20-context small { display:block; line-height:1.3; }
  .v20-context > span { min-width:0; }
  .v20-context button { flex:none; min-height:40px; }
  .v20-compose { padding:7px 9px max(9px,env(safe-area-inset-bottom)); gap:6px; }
  .v20-compose textarea { font-size:16px; padding:11px 54px 11px 14px; border-radius:24px; max-height:132px; }
  .v20-compose .compose-controls { gap:3px; }
  .crm-channel-select select { font-size:16px; min-height:42px; }
  .v20-compose > .crm-channel-select { font-size:11px; gap:8px; }
  .v20-chat-panel .messages { padding:12px 10px; }
  .v20-chat-panel .message { max-width:94%; }
  .chat-sync { padding-left:10px; padding-right:10px; }
  .timeline-filter button { min-height:40px; }
  .v20-chat-head .pills { max-width:100%; flex-wrap:wrap; max-height:52px; overflow-y:auto; }
  .topbar,body[data-v20-view="today"] .topbar { display:flex; flex-wrap:wrap; height:auto; min-height:0; padding:18px 12px 12px; gap:12px; }
  .topbar > div:first-child { width:100%; }
  .topbar h1 { font-size:27px; }
  .top-actions,body[data-v20-view="today"] .top-actions { position:static; width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
  .top-actions .search,.top-actions .search.v20-search-open,body[data-v20-view="today"] .top-actions .search,body[data-v20-view="today"] .top-actions .search.v20-search-open { position:static; order:-1; width:100%; min-width:0; height:44px; padding:0 12px; border:1px solid #d6e0e5; border-radius:12px; justify-content:flex-start; background:white; }
  .top-actions .search input,body[data-v20-view="today"] .top-actions .search input { position:static; width:100%; opacity:1; pointer-events:auto; font-size:16px; }
  .topbar .scope,body[data-v20-view="today"] .top-actions .scope { display:flex!important; flex:1; align-items:center; gap:6px; font-size:12px; }
  .topbar .scope select { min-height:44px; width:100%; max-width:160px; font-size:16px; }
  .topbar #new-client,body[data-v20-view="today"] .top-actions #new-client { display:block!important; min-height:44px; font-size:12px; padding:8px; }
  .v20-wide-side time { display:block; font-size:11px; max-width:85px; }
  .v20-wide-side > div { display:flex; }
  .v20-wide-side strong { display:block; }
  .mobile-nav { grid-template-columns:repeat(5,1fr); }
  .mobile-nav [data-view="returns"] { display:grid!important; }
  .mobile-nav [data-view="previous"] { display:none!important; }
  .client-pager { gap:8px; }
  .client-pager button { padding:8px; }
  .filters { flex-wrap:wrap; }
  .filters select { min-height:44px; font-size:16px; }
}
.v20-context .v20-mobile-no-reply[hidden],.v20-head-actions [hidden] { display:none!important; }
.v20-head-actions > [data-v20-actions] {
  width:44px; height:44px; min-height:44px; padding:0; display:flex; align-items:center;
  justify-content:center; border:0; border-radius:12px; color:var(--v20-text); background:var(--v20-surface-2); cursor:pointer;
}
.v20-head-actions > [data-v20-actions]:focus-visible { outline:2px solid #3390ec; outline-offset:2px; }
#content .crm-client-priority { background:#fff9e9; box-shadow:inset 3px 0 #d5ad53; }
#content .crm-client-priority:hover { background:#fff4d5; }
.crm-dialog-tools-only { display:flex; justify-content:flex-end; padding:8px 12px; border-top:1px solid #e2e8ed; }
@media (max-width:900px) {
  .v20-chat-head { grid-template-columns:44px minmax(0,1fr) auto; overflow:visible; }
  .v20-head-actions { gap:4px; }
}

.v20-inbox-copy em { display:flex; flex-wrap:wrap; gap:4px; align-items:center; white-space:normal; }
.v20-inbox-copy em time { font-size:10px; }

.crm-filter-toolbar { display:none; }
.crm-media-item { width:min(320px,100%); margin-top:8px; overflow:hidden; border-radius:12px; }
.crm-photo { display:block; position:relative; background:#e6ecee; border-radius:12px; overflow:hidden; }
.crm-photo img { display:block; width:100%; height:210px; object-fit:cover; margin:0; }
.crm-media-item video { display:block; width:100%; aspect-ratio:16/9; max-height:260px; background:#18272b; border-radius:12px; }
.crm-media-item audio { display:block; width:100%; }
.crm-media-player { position:relative; }
.crm-media-start { min-height:44px; padding:10px 18px; border:0; border-radius:24px; background:#fff; color:#17363a; font-size:15px; font-weight:600; box-shadow:0 2px 12px #0002; }
.crm-media-start[hidden] { display:none; }
.crm-media-player-video .crm-media-start { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); white-space:nowrap; }
.crm-media-player-audio .crm-media-start { position:absolute; inset:0; width:100%; background:#edf2f3; }
.crm-media-item.is-loading .crm-media-start { opacity:.9; }
.crm-media-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 2px; font-size:12px; }
.crm-media-caption > span { min-width:0; overflow-wrap:anywhere; }
.crm-media-open { flex:none; padding:6px 0; color:#226b92; }
.crm-media-fallback { display:none; padding:12px; font-size:13px; }
.crm-media-item.is-unavailable .crm-media-fallback { display:block; }
.crm-media-item.is-unavailable img { display:none; }
.crm-file-card { display:flex; align-items:center; gap:10px; max-width:340px; padding:12px; margin-top:8px; border:1px solid #d5dfe2; border-radius:12px; background:#f5f8f9; color:#263e47; text-decoration:none; }
.crm-file-card > span:nth-child(2) { flex:1; min-width:0; }
.crm-file-card strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.crm-file-card small { display:block; font-size:12px; color:#65777a; margin-top:3px; }
.crm-file-icon { font-size:25px; }
.crm-file-card.is-unavailable { color:#65777a; }
.crm-media-viewer { position:fixed; inset:0; width:min(980px,100vw); max-width:100vw; max-height:var(--crm-viewport-height,100dvh); margin:auto; border:0; border-radius:16px; padding:12px; background:#17282c; color:white; }
.crm-media-viewer::backdrop { background:rgba(0,0,0,.8); }
.crm-media-viewer header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.crm-media-viewer header strong { min-width:0; overflow-wrap:anywhere; }
.crm-media-viewer button { width:44px; height:44px; flex:none; border:0; border-radius:50%; font-size:28px; color:white; background:#34484e; }
.crm-media-viewer > img { display:block; width:100%; height:calc(var(--crm-viewport-height,100dvh) - 150px); object-fit:contain; margin:8px 0; }
.crm-media-viewer > a { display:block; color:#c5e7ff; padding:10px; text-align:center; }
@media(max-width:900px) {
  body[data-v20-view="clients"] .topbar > div:first-child,
  body[data-v20-view="previous"] .topbar > div:first-child { display:none; }
  body[data-v20-view="clients"] .topbar,
  body[data-v20-view="previous"] .topbar { padding:10px 12px; }
  .crm-filter-panel { margin:0 0 10px; }
  .crm-filter-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .crm-filter-toolbar button { display:flex; align-items:center; gap:6px; min-height:44px; border:1px solid #d6e0e5; border-radius:10px; padding:8px 12px; background:white; font-size:14px; }
  .crm-filter-toolbar b { padding:1px 6px; border-radius:9px; background:#dcecf4; color:#245d7c; font-size:12px; }
  .crm-filter-panel:not(.is-open) .filters { display:none; }
  .crm-filter-panel.is-open .filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 0; padding:0; overflow:visible; }
  .crm-filter-panel .filters > * { min-width:0; width:100%; font-size:16px; min-height:44px; padding:8px; }
  .crm-filter-panel .filters [data-filter="source"] { grid-column:1/-1; }
  .v20-client-switch { margin-bottom:8px; }
  .v20-client-switch button { min-height:40px; }
  .crm-media-viewer { border-radius:0; padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)); }
}

/* Only the reduced mobile viewport needs a compact conversation header. */
@media(max-width:900px) {
  .crm-keyboard-open .v20-chat-head {
    min-height:48px; padding:max(2px,env(safe-area-inset-top)) 8px 2px; align-items:center;
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .crm-keyboard-open .v20-chat-head h2 { font-size:16px; margin:0; }
  .crm-keyboard-open .v20-chat-head .pills,
  .crm-keyboard-open .v20-context,
  .crm-keyboard-open .v20-chat-panel .chat-sync:not(.is-error) { display:none; }
  .crm-keyboard-open .v20-chat-head .close,
  .crm-keyboard-open .v20-head-actions > button { width:44px; height:44px; min-height:44px; }
  .crm-keyboard-open .v20-chat-panel .messages { padding:8px 10px; }
  .crm-keyboard-open .v20-compose { padding:6px 8px; gap:4px; }
  .crm-keyboard-open .v20-compose > .crm-channel-select { font-size:0; gap:0; }
  .crm-keyboard-open .crm-channel-select select { font-size:16px; min-height:44px; padding:4px 8px; }
  .crm-keyboard-open .v20-compose textarea {
    min-height:44px; max-height:88px; padding:10px 54px 10px 14px; line-height:20px; overflow-y:auto;
  }
  .crm-keyboard-open .v20-compose-settings > div { max-height:max(80px,calc(var(--crm-viewport-height) - 160px)); }
  .crm-keyboard-open .v20-drawer { top:0; }
}

/* One compact selector controls both history and the outgoing recipient. */
.v20-chat-panel .timeline-filter { margin:0; padding:6px 10px; gap:6px; }
.v20-chat-panel .timeline-filter button { min-height:44px; flex:none; font-size:13px; padding:6px 12px; }
.v20-chat-panel .timeline-filter button[aria-pressed="true"] { font-weight:650; }
.v20-chat-panel .timeline-filter:empty { display:none; }
.v20-compose .compose-controls > input[hidden] { display:none; }
.v20-compose .crm-compose-tools { grid-column:1; grid-row:1; justify-self:end; align-self:end; position:relative; width:44px; margin:0 4px 2px 0; z-index:5; }
.crm-compose-tools > summary { display:grid; place-items:center; width:44px; height:44px; list-style:none; cursor:pointer; color:#758391; border-radius:50%; }
.crm-compose-tools > summary::-webkit-details-marker { display:none; }
.crm-compose-tools > summary:hover,.crm-compose-tools[open] > summary { color:#2684d6; background:#e5eef8; }
.crm-compose-tools > summary:focus-visible { outline:2px solid #3390ec; outline-offset:-3px; }
.v20-compose .crm-compose-menu { position:absolute; right:0; bottom:calc(100% + 10px); width:min(240px,calc(100vw - 84px)); max-height:max(100px,calc(var(--crm-viewport-height,100dvh) - 120px)); overflow-y:auto; padding:6px; border:1px solid #dfe5ed; border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 8px 30px #18344a26; }
.v20-compose .crm-compose-menu > .ghost,.v20-compose .crm-compose-menu > .crm-ai-reply,.v20-compose .crm-compose-menu > .crm-dialog-no-reply { display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:48px; height:auto; margin:0; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:#253c4c; font-size:15px; text-align:left; cursor:pointer; }
.v20-compose .crm-compose-menu > .ghost span { display:inline; }
.v20-compose .crm-compose-menu > :is(.ghost,.crm-ai-reply,.crm-dialog-no-reply):hover { background:#edf4fb; }
.v20-compose .crm-compose-menu > :is(.ghost,.crm-ai-reply,.crm-dialog-no-reply):focus-visible { outline:2px solid #3390ec; outline-offset:-2px; }
.v20-compose .crm-compose-menu > button:disabled { opacity:.5; cursor:default; }
/* Plans: show the selected period without empty calendar sections. */
#new-client.hidden { display:none!important; }
.schedule-toolbar { margin-bottom:16px; }
.schedule-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; max-width:560px; min-width:0; overflow:visible; box-sizing:border-box; }
.schedule-tabs button { min-width:0; min-height:44px; padding:8px 5px; white-space:nowrap; }
.v20-date-tile.is-overdue { background:#fff0eb; color:#ad432b; }
.crm-plans-empty { padding:28px 16px; border:1px solid #e0e5e8; border-radius:16px; background:#fff; color:#637079; text-align:center; }
.v20-task-main strong { white-space:normal; overflow-wrap:anywhere; }
.v20-task-row > time { font-size:12px; color:#637079; }
@media(max-width:900px) {
  .schedule-tabs button { font-size:13px; }
  .schedule-toolbar .filters { display:flex; margin:10px 0 0; }
  .schedule-toolbar .filters select { min-width:0; width:100%; min-height:44px; }
  .v20-task-groups { gap:18px; }
  .v20-task-row { grid-template-columns:40px minmax(0,1fr) 24px; }
  .v20-task-check { width:40px; height:44px; border-radius:12px; }
  .v20-task-main { grid-template-columns:minmax(0,1fr); min-height:44px; }
  .v20-task-icon { display:none; }
  .v20-task-row > time { grid-column:2; grid-row:2; font-size:12px; }
  .v20-task-row > .v20-more { grid-column:3; grid-row:1; }
  .v20-wide-row:not(.v20-order-row) { grid-template-columns:36px minmax(0,1fr) 76px; gap:8px; }
  .v20-wide-row:not(.v20-order-row) .v20-wide-side { width:76px; align-self:start; }
  .v20-wide-row:not(.v20-order-row) .v20-wide-side time { width:76px; line-height:1.35; }
}
@media(max-width:900px) {
  .crm-keyboard-open .v20-chat-panel .timeline-filter { padding:2px 8px; }
}

/* Notifications are available from the compact header on phones and desktop. */
.crm-push-open { display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; padding:8px; border:0; border-radius:50%; background:#f5f6f8; color:#17363a; }
.crm-push-actions { display:flex; flex-direction:column; gap:12px; }
.crm-push-dialog { max-width:min(440px,calc(100vw - 24px)); padding:20px; }
.crm-push-dialog p { line-height:1.5; }
.crm-push-dialog [hidden] { display:none; }


/* Preserve authored formatting in saved messages and the sending preview. */
.message .message-text { white-space: pre-wrap; white-space: break-spaces; overflow-wrap: anywhere; tab-size: 4; }