/* ─────────────────────────────────────────────────────────
       账号体系 · 客服聊天室
       登录模态 / 侧栏用户飞片 / 左下角常驻气泡 / mini 聊天窗 /
       图片放大 lightbox
       ───────────────────────────────────────────────────────── */

    /* 登录 / 注册模态 —— 半透遮罩 + 居中卡片 */
    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 2100;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    [data-theme="dark"] .auth-overlay { background: rgba(0, 0, 0, 0.6); }
    .auth-overlay.show { display: flex; }
    body.auth-locked {
      background: var(--bg, #f6f6f7);
      overflow: hidden;
    }
    body.auth-locked > :not(#authOverlay) {
      display: none !important;
    }
    body.auth-locked .auth-overlay {
      display: flex;
      background: var(--bg, #f6f6f7);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    body.auth-locked .auth-close {
      display: none;
    }

    .auth-card {
      width: min(420px, 100%);
      background: var(--panel, #fff);
      color: var(--fg, #111);
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      padding: 24px 22px 20px;
      position: relative;
    }
    .auth-card h2 {
      margin: 0 0 4px;
      font-size: var(--fs-20);
      font-weight: 600;
    }
    .auth-card .auth-subtitle {
      margin: 0 0 16px;
      font-size: var(--fs-13);
      color: var(--fg-dim, #666);
    }
    .auth-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: var(--fg-dim, #888);
      cursor: pointer;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .auth-close:hover { background: var(--bg-soft, rgba(0, 0, 0, 0.05)); }
    .auth-tabs {
      display: flex;
      gap: 4px;
      padding: 3px;
      background: var(--bg-soft, rgba(0, 0, 0, 0.04));
      border-radius: 10px;
      margin-bottom: 16px;
    }
    .auth-tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px;
      font-size: var(--fs-13);
      color: var(--fg-dim, #666);
      border-radius: 8px;
      cursor: pointer;
      font-weight: 500;
    }
    .auth-tab.active {
      background: var(--panel, #fff);
      color: var(--fg, #111);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    [data-theme="dark"] .auth-tab.active { background: rgba(255, 255, 255, 0.08); }
    .auth-form { display: flex; flex-direction: column; gap: 10px; }
    .auth-row { display: flex; flex-direction: column; gap: 6px; }
    .auth-row label {
      font-size: var(--fs-12);
      color: var(--fg-dim, #666);
      font-weight: 500;
    }
    .auth-row input[type="text"],
    .auth-row input[type="password"] {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
      background: var(--bg, #fafafa);
      color: var(--fg, #111);
      border-radius: 9px;
      outline: none;
      transition: border-color 0.15s;
    }
    .auth-row input:focus {
      border-color: var(--fg, #111);
    }
    [data-theme="dark"] .auth-row input:focus { border-color: rgba(255, 255, 255, 0.8); }

    .auth-avatar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0 2px;
    }
    .auth-avatar {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--bg-soft, rgba(0, 0, 0, 0.05));
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .auth-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .auth-avatar-actions {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .auth-avatar-actions .btn-link {
      background: none;
      border: none;
      color: var(--fg, #111);
      text-decoration: underline;
      padding: 0;
      font-size: var(--fs-12);
      cursor: pointer;
      text-align: left;
    }
    .auth-avatar-actions .btn-muted { color: var(--fg-dim, #888); }

    .auth-submit {
      margin-top: 8px;
      padding: 11px 14px;
      font-size: var(--fs-14);
      font-weight: 600;
      border: none;
      border-radius: 10px;
      background: var(--fg, #111);
      color: var(--bg, #fff);
      cursor: pointer;
    }
    .auth-submit:hover { opacity: 0.9; }
    .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-err {
      margin-top: 8px;
      padding: 8px 10px;
      font-size: var(--fs-12);
      border-radius: 8px;
      background: rgba(220, 50, 50, 0.1);
      color: #c14a4a;
      display: none;
    }
    .auth-err.show { display: block; }

    /* sidebar 用户飞片 —— 塞进 footer 左侧 */
    .user-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px;
      border-radius: 10px;
      cursor: pointer;
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      color: inherit;
      font: inherit;
      text-align: left;
    }
    .user-chip:hover { background: var(--bg-soft, rgba(0, 0, 0, 0.05)); }
    .user-chip .uc-avatar {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--bg-soft, rgba(0, 0, 0, 0.08));
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      font-size: var(--fs-12);
      font-weight: 600;
      color: var(--fg, #111);
    }
    .user-chip .uc-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .user-chip .uc-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.15;
    }
    .user-chip .uc-name {
      font-size: var(--fs-12);
      font-weight: 600;
      color: var(--fg, #111);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-chip .uc-sub {
      font-size: var(--fs-10);
      color: var(--fg-dim, #888);
    }
    /* 放到 sidebar footer 后，压成紧凑图标按钮，和主题 / 设置并排 */
    .sidebar-footer-actions .user-chip {
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      border-radius: 9px;
      background: transparent;
      flex: 0 0 auto;
      justify-content: center;
    }
    .sidebar-footer-actions .user-chip .uc-info {
      display: none;
    }
    .sidebar-footer-actions .user-chip .uc-avatar {
      width: 22px;
      height: 22px;
      border-radius: 7px;
      font-size: var(--fs-11);
    }

    /* ── 账号管理视图 ── */
    .account-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .account-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow-sm);
    }
    .account-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--bg-soft, rgba(0,0,0,0.06));
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      font-weight: 700;
    }
    .account-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .account-main {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .account-name {
      font-size: var(--fs-14);
      font-weight: var(--fw-semibold);
      color: var(--fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-username {
      font-size: var(--fs-12);
      color: var(--fg-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-meta {
      font-size: var(--fs-11);
      color: var(--fg-dim);
    }
    .account-badge {
      font-size: var(--fs-11);
      padding: 2px 8px;
      border-radius: 999px;
      color: var(--brand-deep);
      background: var(--accent-soft);
      border: 1px solid var(--border);
      white-space: nowrap;
    }
    .account-delete {
      border: 1px solid color-mix(in srgb, #dc2626 35%, var(--border));
      background: color-mix(in srgb, #dc2626 8%, var(--panel));
      color: #dc2626;
      border-radius: 9px;
      padding: 6px 9px;
      cursor: pointer;
      font: inherit;
      font-size: var(--fs-12);
      flex-shrink: 0;
    }
    .account-delete:hover {
      background: color-mix(in srgb, #dc2626 14%, var(--panel));
    }
    .account-section-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 22px 0 10px;
      flex-wrap: wrap;
    }
    .account-section-head h3 {
      margin: 0;
      font-size: var(--fs-15);
      font-weight: var(--fw-semibold);
      color: var(--fg);
    }
    .account-section-sub {
      font-size: var(--fs-12);
      color: var(--fg-muted);
    }
    .account-login-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }
    .account-login-row {
      display: grid;
      grid-template-columns: minmax(160px, 1.2fr) minmax(120px, 0.9fr) minmax(140px, 1fr) minmax(180px, 1.4fr);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: var(--fs-12);
    }
    .account-login-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .account-login-user {
      color: var(--fg);
      font-weight: var(--fw-semibold);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-login-action {
      color: var(--fg-muted);
    }
    .account-login-ip {
      font-family: ui-monospace, "SF Mono", Consolas, monospace;
      color: var(--fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-login-time {
      color: var(--fg-dim);
      white-space: nowrap;
    }
    .account-login-ua {
      color: var(--fg-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .account-login-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }

    /* ── 左下角客服气泡（常驻） ── */
    .csr-bubble {
      position: fixed;
      left: 20px;
      bottom: 52px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--fg, #111);
      color: var(--bg, #fff);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      z-index: 1800;
      opacity: 0.66;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .csr-bubble:hover { transform: translateY(-2px); opacity: 0.86; }
    [data-theme="dark"] .csr-bubble {
      background: #fff;
      color: #111;
    }
    .csr-bubble > .ico { font-size: var(--fs-18); }
    .csr-bubble .csr-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      background: #e15a5a;
      color: #fff;
      font-size: var(--fs-10);
      line-height: 16px;
      text-align: center;
      font-weight: 600;
      display: none;
      box-shadow: 0 0 0 2px var(--bg, #fff);
    }
    .csr-bubble.has-unread .csr-badge { display: block; }

    /* mini 聊天窗 —— 紧贴气泡左下角 */
    .csr-panel {
      position: fixed;
      left: 20px;
      bottom: 120px;
      width: min(360px, calc(100vw - 40px));
      height: min(520px, calc(100vh - 120px));
      background: var(--panel, #fff);
      color: var(--fg, #111);
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      border-radius: 16px;
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 1850;
    }
    .csr-panel.show { display: flex; }

    .csr-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
      background: var(--bg-soft, rgba(0, 0, 0, 0.02));
    }
    .csr-head h3 {
      margin: 0;
      font-size: var(--fs-14);
      font-weight: 600;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .csr-head .csr-sub {
      font-size: var(--fs-11);
      color: var(--fg-dim, #888);
      font-weight: 400;
    }
    .csr-head .csr-close {
      border: none;
      background: transparent;
      color: var(--fg-dim, #888);
      cursor: pointer;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .csr-head .csr-close:hover { background: var(--bg-soft, rgba(0, 0, 0, 0.05)); }

    .csr-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: var(--bg, #fafafa);
    }
    .csr-empty {
      margin: auto;
      color: var(--fg-dim, #999);
      font-size: var(--fs-12);
      text-align: center;
      padding: 20px;
    }

    .csr-msg {
      display: flex;
      gap: 8px;
      max-width: 100%;
    }
    .csr-msg.mine { flex-direction: row-reverse; }
    .csr-msg .csr-avatar {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--bg-soft, rgba(0, 0, 0, 0.08));
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      font-size: var(--fs-11);
      font-weight: 600;
    }
    .csr-msg .csr-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .csr-msg-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      max-width: calc(100% - 40px);
    }
    .csr-msg.mine .csr-msg-body { align-items: flex-end; }
    .csr-msg-meta {
      font-size: var(--fs-10);
      color: var(--fg-dim, #999);
      padding: 0 4px;
      display: flex;
      gap: 6px;
    }
    .csr-bubble-text {
      padding: 8px 11px;
      font-size: var(--fs-13);
      line-height: 1.45;
      background: var(--panel, #fff);
      border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
      border-radius: 12px;
      word-break: break-word;
      white-space: pre-wrap;
      max-width: 100%;
    }
    .csr-msg.mine .csr-bubble-text {
      background: var(--fg, #111);
      color: var(--bg, #fff);
      border-color: var(--fg, #111);
    }
    [data-theme="dark"] .csr-msg.mine .csr-bubble-text {
      background: #eee;
      color: #111;
      border-color: #eee;
    }
    .csr-imgs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      max-width: 100%;
    }
    .csr-imgs img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 10px;
      cursor: zoom-in;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      background: var(--bg-soft, rgba(0, 0, 0, 0.04));
    }
    .csr-imgs img:hover { opacity: 0.92; }
    @media (max-width: 520px) {
      .csr-imgs img { width: 96px; height: 96px; }
    }

    .csr-compose {
      border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
      padding: 8px 8px 10px;
      background: var(--panel, #fff);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .csr-previews {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 4px;
    }
    .csr-previews:empty { display: none; }
    .csr-preview {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      background: var(--bg-soft, rgba(0, 0, 0, 0.06));
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .csr-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .csr-preview .csr-preview-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 16px;
      height: 16px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.65);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: var(--fs-10);
      line-height: 1;
    }
    .csr-preview.uploading::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 8px;
    }
    .csr-preview.uploading::before {
      content: "…";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: var(--fs-13);
      z-index: 2;
    }

    .csr-input-row {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      padding: 4px 4px 0;
    }
    .csr-input-row textarea {
      flex: 1;
      font: inherit;
      font-size: var(--fs-13);
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
      background: var(--bg, #fafafa);
      color: var(--fg, #111);
      resize: none;
      min-height: 38px;
      max-height: 120px;
      outline: none;
    }
    .csr-input-row textarea:focus { border-color: var(--fg, #111); }
    [data-theme="dark"] .csr-input-row textarea:focus { border-color: rgba(255, 255, 255, 0.7); }
    .csr-btn {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
      background: var(--panel, #fff);
      color: var(--fg, #111);
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
    }
    .csr-btn:hover { background: var(--bg-soft, rgba(0, 0, 0, 0.04)); }
    .csr-btn.primary {
      background: var(--fg, #111);
      color: var(--bg, #fff);
      border-color: var(--fg, #111);
    }
    .csr-btn.primary:hover { opacity: 0.9; }
    .csr-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    .csr-dropzone {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10;
      pointer-events: none;
      font-size: var(--fs-13);
    }
    .csr-panel.dragging .csr-dropzone { display: flex; }

    /* 用素材库选图的迷你 picker（侧滑面板顶层弹出） */
    .csr-lib-panel {
      position: absolute;
      inset: 0;
      background: var(--panel, #fff);
      z-index: 12;
      display: none;
      flex-direction: column;
    }
    .csr-lib-panel.show { display: flex; }
    .csr-lib-head {
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    }
    .csr-lib-head h4 { margin: 0; font-size: var(--fs-14); font-weight: 600; flex: 1; }
    .csr-lib-grid {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 6px;
      align-content: start;
    }
    .csr-lib-grid .csr-lib-tile {
      aspect-ratio: 1 / 1;
      border-radius: 8px;
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      overflow: hidden;
      cursor: pointer;
      background: var(--bg-soft, rgba(0, 0, 0, 0.05));
    }
    .csr-lib-grid .csr-lib-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .csr-lib-grid .csr-lib-tile:hover { outline: 2px solid var(--fg, #111); }
    .csr-lib-empty {
      grid-column: 1 / -1;
      color: var(--fg-dim, #999);
      font-size: var(--fs-12);
      text-align: center;
      padding: 24px 0;
    }

    /* 图片 lightbox 放大层 */
    .img-lightbox {
      position: fixed;
      inset: 0;
      z-index: 2300;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      cursor: zoom-out;
    }
    .img-lightbox.show { display: flex; }
    .img-lightbox img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 4px;
      cursor: zoom-out;
    }
    .img-lightbox .ilb-close {
      position: absolute;
      top: 16px;
      right: 20px;
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      font-size: var(--fs-18);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .img-lightbox .ilb-close:hover { background: rgba(255, 255, 255, 0.25); }

    /* 移动端：气泡位置稍向里缩一点，防止跟现有底部 UI 叠到 */
    @media (max-width: 520px) {
      .csr-bubble {
        width: 42px;
        height: 42px;
        left: 14px;
        bottom: 34px;
      }
      .csr-panel {
        left: 8px;
        right: 8px;
        bottom: 92px;
        width: auto;
        max-width: none;
        height: min(70vh, 520px);
      }
    }