/* Obsidian Portal — webmail */

  /* ── Shell layout (Outlook on the web) ─────────────────────────────────── */
  .wm-shell { position:relative; display:flex; flex-direction:column; height:100%; width:100%;
               background:#faf9f8; font-family:"Segoe UI","Segoe UI Web (West European)",
               system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
               font-size:14px; color:#242424; overflow:hidden; }
  .wm-owa-frame { display:flex; flex:1; min-height:0; width:100%; overflow:hidden; }
  .wm-owa-frame[hidden] { display:none !important; }

  /* ── Token picker gate ─────────────────────────────────────────────────── */
  .wm-token-gate { flex:1; min-height:0; display:flex; align-items:flex-start; justify-content:center;
                    overflow:auto; padding:32px 24px 40px; background:linear-gradient(180deg,#f3f2f1 0%,#faf9f8 120px); }
  .wm-token-gate[hidden] { display:none !important; }
  .wm-gate-panel { width:100%; max-width:720px; }
  .wm-gate-header { margin-bottom:20px; }
  .wm-gate-brand { display:flex; align-items:flex-start; gap:14px; }
  .wm-gate-title { margin:0 0 4px; font-size:22px; font-weight:600; color:#242424; letter-spacing:-.02em; }
  .wm-gate-sub { margin:0; font-size:13px; color:#605e5c; line-height:1.5; max-width:560px; }
  .wm-gate-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
  .wm-gate-search-wrap { flex:1; min-width:200px; position:relative; }
  .wm-gate-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#605e5c; pointer-events:none; }
  .wm-gate-search { width:100%; border:1px solid #c8c6c4; border-radius:4px; padding:8px 12px 8px 34px;
                     font-size:14px; font-family:inherit; color:#242424; background:#fff; outline:none; }
  .wm-gate-search:focus { border-color:#0f6cbd; box-shadow:0 0 0 1px #0f6cbd; }
  .wm-gate-filters { display:flex; gap:4px; background:#edebe9; padding:3px; border-radius:6px; }
  .wm-gate-filter { border:none; background:transparent; padding:6px 14px; border-radius:4px;
                      font-size:13px; font-weight:600; color:#605e5c; cursor:pointer; font-family:inherit; }
  .wm-gate-filter:hover { color:#242424; }
  .wm-gate-filter.active { background:#fff; color:#0f6cbd; box-shadow:0 1px 2px rgba(0,0,0,.06); }
  .wm-gate-list { display:flex; flex-direction:column; gap:8px; }
  a.wm-gate-card { text-decoration:none; color:inherit; box-sizing:border-box; }
  .wm-gate-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
                   padding:14px 16px; border:1px solid #edebe9; border-radius:8px; background:#fff;
                   cursor:pointer; font-family:inherit; transition:border-color .12s,box-shadow .12s; }
  .wm-gate-card:hover:not(:disabled) { border-color:#c7e0f4; box-shadow:0 2px 8px rgba(0,0,0,.06); }
  .wm-gate-card:disabled { opacity:.55; cursor:not-allowed; background:#faf9f8; }
  .wm-gate-card.is-connecting { pointer-events:none; opacity:.7; }
  .wm-gate-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex;
                     align-items:center; justify-content:center; font-size:15px; font-weight:600; color:#fff; }
  .wm-gate-avatar.oauth { background:#0078d4; }
  .wm-gate-avatar.prt { background:#5c2d91; }
  .wm-gate-card-main { flex:1; min-width:0; }
  .wm-gate-card-name { font-size:15px; font-weight:600; color:#242424; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-gate-card-email { font-size:13px; color:#605e5c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
  .wm-gate-card-meta { font-size:11px; color:#a19f9d; margin-top:4px; }
  .wm-gate-badges { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; align-items:center; }
  .wm-gate-badge { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
                   padding:3px 8px; border-radius:4px; border:1px solid transparent; }
  .wm-gate-badge.oauth { color:#0f6cbd; background:#eff6fc; border-color:#c7e0f4; }
  .wm-gate-badge.prt { color:#5c2d91; background:#f3eef9; border-color:#d9ccee; }
  .wm-gate-badge.whfb { color:#107c10; background:#dff6dd; border-color:#9fd89f; font-size:9px; }
  .wm-gate-badge.mail-no { color:#a19f9d; background:#f3f2f1; border-color:#edebe9; text-transform:none; font-weight:600; }
  .wm-gate-badge.inactive { color:#d13438; background:#fde7e9; border-color:#f1bbbc; text-transform:none; font-weight:600; }
  .wm-gate-empty { text-align:center; padding:48px 16px; color:#605e5c; }
  .wm-gate-empty p { margin:0 0 8px; font-size:15px; font-weight:600; color:#323130; }
  .wm-gate-empty-hint { font-size:13px; color:#a19f9d; }
  .wm-gate-status { margin-top:12px; padding:10px 14px; border-radius:4px; font-size:13px; line-height:1.45; }
  .wm-gate-status.error { background:#fde7e9; border:1px solid #f1bbbc; color:#a4262c; }
  .wm-gate-status.info { background:#eff6fc; border:1px solid #c7e0f4; color:#0f6cbd; }

  /* Active mailbox chip (top bar) */
  .wm-account-chip { display:flex; align-items:center; gap:8px; max-width:min(240px,24vw);
                      padding:4px 8px 4px 6px; border:1px solid rgba(255,255,255,.28);
                      border-radius:4px; background:rgba(0,0,0,.15); color:#fff; cursor:pointer;
                      font-family:inherit; text-align:left; flex-shrink:1; min-width:0; }
  .wm-account-chip:hover { background:rgba(0,0,0,.2); border-color:rgba(255,255,255,.5); }
  .wm-account-chip-type { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                           padding:2px 6px; border-radius:3px; flex-shrink:0; }
  .wm-account-chip-type.oauth { background:rgba(255,255,255,.22); }
  .wm-account-chip-type.prt { background:rgba(92,45,145,.85); }
  .wm-account-chip-text { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2; }
  .wm-account-chip-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-account-chip-email { font-size:11px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-account-chip-chevron { width:14px; height:14px; flex-shrink:0; opacity:.85; }
  .wm-switch-mailbox-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
                            padding:8px 10px; border:1px solid #c8c6c4; border-radius:4px; background:#fff;
                            color:#323130; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
  .wm-switch-mailbox-btn:hover { background:#f3f2f1; border-color:#a19f9d; }

  /* Left app rail (Mail / Calendar / People) */
  .wm-app-rail { width:48px; flex-shrink:0; background:#f0f0f0; border-right:1px solid #e1dfdd;
                  display:flex; flex-direction:column; align-items:center; padding:6px 0 8px; gap:2px; }
  .wm-rail-btn { display:flex; align-items:center; justify-content:center;
                   width:40px; height:40px; margin:0; padding:0; border:none; border-radius:4px;
                   background:transparent; color:#424242; cursor:default; }
  .wm-rail-btn svg { width:20px; height:20px; opacity:.88; }
  .wm-rail-btn.active { background:#c7e0f4; color:#0f6cbd; }
  .wm-rail-btn.active svg { opacity:1; color:#0f6cbd; }
  .wm-rail-btn:disabled { opacity:.42; }
  .wm-rail-spacer { flex:1; min-height:8px; width:100%; }
  .wm-rail-apps { margin-top:0; }

  .wm-workspace { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;
                   background:#fff; position:relative; }
  .wm-account-chip-type.shared { background:rgba(16,124,16,.9); }

  /* ── Top bar ───────────────────────────────────────────────────────────── */
  .wm-topbar { display:flex; align-items:center; gap:12px; padding:0 16px 0 8px;
                height:48px; background:#0078d4; flex-shrink:0; box-shadow:0 1px 0 rgba(0,0,0,.08); }
  .wm-waffle { width:40px; height:40px; display:flex; align-items:center; justify-content:center;
                border:none; border-radius:4px; background:transparent; color:rgba(255,255,255,.92);
                padding:0; flex-shrink:0; cursor:default; margin-right:-4px; }
  .wm-waffle svg { width:20px; height:20px; }
  .wm-logo   { display:flex; align-items:center; gap:8px; flex-shrink:0; min-width:0; margin-right:8px; }
  .wm-logo-text { font-size:15px; font-weight:600; color:#fff; letter-spacing:-.02em; }
  .wm-search-wrap { flex:1; min-width:120px; max-width:480px; position:relative; display:flex; align-items:center; }
  .wm-search { width:100%; background:#fff; border:none; outline:none; box-shadow:0 1px 2px rgba(0,0,0,.12);
                border-radius:4px; padding:7px 36px 7px 38px; font-size:14px; color:#242424; }
  .wm-search::placeholder { color:#605e5c; }
  .wm-search:focus { box-shadow:0 0 0 2px rgba(255,255,255,.85); }
  .wm-search-icon-btn { position:absolute; left:4px; width:30px; height:30px; display:flex; align-items:center;
                         justify-content:center; background:none; border:none; color:#605e5c; cursor:pointer;
                         padding:0; border-radius:4px; z-index:1; }
  .wm-search-icon-btn:hover { background:#f3f2f1; color:#201f1e; }
  .wm-search-icon { width:16px; height:16px; pointer-events:none; }
  .wm-search-clear { position:absolute; right:6px; width:28px; height:28px; display:flex; align-items:center;
                      justify-content:center; background:none; border:none; color:#605e5c;
                      cursor:pointer; padding:0; border-radius:4px; z-index:1; }
  .wm-search-clear:hover { background:#f3f2f1; }
  .wm-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
  .wm-topbar-actions { display:flex; align-items:center; gap:4px; }
  .wm-topbar-action { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px;
                       border:1px solid rgba(255,255,255,.28); border-radius:4px; background:rgba(0,0,0,.12);
                       color:#fff; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer;
                       white-space:nowrap; }
  .wm-topbar-action svg { width:14px; height:14px; flex-shrink:0; }
  .wm-topbar-action:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
  .wm-topbar-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
                     border:none; border-radius:4px; background:transparent; color:rgba(255,255,255,.9);
                     cursor:pointer; padding:0; }
  .wm-topbar-icon svg { width:20px; height:20px; }
  .wm-topbar-icon:not(:disabled):hover { background:rgba(255,255,255,.15); }
  @media (max-width: 1200px){
    .wm-topbar-action span { display:none; }
    .wm-topbar-action { padding:0 8px; }
  }

  /* ── Three-pane body ───────────────────────────────────────────────────── */
  .wm-body { display:flex; flex:1; min-height:0; overflow:hidden; background:#fff; }

  /* ── Folder pane ───────────────────────────────────────────────────────── */
  .wm-folders { width:228px; min-width:160px; flex-shrink:0; border-right:1px solid #edebe9;
                 background:#faf9f8; display:flex; flex-direction:column; min-height:0; }
  .wm-nav-head { padding:12px 12px 8px; flex-shrink:0; position:sticky; top:0; z-index:2; background:#faf9f8; }
  .wm-new-mail-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
                      background:#0f6cbd; color:#fff; border:none; border-radius:4px;
                      padding:8px 12px; font-size:14px; font-weight:600; font-family:inherit;
                      cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:background .12s; }
  .wm-new-mail-btn:hover { background:#115ea3; }
  .wm-folders-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
                        overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c8c6c4 transparent; }
  .wm-folders-scroll::-webkit-scrollbar { width:8px; }
  .wm-folders-scroll::-webkit-scrollbar-thumb { background:#c8c6c4; border-radius:4px; border:2px solid #faf9f8; }
  .wm-folders-inner { padding:2px 0 12px; }
  .wm-nav-foot { flex-shrink:0; padding:10px 12px 12px; border-top:1px solid #edebe9; background:#faf9f8; }
  .wm-folder-item { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 8px;
                     cursor:pointer; border-radius:4px; user-select:none; margin:0 6px;
                     transition:background .1s; position:relative; min-height:32px; }
  .wm-folder-item:hover { background:#f3f2f1; }
  .wm-folder-item.active { background:#deecf9; font-weight:600; color:#0f6cbd; }
  .wm-folder-item.active::before { content:''; position:absolute; left:-6px; top:6px; bottom:6px;
                                     width:3px; background:#0f6cbd; border-radius:2px; }
  .wm-folder-icon { width:16px; height:16px; flex-shrink:0; color:#605e5c; }
  .wm-folder-item.active .wm-folder-icon { color:#0f6cbd; }
  .wm-folder-emoji { width:18px; flex-shrink:0; font-size:14px; line-height:1;
                      text-align:center; display:inline-flex; align-items:center; justify-content:center;
                      font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; }
  .wm-folder-item.active .wm-folder-name { color:#0f6cbd; }
  .wm-folder-name { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#323130; }
  .wm-folder-badge { background:#d13438; color:#fff; font-size:10px; font-weight:700;
                      padding:1px 5px; border-radius:10px; min-width:18px; text-align:center;
                      flex-shrink:0; line-height:1.4; }
  .wm-folder-group { padding:14px 16px 6px; font-size:11px; font-weight:700;
                      letter-spacing:.06em; text-transform:uppercase; color:#605e5c; }
  .wm-folder-group:not(:first-child) { padding-top:18px; }
  .wm-folder-chevron { width:16px; height:16px; flex-shrink:0; border:none; background:transparent;
                        padding:0; cursor:pointer; color:#605e5c; display:flex; align-items:center; justify-content:center; }
  .wm-folder-chevron::before { content:''; display:block; width:0; height:0;
                                border-left:5px solid currentColor; border-top:4px solid transparent;
                                border-bottom:4px solid transparent; margin-left:2px;
                                transform:rotate(90deg); transition:transform .12s; }
  .wm-folder-chevron.is-collapsed::before { transform:rotate(0deg); }
  .wm-folder-chevron-spacer { width:16px; height:16px; flex-shrink:0; }
  .wm-folder-item.active .wm-folder-chevron { color:#0f6cbd; }
  .wm-folder-placeholder { padding:24px 16px; font-size:12px; color:#a19f9d; text-align:center; }

  /* ── Message list pane ─────────────────────────────────────────────────── */
  .wm-msglist-pane { width:360px; min-width:280px; flex-shrink:0; border-right:1px solid #edebe9;
                      display:flex; flex-direction:column; background:#fff; overflow:hidden; min-height:0; }
  .wm-msglist-header { padding:10px 12px 8px; border-bottom:1px solid #edebe9; flex-shrink:0;
                         display:flex; align-items:flex-start; gap:8px; background:#fff; min-height:52px; }
  .wm-msglist-head-main { display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1; min-width:0; }
  .wm-folder-title { font-size:15px; font-weight:600; color:#242424; letter-spacing:-.02em; line-height:1.25; }
  .wm-msg-count { font-size:12px; color:#605e5c; white-space:nowrap; font-weight:400; }
  .wm-msglist-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; padding-top:2px; }
  .wm-icon-btn { background:none; border:1px solid transparent; border-radius:2px; cursor:pointer;
                  padding:3px 5px; color:#605e5c; display:flex; align-items:center; transition:all .1s; }
  .wm-icon-btn:hover { background:#f3f2f1; border-color:#edebe9; }
  .wm-refresh-btn { gap:6px; padding:4px 8px; border:1px solid #edebe9; border-radius:4px;
                     font-size:12px; font-weight:600; color:#323130; font-family:inherit; }
  .wm-refresh-btn span { line-height:1; }
  .wm-refresh-btn.is-busy svg, .wm-cmd.is-busy svg { animation:wm-spin .7s linear infinite; }
  .wm-filter-wrap { display:flex; align-items:center; gap:4px; border:1px solid #edebe9; border-radius:4px;
                     padding:0 4px 0 8px; background:#fff; color:#605e5c; }
  .wm-filter-wrap svg { width:14px; height:14px; flex-shrink:0; }
  .wm-filter-sel { background:transparent; border:none; padding:4px 4px 4px 0;
                    font-size:12px; color:#323130; cursor:pointer; font-family:inherit; outline:none; }
  .wm-msglist { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
                 scrollbar-width:thin; scrollbar-color:#c8c6c4 transparent; }
  .wm-msglist::-webkit-scrollbar { width:8px; }
  .wm-msglist::-webkit-scrollbar-thumb { background:#c8c6c4; border-radius:4px; border:2px solid #fff; }
  .wm-msg-item { display:flex; align-items:stretch; gap:0; padding:0; margin:0;
                  border:none; border-bottom:1px solid #edebe9; border-radius:0;
                  cursor:pointer; transition:background .08s;
                  position:relative; min-height:0; outline:none; text-align:left; width:100%;
                  background:#fff; font-family:inherit; border-left:3px solid transparent;
                  appearance:none; -webkit-appearance:none; color:inherit; overflow:visible; }
  .wm-msg-item:hover { background:#f5f5f5; }
  .wm-msg-item:focus-visible { box-shadow:inset 0 0 0 2px #0f6cbd; z-index:1; }
  .wm-msg-item.active { background:#e8f4fd; border-left-color:#0f6cbd; }
  .wm-msg-item.unread { background:#faf9f8; }
  .wm-msg-item.unread.active { background:#e8f4fd; }
  .wm-mi-unread-dot { width:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding-top:14px; }
  .wm-mi-unread-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:transparent; }
  .wm-msg-item.unread .wm-mi-unread-dot::before { background:#0f6cbd; }
  .wm-msg-item.active.unread .wm-mi-unread-dot::before { background:#0f6cbd; }
  .wm-mi-inner { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; padding:10px 12px 10px 4px; }
  .wm-msg-item.unread .wm-mi-from { font-weight:600; color:#242424; }
  .wm-msg-item.unread .wm-mi-subject { font-weight:600; color:#242424; }
  .wm-mi-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0;
                   display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
                   color:#fff; letter-spacing:-.02em; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
  .wm-mi-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .wm-mi-row1 { display:flex; align-items:center; gap:8px; justify-content:space-between; min-height:18px; }
  .wm-mi-from { font-size:14px; color:#323130; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; line-height:1.25; }
  .wm-mi-indicators { display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .wm-mi-date { font-size:12px; color:#605e5c; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .wm-mi-subject { font-size:13px; color:#323130; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
  .wm-mi-preview { font-size:12px; color:#605e5c; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                     line-height:1.4; max-height:2.8em; word-break:break-word; }
  .wm-mi-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-top:2px; }
  .wm-mi-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
                     color:#605e5c; opacity:.85; flex-shrink:0; }
  .wm-mi-flag { color:#ca5010; }
  .wm-mi-svg { width:14px; height:14px; color:#605e5c; flex-shrink:0; }
  .wm-mi-att-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; min-width:0; padding-top:2px; }
  .wm-mi-att-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%;
                     padding:1px 8px 1px 1px; border-radius:3px; background:#fff;
                     border:1px solid #edebe9; box-shadow:0 1px 0 rgba(0,0,0,.04); }
  .wm-mi-att-icon { width:22px; height:22px; border-radius:2px; display:flex; align-items:center; justify-content:center;
                     font-size:8px; font-weight:800; letter-spacing:-.02em; color:#fff; flex-shrink:0; line-height:1; }
  .wm-mi-att-icon.pdf { background:#d13438; }
  .wm-mi-att-icon.word { background:#185abd; }
  .wm-mi-att-icon.excel { background:#107c41; }
  .wm-mi-att-icon.ppt { background:#c43e1c; }
  .wm-mi-att-icon.image { background:#5c2d91; }
  .wm-mi-att-icon.zip { background:#605e5c; }
  .wm-mi-att-icon.file { background:#797673; font-size:7px; }
  .wm-mi-att-name { font-size:12px; color:#323130; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                     max-width:min(200px,28vw); }
  .wm-mi-att-more { font-size:11px; color:#605e5c; padding:0 2px; }
  .wm-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center;
                      height:100%; color:#a19f9d; gap:12px; text-align:center; padding:24px; }
  .wm-empty-state p { font-size:13px; }
  .wm-msglist-footer { display:flex; align-items:center; justify-content:space-between;
                         padding:6px 12px; border-top:1px solid #edebe9; flex-shrink:0; }
  .wm-page-btn { background:none; border:1px solid #edebe9; border-radius:2px; padding:3px 10px;
                  font-size:12px; cursor:pointer; color:#0078d4; transition:all .1s; font-family:inherit; }
  .wm-page-btn:hover:not(:disabled) { background:#deecf9; }
  .wm-page-btn:disabled { color:#a19f9d; cursor:default; }
  .wm-page-info { font-size:11px; color:#a19f9d; }

  /* ── Reading pane (Outlook on the web) ─────────────────────────────────── */
  .wm-reading-pane { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;
                       background:#f5f5f5; border-left:1px solid #edebe9; }
  .wm-reading-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
                        flex:1; min-height:0; color:#605e5c; gap:14px; text-align:center; padding:24px;
                        background:#f5f5f5; }
  .wm-reading-empty p { font-size:13px; }
  #wm-reading-content { display:flex; flex-direction:column; height:100%; overflow:hidden;
                         padding:8px 12px 12px; background:#f5f5f5; box-sizing:border-box; }
  .wm-msg-card { flex:1; min-height:0; display:flex; flex-direction:column; background:#fff;
                  border:1px solid #e1dfdd; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06);
                  overflow:hidden; }
  .wm-msg-header { padding:18px 24px 14px; border-bottom:1px solid #f3f2f1; flex-shrink:0; background:#fff; }
  .wm-msg-subject-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start;
                         gap:16px; margin-bottom:14px; }
  .wm-msg-subject { font-size:20px; font-weight:600; color:#201f1e; line-height:1.3; margin:0;
                     min-width:0; overflow-wrap:break-word; letter-spacing:-.01em; }
  .wm-msg-header-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; padding-top:2px; }
  .wm-action-btn { display:inline-flex; align-items:center; gap:5px; background:none;
                    border:1px solid #edebe9; border-radius:4px; padding:4px 10px;
                    font-size:12px; cursor:pointer; color:#323130; transition:all .1s;
                    font-family:inherit; white-space:nowrap; }
  .wm-action-btn.wm-action-icon { border:none; padding:6px; border-radius:4px; color:#424242; }
  .wm-action-btn.wm-action-icon svg { display:block; overflow:visible; }
  .wm-action-btn.wm-action-icon:hover { background:#f3f2f1; border-color:transparent; }
  .wm-action-btn:hover { background:#f3f2f1; border-color:#d2d0ce; }
  .wm-delete-btn { color:#d13438; }
  .wm-delete-btn:hover { background:#fde7e9; border-color:#f1707b; }
  .wm-action-divider { width:1px; height:22px; background:#edebe9; margin:0 4px; }
  .wm-msg-meta { display:flex; align-items:flex-start; gap:12px; }
  .wm-sender-avatar { width:40px; height:40px; border-radius:50%; background:#0078d4;
                        color:#fff; display:flex; align-items:center; justify-content:center;
                        font-size:14px; font-weight:600; flex-shrink:0; letter-spacing:-.02em; }
  .wm-msg-meta-text { flex:1; min-width:0; padding-top:1px; }
  .wm-msg-from-row { display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:nowrap; }
  .wm-msg-from-name { font-size:14px; font-weight:600; color:#201f1e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-msg-from-addr { font-size:12px; color:#605e5c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .wm-msg-date { font-size:12px; color:#605e5c; white-space:nowrap; flex-shrink:0; padding-top:2px; }
  .wm-msg-to-row { font-size:12px; color:#605e5c; margin-top:1px; display:flex; gap:8px; align-items:baseline; min-width:0; }
  .wm-msg-to-row[hidden] { display:none !important; }
  .wm-msg-to-label { color:#8a8886; flex-shrink:0; font-weight:600; min-width:22px; }
  #wm-msg-to, #wm-msg-cc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .wm-attachments-bar { margin-top:14px; padding-top:12px; border-top:1px solid #edebe9; flex-shrink:0; }
  .wm-att-bar-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:#323130; }
  .wm-att-bar-title { font-size:13px; font-weight:600; }
  .wm-att-tiles { display:flex; flex-wrap:wrap; gap:8px; }
  .wm-att-tile { display:flex; align-items:center; gap:10px; padding:8px 10px;
                  border:1px solid #edebe9; border-radius:4px; background:#fff;
                  min-width:min(240px,100%); max-width:100%; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .wm-att-tile-previewable { cursor:pointer; }
  .wm-att-tile-previewable:hover { background:#f3f2f1; border-color:#c8c6c4; }
  .wm-att-tile-icon { width:32px; height:32px; border-radius:3px; background:#deecf9;
                       display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800;
                       flex-shrink:0; text-transform:uppercase; letter-spacing:-.02em; color:#fff; }
  .wm-att-tile-icon.wm-att-kind-pdf { background:#d13438; }
  .wm-att-tile-icon.wm-att-kind-word { background:#185abd; }
  .wm-att-tile-icon.wm-att-kind-excel { background:#107c41; }
  .wm-att-tile-icon.wm-att-kind-ppt { background:#c43e1c; }
  .wm-att-tile-icon.wm-att-kind-image { background:#5c2d91; }
  .wm-att-tile-icon.wm-att-kind-zip { background:#605e5c; }
  .wm-att-tile-icon.wm-att-kind-file { background:#797673; }
  .wm-att-tile-main { flex:1; min-width:0; }
  .wm-att-tile-name { font-size:13px; font-weight:600; color:#323130; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-att-tile-size { font-size:11px; color:#605e5c; margin-top:1px; }
  .wm-att-tile-actions { display:flex; gap:4px; flex-shrink:0; }
  .wm-att-action { border:1px solid #c8c6c4; background:#fff; color:#0f6cbd; border-radius:4px;
                    padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
  .wm-att-action:hover { background:#eff6fc; border-color:#0f6cbd; }
  .wm-att-action:disabled { opacity:.5; cursor:wait; }
  .wm-att-preview { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:24px; }
  .wm-att-preview[hidden] { display:none !important; }
  .wm-att-preview-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
  .wm-att-preview-dialog { position:relative; width:min(920px,96vw); max-height:90vh; background:#fff;
                            border-radius:6px; box-shadow:0 16px 48px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; }
  .wm-att-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
                           padding:12px 16px; border-bottom:1px solid #edebe9; background:#faf9f8; flex-shrink:0; }
  .wm-att-preview-name { font-size:14px; font-weight:600; color:#323130; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-att-preview-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .wm-att-preview-btn { border:1px solid #0f6cbd; background:#0f6cbd; color:#fff; border-radius:4px;
                         padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
  .wm-att-preview-btn:hover { background:#115ea3; }
  .wm-att-preview-close { border:none; background:transparent; font-size:18px; cursor:pointer; color:#605e5c; padding:4px 8px; border-radius:4px; }
  .wm-att-preview-close:hover { background:#f3f2f1; }
  .wm-att-preview-body { flex:1; min-height:0; height:74vh; overflow:auto; background:#525659; }
  .wm-att-preview-body iframe, .wm-att-preview-body img { max-width:100%; display:block; }
  .wm-att-preview-body iframe { width:100%; height:100%; min-height:74vh; border:none; background:#525659; }
  .wm-att-preview-body img { margin:0 auto; background:#fff; }
  .wm-att-preview-fallback { padding:32px 24px; text-align:center; color:#605e5c; font-size:14px; background:#fff; }
  .wm-pdf-pages { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 12px 32px; }
  .wm-pdf-page { display:block; max-width:100%; height:auto; background:#fff;
                  box-shadow:0 2px 10px rgba(0,0,0,.35); }
  .wm-body-scroll { flex:1; min-height:0; overflow:hidden; position:relative; background:#fff;
                     display:flex; flex-direction:column; }
  .wm-body-loading { position:absolute; inset:0; z-index:2; display:flex; align-items:center;
                      justify-content:center; background:#fff; }
  .wm-body-loading[hidden] { display:none !important; }
  .wm-body-frame { flex:1; width:100%; min-height:0; height:100%; border:none; background:#fff; display:block; }

  /* ── Compose window (Outlook popout) ───────────────────────────────────── */
  .wm-compose-overlay { position:absolute; inset:0; z-index:1000;
                          display:flex; align-items:flex-end; justify-content:flex-end;
                          padding:0 12px 0 0; pointer-events:none; background:transparent; }
  .wm-compose-overlay[hidden] { display:none !important; }
  .wm-compose-window { width:min(720px, calc(100% - 16px)); height:min(680px, calc(100% - 12px));
                         background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14);
                         display:flex; flex-direction:column; border-radius:4px 4px 0 0;
                         overflow:hidden; pointer-events:all; min-height:40px; position:relative; }
  .wm-compose-window.is-max { width:calc(100% - 16px); height:calc(100% - 8px); }
  .wm-compose-window.is-min { width:280px; height:40px; }
  .wm-compose-window.is-min .wm-compose-fields,
  .wm-compose-window.is-min .wm-compose-toolbar,
  .wm-compose-window.is-min .wm-compose-scroll,
  .wm-compose-window.is-min .wm-compose-footer,
  .wm-compose-window.is-min .wm-compose-drop { display:none !important; }
  .wm-compose-drop { position:absolute; inset:40px 0 0 0; z-index:20; background:rgba(15,108,189,.08);
                      border:2px dashed #0f6cbd; display:flex; align-items:center; justify-content:center; }
  .wm-compose-drop[hidden] { display:none !important; }
  .wm-compose-drop-card { background:#fff; border:1px solid #c7e0f4; border-radius:8px;
                           padding:16px 22px; font-size:14px; font-weight:600; color:#0f6cbd;
                           box-shadow:0 8px 24px rgba(15,108,189,.12); }
  .wm-compose-header { display:flex; align-items:center; justify-content:space-between;
                         background:#0f6cbd; padding:0 8px 0 16px; flex-shrink:0; height:40px; cursor:default; }
  .wm-compose-title-text { font-size:14px; font-weight:600; color:#fff; overflow:hidden;
                            text-overflow:ellipsis; white-space:nowrap; }
  .wm-compose-controls { display:flex; gap:0; align-items:center; }
  .wm-compose-ctrl { background:none; border:none; color:rgba(255,255,255,.92);
                       cursor:pointer; width:36px; height:32px; font-size:16px; border-radius:2px;
                       display:inline-flex; align-items:center; justify-content:center; line-height:1; }
  .wm-compose-ctrl:hover { background:rgba(255,255,255,.18); }
  .wm-compose-close:hover { background:#c4314b; color:#fff; }
  .wm-compose-fields { border-bottom:1px solid #edebe9; flex-shrink:0; background:#fff; }
  .wm-compose-field-row { display:flex; align-items:center; border-bottom:1px solid #f3f2f1;
                             padding:0 16px; min-height:40px; gap:8px; }
  .wm-compose-field-row[hidden] { display:none !important; }
  .wm-compose-subj-row { border-bottom:none; }
  .wm-compose-lbl { font-size:13px; color:#616161; width:56px; flex-shrink:0; font-weight:400; }
  .wm-compose-input { flex:1; background:none; border:none; outline:none; font-size:14px;
                        color:#242424; padding:8px 0; font-family:inherit; min-width:0; }
  .wm-compose-field-extra { border:none; background:transparent; color:#0f6cbd; font-size:12px;
                             font-weight:600; cursor:pointer; font-family:inherit; padding:4px 6px;
                             flex-shrink:0; border-radius:4px; }
  .wm-compose-field-extra:hover { background:#eff6fc; }
  .wm-compose-from { flex:1; min-width:0; font-size:13px; color:#323130; padding:8px 0;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-compose-from-email { color:#605e5c; margin-left:6px; }
  .wm-compose-from-row { background:#faf9f8; }
  .wm-compose-toolbar { display:flex; align-items:center; gap:2px; padding:6px 12px;
                          border-bottom:1px solid #edebe9; flex-shrink:0; flex-wrap:wrap; background:#fff; }
  .wm-compose-tb-sel { background:#fff; border:1px solid #edebe9; border-radius:4px; padding:4px 8px;
                         font-size:12px; font-family:inherit; color:#323130; cursor:pointer; margin-right:4px; }
  .wm-tb-btn { background:none; border:1px solid transparent; border-radius:4px; cursor:pointer;
                padding:5px 8px; font-size:13px; color:#323130; min-width:28px; font-family:inherit; }
  .wm-tb-btn:hover { background:#f3f2f1; }
  .wm-tb-divider { width:1px; height:18px; background:#edebe9; margin:0 4px; flex-shrink:0; }
  .wm-compose-scroll { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
                        background:#fff; }
  .wm-compose-body { flex:1; min-height:140px; padding:16px 20px; font-size:15px; line-height:1.55;
                       outline:none; font-family:"Segoe UI",Calibri,sans-serif; color:#242424; }
  .wm-compose-body:empty::before { content:attr(data-placeholder); color:#a19f9d; pointer-events:none; }
  .wm-compose-atts { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 14px; }
  .wm-compose-atts[hidden] { display:none !important; }
  .wm-compose-att { display:flex; align-items:center; gap:8px; max-width:280px;
                     border:1px solid #edebe9; border-radius:6px; background:#faf9f8; padding:8px 10px; }
  .wm-compose-att-icon { width:28px; height:28px; border-radius:4px; background:#0f6cbd; color:#fff;
                          display:flex; align-items:center; justify-content:center; font-size:10px;
                          font-weight:700; letter-spacing:.02em; flex-shrink:0; text-transform:uppercase; }
  .wm-compose-att-icon.pdf { background:#a4262c; }
  .wm-compose-att-icon.image { background:#107c10; }
  .wm-compose-att-icon.word { background:#185abd; }
  .wm-compose-att-main { min-width:0; flex:1; }
  .wm-compose-att-name { font-size:12px; font-weight:600; color:#242424; overflow:hidden;
                          text-overflow:ellipsis; white-space:nowrap; }
  .wm-compose-att-size { font-size:11px; color:#605e5c; margin-top:1px; }
  .wm-compose-att-rm { border:none; background:transparent; color:#605e5c; cursor:pointer;
                        width:22px; height:22px; border-radius:4px; font-size:14px; line-height:1; }
  .wm-compose-att-rm:hover { background:#fde7e9; color:#a4262c; }
  .wm-compose-original { border-top:1px solid #edebe9; background:#faf9f8; flex-shrink:0; }
  .wm-compose-original[hidden] { display:none !important; }
  .wm-compose-original-toggle { display:flex; align-items:center; gap:8px; width:100%;
                                 border:none; background:transparent; padding:10px 16px; cursor:pointer;
                                 font:600 12px/1 "Segoe UI",sans-serif; color:#0f6cbd; text-align:left; }
  .wm-compose-original-toggle:hover { background:#f3f2f1; }
  .wm-compose-original-chevron { width:0; height:0; border-left:5px solid currentColor;
                                  border-top:4px solid transparent; border-bottom:4px solid transparent;
                                  transform:rotate(90deg); }
  .wm-compose-original.is-collapsed .wm-compose-original-chevron { transform:rotate(0deg); }
  .wm-compose-original-frame { width:100%; height:220px; border:none; border-top:1px solid #edebe9;
                                background:#fff; display:block; }
  .wm-compose-original.is-collapsed .wm-compose-original-frame { display:none; }
  .wm-compose-footer { display:flex; align-items:center; padding:10px 16px 12px; flex-shrink:0; gap:10px;
                         border-top:1px solid #edebe9; background:#fff; }
  .wm-send-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
                  background:#0f6cbd; color:#fff; border:none; border-radius:4px;
                  padding:8px 22px; font-size:14px; font-weight:600; cursor:pointer;
                  font-family:inherit; min-width:88px; }
  .wm-send-btn:hover { background:#115ea3; }
  .wm-send-btn:disabled { opacity:.55; cursor:default; background:#0f6cbd; }
  .wm-compose-foot-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid #edebe9;
                          background:#fff; color:#323130; border-radius:4px; padding:7px 12px;
                          font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; }
  .wm-compose-foot-btn:hover { background:#f3f2f1; }
  .wm-compose-footer-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .wm-compose-status { font-size:12px; color:#107c10; }
  .wm-compose-hint { font-size:11px; color:#a19f9d; }
  .wm-compose-status:not(:empty) + .wm-compose-hint { display:none; }
  .wm-discard-btn { background:none; border:none; cursor:pointer; padding:6px; color:#605e5c;
                     border-radius:4px; display:inline-flex; align-items:center; }
  .wm-discard-btn:hover { color:#d13438; background:#fde7e9; }

  /* ── Loading ───────────────────────────────────────────────────────────── */
  .wm-loading { position:absolute; inset:0; background:rgba(250,249,248,.92);
                  display:flex; align-items:center; justify-content:center; z-index:500;
                  backdrop-filter:blur(6px); }
  .wm-boot-cover { position:fixed; inset:0; z-index:99999; background:#faf9f8;
                    display:flex; align-items:center; justify-content:center; }
  .wm-loading-box { display:flex; flex-direction:column; align-items:center; gap:16px; }
  .wm-loading-text { margin:0; font-size:13px; font-weight:500; color:#605e5c; max-width:280px;
                      text-align:center; line-height:1.45; font-family:"Segoe UI",system-ui,sans-serif;
                      animation:wm-load-text .45s ease both; }
  .wm-ms-logo { display:grid; grid-template-columns:12px 12px; gap:2px;
                 animation:wm-logo-soft 1.8s ease-in-out infinite; }
  .wm-ms-logo span { width:12px; height:12px; display:block; }
  .wm-ms-logo span:nth-child(1){ background:#f35325; }
  .wm-ms-logo span:nth-child(2){ background:#81bc06; }
  .wm-ms-logo span:nth-child(3){ background:#05a6f0; }
  .wm-ms-logo span:nth-child(4){ background:#ffba08; }
  .wm-progress-ring { width:36px; height:36px; display:block; transform:rotate(-90deg); }
  .wm-progress-ring-sm { width:22px; height:22px; }
  .wm-progress-track { fill:none; stroke:#e1dfdd; stroke-width:2.4; }
  .wm-progress-arc { fill:none; stroke:#0f6cbd; stroke-width:2.4; stroke-linecap:round;
                      stroke-dasharray:20 62; animation:wm-ring 1s linear infinite; }
  .wm-spinner { width:28px; height:28px; border:3px solid #deecf9;
                  border-top-color:#0078d4; border-radius:50%; animation:wm-spin .7s linear infinite; }
  @keyframes wm-spin { to { transform:rotate(360deg); } }
  @keyframes wm-ring {
    0% { stroke-dasharray:8 74; stroke-dashoffset:0; }
    50% { stroke-dasharray:42 40; }
    100% { stroke-dasharray:8 74; stroke-dashoffset:-82; }
  }
  @keyframes wm-logo-soft {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.78; transform:scale(.96); }
  }
  @keyframes wm-load-text { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

  /* ── Message loading skeleton ─────────────────────────────────────────── */
  .wm-skeleton { background:linear-gradient(90deg,#f3f2f1 25%,#edebe9 50%,#f3f2f1 75%);
                   background-size:200% 100%; animation:wm-shimmer 1.2s infinite; border-radius:2px; }
  @keyframes wm-shimmer { to { background-position:-200% 0; } }

  .wm-msg-skeleton { padding:0 0 0 3px; border-bottom:1px solid #f3f2f1; }
  .wm-msg-skeleton .wm-mi-inner { padding:12px 12px 12px 4px; gap:12px; }
  .wm-sk-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; }
  .wm-sk-lines { flex:1; display:flex; flex-direction:column; gap:8px; }
  .wm-sk-line { height:10px; border-radius:3px; }
  .wm-sk-line.w40 { width:40%; }
  .wm-sk-line.w70 { width:70%; }
  .wm-sk-line.w90 { width:90%; }

  .wm-reading-empty { background:#fff; }
  .wm-reading-empty svg { opacity:.18; }
  .wm-reading-empty p { font-size:14px; color:#605e5c; max-width:240px; line-height:1.5; }

  .wm-account-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
                        justify-content:center; font-size:11px; font-weight:700; color:#fff; background:#5c2d91;
                        box-shadow:0 0 0 1px rgba(255,255,255,.25); }
  .wm-account-chip-type.resurrected { background:rgba(34,197,94,.9); color:#fff; }

  .wm-msglist-loading { position:relative; }
  .wm-msglist-loading::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.35);
                                pointer-events:none; z-index:2; }
  .wm-body-frame { background:#fff; }

  /* ── Command bar ───────────────────────────────────────────────────────── */
  .wm-cmdbar { display:flex; align-items:center; gap:2px; height:44px; padding:0 10px;
                border-bottom:1px solid #edebe9; background:#fff; flex-shrink:0; }
  .wm-cmd { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px;
             border:none; border-radius:4px; background:transparent; color:#242424;
             font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; }
  .wm-cmd svg { width:16px; height:16px; flex-shrink:0; overflow:visible; display:block; }
  .wm-cmd:hover:not(:disabled) { background:#f3f2f1; }
  .wm-cmd:disabled { opacity:.38; cursor:default; }
  .wm-cmd-danger { color:#a4262c; }
  .wm-cmd-danger:hover:not(:disabled) { background:#fde7e9; }
  .wm-cmd-sep { width:1px; height:20px; background:#edebe9; margin:0 6px; }
  .wm-cmd-invisible.is-on { background:#dff6dd; color:#0b5a08; }
  .wm-cmd-invisible.is-on:hover { background:#c9eac9; }
  .wm-cmd-read { min-width:118px; }
  .wm-cmd-read.is-unread-msg { color:#0f6cbd; }

  /* ── Pane splitters ────────────────────────────────────────────────────── */
  .wm-splitter { width:5px; flex-shrink:0; cursor:col-resize; background:transparent;
                  position:relative; z-index:4; }
  .wm-splitter::after { content:''; position:absolute; top:0; bottom:0; left:2px; width:1px; background:transparent; }
  .wm-splitter:hover, .wm-splitter.is-dragging { background:#deecf9; }
  .wm-splitter:hover::after, .wm-splitter.is-dragging::after { background:#0f6cbd; }

  /* ── Message hover actions ─────────────────────────────────────────────── */
  .wm-mi-hover { display:none; position:absolute; right:8px; top:8px; gap:2px;
                  background:#fff; border:1px solid #edebe9; border-radius:4px;
                  box-shadow:0 2px 8px rgba(0,0,0,.1); z-index:6; padding:2px;
                  pointer-events:auto; }
  .wm-msg-item:hover .wm-mi-hover, .wm-msg-item:focus-within .wm-mi-hover { display:flex; }
  .wm-msg-item.active .wm-mi-hover { background:#e8f4fd; }
  .wm-mi-hover-btn { width:28px; height:28px; border:none; background:transparent; border-radius:3px;
                      color:#424242; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
                      padding:0; flex-shrink:0; }
  .wm-mi-hover-btn:hover { background:#f3f2f1; }
  .wm-mi-hover-btn.danger { color:#a4262c; }
  .wm-mi-hover-btn.danger:hover { background:#fde7e9; color:#a4262c; }
  .wm-mi-hover-btn svg { width:16px; height:16px; overflow:visible; display:block;
                          shape-rendering:geometricPrecision; }

  @media (max-width: 1100px){
    .wm-cmd span { display:none; }
    .wm-cmd { padding:0 8px; }
    .wm-cmd-invisible span, #wm-cmd-read span { display:inline; }
    .wm-cmd-read { min-width:0; padding:0 10px; }
  }

  .wm-nav-foot { display:flex; flex-direction:column; gap:6px; }
  .wm-mailbox-nav { padding:8px 8px 4px; }
  .wm-mailbox-nav-title { padding:6px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em;
                           text-transform:uppercase; color:#605e5c; }
  .wm-mailbox-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
                      padding:7px 10px; margin:0 0 2px; border:none; border-radius:4px;
                      background:transparent; color:#323130; cursor:pointer; font-family:inherit; }
  .wm-mailbox-item:hover { background:#f3f2f1; }
  .wm-mailbox-item.is-active { background:#deecf9; color:#0f6cbd; font-weight:600; }
  .wm-mailbox-item-av { width:22px; height:22px; border-radius:50%; background:#0f6cbd; color:#fff;
                         display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
  .wm-mailbox-item-text { min-width:0; flex:1; }
  .wm-mailbox-item-name { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#323130; }
  .wm-mailbox-item-email { display:block; font-size:10px; color:#605e5c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wm-mailbox-item.is-active .wm-mailbox-item-email { color:#0f6cbd; }
  .wm-mailbox-kind { font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
                      color:#0f6cbd; background:#eff6fc; padding:1px 5px; border-radius:3px; flex-shrink:0; }

  .wm-cmd-move-wrap { position:relative; }
  .wm-move-menu { position:absolute; top:100%; left:0; z-index:20; min-width:220px; max-height:280px;
                   overflow:auto; background:#fff; border:1px solid #c8c6c4; border-radius:4px;
                   box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; }
  .wm-move-menu button { display:block; width:100%; text-align:left; border:none; background:transparent;
                          padding:7px 10px; border-radius:3px; font-size:13px; cursor:pointer; font-family:inherit; }
  .wm-move-menu button:hover { background:#deecf9; color:#0f6cbd; }
  .wm-cmd.is-flagged { background:#fff4ce; color:#8a6d00; }

  .wm-flyout { position:absolute; inset:0; z-index:40; display:flex; justify-content:flex-end; }
  .wm-flyout[hidden] { display:none !important; }
  .wm-flyout-backdrop { flex:1; background:rgba(0,0,0,.28); }
  .wm-flyout-panel { width:min(420px, 92vw); height:100%; background:#fff; border-left:1px solid #c8c6c4;
                      display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,.12);
                      color:#242424; }
  .wm-flyout-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #edebe9; }
  .wm-flyout-tabs { display:flex; gap:4px; flex:1; }
  .wm-flyout-tab { border:none; background:transparent; padding:7px 10px; border-radius:4px;
                    font-size:13px; font-weight:600; color:#605e5c; cursor:pointer; font-family:inherit; }
  .wm-flyout-tab.is-active { background:#deecf9; color:#0f6cbd; }
  .wm-flyout-close { width:32px; height:32px; border:none; background:transparent; border-radius:4px; cursor:pointer; }
  .wm-flyout-close:hover { background:#f3f2f1; }
  .wm-flyout-body { flex:1; overflow:auto; padding:16px 18px 24px; }
  .wm-flyout-title { margin:0 0 6px; font-size:20px; font-weight:600; color:#242424; }
  .wm-flyout-lead { margin:0 0 16px; font-size:13px; color:#605e5c; line-height:1.45; }
  .wm-setting-block { border:1px solid #edebe9; border-radius:6px; padding:14px; margin-bottom:14px; background:#faf9f8; }
  .wm-setting-label { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#605e5c; margin-bottom:10px; }
  .wm-field-lbl { display:block; font-size:12px; font-weight:600; color:#323130; margin:10px 0 4px; }
  .wm-setting-input, .wm-setting-select, .wm-setting-textarea {
    width:100%; border:1px solid #c8c6c4; border-radius:4px; padding:8px 10px; font-size:13px;
    font-family:inherit; color:#242424; background:#fff; box-sizing:border-box;
  }
  .wm-setting-textarea { resize:vertical; min-height:72px; }
  .wm-toggle-row { display:flex; align-items:center; gap:8px; font-size:13px; margin:8px 0; }
  .wm-setting-kv { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:6px 0; }
  .wm-setting-kv span { color:#605e5c; }
  .wm-flyout-actions { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .wm-rules-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .wm-rule-card { border:1px solid #edebe9; border-radius:6px; padding:10px 12px; background:#fff; }
  .wm-rule-card-top { display:flex; align-items:center; gap:8px; }
  .wm-rule-name { flex:1; font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#242424; }
  .wm-rule-meta { font-size:12px; color:#605e5c; margin-top:4px; }
  .wm-rule-card-actions { display:flex; gap:4px; }
  .wm-rule-card-actions button { border:1px solid #edebe9; background:#fff; border-radius:4px; padding:4px 8px;
                                  font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
  .wm-mailbox-list { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .wm-mailbox-card { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid #edebe9;
                      border-radius:6px; padding:10px 12px; background:#fff; cursor:pointer; font-family:inherit; color:#323130; }
  .wm-mailbox-card:hover, .wm-mailbox-card.is-active { border-color:#0f6cbd; background:#eff6fc; }
  .wm-open-mailbox-row { display:flex; gap:8px; }
  .wm-open-mailbox-row .wm-setting-input { flex:1; }
  .wm-open-mailbox-row .wm-send-btn { flex-shrink:0; }
  .wm-rule-form { border:1px solid #edebe9; border-radius:6px; padding:14px; background:#faf9f8; }
  .wm-mailbox-nav { border-bottom:1px solid #edebe9; margin-bottom:4px; }