:root {
  --purple: #6554d8;
  --ink: #262638;
  --muted: #737589;
  --line: #e6e7ef;
  --green: #298966;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
}
body, .app-shell { background: #f2f3f8; color: var(--ink); }
.rail { width: 80px; background: #242237; border: 0; padding: 25px 0 20px; }
.rail .brand-icon { width: 43px; height: 43px; border-radius: 14px; font-size: 29px; background: #8070ed; box-shadow: 0 5px 17px #15122335; }
.rail-links { gap: 13px; margin-top: 46px; }
.rail-button { width: 56px; height: 59px; border-radius: 12px; color: #aaa6c1; gap: 7px; }
.rail-button span { font-size: 11px; }
.rail-button.active { background: #413957; color: #f5f2ff; box-shadow: inset 3px 0 #ac9af7; }
.rail-button:hover { background: #363147; color: #fff; }
.rail-bottom .version { font-size: 8px; color: #aaa3bf; }
.rail-bottom .avatar { border: 2px solid #534965; }
.topbar { height: 83px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line); }
.title-group { gap: 17px; }
.title-group h1 { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.top-subtitle { font-size: 12px; color: #7c7e8f; }
.beta { font-size: 9px; padding: 4px 6px; color: #70609d; background: #f0ecf9; }
.top-actions { gap: 14px; font-size: 12px; }
.connection { color: #3d876b; font-size: 11px; }
.refresh-button { border: 1px solid #e3e4ed; background: #fff; padding: 9px 12px; border-radius: 8px; color: #65687a; font-size: 11px; }
.refresh-button:hover { background: #f6f3fc; border-color: #cfc6e8; }
.today { font-size: 11px; color: #7c7e8f; }
.desk { grid-template-columns: 272px 268px minmax(0,1fr); margin: 19px 22px 0; border: 1px solid #dfe1eb; border-radius: 15px; box-shadow: 0 5px 23px #29284508; }
.session-panel { padding: 23px 17px 0; background: #fff; }
.roles-panel { padding: 24px 18px 0; background: #f8f9fc; }
.operator-card { gap: 11px; }
.operator-card strong { font-size: 15px; color: #2d2e40; }
.operator-card > div > span { font-size: 11px; color: #828494; }
.operator-badge { font-size: 10px; color: #766493; background: #f6f2fc; border-color: #e8e0f2; }
.avatar { border-radius: 14px; width: 44px; height: 44px; font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.avatar.large { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
.avatar.small { width: 35px; height: 35px; border-radius: 12px; }
.avatar.violet { background: linear-gradient(150deg,#dcd6fb,#b9a9e5); color: #544071; }
.avatar.rose { background: linear-gradient(150deg,#f6dbe4,#e1b5c5); color: #864d69; }
.avatar.green { background: linear-gradient(150deg,#d6ede4,#b4d7c8); color: #3e7662; }
.avatar.amber { background: linear-gradient(150deg,#f7e7cf,#e2c6a4); color: #896237; }
.avatar.blue { background: linear-gradient(150deg,#dbe6fa,#b7c9e6); color: #4d6588; }
.status-switch { padding: 4px; border: 1px solid #ebebf1; background: #f5f5f8; margin-top: 19px; }
.status-switch button { padding: 8px 3px; font-size: 10px; color: #7e8091; }
.status-switch .selected { color: #2a8564; box-shadow: 0 2px 5px #3030460c; }
.app-selector { margin-top: 13px; padding: 11px 10px; border-color: #e8e9f0; background: #fafafd; }
.app-selector span { font-size: 10px; color: #848596; }
.app-selector select { font-size: 12px; }
.stats { padding: 20px 0; margin-bottom: 20px; }
.stats span { font-size: 11px; color: #77798c; }
.stats strong { font-family: system-ui,sans-serif; font-size: 29px; line-height: 1.1; font-weight: 600; letter-spacing: -1px; color: #292b3e; }
.stats strong.purple-text { color: #7760bd; }
.stats small { color: #858699; }
.sessions-heading h2 { font-size: 14px; font-weight: 700; }
.sessions-heading > span { font-size: 11px; color: #806ba7; }
.search-box { padding: 11px; border: 1px solid #e6e7ef; border-radius: 8px; background: #fff; color: #9698aa; }
.search-box input { font-size: 12px; color: #505267; }
.search-box input::placeholder { color: #9496a7; }
.filter-row { gap: 6px; margin-top: 12px; }
.filter-row button { padding: 6px 12px; font-size: 11px; color: #7d7e8d; }
.filter-row .selected { background: #efebf8; color: #725e9d; }
.session-tabs { margin-top: 8px; gap: 23px; }
.session-tabs button { padding: 15px 0; font-size: 12px; color: #8b899a; }
.session-tabs button.selected { color: #7861aa; }
.session-tabs button.selected:after { background: #8d74bd; height: 2px; }
.session-tabs span { font-size: 10px; }
.conversation-item { padding: 16px 10px; gap: 10px; border-radius: 10px; margin: 3px 0; }
.conversation-item.selected { background: #f1edf9; box-shadow: none; }
.conversation-item.selected:before { top: 23px; bottom: 23px; width: 3px; background: #9074c0; }
.conversation-copy strong { color: #3d3b51; font-size: 13px; font-weight: 500; }
.conversation-copy p { font-size: 11px; color: #858192; line-height: 1.5; margin-top: 6px; }
.conversation-copy time { font-size: 9px; color: #9893a6; }
.vip-mini { font-size: 8px; background: #f8edda; color: #a88148; }
.unread-badge { background: #9a83ca; min-width: 18px; height: 18px; font-size: 9px; border-radius: 6px; }
.panel-footnote { padding: 15px 0; font-size: 10px; color: #9995a5; }
.section-heading { margin-bottom: 17px; }
.section-heading .eyebrow { font-size: 8px; letter-spacing: 1.8px; color: #9590a5; }
.section-heading h2 { font-size: 17px; font-weight: 700; margin-top: 8px; }
.section-heading h2 span { font-size: 10px; background: #ede9f6; color: #8b76aa; }
.role-list { margin-top: 15px; }
.role-card { background: #fff; border: 1px solid #e5e5ee; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 5px #302a4503; overflow: hidden; }
.role-card:hover { border-color: #c9bcdf; box-shadow: 0 5px 14px #59447c09; }
.role-card.selected { background: #f9f6ff; border-color: #bca8db; box-shadow: inset 3px 0 #a386c8,0 4px 14px #73608606; }
.role-select { padding: 16px; }
.role-state { color: #66917b; background: #f0f7f2; border-color: #e2ece5; font-size: 9px; padding: 4px 6px; }
.role-state i { background: #78a286; }
.role-title { margin-top: 12px; }
.role-title h3 { font-family: system-ui,sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.2px; color: #393448; }
.selected-check { width: 16px; height: 16px; background: #aa8ecb; }
.role-select > p { font-size: 11px; line-height: 1.85; color: #8c8298; margin: 6px 0 12px; min-height: 20px; }
.role-meta { font-size: 9px; border-color: #eee8f3; padding-top: 10px; color: #9c90a9; }
.role-meta span:first-child { max-width: 125px; }
.role-edit { left: auto; top: 56px; right: 14px; width: 27px; height: 27px; padding: 7px; color: #a18bac; border-radius: 6px; background: transparent; }
.role-edit:hover { background: #ece3f5; }
.role-edit svg { width: 13px; height: 13px; }
.add-role { padding: 13px; font-size: 12px; background: #faf7fe; border-color: #cbbadd; color: #9473b0; }
.add-role-wrap { background: #f8f9fc; }
.role-tip { font-size: 9px; padding: 16px 0; color: #a297ad; }
.chat-heading { padding: 24px 26px 18px; gap: 12px; }
.chat-heading h2 { font-family: system-ui,"Microsoft YaHei",sans-serif; font-size: 20px; font-weight: 650; letter-spacing: -.4px; color: #302b3e; }
.chat-heading p { font-size: 11px; color: #8f8699; margin-top: 7px; }
.vip-label { font-size: 9px; padding: 4px 7px; color: #ae8751; }
.chat-heading-actions { gap: 8px; }
.identity { font-size: 10px; padding: 8px 10px; color: #9674af; background: #f8f2fc; border-color: #eee2f4; max-width: 220px; }
.icon-button { width: 33px; height: 33px; color: #928699; border: 1px solid transparent; }
.icon-button:hover { border-color: #e8deef; background: #f8f1fb; color: #946aa9; }
.user-summary { padding: 0 26px 18px; gap: 22px; font-size: 10px; color: #a195a9; border-color: #ece6f0; }
.user-summary b { color: #82778e; margin-left: 7px; }
.status-pill { font-size: 9px; padding: 5px 7px; background: #f0f7f0; color: #789d7a; }
.message-area { padding: 23px 28px 27px; background: #fcfaff; }
.day-separator { color: #ada0b8; font-size: 10px; margin: 4px 0 28px; }
.day-separator:before,.day-separator:after { width: 53px; background: #eee4f3; }
.message-row { gap: 11px; margin-bottom: 28px; }
.message-author { font-size: 11px; color: #9a86aa; margin-bottom: 8px; }
.message-author small { font-size: 8px; color: #ae89c1; background: #f2e5f8; }
.message-content { max-width: 78%; }
.bubble { padding: 12px 16px; font-size: 13px; line-height: 1.9; border: 1px solid #e8dbef; background: #fff; border-radius: 3px 12px 12px 12px; box-shadow: 0 3px 9px #6b3e8d04; }
.own .bubble { background: #eae0f5; border-color: #deceee; color: #65507d; border-radius: 12px 3px 12px 12px; }
.message-time { font-size: 9px; color: #b1a0c0; gap: 5px; }
.message-time .read { color: #9877b4; }
.media-bubble { padding: 6px; }
.composer { padding: 17px 26px 19px; border-color: #ece3f1; background: #fff; }
.composer-toolbar { margin-bottom: 5px; }
.toolbar-left { gap: 17px; }
.toolbar-left button { font-size: 11px; color: #9c86ab; }
.toolbar-left button:hover { color: #956caf; }
.composer-role { font-size: 10px; color: #b08bbf; }
.composer > textarea { min-height: 77px; height: 77px; font-size: 13px; line-height: 1.8; }
.composer > textarea::placeholder { color: #b6a4c3; }
.composer-bottom > span { color: #b2a0bf; font-size: 10px; }
.send-button { padding: 11px 19px; font-size: 12px; border-radius: 8px; background: #9a7dc0; box-shadow: 0 4px 9px #9f7abc1b; }
.send-button:hover:not(:disabled) { background: #8769ad; }
.send-button:disabled { background: #bcabd0; opacity: .65; }
.workspace-footer { padding: 12px 25px; font-size: 9px; color: #a397ae; }
.profile-drawer { border-color: #e5d8ed; box-shadow: 0 15px 40px #77518b21; }
.profile-drawer p { color: #8e7c9d; font-size: 11px; }
.modal { border: 1px solid #e4d9ed; border-radius: 16px; padding: 27px; box-shadow: 0 25px 80px #4a315e30; }
.modal::backdrop { background: #30223960; backdrop-filter: blur(4px); }
.modal h2 { font-size: 21px; color: #4e3d61; }
.modal > .muted { font-size: 12px; color: #a08aaa; }
.modal form > label { font-size: 12px; color: #84708f; }
.modal input,.modal textarea,.modal select { color: #675174; border-color: #e4d9ed; }
.login-story { background: #f1edf8; padding: 45px 54px; }
.story-body h1 { font-size: 44px; line-height: 1.5; letter-spacing: -.8px; color: #57416c; }
.story-body > p { font-size: 14px; color: #9a84aa; }
.story-card { transform: none; border: 1px solid #e4d8f0; background: #ffffffc9; box-shadow: 0 10px 30px #795a9510; padding: 21px; border-radius: 14px; }
.story-tags { gap: 17px; font-size: 11px; color: #ac91bb; }
.login-form h2 { color: #473151; font-size: 30px; }
.login-form > .muted { color: #ae94b6; }
.login-form input { border-color: #e5d9e9; padding: 13px; }
.login-submit { background: #9272af; border-radius: 9px; }
.demo-box { border-color: #eadced; background: #faf5fc; }
@media (min-width:1600px) {
  .desk { grid-template-columns: 295px 294px minmax(0,1fr); margin: 22px 27px 0; }
  .chat-heading { padding: 26px 34px 18px; }
  .user-summary { padding: 0 34px 19px; }
  .message-area { padding: 27px 38px; }
  .composer { padding: 19px 34px; }
  .bubble { font-size: 14px; }
}
@media (max-width:1250px) {
  .desk { grid-template-columns: 244px 226px minmax(0,1fr); margin: 14px 14px 0; }
  .rail { width: 66px; }
  .topbar { height: 73px; padding: 0 22px; }
  .session-panel { padding: 19px 14px 0; }
  .roles-panel { padding: 20px 14px 0; }
  .operator-card strong { font-size: 13px; }
  .operator-badge { display: none; }
  .role-select { padding: 14px; }
  .role-select > p { font-size: 10px; }
  .role-meta { font-size: 8px; }
  .role-edit { right: 12px; left: auto; top: 51px; }
  .chat-heading { padding: 21px 20px 16px; }
  .chat-heading h2 { font-size: 18px; }
  .user-summary { padding: 0 20px 16px; gap: 14px; }
  .message-area { padding: 21px; }
  .composer { padding: 16px 20px; }
  .identity { display: none; }
  .composer-role { display: none; }
}
@media (max-width:1000px) {
  .desk { grid-template-columns: 213px 196px minmax(0,1fr); margin: 10px 10px 0; }
  .rail { width: 59px; }
  .rail-button { width: 46px; }
  .role-select { padding: 13px; }
  .role-select > p { font-size: 10px; }
  .role-title h3 { font-size: 15px; }
  .role-card-top > .unread-badge { position: static; }
  .role-state { font-size: 8px; }
  .role-card-top { gap: 4px; }
  .role-meta span:first-child { max-width: 88px; }
  .conversation-copy strong { font-size: 12px; }
  .status-switch button { font-size: 9px; }
  .message-content { max-width: 80%; }
  .composer-bottom > span { font-size: 9px; }
  .toolbar-left { gap: 12px; }
}
@media (max-width:760px) {
  .rail { display: none; }
  .topbar { height: 68px; padding: 0 17px; }
  .title-group h1 { font-size: 18px; }
  .connection { font-size: 9px; }
  .refresh-button { padding: 7px; }
  .desk { display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .session-panel { padding: 21px 20px 0; }
  .roles-panel { padding: 23px 20px 0; }
  .mobile-tabs { gap: 20px; }
  .mobile-tabs button { font-size: 12px; padding: 12px 9px; }
  .mobile-tabs .selected { color: #8665a0; border-color: #aa8aba; }
  .role-list { gap: 12px; }
  .role-card { margin-bottom: 0; }
  .role-meta { font-size: 9px; }
  .role-edit { top: 53px; right: 11px; }
  .role-card-top > .unread-badge { position: absolute; top: 49px; right: 14px; }
  .role-select { padding: 16px; }
  .operator-badge { display: inline; }
  .operator-card strong { font-size: 15px; }
  .conversation-copy strong { font-size: 13px; }
  .status-switch button { font-size: 11px; }
  .chat-heading { padding: 17px 17px 14px; }
  .chat-heading h2 { font-size: 18px; }
  .user-summary { padding: 0 17px 13px; }
  .message-area { padding: 19px 16px; }
  .bubble { font-size: 13px; padding: 11px 13px; }
  .message-row { gap: 9px; }
  .composer { padding: 13px 16px; }
  .composer > textarea { height: 68px; min-height: 68px; }
  .toolbar-left { gap: 17px; }
  .send-button { padding: 10px 16px; }
  .workspace-footer { padding: 9px 13px; font-size: 8px; }
  .login-story { padding: 24px; }
  .login-panel { padding: 35px 25px; }
}
@media (max-width:360px) {
  .role-list { grid-template-columns: 1fr; }
  .toolbar-left { gap: 10px; }
  .top-actions .refresh-button { display: none; }
}