:root {
  color-scheme: light;
  font-family: Inter, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: #17324b;
  background: #071a32;
  --page: #071a32; --panel: #edf7ff; --surface: #fff; --line: #cfe3f1;
  --line-strong: #b9d7e9; --ink: #15334f; --muted: #728ba0; --blue: #087ca8;
  --danger: #e34d6a; --success: #18a674; --shadow: 0 18px 54px rgba(0, 12, 32, .25);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: radial-gradient(circle at 8% 0, rgba(25, 129, 174, .24), transparent 32%), radial-gradient(circle at 92% 100%, rgba(22, 93, 142, .22), transparent 34%), var(--page);
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { transition: transform .1s ease, filter .1s ease, opacity .1s ease, background-color .15s ease, border-color .15s ease; }
button:not(:disabled):active, [role="button"]:active { transform: scale(.985); filter: brightness(.96); }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]:not(.account-row):not(.conversation-row)::before { content: ""; width: 11px; height: 11px; margin-right: 6px; display: inline-block; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: -2px; animation: interaction-spin .7s linear infinite; }
@keyframes interaction-spin { to { transform: rotate(360deg); } }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(24, 177, 202, .45); outline-offset: 1px; }
.app-shell { width: calc(100vw - 28px); height: calc(100dvh - 28px); margin: 14px; overflow: hidden; display: grid; grid-template-columns: 276px 304px minmax(480px, 1fr); gap: 0; border: 1px solid rgba(177, 211, 230, .88); border-radius: 22px; background: #edf7fd; box-shadow: 0 22px 70px rgba(0,12,32,.34); }
.panel { min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(160deg, rgba(248, 253, 255, .99), rgba(231, 245, 253, .99)); border: 0; border-radius: 0; box-shadow: none; }
.accounts, .conversations { border-right: 1px solid var(--line-strong); }
.brand, .toolbar { height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #12283d, #071526); border-radius: 12px; box-shadow: 3px 2px 0 #1bd0d2, -2px -1px 0 #fe416a; font-size: 15px; font-weight: 900; }
.brand-copy, .toolbar-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.brand-copy strong, .toolbar-copy strong { overflow: hidden; color: #183b55; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small, .toolbar-copy small { overflow: hidden; color: #6c8597; font-size: 11px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.round-button { width: 32px; height: 32px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: #62839b; background: rgba(255,255,255,.68); cursor: pointer; letter-spacing: 1px; }
.round-button:hover:not(:disabled) { color: var(--blue); border-color: #99ccdf; background: #fff; }
.round-button:disabled { opacity: .38; cursor: default; }
.field-search { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: #82a1b5; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 10px; transition: .18s ease; }
.field-search:focus-within { background: #fff; border-color: #75bbd6; box-shadow: 0 0 0 3px rgba(40,161,196,.1); }
.field-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.field-search input::placeholder, textarea::placeholder { color: #92a9ba; }
.list { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b8d3e3 transparent; }
.list::-webkit-scrollbar, .messages::-webkit-scrollbar { width: 6px; }
.list::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb { background: #b8d3e3; border-radius: 9px; }
.empty-state { min-height: 210px; height: 100%; padding: 30px 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: var(--muted); }
.empty-state .empty-icon { width: 58px; height: 58px; margin-bottom: 13px; display: grid; place-items: center; border: 1px solid #cbe1ef; border-radius: 18px; color: #5c94b1; background: linear-gradient(145deg, #fff, #ddebf5); box-shadow: 0 10px 24px rgba(57,109,137,.1); font-size: 22px; }
.empty-state strong { color: #44647b; font-size: 14px; }
.empty-state p { max-width: 290px; margin: 7px 0 0; font-size: 12px; line-height: 1.65; }
.empty-state.error .empty-icon { color: var(--danger); background: #fff2f5; border-color: #f2c8d1; }
.empty-state.error strong { color: #b73550; }
.empty-state button { height: 32px; margin-top: 14px; padding: 0 16px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); cursor: pointer; font-size: 12px; }
.avatar-frame { position: relative; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(157,193,212,.5); border-radius: 12px; background: #d8e9f3; }
.avatar-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.empty-avatar::after { content: ""; width: 36%; height: 36%; border: 2px solid #7ba0b5; border-radius: 50%; box-shadow: 0 10px 0 4px #7ba0b5; opacity: .55; }
.avatar-frame.avatar-broken img { display: none; }
.avatar-frame.avatar-broken::after { content: "!"; color: #967087; font-size: 14px; font-weight: 800; box-shadow: none; border: 0; }
.skeleton-list { padding: 4px 0; }
.skeleton-row { height: 66px; padding: 11px 14px; display: flex; gap: 10px; align-items: center; }
.skeleton-avatar, .skeleton-line { background: linear-gradient(90deg, #dcecf5 20%, #f7fcff 45%, #dcecf5 70%); background-size: 240% 100%; animation: skeleton 1.25s ease infinite; }
.skeleton-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; }
.skeleton-copy { flex: 1; display: grid; gap: 8px; }
.skeleton-line { height: 8px; border-radius: 99px; }
.skeleton-line:last-child { width: 66%; }
@keyframes skeleton { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.back-button { display: none; width: 28px; height: 34px; padding: 0; border: 0; color: #496b82; background: transparent; font-size: 28px; cursor: pointer; }
.connection-state { height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; color: #6c8799; background: rgba(255,255,255,.72); font-size: 10px; white-space: nowrap; }
.connection-state i { width: 6px; height: 6px; border-radius: 50%; background: #9db1bf; }
.connection-state.online { color: #13805e; background: #dff7ed; }
.connection-state.online i { background: #18a674; box-shadow: 0 0 0 3px rgba(24,166,116,.12); }
.connection-state.error { color: #b63f57; background: #ffe8ed; }
.connection-state.error i { background: #e34d6a; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; max-width: min(440px,calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; color: #fff; background: rgba(4,24,43,.92); box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .2s ease; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.context-menu { position: fixed; z-index: 40; width: 210px; padding: 7px; border: 1px solid #bcd6e5; border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 16px 46px rgba(17,51,73,.28); backdrop-filter: blur(12px); }
.context-menu[hidden] { display: none; }
.context-menu header { padding: 6px 9px 8px; overflow: hidden; color: #6d8798; border-bottom: 1px solid #e0edf4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.context-menu button { width: 100%; height: 34px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 7px; color: #31536a; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
.context-menu button:hover, .context-menu button:focus { color: #0c7196; background: #e7f4fa; outline: 0; }
.context-menu button.danger { color: #c94860; }
.context-menu button.danger:hover { color: #fff; background: #d9546c; }
.context-separator { height: 1px; margin: 5px 4px; background: #e2edf3; }
.context-submenu-wrap { position: relative; }
.context-submenu { position: absolute; top: -7px; left: calc(100% + 6px); width: 190px; max-height: 260px; overflow-y: auto; padding: 7px; display: none; border: 1px solid #bcd6e5; border-radius: 11px; background: rgba(255,255,255,.99); box-shadow: 0 14px 40px rgba(17,51,73,.24); }
.context-submenu-wrap:hover .context-submenu, .context-submenu-wrap:focus-within .context-submenu, .context-submenu-wrap.open .context-submenu { display: block; }
@media (max-width: 1040px) and (min-width: 761px) { .app-shell { grid-template-columns: 246px 286px minmax(390px,1fr); margin: 8px; width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 18px; } }
@media (max-width: 760px) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; width: 100%; min-height: 0; background: var(--page); }
  .app-shell { position: fixed; top: var(--mobile-viewport-offset-top, 0px); left: 0; width: 100vw; height: var(--mobile-viewport-height, 100dvh); margin: 0; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .app-shell > .panel { display: none; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app-shell > .accounts { display: flex; }
  .app-shell.mobile-conversations > .accounts, .app-shell.mobile-chat > .accounts { display: none; }
  .app-shell.mobile-conversations > .conversations { display: flex; }
  .app-shell.mobile-chat > .chat { display: flex; }
  .back-button { display: grid; place-items: center; }
  .brand, .toolbar { padding-left: max(14px,env(safe-area-inset-left)); padding-right: max(14px,env(safe-area-inset-right)); }
  .toast { bottom: max(22px,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }