/* =============================================================================
 * auth.css · v1.1 统一账号：登录门 + 账号/配额胶囊
 * -----------------------------------------------------------------------------
 * 归属：frontend-dev（多用户前端工作流）。
 * 约定：颜色 / 圆角 / 阴影 / 字号一律引用 tokens.css 的 --dsw-* / --v4-*，
 *       本文件不出现任何颜色字面量，也不引入外部字体或 CDN。
 * 结构：
 *   1. 会话校验幕布（auth.js 在应用启动前插入，避免未登录时闪一下主界面）
 *   2. 全屏登录门（401 时显示；手机号 / 密码）
 *   3. 右上角账号胶囊 + 配额浮层（200 时注入；--atelier-account-* 由 auth.js 计算）
 *   4. 登录后给中栏／次级视图头部让出胶囊位置，避免压住既有控件
 * ========================================================================== */

/* ============================== 1. 会话校验幕布 ============================== */

.atelier-auth-curtain {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--v4-bg);
  color: var(--v4-text-secondary);
  font-family: var(--v4-font-family);
  font-size: var(--v4-fs-13);
  line-height: var(--v4-lh-13);
}

.atelier-auth-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--v4-border-l3);
  border-top-color: var(--v4-accent);
  animation: atelier-auth-spin 720ms linear infinite;
}

@keyframes atelier-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================== 2. 全屏登录门 ============================== */

.atelier-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  background: linear-gradient(165deg, var(--v4-bg) 0%, var(--v4-bg-subtle) 62%, var(--v4-bg) 100%);
  font-family: var(--v4-font-family);
  color: var(--v4-text-primary);
}

.atelier-auth-card {
  width: min(404px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 20px;
  background: var(--v4-bg-layer-1);
  border: 1px solid var(--v4-border-l2);
  border-radius: var(--v4-radius-lg);
  box-shadow: var(--v4-shadow-lv3);
}

/* ---- 2.1 品牌行 ---- */

.atelier-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.atelier-auth-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--v4-radius-md);
  background: var(--v4-bg-inverse);
  color: var(--v4-text-inverse);
  font-family: var(--dsw-font-family-brand);
  font-size: 19px;
  line-height: 1;
  font-weight: var(--v4-fw-medium);
}

.atelier-auth-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.atelier-auth-brand-copy strong {
  font-size: var(--v4-fs-14);
  line-height: var(--v4-lh-14);
  font-weight: var(--v4-fw-medium);
}

.atelier-auth-brand-copy small {
  font-size: var(--v4-fs-11);
  line-height: 14px;
  color: var(--v4-text-caption);
  letter-spacing: 0.02em;
}

/* ---- 2.2 标题 ---- */

.atelier-auth-eyebrow {
  margin: 0 0 4px;
  font-size: var(--v4-fs-11);
  line-height: 14px;
  letter-spacing: 0.14em;
  color: var(--v4-accent);
  font-weight: var(--v4-fw-semibold);
}

.atelier-auth-title {
  margin: 0;
  font-size: var(--v4-fs-20);
  line-height: var(--v4-lh-20);
  font-weight: var(--v4-fw-medium);
}

.atelier-auth-sub {
  margin: 6px 0 0;
  font-size: var(--v4-fs-12);
  line-height: var(--v4-lh-12);
  color: var(--v4-text-secondary);
}

/* ---- 2.3 提示 / 错误 ---- */

.atelier-auth-notice,
.atelier-auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--v4-radius-sm);
  font-size: var(--v4-fs-12);
  line-height: var(--v4-lh-12);
  border: 1px solid color-mix(in srgb, var(--v4-warn) 30%, transparent);
  background: var(--v4-warn-soft);
  color: var(--v4-warn-label);
  word-break: break-word;
}

.atelier-auth-error {
  border-color: color-mix(in srgb, var(--v4-error) 30%, transparent);
  background: var(--v4-error-soft);
  color: var(--v4-error);
}

/* ---- 2.4 表单 ---- */

.atelier-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.atelier-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--v4-fs-12);
  line-height: var(--v4-lh-12);
  color: var(--v4-text-secondary);
}

.atelier-auth-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--v4-border-l3);
  border-radius: var(--v4-radius-sm);
  background: var(--v4-bg);
  color: var(--v4-text-primary);
  font-size: var(--v4-fs-14);
  line-height: var(--v4-lh-14);
  transition: border-color 120ms var(--v4-ease), box-shadow 120ms var(--v4-ease);
}

.atelier-auth-field input::placeholder {
  color: var(--v4-text-caption);
}

.atelier-auth-field input:focus {
  border-color: var(--v4-accent);
  box-shadow: var(--v4-focus-ring-shadow);
}

.atelier-auth-submit {
  height: 40px;
  margin-top: 2px;
  border-radius: var(--v4-radius-sm);
  background: var(--v4-primary-fill);
  color: var(--v4-text-inverse);
  font-size: var(--v4-fs-14);
  line-height: 40px;
  font-weight: var(--v4-fw-medium);
  transition: background 120ms var(--v4-ease), opacity 120ms var(--v4-ease);
}

.atelier-auth-submit:hover:not(:disabled) {
  background: var(--v4-primary-fill-hover);
}

.atelier-auth-submit:disabled {
  opacity: 0.5;
}

.atelier-auth-foot {
  margin: 0;
  font-size: var(--v4-fs-11);
  line-height: 15px;
  color: var(--v4-text-caption);
}

/* ============================== 3. 账号 / 配额胶囊 ============================== */

.atelier-account {
  position: fixed;
  top: 8px;
  right: var(--atelier-account-right, 12px);
  z-index: 26;
  font-family: var(--v4-font-family);
}

.atelier-account-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  max-width: 100%;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--v4-border-l2);
  border-radius: var(--v4-radius-pill);
  background: var(--v4-bg);
  box-shadow: var(--v4-shadow-lv1);
  color: var(--v4-text-primary);
  transition: background 120ms var(--v4-ease), border-color 120ms var(--v4-ease);
}

.atelier-account-btn:hover,
.atelier-account[data-open="true"] .atelier-account-btn {
  background: var(--v4-bg-hover);
  border-color: var(--v4-border-l3);
}

.atelier-account-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--v4-bg-inverse);
  color: var(--v4-text-inverse);
  font-size: var(--v4-fs-11);
  line-height: 1;
  font-weight: var(--v4-fw-medium);
}

.atelier-account-name {
  max-width: 84px;
  font-size: var(--v4-fs-12);
  line-height: var(--v4-lh-12);
  font-weight: var(--v4-fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atelier-account-sep {
  width: 1px;
  height: 12px;
  flex: none;
  background: var(--v4-border-l2);
}

.atelier-account-quota {
  font-size: var(--v4-fs-11);
  line-height: var(--v4-lh-11);
  color: var(--v4-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.atelier-account-caret {
  font-size: 9px;
  line-height: 1;
  color: var(--v4-text-caption);
  transform: translateY(-1px);
  transition: transform 120ms var(--v4-ease);
}

.atelier-account[data-open="true"] .atelier-account-caret {
  transform: rotate(180deg) translateY(1px);
}

/* ---- 3.1 配额浮层 ---- */

.atelier-account-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 284px;
  max-width: calc(100vw - 24px);
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--v4-bg-layer-1);
  border: 1px solid var(--v4-border-l2);
  border-radius: var(--v4-radius-md);
  box-shadow: var(--v4-shadow-lv2);
}

.atelier-account[data-open="true"] .atelier-account-pop {
  display: flex;
}

.atelier-account-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.atelier-account-avatar-lg {
  width: 34px;
  height: 34px;
  font-size: var(--v4-fs-14);
}

.atelier-account-id-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.atelier-account-id-copy strong {
  font-size: var(--v4-fs-13);
  line-height: var(--v4-lh-13);
  font-weight: var(--v4-fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atelier-account-id-copy em {
  font-style: normal;
  font-size: var(--v4-fs-11);
  line-height: var(--v4-lh-11);
  color: var(--v4-text-caption);
}

.atelier-quota-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--v4-border-l1);
  border-bottom: 1px solid var(--v4-border-l1);
}

.atelier-quota-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.atelier-quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--v4-fs-11);
  line-height: var(--v4-lh-11);
  color: var(--v4-text-secondary);
}

.atelier-quota-head strong {
  font-size: var(--v4-fs-12);
  font-weight: var(--v4-fw-medium);
  color: var(--v4-text-primary);
  font-variant-numeric: tabular-nums;
}

.atelier-quota-track {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--v4-bg-muted);
}

.atelier-quota-fill {
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--v4-accent);
  transition: width 200ms var(--v4-ease);
}

.atelier-quota-fill[data-tone="warn"] {
  background: var(--v4-warn);
}

.atelier-quota-fill[data-tone="error"] {
  background: var(--v4-error);
}

.atelier-quota-fill[data-tone="unlimited"] {
  width: 100%;
  background: var(--v4-success);
}

.atelier-quota-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--v4-fs-11);
  line-height: 15px;
  color: var(--v4-text-caption);
}

.atelier-account-note {
  margin: 0;
  font-size: var(--v4-fs-11);
  line-height: 15px;
  color: var(--v4-text-caption);
}

.atelier-account-error {
  margin: 0;
  font-size: var(--v4-fs-11);
  line-height: 15px;
  color: var(--v4-error);
}

.atelier-account-logout {
  height: 32px;
  border: 1px solid var(--v4-border-l2);
  border-radius: var(--v4-radius-sm);
  background: var(--v4-bg);
  color: var(--v4-text-secondary);
  font-size: var(--v4-fs-12);
  line-height: 30px;
  transition: background 120ms var(--v4-ease), color 120ms var(--v4-ease), border-color 120ms var(--v4-ease);
}

.atelier-account-logout:hover:not(:disabled) {
  background: var(--v4-error-soft);
  border-color: color-mix(in srgb, var(--v4-error) 30%, transparent);
  color: var(--v4-error);
}

.atelier-account-logout:disabled {
  opacity: 0.5;
}

/* ============================== 4. 登录后头部让位 ============================== */
/* 胶囊浮在右上角，给中栏会话头 / 次级视图头右缘留出等宽空间，避免压住 ⋯ / 操作按钮。
   --atelier-account-pad 由 auth.js 按胶囊实测宽度 + 当前列布局算出；未登录时不生效。 */

body.atelier-authed .chat-head,
body.atelier-authed .v4-page-head,
body.atelier-authed .v4v-head {
  padding-right: var(--atelier-account-pad, 18px);
}

/* ============================== 5. 响应式 ============================== */

@media (max-width: 899px) {
  .atelier-account {
    top: 6px;
  }

  body.atelier-authed .chat-head,
  body.atelier-authed .v4-page-head,
  body.atelier-authed .v4v-head {
    padding-right: var(--atelier-account-pad, 12px);
  }

  .atelier-account-name {
    max-width: 64px;
  }
}

@media (max-width: 599px) {
  /* 小屏胶囊收窄为「头像 + 姓名」：配额百分比放进浮层，避免挤压会话头 */
  .atelier-account-quota,
  .atelier-account-sep {
    display: none;
  }

  .atelier-account-name {
    max-width: 76px;
  }
}

@media (max-width: 480px) {
  .atelier-auth-gate {
    padding: 14px;
  }

  .atelier-auth-card {
    padding: 20px 18px 16px;
    gap: 14px;
  }

  .atelier-account-btn {
    gap: 6px;
    padding-right: 8px;
  }
}