html, body { height:100%; }
    :root {
      --chat-density: 0.7; /* 70% do tamanho atual (~30% mais compacto) */
      --chat-avatar-size: calc(64px * var(--chat-density));
      --chat-row-gap: calc(10px * var(--chat-density));
      --chat-item-padding-y: calc(10px * var(--chat-density));
      --chat-item-padding-x: calc(10px * var(--chat-density));
    }
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; overflow:hidden; }
    @keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
    body.mobile-shell header { padding: 10px 16px; background:#0b845d; color:#fff; display:flex; align-items:center; gap:12px; transition: background-color .2s ease; }
    body.mobile-shell.wa-disconnected header { background:#9a4f00; }
    main { display:grid; grid-template-columns: 450px 1fr; height: calc(100vh - 24px); }
    #left { border-right: 1px solid #eee; display:flex; flex-direction:column; overflow:hidden; }
    #leftHeader { padding:10px 12px; background:#0b845d; color:#fff; border-bottom:1px solid #086748; position:relative; }
    body.wa-disconnected #leftHeader { background:#9a4f00; border-bottom-color:#7d3f00; }
    .leftHeaderRow { position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:26px; }
    .leftHeaderRow strong { position:absolute; left:50%; transform:translateX(-50%); font-size:13px; letter-spacing:.05em; text-align:center; white-space:nowrap; }
    #leftMenuBtn { border:0; background:transparent; color:#fff; cursor:pointer; font-size:22px; line-height:1; padding:2px 6px; border-radius:8px; }
    #leftMenuBtn:hover { background:rgba(255,255,255,.14); }
    #leftHeader #uploadIndicator { margin-top:6px; }
    #leftHeader #userActions { position:absolute; right:10px; top:44px; min-width:170px; background:#fff; color:#1f2937; border:1px solid #d6dce8; border-radius:10px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.18); z-index:30; flex-direction:column; }
    #leftHeader #userActions > div, #leftHeader #userActions > span, #leftHeader #userActions > button { width:100%; }
    #leftHeader #userActions .preferences-block { border:1px solid #e4eaf3; border-radius:8px; padding:8px; background:#f8fbff; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; }
    #leftHeader #userActions .preferences-title { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#607086; margin-bottom:6px; }
    #leftHeader #userActions .preferences-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:34px; gap:12px; font-size:12px; color:#20324d; padding:2px 0; cursor:pointer; }
    #leftHeader #userActions .preferences-label { flex:1 1 auto; min-width:0; }
    #leftHeader #userActions .switch-control { position:relative; flex:0 0 auto; width:42px; height:24px; }
    #leftHeader #userActions .switch-control input { position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; z-index:2; cursor:pointer; }
    #leftHeader #userActions .switch-slider { position:absolute; inset:0; border-radius:999px; background:#d9e4f2; border:1px solid #c4d2e4; transition:background-color .18s ease, border-color .18s ease; }
    #leftHeader #userActions .switch-slider::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:transform .18s ease; }
    #leftHeader #userActions .switch-control input:checked + .switch-slider { background:#cdeed8; border-color:#9fd3b3; }
    #leftHeader #userActions .switch-control input:checked + .switch-slider::after { transform:translateX(18px); }
    #leftHeader #userActions button { width:100%; text-align:left; border:1px solid #d7deea; background:#f7f9ff; color:#24385f; border-radius:8px; padding:7px 9px; cursor:pointer; }
    #leftHeader #userActions button:hover { background:#edf2ff; }
    #leftHeader #currentUser { display:block; padding:2px 0 6px; margin-bottom:2px; font-weight:600; color:#1f2937; }
    #leftHeader #currentUserCard { display:flex; align-items:flex-start; gap:10px; padding:2px 2px 8px; border-bottom:1px solid #edf0f6; margin-bottom:2px; }
    #leftHeader .current-user-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 44px; background:#e5e7eb; border:1px solid #d5dbe6; }
    #leftHeader .current-user-meta { flex:1; min-width:0; }
    #leftHeader .current-user-actions { display:flex; gap:6px; flex-wrap:wrap; }
    #leftHeader .current-user-actions button { flex:1 1 110px; text-align:center; font-size:12px; padding:6px 8px; }
    #left.archived-mode #chats { background:#f3f4f6; }
    #left.archived-mode #search { background:#f3f4f6; }
    #left.archived-mode .chat .row { flex-direction: row-reverse; }
    #contactTabs { display:flex; border-bottom:1px solid #eee; background:#fafafa; }
    #contactTabs .tab { flex:1; padding:6px 8px; border:0; border-right:1px solid #eee; background:transparent; cursor:pointer; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#555; }
    #contactTabs .tab:last-child { border-right:0; }
    #contactTabs .tab.active { background:#e6f2ff; font-weight:600; color:#274684; }
    #search { padding: 7px; border-bottom:1px solid #eee; display:flex; flex-direction:column; align-items:stretch; gap:8px; background:#f5f5f5; }
    .searchTopRow { display:flex; align-items:center; gap:8px; }
    .searchInputWrap { position:relative; flex:1; min-width:0; display:flex; align-items:center; }
    #contactBrowserBtn { flex:0 0 auto; border:1px solid #cfd2d6; background:#fff; color:#57606a; border-radius:999px; padding:6px 10px; cursor:pointer; font-size:10pt; font-weight:500; }
    #contactBrowserBtn:hover { background:#f0f2f5; }
    #createGroupBtn { flex:0 0 auto; border:1px solid #99d6b2; background:#e8f9ef; color:#13683f; border-radius:999px; padding:6px 10px; cursor:pointer; font-size:10pt; font-weight:600; }
    #createGroupBtn:hover { background:#d8f2e4; }
    #openFilterWrap { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#cfd7df transparent; }
    .openFilterOpt { position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
    .openFilterOpt input[type="radio"] { position:absolute; inset:0; opacity:0; pointer-events:none; }
    .openFilterOpt > span { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:25px; padding:0 8px; border:1px solid #c5ccd4; border-radius:999px; background:#f7f8fa; color:#5a6875; font-size:10pt; font-weight:500; white-space:nowrap; cursor:pointer; transition:all .15s ease; }
    .openFilterOpt:hover > span { background:#ffffff; }
    .openFilterOpt input[type="radio"]:checked + span { background:#d9fdd3; border-color:#8ecf9e; color:#1f5e2c; box-shadow:0 1px 2px rgba(0,0,0,.08); }
    .openFilterLabel { display:inline-block; padding-right:6px; }
    .openFilterBadge { position:absolute; right:-5px; bottom:-5px; display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; border-radius:999px; padding:0 4px; background:#fff; color:#4f5f6d; border:1px solid #aeb8c2; font-size:8.5pt; font-weight:700; line-height:1; box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,.18); }
    .openFilterOpt input[type="radio"]:checked + span .openFilterBadge { background:#fff; border-color:#8ecf9e; color:#1f5e2c; }
    .openFilterOpt.triage-alert input[type="radio"]:not(:checked) + span { border-color:#e0b2b2; color:#7f3030; }
    .openFilterOpt.triage-alert .openFilterBadge { background:#b00020; border-color:#7f0016; color:#fff; }
    .openFilterOpt.triage-alert input[type="radio"]:checked + span .openFilterBadge { background:#b00020; border-color:#7f0016; color:#fff; }
    #filter { flex:1; min-width:0; width:100%; box-sizing:border-box; border:1px solid transparent; background:#e9edef; border-radius:999px; padding:8px 34px 8px 12px; font-size:10.5pt; color:#111b21; }
    #filter::placeholder { color:#667781; }
    #filter:focus { outline:none; border-color:#a8c9ff; background:#fff; }
    #clearFilterBtn { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:1px solid #cfd7df; border-radius:50%; background:#e9edf1; color:#4b5a67; cursor:pointer; display:none; font-size:14px; font-weight:700; line-height:1; padding:0; align-items:center; justify-content:center; -webkit-text-fill-color:currentColor; }
    #clearFilterBtn:hover { background:#dde3e9; color:#2e3b46; }
    #chats { flex:1; overflow:auto; background:#fff; }
    .chat { padding: var(--chat-item-padding-y) var(--chat-item-padding-x); cursor:pointer; border-bottom:1px solid #f0f0f0; position:relative; transition: box-shadow .18s ease; }
    .chat:hover {
      box-shadow: inset 0 0 0 1px #d6dee8;
      border-radius: 10px;
    }
    .chat.triage-highlight:hover {
      box-shadow: inset 0 0 0 1px #9abbe8;
    }
    .chat.active {
      box-shadow: inset 0 0 0 2px #9abbe8;
      border-radius: 10px;
      z-index: 1;
    }
    .chat.active.triage-highlight {
      box-shadow: inset 0 0 0 2px #2f6fd7;
      border-radius: 10px;
      z-index: 1;
    }
    .chat.mine { background:#eff9ef; }
    .chat.unread { background:#ffffff; }
    .chat.operator-other { background:#fffdf3; }
    .chat.waiting-operator,
    .chat.waiting-operator.unread { background:#fff4f1; border-left:4px solid #e97a5f; padding-left:5px; }
    .chat.unsaved-contact,
    .chat.unsaved-contact.unread { background:#fff7ed; }
    .chat.unsaved-contact .meta-head strong { color:#8a3b00; }
    .chat .unsaved-badge {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:18px;
      padding:0 7px;
      border-radius:999px;
      border:1px solid #f5c48a;
      background:#fff1de;
      color:#8a3b00;
      font-size:9pt;
      font-weight:700;
      white-space:nowrap;
    }
    .chat .waiting-badge {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:18px;
      padding:0 7px;
      border-radius:999px;
      border:1px solid #efb4a7;
      background:#fff0ec;
      color:#a33f2f;
      font-size:9pt;
      font-weight:700;
      white-space:nowrap;
    }
    .chat.internal-chat,
    .chat.internal-chat.unread { background:#eaf4ff; }
    .chat .badge { float:right; background:#09800d; color:#fff; border-radius:10px; font-size:10pt; padding:1px 6px; }
    .chat .row { display:flex; align-items:center; gap:var(--chat-row-gap); }
    .chat .avatar-wrap { position:relative; width:var(--chat-avatar-size); height:var(--chat-avatar-size); flex:0 0 var(--chat-avatar-size); }
    .chat .avatar { width:var(--chat-avatar-size); height:var(--chat-avatar-size); border-radius:50%; overflow:hidden; background:#e6e6e6; display:flex; align-items:center; justify-content:center; color:#555; font-weight:600; flex:0 0 var(--chat-avatar-size); font-size:13px; }
    .chat .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
    .chat .avatar .ph { display:none; }
    .chat .avatar.noimg img { display:none; }
    .chat .avatar.noimg .ph { display:block; }
    .chat .triage-pill { position:absolute; right:-5px; bottom:-1px; display:inline-flex; align-items:center; justify-content:center; min-width:28px; max-width:58px; padding:1px 5px; border-radius:999px; border:1px solid #f0bf64; background:#fff4d4; color:#805800; font-size:9px; font-weight:700; line-height:1.15; box-shadow:0 1px 3px rgba(0,0,0,.15); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat .triage-pill.awaiting { border-color:#e47a7a; background:#ffe7e7; color:#9f2f2f; }
    .chat.triage-highlight { border-left:4px solid #f0bf64; padding-left:5px; }
    .chat .meta { flex:1; min-width:0; font-size:10pt; }
    .chat .meta-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
    .chat .meta-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; font-size:11pt; line-height:1.2; }
    .chat .meta-head strong.internal-chat-name { color:#1b5e20; }
    .chat .meta-head strong.internal-room-name { color:#c2185b; }
    .chat .meta-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
    .chat .phone-right { font-size:10pt; white-space:nowrap; }
    .chat .preview-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; margin-top:2px; font-size:10pt; }
    .chat .preview-line.preview-line-incoming { color:#c96b00; font-weight:600; }
    .chat .operator-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; margin-top:2px; font-size:10pt; }
    .chat .operator-line.operator-defined { color:#666  !important; font-weight:500; }
    .chat .operator-line.operator-undefined { color:#d13c3c  !important; font-weight:700; }
    .chat .operator-line.operator-waiting { color:#bf360c !important; font-weight:700; }
    .chat .operator-line.internal-presence.is-online { color:#84cc16 !important; }
    .chat .operator-line.internal-presence.is-offline { color:#9ca3af !important; }
    .chat .operator-row { margin-top:3px; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
    .chat .operator-row .operator-line { flex:1; min-width:0; margin-top:0; }
    .chat .operator-spacer { flex:1; min-width:0; }
    .chat .lock-state { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #b8c2cf; background:#f3f5f8; line-height:1; }
    .chat .lock-state svg { width:13px; height:13px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .chat .lock-state.unlocked { color:#2f7a35; border-color:#a9cfad; background:#eaf8ec; }
    .chat .lock-state.locked { color:#db2810; border-color:#d9be8b; background:#fff4e1; }
    .chat .unlock-chat-btn { border:1px solid #9fb4d8; background:#f3f7ff; color:#214ea0; border-radius:999px; padding:1px 8px; font-size:9pt; font-weight:600; cursor:pointer; }
    .chat .unlock-chat-btn:hover { background:#e7f0ff; }
    #right { display:flex; flex-direction:column; position: relative; overflow:hidden; }
    #chatHeader { padding:7px 12px; border-bottom:1px solid #dfe3e8; background:#fff; display:flex; flex-direction:column; gap:4px; }
    #chatHeader .chatHeaderTop { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    #chatHeader .chatHeaderTitleLine { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
    #chatHeader .chatHeaderAvatarWrap {
      width:38px;
      height:38px;
      border-radius:50%;
      overflow:hidden;
      background:#dfe5ec;
      border:1px solid #ced7e2;
      flex:0 0 38px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#4d5c70;
      font-weight:700;
      font-size:13px;
    }
    #chatHeader .chatHeaderAvatarWrap img { width:100%; height:100%; object-fit:cover; display:block; }
    #chatHeader .chatHeaderAvatarWrap span { display:none; }
    #chatHeader .chatHeaderAvatarWrap.noimg img { display:none; }
    #chatHeader .chatHeaderAvatarWrap.noimg span { display:block; }
    #chatHeader .chatHeaderMeta { min-width:0; display:flex; flex-direction:column; gap:2px; }
    #chatHeader #chatTitle { font-size:16px; line-height:1.2; font-weight:500; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111b21; }
    #chatHeader .chatHeaderMetaSub { min-height:16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    #chatHeader #areaBadge {
      margin:0;
      background:#e7f2ff;
      color:#174b86;
      border:1px solid #c3d9f5;
      padding:1px 7px;
      border-radius:999px;
      font-size:11px;
      font-weight:600;
      line-height:1.35;
    }
    #chatHeader .chatHeaderActions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
    #chatHeader .chatHeaderActions > button { border:1px solid #d0d7e4; background:#f8faff; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; white-space:nowrap; }
    #chatHeader .chatHeaderActions > button.active { background:#e7f3ff; border-color:#9fc3ef; color:#0f3e75; }
    #chatHeader .chatHeaderActions .search-index-label { font-size:12px; color:#465769; min-width:52px; text-align:center; font-variant-numeric: tabular-nums; }
    #chatHeader .chat-search-controls {
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      min-height:34px;
      padding:4px 0 0;
      border-top:1px solid #edf1f6;
    }
    #chatHeader .chat-search-controls-center {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    #chatHeader .chat-search-controls-center button {
      border:1px solid #d0d7e4;
      background:#f8faff;
      border-radius:8px;
      padding:5px 9px;
      cursor:pointer;
      font-size:12px;
      white-space:nowrap;
    }
    #chatHeader .chat-search-controls-center button:disabled { opacity:.55; cursor:not-allowed; }
    #chatHeader .chat-search-controls .search-index-label { font-size:12px; color:#465769; min-width:52px; text-align:center; font-variant-numeric: tabular-nums; }
    #chatHeader .chat-search-clear {
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      width:28px;
      height:28px;
      border:1px solid #d0d7e4;
      background:#f8faff;
      border-radius:8px;
      cursor:pointer;
      font-size:15px;
      line-height:1;
      color:#445667;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    #chatHeader .chat-search-clear:hover { background:#eef5ff; }
    #chatHeader .chat-actions-menu { position:relative; display:inline-flex; align-items:center; margin-left:auto; order:99; }
    #chatHeader .chat-actions-menu-toggle {
      border:1px solid #d0d7e4;
      background:#f8faff;
      border-radius:8px;
      width:30px;
      height:30px;
      cursor:pointer;
      font-size:18px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      color:#31445a;
    }
    #chatHeader .chat-actions-menu-toggle:hover { background:#eef5ff; }
    #chatHeader .chat-actions-menu-panel {
      position:absolute;
      top:34px;
      right:0;
      z-index:35;
      min-width:198px;
      background:#fff;
      border:1px solid #d6deea;
      border-radius:10px;
      box-shadow:0 10px 26px rgba(0,0,0,.12);
      padding:6px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    #chatHeader .chat-actions-menu-panel button {
      border:1px solid #d0d7e4;
      background:#f8faff;
      border-radius:8px;
      padding:6px 10px;
      cursor:pointer;
      font-size:12px;
      white-space:nowrap;
      text-align:left;
    }
    #chatHeader .chat-actions-menu-panel #groupLeaveBtn { border-color:#f1c0cf; background:#fff7fa; color:#9f1239; }
    #chatHeader .chat-actions-menu-panel #groupLeaveBtn:hover { background:#ffeef4; }
    #chatHeader .chat-actions-menu-panel #groupDeleteBtn { border-color:#e7a8b9; background:#ffeef3; color:#8f1230; font-weight:700; }
    #chatHeader .chat-actions-menu-panel #groupDeleteBtn:hover { background:#ffe3ec; }
    #chatHeader .chat-actions-menu-panel button.active { background:#e7f3ff; border-color:#9fc3ef; color:#0f3e75; }
    #chatHeader .chatHeaderBottom { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    #chatHeader .chat-day-jump { display:inline-flex; align-items:center; gap:6px; }
    #chatHeader .chat-day-jump select {
      min-width:170px;
      max-width:220px;
      border:1px solid #d6deea;
      border-radius:8px;
      background:#fff;
      padding:5px 8px;
      font-size:12px;
    }
    #chatHeader .chat-day-jump button {
      border:1px solid #d0d7e4;
      background:#f8faff;
      border-radius:8px;
      padding:5px 9px;
      cursor:pointer;
      font-size:12px;
      white-space:nowrap;
    }
    #chatHeader .chat-day-jump button:disabled,
    #chatHeader .chat-day-jump select:disabled { opacity:.6; cursor:not-allowed; }
    #chatHeader #areaTimer { font-size:11px; font-weight:600; color:#566778; }
    #chatHeader #areaTimer::before { content:'Tempo '; color:#566778; font-weight:500; }
    /* Messages as a simple grid to avoid overlap across browsers */
    #messages { flex:1; overflow:auto; padding: 12px; display:grid; grid-auto-flow: row; grid-auto-rows: max-content; row-gap: 8px; align-content: start;
      background-color:#f5f5f5;
      background-image: url('/assets/images/chat-background.png');
      background-repeat: repeat;
      background-size: 400px auto; /* ajuste conforme desejar */
      background-attachment: fixed;
      background-position: center;
    }
    #scrollToBottomBtn {
      position: absolute;
      right: 14px;
      bottom: 84px;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid #bcd0e3;
      background: #ffffff;
      color: #1f3e5d;
      box-shadow: 0 4px 14px rgba(18, 46, 76, .22);
      cursor: pointer;
      z-index: 6;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      padding: 0;
      transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    }
    #scrollToBottomBtn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(18, 46, 76, .28);
    }
    .chat-notice-warning {
      justify-self: stretch;
      border: 1px solid #e8b24c;
      background: #fff6df;
      color: #6c4300;
      border-radius: 8px;
      padding: 9px 10px;
      font-size: 9.5pt;
      line-height: 1.35;
      box-sizing: border-box;
    }
    .msg-day-separator {
      justify-self: center;
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #fff3b0;
      border: 1px solid #e4c85a;
      color: #6b5400;
      border-radius: 10px;
      padding: 2px 10px;
      font-size: 8.8pt;
      line-height: 1.45;
      box-shadow: 0 1px 3px rgba(0,0,0,.06);
      user-select: none;
    }
    .msg-day-separator-label { font-weight: 600; letter-spacing: .01em; }
    .msg-day-separator-nav {
      width: 20px;
      height: 20px;
      border: 1px solid #ced8e4;
      border-radius: 999px;
      background: #f7fafc;
      color: #445667;
      cursor: pointer;
      font-size: 11px;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .msg-day-separator-nav:hover { background: #edf4fb; }
    .msg-day-separator-nav:disabled { opacity: .4; cursor: not-allowed; }
    .msg { display:inline-block; max-width:70%; padding:8px 10px; border-radius:8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; box-sizing: border-box; font-size:10pt; position:relative; }
    .msg.msg-forward-selectable { cursor: pointer; }
    .msg.msg-forward-selected { outline:2px solid #2c7be5; box-shadow:0 0 0 2px rgba(44,123,229,.15); }
    .msg-forward-checkbox {
      position:absolute;
      top:8px;
      left:8px;
      width:16px;
      height:16px;
      z-index:3;
      accent-color:#2c7be5;
    }
    .msg.msg-forward-selectable { padding-left:30px; }
    .msg.msg-starred { border:2px solid #d4a017; }
    .msg.search-hit-active { outline:2px solid #ff1493; box-shadow:0 0 0 2px rgba(255,20,147,.25); }
    .msg.msg-system-log {
      justify-self: center;
      max-width: min(90%, 620px);
      background: rgba(255,255,255,.7);
      border: 1px dashed rgba(125,136,145,.45);
      color: #6e7880;
      font-style: italic;
      text-align: center;
      opacity: .85;
      padding: 5px 11px;
    }
    .msg-reaction-wrap { position: relative; display:inline-flex; align-items:center; opacity:0; pointer-events:none; transition:opacity .12s ease; }
    .msg:hover .msg-reaction-wrap { opacity:1; pointer-events:auto; }
    .msg-reaction-wrap .msg-reaction-picker.open,
    .msg-reaction-wrap:focus-within { opacity:1; pointer-events:auto; }
    .msg-react-btn {
      border:1px solid #d0d7e4;
      background:#fff;
      color:#4b5a67;
      border-radius:999px;
      width:24px;
      height:24px;
      padding:0;
      cursor:pointer;
      font-size:13px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .msg-react-btn:hover { background:#f4f7fb; }
    .msg-reaction-picker {
      position:absolute;
      bottom:28px;
      right:0;
      z-index:8;
      display:none;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap:4px;
      padding:7px;
      border:1px solid #d6deea;
      border-radius:10px;
      background:#fff;
      box-shadow:0 8px 20px rgba(0,0,0,.14);
      width:224px;
      min-width:224px;
      box-sizing:border-box;
    }
    .msg-reaction-wrap.incoming .msg-reaction-picker {
      left: 0;
      right: auto;
    }
    .msg-reaction-wrap.outgoing .msg-reaction-picker {
      right: 0;
      left: auto;
    }
    .msg-reaction-picker.open { display:grid; }
    .msg-reaction-item {
      border:0;
      background:transparent;
      cursor:pointer;
      font-size:16px;
      line-height:1;
      padding:4px;
      border-radius:8px;
      min-width:28px;
      min-height:28px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .msg-reaction-item:hover { background:#eef3f9; }
    .msg-reaction-item.msg-reaction-clear { font-size:13px; color:#576677; }
    .msg-actions-wrap { position: relative; display:inline-flex; align-items:center; opacity:0; pointer-events:none; transition:opacity .12s ease; }
    .msg:hover .msg-actions-wrap { opacity:1; pointer-events:auto; }
    .msg-actions-wrap .msg-actions-menu.open,
    .msg-actions-wrap:focus-within { opacity:1; pointer-events:auto; }
    .msg-actions-btn {
      border:1px solid #d0d7e4;
      background:#fff;
      color:#4b5a67;
      border-radius:999px;
      width:22px;
      height:22px;
      padding:0;
      cursor:pointer;
      font-size:14px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .msg-actions-btn:hover { background:#f4f7fb; }
    .msg-actions-menu {
      position:absolute;
      bottom:28px;
      right:0;
      z-index:9;
      display:none;
      min-width:136px;
      border:1px solid #d6deea;
      border-radius:10px;
      background:#fff;
      opacity:1;
      box-shadow:0 8px 20px rgba(0,0,0,.14);
      padding:4px;
      box-sizing:border-box;
    }
    .msg-actions-wrap.incoming .msg-actions-menu { left:0; right:auto; }
    .msg-actions-wrap.outgoing .msg-actions-menu { right:0; left:auto; }
    .msg-actions-menu.open { display:block; }
    .msg-actions-item {
      width:100%;
      border:0;
      background:transparent;
      color:#2b3b47;
      cursor:pointer;
      font-size:9pt;
      line-height:1.3;
      text-align:left;
      border-radius:8px;
      padding:7px 8px;
      display:block;
    }
    .msg-actions-item:hover { background:#eef3f9; }
    .msg-actions-item.danger { color:#7b1f2a; }
    .msg-actions-item.danger:hover { background:#fde8eb; }
    .msg.msg-system-log .msg-system-log-text { font-size: 9.2pt; line-height: 1.35; }
    .msg.msg-system-log .msg-system-log-time { margin-top: 2px; font-size: 8pt; color: #8a949b; font-style: normal; }
    .msg.msg-system-forward-summary {
      background: #cfe8e7;
      border: 1px solid #b6d9d6;
      color: #2f5c59;
      font-style: normal;
      opacity: 1;
      border-radius: 8px;
      padding: 7px 12px;
    }
    .msg.msg-system-forward-summary .msg-system-log-text {
      font-size: 10.2pt;
      line-height: 1.4;
      color: #2f5c59;
      font-weight: 500;
    }
    .msg.msg-system-forward-summary .msg-system-log-time {
      color: #5d7f7c;
      font-size: 8.4pt;
      margin-top: 3px;
    }
    .msg small { font-size:10pt; }
    .msg .msg-meta { margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:8.5pt; line-height:1; opacity:1; }
    .msg .msg-time { color:#667781; }
    .msg .msg-edited-flag { color:#7a8791; font-style:italic; }
    .msg .msg-star-btn { border:0; background:transparent; color:#7d8891; font-size:10pt; line-height:1; cursor:pointer; padding:0 2px; }
    .msg .msg-star-btn.is-starred { color:#d4a017; }
    .msg .msg-star-btn:hover { color:#d4a017; }
    .msg .msg-audio-download-btn {
      border:0;
      background:transparent;
      color:#667781;
      font-size:12pt;
      font-weight:700;
      line-height:1;
      cursor:pointer;
      padding:0 2px;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .msg .msg-audio-download-btn:hover { color:#2f6e9f; }
    .msg .msg-status { color:#667781; letter-spacing:.02em; }
    .msg .msg-status.read { color:#53bdeb; }
    .msg .msg-status.uploading { color:#4a6f90; }
    .msg .msg-status.server-ack { color:#2d6f9f; }
    .msg .msg-status.fail { color:#b42318; font-weight:700; }
    .msg.audio-heard { box-shadow:none; }
    .msg .msg-audio-heard { display:none; }
    .msg .msg-forwarded { font-size:8.5pt; color:#667781; font-style:italic; margin-bottom:3px; }
    .msg.msg-room-group {
      justify-self: start !important;
      background: #ffffff !important;
      border: 1px solid #e4e7eb;
      max-width: 78%;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .msg.msg-room-group .msg-room-author {
      font-size: 10pt;
      font-weight: 700;
      margin-bottom: 2px;
      line-height: 1.2;
      letter-spacing: .01em;
    }
    .msg.msg-group-incoming {
      background: #ffffff;
      border: 1px solid #e3e8ee;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
      padding-top: 6px;
    }
    .msg.msg-group-incoming .msg-group-author {
      display:block;
      font-size: 10pt;
      font-weight: 700;
      margin: 0 0 3px 0;
      line-height: 1.15;
      letter-spacing: .01em;
      opacity: 1;
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
    }
    .msg.msg-room-group.me {
      justify-self: end !important;
      background: #d9fdd3 !important;
      border-color: #c5e8bf;
    }
    .msg.msg-room-group .msg-meta { justify-content: flex-end; }
    .msg .msg-original { margin-top:6px; color:#8b949c; font-size:9pt; opacity:.82; text-decoration:line-through; }
    .msg .msg-file-name { margin-top:6px; font-size:9pt; color:#2b3b47; word-break:break-word; }
    .msg.msg-deleted > :not(.msg-meta) {
      color: #b42318 !important;
      font-style: italic;
      text-decoration: line-through;
    }
    .msg .msg-download-link { display:inline-block; margin-top:6px; font-size:9pt; color:#0d36d9; text-decoration:none; }
    .msg .msg-download-link:hover { text-decoration:underline; }
    .msg.msg-contact-host { padding:0; overflow:hidden; min-width:240px; }
    .msg .wa-audio {
      --wa-audio-accent:#33a7e8;
      --wa-audio-track:#c7d1d8;
      --wa-audio-wave:rgba(110,124,133,.40);
      display:flex;
      align-items:center;
      gap:8px;
      min-width:220px;
      max-width:292px;
    }
    .msg .wa-audio.incoming.wa-audio-heard {
      --wa-audio-accent:#34b7f1;
      --wa-audio-track:#c4ddeb;
      --wa-audio-wave:rgba(92,137,161,.40);
    }
    .msg .wa-audio.incoming.wa-audio-unheard {
      --wa-audio-accent:#25d366;
      --wa-audio-track:#c7d1d8;
      --wa-audio-wave:rgba(110,124,133,.40);
    }
    .msg .wa-audio-play {
      width:24px;
      height:24px;
      border:0;
      border-radius:50%;
      background:transparent;
      color:var(--wa-audio-accent);
      font-size:12px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      flex:0 0 24px;
    }
    .msg .wa-audio-play:hover { background:rgba(0,0,0,.06); }
    .msg .wa-audio-seek {
      --seek-pct: 0%;
      -webkit-appearance:none;
      appearance:none;
      width:100%;
      flex:1;
      height:22px;
      background:transparent;
      cursor:pointer;
      margin:0;
      border:0;
      padding:0;
      background-image:
        linear-gradient(to right, var(--wa-audio-accent) 0 var(--seek-pct), var(--wa-audio-track) var(--seek-pct) 100%),
        repeating-linear-gradient(to right, var(--wa-audio-wave) 0 2px, transparent 2px 6px);
      background-size:100% 3px, 100% 16px;
      background-position:center, center;
      background-repeat:no-repeat;
      border-radius:999px;
    }
    .msg .wa-audio-seek::-webkit-slider-runnable-track {
      height:22px;
      background:transparent;
      border:0;
    }
    .msg .wa-audio-seek::-webkit-slider-thumb {
      -webkit-appearance:none;
      appearance:none;
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--wa-audio-accent);
      border:0;
      margin-top:6px;
      box-shadow:0 0 0 1px rgba(0,0,0,.05);
    }
    .msg .wa-audio-seek::-moz-range-track {
      height:22px;
      background:transparent;
      border:0;
    }
    .msg .wa-audio-seek::-moz-range-progress { background:transparent; }
    .msg .wa-audio-seek::-moz-range-thumb {
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--wa-audio-accent);
      border:0;
      box-shadow:0 0 0 1px rgba(0,0,0,.05);
    }
    .msg .wa-audio-timer {
      font-size:8.5pt;
      color:#667781;
      min-width:34px;
      text-align:right;
      font-variant-numeric: tabular-nums;
      flex:0 0 auto;
    }
    .msg .wa-audio.incoming .wa-audio-timer { min-width:38px; }
    .msg .wa-audio-avatar {
      width:30px;
      height:30px;
      border-radius:50%;
      overflow:hidden;
      background:#e4e9f0;
      color:#3f5168;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 30px;
      position:relative;
      border:1px solid rgba(0,0,0,.06);
    }
    .msg .wa-audio-avatar-ph {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
      font-size:10px;
      font-weight:700;
      letter-spacing:.02em;
      text-transform:uppercase;
      line-height:1;
      position:absolute;
      inset:0;
    }
    .msg .wa-audio-avatar img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      position:absolute;
      inset:0;
    }
    .msg .wa-audio-avatar.noimg img { display:none; }
    .msg .wa-audio-avatar:not(.noimg) .wa-audio-avatar-ph { display:none; }
    .msg .wa-audio-el { display:none; }
    .shared-contact-card { display:flex; flex-direction:column; background:transparent; }
    .shared-contact-top { display:flex; align-items:center; gap:8px; padding:8px 10px; }
    .shared-contact-avatar { width:32px; height:32px; border-radius:50%; background:#d8dfe6; color:#425466; display:flex; align-items:center; justify-content:center; font-weight:700; position:relative; overflow:hidden; flex:0 0 32px; }
    .shared-contact-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
    .shared-contact-ph { font-size:8.5pt; line-height:1; }
    .shared-contact-meta { min-width:0; display:flex; flex-direction:column; gap:1px; }
    .shared-contact-name { font-size:11pt; line-height:1.2; font-weight:600; color:#102126; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .shared-contact-phone { font-size:9pt; line-height:1.2; color:#4f5f65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .shared-contact-actions { border-top:1px solid rgba(0,0,0,.08); display:flex; }
    .shared-contact-action { appearance:none; border:0; background:transparent; color:#0b845d; font-weight:600; padding:5px 8px; line-height:1.15; text-align:center; cursor:pointer; flex:1; font-size:9.8pt; }
    .shared-contact-action:hover { background:rgba(11,132,93,.08); }
    .quote { border-left:3px solid #9e9e9e; background: rgba(255,255,255,0.8); padding:6px 8px; margin:0 0 6px 0; border-radius:4px; font-size:10pt; color:#555; transition: background-color .12s ease, border-color .12s ease; }
    .quote:hover { background: rgba(255,255,255,0.95); border-left-color:#5f7f99; }
    .me { background:#d9fdd3; justify-self:end; }
    .other { background:#ffffff; justify-self:start; }
    .operator { font-weight:600; color:#0015ff !important; background:transparent !important; }
    #composer { padding:10px; border-top:1px solid #eee; background:#fff; display:flex; flex-direction:column; align-items:stretch; }
    .forward-selection-bar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 12px;
      border-bottom:1px solid #e6ecf2;
      background:#f6fbff;
    }
    .forward-selection-bar strong { color:#223348; font-size:10pt; }
    .forward-selection-actions { display:flex; align-items:center; gap:8px; }
    .forward-selection-actions button {
      border:1px solid #cfd9e7;
      background:#fff;
      color:#2a3b4c;
      border-radius:8px;
      padding:5px 10px;
      cursor:pointer;
      font-size:9pt;
    }
    .forward-selection-actions #forwardSelectionSubmitBtn {
      background:#0b845d;
      border-color:#0b845d;
      color:#fff;
    }
    .reply-preview { display:flex; align-items:center; gap:8px; background:#f4f8f6; border-left:3px solid #0b845d; border-radius:8px; padding:6px 8px; margin-bottom:8px; }
    .reply-preview-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
    .reply-preview-author { font-size:9pt; color:#0b845d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .reply-preview-text { font-size:9pt; color:#3a4b55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .reply-preview-close { border:0; background:#e9eff0; color:#33414a; width:24px; height:24px; border-radius:50%; cursor:pointer; line-height:1; font-size:12px; padding:0; flex:0 0 24px; }
    .reply-preview-close:hover { background:#dce5e8; }
    #composer .composer-shell { display:flex; align-items:center; gap:2px; border:1px solid #d9d9d9; border-radius:999px; background:#f0f0f0; padding:4px 8px; width:100%; box-sizing:border-box; }
    #composer .composer-icon { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#1e1e1e; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:28px; line-height:1; padding:0; flex-shrink:0; }
    #composer .composer-icon:hover { background:rgba(0,0,0,.06); }
    #composer .attach-btn { font-size:20px; }
    #composer .share-contact-btn { font-size:20px; }
    #composer .record-audio-btn { font-size:12px; font-weight:700; letter-spacing:.01em; }
    #composer .record-audio-btn.recording { background:#ffd9d9; color:#8f1010; animation: micPulse 1.05s ease-in-out infinite; }
    #composer .record-audio-btn:disabled { opacity:.5; cursor:not-allowed; }
    #composer .prefix-once-btn { color:#51606b; }
    #composer .prefix-once-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    #composer .prefix-once-btn.active { background:#d7f5dc; color:#0b6b28; }
    #composer .emoji-btn { font-size:20px; }
    #composer .text-wrap { position:relative; flex:1; display:flex; min-width:0; align-items:center; }
    #composer textarea { flex:1; padding:6px 40px 6px 4px; border:0; background:transparent; resize:none; min-height:30px; max-height:160px; overflow:auto; line-height:1.25; margin:0; }
    #composer textarea:focus { outline:0; }
    #composer #send.send-inline { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; font-size:14px; display:none; border:0; background:transparent; }
    .icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ccc; border-radius:50%; background:#fff; cursor:pointer; font-size:16px; }
    .icon-btn:hover { background:#f7f7f7; }
    .emoji-picker { position:absolute; right:12px; bottom:72px; width:min(430px, calc(100vw - 24px)); height:min(360px, 56vh); background:#fff; border:1px solid #d9e1e8; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); display:none; flex-direction:column; z-index:50; overflow:hidden; }
    .emoji-picker.open { display:flex; }
    .emoji-picker-head { padding:10px; border-bottom:1px solid #edf1f5; background:#fff; }
    .emoji-picker-head input { width:100%; box-sizing:border-box; border:1px solid #d8dee5; border-radius:999px; padding:8px 12px; font-size:10pt; }
    .emoji-picker-head input:focus { outline:none; border-color:#9ec2ff; }
    .emoji-grid { flex:1; overflow:auto; padding:10px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px; align-content:start; }
    .emoji-cell { border:0; background:transparent; border-radius:8px; min-height:34px; font-size:22px; line-height:1; cursor:pointer; }
    .emoji-cell:hover { background:#f2f5f8; }
    .emoji-empty { color:#667781; font-size:10pt; grid-column:1 / -1; text-align:center; padding-top:20px; }
    @keyframes micPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.07); }
    }
    /* QR overlay only visible when not [hidden] */
    #qr { align-items:center; justify-content:center; height:100%; position:absolute; inset:0; background:#fff; display:none; }
    #qr[hidden] { display: none !important; }
    #qr img { width: 280px; height: 280px; }
    small.muted { color:#666 ;}
    #connBanner { display:none; background:#b00020; color:#fff; padding:8px 12px; text-align:center; font-weight:600; }
    #connBanner small { font-weight:400; opacity:.9; }
    #statusbar { height:24px; line-height:24px; padding:0 10px; background:#f0f2f5; color:#5f6b7a; border-top:1px solid #d9dee6; font-size:12px; text-align:center; }
    .fakeModal { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
    .fakeModalCard { width:min(560px, 96vw); max-height:min(78vh, 760px); background:#fff; border-radius:10px; border:1px solid #d9e0ea; box-shadow:0 14px 40px rgba(0,0,0,.24); display:flex; flex-direction:column; overflow:hidden; }
    .fakeModalHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #edf0f6; background:#f8faff; }
    .fakeModalHeader button { border:1px solid #d0d7e4; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }
    .fakeModalSearch { padding:10px 12px; border-bottom:1px solid #edf0f6; }
    .fakeModalSearch input { width:100%; box-sizing:border-box; }
    .fakeModalList { overflow:auto; padding:6px 0; }
    .shareContactCard { width:min(680px, 96vw); }
    .shareContactSearch { display:flex; flex-direction:column; gap:8px; }
    .shareContactField { display:flex; flex-direction:column; gap:5px; min-width:0; }
    .shareContactFieldLabel { font-size:12px; font-weight:600; color:#223348; }
    .shareContactList { min-height:160px; max-height:min(34vh, 320px); border-bottom:1px solid #edf0f6; }
    .shareContactManual {
      padding:10px 12px;
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:10px;
      border-bottom:1px solid #edf0f6;
      background:#fbfcff;
    }
    .shareContactManual input {
      width:100%;
      box-sizing:border-box;
      border:1px solid #d0d7e4;
      border-radius:8px;
      background:#fff;
      color:#1f2937;
      padding:8px 10px;
      font-size:13px;
    }
    .shareContactOption.is-selected { background:#e7f3ff; border-left:3px solid #5393e8; padding-left:9px; }
    .shareContactSelectTag { font-size:11px; color:#24579c; font-weight:700; }
    .quickMsgControls { display:flex; align-items:center; gap:8px; }
    .quickMsgControls input { flex:1; min-width:0; }
    .quickMsgControls button { flex:0 0 auto; border:1px solid #d0d7e4; background:#f8faff; border-radius:8px; padding:6px 10px; cursor:pointer; }
    .quickmsg-item { padding:10px 12px; border-bottom:1px solid #edf0f6; display:flex; flex-direction:column; gap:8px; }
    .quickmsg-item:last-child { border-bottom:0; }
    .quickmsg-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .quickmsg-scope { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .quickmsg-scope.global { background:#e9f2ff; color:#2f5da8; }
    .quickmsg-scope.user { background:#e9f8ef; color:#24704a; }
    .quickmsg-title { font-size:13px; font-weight:700; color:#1f2937; }
    .quickmsg-body { font-size:12px; color:#374151; white-space:pre-wrap; }
    .quickmsg-actions { display:flex; align-items:center; gap:8px; }
    .quickmsg-actions button { border:1px solid #d0d7e4; background:#fff; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; }
    .quickmsg-actions button.quickmsg-danger { color:#9f1239; border-color:#f1c0cf; background:#fff7fa; }
    .quickmsg-empty { padding:14px 12px; color:#6b7280; font-size:12px; }
    .editMessageCard { width:min(640px, 96vw); }
    .editMessageBody { padding:12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid #edf0f6; }
    .editMessageBody textarea {
      width:100%;
      box-sizing:border-box;
      border:1px solid #d0d7e4;
      border-radius:8px;
      background:#fff;
      color:#1f2937;
      padding:10px;
      font-size:13px;
      line-height:1.4;
      min-height:140px;
      resize:vertical;
    }
    .editMessageBody small { color:#526476; font-size:12px; }
    #editMessageSaveBtn { background:#0b845d; border-color:#0b845d; color:#fff; }
    #editMessageSaveBtn:disabled { opacity:.65; cursor:not-allowed; }
    .forwardModalCard { width:min(620px, 96vw); }
    .forwardMessagesCard { width:min(620px, 96vw); }
    .forwardProgressCard { width:min(520px, 94vw); max-height:none; }
    .forwardProgressBody { padding:14px 12px 16px; display:flex; flex-direction:column; gap:10px; }
    .forwardProgressTarget { font-size:12px; color:#526476; }
    .forwardProgressStatus { font-size:13px; font-weight:700; color:#223348; }
    .forwardProgressTrack { width:100%; height:10px; border-radius:999px; background:#e6edf5; overflow:hidden; }
    .forwardProgressFill { height:100%; background:linear-gradient(90deg,#0b845d,#36b37e); transition:width .18s ease; }
    .forwardProgressMeta { font-size:12px; color:#3f5368; min-height:18px; }
    .forwardDestOption.is-selected { background:#e7f3ff; border-left:3px solid #5393e8; padding-left:9px; }
    .forwardDestTag { font-size:11px; color:#24579c; font-weight:700; }
    .forwardModalBody { padding:12px; display:flex; flex-direction:column; gap:12px; }
    .forwardField { display:flex; flex-direction:column; gap:6px; }
    .forwardFieldLabel { font-size:12px; font-weight:600; color:#223348; }
    .forwardModalBody select,
    .forwardModalBody textarea {
      width:100%;
      box-sizing:border-box;
      border:1px solid #d0d7e4;
      border-radius:8px;
      background:#fff;
      color:#1f2937;
      padding:8px 10px;
      font-size:13px;
    }
    .forwardModalBody textarea { resize:vertical; min-height:96px; line-height:1.35; }
    .forwardCheck { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#2f3f52; }
    .forwardCheck input { margin-top:2px; }
    .forwardModalActions { display:flex; justify-content:flex-end; gap:8px; padding:10px 12px; border-top:1px solid #edf0f6; background:#f8faff; }
    .forwardModalActions button { border:1px solid #d0d7e4; background:#fff; border-radius:8px; padding:6px 12px; cursor:pointer; }
    .forwardModalActions #forwardConfirmBtn { background:#0b845d; border-color:#0b845d; color:#fff; }
    .forwardModalActions #shareContactConfirmBtn { background:#0b845d; border-color:#0b845d; color:#fff; }
    .forwardModalActions #forwardConfirmBtn:disabled { opacity:.65; cursor:not-allowed; }
    .forwardModalActions #shareContactConfirmBtn:disabled { opacity:.65; cursor:not-allowed; }
    @media (max-width:760px) {
      .shareContactManual { grid-template-columns:1fr; }
    }
    .groupCreateCard { width:min(680px, 96vw); }
    .groupCreateForm { display:flex; flex-direction:column; gap:10px; }
    .groupCreateField { display:flex; flex-direction:column; gap:5px; }
    .groupCreateFieldLabel { font-size:12px; font-weight:600; color:#223348; }
    .groupCreateSelected { min-height:26px; display:flex; flex-wrap:wrap; gap:6px; }
    .groupCreateChip { display:inline-flex; align-items:center; gap:6px; border:1px solid #b8d4be; background:#eefaf1; color:#205934; border-radius:999px; padding:2px 8px; font-size:11px; }
    .groupCreateChip button { border:0; background:transparent; color:#205934; cursor:pointer; font-size:12px; line-height:1; padding:0; }
    .groupCreateList .browserItem.is-selected { background:#e7f3ff; border-left:3px solid #5393e8; padding-left:9px; }
    .groupCreateList .browserSelectTag { font-size:11px; color:#24579c; font-weight:700; }
    .groupManageCard { width:min(860px, 96vw); }
    .groupManageBody { display:grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap:0; min-height:380px; }
    .groupManagePanel { display:flex; flex-direction:column; min-height:0; border-right:1px solid #edf1f6; }
    .groupManagePanel:last-child { border-right:0; }
    .groupManagePanel h4 { margin:0; padding:10px 12px; font-size:12px; color:#1f2f43; border-bottom:1px solid #edf1f6; background:#f8faff; }
    .groupManageSearch { padding:10px 12px; border-bottom:1px solid #edf1f6; }
    .groupManageSearch input { width:100%; box-sizing:border-box; }
    .groupManageMembersList,
    .groupManageContactsList { flex:1; min-height:0; }
    .groupMemberRow { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #f2f3f7; padding:10px 12px; }
    .groupMemberMain { min-width:0; display:flex; flex-direction:column; gap:2px; }
    .groupMemberMain strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .groupMemberMeta { font-size:11px; color:#607083; }
    .groupMemberRow .danger { border:1px solid #f0c0cd; background:#fff5f7; color:#9f1239; border-radius:8px; padding:4px 8px; cursor:pointer; }
    .groupMemberRow .danger:hover { background:#ffe9ef; }
    .groupManageAddBtn { border:1px solid #b7d2bb; background:#f2fbf3; color:#21603a; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; }
    .groupManageAddBtn:hover { background:#e8f8ea; }
    .groupManageAddBtn:disabled { opacity:.55; cursor:not-allowed; }
    .groupManageTag { font-size:11px; color:#546577; font-weight:600; white-space:nowrap; }
    .browserItem { width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; border-bottom:1px solid #f2f3f7; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .browserItem:hover { background:#f6f9ff; }
    .browserAvatar { width:36px; height:36px; border-radius:50%; overflow:hidden; background:#e8edf5; color:#3e526d; display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; position:relative; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
    .browserAvatarPh { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; }
    .browserAvatar img { width:100%; height:100%; object-fit:cover; display:block; }
    .browserItem .main { min-width:0; display:flex; flex-direction:column; flex:1 1 auto; }
    .browserItem .main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .browserItem .main small { color:#6b7280; }
    .browserItem .phone { color:#374151; font-size:12px; white-space:nowrap; flex:0 0 auto; }
    .browserEmpty { color:#6b7280; font-size:13px; padding:14px 12px; }