* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #071a43;
  --bg-deep: #04102c;
  --card: rgba(18, 39, 79, 0.82);
  --card-solid: #10274f;
  --line: rgba(255,255,255,0.12);
  --text: #ffffff;
  --muted: #aebbd7;
  --purple: #7b4dff;
  --pink: #f03bb8;
  --blue: #239cff;
  --teal: #19c7b1;
  --danger: #ff5c75;
  --shadow: 0 20px 60px rgba(0,0,0,0.32);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #050f2d;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
}

button, input, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
}

.app-shell {
  min-height: 100vh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.screen {
  display: none;
  min-height: 100vh;
  position: relative;
}

.screen.active {
  display: block;
}

/* Splash */
.splash-screen {
  background:
    radial-gradient(circle at 50% 35%, rgba(111, 69, 255, 0.38), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(0, 156, 255, 0.18), transparent 30%),
    #061744;
  align-items: center;
  justify-content: center;
}

.splash-screen.active {
  display: flex;
}

.splash-content {
  text-align: center;
  width: 100%;
  padding: 32px;
  animation: splashIn .8s ease both;
}

.brand-mark {
  object-fit: contain;
  display: block;
}

.splash-logo {
  width: 150px;
  height: 150px;
  margin: 0 auto 12px;
  filter: drop-shadow(0 10px 28px rgba(95, 74, 255, .45));
}

.splash-content h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: -1.8px;
}

.splash-content p {
  color: #c5cdec;
  margin: 8px 0 34px;
  font-size: 15px;
}

.splash-content small {
  display: block;
  margin-top: 18px;
  color: #8999c0;
  font-size: 11px;
}

.splash-loader {
  width: 110px;
  height: 4px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.splash-loader span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  animation: load 1.4s ease-in-out infinite;
}

.splash-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
}

.glow-one {
  background: #b24dff;
  top: 12%;
  left: -70px;
}

.glow-two {
  background: #199dff;
  bottom: 5%;
  right: -70px;
}

/* Auth */
.auth-background {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(245, 44, 183, .22), transparent 28%),
    radial-gradient(circle at 90% 90%, rgba(28, 149, 255, .20), transparent 32%),
    #071a43;
}

.auth-card,
.form-container {
  position: relative;
  z-index: 1;
  padding: 38px 26px 28px;
}

.welcome-card {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.brand-logo {
  width: 105px;
  height: 105px;
  margin: 0 auto 4px;
}

.welcome-card h1 {
  font-size: 39px;
  margin: 0;
  letter-spacing: -1.5px;
}

.tagline {
  color: #aebbd7;
  margin: 7px 0 34px;
}

.primary-button,
.secondary-button,
.biometric-button,
.back-home-button {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  color: #fff;
  font-weight: 750;
  transition: transform .18s ease, opacity .18s ease;
}

.primary-button:active,
.secondary-button:active,
.biometric-button:active {
  transform: scale(.98);
}

.primary-button {
  background: linear-gradient(110deg, var(--pink), var(--purple), var(--blue));
  box-shadow: 0 12px 30px rgba(111, 75, 255, .26);
}

.secondary-button {
  margin-top: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(190, 178, 255, .65);
}

.micro-copy {
  color: #7789b1;
  font-size: 12px;
  margin-top: 24px;
}

.top-bar {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 18, 48, .92);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.top-bar span {
  font-weight: 750;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: white;
  background: rgba(255,255,255,.07);
  font-size: 28px;
}

.section-heading {
  margin-bottom: 26px;
}

.eyebrow {
  color: #a978ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.section-heading h2,
.form-container h2 {
  margin: 5px 0 6px;
  font-size: 27px;
  letter-spacing: -.7px;
}

.section-heading p,
.form-container p {
  color: var(--muted);
  margin: 0;
}

.form-container label {
  display: block;
  margin: 17px 0 8px;
  font-size: 13px;
  font-weight: 650;
  color: #dbe3f5;
}

input, textarea {
  width: 100%;
  border: 1px solid rgba(170, 190, 230, .16);
  background: rgba(255,255,255,.055);
  color: #fff;
  border-radius: 14px;
  padding: 15px;
  outline: none;
}

input:focus, textarea:focus {
  border-color: #916cff;
  box-shadow: 0 0 0 3px rgba(129, 90, 255, .10);
}

textarea {
  resize: vertical;
}

.password-wrap,
.username-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 68px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 7px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: #bfaaff;
  font-size: 12px;
}

.username-wrap span {
  position: absolute;
  left: 15px;
  top: 15px;
  color: #9f8aff;
  font-weight: 700;
}

.username-wrap input {
  padding-left: 32px;
}

.input-hint,
.optional {
  color: #7f91b8;
  font-size: 11px;
}

.form-message {
  min-height: 18px;
  margin: 12px 0 4px;
  color: #ffb7c3;
  font-size: 12px;
}

.text-button {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 8px;
  background: transparent;
  color: #bba8ff;
  font-size: 13px;
}

.legal-copy {
  font-size: 10px !important;
  color: #7284ab !important;
  text-align: center;
  margin-top: 24px !important;
}

.profile-preview {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-weight: 800;
  background: linear-gradient(145deg, #9d67ff, #e53db8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10);
}

.avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 21px;
  font-size: 25px;
}

.avatar-medium {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.avatar-small {
  width: 35px;
  height: 35px;
  border-radius: 12px;
}

.avatar-profile {
  width: 90px;
  height: 90px;
  border-radius: 30px;
  font-size: 34px;
  margin: 0 auto;
}

.theme-picker {
  display: flex;
  gap: 12px;
  margin: 12px 0 26px;
}

.theme-choice {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid transparent;
}

.theme-choice.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

.theme-purple { background: linear-gradient(135deg,#713cff,#f044bd); }
.theme-pink { background: linear-gradient(135deg,#ff6ab9,#ff3d77); }
.theme-blue { background: linear-gradient(135deg,#18b6ff,#5368ff); }
.theme-teal { background: linear-gradient(135deg,#12d6b1,#168fff); }

.login-brand {
  text-align: center;
  margin: 22px 0 28px;
}

.mini-logo {
  width: 58px;
  height: 58px;
  margin: 0 auto 4px;
}

.login-brand h2 {
  margin-bottom: 4px;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #7284ab;
  font-size: 12px;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.biometric-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(170,190,230,.15);
  text-align: left;
}

.biometric-button small {
  display: block;
  margin-top: 2px;
  color: #8293b8;
  font-weight: 450;
}

.fingerprint-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3c9fff, #8b4dff, #ed42c2);
  font-size: 24px;
}

/* Home */
.main-screen {
  padding-bottom: 76px;
}

.app-header {
  height: 66px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(5,18,48,.82);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 19px;
}

.header-logo {
  width: 31px;
  height: 31px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.round-button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #e9edfb;
  background: rgba(255,255,255,.06);
  font-size: 19px;
}

.notification-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.notification-bell-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.feed-tabs {
  display: flex;
  padding: 13px 16px 5px;
  gap: 7px;
}

.feed-tab {
  padding: 9px 16px;
  border-radius: 12px;
  color: #8fa1c7;
  background: transparent;
  font-weight: 700;
}

.feed-tab.active {
  color: white;
  background: rgba(130,88,255,.16);
}

.home-content {
  padding: 10px 16px 20px;
}

.welcome-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 22px;
  padding: 19px;
  background:
    linear-gradient(135deg, rgba(117,74,255,.24), rgba(17,159,255,.08)),
    rgba(255,255,255,.045);
  border: 1px solid rgba(174,151,255,.14);
  overflow: hidden;
}

.welcome-strip h2 {
  margin: 5px 0;
  font-size: 20px;
}

.welcome-strip p {
  margin: 0;
  color: #9daed0;
  font-size: 12px;
}

.mini-gradient-orb {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(135deg,#219fff,#7b4dff,#f13ab8);
  filter: blur(.1px);
  transform: rotate(12deg);
  box-shadow: 0 12px 30px rgba(109,72,255,.28);
}

.composer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0;
  padding: 11px;
  color: #8d9fc6;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 17px;
  text-align: left;
}

.composer-arrow {
  margin-left: auto;
  color: #ad96ff;
  font-size: 24px;
}

.demo-post {
  padding: 15px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.post-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-top span {
  display: block;
  color: #8294bb;
  font-size: 11px;
  margin-top: 2px;
}

.post-more {
  margin-left: auto;
  background: transparent;
  color: #8193b9;
}

.demo-post > p {
  color: #e3e8f6;
  line-height: 1.5;
  font-size: 14px;
}

.demo-media {
  height: 190px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,76,192,.70), transparent 25%),
    radial-gradient(circle at 30% 70%, rgba(23,157,255,.65), transparent 30%),
    linear-gradient(145deg,#243f87,#612d8b);
}

.post-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.post-actions button {
  color: #99a9c9;
  background: transparent;
  font-size: 12px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: min(520px, 100%);
  transform: translateX(-50%);
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(4,15,41,.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(20px);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #7184ad;
  background: transparent;
  font-size: 20px;
}

.nav-item span {
  font-size: 9px;
  font-weight: 650;
}

.nav-item.active {
  color: #d5b9ff;
}

/* Placeholder */
.placeholder-screen {
  padding: 90px 24px 100px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 25%, rgba(112,76,255,.18), transparent 32%),
    var(--bg);
}

.placeholder-inner {
  margin-top: 18vh;
}

.placeholder-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(35,156,255,.18), rgba(240,59,184,.18));
  color: #c7adff;
  font-size: 34px;
}

.placeholder-inner h2 {
  margin: 0 0 7px;
}

.placeholder-inner p {
  color: #8496bd;
  line-height: 1.5;
}

.back-home-button {
  margin-top: 30px;
  background: linear-gradient(110deg, var(--pink), var(--purple), var(--blue));
}

.profile-hero {
  text-align: center;
  padding: 70px 24px 25px;
}

.profile-hero h2 {
  margin: 15px 0 3px;
}

.profile-hero p {
  color: #95a6c9;
  margin: 5px 0;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-top: 25px;
}

.profile-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-stats span {
  font-size: 11px;
  color: #8495b9;
}

/* Animations */
@keyframes load {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(180%); }
  100% { transform: translateX(280%); }
}

@keyframes splashIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
  body {
    background: #020b20;
  }

  .app-shell {
    box-shadow: 0 0 100px rgba(67,75,180,.12);
  }
}

/* Phase 2 — posting, notebook, settings */
.post-composer-heading {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.post-composer-heading span {
  display:block;
  color:#8194bb;
  font-size:12px;
  margin-top:3px;
}
.post-composer-container textarea,
.form-container textarea {
  width:100%;
  box-sizing:border-box;
  resize:vertical;
}
.post-tools {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 22px;
  min-height:38px;
}
.media-picker {
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  width:auto !important;
  margin:0 !important;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.05);
  color:#d9e1f5;
  font-size:12px !important;
  cursor:pointer;
}
.media-picker span { color:#c79cff; font-size:18px; }
.media-name { color:#7488b0; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.expiry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:9px 0 7px; }
.expiry-choice { padding:12px 7px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.04); color:#9aabca; }
.expiry-choice.selected { color:white; border-color:#a06aff; background:linear-gradient(120deg,rgba(240,59,184,.22),rgba(35,156,255,.18)); }
.post-media-image { display:block; width:100%; max-height:520px; object-fit:cover; border-radius:15px; margin-top:10px; background:#071633; }
.post-media-video { display:block; width:100%; max-height:520px; min-height:190px; object-fit:contain; border-radius:15px; margin-top:10px; background:#020817; }
.post-media-preview { width:100%; margin:2px 0 16px; }
.post-media-preview-card { position:relative; width:100%; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.18); }
.post-composer-media-preview { display:block; width:100%; max-height:300px; object-fit:contain; background:#020817; }
.media-preview-remove { position:absolute; top:8px; right:8px; width:34px; height:34px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(5,12,30,.78); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.media-preview-remove:active { transform:scale(.95); }
.hidden-post-video { display:block; width:100%; max-height:360px; min-height:170px; object-fit:contain; border-radius:14px; background:#020817; }

.profile-menu { padding:0 24px 110px; display:grid; gap:10px; }
.menu-card { width:100%; display:grid; grid-template-columns:42px 1fr 20px; align-items:center; gap:11px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.045); color:#edf2ff; }
.menu-card > span:first-child { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,rgba(123,77,255,.35),rgba(240,59,184,.3)); font-size:19px; }
.menu-card strong, .menu-card small { display:block; }
.menu-card small { color:#7f92b8; margin-top:3px; font-size:10px; }
.menu-card b { color:#8ea1c7; font-size:20px; }
.menu-card.danger { border-color:rgba(255,104,126,.18); }
.menu-card.danger > span:first-child { background:rgba(255,90,110,.1); }
.danger-button { color:#ff9baa !important; border-color:rgba(255,104,126,.22) !important; }
.setting-card { padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04); margin-bottom:10px; }
.setting-card strong, .setting-card span { display:block; }
.setting-card span { color:#8194bb; font-size:12px; margin-top:5px; line-height:1.4; }
.about-container { text-align:center; }
.about-logo { margin:15px auto 12px; }
.about-container p { color:#94a6c9; line-height:1.55; text-align:left; }
.about-container p strong { color:#e9edfa; }
.empty-post { min-height:120px; }
/* Profile Photo Preview */
.photo-preview-screen {
  padding-bottom: 40px;
  overflow-y: auto;
}

.photo-preview-container {
  padding: 30px 24px 40px;
  text-align: center;
}

.photo-preview-heading {
  margin-bottom: 22px;
  text-align: left;
}

.photo-preview-heading .eyebrow {
  display: block;
  margin-bottom: 6px;
}

.photo-preview-heading h2 {
  margin: 0 0 8px;
  font-size: 27px;
  letter-spacing: -.7px;
}

.photo-preview-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.profile-photo-preview-frame {
  width: 230px;
  height: 230px;
  margin: 26px auto 28px;
  padding: 5px;
  border-radius: 34px;
  background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .30);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-photo-preview-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 29px;
  background: #0a1940;
}

.photo-preview-screen .primary-button {
  margin-top: 8px;
}

.photo-preview-screen .secondary-button {
  margin-top: 12px;
}
/* Profile avatar photo sizing */
.avatar {
  position: relative;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
  border-radius: inherit;
}

.avatar-image[src]:not([src=""]) {
  display: block;
}

.avatar-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Keep profile photo compact and circular/rounded */
.avatar-profile {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px;
  min-height: 90px;
  max-width: 90px;
  max-height: 90px;
  overflow: hidden;
  border-radius: 30px;
}

/* Header avatar */
.avatar-medium {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  overflow: hidden;
}

/* Composer avatar */
.avatar-small {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px;
  min-height: 35px;
  max-width: 35px;
  max-height: 35px;
  overflow: hidden;
}

/* Make every profile image stay inside its avatar */
.avatar-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
}
/* Profile top navigation */
.profile-top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.profile-top-bar .icon-button {
  display: grid;
  place-items: center;
  font-size: 32px;
  line-height: 1;
}
/* Hidden Posts - match existing Settings cards */
#hiddenPostsButton {
  display: flex;
  align-items: center;
  text-align: left;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

#hiddenPostsButton strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 6px;
}

#hiddenPostsButton span {
  display: block;
  color: #9ba9c8;
  font-size: 0.9rem;
  line-height: 1.4;
  padding-right: 35px;
}

#hiddenPostsButton b {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 400;
}
/* Media-aware posting states */
#publishPostButton:disabled { opacity:.72; cursor:wait; transform:none; }

/* TICHEDZE VOICE RECORD TOUCH FIX */
.voice-recorder-overlay { pointer-events:auto!important; touch-action:auto!important; }
.voice-recorder-card { pointer-events:auto!important; }
.voice-recorder-actions { position:relative; z-index:20; pointer-events:auto!important; }
.voice-recorder-actions button { pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent; }
.voice-record-main { position:relative; z-index:30; pointer-events:auto!important; }


/* TICHEDZE PROFILE IDENTITY RING */
/* The rounded color is part of the user's identity and follows the theme selected during profile creation. */
.avatar.avatar-theme-purple { box-shadow: 0 0 0 3px rgba(123,77,255,.78), 0 8px 24px rgba(123,77,255,.20), inset 0 0 0 2px rgba(255,255,255,.10); }
.avatar.avatar-theme-pink { box-shadow: 0 0 0 3px rgba(255,92,173,.78), 0 8px 24px rgba(255,92,173,.20), inset 0 0 0 2px rgba(255,255,255,.10); }
.avatar.avatar-theme-blue { box-shadow: 0 0 0 3px rgba(35,156,255,.78), 0 8px 24px rgba(35,156,255,.20), inset 0 0 0 2px rgba(255,255,255,.10); }
.avatar.avatar-theme-teal { box-shadow: 0 0 0 3px rgba(25,199,177,.78), 0 8px 24px rgba(25,199,177,.20), inset 0 0 0 2px rgba(255,255,255,.10); }
.avatar.avatar-theme-purple.avatar-profile, .avatar.avatar-theme-pink.avatar-profile, .avatar.avatar-theme-blue.avatar-profile, .avatar.avatar-theme-teal.avatar-profile { border-radius: 30px; }

/* TICHEDZE PROFILE / CHAT INTERACTION INTEGRITY */
.tichedze-post-author,
.tichedze-post-author-text {
  pointer-events:auto !important;
  position:relative;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.chat-composer,
.chat-composer-wrap {
  position:relative;
  z-index:10;
}
.chat-send-button {
  pointer-events:auto !important;
  touch-action:manipulation !important;
  position:relative;
  z-index:30;
}


/* ==========================================================
   TICHEDZE UI SPACING / SEARCH POLISH
   Keep section titles close to their top bars and keep the
   chat composer in its normal position directly above bottom nav.
========================================================== */
.discover-container,
.friends-container {
  padding-top: 18px !important;
}

.profile-hero {
  padding-top: 28px;
}

.chat-conversation {
  height: calc(100vh - 138px) !important;
  min-height: 0;
  padding-bottom: 8px !important;
}

.chat-composer-wrap {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(7,26,67,0), rgba(7,26,67,.96) 24%);
}

.chat-composer {
  margin: 0;
}

/* ==========================================================
   TICHEDZE PINNED APP HEADERS — REAL SCREEN SCROLL MODEL
   Headers stay fixed to the app viewport while each screen's
   content scrolls underneath/inside its own screen.
========================================================== */

html,
body {
  height: 100%;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
}

.screen.active {
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Every section title bar is pinned to the top of the app viewport. */
.screen.active > .top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  width: min(520px, 100vw) !important;
  transform: translateX(-50%) !important;
  height: 68px !important;
  z-index: 500 !important;
  background: rgba(5, 18, 48, .98) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Content begins below its pinned title bar. */
.screen.active > .top-bar + .form-container {
  margin-top: 68px !important;
}

.screen.active > .top-bar + .profile-hero {
  margin-top: 68px !important;
}

.screen.active > .top-bar + .chat-conversation {
  margin-top: 68px !important;
}

/* Profile: title fixed, profile body is the scrolling area. */
#profileScreen.active {
  overflow-y: auto;
}

/* Chat conversation: title fixed; messages/composer occupy the rest. */
[id^="chatConversation_"].active,
[id^="chatGroup_"].active {
  overflow: hidden;
}

[id^="chatConversation_"] .chat-conversation,
[id^="chatGroup_"] .chat-conversation {
  height: calc(100dvh - 68px) !important;
  min-height: 0 !important;
}

/* Home has two pinned rows: the main app header and feed tabs. */
#homeScreen.active {
  overflow: hidden;
}

#homeScreen.active > .app-header {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  width: min(520px, 100vw) !important;
  transform: translateX(-50%) !important;
  z-index: 490 !important;
  background: rgba(5, 18, 48, .98) !important;
}

#homeScreen.active > .feed-tabs {
  position: fixed !important;
  top: 66px !important;
  left: 50% !important;
  width: min(520px, 100vw) !important;
  transform: translateX(-50%) !important;
  z-index: 489 !important;
  margin: 0 !important;
  background: rgba(7, 26, 67, .98) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

#notebookScreen.active > .top-bar + .notebook-shell {
  margin-top: 68px !important;
}

#homeScreen.active > .home-content {
  margin-top: 111px !important;
  height: calc(100dvh - 111px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 105px !important;
}

/* Keep the bottom navigation above all scrolling content. */
.bottom-nav {
  z-index: 600 !important;
}

/* The title bar itself never becomes part of a screen's scroll layer. */
.screen.active > .top-bar,
#homeScreen.active > .app-header,
#homeScreen.active > .feed-tabs {
  flex-shrink: 0;
}


/* TICHEDZE POST COMMENTS */
.comments-overlay{
  align-items:flex-end;
  padding:12px;
}
.comments-card{
  width:min(680px,100%);
  max-height:min(86vh,760px);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  overflow:hidden;
}
.comments-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.comments-header h2{
  margin:5px 0 0;
}
.comments-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.comments-back{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:#fff;font-size:26px;line-height:1}
.comments-back:active{transform:scale(.97)}

.comments-close{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:27px;
}
.comments-post-context{
  padding:11px 13px;
  border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  display:grid;
  gap:3px;
}
.comments-post-context strong{font-size:13px}
.comments-post-context span{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comments-list{
  flex:1;
  min-height:120px;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:10px;
  padding:2px 2px 8px;
}
.post-comment{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.post-comment-body{
  min-width:0;
  flex:1;
  padding:10px 12px;
  border-radius:16px 16px 16px 5px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.06);
}
.post-comment-meta{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}
.post-comment-meta strong{font-size:13px}
.post-comment-meta span,
.post-comment-meta small{
  color:#8294bb;
  font-size:10px;
}
.post-comment-body p{
  margin:5px 0 0;
  color:#e6ebf7;
  line-height:1.45;
  font-size:13px;
  word-break:break-word;
}
.tichedze-mention{
  color:#b99cff;
  font-weight:750;
}
.comments-empty{
  min-height:150px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  color:#8294bb;
  text-align:center;
}
.comments-empty div{font-size:30px}
.comments-empty strong{color:#dfe6f7}
.comment-compose{
  position:relative;
  flex:0 0 auto;
  padding-top:6px;
}
.comment-mention-hint{
  color:#7f92b9;
  font-size:11px;
  margin:0 2px 7px;
}
.comment-mention-hint strong{
  color:#c49fff;
  font-size:14px;
}
.comment-compose-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.comment-compose textarea{
  flex:1;
  min-height:48px;
  max-height:120px;
  resize:none;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:12px 13px;
  background:rgba(255,255,255,.055);
  color:#fff;
  outline:none;
  font:inherit;
}
.comment-compose textarea:focus{
  border-color:rgba(146,91,255,.72);
  box-shadow:0 0 0 3px rgba(123,77,255,.12);
}
.comment-compose textarea::placeholder{color:#7386ae}
.comment-send-button{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,#239cff,#7b4dff,#f03bb8);
  color:#fff;
  font-size:19px;
}
.comment-mention-picker{
  position:absolute;
  left:0;
  right:56px;
  bottom:58px;
  max-height:230px;
  overflow:auto;
  display:none;
  padding:6px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:rgba(7,20,50,.98);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  z-index:5;
}
.comment-mention-picker.show{display:grid;gap:4px}
.comment-mention-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
}
.comment-mention-option:hover,
.comment-mention-option:focus{
  background:rgba(255,255,255,.07);
}
.comment-mention-option > span:last-child{
  display:grid;
  gap:1px;
}
.comment-mention-option small{
  color:#8294bb;
  font-size:10px;
}
.comment-mention-empty{
  padding:12px;
  color:#8294bb;
  font-size:12px;
}


/* TICHEDZE COMMENT THREADS + ATTACHMENTS */
.post-comment{
  position:relative;
  margin-left:calc(var(--comment-depth, 0) * 18px);
}
.comment-reply .post-comment-body{
  background:rgba(255,255,255,.045);
}

/* Hidden state must always win over flex/grid display rules. */
.comment-edit-context[hidden],
.comment-reply-context[hidden],
.comment-tool-panel[hidden],
.comment-mention-picker[hidden]{
  display:none !important;
}

/* Replies live inside their parent comment instead of appearing as separate root comments. */
.comment-replies{
  display:grid;
  gap:8px;
  margin-top:10px;
  padding:8px 0 0 14px;
  border-left:2px solid rgba(123,77,255,.22);
}
.comment-replies .post-comment{
  margin-left:0;
}
.comment-replies .post-comment-body{
  padding:9px 11px;
  border-radius:14px 14px 14px 5px;
}
.post-comment-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:7px;
}
.post-comment-actions button{
  border:0;
  background:transparent;
  color:#8fa1c5;
  font-size:10px;
  padding:2px 0;
}
.post-comment-actions button:hover{color:#d9b7ff}
.comment-reply-context,
.comment-edit-context{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  margin-bottom:7px;
  border-left:3px solid var(--purple);
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:#a9b8d5;
  font-size:10px;
}
.comment-reply-context strong{flex:1;color:#eef2fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comment-reply-context button,
.comment-edit-context button{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  padding:3px 6px;
}
.comment-attachment-preview{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px;
  padding:7px 10px;
  border-radius:11px;
  background:rgba(123,77,255,.12);
  border:1px solid rgba(123,77,255,.22);
  color:#cfc5ff;
  font-size:10px;
}
.comment-attachment-preview button{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size:17px;
}
.comment-tools{
  display:flex;
  gap:6px;
  overflow:auto;
  padding-top:7px;
}
.comment-tools button{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:#aebddd;
  border-radius:10px;
  padding:7px 9px;
  font-size:10px;
}
.comment-tools button:hover{border-color:rgba(123,77,255,.55);color:#fff}
.comment-tool-panel{
  margin-top:7px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(4,15,41,.98);
}
.comment-tool-panel[hidden]{display:none}
.comment-sticker-panel strong,
.comment-link-panel strong{font-size:11px;color:#dce5f7}
.comment-sticker-panel{display:grid;gap:8px}
.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sticker-grid button{
  min-height:42px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  font-size:22px;
}
.comment-link-panel{display:grid;gap:8px}
.comment-link-panel p{margin:0;color:#7185ac;font-size:10px}
.comment-inline-input{display:flex;gap:6px}
.comment-inline-input input{
  flex:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:9px 10px;
  outline:none;
  font:inherit;
  font-size:11px;
}
.comment-inline-input button,
.comment-link-panel > button{
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
  padding:8px 11px;
  font-size:10px;
}
.comment-attachment-image,
.comment-attachment-gif{
  display:block;
  max-width:min(280px,100%);
  max-height:240px;
  margin-top:8px;
  border-radius:13px;
  object-fit:cover;
}
.comment-sticker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  margin-top:8px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(123,77,255,.32),rgba(240,59,184,.25),rgba(35,156,255,.22));
  border:1px solid rgba(255,255,255,.1);
  font-size:38px;
}
.comment-attachment-link{
  display:block;
  margin-top:8px;
  padding:9px 11px;
  border-radius:11px;
  background:rgba(35,156,255,.09);
  border:1px solid rgba(35,156,255,.18);
  color:#8fc9ff;
  font-size:11px;
  word-break:break-all;
  text-decoration:none;
}
.post-actions button[data-share]{
  position:relative;
  z-index:3;
  pointer-events:auto;
  touch-action:manipulation;
}
.share-recipient,
.share-sheet-actions button{
  position:relative;
  z-index:2;
  pointer-events:auto;
  touch-action:manipulation;
}
.share-sheet-rich{max-height:86vh;overflow:auto}
.share-recipient-list{display:grid;gap:7px;max-height:42vh;overflow:auto;margin:10px 0 14px}
.share-recipient{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:left;
}
.share-recipient > span{display:grid;gap:2px;flex:1;min-width:0}
.share-recipient small{color:#8193b9;font-size:10px}
.share-recipient b{opacity:.7}
.share-sheet-status{min-height:16px;color:#ffb0bf!important;font-size:11px!important;margin-top:9px!important}

@media (max-width:520px){
  .comments-card{max-height:88vh;padding:15px}
  .comments-overlay{padding:8px}
  .comment-mention-picker{right:56px}
}

/* ==========================================================
   TICHEDZE FULL-SCREEN VIDEO FEED / REELS VIEWER
========================================================== */
.tichedze-video-viewer{
  position:fixed;
  inset:0;
  z-index:12000;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  background:#000;
  color:#fff;
}
.tichedze-video-reel{
  width:100%;
  height:100%;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#000;
}
.tichedze-video-reel::-webkit-scrollbar{display:none}
.tichedze-video-slide{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  background:#000;
}
.tichedze-reel-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease;
  -webkit-user-select:none;
  user-select:none;
}
.tichedze-reel-video.is-ready{
  opacity:1;
  visibility:visible;
}
.tichedze-reel-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:6;
  display:flex;
  align-items:center;
  gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 18px;
  background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);
  pointer-events:none;
}
.tichedze-reel-top span{font-size:16px;font-weight:800;letter-spacing:.2px}
.tichedze-reel-close{
  pointer-events:auto;
  width:42px;height:42px;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(5,12,28,.48);color:rgba(255,255,255,.94);font-size:29px;line-height:1;
  backdrop-filter:blur(10px);cursor:pointer;
}
.tichedze-reel-play{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;width:64px;height:64px;border:0;border-radius:50%;
  background:rgba(0,0,0,.46);color:#fff;font-size:25px;
  backdrop-filter:blur(7px);cursor:pointer;
}
.tichedze-reel-play.is-hidden{opacity:0;pointer-events:none}
.tichedze-reel-bottom{
  position:absolute;
  left:16px;
  right:96px;
  bottom:0;
  z-index:6;
  padding:20px 0 calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.76),transparent);
}
.tichedze-reel-creator{
  display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:#fff;
  text-align:left;cursor:pointer;max-width:calc(100vw - 115px);
}
.tichedze-reel-creator .avatar{flex:0 0 auto;border:2px solid rgba(255,255,255,.65)}
.tichedze-reel-creator > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.tichedze-reel-creator strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tichedze-reel-creator small{font-size:11px;color:rgba(255,255,255,.68)}
.tichedze-reel-caption{
  margin:10px 0 0;color:#fff;font-size:13px;line-height:1.45;
  max-height:80px;overflow:hidden;text-shadow:0 1px 5px rgba(0,0,0,.65);
}
.tichedze-reel-actions{
  position:absolute;
  right:14px;
  bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.tichedze-reel-actions button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:58px;min-height:58px;padding:5px 2px;border:0;background:transparent;color:#fff;
  cursor:pointer;text-shadow:0 2px 7px rgba(0,0,0,.75);
}
.tichedze-reel-actions .reel-action-icon{font-size:30px;line-height:1}
.tichedze-reel-actions b{font-size:11px;font-weight:800;min-width:20px}
.tichedze-reel-actions button.is-liked .reel-action-icon{color:#ff477b}
.tichedze-reel-actions button:active{transform:scale(.92)}
@media (max-width:520px){
  .tichedze-reel-actions{right:8px;bottom:calc(82px + env(safe-area-inset-bottom));gap:13px}
  .tichedze-reel-bottom{left:13px;right:82px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .tichedze-reel-actions button{width:54px}
  .tichedze-reel-actions .reel-action-icon{font-size:28px}
}

/* ==========================================================
   TICHEDZE VIDEO ICON + REELS POLISH
========================================================== */
.tz-icon{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 auto}
.tz-icon svg{width:100%;height:100%;display:block}
.tichedze-reel-top{align-items:center;padding-right:12px}
.tichedze-reel-title{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:850;letter-spacing:.2px}
.tz-brand-dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#8b5cf6,#ec4899);box-shadow:0 0 13px rgba(139,92,246,.7)}
.tichedze-reel-volume{margin-left:auto;pointer-events:auto;width:42px;height:42px;border-radius:14px;border:1px solid rgba(154,145,255,.15);background:linear-gradient(145deg,rgba(17,35,72,.54),rgba(38,22,76,.54));color:rgba(255,255,255,.94);display:grid;place-items:center;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tichedze-reel-volume .tz-icon{width:19px;height:19px}
.tichedze-reel-close .tz-icon{width:22px;height:22px}
.tichedze-reel-play .tz-icon{width:25px;height:25px}
.tichedze-reel-actions .reel-action-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(16,34,69,.52),rgba(42,22,76,.54));backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tichedze-reel-actions .reel-action-icon svg{width:25px;height:25px;display:block}
.tichedze-reel-actions button.is-liked .reel-action-icon{color:#ff4f91;border-color:rgba(255,79,145,.25);background:linear-gradient(145deg,rgba(76,27,67,.62),rgba(47,25,79,.62))}
.tichedze-reel-actions button b{text-shadow:0 2px 8px rgba(0,0,0,.85)}


/* TICHEDZE VIDEO EXPAND + FULLSCREEN INTERACTION */
.tz-expand-glyph{display:grid;place-items:center;width:100%;height:100%;font-size:28px;line-height:1;font-weight:650;transform:translateY(-1px);font-family:Arial,sans-serif;}
.tichedze-video-control[data-video-fullscreen]{font-size:0;}
.tichedze-video-control[data-video-fullscreen] .tz-expand-glyph{font-size:28px;}
.tichedze-modal-overlay.comments-overlay,.tichedze-modal-overlay#tichedzeShareSheet{z-index:13050;}
.comments-overlay{align-items:flex-end;padding:0;}
.comments-overlay .comments-card{width:min(680px,100%);max-height:92dvh;display:flex;flex-direction:column;border-radius:30px 30px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));}
.comments-overlay .comments-list{flex:1;min-height:0;overflow:auto;}
#tichedzeShareSheet{align-items:flex-end;padding:0;}
#tichedzeShareSheet .share-sheet-card{width:min(680px,100%);max-height:88dvh;overflow:auto;border-radius:30px 30px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));}
.tichedze-video-viewer.is-interaction-open{filter:none;}

/* ==========================================================
   TICHEDZE NOTIFICATIONS
========================================================== */
.notification-button{position:relative;overflow:visible;}
.notification-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:19px;
  width:19px;
  height:19px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6,#ec4899);
  border:2px solid #081a43;
  box-shadow:0 4px 12px rgba(139,92,246,.38);
  pointer-events:none;
  z-index:50;
}
.notification-button[data-has-notifications="true"] .notification-bell-icon{filter:drop-shadow(0 0 5px rgba(139,92,246,.45));}
.notifications-overlay{z-index:14000!important;padding:0!important;align-items:flex-end!important;}
.notifications-sheet-card{
  width:min(680px,100%);
  max-height:88dvh;
  display:flex;
  flex-direction:column;
  padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:30px 30px 0 0;
  overflow:hidden;
}
.notifications-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 12px;}
.notifications-sheet-head h2{margin:4px 0 0;font-size:24px;}
.notifications-close{
  width:42px;height:42px;border:0;border-radius:14px;
  background:rgba(255,255,255,.07);color:#fff;font-size:28px;
  display:grid;place-items:center;cursor:pointer;
}
.notifications-list{overflow:auto;min-height:0;display:grid;gap:7px;padding:3px 0 8px;}
.notification-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid rgba(255,255,255,.055);border-radius:18px;
  background:rgba(255,255,255,.035);color:#fff;padding:12px;
  cursor:pointer;position:relative;transition:background .18s ease,transform .18s ease;
}
.notification-item:active{transform:scale(.99);}
.notification-item.unread{background:linear-gradient(135deg,rgba(123,77,255,.12),rgba(240,59,184,.07));border-color:rgba(139,92,246,.2);}
.notification-item-icon-wrap{
  width:43px;height:43px;flex:0 0 43px;border-radius:14px;
  display:grid;place-items:center;color:#dfe5ff;
  background:linear-gradient(145deg,rgba(123,77,255,.25),rgba(35,156,255,.14));
  border:1px solid rgba(255,255,255,.08);
}
.notification-item-icon{width:21px;height:21px;display:block;}
.notification-item-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px;}
.notification-item-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notification-item-copy span{font-size:12px;color:#d1d9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notification-item-copy small{font-size:10px;color:#7587ad;}
.notification-item-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#c45cff;box-shadow:0 0 10px rgba(196,92,255,.7);}
.notifications-empty{min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;}
.notifications-empty-t{
  width:68px;height:68px;border-radius:22px;display:grid;place-items:center;
  font-size:30px;font-weight:950;color:#fff;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6,#ec4899);
  box-shadow:0 14px 40px rgba(139,92,246,.25);margin-bottom:16px;
}
.notifications-empty h3{margin:0 0 7px;font-size:18px;}
.notifications-empty p{margin:0;max-width:330px;color:var(--muted);line-height:1.5;font-size:12px;}

/* ==========================================================
   TICHEDZE GROUPS — discovery, approval and group calls
========================================================== */
.discover-section{margin-top:22px}.section-heading.compact{margin-bottom:10px}.section-heading.compact h3{margin:0 0 4px}.discover-groups{display:grid;gap:10px}.discover-group-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045)}.discover-group-info{min-width:0;display:grid;gap:3px}.discover-group-info strong{font-size:15px}.discover-group-info span,.discover-group-info small{font-size:12px;color:var(--muted)}.discover-group-action{display:flex;align-items:center}.discover-group-action button{white-space:nowrap}.group-request-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05)}.group-request-row>div:first-child{display:grid;gap:3px}.group-request-row small{opacity:.6}.group-request-actions{display:flex;gap:6px}.group-request-actions button{padding:9px 11px;border-radius:12px}.group-call-participants{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:18px 0}.group-call-participants>div{width:72px;display:grid;justify-items:center;gap:5px}.group-call-participants small{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}

/* Tichedze group creation / management */
.group-sheet-card{width:min(680px,94vw);max-height:92dvh;overflow:auto;border-radius:28px;padding:24px}
.group-create-card{display:flex;flex-direction:column;gap:14px}
.group-photo-picker{display:grid;justify-items:center;gap:10px;padding:4px 0 2px}
.group-photo-preview{width:104px;height:104px;border-radius:32px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,rgba(115,82,255,.28),rgba(235,62,154,.24));border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78)}
.group-photo-preview svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.group-photo-preview img{width:100%;height:100%;object-fit:cover}
.group-photo-button{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);font-size:12px;font-weight:700;cursor:pointer}
.group-photo-button svg,.group-setting-icon svg,.group-info-row>span svg,.group-info-actions svg,.group-icon-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.group-name-input,.group-description-input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:inherit;border-radius:16px;padding:13px 14px;outline:none}
.group-description-input{min-height:92px;resize:vertical;font:inherit}
.group-meta-grid,.group-info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.group-meta-grid>div,.group-info-stats>div{padding:12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);display:grid;gap:4px}
.group-meta-grid small,.group-info-stats small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.group-meta-grid strong,.group-info-stats strong{font-size:13px}
.group-picker-heading{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.group-picker-heading span{font-size:11px;color:var(--muted)}
.group-setting-row,.group-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.group-setting-row>div,.group-info-row>div{display:flex;align-items:center;gap:10px;min-width:0}
.group-setting-row strong,.group-info-row strong{display:block;font-size:13px}.group-setting-row small,.group-info-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.group-setting-icon,.group-info-row>span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);flex:none}
.toggle-button{width:46px;height:26px;border:0;border-radius:99px;padding:3px;background:rgba(255,255,255,.14);cursor:pointer;flex:none}.toggle-button span{display:block;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}.toggle-button.is-on{background:linear-gradient(135deg,#7a62ff,#e04b9f)}.toggle-button.is-on span{transform:translateX(20px)}
.group-member-picker{display:grid;gap:7px;max-height:260px;overflow:auto;padding-right:2px}
.group-member-option{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 12px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer}
.group-member-option input{grid-row:1 / span 2;accent-color:#9b73ff}.group-member-option span{font-size:13px;font-weight:700}.group-member-option small{font-size:11px;color:var(--muted)}
.group-member-button{width:100%;text-align:left;color:inherit;font:inherit}
.group-sheet-actions,.group-info-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}.group-sheet-actions>*{flex:1}
.group-info-card{display:flex;flex-direction:column;gap:16px}.group-info-hero{text-align:center}.group-info-hero .avatar{margin:0 auto 10px}.group-info-hero h2{margin:4px 0}.group-info-hero p{color:var(--muted);font-size:13px;margin:0 auto;max-width:520px;line-height:1.5}
.group-info-list{display:grid}.group-icon-action{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:inherit;border-radius:11px;padding:7px 10px;font-size:11px;font-weight:800;white-space:nowrap}.group-info-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.group-request-icon{position:relative}.group-request-count{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:linear-gradient(135deg,#7a62ff,#e04b9f);font-size:10px;font-weight:800;color:#fff}
.chat-top-action,.chat-call-actions button{display:grid!important;place-items:center}.chat-top-action svg,.chat-call-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chat-group-avatar{background:linear-gradient(145deg,rgba(117,90,255,.28),rgba(228,68,154,.22));overflow:hidden}.chat-group-avatar .avatar-image{width:100%;height:100%;object-fit:cover}
@media(max-width:520px){.group-sheet-card{width:100%;max-height:94dvh;border-radius:26px 26px 0 0;align-self:flex-end}.group-meta-grid,.group-info-stats{gap:6px}.group-meta-grid>div,.group-info-stats>div{padding:10px 8px}}
.call-controls button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.call-end-main svg{transform:rotate(45deg)}

/* Group message sender identity */
.avatar-tiny{width:30px;height:30px;min-width:30px;border-radius:50%;font-size:12px;}
.group-chat-message .chat-bubble{padding-top:10px;}
.group-message-sender{display:flex;align-items:center;gap:8px;margin:0 0 8px;min-height:30px;}
.group-message-sender>div:last-child{display:flex;flex-direction:column;min-width:0;}
.group-message-sender strong{font-size:12.5px;line-height:1.2;font-weight:750;color:rgba(255,255,255,.94);}
.group-message-sender small{font-size:10px;line-height:1.25;color:rgba(255,255,255,.48);margin-top:2px;}
.group-message-sender.mine-sender strong{color:rgba(255,255,255,.9);}

/* TICHEDZE MESSAGE ACTIONS — message-level controls */
.chat-bubble{position:relative;}
.message-more-button{position:absolute;top:6px;right:7px;width:26px;height:26px;border:0;border-radius:9px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.62);display:flex;align-items:center;justify-content:center;opacity:.72;z-index:3;cursor:pointer;transition:.18s ease;}
.message-more-button:hover,.message-more-button:active{opacity:1;background:rgba(255,255,255,.12);transform:scale(1.04);}
.message-more-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.message-actions-card{max-width:520px;}
.message-actions-card h2{margin-bottom:7px;}
.message-action-preview{margin:0 0 16px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.message-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px;}
.message-action-grid button{min-height:54px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.055);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;font-weight:700;cursor:pointer;}
.message-action-grid button:active{transform:scale(.98);background:rgba(255,255,255,.1);}
.message-action-grid svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.reaction-sheet-card{max-width:520px;text-align:center;}
.reaction-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;}
.reaction-picker button{height:58px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.05);font-size:27px;cursor:pointer;transition:.18s ease;}
.reaction-picker button:active{transform:scale(.92);background:rgba(255,255,255,.1);}
.message-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.message-reaction-chip{border:1px solid rgba(255,255,255,.12);background:rgba(3,12,34,.34);color:#fff;border-radius:999px;padding:3px 7px;font-size:12px;display:inline-flex;align-items:center;gap:3px;cursor:pointer;}
.message-reaction-chip small{font-size:9px;opacity:.7;}
.message-reaction-chip.mine-reaction{border-color:rgba(123,77,255,.65);background:rgba(123,77,255,.18);}
.message-cancelled-bubble{opacity:.72;border-style:dashed!important;background:rgba(255,255,255,.035)!important;}
.message-cancelled{font-style:italic;color:rgba(255,255,255,.62);}
.message-edited{font-size:9px;opacity:.52;font-style:normal;}
.edit-message-card{max-width:560px;}
.edit-message-input{width:100%;min-height:120px;box-sizing:border-box;resize:vertical;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.055);color:#fff;padding:13px;font:inherit;outline:none;line-height:1.45;margin:10px 0 16px;}
.edit-message-input:focus{border-color:rgba(123,77,255,.65);box-shadow:0 0 0 3px rgba(123,77,255,.12);}
.message-confirm-card{max-width:500px;}
@media (max-width:480px){.message-action-grid{grid-template-columns:1fr 1fr}.reaction-picker{gap:7px}.reaction-picker button{height:54px}.message-more-button{right:5px;top:5px}}


/* ==========================================================
   TICHEDZE REAL CALL UI
========================================================== */
.tichedze-call-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#030a20;color:#fff;overflow:hidden}
.tichedze-call-screen .call-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(123,77,255,.34),transparent 38%),radial-gradient(circle at 85% 85%,rgba(240,59,184,.18),transparent 35%),#030a20}
.call-live-content,.incoming-call-content{position:relative;z-index:1;width:min(520px,100%);height:100%;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));box-sizing:border-box}
.call-top{display:flex;align-items:center;gap:10px;min-height:48px}.call-top .eyebrow{flex:1}.call-secure-pill{font-size:9px;font-weight:900;letter-spacing:.12em;padding:6px 9px;border-radius:999px;background:rgba(25,199,177,.12);color:#6ff0df;border:1px solid rgba(25,199,177,.22)}
.call-close{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:25px;line-height:1}
.remote-call-stage{position:relative;flex:1;min-height:0;margin:12px 0;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);display:flex;align-items:center;justify-content:center;box-shadow:0 25px 80px rgba(0,0,0,.35)}
.remote-call-video{width:100%;height:100%;object-fit:cover;background:#020817}.remote-call-avatar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center}.remote-call-avatar strong{font-size:18px}.voice-call-stage{background:radial-gradient(circle at 50% 35%,rgba(123,77,255,.24),transparent 42%),rgba(255,255,255,.035)}
.live-local-video{position:absolute;right:14px;bottom:14px;width:118px;height:168px;object-fit:cover;border-radius:18px;border:2px solid rgba(255,255,255,.35);background:#020817;box-shadow:0 12px 35px rgba(0,0,0,.35);z-index:3}
.call-live-meta{text-align:center;padding:5px 0 10px}.call-live-meta strong{font-size:18px}.call-live-meta p{margin:5px 0 0;color:var(--muted);font-size:13px}
.call-live-controls{display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 0 4px}.call-live-controls button{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.09);display:grid;place-items:center}.call-live-controls button.is-off{background:rgba(255,91,122,.18)}.call-live-controls button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.call-live-controls .call-end-main{width:62px;height:62px;background:var(--danger);border-color:transparent}.call-live-controls .call-end-main svg{transform:rotate(45deg)}
.incoming-call-content{align-items:center;justify-content:center;text-align:center;gap:12px}.incoming-call-content .eyebrow{margin-bottom:12px}.incoming-call-content h2{margin:5px 0 0;font-size:28px}.incoming-call-content p{margin:0;color:var(--muted)}.incoming-call-actions{display:flex;gap:12px;margin-top:25px;width:min(360px,100%)}.incoming-call-actions button{flex:1;height:54px;border-radius:17px;font-weight:850}.call-decline-button{background:rgba(255,91,122,.14);color:#ff9aae;border:1px solid rgba(255,91,122,.2)}.call-answer-button{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 14px 35px rgba(123,77,255,.25)}
.call-avatar-accent-purple{background:linear-gradient(135deg,rgba(123,77,255,.75),rgba(240,59,184,.55))}.call-avatar-accent-blue{background:linear-gradient(135deg,rgba(35,156,255,.75),rgba(123,77,255,.55))}.call-avatar-accent-pink{background:linear-gradient(135deg,rgba(240,59,184,.75),rgba(123,77,255,.55))}.call-avatar-accent-green{background:linear-gradient(135deg,rgba(25,199,177,.75),rgba(35,156,255,.55))}
@media(max-width:520px){.live-local-video{width:96px;height:138px;right:10px;bottom:10px}.call-live-content{padding-left:12px;padding-right:12px}.remote-call-stage{border-radius:22px}.incoming-call-actions{padding:0 10px}}

/* ==========================================================
   TICHEDZE NOTEBOOK — PRIVATE MEMORY UI
========================================================== */
.notebook-topbar{position:sticky;top:0;z-index:20}
.notebook-topbar>span{font-weight:850;letter-spacing:.01em}
.notebook-new-top{width:40px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font-size:25px;line-height:1}
.notebook-shell{width:min(720px,100%);margin:0 auto;padding:18px 16px 120px;box-sizing:border-box}
.notebook-hero{display:flex;gap:16px;align-items:center;padding:20px;border-radius:26px;background:linear-gradient(145deg,rgba(65,74,150,.32),rgba(240,59,184,.10));border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px rgba(0,0,0,.16);position:relative;overflow:hidden}
.notebook-hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-75px;top:-80px;background:radial-gradient(circle,rgba(123,77,255,.28),transparent 68%);pointer-events:none}
.notebook-hero-mark{width:58px;height:58px;flex:0 0 58px;border-radius:20px;display:grid;place-items:center;font-size:25px;color:#fff;background:linear-gradient(135deg,#7b4dff,#f03bb8,#239cff);box-shadow:0 12px 35px rgba(123,77,255,.28)}
.notebook-hero h2{margin:4px 0 5px;font-size:24px}
.notebook-hero p,.notebook-editor-head p{margin:0;color:var(--muted);line-height:1.5;font-size:13px}
.notebook-list-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:28px 2px 13px}
.notebook-list-head h3{margin:4px 0 0;font-size:17px}
.notebook-new-button{border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;padding:10px 13px;font-weight:800}
.notebook-list{display:grid;gap:10px}
.notebook-note-card{width:100%;display:grid;grid-template-columns:34px 1fr 22px;gap:10px;text-align:left;align-items:center;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.notebook-note-card:active{transform:scale(.985)}
.notebook-note-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.075)}
.notebook-note-pin{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(123,77,255,.14);color:#c9bbff}
.notebook-note-copy{min-width:0;display:grid;gap:4px}
.notebook-note-copy strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notebook-note-copy small{font-size:11px;color:#8795b5}
.notebook-note-copy span{font-size:12px;color:#aeb9d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notebook-note-arrow{font-size:26px;color:#7e8baa;text-align:center}
.notebook-empty{text-align:center;padding:46px 20px;border:1px dashed rgba(255,255,255,.13);border-radius:24px;background:rgba(255,255,255,.025)}
.notebook-empty-mark{margin:0 auto 14px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:rgba(123,77,255,.12);color:#bcaeff;font-size:23px}
.notebook-empty h3{margin:0 0 7px;font-size:17px}
.notebook-empty p{margin:0 auto 18px;max-width:330px;color:var(--muted);font-size:13px;line-height:1.5}
.notebook-editor-head{padding:8px 2px 19px}
.notebook-back-link{border:0;background:transparent;color:#aebcff;padding:0;font-size:12px;font-weight:800;margin-bottom:17px}
.notebook-editor-head h2{margin:5px 0 5px;font-size:27px}
.notebook-field-label{display:block;margin:13px 3px 7px;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#91a0bf}
.notebook-title-input,.notebook-date-input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045);color:#fff;padding:14px 15px;outline:none;font:inherit}
.notebook-title-input{font-size:16px;font-weight:750}
.notebook-date-input{color-scheme:dark}
.notebook-title-input:focus,.notebook-date-input:focus{border-color:rgba(123,77,255,.55);box-shadow:0 0 0 3px rgba(123,77,255,.09)}
.notebook-paper-wrap{margin-top:17px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#fbf8ef;box-shadow:0 18px 45px rgba(0,0,0,.2);position:relative}
.notebook-paper-label{padding:12px 17px 8px;color:#7c6d5a;font-size:9px;font-weight:900;letter-spacing:.18em;background:rgba(245,239,225,.96);border-bottom:1px solid rgba(120,105,80,.13)}
.notebook-paper-textarea{display:block;width:100%;min-height:330px;box-sizing:border-box;resize:vertical;border:0;outline:0;padding:18px 18px 24px 49px;color:#263044;background-color:#fbf8ef;background-image:linear-gradient(to right,transparent 0,transparent 35px,rgba(224,91,117,.34) 35px,rgba(224,91,117,.34) 36px,transparent 36px),repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(85,112,158,.20) 30px,rgba(85,112,158,.20) 31px);font:500 15px/31px Georgia,"Times New Roman",serif;letter-spacing:.01em}
.notebook-paper-textarea::placeholder{color:#9a968d}
.notebook-save-warning{display:flex;gap:11px;align-items:flex-start;margin:16px 0 10px;padding:13px 14px;border-radius:17px;border:1px solid rgba(255,194,87,.18);background:rgba(255,194,87,.06);color:#f2dfb7}
.notebook-warning-mark{width:25px;height:25px;flex:0 0 25px;border-radius:9px;display:grid;place-items:center;background:rgba(255,194,87,.13);font-weight:900}
.notebook-save-warning div:last-child{display:grid;gap:3px;font-size:12px;line-height:1.45}
.notebook-save-warning strong{color:#fff;font-size:12px}
.notebook-save-button{margin-top:3px;width:100%}
.notebook-detail-head{display:flex;align-items:center;justify-content:space-between;margin:5px 2px 15px}
.notebook-delete-button{border:1px solid rgba(255,91,122,.18);border-radius:12px;background:rgba(255,91,122,.07);color:#ff8ca4;padding:9px 12px;font-weight:800;font-size:12px}
.notebook-detail-card{position:relative;border-radius:23px;padding:25px 21px 28px;background:#fbf8ef;color:#263044;box-shadow:0 20px 55px rgba(0,0,0,.25);overflow:hidden}
.notebook-detail-card:before{content:"";position:absolute;left:35px;top:0;bottom:0;width:1px;background:rgba(224,91,117,.34)}
.notebook-detail-date{margin-left:18px;color:#887b69;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.notebook-detail-card h2{margin:10px 0 15px 18px;font:800 25px/1.2 Georgia,"Times New Roman",serif;color:#20283a}
.notebook-detail-rule{height:1px;margin:0 0 18px 18px;background:rgba(82,105,143,.18)}
.notebook-detail-body{padding-left:18px;font:500 15px/31px Georgia,"Times New Roman",serif;background:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(85,112,158,.20) 30px,rgba(85,112,158,.20) 31px);min-height:240px;white-space:normal;overflow-wrap:anywhere}
.notebook-memory-seal{margin:28px 0 0 18px;color:#9a8e7c;font-size:9px;font-weight:900;letter-spacing:.14em}
@media(max-width:520px){.notebook-shell{padding-left:12px;padding-right:12px}.notebook-hero{padding:17px}.notebook-hero-mark{width:50px;height:50px;flex-basis:50px}.notebook-hero h2{font-size:21px}.notebook-paper-textarea{min-height:300px;padding-left:44px;background-image:linear-gradient(to right,transparent 0,transparent 31px,rgba(224,91,117,.34) 31px,rgba(224,91,117,.34) 32px,transparent 32px),repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(85,112,158,.20) 30px,rgba(85,112,158,.20) 31px)}.notebook-detail-card{padding-left:17px;padding-right:17px}}

/* TICHEDZE CHAT MEDIA / LONG MESSAGE POLISH */
.chat-message-row{min-width:0;max-width:100%;}
.chat-bubble{box-sizing:border-box;min-width:0;max-width:min(82%,560px);overflow:hidden;overflow-wrap:anywhere;word-break:break-word;}
.chat-bubble>span,.chat-bubble strong,.chat-bubble small,.chat-bubble .chat-file-name{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;}
.chat-file-image,.chat-file-video{display:block;max-width:100%;width:auto;height:auto;border-radius:14px;object-fit:contain;box-sizing:border-box;}
.chat-file-video{max-height:360px;background:#020714;}
.chat-file-open{display:flex;align-items:center;gap:7px;max-width:100%;box-sizing:border-box;min-width:0;border:0;border-radius:12px;background:rgba(255,255,255,.055);color:#dce8ff;padding:9px 10px;text-align:left;cursor:pointer;}
.chat-file-open .chat-file-name{flex:1;min-width:0;}
.tichedze-paperclip-icon{display:inline-block;flex:0 0 auto;color:currentColor;vertical-align:middle;}
.audio-message-title{display:flex!important;align-items:center;gap:7px;}
.audio-bubble audio{display:block;width:min(100%,280px);max-width:100%;}
.tichedze-attachment-overlay{align-items:flex-end;}
.tichedze-attachment-card{padding:20px 18px 16px;}
.tichedze-attachment-card h2{margin:8px 0 4px;}
.tichedze-attachment-card p{margin:0 0 16px;color:var(--muted);}
.tichedze-attachment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.tichedze-attachment-grid button{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.045);color:#fff;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:inherit;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;}
.tichedze-attachment-grid button:active{transform:scale(.97);background:rgba(255,255,255,.08);}
.tichedze-attachment-option-icon{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#cfe0ff;}
.tichedze-attachment-grid span{font-size:12px;font-weight:750;}
.chat-tool-button{display:grid!important;place-items:center;flex:0 0 46px;}
@media(max-width:420px){.tichedze-attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tichedze-attachment-grid button{min-height:88px;}.chat-bubble{max-width:86%;}}

/* Tichedze attachment sheet: always visible above the active chat */
.tichedze-attachment-overlay.show{display:flex!important;z-index:14000!important;}
.tichedze-attachment-card{max-height:80vh;overflow:auto;}

/* ==========================================================
   TICHEDZE RESPONSIVE LAYOUT — PHONE / TABLET / LAPTOP
   Keeps the existing mobile design while giving larger screens
   breathing room and multi-column layouts.
========================================================== */
@media (min-width: 700px) {
  .app-shell {
    max-width: 920px;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 90px rgba(0,0,0,.20);
  }

  .form-container,
  .auth-card {
    padding-left: 34px;
    padding-right: 34px;
  }

  .home-content,
  .discover-container,
  .profile-menu {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .post-feed,
  .discover-feed,
  .profile-menu,
  .friends-container,
  .chat-list-container {
    width: 100%;
  }

  .post-feed,
  .discover-feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  .post-feed > *,
  .discover-feed > * {
    min-width: 0;
  }

  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-list {
    max-width: 760px;
    margin: 0 auto;
  }

  .comments-card,
  .replies-card,
  .message-actions-card,
  .reaction-sheet-card,
  .edit-message-card,
  .message-confirm-card,
  .tichedze-attachment-card {
    width: min(760px, calc(100% - 40px));
  }
}

@media (min-width: 1100px) {
  .app-shell {
    max-width: 1180px;
  }

  .form-container,
  .auth-card {
    padding-left: 54px;
    padding-right: 54px;
  }

  .home-content,
  .discover-container,
  .profile-menu {
    max-width: 1080px;
  }

  .post-feed,
  .discover-feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .post-feed > .demo-post,
  .discover-feed > .demo-post {
    min-width: 0;
  }

  .section-heading h2 {
    font-size: 30px;
  }

  .chat-conversation {
    max-width: 920px;
    margin: 0 auto;
  }

  .chat-message-row {
    max-width: 900px;
  }

  .bottom-nav {
    max-width: 1180px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(920px, 100%);
  }
}

@media (max-width: 699px) {
  .app-shell {
    width: 100%;
  }

  .post-feed,
  .discover-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-menu {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .top-bar {
    padding-left: 13px;
    padding-right: 13px;
  }

  .form-container,
  .auth-card {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 420px) {
  .welcome-card h1 { font-size: 34px; }
  .section-heading h2 { font-size: 22px; }
  .profile-stats { gap: 7px; }
  .profile-stats div { padding: 10px 6px; }
  .chat-bubble { max-width: 88%; }
}

/* ==========================================================
   TICHEDZE LANDSCAPE / LAPTOP NAVIGATION
   IMPORTANT: SPCK/Android landscape previews can report a CSS
   viewport below 900px even when the physical screen is wide.
   Therefore laptop landscape starts at 700px, not 900px.
========================================================== */
@media (min-width: 700px) and (orientation: landscape) {
  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
  }

  /* Home header and feed tabs use the full app width. */
  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs {
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #homeScreen.active > .app-header {
    height: 78px !important;
    padding: 0 28px !important;
  }

  #homeScreen.active > .feed-tabs {
    top: 78px !important;
    padding: 13px 28px 7px !important;
  }

  #homeScreen.active > .home-content {
    margin-top: 124px !important;
    height: calc(100dvh - 124px) !important;
    padding: 18px 108px 28px 28px !important;
  }

  /* Other screens: full-width top bars. */
  .screen.active > .top-bar {
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    height: 76px !important;
    padding-left: 28px !important;
    padding-right: 108px !important;
  }

  .screen.active > .top-bar + .form-container,
  .screen.active > .top-bar + .profile-hero,
  .screen.active > .top-bar + .chat-conversation {
    margin-top: 76px !important;
  }

  /* Desktop/laptop navigation rail. */
  .bottom-nav {
    position: fixed !important;
    left: auto !important;
    right: 14px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 82px !important;
    height: auto !important;
    min-height: 360px;
    padding: 12px 7px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 24px !important;
    background: rgba(4,15,41,.94) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  .bottom-nav .nav-item {
    position: relative;
    width: 66px !important;
    min-width: 66px !important;
    min-height: 61px !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    border-radius: 17px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    color: #7184ad;
    font-size: 20px;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }

  .bottom-nav .nav-item:hover {
    transform: translateY(-2px);
    color: #dce5ff;
    background: rgba(255,255,255,.055);
  }

  .bottom-nav .nav-item.active {
    color: #fff;
    background: linear-gradient(145deg, rgba(123,77,255,.30), rgba(240,59,184,.14));
    box-shadow: inset 0 0 0 1px rgba(174,151,255,.13), 0 8px 24px rgba(80,55,180,.16);
  }

  .bottom-nav .nav-item.active::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 3px;
    height: 23px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(#239cff, #f03bb8);
    box-shadow: 0 0 14px rgba(123,77,255,.65);
  }

  .bottom-nav .nav-item span {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
  }

  /* Keep all scrollable content clear of the rail. */
  #homeScreen.active > .home-content,
  .discover-container,
  .friends-container,
  .profile-menu {
    padding-right: 108px !important;
  }

  .post-feed,
  .discover-feed {
    gap: 18px;
  }
}

@media (min-width: 1100px) and (orientation: landscape) {
  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  #homeScreen.active > .home-content {
    padding-left: 34px !important;
    padding-right: 108px !important;
  }
}

/* ==========================================================
   TICHEDZE DESKTOP / LAPTOP EXPERIENCE
   Landscape is treated as a real desktop workspace rather
   than a rotated mobile footer.
========================================================== */
@media (min-width: 700px) and (orientation: landscape) {
  :root {
    --desktop-sidebar: 238px;
    --desktop-gap: 24px;
  }

  body {
    background:
      radial-gradient(circle at 18% 12%, rgba(123,77,255,.10), transparent 28%),
      #030b21;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
    background:
      radial-gradient(circle at 72% 0%, rgba(35,156,255,.055), transparent 30%),
      var(--bg);
  }

  /* LEFT DESKTOP NAVIGATION */
  .bottom-nav {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    top: 16px !important;
    bottom: 16px !important;
    transform: none !important;
    width: var(--desktop-sidebar) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 14px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 7px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(10,24,59,.97), rgba(5,15,40,.97)) !important;
    box-shadow:
      0 24px 70px rgba(0,0,0,.40),
      inset 0 1px rgba(255,255,255,.055) !important;
    backdrop-filter: blur(26px) !important;
    -webkit-backdrop-filter: blur(26px) !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  .side-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 7px 19px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  .side-brand-mark {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(35,156,255,.16), rgba(240,59,184,.16));
    box-shadow: 0 9px 24px rgba(35,156,255,.10);
    overflow: hidden;
  }

  .side-brand-mark img {
    width: 31px;
    height: 31px;
    object-fit: contain;
  }

  .side-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .side-brand-copy strong {
    font-size: 18px;
    letter-spacing: -.45px;
    line-height: 1.1;
  }

  .side-brand-copy span {
    color: #778ab4;
    font-size: 10px;
    font-weight: 650;
  }

  .side-nav-title {
    padding: 10px 10px 6px;
    color: #6579a5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
  }

  .bottom-nav .nav-item {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 13px !important;
    border-radius: 15px !important;
    color: #8295bd;
    background: transparent;
    font-size: 15px;
    font-weight: 650;
    text-align: left;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  .bottom-nav .nav-item:hover {
    transform: translateX(3px);
    color: #eef2ff;
    background: rgba(255,255,255,.045);
  }

  .bottom-nav .nav-item.active {
    color: #fff;
    background:
      linear-gradient(100deg, rgba(123,77,255,.26), rgba(240,59,184,.095));
    box-shadow:
      inset 0 0 0 1px rgba(170,148,255,.10),
      0 9px 26px rgba(71,47,159,.14);
  }

  .bottom-nav .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, var(--blue), var(--purple), var(--pink));
    box-shadow: 0 0 14px rgba(123,77,255,.62);
  }

  .bottom-nav .nav-icon {
    width: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    color: currentColor;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    opacity: .92;
  }

  .bottom-nav .nav-item span {
    display: block;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.1px;
  }

  .side-nav-spacer {
    flex: 1 1 auto;
    min-height: 20px;
  }

  .side-nav-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 5px 1px;
    padding: 12px 10px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.025);
    color: #6e82aa;
    font-size: 9px;
    font-weight: 650;
  }

  .side-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #22d3a8;
    box-shadow: 0 0 11px rgba(34,211,168,.65);
  }

  /* THE APP CONTENT NOW LIVES BESIDE THE SIDEBAR */
  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs,
  #homeScreen.active > .home-content,
  .screen.active > .top-bar,
  .screen.active > .form-container,
  .screen.active > .profile-hero,
  .screen.active > .chat-conversation {
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    width: calc(100% - var(--desktop-sidebar) - 48px) !important;
    max-width: none !important;
  }

  #homeScreen.active > .app-header {
    left: auto !important;
    right: auto !important;
    height: 78px !important;
    padding: 0 26px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 18px 18px;
  }

  #homeScreen.active > .feed-tabs {
    top: 78px !important;
    padding: 13px 26px 7px !important;
    box-sizing: border-box !important;
  }

  #homeScreen.active > .home-content {
    margin-top: 124px !important;
    height: calc(100dvh - 124px) !important;
    padding: 18px 0 28px !important;
    box-sizing: border-box !important;
  }

  .screen.active > .top-bar {
    left: auto !important;
    right: auto !important;
    height: 76px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    box-sizing: border-box !important;
  }

  .screen.active > .top-bar + .form-container,
  .screen.active > .top-bar + .profile-hero,
  .screen.active > .top-bar + .chat-conversation {
    margin-top: 76px !important;
  }

  .post-feed,
  .discover-feed {
    gap: 18px;
  }

  .home-content .post-feed,
  .home-content .discover-feed {
    padding-right: 0 !important;
  }
}

@media (min-width: 1100px) and (orientation: landscape) {
  :root { --desktop-sidebar: 250px; }

  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs,
  #homeScreen.active > .home-content,
  .screen.active > .top-bar,
  .screen.active > .form-container,
  .screen.active > .profile-hero,
  .screen.active > .chat-conversation {
    margin-left: calc(var(--desktop-sidebar) + 38px) !important;
    width: calc(100% - var(--desktop-sidebar) - 58px) !important;
  }

  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs,
  .screen.active > .top-bar {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* ==========================================================
   TICHEDZE FINAL RESPONSIVE NAV FIX
   The navigation is global so it remains available on every
   screen. Desktop uses a real sidebar; phones keep the footer.
========================================================== */
.side-brand,
.side-nav-title,
.side-nav-spacer,
.side-nav-caption,
.side-brand-mark,
.side-brand-copy {
  display: none;
}

@media (max-width: 699px), (orientation: portrait) {
  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    height: auto !important;
    min-height: 72px !important;
    border-radius: 0 !important;
    padding: 7px 4px max(7px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
  }

  .bottom-nav .nav-item {
    width: auto !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 7px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .bottom-nav .nav-item span {
    display: block !important;
    font-size: 9px !important;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  :root { --desktop-sidebar: 250px; }

  /* Real desktop sidebar: it exists on EVERY screen, not only Home. */
  .bottom-nav {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    top: 16px !important;
    bottom: 16px !important;
    width: var(--desktop-sidebar) !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    transform: none !important;
    padding: 18px 14px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    border-radius: 26px !important;
    z-index: 1000 !important;
  }

  .side-brand {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 5px 7px 19px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }
  .side-brand-mark {
    display: grid !important;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(35,156,255,.16), rgba(240,59,184,.16));
  }
  .side-brand-mark img { width: 31px; height: 31px; object-fit: contain; }
  .side-brand-copy {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  .side-brand-copy strong { font-size: 18px; line-height: 1.1; letter-spacing: -.45px; }
  .side-brand-copy span { color: #778ab4; font-size: 10px; font-weight: 650; }
  .side-nav-title {
    display: block !important;
    padding: 10px 10px 6px;
    color: #6579a5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
  }
  .side-nav-spacer { display: block !important; flex: 1 1 auto; min-height: 20px; }
  .side-nav-caption {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 8px 5px 1px;
    padding: 12px 10px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.025);
    color: #6e82aa;
    font-size: 9px;
    font-weight: 650;
  }

  /* Every desktop screen gets the same workspace geometry. */
  .screen.active > .top-bar {
    left: calc(var(--desktop-sidebar) + 32px) !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
    height: 76px !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 18px 18px;
  }

  .screen.active > .top-bar + .form-container,
  .screen.active > .top-bar + .profile-hero,
  .screen.active > .top-bar + .chat-conversation {
    margin-top: 76px !important;
  }

  .screen.active > .form-container,
  .screen.active > .profile-hero,
  .screen.active > .chat-conversation {
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    margin-right: 16px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .screen.active > .form-container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Home gets the same left-to-right workspace, but its own header remains. */
  #homeScreen.active > .app-header,
  #homeScreen.active > .feed-tabs,
  #homeScreen.active > .home-content {
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    margin-right: 16px !important;
    width: auto !important;
    max-width: none !important;
  }

  #homeScreen.active > .app-header {
    left: auto !important;
    right: auto !important;
    height: 78px !important;
    padding: 0 28px !important;
    border-radius: 0 0 18px 18px;
  }
  #homeScreen.active > .feed-tabs {
    top: 78px !important;
    padding: 13px 28px 7px !important;
  }
  #homeScreen.active > .home-content {
    margin-top: 124px !important;
    height: calc(100dvh - 124px) !important;
    padding: 18px 0 28px !important;
  }

  /* Don't let generic desktop max-width/margins re-center social screens. */
  .friends-container,
  .discover-container,
  .profile-social-list-container,
  .chat-container,
  .public-profile-container {
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    margin-right: 16px !important;
  }

  /* Keep lists visually centered inside the usable desktop workspace. */
  .friends-container > *,
  .discover-container > *,
  .profile-social-list-container > *,
  .chat-container > * {
    max-width: 1080px;
  }

  .post-feed,
  .discover-feed {
    padding-right: 0 !important;
  }
}

/* ==========================================================
   TICHEDZE DESKTOP POLISH — FINAL
   Home header spans the entire workspace beside the sidebar,
   and the desktop navigation is independently scrollable.
========================================================== */
@media (min-width: 700px) and (orientation: landscape) {
  :root { --desktop-sidebar: 250px; --desktop-gap: 32px; }

  /* The sidebar itself is a real scroll container.  This keeps
     every navigation item accessible on short laptop screens. */
  .bottom-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(123,77,255,.55) transparent;
    justify-content: flex-start !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .bottom-nav::-webkit-scrollbar { width: 5px; }
  .bottom-nav::-webkit-scrollbar-track { background: transparent; }
  .bottom-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(35,156,255,.7), rgba(240,59,184,.7));
    border-radius: 999px;
  }

  /* Do not consume valuable vertical space with the flex spacer.
     The status card naturally follows the menu and scrolls with it. */
  .side-nav-spacer {
    flex: 0 0 18px !important;
    min-height: 18px !important;
  }

  .side-nav-caption { flex: 0 0 auto; }

  /* Make Home a true desktop workspace header. Fixed positioning
     deliberately ignores any mobile max-width inherited by the
     screen, so the header always reaches the right edge. */
  #homeScreen.active > .app-header {
    position: fixed !important;
    top: 0 !important;
    left: calc(var(--desktop-sidebar) + 32px) !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    height: 78px !important;
    padding: 0 30px !important;
    border-radius: 0 0 20px 20px !important;
    z-index: 490 !important;
  }

  #homeScreen.active > .feed-tabs {
    position: fixed !important;
    top: 78px !important;
    left: calc(var(--desktop-sidebar) + 32px) !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    padding: 13px 30px 7px !important;
    box-sizing: border-box !important;
    z-index: 489 !important;
  }

  #homeScreen.active > .home-content {
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    margin-right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 124px !important;
    height: calc(100dvh - 124px) !important;
    padding: 18px 0 28px !important;
  }

  /* Keep the header controls visually balanced on the wider canvas. */
  #homeScreen.active > .app-header .header-brand {
    gap: 10px;
    font-size: 21px;
  }
  #homeScreen.active > .app-header .header-logo {
    width: 36px;
    height: 36px;
  }
  #homeScreen.active > .app-header .header-actions {
    gap: 9px;
  }

  /* Other desktop screens use the same full-width workspace. */
  .screen.active > .top-bar {
    position: fixed !important;
    top: 0 !important;
    left: calc(var(--desktop-sidebar) + 32px) !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .screen.active > .top-bar + .form-container,
  .screen.active > .top-bar + .profile-hero,
  .screen.active > .top-bar + .chat-conversation {
    margin-left: calc(var(--desktop-sidebar) + 32px) !important;
    margin-right: 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* ==========================================================
   TICHEDZE NAVIGATION SCOPE — FINAL
   Main navigation is part of the signed-in social workspace only.
   It must disappear completely from splash, welcome/login,
   registration, profile setup, recovery, settings, notebook,
   about, create-post and other utility/auth screens.
========================================================== */
.app-shell.nav-hidden > .bottom-nav {
  display: none !important;
}

/* When the sidebar is hidden, remove every desktop workspace offset
   that was created for the sidebar. This keeps Settings/Auth/etc. as
   clean standalone screens instead of leaving a phantom 250px gutter. */
@media (min-width: 700px) and (orientation: landscape) {
  .app-shell.nav-hidden .screen.active > .top-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .app-shell.nav-hidden .screen.active > .top-bar + .form-container,
  .app-shell.nav-hidden .screen.active > .top-bar + .profile-hero,
  .app-shell.nav-hidden .screen.active > .top-bar + .chat-conversation,
  .app-shell.nav-hidden .screen.active > .form-container,
  .app-shell.nav-hidden .screen.active > .profile-hero,
  .app-shell.nav-hidden .screen.active > .chat-conversation {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .app-shell.nav-hidden .screen.active > .top-bar + .form-container,
  .app-shell.nav-hidden .screen.active > .top-bar + .profile-hero,
  .app-shell.nav-hidden .screen.active > .top-bar + .chat-conversation {
    margin-top: 76px !important;
  }
}


/* D1 share recipients + comment reactions */
.share-friends-list{display:grid;gap:8px;max-height:280px;overflow:auto;margin:14px 0 16px}
.share-friend-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--border-color,#e7e7ee);border-radius:14px;background:var(--card-bg,#fff);text-align:left;cursor:pointer}
.share-friend-option:disabled{opacity:.65;cursor:default}
.share-friend-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.share-friend-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-friend-copy small{opacity:.65}
.share-friend-send{font-weight:700;font-size:12px;opacity:.8}
.share-friends-empty{padding:20px;text-align:center;opacity:.75}
.share-friends-empty div{font-size:28px;margin-bottom:6px}
.comment-like-button.liked{font-weight:800}