:root {
  --bg-start: #071a3a;
  --bg-mid: #0d2755;
  --bg-end: #1f2d73;
  --surface: rgba(11, 40, 89, 0.78);
  --surface-strong: rgba(8, 30, 69, 0.95);
  --surface-soft: rgba(20, 55, 117, 0.82);
  --border: rgba(108, 163, 255, 0.18);
  --text: #edf4ff;
  --muted: #aab8d8;
  --accent-a: #66b8ff;
  --accent-b: #6f89ff;
  --danger: #ff7d8f;
  --success: #82d5ff;
  --shadow: 0 22px 70px rgba(2, 9, 30, 0.35);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-size: 16px;
  --space-scale: 1;
}

body[data-theme="sunset"] {
  --accent-a: #ff8c69;
  --accent-b: #ed4fb2;
}

body[data-theme="violet"] {
  --accent-a: #b38cff;
  --accent-b: #6f7cff;
}

body[data-mode="auth"] .app-header,
body[data-mode="auth"] .app-shell {
  display: none;
}

body[data-mode="app"] .auth-shell {
  display: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size);
  color: var(--text);
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 137, 91, 0.26), transparent 16%),
    radial-gradient(circle at 82% 82%, rgba(231, 77, 192, 0.28), transparent 18%),
    linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
}

body[data-theme="ocean"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(95, 180, 255, 0.22), transparent 18%),
    radial-gradient(circle at 87% 75%, rgba(124, 103, 255, 0.25), transparent 18%),
    linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
}

body[data-mode="app"] {
  padding: calc(26px * var(--space-scale));
}

body.compact { --space-scale: 0.84; }
body.light {
  --bg-start: #eef4ff;
  --bg-mid: #dbe8ff;
  --bg-end: #cfd7ff;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(250, 251, 255, 0.96);
  --surface-soft: rgba(242, 246, 255, 0.95);
  --border: rgba(51, 92, 160, 0.14);
  --text: #163061;
  --muted: #5d6f98;
  --shadow: 0 22px 50px rgba(78, 101, 147, 0.15);
}

.hidden { display: none !important; }
.page-glow { position: fixed; inset: auto; width: 420px; height: 420px; filter: blur(70px); pointer-events: none; opacity: .32; z-index: 0; }
.glow-left { left: -160px; top: -40px; background: radial-gradient(circle, rgba(122,176,255,0.6), transparent 62%); }
.glow-right { right: -130px; bottom: -130px; background: radial-gradient(circle, rgba(208,88,255,0.58), transparent 62%); }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; position: relative; z-index: 1; }
.app-shell { position: relative; z-index: 1; }
.card {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(17, 47, 103, 0.72) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
}
.card-auth { width: min(540px, 100%); padding: 36px; }
.auth-card h1 { margin: 18px 0 10px; font-size: 2.4rem; }
.eyebrow {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,145,89,0.26), rgba(187,95,255,0.22));
  border: 1px solid rgba(255,255,255,0.1); font-weight: 700;
}
.muted { color: var(--muted); line-height: 1.5; }
.stack-16 > * + * { margin-top: 16px; }
.stack-20 > * + * { margin-top: 20px; }
.top-gap { margin-top: 20px; }
.auth-divider { height: 1px; background: var(--border); margin: 20px 0; }
.link-btn, .nav-link {
  background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
.link-btn { color: var(--accent-a); padding: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-weight: 700; }
input, textarea, select {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(108, 163, 255, 0.18);
  background: rgba(5, 21, 53, 0.84);
  color: var(--text);
  padding: 15px 16px;
  font: inherit;
  outline: none;
}
body.light input, body.light textarea, body.light select { background: rgba(246, 249, 255, 0.96); }
input:focus, textarea:focus, select:focus {
  border-color: rgba(120, 195, 255, 0.65);
  box-shadow: 0 0 0 4px rgba(99, 163, 255, 0.12);
}
textarea { resize: vertical; min-height: 76px; }
.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 800; color: white;
  padding: 15px 24px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  box-shadow: 0 12px 30px rgba(30, 67, 155, 0.35);
}
.btn-secondary { background: rgba(93, 131, 197, 0.26); color: var(--text); box-shadow: none; }
.btn-wide { width: 100%; }
.btn-danger { background: linear-gradient(135deg, #ff8797, #b54c88); }

.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(22px * var(--space-scale)) calc(28px * var(--space-scale));
  margin-bottom: calc(22px * var(--space-scale));
}
.brand { font-weight: 900; font-size: 2.2rem; letter-spacing: -0.03em; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.nav-link { font-weight: 800; color: var(--muted); }
.nav-link.active, .nav-link:hover { color: var(--text); }
.nav-danger { color: var(--danger); }

.page { display: none; }
.page.active { display: block; }
.layout-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: calc(22px * var(--space-scale));
  align-items: start;
}
.sidebar, .content-panel, .form-card, .settings-card {
  padding: calc(28px * var(--space-scale));
}
.profile-mini { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: white; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
.section-box { margin-top: 18px; }
.section-title, .subheading { font-weight: 800; margin-bottom: 10px; }
.list-column { display: flex; flex-direction: column; gap: 12px; }
.user-result, .chat-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: rgba(33, 67, 130, 0.26); border: 1px solid var(--border); }
.user-result-main { flex: 1; }
.user-actions { display: flex; gap: 10px; }
.chat-card { justify-content: space-between; cursor: pointer; }
.chat-card.active { outline: 2px solid rgba(104, 189, 255, 0.6); }
.chat-card-main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.chat-card-body { min-width: 0; }
.chat-card-title-row { display: flex; gap: 10px; align-items: center; }
.chat-card-title { font-size: 1.04rem; font-weight: 800; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-label { color: var(--muted); font-size: 0.92rem; }
.unread-badge {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: white; font-weight: 800;
}
.unread-flag {
  width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  box-shadow: 0 0 0 6px rgba(101, 180, 255, 0.12);
}
.placeholder-state { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 20px; }
.chat-list-view { width: 100%; text-align: left; align-self: start; }
.chat-workspace { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 16px; min-height: 76vh; }
.chat-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.chat-head-main { display: flex; gap: 16px; align-items: center; }
.chat-head h2 { margin: 0 0 6px; font-size: 2rem; }
.chat-meta { color: var(--muted); font-size: 0.95rem; text-align: right; }
.message-list {
  display: flex; flex-direction: column; gap: 14px; overflow: auto; padding-right: 4px;
  min-height: 380px; max-height: 62vh; align-items: flex-start;
}
.message-card {
  max-width: min(82%, 760px);
  padding: 18px; border-radius: 22px; border: 1px solid var(--border);
  background: rgba(18, 48, 101, 0.66); box-shadow: 0 14px 34px rgba(6, 17, 54, 0.18);
}
.message-card.own { align-self: flex-end; margin-left: auto; background: rgba(31, 75, 148, 0.66); }
.message-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.message-sender { font-weight: 800; }
.message-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.inline-btn { color: var(--accent-a); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; font-weight: 800; }
.inline-btn.delete { color: var(--danger); }
.message-meta { color: var(--muted); font-size: 0.92rem; }
.reply-pill, .file-pill {
  border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.05);
  padding: 10px 12px; margin-bottom: 10px;
}
.file-pill a { color: var(--accent-a); text-decoration: none; }
.message-composer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}
.attach-trigger {
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
  font-size: 2rem; cursor: pointer; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: white; font-weight: 700;
}
.reply-box, .file-preview-box { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.preview-media { max-width: 240px; max-height: 160px; display: block; border-radius: 16px; margin-top: 10px; object-fit: cover; }
.single-card-wrap { display: grid; place-items: start center; }
.form-card { width: min(820px, 100%); }
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.align-start { align-items: start; }
.avatar-preview {
  min-height: 170px; border-radius: 22px; border: 1px dashed rgba(131, 175, 255, 0.35); background: rgba(6,20,51,0.35);
  display: grid; place-items: center; color: var(--muted); overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.status-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.picker-list { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow: auto; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; background: rgba(255,255,255,0.08); padding: 8px 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.settings-card-wide { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.check input { width: auto; }
.toast-container { position: fixed; top: 22px; right: 22px; display: flex; flex-direction: column; gap: 12px; z-index: 20; }
.toast { padding: 14px 16px; border-radius: 18px; background: rgba(7, 20, 52, 0.94); border: 1px solid var(--border); box-shadow: var(--shadow); }
.toast.error { border-color: rgba(255, 135, 151, 0.48); }

@media (max-width: 980px) {
  body[data-mode="app"] { padding: 14px; }
  .layout-grid, .settings-grid, .two-cols, .search-row, .message-composer { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .chat-workspace { min-height: auto; }
  .message-card { max-width: 100%; }
}


.auth-shell { gap: 0; }
.sidebar .chat-card { width: 100%; }
.chat-card { align-items: center; }
.chat-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:10px; min-width:72px; }
.user-actions .btn { min-width: 170px; justify-content:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; }


/* === FIX CHAT CARD LAYOUT === */
.chat-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.chat-card-body {
  min-width: 0;
}

.chat-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 60px;
}

.time-label {
  white-space: nowrap;
}

/* mobile */
@media (max-width: 640px) {
  .chat-card {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "avatar time"
      "avatar body";
  }
}