/* Fluent shell (方案A 精修深化). Loaded after soft-ui.css; only restyles, every id/class app.js uses is kept. */
html[data-theme="white"] body.soft-ui.fluent,
html:not([data-theme]) body.soft-ui.fluent {
  --bg: #f3f3f3; --bg2: #fff; --panel: #fff; --panel2: #f5f5f5;
  --text: #1b1b1b; --muted: #5d5d5d; --border: #e5e5e5;
  --accent: #d6336c; --accent2: #c22a5f; --grad: linear-gradient(135deg, #e0507f, #c22a5f);
  --ok: #17a35c; --warn: #c98a00; --danger: #d13438;
  --hover: rgba(0, 0, 0, .045); --accent-soft: rgba(214, 51, 108, .09); --focus-ring: rgba(214, 51, 108, .16);
  --on-soft: rgba(23, 163, 92, .06); --on-glow: rgba(23, 163, 92, .3); --led: #17a35c; --on-color: #17a35c;
  --f-card: #fbfbfb; --f-sub: #f5f5f5; --f-sel: rgba(0, 0, 0, .06); --f-press: rgba(0, 0, 0, .075);
  --f-bd2: #d6d6d6; --f-div: #dcdcdc; --f-tx3: #8a8a8a; --f-ac-tx: #c02a60;
  --f-avatar: linear-gradient(135deg, #3a3f47, #15171a);
  --f-card-sh: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .05);
  --f-pop-sh: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06);
  color-scheme: light;
}
html[data-theme="gray"] body.soft-ui.fluent {
  --bg: #202020; --bg2: #272727; --panel: #272727; --panel2: #323232;
  --text: #f2f2f2; --muted: #c3c3c3; --border: #383838;
  --accent: #ef5d8f; --accent2: #f47aa4; --grad: linear-gradient(135deg, #f47aa4, #e0507f);
  --ok: #4cc985; --warn: #e8b33a; --danger: #ff6b6e;
  --hover: rgba(255, 255, 255, .055); --accent-soft: rgba(239, 93, 143, .13); --focus-ring: rgba(239, 93, 143, .2);
  --on-soft: rgba(76, 201, 133, .08); --on-glow: rgba(76, 201, 133, .3); --led: #4cc985; --on-color: #4cc985;
  --f-card: #2c2c2c; --f-sub: #323232; --f-sel: rgba(255, 255, 255, .07); --f-press: rgba(255, 255, 255, .085);
  --f-bd2: #454545; --f-div: #3a3a3a; --f-tx3: #8f8f8f; --f-ac-tx: #f48bb0;
  --f-avatar: linear-gradient(135deg, #5a606b, #2a2d33);
  --f-card-sh: 0 1px 2px rgba(0, 0, 0, .3);
  --f-pop-sh: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
  color-scheme: dark;
}
/* Other saved themes keep their own palette; these fill the Fluent-only tokens from it. */
body.soft-ui.fluent {
  --f-win: var(--bg); --f-panel: var(--bg2); --f-card: var(--panel2);
  --f-sub: var(--panel2); --f-bd: var(--border);
  --f-sel: color-mix(in srgb, var(--text) 7%, transparent); --f-press: color-mix(in srgb, var(--text) 9%, transparent);
  --f-bd2: color-mix(in srgb, var(--text) 20%, transparent); --f-div: var(--border);
  --f-tx3: color-mix(in srgb, var(--muted) 75%, var(--bg)); --f-ac-tx: var(--accent);
  --f-avatar: linear-gradient(135deg, #5a606b, #2a2d33);
  --f-card-sh: 0 1px 2px rgba(0, 0, 0, .3);
  --f-pop-sh: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  --f-tx: var(--text); --f-tx2: var(--muted);
  --f-ac: var(--accent); --f-ac-bg: var(--accent-soft);
  --f-ok: var(--ok); --f-ok-bg: var(--on-soft); --f-bad: var(--danger, #d13438);
  --f-bad-bg: color-mix(in srgb, var(--danger, #d13438) 10%, transparent);
  --f-pop: var(--bg2);
  --soft-panel: var(--bg2); --soft-selected: var(--f-sel, var(--hover)); --soft-line: var(--border);
  --soft-surface: var(--panel2); --soft-shadow: none;
  --radius: 5px; --radius-card: 7px;
  font: 13px/1.5 "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
}
html[data-theme="white"] body.soft-ui.fluent, html:not([data-theme]) body.soft-ui.fluent { --f-btn-h: #f6f6f6; }
html[data-theme="gray"] body.soft-ui.fluent { --f-btn-h: #313131; }
body.soft-ui.fluent { --f-btn-h: color-mix(in srgb, var(--bg2) 92%, var(--text)); }

/* One button look everywhere: panel background, hairline border, plain text. State shows in the label. */
body.soft-ui.fluent :is(.primary, .ghost, .mini, .danger, .set-nav-btn, .bp-tab, .r-btn, .chat-file-del, .chat-send),
body.soft-ui.fluent .modal-box :is(.primary, .ghost, .mini, .danger),
body.soft-ui.fluent .soft-room-actions :is(.soft-room-action, #currentRoomManageBtn),
body.soft-ui.fluent .voice-bar .audio-control-wrap > .talk,
body.soft-ui.fluent .voice-bar .audio-control-wrap > :is(#micVolumeToggle, #channelVolumeToggle),
body.soft-ui.fluent .voice-bar .talk.screen-talk,
body.soft-ui.fluent .chat-row .chat-send,
body.soft-ui.fluent .soft-sidebar-bottom #retryBtn,
body.soft-ui.fluent .chat-image-toolbar button,
body.soft-ui.fluent .screen-bar .mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-bottom-color: var(--f-bd2); border-radius: 5px;
  background: var(--bg2); color: var(--text);
  font-size: 13px; font-weight: 400; line-height: 1.2; text-decoration: none;
  box-shadow: none; filter: none; animation: none; transform: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body.soft-ui.fluent :is(.primary, .ghost, .mini, .danger, .set-nav-btn, .bp-tab, .r-btn, .chat-file-del, .chat-send):hover:not(:disabled),
body.soft-ui.fluent .modal-box :is(.primary, .ghost, .mini, .danger):hover:not(:disabled),
body.soft-ui.fluent .soft-room-actions :is(.soft-room-action, #currentRoomManageBtn):hover:not(:disabled),
body.soft-ui.fluent .voice-bar .audio-control-wrap > .talk:hover:not(:disabled),
body.soft-ui.fluent .voice-bar .audio-control-wrap > :is(#micVolumeToggle, #channelVolumeToggle):hover,
body.soft-ui.fluent .voice-bar .talk.screen-talk:hover:not(:disabled),
body.soft-ui.fluent .chat-row .chat-send:hover:not(:disabled),
body.soft-ui.fluent .soft-sidebar-bottom #retryBtn:hover,
body.soft-ui.fluent .chat-image-toolbar button:hover:not(:disabled),
body.soft-ui.fluent .screen-bar .mini:hover {
  background: var(--f-btn-h); color: var(--text); border-color: var(--border); border-bottom-color: var(--f-bd2); filter: none;
}
body.soft-ui.fluent :is(.primary, .ghost, .mini, .danger, .chat-send, .talk, .volume-toggle, .soft-room-action):active:not(:disabled) {
  background: var(--f-sub); color: var(--muted); transform: none;
}
body.soft-ui.fluent :is(.primary, .ghost, .mini, .danger, .chat-send, .talk, .soft-room-action, #currentRoomManageBtn):disabled {
  opacity: .45; cursor: not-allowed;
}
body.soft-ui.fluent .modal-box .primary, body.soft-ui.fluent .primary { font-weight: 600; }
body.soft-ui.fluent .danger, body.soft-ui.fluent .modal-box .danger, body.soft-ui.fluent .r-btn.danger { color: var(--danger); }
body.soft-ui.fluent .danger:hover:not(:disabled) { color: var(--danger); background: var(--f-bad-bg); }
body.soft-ui.fluent :is(.soft-room-action, #currentRoomManageBtn, .talk, .screen-talk) svg { width: 16px; height: 16px; color: var(--muted); }
body.soft-ui.fluent :focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* Title bar */
body.soft-ui.fluent .topbar { height: 36px; min-height: 36px; flex-basis: 36px; padding: 0 8px 0 16px; background: transparent; border: 0; }
body.soft-ui.fluent .soft-app-title { font-size: 12px; color: var(--muted); gap: 8px; }
body.soft-ui.fluent .soft-title-tools, body.soft-ui.fluent .topbar .soft-connection-actions { gap: 2px; }
body.soft-ui.fluent .topbar .soft-connection-label { margin-right: 6px; font-size: 12px; color: var(--muted); gap: 6px; }
body.soft-ui.fluent .topbar .route-btn { min-height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; box-shadow: none; }
body.soft-ui.fluent .topbar .route-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .topbar .route-btn.route-on { color: var(--f-ac-tx); background: var(--f-ac-bg); border: 0; box-shadow: none; }
body.soft-ui.fluent .topbar .route-btn:disabled { opacity: 1; cursor: default; }
body.soft-ui.fluent .topbar .icon-btn, body.soft-ui.fluent .soft-title-button { width: 36px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
body.soft-ui.fluent .topbar .icon-btn:hover, body.soft-ui.fluent .soft-title-button:hover { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .topbar .icon-btn svg, body.soft-ui.fluent .soft-title-button svg { width: 15px; height: 15px; }

/* Sidebar sits on the window colour; the content area is one white panel with a rounded top-left corner. */
body.soft-ui.fluent .layout { padding: 0; }
body.soft-ui.fluent .sidebar { flex: 0 0 220px; width: 220px; padding: 8px 8px 30px; background: transparent; }
body.soft-ui.fluent .vsplit { flex: 0 0 6px; width: 6px; margin-right: -6px; position: relative; z-index: 2; border-radius: 3px; }
body.soft-ui.fluent .main {
  padding: 0 32px; gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border); border-right: 0; border-bottom: 0;
  border-radius: 16px 0 0 0;
}
body.soft-ui.fluent .soft-profile { padding: 0 0 12px; margin: 0 0 10px; border-bottom: 0; position: relative; row-gap: 6px; }
body.soft-ui.fluent .soft-profile::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: var(--f-div); }
body.soft-ui.fluent #softProfileButton { gap: 12px; padding: 10px 14px; border-radius: 6px; }
body.soft-ui.fluent #softProfileButton:hover { background: var(--hover); }
body.soft-ui.fluent #softProfileButton:hover #softProfileName { color: var(--text); }
body.soft-ui.fluent #softProfileAvatar { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background-color: #2b2f36; background-image: var(--f-avatar); background-size: cover; background-position: center; color: #fff; font-size: 16px; }
body.soft-ui.fluent #softProfileName { font-size: 14px; font-weight: 500; }
body.soft-ui.fluent .soft-profile .vd-role { font-size: 12px; color: var(--muted); padding-top: 1px; }
body.soft-ui.fluent .soft-account-actions { padding: 0 6px; }
body.soft-ui.fluent .soft-profile .vd-ow-login { padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; }
body.soft-ui.fluent .soft-profile .vd-ow-login:hover { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .soft-channel-panel h2 { padding: 0 12px; margin: 0 0 4px; font-size: 12px; color: var(--f-tx3); }
body.soft-ui.fluent .chan-tree { gap: 2px; }
body.soft-ui.fluent .tree-room { min-height: 36px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: 14px; font-weight: 400; gap: 8px; }
body.soft-ui.fluent .tree-room:hover { background: var(--hover); }
body.soft-ui.fluent .tree-room:active { background: var(--f-press); }
body.soft-ui.fluent .tree-room.current { background: var(--f-sel); color: var(--text); font-weight: 600; }
body.soft-ui.fluent .tree-room.current::before { top: 10px; bottom: 10px; min-height: 0; width: 3px; background: var(--accent); }
body.soft-ui.fluent .tree-room.sub { margin-left: 14px; font-size: 13px; }
body.soft-ui.fluent .tree-meta { font-size: 12px; color: var(--f-tx3); font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .tree-room.current .tree-meta { color: var(--ok); }
body.soft-ui.fluent .tree-mem { padding: 0 12px 0 28px; font-size: 12px; line-height: 26px; color: var(--muted); }
body.soft-ui.fluent .tree-mem::before { content: ""; left: 16px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--f-bd2); opacity: 1; }
body.soft-ui.fluent .soft-tools { margin-top: 8px; padding-top: 8px; border-top: 0; position: relative; gap: 2px; }
body.soft-ui.fluent .soft-tools::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: var(--f-div); }
body.soft-ui.fluent .soft-tools button { min-height: 36px; padding: 0 12px; border-radius: 5px; font-size: 14px; color: var(--text); gap: 10px; }
body.soft-ui.fluent .soft-tools button:hover { background: var(--hover); }
body.soft-ui.fluent .soft-tools svg { width: 16px; height: 16px; color: var(--muted); }
body.soft-ui.fluent .soft-sidebar-bottom { margin-top: 6px; padding: 0 6px; }
body.soft-ui.fluent .soft-icp { left: 0 !important; right: auto !important; text-align: left !important; padding-left: 20px; bottom: 6px !important; }
/* Room header: big title on the left, status chips, actions on the right, hairline underneath. */
body.soft-ui.fluent .soft-room-hero {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; grid-template-areas: "title sub actions";
  align-items: center; column-gap: 12px;
  min-height: 0; padding: 26px 0 14px; margin: 0;
  border: 0; border-bottom: 1px solid var(--f-div); border-radius: 0; background: none; box-shadow: none;
}
body.soft-ui.fluent .soft-hero-top { display: contents; }
body.soft-ui.fluent .soft-hero-mark { display: none; }
body.soft-ui.fluent .soft-room-hero #vdRoom {
  grid-area: title; width: auto; margin: 0; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: .01em;
  text-align: left; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.soft-ui.fluent .soft-hero-sub { grid-area: sub; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow: hidden; font-size: 12px; }
body.soft-ui.fluent .soft-hero-sub .dot { display: none; }
body.soft-ui.fluent .soft-hero-sub > span:not(.dot) {
  display: inline-flex; align-items: center; flex: 0 0 auto; height: 22px; padding: 0 9px; border-radius: 11px;
  background: var(--f-sub); color: var(--muted); white-space: nowrap;
}
body.soft-ui.fluent .soft-hero-sub > span:has(#peers) { color: var(--ok); background: var(--f-ok-bg); }
body.soft-ui.fluent .soft-hero-sub > span:has(#peers)::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
body.soft-ui.fluent .soft-hero-sub > #status { flex: 0 1 auto; min-width: 0; display: block; line-height: 22px; overflow: hidden; text-overflow: ellipsis; background: transparent; padding: 0 2px; color: var(--f-tx3); }
body.soft-ui.fluent .soft-room-actions { grid-area: actions; flex-direction: row; align-items: center; gap: 6px; }
body.soft-ui.fluent .soft-room-actions-secondary { gap: 6px; }
body.soft-ui.fluent .soft-room-actions > #currentRoomManageBtn { order: 2; }
body.soft-ui.fluent .soft-room-actions .soft-room-action, body.soft-ui.fluent .soft-room-actions #currentRoomManageBtn { white-space: nowrap; }
body.soft-ui.fluent .soft-invite-popover { top: calc(100% + 8px); padding: 14px; border: 0; border-radius: 8px; background: var(--bg2); box-shadow: var(--f-pop-sh); }
body.soft-ui.fluent .soft-invite-popover label { font-size: 13px; }

/* Cards: the seat list and the public screen. */
body.soft-ui.fluent .main > .mic-panel,
body.soft-ui.fluent .main > .chat-panel {
  display: flex; flex-direction: column; padding: 0;
  background: var(--f-card); border: 1px solid var(--border); border-radius: 7px; box-shadow: var(--f-card-sh); overflow: hidden;
}
body.soft-ui.fluent .main > .mic-panel { flex: 0 1 auto; min-height: 120px; margin-top: 8px; }
body.soft-ui.fluent .main > .chat-panel { flex: 1 1 0; min-height: 160px; }
body.soft-ui.fluent .main:has(> .chat-panel[style*="flex"]) > .mic-panel { flex: 1 1 auto; }
body.soft-ui.fluent .mic-head, body.soft-ui.fluent .chat-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  min-height: 52px; margin: 0; padding: 0 12px 0 20px; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 15px; font-weight: 500; letter-spacing: 0;
}
body.soft-ui.fluent .mic-layout-switch { margin-left: 4px; padding: 2px; gap: 2px; border: 0; border-radius: 6px; background: var(--f-sub); }
body.soft-ui.fluent .mic-layout-switch button { height: 26px; padding: 0 12px; border-radius: 4px; color: var(--muted); font-size: 13px; }
body.soft-ui.fluent .mic-layout-switch button:hover { color: var(--text); }
body.soft-ui.fluent .mic-layout-switch button[aria-pressed="true"] { background: var(--bg2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body.soft-ui.fluent .mic-tip { margin-left: auto; font-size: 12px; color: var(--f-tx3); }
body.soft-ui.fluent .hsplit { margin: -11px 0; }
body.soft-ui.fluent .hsplit span { background: var(--f-bd2); opacity: .7; }
body.soft-ui.fluent .hsplit:hover span, body.soft-ui.fluent .hsplit.active span { background: var(--accent); opacity: 1; }
/* Seats. Frames, medals, levels, nameplates and badges render exactly as before; only the card and talking state change. */
body.soft-ui.fluent .mic-strip { padding: 14px 16px 16px; gap: 10px; }
body.soft-ui.fluent .mic-strip[data-layout="cards"] { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
body.soft-ui.fluent .mic-strip .vm {
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg2); box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
body.soft-ui.fluent .mic-strip .vm:hover { background: var(--f-btn-h); border-color: var(--f-bd2); }
body.soft-ui.fluent .mic-strip .vm:has(> .vm-avatar.me) { background: linear-gradient(180deg, var(--f-ac-bg), transparent 70%), var(--bg2); }
body.soft-ui.fluent .mic-strip .vm.talking { border-color: var(--ok); background: linear-gradient(180deg, var(--on-soft), transparent 70%), var(--bg2); }
body.soft-ui.fluent .mic-strip .vm > .vm-avatar {
  border: 0; box-shadow: none; transform: none;
  background-color: #2b2f36; background-image: var(--f-avatar); color: #fff;
}
body.soft-ui.fluent .mic-strip .vm > .vm-avatar.me { border: 0; box-shadow: none; }
body.soft-ui.fluent .mic-strip .vm .vm-avatar::before { opacity: 0; animation: none; }
body.soft-ui.fluent .mic-strip .vm.talking .vm-avatar { transform: none; }
body.soft-ui.fluent .mic-strip .vm.talking .vm-avatar::before {
  opacity: 0; animation: none; border: 0; box-shadow: none;
}
body.soft-ui.fluent .mic-strip .vm > .vm-mic { top: 8px; right: 10px; font-size: 9px; color: var(--f-tx3); }
body.soft-ui.fluent .mic-strip .vm > .vm-mic.on { color: var(--ok); }
body.soft-ui.fluent .mic-strip .vm-nick, body.soft-ui.fluent .vm-name-row .vm-nick { color: var(--text); font-weight: 600; }
body.soft-ui.fluent .mic-strip .vm > .vm-badge.owner,
body.soft-ui.fluent .vm-badges > .vm-badge.owner { color: var(--f-ac-tx); background: var(--f-ac-bg); }
body.soft-ui.fluent .mic-strip[data-layout="classic"] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
body.soft-ui.fluent .mic-strip[data-layout="classic"] .vm { min-height: 176px; padding: 16px 6px 10px; }
body.soft-ui.fluent .mic-strip > .chan-empty { color: var(--f-tx3); font-size: 13px; text-align: center; }

/* Public screen */
body.soft-ui.fluent .chat-head > span:first-child { font-size: 15px; font-weight: 500; }
body.soft-ui.fluent .soft-chat-actions { gap: 2px; }
body.soft-ui.fluent .soft-file-tab { height: 30px; padding: 0 10px; margin: 0; border-radius: 5px; color: var(--muted); font-size: 13px; gap: 6px; }
body.soft-ui.fluent .soft-file-tab svg { width: 15px; height: 15px; }
body.soft-ui.fluent .soft-file-tab:hover:not(:disabled) { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .chat-seg { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--f-sub); }
body.soft-ui.fluent .chat-seg-on { height: 26px; padding: 0 12px; border-radius: 4px; background: var(--bg2); color: var(--text); font-size: 13px; font-weight: 500; line-height: 26px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body.soft-ui.fluent .chat-pane-tab { height: 28px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
body.soft-ui.fluent .chat-pane-tab[aria-selected="true"] { background: var(--bg2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body.soft-ui.fluent .chat-pane-tab:disabled { opacity: .45; cursor: default; }
body.soft-ui.fluent .chat-pane-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.soft-ui.fluent .chat-files-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 0; overflow: hidden; }
body.soft-ui.fluent .chat-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; }
body.soft-ui.fluent .chat-files-head .mini { min-height: 26px; padding: 0 10px; font-size: 12px; }
body.soft-ui.fluent .chat-files-sub { flex: 0 0 auto; margin: 6px 0; color: var(--muted); font-size: 12px; }
body.soft-ui.fluent .chat-files-panel .fm-list { flex: 1 1 0; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
body.soft-ui.fluent .chat-files-panel .fm-row { padding: 10px 4px; border-bottom: 1px solid var(--border); border-radius: 0; }
body.soft-ui.fluent .chat-files-panel .fm-ops .mini { min-height: 28px; padding: 0 8px; font-size: 12px; }
body.soft-ui.fluent .chat-files-panel .fm-meta { line-height: 1.6; overflow-wrap: anywhere; }
body.soft-ui.fluent .chat-row .chat-attach { flex: 0 0 30px; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
body.soft-ui.fluent .chat-row .chat-attach:hover:not(:disabled) { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .chat-row .chat-attach:disabled { opacity: .45; cursor: default; }
body.soft-ui.fluent .chat-drop-hint { display: none; min-width: 0; flex: 1; color: var(--muted); font-size: 12px; }
body.soft-ui.fluent .chat-panel[data-view="files"] .chat-drop-hint { display: block; }
body.soft-ui.fluent .chat-panel[data-view="files"] :is(#chatInput, #chatSend) { display: none; }
body.soft-ui.fluent .chat-typing { font-size: 12px; color: var(--f-tx3); }
body.soft-ui.fluent .chat-log { padding: 10px 20px 6px; gap: 0; background: transparent; }
body.soft-ui.fluent .chat-hint { color: var(--f-tx3); font-size: 13px; }
body.soft-ui.fluent .chat-sys { align-self: center; padding: 6px 0; font-size: 12px; color: var(--f-tx3); }
/* message = avatar + body; consecutive lines from one person collapse */
body.soft-ui.fluent .chat-log .chat-line {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 -10px; padding: 6px 10px; border-radius: 6px;
  font-size: 14px; line-height: 1.6; word-break: break-word; background: transparent;
}
body.soft-ui.fluent .chat-log .chat-line:hover { background: var(--hover); }
body.soft-ui.fluent .chat-log .chat-line.self { background: transparent; }
body.soft-ui.fluent .chat-log .chat-line.self:hover { background: var(--hover); }
body.soft-ui.fluent .chat-log .chat-line.cont { padding-top: 0; }
body.soft-ui.fluent .chat-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background-color: #2b2f36; background-image: var(--f-avatar); background-size: cover; background-position: center;
  color: #fff; font-size: 12px; font-weight: 600;
}
body.soft-ui.fluent .chat-avatar[style*="url"] { background-color: transparent; }
body.soft-ui.fluent .chat-line.cont > .chat-avatar { visibility: hidden; height: 0; }
body.soft-ui.fluent .chat-body { flex: 1; min-width: 0; }
body.soft-ui.fluent .chat-who { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; font-size: 13px; }
body.soft-ui.fluent .chat-line.cont .chat-who { display: none; }
body.soft-ui.fluent .chat-log .chat-line .chat-name { margin: 0; color: var(--text); font-size: 13px; font-weight: 600; }
body.soft-ui.fluent .chat-log .chat-line:nth-child(n) .chat-name { color: var(--text); }
body.soft-ui.fluent .chat-log .chat-line.self .chat-name { color: var(--f-ac-tx); }
body.soft-ui.fluent .chat-who time { font-size: 11px; color: var(--f-tx3); font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .chat-who .ti-plate { margin: 0; }
body.soft-ui.fluent .chat-text { color: var(--text); }
body.soft-ui.fluent .chat-at { padding: 0 3px; border-radius: 3px; background: var(--f-ac-bg); color: var(--f-ac-tx); }
/* file card */
body.soft-ui.fluent .chat-file-card {
  display: flex; align-items: center; gap: 12px; width: 320px; max-width: 100%; margin-top: 4px; padding: 10px 8px 10px 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg2);
}
body.soft-ui.fluent .chat-file-ext {
  flex: 0 0 36px; height: 36px; border-radius: 6px; display: grid; place-items: center;
  background: var(--f-sub); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .03em;
}
body.soft-ui.fluent .chat-file-ext:is(.ext-wav, .ext-flac, .ext-aif, .ext-aiff) { background: rgba(45, 91, 179, .12); color: #2d5bb3; }
html[data-theme="gray"] body.soft-ui.fluent .chat-file-ext:is(.ext-wav, .ext-flac, .ext-aif, .ext-aiff) { color: #8fb1f0; }
body.soft-ui.fluent .chat-file-ext:is(.ext-mp3, .ext-m4a, .ext-ogg, .ext-aac) { background: var(--f-ac-bg); color: var(--f-ac-tx); }
body.soft-ui.fluent .chat-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.soft-ui.fluent .chat-file-link {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
}
body.soft-ui.fluent .chat-file-link:hover { color: var(--text); text-decoration: underline; }
body.soft-ui.fluent .chat-file-meta small { font-size: 11px; color: var(--f-tx3); }
body.soft-ui.fluent .chat-file-dl,
body.soft-ui.fluent .chat-file-card .chat-file-del {
  flex: 0 0 30px; width: 30px; min-height: 30px; height: 30px; margin: 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted);
}
body.soft-ui.fluent .chat-file-dl:hover { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .chat-file-card .chat-file-del:hover:not(:disabled) { background: var(--f-bad-bg); color: var(--danger); }
body.soft-ui.fluent .chat-file-card svg { width: 16px; height: 16px; }
body.soft-ui.fluent .chat-image-button { margin-top: 6px; border-color: var(--border); border-radius: 7px; background: var(--f-sub); }
/* composer */
body.soft-ui.fluent .chat-row {
  margin: 4px 14px 14px; padding: 4px 4px 4px 10px; gap: 6px;
  border: 1px solid var(--border); border-bottom: 2px solid var(--f-bd2); border-radius: 6px; background: var(--bg2); box-shadow: none;
}
body.soft-ui.fluent .chat-row:focus-within { border-bottom-color: var(--accent); }
body.soft-ui.fluent .chat-row #chatInput { height: 32px; padding: 0 4px; font-size: 14px; }
body.soft-ui.fluent .chat-row #chatInput::placeholder { color: var(--f-tx3); }
body.soft-ui.fluent .chat-row #chatInput:focus { box-shadow: none; }
body.soft-ui.fluent .chat-row .chat-send { flex: 0 0 32px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); }
body.soft-ui.fluent .chat-row .chat-send:hover:not(:disabled) { background: var(--hover); color: var(--text); border: 0; }
body.soft-ui.fluent .chat-row .chat-send svg { width: 16px; height: 16px; }
body.soft-ui.fluent .main > .stats-panel { margin: 0; }
body.soft-ui.fluent .screen-bar { padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--f-card); color: var(--text); font-size: 13px; font-weight: 500; }
body.soft-ui.fluent .screen-bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
/* Dock: 开麦 and 频道音量 (split buttons with volume popovers), 屏幕共享 — all labelled, one button style. */
body.soft-ui.fluent .main > .voice-bar { min-height: 64px; margin: 0 -32px; padding: 0 32px; gap: 8px; border-top: 1px solid var(--border); background: transparent; }
body.soft-ui.fluent .voice-dock-start { gap: 8px; flex-wrap: nowrap; }
body.soft-ui.fluent .voice-bar .audio-control-wrap > .talk { min-height: 36px; padding: 0 14px; border-radius: 5px 0 0 5px; font-size: 13px; font-weight: 400; }
body.soft-ui.fluent .voice-bar .audio-control-wrap > .talk.active,
body.soft-ui.fluent .voice-bar .talk.screen-talk.active { background: var(--bg2); color: var(--text); box-shadow: none; animation: none; }
body.soft-ui.fluent .voice-bar .audio-control-wrap:has(.talk.active) > .volume-toggle,
body.soft-ui.fluent .voice-bar .audio-control-wrap:has(.channel-talk.muted) > .volume-toggle { background: var(--bg2); color: var(--muted); border-left-color: var(--border); }
body.soft-ui.fluent .voice-bar .audio-control-wrap > .channel-talk.muted { background: var(--bg2); color: var(--text); }
body.soft-ui.fluent .voice-bar .audio-control-wrap > .volume-toggle { min-height: 36px; min-width: 30px; width: 30px; padding: 0; border-left: 0; border-radius: 0 5px 5px 0; color: var(--muted); }
body.soft-ui.fluent .voice-bar .audio-control-wrap > .volume-toggle svg { width: 12px; height: 12px; }
body.soft-ui.fluent .voice-bar .talk.screen-talk { min-height: 36px; padding: 0 14px; border-radius: 5px; font-size: 13px; font-weight: 400; }
body.soft-ui.fluent .voice-bar .talk.screen-talk svg { width: 16px; height: 16px; }
body.soft-ui.fluent .voice-bar .audio-control-wrap .vol-pop { padding: 14px 16px; border: 0; border-radius: 8px; background: var(--bg2); box-shadow: var(--f-pop-sh); }
body.soft-ui.fluent .voice-bar .audio-control-wrap .vol-pop::after { display: none; }
body.soft-ui.fluent .vol-pop-head { color: var(--text); font-size: 13px; font-weight: 500; }
body.soft-ui.fluent .vol-pop-head .val { color: var(--muted); font-weight: 400; }
body.soft-ui.fluent .soft-volume-caption { border-top-color: var(--border); font-size: 12px; color: var(--f-tx3); }
/* Fluent slider */
body.soft-ui.fluent input[type="range"] { accent-color: var(--accent); cursor: pointer; }
body.soft-ui.fluent input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
/* Network latency: title bar pill + bottom dock */
body.soft-ui.fluent .soft-net-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; margin-right: 4px; border-radius: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .soft-net-pill svg { width: 13px; height: 13px; }
body.soft-ui.fluent .voice-net { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-tx3); white-space: nowrap; }
body.soft-ui.fluent .voice-net svg { width: 14px; height: 14px; }
body.soft-ui.fluent .voice-net b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
body.soft-ui.fluent [data-net-level="good"] :is(b, [data-net-ms]), body.soft-ui.fluent [data-net-level="good"] svg { color: var(--ok); }
body.soft-ui.fluent [data-net-level="fair"] :is(b, [data-net-ms]), body.soft-ui.fluent [data-net-level="fair"] svg { color: var(--warn); }
body.soft-ui.fluent [data-net-level="poor"] :is(b, [data-net-ms]), body.soft-ui.fluent [data-net-level="poor"] svg { color: var(--danger); }

/* Seat extras: clickable avatar, my-volume tag, force-muted */
body.soft-ui.fluent .mic-strip .vm > .vm-avatar { cursor: pointer; }
body.soft-ui.fluent .mic-strip .vm > .vm-avatar:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
body.soft-ui.fluent .mic-strip .vm > .vm-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--accent); }
body.soft-ui.fluent .mic-strip .vm > .vm-gain { position: absolute; top: 6px; right: 24px; z-index: 3; padding: 0 5px; border-radius: 4px; background: var(--f-ac-bg); color: var(--f-ac-tx); font-size: 11px; line-height: 17px; font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .mic-strip .vm.force-muted > .vm-avatar::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; z-index: 4; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bg2); background: var(--danger) center / 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m2 2 20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v3a3 3 0 0 0 5.1 2.1M19 10v2a7 7 0 0 1-.1 1.4M5 10v2a7 7 0 0 0 12 5M12 19v3'/%3E%3C/svg%3E");
}

/* Member card (click an avatar) */
body.soft-ui.fluent .member-card {
  position: fixed; z-index: 120; width: 248px; padding: 4px;
  border-radius: 8px; background: var(--bg2); box-shadow: var(--f-pop-sh); color: var(--text);
  animation: mc-in .15s cubic-bezier(.1, .9, .2, 1);
}
@keyframes mc-in { from { opacity: 0; transform: translateY(6px); } }
body.soft-ui.fluent .member-card:focus { outline: none; }
body.soft-ui.fluent .mc-head { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px; }
body.soft-ui.fluent .mc-avatar {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background-color: #2b2f36; background-image: var(--f-avatar); background-size: cover; background-position: center;
  color: #fff; font-size: 15px; font-weight: 600;
}
body.soft-ui.fluent .mc-avatar[style*="url"] { background-color: transparent; }
body.soft-ui.fluent .mc-info { min-width: 0; }
body.soft-ui.fluent .mc-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.soft-ui.fluent .mc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
body.soft-ui.fluent .mc-name .ti-plate { margin: 0; flex: none; }
body.soft-ui.fluent .mc-info small { display: block; margin-top: 2px; font-size: 12px; color: var(--f-tx3); }
body.soft-ui.fluent .mc-vol { padding: 4px 10px 10px; }
body.soft-ui.fluent .mc-vol label { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
body.soft-ui.fluent .mc-vol output { font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .mc-vol input[type="range"] { width: 100%; }
body.soft-ui.fluent .member-card hr { margin: 4px 0; border: 0; border-top: 1px solid var(--border); }
body.soft-ui.fluent .mc-label { padding: 6px 10px 2px; font-size: 12px; color: var(--f-tx3); }
body.soft-ui.fluent .mc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px;
  border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: 13px; text-align: left;
}
body.soft-ui.fluent .mc-item:hover { background: var(--hover); }
body.soft-ui.fluent .mc-item svg { width: 16px; height: 16px; color: var(--muted); }
body.soft-ui.fluent .mc-item.danger, body.soft-ui.fluent .mc-item.danger svg { color: var(--danger); }
body.soft-ui.fluent .mc-item.danger:hover { background: var(--f-bad-bg); }

/* Dialogs and forms */
body.soft-ui.fluent .modal { background: rgba(0, 0, 0, .28); backdrop-filter: none; }
html[data-theme="gray"] body.soft-ui.fluent .modal { background: rgba(0, 0, 0, .5); }
body.soft-ui.fluent .modal-box { padding: 24px; border: 0; border-radius: 8px; background: var(--bg2); box-shadow: var(--f-pop-sh); }
body.soft-ui.fluent .modal-box.ann-box { width: min(92vw, 560px); max-width: none; padding: 32px; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
body.soft-ui.fluent .ann-box h3 { margin: 0 0 18px; font-size: clamp(22px, 3vw, 28px); font-weight: 650; }
@media (max-width: 520px) { body.soft-ui.fluent .modal-box.ann-box { width: 100%; padding: 26px 22px 22px; } }
body.soft-ui.fluent .modal-box h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
body.soft-ui.fluent .modal-sub { font-size: 13px; color: var(--muted); }
body.soft-ui.fluent .mg-label { font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
body.soft-ui.fluent .modal-btns { gap: 8px; }
body.soft-ui.fluent :is(input[type="text"], input[type="password"], select) {
  min-height: 32px; padding: 5px 10px; font-size: 13px;
  border: 1px solid var(--border); border-bottom: 1px solid var(--f-bd2); border-radius: 5px;
  background: var(--bg2); color: var(--text); box-shadow: none;
}
body.soft-ui.fluent :is(input[type="text"], input[type="password"], select):focus { border-color: var(--border); border-bottom: 2px solid var(--accent); padding-bottom: 4px; box-shadow: none; }
body.soft-ui.fluent .chat-row #chatInput, body.soft-ui.fluent .chat-row #chatInput:focus { border: 0; padding: 0 4px; min-height: 32px; }
/* Settings: Windows-settings layout, nav on the left, stacked setting cards on the right. */
body.soft-ui.fluent .settings-box {
  position: relative; display: grid; grid-template-columns: 208px minmax(0, 1fr);
  width: min(800px, 100%); height: min(600px, calc(100dvh - 48px)); max-height: none;
  padding: 0; overflow: hidden; background: var(--bg);
}
body.soft-ui.fluent .set-side { display: flex; flex-direction: column; min-height: 0; padding: 20px 10px; }
body.soft-ui.fluent .settings-box .set-side h3 { margin: 2px 10px 18px; font-size: 18px; font-weight: 600; }
body.soft-ui.fluent .settings-box .set-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; background: none; }
body.soft-ui.fluent .settings-box .set-nav-btn {
  position: relative; flex: none; justify-content: flex-start; gap: 12px;
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 5px;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 400; text-align: left;
}
body.soft-ui.fluent .settings-box .set-nav-btn svg { width: 16px; height: 16px; color: var(--muted); }
body.soft-ui.fluent .settings-box .set-nav-btn:hover:not(:disabled) { background: var(--hover); border: 0; }
body.soft-ui.fluent .settings-box .set-nav-btn.active,
body.soft-ui.fluent .settings-box .set-nav-btn.active:hover:not(:disabled) { background: var(--f-sel); font-weight: 600; box-shadow: none; }
body.soft-ui.fluent .settings-box .set-nav-btn.active svg { color: var(--accent); }
body.soft-ui.fluent .settings-box .set-nav-btn.active::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px;
  border-radius: 2px; background: var(--accent);
}
body.soft-ui.fluent .set-main { min-width: 0; min-height: 0; padding: 24px 28px 28px; overflow-y: auto; }
body.soft-ui.fluent .settings-box .set-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer;
}
body.soft-ui.fluent .settings-box .set-close:hover { background: var(--hover); color: var(--text); }
body.soft-ui.fluent .settings-box .set-close svg { width: 16px; height: 16px; }
body.soft-ui.fluent .set-title { margin: 0 40px 18px 0; font-size: 24px; font-weight: 600; line-height: 1.25; }
body.soft-ui.fluent .set-caption { margin: -10px 0 16px; font-size: 13px; color: var(--muted); }
body.soft-ui.fluent .set-group-label { margin: 20px 0 8px; font-size: 13px; font-weight: 600; }
body.soft-ui.fluent .set-title + .set-group-label { margin-top: 0; }
body.soft-ui.fluent .set-card {
  margin: 0 0 4px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--f-card);
}
body.soft-ui.fluent .set-row, body.soft-ui.fluent .set-hero { display: flex; align-items: center; gap: 16px; min-height: 40px; }
body.soft-ui.fluent .set-hero { padding: 16px; }
body.soft-ui.fluent .set-hero #avatarPreview { flex: none; cursor: default; }
body.soft-ui.fluent .set-row-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
body.soft-ui.fluent .set-row-title { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
body.soft-ui.fluent .set-row-desc { font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
body.soft-ui.fluent .set-row-ctl { display: flex; flex: none; align-items: center; gap: 8px; }
body.soft-ui.fluent .settings-box .set-row-ctl :is(select, input[type="text"]) { width: 220px; }
body.soft-ui.fluent .set-ver { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.soft-ui.fluent .set-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 14px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); border-bottom-color: var(--f-bd2); border-radius: 5px;
  background: var(--bg2); color: var(--text); font: inherit; font-size: 13px;
  transition: background .12s ease;
}
body.soft-ui.fluent .set-btn:hover { background: var(--f-btn-h); }
body.soft-ui.fluent .set-btn:active { background: var(--f-sub); color: var(--muted); }
body.soft-ui.fluent .set-upload:focus-within { outline: 2px solid var(--text); outline-offset: 1px; }
body.soft-ui.fluent .set-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.soft-ui.fluent .set-expander { padding: 0; }
body.soft-ui.fluent .set-expander > summary {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: 7px;
}
body.soft-ui.fluent .set-expander > summary::-webkit-details-marker { display: none; }
body.soft-ui.fluent .set-expander > summary:hover { background: var(--hover); }
body.soft-ui.fluent .set-chev { flex: none; width: 16px; height: 16px; color: var(--muted); transform: rotate(180deg); transition: transform .15s ease; }
body.soft-ui.fluent .set-expander[open] .set-chev { transform: none; }
body.soft-ui.fluent .set-detail {
  margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--border);
  white-space: pre-line; font-size: 12px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere;
}
body.soft-ui.fluent .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px 12px; }
body.soft-ui.fluent .theme-swatch {
  display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
body.soft-ui.fluent .sw-win {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--border); border-radius: 7px; background: var(--sw-bg);
  transition: box-shadow .12s ease;
}
body.soft-ui.fluent .sw-win i {
  position: absolute; left: 28%; top: 16%; right: -1px; bottom: -1px;
  border: 1px solid var(--sw-line); border-radius: 6px 0 0 0; background: var(--sw-panel);
}
body.soft-ui.fluent .sw-win i::before, body.soft-ui.fluent .sw-win i::after {
  content: ''; position: absolute; left: 12%; height: 7%; border-radius: 3px; background: var(--sw-line);
}
body.soft-ui.fluent .sw-win i::before { top: 44%; width: 62%; }
body.soft-ui.fluent .sw-win i::after { top: 62%; width: 44%; }
body.soft-ui.fluent .sw-win::before {
  content: ''; position: absolute; left: 7%; top: 22%; width: 14%; height: 5%; border-radius: 3px;
  background: var(--sw-line); box-shadow: 0 9px 0 var(--sw-line), 0 18px 0 var(--sw-line);
}
body.soft-ui.fluent .sw-win b {
  position: absolute; left: 34%; top: 28%; width: 26%; height: 9%; border-radius: 3px; background: var(--sw-ac);
}
body.soft-ui.fluent .theme-swatch:hover .sw-win { box-shadow: 0 0 0 1px var(--f-bd2); }
body.soft-ui.fluent .theme-swatch.active .sw-win { box-shadow: 0 0 0 2px var(--accent); }
body.soft-ui.fluent .theme-swatch.active .sw-win::after {
  content: ''; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
body.soft-ui.fluent .theme-swatch.active .sw-name { font-weight: 600; }
body.soft-ui.fluent .theme-swatch:focus-visible { outline: none; }
body.soft-ui.fluent .theme-swatch:focus-visible .sw-win { outline: 2px solid var(--text); outline-offset: 3px; }
body.soft-ui.fluent .val { color: var(--muted); }
body.soft-ui.fluent .fm-list, body.soft-ui.fluent .acct-list { border-radius: 7px; }
body.soft-ui.fluent .fm-row:hover, body.soft-ui.fluent .roster-row:hover { background: var(--hover); }
body.soft-ui.fluent .acct-row { background: var(--f-sub); border-radius: 5px; }
/* Backpack */
body.soft-ui.fluent .bp-tabs { gap: 2px; padding: 2px; border-radius: 6px; background: var(--f-sub); }
body.soft-ui.fluent .bp-tab { min-height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 13px; }
body.soft-ui.fluent .bp-tab:hover:not(:disabled) { background: transparent; color: var(--text); border: 0; }
body.soft-ui.fluent .bp-tab.active { background: var(--bg2); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body.soft-ui.fluent .bp-item { border: 1px solid var(--border); border-radius: 7px; background: var(--f-card); }
body.soft-ui.fluent .bp-item:hover { transform: none; border-color: var(--f-bd2); }
body.soft-ui.fluent .bp-item.equipped { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body.soft-ui.fluent .bp-item button { min-height: 28px; font-size: 12px; padding: 0 12px; }
body.soft-ui.fluent .bp-eq-tag { background: var(--accent); color: #fff; }
body.soft-ui.fluent .switch-box { border: 0; border-radius: 8px; box-shadow: var(--f-pop-sh); }
body.soft-ui.fluent .xfer-panel { border: 0; border-radius: 8px; background: var(--bg2); box-shadow: var(--f-pop-sh); }
body.soft-ui.fluent ::-webkit-scrollbar-thumb { background: var(--f-bd2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
body.soft-ui.fluent ::-webkit-scrollbar-thumb:hover { background: var(--f-tx3); background-clip: padding-box; }

/* Narrow and short windows */
@media (min-width: 701px) and (max-width: 1100px) {
  body.soft-ui.fluent .sidebar { flex-basis: 200px; width: 200px; padding-left: 6px; padding-right: 6px; }
  body.soft-ui.fluent .main { padding: 0 20px; }
  body.soft-ui.fluent .main > .voice-bar { margin: 0 -20px; padding: 0 20px; }
  body.soft-ui.fluent .soft-room-hero #vdRoom { font-size: 22px; }
  body.soft-ui.fluent .soft-room-actions .soft-room-action, body.soft-ui.fluent .soft-room-actions #currentRoomManageBtn { padding: 0 9px; }
  body.soft-ui.fluent .soft-hero-sub > #status { display: none; }
}
@media (min-width: 701px) and (max-height: 760px) {
  body.soft-ui.fluent .soft-room-hero { padding: 16px 0 10px; }
  body.soft-ui.fluent .soft-room-hero #vdRoom { font-size: 22px; }
  body.soft-ui.fluent .mic-head, body.soft-ui.fluent .chat-head { min-height: 44px; }
  body.soft-ui.fluent .main > .voice-bar { min-height: 56px; }
  body.soft-ui.fluent .tree-room { min-height: 32px; }
  body.soft-ui.fluent #softProfileButton { padding: 6px 14px; }
}
@media (max-width: 760px) {
  body.soft-ui.fluent .settings-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: min(640px, calc(100dvh - 30px)); }
  body.soft-ui.fluent .set-side { padding: 14px 12px 0; border-bottom: 1px solid var(--border); }
  body.soft-ui.fluent .settings-box .set-side h3 { margin: 2px 4px 10px; font-size: 16px; }
  body.soft-ui.fluent .settings-box .set-nav { flex-direction: row; flex-wrap: nowrap; gap: 2px; margin-right: 32px; overflow-x: auto; scrollbar-width: none; }
  body.soft-ui.fluent .settings-box .set-nav::-webkit-scrollbar { display: none; }
  body.soft-ui.fluent .settings-box .set-nav-btn { flex: none; gap: 6px; min-height: 34px; padding: 0 8px; border-radius: 5px 5px 0 0; white-space: nowrap; }
  body.soft-ui.fluent .settings-box .set-nav-btn.active,
  body.soft-ui.fluent .settings-box .set-nav-btn.active:hover:not(:disabled) { background: transparent; }
  body.soft-ui.fluent .settings-box .set-nav-btn.active::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 3px; margin: 0; }
  body.soft-ui.fluent .set-main { padding: 18px 14px 20px; }
  body.soft-ui.fluent .settings-box .set-close { top: 8px; right: 8px; }
  body.soft-ui.fluent .set-title { display: none; }
  body.soft-ui.fluent .set-caption { margin-top: 0; }
  body.soft-ui.fluent .set-row { flex-wrap: wrap; gap: 10px; }
  body.soft-ui.fluent .set-row .set-row-ctl { flex: 1 1 100%; }
  body.soft-ui.fluent .settings-box .set-row-ctl :is(select, input[type="text"]) { flex: 1; width: auto; }
  body.soft-ui.fluent .set-hero { flex-wrap: wrap; }
  body.soft-ui.fluent .set-hero .set-row-text { flex: 1 1 0; }
  body.soft-ui.fluent .set-hero .set-row-ctl { flex: 1 1 100%; }
  body.soft-ui.fluent .set-hero .set-btn { flex: 1; }
  body.soft-ui.fluent .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.soft-ui.fluent .settings-box { height: auto; max-height: 88dvh; border-radius: 12px 12px 0 0; }
  body.soft-ui.fluent .sidebar { padding: 8px 10px 12px; }
  body.soft-ui.fluent .main { padding: 0 14px 20px; border-right: 1px solid var(--border); border-radius: 16px 16px 0 0; }
  body.soft-ui.fluent .soft-room-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sub" "actions"; row-gap: 8px; padding: 18px 0 12px; }
  body.soft-ui.fluent .soft-room-hero #vdRoom { font-size: 21px; }
  body.soft-ui.fluent .soft-room-actions { flex-wrap: wrap; justify-content: flex-start; }
  body.soft-ui.fluent .main > .chat-panel { flex: 0 0 auto; height: 340px; }
  body.soft-ui.fluent .main > .voice-bar { margin: 0 -14px; padding: 12px 14px; flex-wrap: wrap; }
  body.soft-ui.fluent .voice-dock-start { flex-wrap: wrap; }
  body.soft-ui.fluent .soft-icp { position: static !important; text-align: center !important; padding: 6px 12px 12px; }
}