:root {
  --bg: #f3f8f7;
  --card: #ffffff;
  --card2: #f7fcfb;
  --text: #1f2a37;
  --muted: #5f7388;
  --border: #dce8e5;
  --primary: #1f9d8b;
  --danger: #dc5a5a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #f7fbfa 0%, var(--bg) 100%);
  color: var(--text);
}

/* 中文注释：首次进入的登录门禁页 */
.authGate {
  padding: 26px 16px;
}

.authLanding {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
}

.authLanding__visual {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, #f4fbf9 0%, #ffffff 65%);
  padding: 26px;
  position: relative;
  overflow: hidden;
}

.authLanding__visual::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 157, 139, 0.16) 0%, rgba(31, 157, 139, 0) 70%);
}

.authLanding__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  color: #1f9d8b;
  border: 1px solid rgba(31, 157, 139, 0.3);
  background: rgba(31, 157, 139, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
}

.authLanding__title {
  margin: 14px 0 8px;
  font-size: 34px;
  line-height: 1.2;
}

.authLanding__desc {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.authLanding__metrics {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.authLanding__metric {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.authLanding__metric strong {
  font-size: 14px;
  color: #1f9d8b;
}

.authLanding__metric span {
  font-size: 12px;
  color: var(--muted);
}

.authLanding__imagePlaceholder {
  margin-top: 18px;
  min-height: 200px;
  border-radius: 14px;
  border: 1px dashed #b8d6cf;
  background: repeating-linear-gradient(
    -45deg,
    rgba(31, 157, 139, 0.08),
    rgba(31, 157, 139, 0.08) 12px,
    rgba(31, 157, 139, 0.03) 12px,
    rgba(31, 157, 139, 0.03) 24px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3f6f67;
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.authGate__card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.authGate__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.authGate__logo {
  font-size: 28px;
  line-height: 1;
}

.authGate__name {
  font-size: 20px;
  font-weight: 900;
}

.authGate__title {
  font-weight: 800;
  margin-bottom: 12px;
}

code {
  background: #edf4f2;
  padding: 0 6px;
  border-radius: 6px;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

.header__title {
  font-size: 16px;
  font-weight: 700;
}

.header__meta {
  font-size: 12px;
  color: var(--muted);
}

/* 中文注释：服务状态指示（绿/红点） */
.health {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.health__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #c5d5d1;
}

.dot--ok {
  background: #2fd07a;
  box-shadow: 0 0 0 2px rgba(47, 208, 122, 0.16);
}

.dot--bad {
  background: #ff4d6d;
  box-shadow: 0 0 0 2px rgba(255, 77, 109, 0.16);
}

.layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  padding: 16px;
}

/* 中文注释：单列布局（用于账单页等） */
.layout--single {
  grid-template-columns: 1fr;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .chat,
  .panel,
  .authGate__card {
    border-radius: 12px;
    padding: 12px;
  }

  .chat__title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .chat__user {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .messages {
    height: calc(100vh - 360px);
    min-height: 300px;
  }

  .composer__row--tools {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .upload {
    width: 100%;
    flex: 1 0 100%;
  }

  .composer__row--tools .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
  }

  .link,
  .btn,
  .upload__btn,
  .field__input,
  .composer__input {
    min-height: 42px;
  }

  .footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .header {
    padding: 10px 12px;
  }

  .header__title {
    font-size: 15px;
  }

  .header__meta {
    font-size: 11px;
  }

  .messages {
    height: calc(100vh - 390px);
    min-height: 260px;
    padding: 8px;
  }

  .msg {
    padding: 9px 10px;
  }

  .composer__row--tools .btn {
    flex: 1 1 100%;
  }

  .upload__name {
    max-width: 180px;
  }
}

.panel,
.chat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.panel__title,
.chat__title {
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* 中文注释：顶部元信息（模型/余额） */
.chat__metaItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat__metaLabel {
  color: var(--muted);
}

.chat__model {
  width: 320px;
  max-width: 42vw;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}

@media (max-width: 980px) {
  .chat__model {
    width: 220px;
    max-width: 60vw;
  }
}

/* 中文注释：普通链接按钮（用于顶部导航） */
.link {
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7fcfb;
}

.link:hover {
  border-color: rgba(31, 157, 139, 0.45);
}

/* 中文注释：账单页卡片布局 */
.billingGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 980px) {
  .billingGrid {
    grid-template-columns: 1fr;
  }
}

.billingCard {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #f9fdfc;
}

.billingCard__title {
  font-weight: 800;
  margin-bottom: 10px;
}

.billingCard__value {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.billingCard__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 中文注释：表格 */
.tableWrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.table th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8f0ee;
  text-align: left;
  font-size: 12px;
}

.table th {
  color: var(--muted);
  font-weight: 800;
}

.text--danger {
  color: #d74f4f;
  font-weight: 800;
}

.text--ok {
  color: #1f9d8b;
  font-weight: 800;
}

/* 中文注释：登录/注册面板 */
.auth {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #f9fdfc;
  margin-bottom: 12px;
}

.auth__title {
  font-weight: 700;
  margin-bottom: 10px;
}

.auth__tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.auth__home {
  display: flex;
  gap: 10px;
}

.auth__home--center {
  justify-content: center;
  align-items: center;
  min-height: 55vh;
}

.auth__panel {
  margin-top: 10px;
}

.auth__panelTitle {
  font-weight: 700;
  margin-bottom: 10px;
}

.auth__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.auth__msg {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
}

.auth__notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(220, 90, 90, 0.45);
  background: rgba(220, 90, 90, 0.12);
  color: #a93333;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field__label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field__input,
.field__textarea {
  width: 100%;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.field__textarea {
  resize: vertical;
}

.tips {
  border: 1px dashed #c9dbd6;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f9fdfc;
  margin: 10px 0 12px;
}

.tips__title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.tips__list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 10px;
}

.btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  border-color: rgba(31, 157, 139, 0.45);
  background: rgba(31, 157, 139, 0.12);
}

.btn--danger {
  border-color: rgba(220, 90, 90, 0.45);
  background: rgba(220, 90, 90, 0.12);
}

.btn--ghost {
  background: transparent;
}

.messages {
  height: calc(100vh - 280px);
  min-height: 360px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f9fdfc;
}

.msg {
  border: 1px solid #e2ecea;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #ffffff;
}

.msg__role {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.msg__content {
  white-space: pre-wrap;
  line-height: 1.65;
}

/* 中文注释：模型“思考过程”样式（灰色 + 可折叠） */
.reasoning {
  margin-top: 8px;
  border: 1px solid #dce8e5;
  border-radius: 12px;
  background: #f6fbfa;
  padding: 8px 10px;
}

.reasoning summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  user-select: none;
}

.reasoning__content {
  margin-top: 8px;
  color: #5f7388;
  white-space: pre-wrap;
  line-height: 1.6;
}

.answer {
  margin-top: 8px;
  white-space: pre-wrap;
  line-height: 1.65;
}

.answer__suggestions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #d6e7e2;
}

.suggestions__title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.suggestions__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip {
  border: 1px solid #cde2dc;
  background: #f4fbf9;
  color: #1f5f56;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}

.suggestion-chip:hover {
  border-color: rgba(31, 157, 139, 0.45);
  background: #e8f7f2;
}

.history-accordion {
  margin-top: 4px;
}

.history-accordion__topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.history-accordion__back {
  padding: 6px 10px;
  font-size: 12px;
}

.history-accordion__title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.history-accordion__item {
  border: 1px solid #dce8e5;
  border-radius: 10px;
  background: #f8fcfb;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.history-accordion__item summary {
  cursor: pointer;
  font-size: 12px;
  color: #365d56;
  line-height: 1.55;
}

.history-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-accordion__delete {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 8px;
  min-height: auto;
}

.history-accordion__content {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d7e6e2;
  font-size: 12px;
  color: #516a66;
  white-space: pre-wrap;
  line-height: 1.65;
}

.composer {
  margin-top: 12px;
}

.composer__row {
  margin-top: 10px;
}

.composer__input {
  width: 100%;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}

.composer__row--tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.upload input {
  display: none;
}

.upload__btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.upload__name {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.preview {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #f9fdfc;
}

.preview__title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.preview__img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #dce8e5;
}

.preview__text {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

/* 中文注释：PDF 分析报告区域 */
.report {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #f9fdfc;
}

.report__title {
  font-weight: 800;
  margin-bottom: 10px;
}

.report__progress {
  margin-bottom: 10px;
}

.report__bar {
  height: 10px;
  border-radius: 999px;
  background: #e3efec;
  overflow: hidden;
}

.report__barFill {
  height: 100%;
  width: 0%;
  background: rgba(31, 157, 139, 0.65);
}

.report__status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* 中文注释：PDF 分析完成提示（醒目） */
.report__status--done {
  color: #1f9d8b;
  font-weight: 900;
}

.report__status--warn {
  color: #d74f4f;
  font-weight: 900;
}

.report__content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

/* 中文注释：首页登录区现代化样式覆盖 */
.authLanding .authGate__card {
  max-width: 560px;
  margin: 0;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(35, 58, 54, 0.08);
}

.authLanding__card {
  justify-self: end;
  width: 100%;
}

.authLanding .authGate__brand {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.authLanding .auth__home--center {
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.authLanding .auth__panel {
  margin-top: 4px;
}

.field__input,
.field__textarea,
.composer__input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input:focus,
.field__textarea:focus,
.composer__input:focus {
  border-color: rgba(31, 157, 139, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 157, 139, 0.12);
}

.btn {
  transition: transform 0.14s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(35, 58, 54, 0.08);
}

@media (max-width: 980px) {
  .authLanding {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .authLanding__visual {
    padding: 18px;
    border-radius: 14px;
  }

  .authLanding__title {
    font-size: 26px;
  }

  .authLanding__metrics {
    grid-template-columns: 1fr 1fr;
  }

  .authLanding__card {
    justify-self: stretch;
  }
}

@media (max-width: 520px) {
  .authGate {
    padding: 14px 10px;
  }

  .authLanding__visual {
    padding: 14px;
  }

  .authLanding__title {
    font-size: 22px;
  }

  .authLanding__desc {
    font-size: 13px;
  }

  .authLanding__metrics {
    grid-template-columns: 1fr;
  }

  .authLanding__imagePlaceholder {
    min-height: 130px;
  }

  .authLanding .authGate__card {
    padding: 14px;
  }
}