:root { --admin-ink: #172a34; --admin-muted: #687d87; --admin-line: #dfe7e9; --admin-accent: #315f70; --admin-surface: #f5f8f8; --admin-heading-size: 16px; }
/* Preserve the admin layout if the shared prototype stylesheet cannot load. */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; color: var(--admin-ink); background: #edf2f3; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workspace[hidden], .login-panel[hidden] { display: none; }
.auth-check { min-height: 100dvh; display: grid; place-items: center; color: #687d87; font-size: 14px; }
.auth-check[hidden] { display: none; }
.login-panel { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #edf2f3; }
.login-card { width: min(100%, 430px); padding: 42px; background: #fff; border: 1px solid var(--admin-line); box-shadow: 0 18px 54px rgb(28 54 67 / 6%); }
.login-brand { display: flex; align-items: center; gap: 12px; color: var(--admin-ink); font-size: 16px; }
.login-intro { margin: 30px 0 24px; }
.login-intro h1 { margin: 0; font-size: 18px; }
.login-intro p { margin: 9px 0 0; color: var(--admin-muted); font-size: 13px; }
.login-card form { display: grid; gap: 10px; }
.login-card label, .account-dialog label { font-size: 13px; font-weight: 600; }
.login-card input, .account-dialog input { min-width: 0; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #d2dfe2; border-radius: 4px; background: white; color: var(--admin-ink); font: inherit; }
.login-card button[type="submit"] { min-height: 46px; border: 0; border-radius: 4px; background: #203f4e; color: white; font: inherit; }
.login-card button[type="submit"] { margin-top: 12px; font-weight: 600; }
.login-card button:disabled, .send-button:disabled { opacity: .55; }
.password-field { display: flex; border: 1px solid #d2dfe2; border-radius: 4px; background: white; }
.password-field:focus-within { border-color: #51899d; }
.password-field input { border: 0; background: transparent; }
.password-field button { min-width: 58px; border: 0; background: transparent; color: var(--admin-accent); font: inherit; }
#login-error, #password-error, #workspace-status { color: #a34640; font-size: 13px; }
#login-error:empty, #password-error:empty, #workspace-status:empty { display: none; }
#workspace-status { margin: 0 24px 14px; }
.workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; }
.workspace-main { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.sidebar { min-height: 0; overflow-y: auto; padding: 28px 16px; background: #142832; }
.workspace-brand { gap: 11px; padding: 0 7px 27px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.workspace-brand strong { font-family: var(--font), sans-serif; font-size: 16px; }
.workspace-brand span { margin-top: 5px; color: #a2b5bd; }
.sidebar-section { margin: 30px 11px 12px; color: #91a9b3; }
.workspace-nav { gap: 6px; }
.workspace-nav a { text-decoration: none; }
.nav-item { min-height: 46px; gap: 13px; padding: 11px; border-radius: 5px; color: #c2d1d6; }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav-item.is-active { background: #294655; color: white; }
.nav-item:disabled { color: #7e939d; }
.workspace-header { flex-shrink: 0; min-height: 76px; gap: 16px; padding: 14px 28px; border-color: var(--admin-line); background: white; }
.workspace-label { color: #526d79; font-size: 13px; font-weight: 600; }
.header-team[hidden] { display: none; }
.team-select select { min-width: 145px; padding: 2px 22px 2px 0; color: var(--admin-ink); font-weight: 600; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 4px; background: transparent; color: #526d79; font: inherit; }
.quiet-button:hover { background: #f0f5f6; color: #264d5e; }
.quiet-button svg { width: 17px; height: 17px; }
.work-area { flex: 1; min-height: 0; overflow: hidden; grid-template-columns: minmax(220px, 270px) minmax(340px, 1fr) minmax(180px, 220px); }
.conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 25px 16px; border-color: var(--admin-line); background: #f8fafa; }
.list-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 16px; }
.list-heading h1 { margin: 0; font-size: var(--admin-heading-size); letter-spacing: 0; }
.list-heading > svg { width: 21px; height: 21px; color: #91aab4; }
.reference-search { display: flex; gap: 6px; margin: 0 0 12px; }
.reference-search input { min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid #d2dfe2; border-radius: 4px; font: inherit; font-size: 12px; }
.reference-search button { padding: 8px; border: 1px solid #d2dfe2; border-radius: 4px; background: #fff; color: var(--admin-ink); font: inherit; font-size: 12px; }
.reference-search button[hidden] { display: none; }
.conversation-item { min-height: 54px; padding: 12px 13px; border-radius: 5px; color: #405966; overflow-wrap: anywhere; }
.conversation-item.has-unread { background: #e9f2f4; color: #173d4f; font-weight: 600; }
.conversation-item .unread-count { float: right; min-width: 22px; margin-left: 8px; padding: 2px 6px; border-radius: 12px; background: #bf4b42; color: white; text-align: center; font-size: 11px; line-height: 18px; }
.inbox-alert { margin: 0 0 12px; padding: 9px 10px; border-left: 3px solid #3b7889; background: #e9f2f4; color: #244a5b; font-size: 12px; }
.inbox-alert[hidden] { display: none; }
.conversation-item.is-active { background: #e6f0f1; color: #214f61; font-weight: 600; }
.conversation-paging { display: flex; gap: 14px; }
.conversation-paging button, .message-history button { min-height: 40px; padding: 8px 0; border: 0; color: var(--admin-accent); background: transparent; font: inherit; font-size: 12px; }
.conversation-panel { min-height: 0; overflow-x: hidden; overflow-y: auto; }
.conversation-tabs { min-height: 54px; padding: 8px 16px 0; border-color: var(--admin-line); background: #f7f9f9; }
.conversation-tab { min-height: 45px; color: #617982; }
.conversation-tab-wrap { display: flex; flex: 0 0 auto; align-items: center; }
.conversation-tab-close { display: grid; width: 26px; height: 32px; place-items: center; border: 0; background: transparent; color: #617982; font-size: 18px; }
.conversation-tab[aria-selected="true"] { color: #234f61; border-color: var(--admin-line); }
.conversation-heading { display: flex; align-items: center; gap: 13px; padding: 22px 26px; border-color: #eaf0f1; }
.message-file { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; color: inherit; overflow-wrap: anywhere; text-underline-offset: 3px; }
.message-file img { display: block; width: auto; height: auto; max-width: min(100%, 220px); max-height: 180px; object-fit: contain; border-radius: 4px; }
.message.is-own .message-file { color: #fff; }
.heading-symbol, .context-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 8px; background: #edf4f5; color: #416f80; }
.heading-symbol svg, .context-icon svg { width: 20px; height: 20px; }
.conversation-heading h2 { font-size: 16px; letter-spacing: 0; }
.conversation-heading p { margin-top: 6px; color: #91a1a8; }
.message-history { display: flex; gap: 16px; padding: 0 26px; }
.message-area { display: flex; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; overflow-y: auto; overscroll-behavior: contain; padding: 24px 26px; }
.empty-message { margin: auto; color: #94a7af; text-align: center; }
.message { max-width: min(75%, 640px); padding: 13px 16px; border-radius: 10px 10px 10px 3px; background: #eff4f5; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.message.is-own { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: #244a5b; color: white; }
.message-meta { display: block; margin-top: 6px; font-size: 11px; opacity: .7; }
.composer { flex-shrink: 0; margin: 16px 24px 24px; border-color: #dbe5e7; box-shadow: 0 6px 22px rgb(32 66 78 / 4%); }
.composer textarea { min-height: 90px; max-height: 22dvh; }
.attachments { max-height: 18dvh; overflow-y: auto; }
.composer-actions { border-top: 1px solid #edf2f3; }
.composer-hint { color: #8a9da4; }
.send-button { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 16px; }
.send-button svg { width: 16px; height: 16px; }
.send-button:not(:disabled) { background: #244a5b; color: white; }
.context-panel { min-height: 0; overflow-y: auto; padding: 29px 20px; border-color: var(--admin-line); background: #f8fafa; }
.context-panel h2 { margin-top: 15px; font-size: 15px; }
.context-panel p { overflow-wrap: anywhere; }
.context-panel h3 { color: #80929a; }
.account-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px; border: 1px solid var(--admin-line); border-radius: 6px; color: var(--admin-ink); }
.account-dialog::backdrop { background: rgb(16 32 40 / 55%); }
.account-dialog form { display: grid; gap: 10px; }
.account-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.account-dialog p { margin: 0 0 8px; color: var(--admin-muted); }
.work-area[hidden], .logs-page[hidden], .filter-field[hidden] { display: none; }
.logs-page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px clamp(20px, 4vw, 56px) 36px; background: #f4f7f7; }
.logs-heading, .logs-content { width: min(100%, 1120px); margin-inline: auto; }
.logs-heading { display: flex; align-items: center; flex-wrap: wrap; column-gap: 32px; border-bottom: 1px solid var(--admin-line); }
.logs-heading h1 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: var(--admin-heading-size); white-space: nowrap; }
.logs-heading h1 svg { width: 18px; height: 18px; color: var(--admin-accent); }
.logs-tabs { display: flex; gap: 24px; }
.logs-tabs button { min-height: 46px; padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--admin-muted); font: inherit; }
.logs-tabs button[aria-selected="true"] { border-color: #315f70; color: var(--admin-ink); font-weight: 600; }
.logs-content { margin-top: 16px; }
.activity-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 20px; border: 1px solid var(--admin-line); background: white; }
.filter-field { display: grid; gap: 8px; min-width: 0; flex: 1 1 220px; }
.filter-field label { font-size: 12px; font-weight: 600; }
.activity-filters input, .activity-filters select { width: 100%; min-height: 42px; min-width: 0; padding: 9px 12px; border: 1px solid #d3dfe3; background: white; color: var(--admin-ink); font: inherit; }
.activity-filters button, .logs-pagination button { min-height: 42px; padding: 8px 16px; border: 1px solid #d3dfe3; background: white; color: var(--admin-ink); font: inherit; }
.activity-filters button[type="submit"] { border-color: #203f4e; background: #203f4e; color: white; }
.activity-list { margin-top: 14px; border: 1px solid var(--admin-line); background: white; }
.activity-list.is-state { padding: 24px 20px; color: var(--admin-muted); }
.activity-list:empty { display: none; }
.log-entry { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(145px, auto); gap: 6px 18px; padding: 18px 20px; border-bottom: 1px solid #edf2f3; overflow-wrap: anywhere; }
.log-entry:last-child { border-bottom: 0; }
.log-entry strong { font-size: 14px; }
.log-entry p, .log-entry time, .log-entry small { margin: 0; color: var(--admin-muted); font-size: 12px; }
.log-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 3px; background: #edf1f2; color: #657a83; }
.log-badge.is-success { background: #edf5f1; color: #37735c; }
.log-badge.is-failure { background: #fbefed; color: #a04e46; }
.log-entry small { grid-column: 1 / -1; }
.logs-pagination { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.logs-pagination span { color: var(--admin-muted); font-size: 13px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.dialog-actions button { min-height: 42px; padding: 8px 14px; border: 1px solid #d3dfe3; border-radius: 4px; background: white; color: var(--admin-ink); font: inherit; }
.dialog-actions button[type="submit"] { border-color: #203f4e; background: #203f4e; color: white; }
@media (max-width: 1080px) {
  .workspace { grid-template-columns: 68px minmax(0, 1fr); }
  .workspace-brand { padding: 0 4px 20px; }
  .work-area { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .login-card { padding: 30px 26px; }
  .workspace { display: flex; flex-direction: column; }
  .sidebar { flex-shrink: 0; overflow-x: auto; overflow-y: hidden; gap: 12px; padding: 9px 14px; }
  .workspace-brand { padding: 0; border: 0; }
  .workspace-brand strong { font-size: 14px; }
  .workspace-nav .nav-item { width: 40px; padding: 8px; }
  .workspace-header { flex-wrap: wrap; min-height: 64px; padding: 10px 14px; }
  .header-actions { gap: 0; }
  .quiet-button { min-width: 40px; padding: 8px; }
  .quiet-button span { display: none; }
  .work-area { display: flex; flex-direction: column; }
  .conversation-list { flex-shrink: 0; max-height: 30%; padding: 17px 14px 10px; }
  .list-heading { padding: 0 2px 10px; }
  .conversation-items { display: flex; overflow-x: auto; }
  .conversation-item { min-width: 140px; }
  .conversation-panel { min-height: 0; }
  .conversation-heading { padding: 17px; }
  .message-area { min-height: 0; padding: 20px 17px; }
  .message { max-width: 90%; }
  .composer { margin: 8px 12px 10px; }
  .composer textarea { min-height: 60px; }
  .logs-page { padding: 14px 14px 28px; }
  .logs-heading { column-gap: 20px; }
  .activity-filters { padding: 16px; }
  .log-entry { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 16px; }
  .log-entry small { grid-column: auto; }
}
@media (max-height: 600px) {
  .work-area { overflow-y: auto; }
  .conversation-panel { min-height: 390px; }
  .conversation-list { max-height: none; }
}