/* ============================================================
   Flow IM · 移动端样式（modern SaaS, light + dark）
   主色由租户 settings 注入 --brand。
   背景由租户 settings 注入 --bg-chat-light / --bg-chat-dark。
   ============================================================ */

:root {
  /* brand */
  --brand: #6366f1;
  --brand-2: #8b5cf6;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* light palette */
  --bg-app-light: #f5f6fa;
  --bg-card-light: #ffffff;
  --bg-chat-light: #f7f7fb;
  --bg-input-light: #f1f2f6;
  --bd-light: #e8eaf0;
  --bd-soft-light: #f1f2f6;
  --tx-light: #15172a;
  --tx-2-light: #5b6076;
  --tx-3-light: #9ea2b7;
  --bubble-them-light: #ffffff;
  --bubble-them-bd-light: #eceef4;

  /* dark palette */
  --bg-app-dark: #0d0e15;
  --bg-card-dark: #14151f;
  --bg-chat-dark: #0b0b10;
  --bg-input-dark: #1a1c28;
  --bd-dark: #232636;
  --bd-soft-dark: #1a1c28;
  --tx-dark: #ecedf3;
  --tx-2-dark: #9ea2b7;
  --tx-3-dark: #5b6076;
  --bubble-them-dark: #1c1e2c;
  --bubble-them-bd-dark: #262938;

  /* danger / status */
  --danger: #ef4444;
  --success: #10b981;

  /* spacing & radius */
  --radius-card: 16px;
  --radius-bubble: 18px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
}

/* 主题切换：默认 light，data-theme=dark 覆盖；auto 跟随系统 */
:root, [data-theme="light"] {
  --bg-app: var(--bg-app-light);
  --bg-card: var(--bg-card-light);
  --bg-chat: var(--bg-chat-light);
  --bg-input: var(--bg-input-light);
  --bd: var(--bd-light);
  --bd-soft: var(--bd-soft-light);
  --tx: var(--tx-light);
  --tx-2: var(--tx-2-light);
  --tx-3: var(--tx-3-light);
  --bubble-them: var(--bubble-them-light);
  --bubble-them-bd: var(--bubble-them-bd-light);
  --header-glass: rgba(255,255,255,.78);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-app: var(--bg-app-dark);
  --bg-card: var(--bg-card-dark);
  --bg-chat: var(--bg-chat-dark);
  --bg-input: var(--bg-input-dark);
  --bd: var(--bd-dark);
  --bd-soft: var(--bd-soft-dark);
  --tx: var(--tx-dark);
  --tx-2: var(--tx-2-dark);
  --tx-3: var(--tx-3-dark);
  --bubble-them: var(--bubble-them-dark);
  --bubble-them-bd: var(--bubble-them-bd-dark);
  --header-glass: rgba(14,15,22,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-app: var(--bg-app-dark);
    --bg-card: var(--bg-card-dark);
    --bg-chat: var(--bg-chat-dark);
    --bg-input: var(--bg-input-dark);
    --bd: var(--bd-dark);
    --bd-soft: var(--bd-soft-dark);
    --tx: var(--tx-dark);
    --tx-2: var(--tx-2-dark);
    --tx-3: var(--tx-3-dark);
    --bubble-them: var(--bubble-them-dark);
    --bubble-them-bd: var(--bubble-them-bd-dark);
    --header-glass: rgba(14,15,22,.7);
    color-scheme: dark;
  }
}

/* base reset */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               Helvetica, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tx);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ====== SPA shell ====== */
#app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.active { display: flex; }

/* ====== glass header ====== */
.app-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--header-glass);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--bd-soft);
  position: sticky; top: 0; z-index: 10;
}
.app-header .back {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; color: var(--tx-2); cursor: pointer;
}
.app-header .back:active { background: var(--bg-input); }
.app-header .title { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.app-header .subtitle { font-size: 11px; color: var(--tx-3); margin-top: 2px; }
.app-header .icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; color: var(--tx-2); cursor: pointer; background: transparent; border: 0;
}
.app-header .icon-btn:active { background: var(--bg-input); }

/* ====== avatar ====== */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-input); object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; color: var(--tx-2); font-weight: 600; font-size: 14px;
  position: relative;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar .dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--bg-card);
}

/* ====== login screen ====== */
.login-screen {
  background: var(--bg-app);
  align-items: center; justify-content: center;
  padding: 32px 24px;
  padding-top: calc(32px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 28px 22px 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--bd-soft);
}
.login-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.login-brand .logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand-grad); display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.login-brand .name { font-size: 16px; font-weight: 700; }
.login-brand .tagline { font-size: 11px; color: var(--tx-3); }
.login-title { font-size: 22px; font-weight: 700; margin: 4px 0 4px; }
.login-sub { color: var(--tx-2); font-size: 13px; margin-bottom: 22px; }

.btn-primary {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 12px;
  background: var(--brand-grad); color: #fff; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: transform .08s ease, box-shadow .15s;
  box-shadow: 0 6px 20px rgba(99,102,241,.30);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  width: 100%; padding: 11px 16px; border: 1px solid var(--bd); border-radius: 12px;
  background: transparent; color: var(--tx-2); font-size: 13px; cursor: pointer;
  margin-top: 10px;
}
.btn-ghost:active { background: var(--bg-input); }

.text-field {
  width: 100%; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px;
  background: var(--bg-card); color: var(--tx);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.text-field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.16); }
.field-label { display: block; font-size: 12px; color: var(--tx-2); margin: 14px 0 6px; }

.advanced { margin-top: 10px; }
.advanced summary { cursor: pointer; font-size: 12px; color: var(--tx-3); padding: 6px 0; list-style: none; user-select: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: ' ▾'; color: var(--tx-3); }
.advanced[open] summary::after { content: ' ▴'; }

/* ====== inbox list ====== */
.inbox { flex: 1; overflow: auto; background: var(--bg-app); }
.inbox-empty { padding: 60px 24px; text-align: center; color: var(--tx-3); font-size: 13px; }
.conv-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--bd-soft);
  cursor: pointer;
  transition: background .12s;
}
.conv-item:active { background: var(--bg-input); }
.conv-item .info { flex: 1; min-width: 0; }
.conv-item .conv-actions { display: flex; align-items: center; margin-left: auto; }
.conv-item .conv-action-btn {
  width: 32px; height: 32px; border-radius: 10px;
  border: 0; background: transparent; color: var(--tx-3);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.conv-item .conv-action-btn:active { background: var(--bg-input); color: var(--danger); }
.conv-item .name-row { display: flex; gap: 8px; align-items: baseline; }
.conv-item .name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .time { font-size: 11px; color: var(--tx-3); flex-shrink: 0; }
.conv-item .preview { font-size: 13px; color: var(--tx-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge {
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center; margin-left: 6px;
}

/* ====== chat ====== */
.chat-view { background: var(--bg-chat); }
.messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 6px;
  scroll-behavior: smooth;
}
.day-divider {
  align-self: center; font-size: 11px; color: var(--tx-3);
  padding: 6px 12px; margin: 8px 0;
  background: var(--bg-input); border-radius: var(--radius-pill);
}
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.msg-row.mine { justify-content: flex-end; }
.msg-row .avatar { width: 30px; height: 30px; font-size: 11px; }
.bubble {
  max-width: 72%; padding: 9px 12px; border-radius: var(--radius-bubble);
  font-size: 15px; line-height: 1.4; word-break: break-word;
  position: relative;
}
.bubble.them {
  background: var(--bubble-them); border: 1px solid var(--bubble-them-bd);
  border-bottom-left-radius: 6px; color: var(--tx);
}
.bubble.mine {
  background: var(--brand-grad); color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble.image { padding: 4px; border-radius: 14px; max-width: 64%; cursor: pointer; }
.bubble.image img { border-radius: 11px; display: block; max-height: 280px; }
.meta-row {
  display: flex; align-items: center; gap: 4px; margin: 2px 8px 6px;
  font-size: 10px; color: var(--tx-3);
}
.meta-row.mine { justify-content: flex-end; }
.system-msg {
  align-self: center; font-size: 11px; color: var(--tx-3); padding: 4px 12px;
  background: var(--bg-input); border-radius: var(--radius-pill);
  margin: 4px 0;
}

/* typing indicator */
.typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  background: var(--bubble-them); border: 1px solid var(--bubble-them-bd);
  border-radius: var(--radius-bubble); border-bottom-left-radius: 6px;
  padding: 10px 12px; max-width: 80px;
}
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tx-3); animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* composer */
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-card);
  border-top: 1px solid var(--bd-soft);
}
.composer .icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--tx-2); border-radius: 50%;
  flex-shrink: 0;
}
.composer .icon-btn:active { background: var(--bg-input); }
.composer .input-wrap {
  flex: 1; background: var(--bg-input); border-radius: 22px;
  padding: 6px 12px; min-height: 38px;
  display: flex; align-items: center;
}
.composer textarea {
  width: 100%; border: 0; background: transparent;
  resize: none; outline: none; max-height: 120px;
  font-size: 15px; line-height: 1.4; padding: 4px 0;
}
.send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-grad); border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: transform .08s, opacity .15s;
  flex-shrink: 0;
}
.send-btn:disabled { opacity: .35; cursor: not-allowed; }
.send-btn:not(:disabled):active { transform: scale(.94); }

/* settings */
.settings-list { padding: 16px; flex: 1; overflow: auto; background: var(--bg-app); }
.settings-card {
  background: var(--bg-card); border: 1px solid var(--bd-soft);
  border-radius: var(--radius-card); overflow: hidden; margin-bottom: 16px;
}
.settings-section-title { font-size: 12px; color: var(--tx-3); padding: 0 4px 8px; text-transform: uppercase; letter-spacing: .5px; }
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bd-soft);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .label { flex: 1; font-size: 14px; }
.settings-row .desc { font-size: 11px; color: var(--tx-3); margin-top: 2px; }

.segment {
  display: flex; background: var(--bg-input); border-radius: 10px; padding: 3px;
}
.segment button {
  flex: 1; padding: 6px 10px; border: 0; background: transparent;
  border-radius: 8px; font-size: 12px; color: var(--tx-2); cursor: pointer;
}
.segment button.on { background: var(--bg-card); color: var(--tx); box-shadow: var(--shadow-sm); }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px 16px 10px; }
.swatch {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; position: relative;
  background-clip: padding-box;
  background-size: cover; background-position: center;
}
.swatch.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.swatch::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  pointer-events: none;
}
.swatch.on::before {
  content: '✓'; position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
  font-weight: 700;
}

/* 背景实时预览盒（小聊天 mock） */
.bg-preview {
  margin: 4px 16px 0;
  border-radius: 12px;
  height: 110px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 5px; justify-content: flex-end;
  border: 1px solid var(--bd-soft);
  background-size: cover; background-position: center;
  overflow: hidden;
  transition: background .2s;
}
.bg-preview.dark { color-scheme: dark; }
.bg-preview .mock {
  font-size: 12px; padding: 6px 10px; border-radius: 12px; max-width: 75%;
  line-height: 1.3;
}
.bg-preview .mock.them {
  background: #fff; color: #15172a;
  border: 1px solid #eceef4;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.bg-preview.dark .mock.them { background:#1c1e2c; color:#ecedf3; border-color:#262938; }
.bg-preview .mock.mine {
  background: var(--brand-grad); color:#fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

/* 自定义背景上传行 */
.bg-custom-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 14px;
}
.bg-upload-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--bd);
  border-radius: 12px;
  background: transparent;
  color: var(--tx-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bg-upload-btn:active { background: var(--bg-input); }
.bg-upload-btn.uploading { pointer-events: none; color: var(--tx-3); }
.bg-custom-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
  position: relative;
  flex-shrink: 0;
  display: none;
}
.bg-custom-thumb.shown { display: block; }
.bg-custom-thumb .remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 14px; line-height: 18px; text-align: center;
  cursor: pointer; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* image preview overlay */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: grid; place-items: center; z-index: 100;
  padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox .close { position: absolute; top: 16px; right: 16px; color: #fff; font-size: 24px; cursor: pointer; padding: 8px; }

/* loading state */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bd); border-top-color: var(--brand);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* utility */
.hidden { display: none !important; }
.muted { color: var(--tx-3); }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; min-width: 0; }
.spacer { flex: 1; }