.accounts, .conversations, .chat { display: flex; flex-direction: column; }
.account-controls { padding: 11px 12px 9px; border-bottom: 1px solid rgba(207,227,241,.78); }
.account-actions { margin-top: 8px; display: grid; grid-template-columns: 1fr 1.16fr; gap: 7px; }
.account-actions button { height: 30px; border: 1px solid var(--line); border-radius: 9px; color: #53768f; background: rgba(255,255,255,.68); cursor: pointer; font-size: 11px; }
.account-actions button:hover { color: var(--blue); border-color: #98c8dd; background: #fff; }
.account-actions button span { margin-right: 4px; color: #168bab; font-weight: 800; }
.section-heading { height: 47px; padding: 0 13px 0 15px; display: flex; align-items: center; justify-content: space-between; }
.section-heading > span { display: flex; align-items: baseline; gap: 7px; }
.section-heading strong { color: #31566f; font-size: 12px; font-weight: 700; line-height: 1.35; }
.section-heading small { color: #6e8798; font-size: 10px; font-weight: 500; line-height: 1.4; }
.text-button { height: 28px; padding: 0 9px; border: 1px solid #a6d1e2; border-radius: 8px; color: #087b9f; background: rgba(255,255,255,.7); cursor: pointer; font-size: 10px; font-weight: 700; }
.text-button:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.account-list { min-height: 0; flex: 1; padding: 0 8px 10px; }
.account-group { margin-bottom: 8px; overflow: hidden; border: 1px solid rgba(192,219,234,.82); border-radius: 12px; background: rgba(255,255,255,.5); }
.group-heading { height: 30px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; color: #6b8799; font-size: 10px; cursor: pointer; user-select: none; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.group-heading:hover { color: #187d9d; background: rgba(219,241,249,.65); }
.group-heading:focus-visible { outline: 2px solid #168eaf; outline-offset: -2px; }
.group-heading strong { color: #496d84; font-size: 11px; font-weight: 650; line-height: 1.35; }
.group-heading-copy { min-width: 0; display: flex; align-items: center; gap: 5px; }
.group-chevron { width: 10px; color: #168eaf; font-size: 12px; font-style: normal; line-height: 1; text-align: center; transition: transform .15s ease; }
.group-count { padding: 2px 6px; border-radius: 99px; background: #dcecf5; }
.account-group.collapsed .account-row { display: none; }
.account-group.collapsed .group-chevron { transform: rotate(-90deg); }
.group-heading.drag-over { color: #075f7d; background: #c9eef8; box-shadow: inset 0 0 0 2px #1598b6, 0 3px 10px rgba(21,152,182,.2); }
.account-row { width: 100%; min-height: 70px; padding: 8px 9px; display: grid; grid-template-columns: 44px minmax(0,1fr) 10px; align-items: center; gap: 9px; border: 0; border-top: 1px solid rgba(208,228,240,.7); color: inherit; background: transparent; text-align: left; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.account-row[draggable="true"] { cursor: grab; }
.account-row.dragging { opacity: .42; cursor: grabbing; }
.account-row.processing, .conversation-row.processing { cursor: progress; }
.account-row.processing { box-shadow: inset 3px 0 0 #1598b6, inset 0 0 0 999px rgba(218,241,249,.24); }
.conversation-row.processing { box-shadow: inset 3px 0 0 #1598b6; }
.account-row:hover { background: rgba(224,242,251,.78); }
.account-row.active { position: relative; z-index: 1; background: linear-gradient(90deg,#bde9f5,#e7f8fd); box-shadow: inset 5px 0 0 #087f9f, inset 0 0 0 2px #26a7c4, 0 4px 13px rgba(10,126,158,.2); }
.account-row.active .account-avatar .avatar-frame { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1499b8; }
.account-row.pinned:not(.active) { background: rgba(237,248,253,.72); }
.account-avatar { position: relative; width: 44px; height: 44px; }
.account-row .account-avatar .avatar-frame { width: 44px; height: 44px; border-radius: 50%; }
.account-platform { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid #eef9fd; border-radius: 50%; color: #fff; background: #334b63; font-size: 10px; font-style: normal; font-weight: 800; }
.account-unread { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #eef9fd; border-radius: 99px; color: #fff; background: #ee4e6c; font-size: 9px; line-height: 1; }
.account-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #183f59; font-size: 12px; font-weight: 700; line-height: 1.35; }
.account-copy small { color: #6d8799; font-size: 10px; font-weight: 500; line-height: 1.4; }
.account-title { min-width: 0; display: flex; align-items: center; gap: 5px; }
.account-title strong { min-width: 0; flex: 1 1 auto; }
.account-state-pill { flex: 0 0 auto; padding: 1px 5px; border: 1px solid currentColor; border-radius: 99px; font-size: 8px; font-style: normal; font-weight: 750; }
.account-state-pill.online { color: #159c72; background: #dff8ee; }
.account-state-pill.offline { color: #c85369; background: #fff0f3; }
.account-selected-badge { visibility: hidden; opacity: 0; flex: 0 0 auto; padding: 2px 6px; border-radius: 99px; color: #fff; background: #087f9f; box-shadow: 0 2px 6px rgba(8,127,159,.2); font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.account-row.active .account-selected-badge { visibility: visible; opacity: 1; }
.account-copy .account-stats { color: #55788f; font-weight: 700; }
.account-pin { margin-right: 4px; padding: 1px 3px; border-radius: 4px; color: #117895; background: #d8f0f7; font-size: 8px; font-style: normal; vertical-align: 1px; }
.account-status { width: 7px; height: 7px; border-radius: 50%; background: #a9bac5; }
.account-status.online { background: #18a674; box-shadow: 0 0 0 3px rgba(24,166,116,.13); }
.account-status.invalid { background: #e46a7e; }
.conversation-toolbar { flex: 0 0 auto; }
.conversation-search { flex: 0 0 auto; margin: 10px 11px 8px; }
.conversation-tabs { height: 34px; flex: 0 0 auto; padding: 0 12px; display: flex; gap: 16px; border-bottom: 1px solid var(--line); }
.conversation-tabs button { position: relative; padding: 0 1px; border: 0; color: #7891a3; background: transparent; cursor: pointer; font-size: 11px; }
.conversation-tabs button.active { color: #176c8d; font-weight: 800; }
.conversation-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #1598b6; }
.conversation-list { min-height: 0; flex: 1; padding: 5px 6px 9px; }
.conversation-row { width: 100%; min-height: 65px; padding: 8px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; row-gap: 2px; border: 0; border-radius: 11px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.conversation-row:hover { background: rgba(219,239,250,.72); }
.conversation-row.active { background: linear-gradient(100deg,#c6e8f5,#dff3fa); box-shadow: inset 3px 0 0 #1598b6; }
.conversation-row.pinned:not(.active) { background: rgba(239,248,252,.72); }
.conversation-row .avatar-frame { width: 42px; height: 42px; grid-row: 1 / 3; border-radius: 50%; }
.conversation-name { min-width: 0; overflow: hidden; color: #1d435d; font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.pin-mark { margin-right: 5px; padding: 1px 4px; border-radius: 4px; color: #117895; background: #d8f0f7; font-size: 8px; font-style: normal; vertical-align: 1px; }
.chat-type { margin-right: 5px; padding: 1px 4px; border-radius: 4px; font-size: 8px; font-style: normal; vertical-align: 1px; }
.chat-type.direct { color: #397795; background: #e5f1f7; }
.chat-type.group { color: #7b5aa6; background: #f0eafb; }
.conversation-time { color: #8299a8; font-size: 9px; font-weight: 500; line-height: 1.35; }
.conversation-preview { min-width: 0; overflow: hidden; color: #6d8799; font-size: 10px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview b { color: #52758a; font-weight: 750; }
.unread-badge { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; color: #fff; background: #e84d6c; font-size: 9px; font-style: normal; }
.chat-header { flex: 0 0 auto; padding-right: 15px; }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; }
.chat-tools { height: 48px; flex: 0 0 auto; padding: 6px 15px; display: grid; grid-template-columns: auto minmax(180px,300px) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: rgba(248,253,255,.65); }
.chat-tools > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.chat-tools strong { color: #42647a; font-size: 12px; }
.chat-tools small { color: var(--muted); font-size: 10px; }
.compact-search { height: 32px; }
.outline-button { height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: #607f93; background: rgba(255,255,255,.82); cursor: pointer; font-size: 10px; }
.outline-button:disabled { opacity: .42; cursor: default; }
.outline-button.has-new { color: #fff; border-color: #e54e6c; background: #e54e6c; box-shadow: 0 4px 12px rgba(229,78,108,.24); }
.messages { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 18px 20px; scroll-behavior: auto; background: radial-gradient(circle at 10% 16%,rgba(103,191,220,.08),transparent 28%), linear-gradient(180deg,rgba(250,253,255,.9),rgba(229,244,252,.72)); }
.message-day { width: max-content; margin: 2px auto 14px; padding: 4px 9px; border-radius: 99px; color: #8399a8; background: rgba(195,219,232,.48); font-size: 9px; }
.message-time-divider { width: 100%; margin: 3px 0 14px; display: flex; align-items: center; justify-content: center; }
.message-time-divider time { padding: 3px 9px; border-radius: 99px; color: #8a9ca8; background: rgba(190,215,228,.42); font-size: 9px; line-height: 1.35; }
.message-row { margin: 0 0 15px; display: flex; align-items: flex-start; gap: 9px; }
.message-row.compact { margin-top: -7px; margin-bottom: 10px; }
.message-row.mine { flex-direction: row-reverse; }
.message-row .avatar-frame { width: 34px; height: 34px; border-radius: 50%; }
.message-stack { max-width: min(68%,620px); display: flex; flex-direction: column; gap: 3px; }
.message-row.mine .message-stack { align-items: flex-end; }
.message-sender { color: #748c9c; font-size: 10px; font-weight: 500; line-height: 1.4; }
.message-time { color: #8298a6; font-size: 9px; font-weight: 500; line-height: 1.35; }
.message-bubble { padding: 9px 12px; border: 0; border-left: 3px solid #12c77b; border-radius: 3px 10px 10px 10px; color: #1f4053; background: #fff; box-shadow: 0 4px 12px rgba(49,92,118,.07); font-size: 12px; font-weight: 400; line-height: 1.58; word-break: break-word; white-space: pre-wrap; }
.message-row.mine .message-bubble { border: 0; border-right: 3px solid #16b968; border-radius: 10px 3px 10px 10px; color: #103e27; background: linear-gradient(135deg,#65e984,#86ef68); }
.message-row.transient .message-bubble { box-shadow: 0 4px 12px rgba(49,92,118,.07), inset 0 0 0 1px rgba(255,255,255,.3); }
.message-row.transient.sending { opacity: .82; }
.message-delivery { min-height: 18px; padding: 0; border: 0; color: #78909e; background: transparent; font-size: 9px; line-height: 18px; }
.message-delivery.sending::before { content: ""; width: 8px; height: 8px; margin-right: 4px; display: inline-block; border: 1px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: -1px; animation: message-delivery-spin .8s linear infinite; }
.message-delivery.sent { color: #3a8d69; }
.message-delivery.failed { color: #c33f58; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.message-delivery.failed:hover, .message-delivery.failed:focus-visible { color: #9f253d; outline: 2px solid rgba(195,63,88,.2); outline-offset: 2px; }
@keyframes message-delivery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .message-delivery.sending::before { animation: none; } }
.message-text { display: block; }
.message-media { display: block; max-width: min(360px,100%); max-height: 360px; border-radius: 10px; object-fit: contain; }
.message-text + .message-media { margin-top: 7px; }
.message-media.emoji { width: auto; max-width: 140px; max-height: 140px; }
.message-emoji-recovering { min-width: 76px; min-height: 44px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(99,151,178,.18); border-radius: 10px; color: #6e8798; background: rgba(244,250,253,.86); }
.message-emoji-recovering i { color: #2a91ad; font-size: 20px; font-style: normal; line-height: 1; }
.message-emoji-recovering small { font-size: 10px; line-height: 1.25; white-space: nowrap; }
.message-image-recovering { min-width: 112px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px dashed #9fc8d8; border-radius: 9px; color: #52788d; background: rgba(231,246,251,.82); font-size: 10px; font-weight: 700; white-space: nowrap; }
.message-image-recovering i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #65a9bf; font-size: 12px; font-style: normal; }
.message-emoji-text { display: block; font-size: 28px; line-height: 1.2; }
.message-card { position: relative; width: min(320px,100%); min-height: 68px; overflow: hidden; display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: stretch; border: 1px solid rgba(171,207,224,.72); border-radius: 10px; color: #23465c; background: rgba(255,255,255,.96); text-decoration: none; }
.message-card:hover { border-color: #8bc5dc; background: #f8fdff; }
.message-card-cover, .message-card-icon { width: 68px; height: 68px; grid-row: 1; display: grid; place-items: center; object-fit: cover; color: #fff; background: linear-gradient(145deg,#248fab,#176079); font-size: 18px; font-weight: 800; }
.message-card-cover.profile { width: 50px; height: 50px; margin: 9px; border-radius: 50%; }
.message-card-copy { min-width: 0; padding: 9px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.message-card-copy strong, .message-card-copy small { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.message-card-copy strong { color: #24475d; font-size: 11px; -webkit-line-clamp: 2; }
.message-card-copy small { color: #78909f; font-size: 9px; -webkit-line-clamp: 2; }
.message-card-duration { position: absolute; margin: 46px 0 0 37px; padding: 1px 4px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.62); font-size: 8px; }
.message-card.live .message-card-icon { background: linear-gradient(145deg,#f45b77,#b92951); }
.message-card.product .message-card-icon { background: linear-gradient(145deg,#f59b42,#d86c23); }
.message-card.profile .message-card-icon { border-radius: 50%; transform: scale(.72); }
.message-voice { min-width: 150px; display: flex; align-items: center; gap: 8px; }
.message-voice-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #1786a9; font-size: 9px; }
.message-voice strong { font-size: 11px; }
.message-voice audio { width: 180px; max-width: 50vw; height: 28px; }
.message-row.system { margin: 3px 0 13px; flex-direction: column; align-items: center; gap: 4px; }
.message-system { max-width: min(82%,620px); padding: 5px 10px; border-radius: 99px; color: #6f8797; background: rgba(190,215,228,.55); font-size: 9px; line-height: 1.45; text-align: center; }
.message-row.system .message-time { text-align: center; }
.message-unsupported { color: #8096a5; font-size: 11px; }
.composer { min-height: 112px; flex: 0 0 auto; padding: 8px 14px 10px; border-top: 1px solid var(--line); background: rgba(248,253,255,.92); }
.compose-tools { height: 24px; display: flex; gap: 15px; align-items: center; color: #6f8fa3; font-size: 15px; }
.compose-row { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 9px; align-items: end; }
.compose-row textarea { width: 100%; height: 48px; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }
.compose-row textarea:focus { border-color: #74bbd5; box-shadow: 0 0 0 3px rgba(30,156,190,.1); }
.compose-row textarea:disabled { color: #91a4b1; background: #edf4f8; }
.send-button { height: 38px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#0a88ac,#086985); cursor: pointer; font-size: 11px; font-weight: 800; }
.send-button:disabled { color: #8297a5; background: #d9e5eb; cursor: default; }
.composer:has(.send-button:disabled) { background: rgba(241,248,251,.96); }
.composer > small { display: block; margin-top: 4px; color: #91a5b2; font-size: 9px; text-align: right; }
@media (max-width: 980px) and (min-width: 761px) { .chat-tools { grid-template-columns: auto 1fr; } .chat-tools .outline-button { display: none; } .message-stack { max-width: 78%; } }
@media (max-width: 760px) {
  .accounts, .conversations, .chat { width: 100%; max-width: 100%; overflow-x: hidden; }
  .account-list, .conversation-list { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .brand, .toolbar { height: 56px; }
  .round-button, .back-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .back-button { margin-left: -10px; font-size: 26px; }
  .field-search, .account-actions button, .text-button, .conversation-tabs button, .empty-state button, .context-menu button { min-height: 44px; }
  .group-heading { height: 44px; }
  .conversation-tabs { height: 44px; }
  .chat-tools { height: 50px; min-width: 0; grid-template-columns: auto minmax(0,1fr); padding: 3px 10px; gap: 8px; }
  .chat-tools > span, .compact-search { min-width: 0; }
  .chat-tools .outline-button { display: none; }
  .messages { min-width: 0; padding: 12px 10px; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .message-stack { max-width: min(78%,calc(100% - 43px)); }
  .message-card, .message-media { max-width: 100%; }
  .composer { min-width: 0; min-height: 88px; padding: 4px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); }
  .with-product-nav .composer { padding-bottom: 6px; }
  .compose-tools { height: 20px; gap: 12px; font-size: 14px; }
  .compose-row { grid-template-columns: minmax(0,1fr) 56px; gap: 6px; }
  .compose-row, .compose-row textarea { min-width: 0; }
  .compose-row textarea { height: 44px; min-height: 44px; padding: 8px 9px; line-height: 1.35; }
  .send-button { height: 44px; min-height: 44px; }
  .composer > small { min-height: 12px; margin-top: 2px; overflow: hidden; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-keyboard-open .composer { padding-bottom: 6px; }
  .mobile-keyboard-open .composer > small { display: none; }
  .mobile-keyboard-open .messages { scroll-behavior: auto; }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .field-search input, .compose-row textarea, .group-form input { font-size: 16px; }
  }
}

@media (max-width: 430px) {
  .brand, .toolbar { height: 52px; gap: 7px; }
  .brand, .toolbar { padding-left: max(8px,env(safe-area-inset-left)); padding-right: max(8px,env(safe-area-inset-right)); }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .chat-avatar { width: 34px; height: 34px; }
  .chat-header { padding-right: max(8px,env(safe-area-inset-right)); }
  .chat-tools { height: 48px; padding: 2px 8px; gap: 7px; }
  .chat-tools > span { gap: 4px; }
  .messages { padding: 10px 8px; }
  .message-row { margin-bottom: 12px; gap: 7px; }
  .message-row.compact { margin-top: -5px; margin-bottom: 8px; }
  .message-row .avatar-frame { width: 32px; height: 32px; }
  .message-stack { max-width: min(82%,calc(100% - 39px)); }
  .message-bubble { padding: 8px 10px; line-height: 1.5; }
}

@media (max-width: 375px) {
  .brand, .toolbar { height: 48px; gap: 5px; }
  .brand-copy small, .chat-header .toolbar-copy small { display: none; }
  .chat-avatar { width: 30px; height: 30px; }
  .chat-tools { height: 44px; padding: 0 7px; gap: 6px; }
  .chat-tools > span small { display: none; }
  .chat-tools strong { font-size: 11px; }
  .messages { padding: 8px 7px; }
  .message-stack { max-width: min(84%,calc(100% - 37px)); }
  .composer { padding-right: max(6px,env(safe-area-inset-right)); padding-left: max(6px,env(safe-area-inset-left)); }
  .compose-row { grid-template-columns: minmax(0,1fr) 52px; gap: 5px; }
  .message-card { grid-template-columns: 60px minmax(0,1fr); }
  .message-card-cover, .message-card-icon { width: 60px; height: 60px; }
}