* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --brand: #7C3AED;
  --brand-dark: #5B21B6;
  --brand-light: #F3EEFE;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --border: #EFF1F3;
  --text: #0F1419;
  --text-muted: #66707A;
  --danger: #DC2626;
  --like: #E11D48;
  --like-bg: rgba(225, 29, 72, 0.1);
  --reshare: #059669;
  --reshare-bg: rgba(5, 150, 105, 0.1);
  --comment-color: #1D4ED8;
  --comment-bg: rgba(29, 78, 216, 0.1);
  --radius: 16px;
  --sidebar-w-wide: 275px;
  --sidebar-w-narrow: 88px;
  --feed-w: 600px;
  --right-w: 320px;
}

/* ---------- Dark mode (toggled via the light-bulb button) ---------- */
[data-theme="dark"] {
  --brand: #8B5CF6;
  --brand-dark: #A78BFA;
  --brand-light: #241B3D;
  --bg: #0F1419;
  --card: #16191F;
  --border: #262B33;
  --text: #E7E9EA;
  --text-muted: #8B98A5;
  --danger: #F87171;
  --like: #FB7185;
  --like-bg: rgba(251, 113, 133, 0.14);
  --reshare: #34D399;
  --reshare-bg: rgba(52, 211, 153, 0.14);
  --comment-color: #60A5FA;
  --comment-bg: rgba(96, 165, 250, 0.14);
}
[data-theme="dark"] .thought-card:hover,
[data-theme="dark"] .profile-tab:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .expiry-tag.expired { color: #FBBF24; }
[data-theme="dark"] .expiry-tag.draft-tag { color: #C4B5FD; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Safety net: nothing should ever be wider than the screen, but if
     something slips through this stops the page from swaying side to
     side while scrolling on mobile instead of just scrolling straight up/down. */
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
textarea, input {
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--text);
  width: 100%;
}
textarea:focus, input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
svg { display: block; }

/* ---------- Shell layout ---------- */
.shell {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  max-width: 1250px;
  margin: 0 auto;
}

.sidebar {
  width: var(--sidebar-w-narrow);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; margin-bottom: 6px; }
.brand-text { display: none; font-weight: 800; font-size: 19px; color: var(--brand-dark); }
.logo-icon {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-light);
  border: 1px solid var(--brand-light);
  padding: 4px;
  box-sizing: border-box;
}
.brand-th { color: #F59E0B; }

.side-links { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.side-link:hover { background: var(--brand-light); }
.side-link.active { color: var(--brand-dark); }
.side-icon { display: flex; flex-shrink: 0; }
.side-label { display: none; }

.post-btn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px;
  width: 52px;
  height: 52px;
  font-weight: 700;
  font-size: 15px;
  align-self: center;
}
.post-btn:hover { background: var(--brand-dark); }
.post-btn-label { display: none; }

.side-footer { margin-top: auto; }
.side-user-chip { display: none; }
.side-auth-buttons { display: none; }

/* ---------- Feed column ---------- */
.feed-col {
  width: 100%;
  max-width: var(--feed-w);
  border-right: 1px solid var(--border);
  min-height: 100vh;
  padding-bottom: 70px;
}

.feed-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .feed-header { background: rgba(15, 20, 25, 0.85); }
.feed-header h1 { font-size: 19px; font-weight: 800; margin: 0; }

/* Home page only: horizontal, swipeable topic chips replace the plain
   "Home" title, at every screen size (this duplicates the sidebar's
   Topics list on desktop/tablet, which is intentional — it's a quicker
   way to jump into a topic without leaving the top of the feed). */
.home-feed-header { padding: 10px 0; gap: 0; }
.home-feed-header h1 { display: none; }
.topic-scroll-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Without this, a flex child defaults to never shrinking below its
     content's natural width — which, with a long row of chips, stretched
     the whole page wider than the screen instead of scrolling in place. */
  min-width: 0;
  width: 100%;
}
.topic-scroll-bar::-webkit-scrollbar { display: none; }
.topic-chip-pill {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.topic-chip-pill:hover { background: var(--brand-light); }
.back-link { font-size: 18px; font-weight: 700; padding: 6px; border-radius: 999px; }
.back-link:hover { background: var(--brand-light); }

.feed-wrap { display: flex; flex-direction: column; }
.feed { display: flex; flex-direction: column; }

/* ---------- Composer ---------- */
.composer-card { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.composer-row { display: flex; gap: 12px; }
.composer-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.composer-fields textarea { border: none; padding: 8px 0; font-size: 18px; resize: vertical; }
.composer-fields textarea:focus { outline: none; }
.composer-fields > input[type="text"] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.file-label { display: inline-flex; }
.composer-image-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.composer-image-item { position: relative; width: 90px; height: 90px; }
.composer-image-item img { width: 100%; height: 100%; border-radius: 10px; display: block; object-fit: cover; }
.composer-image-remove {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); color: var(--bg); border: none; cursor: pointer; font-size: 14px; line-height: 1;
}

/* ---------- Rich text editor (bold/italic/underline/link) ---------- */
.rich-toolbar { display: flex; gap: 4px; }
.rich-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.rich-btn:hover { background: var(--brand-light); }
.rich-content {
  border: none; padding: 8px 0; font-size: 18px; line-height: 1.4; outline: none; min-height: 1.4em;
}
.rich-content:empty:before { content: attr(data-placeholder); color: var(--text-muted); }
.rich-content a { color: var(--brand); text-decoration: underline; }
.thought-edit-textarea.rich-content {
  font-size: 15px; min-height: 70px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}

/* ---------- Multiple images on a thought ---------- */
.thought-image-grid { display: grid; gap: 4px; }
.thought-image-grid-2 { grid-template-columns: 1fr 1fr; }
.thought-image-grid-3 { grid-template-columns: 1fr 1fr; }
.thought-image-grid-3 a:first-child { grid-row: span 2; }
.thought-image-grid-4 { grid-template-columns: 1fr 1fr; }
.thought-image-grid img { height: 100%; max-height: 260px; }
.thought-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thought-tags .tag-chip { text-decoration: none; }

/* ---------- Sidebar: search + Topics ---------- */
.side-search {
  position: relative; margin: 4px 0 8px;
}
.side-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex;
}
.side-search input {
  width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.side-topics { margin: 4px 0; }
.side-topics-label { font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 8px 12px 2px; }
.topic-link .side-icon svg { width: 20px; height: 20px; }

/* ---------- Settings: tag manager ---------- */
.tag-manager { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.tag-manager h2 { margin: 0 0 4px; font-size: 17px; }
.settings-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.tag-manager-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tag-manager-row { display: flex; gap: 8px; align-items: center; }
.tag-rename-input {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.tag-add-form { display: flex; gap: 8px; }
.tag-add-form input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.tag-manager-name { flex: 1; font-size: 14px; font-weight: 600; }
.tag-manager-hint { font-size: 12px; color: var(--text-muted); }

/* ---------- Search page ---------- */
.search-page-form { display: flex; gap: 8px; padding: 12px 16px; }
.search-page-form input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--brand-dark); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--brand-light); }
.btn-small { padding: 6px 12px; font-size: 13px; }
.btn-full { width: 100%; }

.avatar {
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Thought rows (X-style) ---------- */
.thought-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.thought-card:hover { background: #FAFAFB; }
.thought-avatar-link { flex-shrink: 0; }
.thought-main { flex: 1; min-width: 0; }
.thought-names { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 14px; }
.display-name { font-weight: 700; }
.username, .timestamp { color: var(--text-muted); font-size: 14px; }
.dot { color: var(--text-muted); }
.thought-body-link { color: inherit; display: block; }
.thought-body { font-size: 15px; line-height: 1.45; white-space: pre-wrap; margin-top: 2px; }
.thought-media img { width: 100%; border-radius: 14px; display: block; max-height: 420px; object-fit: cover; margin-top: 8px; }
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 14px; overflow: hidden; margin-top: 8px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.thought-actions { display: flex; justify-content: space-between; max-width: 440px; margin-top: 6px; }
.action-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-muted);
  font-size: 13px; font-weight: 500; padding: 0;
}
.action-icon-wrap { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; }
.action-btn:hover .action-icon-wrap { background: var(--brand-light); color: var(--brand); }
.like-btn:hover .action-icon-wrap { background: var(--like-bg); color: var(--like); }
.like-btn.active { color: var(--like); }
.like-btn.active .action-icon-wrap svg path { fill: currentColor; }
.reshare-btn:hover .action-icon-wrap { background: var(--reshare-bg); color: var(--reshare); }
.reshare-btn.active { color: var(--reshare); }
.comment-action:hover .action-icon-wrap { background: var(--comment-bg); color: var(--comment-color); }
.share-btn:hover .action-icon-wrap { background: var(--brand-light); color: var(--brand); }
.edit-btn:hover .action-icon-wrap { background: var(--brand-light); color: var(--brand); }
.delete-btn:hover .action-icon-wrap { background: var(--like-bg); color: var(--danger); }

.share-menu {
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 190px;
}
.share-menu a,
.share-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.share-menu a:hover,
.share-menu button:hover { background: var(--brand-light); color: var(--brand); }

.reshare-tag { color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 8px 16px 0; display: flex; align-items: center; gap: 6px; }

.expiry-tag { color: var(--text-muted); font-size: 13px; }
.expiry-tag.expired { color: #B45309; }
.expiry-tag.draft-tag { color: #7C3AED; font-weight: 700; }

.pagination-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 40px; }
.page-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; background: var(--card); }
.page-nav-btn:hover { background: var(--brand-light); }
.page-nav-btn.disabled { color: var(--text-muted); opacity: 0.5; pointer-events: none; }
.page-status { color: var(--text-muted); font-size: 13px; }
.publish-btn { margin-right: auto; }
.edited-tag { color: var(--text-muted); font-size: 13px; font-weight: 400; }

/* ---------- Edit-in-place ---------- */
.thought-edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.thought-edit-textarea { font-size: 15px; resize: vertical; min-height: 70px; }
.thought-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.thought-edit-actions .form-error { flex: 1; margin: 0; }

/* ---------- Composer duration picker ---------- */
.composer-duration { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.composer-duration-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.duration-options { display: flex; gap: 6px; flex-wrap: wrap; }
.duration-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.duration-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.duration-option:has(input:checked),
.duration-option.checked { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-light); }
.btn-icon { display: inline-flex; }
#composer-submit { gap: 6px; }

.login-prompt-card { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 20px 16px; border-bottom: 1px solid var(--border); }
.login-prompt-card.small { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); border-bottom: 1px solid var(--border); margin: 12px 16px; }
.login-prompt-actions { display: flex; gap: 10px; }

.form-error { color: var(--danger); font-size: 13px; min-height: 16px; display: block; }

/* ---------- Auth pages ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 40px 16px; min-height: 100vh; }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.auth-logo {
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--brand-light);
  border: 1px solid var(--brand-light);
  padding: 6px;
  box-sizing: border-box;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.auth-brand-text { font-weight: 800; font-size: 22px; color: var(--brand-dark); }
.auth-card h1 { margin: 0; font-size: 22px; }
.auth-sub { color: var(--text-muted); margin: 0 0 10px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.auth-switch { text-align: center; font-size: 14px; color: var(--text-muted); }
.auth-switch a { color: var(--brand); font-weight: 700; }
.auth-fineprint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 4px; }
.forgot-result { width: 100%; text-align: left; font-size: 14px; color: var(--text); background: var(--brand-light); border-radius: 10px; padding: 12px 14px; }
.forgot-result p { margin: 0 0 8px; }
.forgot-result p:last-child { margin-bottom: 0; }
.forgot-result a { color: var(--brand-dark); font-weight: 700; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

/* ---------- Settings form ---------- */
.settings-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; max-width: 480px; }
.settings-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: #fff;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-bulb { display: flex; }
#toast-message { font-size: 14px; font-weight: 600; }

/* ---------- Comments ---------- */
.comments-section { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.comments-section h2 { margin: 0; font-size: 17px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-input-row { display: flex; gap: 8px; align-items: flex-end; }
.comment-input-row textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow: hidden;
  max-height: 200px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
}
.comment-input-row button { flex-shrink: 0; }
.comment-guest-step { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.comment-guest-step input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-row { display: flex; gap: 10px; }
.comment-body { flex: 1; }
.comment-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.comment-text { font-size: 14px; margin-top: 2px; }

/* ---------- Profile ---------- */
.profile-header { display: flex; gap: 16px; align-items: flex-start; padding: 20px 16px; border-bottom: 1px solid var(--border); }
.profile-avatar { width: 72px; height: 72px; font-size: 26px; }
.profile-info { flex: 1; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name-row h1 { margin: 0; font-size: 20px; }
.profile-bio { margin: 6px 0; font-size: 14px; }
.profile-detail { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.profile-detail strong { color: var(--text); font-weight: 600; }
.profile-tags { font-size: 13px; color: var(--text-muted); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-tags strong { color: var(--text); font-weight: 600; }
.tag-chip { background: var(--brand-light); color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.profile-stats { display: flex; gap: 16px; font-size: 14px; margin-top: 10px; }
.profile-stats strong { color: var(--text); }
.profile-joined { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.profile-actions { flex-shrink: 0; }

.profile-tabs { display: flex; border-bottom: 1px solid var(--border); }
.profile-tab { flex: 1; text-align: center; padding: 14px; font-weight: 700; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.profile-tab:hover { background: #FAFAFB; }
.profile-tab.active { color: var(--text); border-bottom-color: var(--brand); }

.empty-state { text-align: center; padding: 40px 16px; color: var(--text-muted); }

/* ---------- Right column ---------- */
.right-col {
  width: var(--right-w);
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 16px 20px;
}
.right-card { background: var(--brand-light); border-radius: var(--radius); padding: 16px; }
.right-card h2 { margin: 0 0 6px; font-size: 17px; }
.right-card p { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.right-stats { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.right-stats strong { color: var(--text); }

/* ---------- Owner dashboard card ---------- */
.dashboard-card { display: flex; flex-direction: column; gap: 14px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dashboard-stat { background: var(--card); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.dashboard-stat strong { font-size: 20px; line-height: 1.2; }
.dashboard-stat span { font-size: 12px; color: var(--text-muted); }
.dashboard-section h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dashboard-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 3px 0; }
.dashboard-row span:first-child { flex: 1; color: var(--text-muted); }
.dashboard-row strong { font-size: 14px; }
.dashboard-prev { color: var(--text-muted); font-size: 12px; }
.dashboard-sparkline { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.dashboard-bar { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 4px; }

/* ---------- Personal intro (home page, logged out) ---------- */
.intro-card {
  display: flex;
  gap: 14px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}
.intro-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.intro-text p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.intro-text p:last-child { margin-bottom: 0; }

/* ---------- Follow along card photo ---------- */
.follow-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.follow-card-name { font-weight: 700; font-size: 15px; }
.follow-card-followers { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.follow-card-followers strong { color: var(--text); }
.follow-card-title { margin: 2px 0 6px; font-size: 17px; }
.follow-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---------- Settings: avatar upload ---------- */
.settings-avatar-row { display: flex; align-items: center; gap: 14px; }

/* ---------- Email follow + message (no login needed) ---------- */
.email-follow-form { display: flex; gap: 8px; }
.email-follow-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.email-follow-form button { flex-shrink: 0; }
.visitor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visitor-actions .email-follow-form { flex: 1; min-width: 180px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-card h2 { margin: 0 0 6px; font-size: 19px; }
.modal-sub { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); }
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
#message-form { display: flex; flex-direction: column; gap: 12px; }
#message-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
#message-form input,
#message-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

/* ---------- Theme toggle (light bulb) ---------- */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #14161a;
  background: #14161a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
[data-theme="dark"] .theme-toggle {
  background: #ffffff;
  border-color: #ffffff;
  color: #14161a;
}
.theme-toggle:hover { transform: scale(1.07); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle-icon { display: flex; align-items: center; justify-content: center; }
.theme-toggle-icon svg { width: 22px; height: 22px; }

.sidebar, .right-col, .thought-card, .composer-card, .right-card,
.auth-card, .modal-card, .login-prompt-card, .inbox-message, .inbox-list li,
.settings-form, .thought-edit-form {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---------- Inbox (owner only) ---------- */
.inbox-section { margin-bottom: 28px; }
.inbox-section h2 { font-size: 17px; margin: 0 0 12px; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inbox-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
.inbox-message { padding: 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.inbox-message-meta { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-bottom: 6px; color: var(--text-muted); }
.inbox-message-body { font-size: 14px; white-space: pre-wrap; }
.inbox-footnote { font-size: 14px; padding: 0 4px; }

/* ---------- Mobile top bar (brand + search + Notify + theme toggle) ---------- */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 25;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.mobile-topbar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mobile-topbar-brand .brand-text { display: inline; font-weight: 800; font-size: 17px; color: var(--brand-dark); white-space: nowrap; }
.mobile-search-form { position: relative; flex: 1 1 auto; min-width: 0; }
.mobile-search-form .side-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex; }
.mobile-search-form .side-search-icon svg { width: 16px; height: 16px; }
.mobile-search-form input {
  width: 100%; padding: 9px 10px 9px 34px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--text);
}
/* The fixed, global toggle is for desktop/tablet only — mobile gets its
   own inline copy inside .mobile-topbar instead, so the two never overlap. */
.theme-toggle-inline {
  position: static; flex-shrink: 0; width: 36px; height: 36px;
  box-shadow: none; border: 1px solid var(--border); background: var(--card); color: var(--text);
}
[data-theme="dark"] .theme-toggle-inline { background: var(--card); border-color: var(--border); color: var(--text); }
.mobile-pill-btn {
  flex-shrink: 0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.mobile-pill-btn:hover { background: var(--brand-light); }
.mobile-icon-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; background: none; border: none; color: var(--text);
}
.mobile-icon-btn svg { width: 18px; height: 18px; }
.mobile-icon-btn:hover { background: var(--brand-light); }
.mobile-topics { position: relative; flex-shrink: 0; }
.mobile-topics summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; color: var(--text); cursor: pointer;
}
.mobile-topics summary svg { width: 18px; height: 18px; }
.mobile-topics summary::-webkit-details-marker { display: none; }
.mobile-topics summary:hover { background: var(--brand-light); }
.mobile-topics[open] summary { background: var(--brand-light); color: var(--brand-dark); }
.mobile-topics-list {
  position: absolute; right: 0; top: 38px; z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; min-width: 160px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
}
.mobile-topics-list a { padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--text); }
.mobile-topics-list a:hover { background: var(--brand-light); }

/* ---------- Mobile tab bar ---------- */
.mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
[data-theme="dark"] .mobile-tabbar { background: rgba(15, 20, 25, 0.9); }
.tab-link {
  display: flex; color: var(--text); padding: 6px;
  /* Home/About are <a> tags (no browser chrome to reset) but Follow is a
     <button>, which without this would show the default gray/white button
     box around the icon instead of just the icon. */
  background: none; border: none; font: inherit; cursor: pointer;
}
.tab-link.active { color: var(--brand); }
.tab-post-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 999px;
}

/* ================= Responsive breakpoints ================= */

/* Medium and up: icon-only sidebar always visible (already default above) */

/* Wide screens: full sidebar with labels + right column + hide mobile tab bar */
@media (min-width: 1080px) {
  .sidebar { width: var(--sidebar-w-wide); align-items: stretch; }
  .brand { justify-content: flex-start; }
  .brand-text { display: inline; }
  .side-link { justify-content: flex-start; }
  .side-label { display: inline; }
  .post-btn { width: 100%; border-radius: 999px; }
  .post-btn-label { display: inline; }
  .side-user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px; border-radius: 999px;
  }
  .side-user-chip:hover { background: var(--brand-light); }
  .side-user-info { flex: 1; min-width: 0; }
  .side-user-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-user-handle { font-size: 13px; color: var(--text-muted); }
  .side-logout-btn { background: none; border: none; color: var(--text-muted); padding: 6px; border-radius: 999px; flex-shrink: 0; }
  .side-logout-btn:hover { background: var(--card); color: var(--text); }
  .side-auth-buttons { display: flex; flex-direction: column; gap: 8px; padding: 8px; }

  .right-col { display: flex; }
  .mobile-tabbar { display: none; }
  .feed-col { padding-bottom: 0; }
}

/* Narrow / mobile: hide sidebar entirely, show top bar + bottom tab bar,
   full width feed, and stack the right column (About/Follow card) below
   the feed instead of hiding it. */
@media (max-width: 699px) {
  .sidebar { display: none; }
  .mobile-topbar { display: flex; }
  /* Mobile uses the inline theme toggle inside .mobile-topbar instead — the
     fixed global one would otherwise float on top and overlap it. */
  .theme-toggle-global { display: none; }
  .shell { flex-direction: column; justify-content: flex-start; }
  .feed-col { max-width: 100%; border-right: none; padding-bottom: 76px; }
  /* A bit more than .feed-col's padding — the Follow card's button row
     sits right at the edge, so it gets extra breathing room above the
     fixed bottom tab bar. */
  .right-col { display: flex; width: 100%; padding: 0 16px 120px; }
  /* About/Follow cards start closed on mobile — opened individually via
     the About/Follow buttons, now down in the bottom tab bar
     (data-toggle-panel in app.js) */
  .mobile-panel { display: none; }
  .mobile-panel.mobile-panel-open { display: block; }
  .mobile-tabbar { display: flex; }
  /* Visitor tab bar (Home/About/Follow) reads left to right instead of
     centered — the logged-in owner's bar (Home/Post/Profile) keeps the
     centered post button, so this only applies via the extra class. */
  .mobile-tabbar-start { justify-content: flex-start; gap: 28px; padding-left: 24px; }
  .thought-actions { max-width: none; }
  .profile-header { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats { justify-content: center; }
}

/* Between mobile and wide: icon-only sidebar, no right column (default styles already handle this) */