:root {
  --ink: #251746;
  --muted: #695783;
  --bg-a: #d9f5ff;
  --bg-b: #bfeeff;
  --bg-c: #efe6ff;
  --cloud: #f7fcff;
  --card: rgba(247, 252, 255, .78);
  --card-solid: #f7fcff;
  --sky: #9edfff;
  --sky-soft: #dff7ff;
  --sky-bright: #82d7ff;
  --lavender: #cdb7ff;
  --lilac: #e8dcff;
  --deep-purple: #2d1b52;
  --midnight: #17122f;
  --star: #fff4c7;
  --violet-glow: rgba(112, 76, 178, .22);
  --sky-glow: rgba(130, 215, 255, .34);
  --shadow: 0 24px 70px rgba(45, 27, 82, .18);
  --soft-border: 2px solid rgba(255, 255, 255, .72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Quicksand", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .95) 0 4rem, transparent 4.2rem),
    radial-gradient(circle at 84% 11%, rgba(205, 183, 255, .46), transparent 26rem),
    radial-gradient(circle at 16% 78%, rgba(130, 215, 255, .56), transparent 30rem),
    radial-gradient(circle at 72% 84%, rgba(45, 27, 82, .20), transparent 28rem),
    linear-gradient(135deg, var(--bg-a), var(--bg-b) 47%, var(--bg-c));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.94) 1.3px, transparent 1.3px),
    radial-gradient(rgba(45,27,82,.16) 1px, transparent 1px),
    radial-gradient(rgba(255,244,199,.72) 1.5px, transparent 1.5px);
  background-size: 34px 34px, 62px 62px, 96px 96px;
  background-position: 0 0, 18px 26px, 42px 12px;
  opacity: .72;
  z-index: -3;
}

body::after {
  content: "";
  position: fixed;
  inset: auto -10vw -8rem -10vw;
  height: 16rem;
  background: rgba(247, 252, 255, .56);
  border-radius: 50% 50% 0 0;
  filter: blur(2px);
  z-index: -2;
}

.topbar {
  width: min(1180px, calc(100vw - 1.4rem));
  margin: .45rem auto 0;
  padding: .32rem .45rem;
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  background: rgba(247,252,255,.76);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 1.25rem;
  box-shadow: 0 12px 34px rgba(45, 27, 82, .13);
  backdrop-filter: blur(18px);
  position: sticky;
  top: .45rem;
  z-index: 20;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .35rem .58rem;
  color: var(--deep-purple);
  text-decoration: none;
  font-family: "Fredoka", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.brand-moon { animation: bob 3s ease-in-out infinite; display: inline-block; font-size: 1rem; }

.nav-pills {
  display: flex;
  gap: .28rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.nav-pills a {
  text-decoration: none;
  color: var(--deep-purple);
  font-size: .82rem;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(223,247,255,.78));
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  padding: .45rem .66rem;
  min-width: 4rem;
  text-align: center;
  box-shadow: 0 6px 14px rgba(45, 27, 82, .08);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-pills a:hover { transform: translateY(-1px) rotate(-.6deg); background: #fff; box-shadow: 0 10px 18px rgba(112, 76, 178, .14); }

.page-shell {
  width: min(1180px, calc(100vw - 2rem));
  margin: 1rem auto 5rem;
}

.hero-card, .section-heading, .decor-card, .editor-card, .entries-panel, .chat-shell {
  background: var(--card);
  border: var(--soft-border);
  box-shadow: var(--shadow);
  border-radius: 2.2rem;
  backdrop-filter: blur(18px);
}

.hero-card {
  min-height: 25rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 25%, rgba(255,244,199,.55), transparent 7rem),
    radial-gradient(circle at 12% 88%, rgba(205,183,255,.34), transparent 13rem),
    linear-gradient(135deg, rgba(247,252,255,.83), rgba(223,247,255,.72));
}

.hero-card::before, .hero-card::after, .editor-card::before, .entries-panel::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  filter: blur(.3px);
}
.hero-card::before { width: 12rem; height: 5rem; right: 6rem; top: 3rem; box-shadow: 4rem 1rem 0 rgba(255,255,255,.46); }
.hero-card::after { width: 7rem; height: 3.2rem; right: 3rem; bottom: 4rem; box-shadow: -3rem .6rem 0 rgba(255,255,255,.42); }

.eyebrow {
  margin: 0 0 .8rem;
  font-weight: 900;
  color: var(--deep-purple);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
}

h1, h2, h3 { font-family: "Fredoka", sans-serif; line-height: 1; }
h1 { font-size: clamp(2.7rem, 8vw, 6.6rem); margin: 0; max-width: 780px; color: var(--deep-purple); text-shadow: 0 3px 0 rgba(255,255,255,.75); }
h2 { font-size: 1.8rem; margin: .5rem 0 .7rem; color: var(--deep-purple); }
p { line-height: 1.7; }

.hero-copy { max-width: 640px; font-size: 1.15rem; color: var(--muted); }
.hero-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.hero-badges span {
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: .7rem 1rem;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(45,27,82,.10);
  border: 1px solid rgba(205,183,255,.42);
}

.css-moon {
  position: absolute;
  right: clamp(1.2rem, 8vw, 6rem);
  top: clamp(1rem, 4vw, 3rem);
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fffdf1, var(--star) 46%, var(--lavender));
  box-shadow: 0 0 0 1rem rgba(255,255,255,.30), 0 24px 48px rgba(45,27,82,.22), 0 0 54px rgba(205,183,255,.55);
  animation: floaty 5s ease-in-out infinite;
}
.css-moon::after {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  right: .2rem;
  top: .6rem;
  background: var(--sky-soft);
  border-radius: 50%;
  opacity: .78;
}
.moon-face { position: relative; width: 100%; height: 100%; }
.eye { position: absolute; width: .7rem; height: .85rem; border-radius: 50%; background: var(--deep-purple); top: 3.2rem; }
.eye.left { left: 2.75rem; }
.eye.right { right: 2.75rem; }
.mouth { position: absolute; left: 50%; top: 4.4rem; width: 1.4rem; height: .7rem; transform: translateX(-50%); border-bottom: .25rem solid var(--deep-purple); border-radius: 0 0 999px 999px; }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.room-tile {
  position: relative;
  min-height: 19rem;
  padding: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,.72);
  border: var(--soft-border);
  border-radius: 2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.room-tile:hover { transform: translateY(-8px) rotate(-.7deg); box-shadow: 0 32px 80px rgba(45, 27, 82, .26); border-color: rgba(205,183,255,.72); }
.room-tile::after {
  content: "";
  position: absolute;
  width: 13rem;
  height: 13rem;
  right: -5rem;
  bottom: -5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.diary-tile { background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(191,238,255,.68)); }
.gallery-tile { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(232,220,255,.74)); }
.chat-tile { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(205,183,255,.70)); }
.tile-icon { font-size: 3rem; animation: bob 4s ease-in-out infinite; }
.tile-button {
  display: inline-flex;
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(135deg, #fff, var(--sky-soft));
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(45,27,82,.13);
  color: var(--deep-purple);
}



/* Home emoji launcher */
.home-launcher {
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 3vw, 1.4rem);
  padding: clamp(1.2rem, 5vw, 3rem);
}

.launcher-button {
  width: clamp(4.2rem, 10vw, 6.4rem);
  height: clamp(4.2rem, 10vw, 6.4rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  border-radius: 1.65rem;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(223,247,255,.74));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 16px 36px rgba(45, 27, 82, .14), 0 0 24px rgba(205,183,255,.18);
  backdrop-filter: blur(16px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.launcher-button:hover {
  transform: translateY(-5px) rotate(-2deg) scale(1.03);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(232,220,255,.78));
  border-color: rgba(205,183,255,.82);
  box-shadow: 0 22px 50px rgba(45, 27, 82, .19), 0 0 34px rgba(205,183,255,.30);
}

.launcher-button:focus-visible {
  outline: 3px solid rgba(205,183,255,.88);
  outline-offset: 4px;
}

.decor-card { margin-top: 1.2rem; padding: 1.3rem; }
.mini-window { background: rgba(255,255,255,.76); border-radius: 1.4rem; padding: 1rem; border: 2px solid rgba(205,183,255,.38); }
.window-dots { display: flex; gap: .45rem; }
.window-dots span { width: .75rem; height: .75rem; border-radius: 50%; background: var(--sky-bright); display:block; }
.window-dots span:nth-child(2) { background: var(--lavender); }
.window-dots span:nth-child(3) { background: var(--star); }

.section-heading { padding: 2rem; margin-bottom: 1.2rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(247,252,255,.83), rgba(223,247,255,.68)); }
.section-heading h1 { font-size: clamp(2.3rem, 6vw, 4.8rem); }
.section-heading p:last-child { color: var(--muted); max-width: 760px; }

.workspace { margin-top: 1.2rem; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .95fr); gap: 1.2rem; align-items: start; }
.editor-card, .entries-panel { padding: 1.35rem; position: relative; overflow: hidden; }
.card-ribbon { position: absolute; right: 1rem; top: 1rem; font-size: 2rem; animation: wiggle 2s ease-in-out infinite; }
.soft-label { display: block; margin: 1rem 0 .45rem; font-weight: 900; color: var(--deep-purple); }
.soft-input, .soft-editor, .chat-input {
  width: 100%;
  border: 2px solid rgba(112,76,178,.22);
  background: rgba(255,255,255,.86);
  border-radius: 1.3rem;
  padding: 1rem 1.1rem;
  font: inherit;
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 2px 10px rgba(45,27,82,.05);
}
.soft-input:focus, .soft-editor:focus, .chat-input:focus { border-color: var(--lavender); box-shadow: 0 0 0 .35rem rgba(205,183,255,.24); background: #fff; }

.editable-line {
  min-height: 3.4rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.editable-line:empty::before { content: attr(data-placeholder); color: rgba(105,87,131,.62); }
.soft-editor {
  min-height: 14rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.soft-editor:empty::before, .chat-input:empty::before { content: attr(data-placeholder); color: rgba(105,87,131,.62); }
.caption-editor { min-height: 5.5rem; }
.button-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.pill-button {
  border: 0;
  border-radius: 999px;
  padding: .9rem 1.25rem;
  font: inherit;
  font-weight: 900;
  color: var(--deep-purple);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pill-button:hover { transform: translateY(-2px); filter: brightness(1.02); }
.pill-button.primary { background: linear-gradient(135deg, var(--sky), var(--lavender)); box-shadow: 0 12px 26px rgba(45,27,82,.18); }
.pill-button.ghost { background: rgba(255,255,255,.86); box-shadow: 0 10px 20px rgba(45,27,82,.10); }
.status-line { min-height: 1.5rem; font-weight: 900; color: var(--deep-purple); }

.entry-list { display: grid; gap: .85rem; }
.entry-card {
  background: rgba(255,255,255,.86);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 1.4rem;
  padding: 1rem;
  box-shadow: 0 12px 26px rgba(45,27,82,.10);
}
.entry-card h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.entry-meta { color: var(--muted); font-size: .88rem; font-weight: 800; }
.entry-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.entry-actions { display:flex; gap: .5rem; flex-wrap: wrap; }
.small-button { border: 0; border-radius: 999px; padding: .55rem .8rem; cursor: pointer; background: var(--lilac); color: var(--deep-purple); font-weight: 900; }

.drop-zone {
  border: 3px dashed rgba(112,76,178,.28);
  border-radius: 1.8rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255,255,255,.58);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.drop-zone.dragging { transform: scale(1.01); border-color: var(--lavender); background: rgba(223,247,255,.78); }
.drop-art { font-size: 3rem; }
.drop-art span { display: inline-block; animation: wiggle 2.4s ease-in-out infinite; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.image-card {
  background: rgba(255,255,255,.78);
  border: var(--soft-border);
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: popIn .35s ease both;
}
.image-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.image-card-content { padding: 1rem; }
.image-card-content p { white-space: pre-wrap; margin-top: 0; }

.gallery-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin: .2rem 0 .75rem;
}

.gallery-header-row .chat-page-label {
  margin: 0;
}

.gallery-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: .5rem .85rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(205,183,255,.65);
  box-shadow: 0 10px 20px rgba(45,27,82,.08);
}

.gallery-first {
  margin-top: .45rem;
}

.gallery-upload-workspace {
  margin-top: .75rem;
}

.empty-gallery-card {
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
}

.empty-gallery-card .gallery-action-link {
  width: fit-content;
}

.chat-shell { padding: 1rem; background: rgba(247,252,255,.72); }

.chat-page-label {
  width: fit-content;
  margin: .25rem 0 .65rem .35rem;
  padding: .26rem .72rem;
  border-radius: 999px;
  color: var(--deep-purple);
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(205,183,255,.55);
  box-shadow: 0 8px 18px rgba(45,27,82,.07);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.chat-window {
  height: min(60vh, 34rem);
  overflow-y: auto;
  padding: 1rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(205,183,255,.25), transparent 13rem),
    rgba(255,255,255,.48);
  border-radius: 1.8rem;
  border: 2px solid rgba(255,255,255,.72);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.chat-window {
  scrollbar-width: thin;
  scrollbar-color: rgba(173,146,232,.88) rgba(223,247,255,.55);
}
.chat-window::-webkit-scrollbar {
  width: .7rem;
}
.chat-window::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(223,247,255,.62), rgba(247,252,255,.48));
  border-radius: 999px;
}
.chat-window::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(205,183,255,.95), rgba(173,146,232,.9));
  border: 2px solid rgba(247,252,255,.9);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(45,27,82,.08);
}
.chat-window::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(173,146,232,.98), rgba(112,76,178,.72));
}

.message {
  max-width: min(75%, 42rem);
  padding: .9rem 1rem;
  border-radius: 1.3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 20px rgba(45,27,82,.10);
  animation: popIn .2s ease both;
}
.message.you { align-self: flex-end; background: linear-gradient(135deg, #ffffff, var(--sky-soft)); border-bottom-right-radius: .35rem; }
.message.bot {
  align-self: flex-start;
  background: linear-gradient(135deg, #dff7ff, #eef2ff);
  color: var(--deep-purple);
  border: 1px solid rgba(205,183,255,.88);
  border-bottom-left-radius: .35rem;
  box-shadow: 0 14px 30px rgba(92,75,150,.16), 0 0 18px rgba(205,183,255,.22);
}
.message.bot small { color: rgba(45,27,82,.68); }
.message small { display:block; color: var(--muted); font-weight: 900; margin-bottom: .35rem; }

.message.bot.typing-bubble {
  align-self: flex-start;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: .2rem .35rem;
  margin-left: .4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
}
.typing-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--deep-purple);
}
.typing-dots span {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 .45rem rgba(205,183,255,.75);
  opacity: .58;
  animation: typingBounce .9s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: .14s; }
.typing-dots span:nth-child(3) { animation-delay: .28s; }

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: .45;
  }
  40% {
    transform: translateY(-.36rem);
    opacity: 1;
  }
}
.chat-input-row { display: flex; gap: .8rem; margin-top: .9rem; align-items: end; }
.chat-input { min-height: 3.5rem; max-height: 8rem; overflow-y: auto; }

.sparkle-field { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.sparkle-field span { position: absolute; animation: drift 10s ease-in-out infinite; opacity: .60; filter: drop-shadow(0 6px 10px rgba(45,27,82,.12)); }
.sparkle-field span:nth-child(1) { left: 5%; top: 18%; animation-delay: -1s; }
.sparkle-field span:nth-child(2) { left: 18%; top: 78%; animation-delay: -4s; }
.sparkle-field span:nth-child(3) { right: 8%; top: 22%; animation-delay: -6s; }
.sparkle-field span:nth-child(4) { right: 18%; bottom: 12%; animation-delay: -2s; }
.sparkle-field span:nth-child(5) { left: 44%; top: 12%; animation-delay: -5s; }
.sparkle-field span:nth-child(6) { right: 40%; bottom: 18%; animation-delay: -7s; }
.sparkle-field span:nth-child(7) { left: 65%; top: 58%; animation-delay: -3s; }
.sparkle-field span:nth-child(8) { left: 28%; top: 38%; animation-delay: -8s; }
.sky-orb { position: fixed; border-radius: 50%; filter: blur(12px); opacity: .45; z-index: -4; }
.orb-one { width: 18rem; height: 18rem; background: var(--sky-bright); left: -5rem; top: 12rem; }
.orb-two { width: 20rem; height: 20rem; background: var(--lavender); right: -6rem; top: 8rem; }
.orb-three { width: 16rem; height: 16rem; background: var(--deep-purple); left: 42%; bottom: -6rem; opacity: .24; }
.floating-cloud { position: fixed; width: 8rem; height: 3.2rem; background: rgba(247,252,255,.68); border-radius: 999px; z-index: -1; animation: floaty 6s ease-in-out infinite; box-shadow: 0 12px 30px rgba(45,27,82,.08); }
.floating-cloud::before, .floating-cloud::after { content:""; position:absolute; background: inherit; border-radius: 50%; }
.floating-cloud::before { width: 3.8rem; height: 3.8rem; left: 1rem; top: -1.4rem; }
.floating-cloud::after { width: 4.7rem; height: 4.7rem; right: .8rem; top: -2rem; }
.cloud-a { left: 2rem; bottom: 5rem; }
.cloud-b { right: 2rem; bottom: 8rem; animation-delay: -2s; }
.ribbon-tail { position: fixed; font-size: 2rem; opacity: .50; z-index: -1; animation: wiggle 3s ease-in-out infinite; }
.ribbon-left { left: 1rem; top: 50%; }
.ribbon-right { right: 1.2rem; top: 42%; animation-delay: -1.4s; }
.pop-in { animation: popIn .45s ease both; }

@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
@keyframes drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(18px,-28px) rotate(12deg); } }

@media (max-width: 860px) {
  .topbar {
    width: min(100vw - .8rem, 1180px);
    border-radius: 1rem;
    align-items: center;
    flex-direction: row;
    gap: .35rem;
    padding: .28rem .34rem;
  }
  .brand { font-size: .9rem; padding: .32rem .42rem; }
  .nav-pills { justify-content: flex-end; gap: .22rem; }
  .nav-pills a { min-width: auto; flex: 0 0 auto; padding: .42rem .5rem; font-size: .76rem; text-align: center; }
  .tile-grid, .two-column { grid-template-columns: 1fr; }
  .css-moon { opacity: .38; }
  .message { max-width: 92%; }
  .chat-input-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 520px) {
  .topbar {
    flex-direction: row;
    align-items: center;
    gap: .28rem;
    overflow: hidden;
  }
  .brand {
    width: auto;
    max-width: 44%;
    flex: 0 0 auto;
    justify-content: flex-start;
    font-size: .78rem;
    padding: .26rem .32rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-pills {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-pills::-webkit-scrollbar { display: none; }
  .nav-pills a {
    flex: 0 0 auto;
    max-width: none;
    min-width: auto;
    padding: .36rem .46rem;
    font-size: .7rem;
  }
  .page-shell { width: min(100vw - 1rem, 1180px); margin-top: .75rem; }
  .hero-card, .section-heading, .editor-card, .entries-panel, .chat-shell { border-radius: 1.5rem; }
  h1 { font-size: 2.45rem; }
  .hero-card { padding: 1.4rem; }
  .room-tile { min-height: auto; }

  .home-launcher {
    min-height: 52vh;
    gap: .75rem;
    padding: 1.2rem .6rem;
  }
  .launcher-button {
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    font-size: 2rem;
  }
}


/* Gallery image-only wall and detail view */
.hidden { display: none !important; }

.image-only-card {
  display: block;
  text-decoration: none;
  padding: .55rem;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(205,183,255,.62);
  border-radius: 1.7rem;
  box-shadow: 0 16px 36px rgba(45,27,82,.12), 0 0 22px rgba(205,183,255,.16);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.image-only-card:hover {
  transform: translateY(-4px) rotate(-.4deg);
  border-color: rgba(173,146,232,.9);
  box-shadow: 0 22px 44px rgba(45,27,82,.16), 0 0 28px rgba(205,183,255,.25);
}

.image-only-card img {
  border-radius: 1.25rem;
  background: rgba(247,252,255,.8);
}

.detail-header-row { margin-bottom: .8rem; }

.gallery-detail {
  display: grid;
  gap: 1rem;
}

.gallery-detail-card,
.gallery-caption-panel {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(205,183,255,.62);
  border-radius: 1.8rem;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.gallery-detail-image {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  display: block;
  border-radius: 1.35rem;
  background: rgba(247,252,255,.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.gallery-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
  justify-content: flex-end;
}

.danger-button {
  background: linear-gradient(135deg, #fff, #e8dcff);
}

.caption-kicker {
  margin: 0 0 .45rem;
  color: var(--deep-purple);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: lowercase;
}

.gallery-detail-caption {
  min-height: 4.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--deep-purple);
  background: rgba(247,252,255,.56);
  border: 1px solid rgba(205,183,255,.45);
  border-radius: 1.25rem;
  padding: 1rem;
}

.gallery-detail-caption:empty::before {
  content: attr(data-placeholder);
  color: rgba(105,87,131,.62);
}

.gallery-detail-caption.editing-caption {
  outline: none;
  background: rgba(255,255,255,.92);
  border-color: rgba(173,146,232,.92);
  box-shadow: 0 0 0 .32rem rgba(205,183,255,.22);
}


.notebook-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .8rem;
}

.notebook-choice-card {
  min-height: 15rem;
  padding: 1.4rem;
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(223,247,255,.72));
  border: 1px solid rgba(205,183,255,.65);
  color: var(--deep-purple);
  text-decoration: none;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
  position: relative;
}

.notebook-choice-card::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  right: -4.5rem;
  bottom: -5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.48);
}

.notebook-choice-card:hover {
  transform: translateY(-6px);
  border-color: rgba(112,76,178,.35);
  box-shadow: 0 24px 60px rgba(45,27,82,.18);
}

.notebook-choice-icon {
  position: relative;
  z-index: 1;
  font-size: 2.6rem;
  animation: bob 4s ease-in-out infinite;
}

.notebook-choice-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.55rem, 3.5vw, 2.4rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.02em;
}

.writers-choice {
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(232,220,255,.78));
}

.coming-soon-card {
  padding: 1.4rem;
  margin-top: .8rem;
  border-radius: 2rem;
  background: rgba(255,255,255,.76);
  border: var(--soft-border);
  box-shadow: var(--shadow);
}

.coming-soon-card h1 {
  margin-top: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
}

.journal-workspace {
  margin-top: .75rem;
}

@media (max-width: 760px) {
  .notebook-choice-grid {
    grid-template-columns: 1fr;
  }
  .notebook-choice-card {
    min-height: 9rem;
  }
}

/* Journal two-panel notebook layout */
.journal-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: .9rem;
}

.journal-sidebar,
.journal-main-panel {
  background: rgba(247, 252, 255, .74);
  border: var(--soft-border);
  border-radius: 2rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.journal-sidebar {
  padding: 1rem;
  min-height: 34rem;
  position: sticky;
  top: 4.5rem;
  align-self: start;
}

.journal-write-button {
  width: 100%;
  padding: .72rem 1rem;
  margin-bottom: .95rem;
}

.journal-entry-list {
  display: grid;
  gap: .55rem;
  max-height: 30rem;
  overflow-y: auto;
  padding-right: .2rem;
}

.journal-entry-list::-webkit-scrollbar { width: .55rem; }
.journal-entry-list::-webkit-scrollbar-track { background: rgba(223, 247, 255, .58); border-radius: 999px; }
.journal-entry-list::-webkit-scrollbar-thumb { background: rgba(205, 183, 255, .9); border-radius: 999px; }

.journal-entry-link {
  border: 1px solid rgba(205, 183, 255, .42);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.72);
  color: var(--deep-purple);
  cursor: pointer;
  text-align: left;
  padding: .72rem .8rem;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(45, 27, 82, .08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.journal-entry-link:hover,
.journal-entry-link.active {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(223,247,255,.95), rgba(232,220,255,.82));
  border-color: rgba(205, 183, 255, .9);
}

.journal-entry-link span,
.journal-entry-link small {
  display: block;
}

.journal-entry-link small {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.journal-empty-list {
  padding: .65rem;
  line-height: 1.45;
}

.journal-main-panel {
  min-height: 34rem;
  padding: 1.25rem;
}

.journal-empty-state {
  min-height: 30rem;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
}

.journal-empty-icon {
  font-size: 2.4rem;
  margin-bottom: .6rem;
}

.journal-empty-state h1,
.journal-read-header h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.journal-empty-state p {
  max-width: 34rem;
  margin: .75rem auto 0;
  color: var(--muted);
  font-weight: 800;
}

.journal-read-card,
.journal-editor-card {
  min-height: 30rem;
}

.journal-read-card {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(205, 183, 255, .35);
  border-radius: 1.7rem;
  padding: 1.35rem;
}

.journal-read-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.journal-read-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.journal-read-actions .small-button {
  padding: .42rem .68rem;
  font-size: .84rem;
  box-shadow: 0 8px 18px rgba(45, 27, 82, .09);
}

.journal-delete-entry {
  background: rgba(255, 244, 199, .86);
}

.journal-read-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-weight: 700;
  color: var(--ink);
  background: rgba(247,252,255,.62);
  border-radius: 1.4rem;
  padding: 1.1rem;
  border: 1px solid rgba(255,255,255,.78);
}

.journal-status {
  margin: .75rem 0 0;
}

@media (max-width: 760px) {
  .journal-shell {
    grid-template-columns: 1fr;
  }

  .journal-sidebar {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .journal-entry-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(11rem, 14rem);
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: .35rem;
  }

  .journal-read-header {
    display: block;
  }

  .journal-read-actions {
    justify-content: flex-start;
    margin-top: .75rem;
  }
}

/* Gallery albums */
.gallery-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: .45rem;
}

.album-card {
  display: block;
  text-decoration: none;
  color: var(--deep-purple);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(205,183,255,.62);
  border-radius: 1.7rem;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(45,27,82,.12), 0 0 22px rgba(205,183,255,.16);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: popIn .32s ease both;
}

.album-card:hover {
  transform: translateY(-4px) rotate(-.45deg);
  border-color: rgba(205,183,255,.9);
  box-shadow: 0 22px 48px rgba(45,27,82,.18), 0 0 28px rgba(205,183,255,.25);
}

.album-cover {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.9), transparent 5rem),
    linear-gradient(135deg, rgba(223,247,255,.88), rgba(232,220,255,.76));
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-empty-cover {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  border-radius: 1.6rem;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(205,183,255,.52);
  font-size: 2rem;
  box-shadow: 0 12px 26px rgba(45,27,82,.08);
}

.album-card-text {
  padding: .9rem 1rem 1rem;
}

.album-card-text h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--deep-purple);
}

.album-card-text p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}

@media (max-width: 520px) {
  .gallery-header-row {
    align-items: flex-start;
  }

  .gallery-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}


#edit-album,
#delete-album {
  font-size: .78rem;
  padding: .42rem .68rem;
  opacity: .86;
}

#edit-album:hover,
#delete-album:hover {
  opacity: 1;
}

/* Profile settings and chat avatars */
.settings-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.settings-profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem;
  border-radius: 1.8rem;
  background: rgba(247,252,255,.72);
  border: 2px solid rgba(255,255,255,.74);
  box-shadow: 0 18px 48px rgba(45,27,82,.12), 0 0 24px rgba(205,183,255,.16);
  backdrop-filter: blur(16px);
}

.settings-profile-body h2 {
  margin: .15rem 0 .8rem;
  font-family: "Fredoka", sans-serif;
  color: var(--deep-purple);
  font-size: 1.25rem;
}

.settings-avatar-preview,
.profile-avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, var(--sky-soft));
  border: 2px solid rgba(205,183,255,.78);
  color: var(--deep-purple);
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(45,27,82,.12), 0 0 16px rgba(205,183,255,.22);
}

.settings-avatar-preview {
  width: 5rem;
  height: 5rem;
  border-radius: 1.45rem;
  font-size: 1.45rem;
}

.settings-avatar-preview img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-buttons { margin-top: .8rem; }

.chat-message-row {
  position: relative;
  display: block;
  max-width: min(88%, 46rem);
  padding-bottom: 1.75rem;
  animation: popIn .2s ease both;
}

.chat-message-row.you {
  align-self: flex-end;
}

.chat-message-row.bot {
  align-self: flex-start;
}

.chat-message-row .message {
  max-width: 100%;
}

.chat-message-row .profile-avatar {
  position: absolute;
  bottom: 0;
  width: 3.45rem;
  height: 3.45rem;
  border-radius: 1.15rem;
  font-size: 1rem;
  z-index: 2;
}

.chat-message-row.bot .profile-avatar {
  left: .65rem;
}

.chat-message-row.you .profile-avatar {
  right: .65rem;
}

.chat-message-row.typing-row {
  align-self: flex-start;
  max-width: none;
  padding-bottom: .2rem;
  margin-left: 1rem;
}

.chat-message-row.typing-row .profile-avatar {
  display: none;
}

.chat-message-row.typing-row .typing-dots {
  margin-left: .1rem;
}

@media (max-width: 860px) {
  .settings-shell { grid-template-columns: 1fr; }
  .chat-message-row { max-width: min(96%, 46rem); }
}

@media (max-width: 520px) {
  .settings-profile-card {
    grid-template-columns: 1fr;
  }
  .settings-avatar-preview {
    width: 4.4rem;
    height: 4.4rem;
  }
  .chat-message-row .profile-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    font-size: .9rem;
  }
  .chat-message-row.bot .profile-avatar { left: .55rem; }
  .chat-message-row.you .profile-avatar { right: .55rem; }
}

/* Home status feed */
.home-feed-shell {
  width: min(760px, 100%);
  margin: -1.2rem auto 5rem;
  display: grid;
  gap: 1rem;
}

.feed-composer-card,
.feed-post,
.feed-empty-card {
  background: rgba(247,252,255,.74);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 1.7rem;
  box-shadow: 0 18px 46px rgba(45,27,82,.13), 0 0 26px rgba(205,183,255,.12);
  backdrop-filter: blur(16px);
}

.feed-composer-card {
  padding: 1rem;
}

.feed-composer-author,
.feed-author-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.feed-author-chip {
  color: var(--deep-purple);
  font-weight: 900;
  margin-bottom: .7rem;
}

.feed-input {
  min-height: 5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feed-actions-row {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.feed-post-button,
.feed-comment-submit {
  text-transform: lowercase;
}

.feed-list {
  display: grid;
  gap: 1rem;
}

.feed-empty-card {
  min-height: 10rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.4rem;
  color: var(--muted);
}

.feed-empty-icon {
  font-size: 2.2rem;
  margin-bottom: .4rem;
  animation: bob 3.8s ease-in-out infinite;
}

.feed-post {
  padding: 1rem;
}

.feed-post-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.profile-avatar.feed-avatar {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  font-size: .88rem;
  box-shadow: 0 10px 22px rgba(45,27,82,.15), 0 0 0 .22rem rgba(255,255,255,.78);
}

.feed-post-main {
  min-width: 0;
  background: linear-gradient(135deg, rgba(223,247,255,.76), rgba(238,242,255,.72));
  border: 1px solid rgba(205,183,255,.72);
  border-radius: 1.25rem;
  padding: .85rem .95rem;
  box-shadow: 0 10px 24px rgba(92,75,150,.11);
}

.feed-post-header {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}

.feed-post-header strong {
  color: var(--deep-purple);
  font-weight: 900;
}

.feed-post-header small,
.feed-comment-body small {
  color: rgba(45,27,82,.62);
  font-weight: 900;
}

.feed-post-text,
.feed-comment-body p {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.feed-comments {
  margin: .85rem 0 0 3.8rem;
  display: grid;
  gap: .65rem;
}

.feed-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
}

.feed-comment .profile-avatar.feed-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-basis: 2.25rem;
  font-size: .7rem;
}

.feed-comment-body {
  min-width: 0;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(205,183,255,.46);
  border-radius: 1.05rem;
  padding: .65rem .75rem;
}

.feed-comment.bot .feed-comment-body {
  background: linear-gradient(135deg, rgba(223,247,255,.72), rgba(232,220,255,.54));
}

.feed-comment-composer {
  margin: .85rem 0 0 3.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: end;
}

.feed-comment-input {
  min-height: 2.9rem;
  padding: .75rem .9rem;
  border-radius: 1.05rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feed-comment-input:empty::before,
.feed-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(105,87,131,.62);
}

@media (max-width: 720px) {
  .home-feed-shell {
    margin-top: -.4rem;
  }

  .feed-comments,
  .feed-comment-composer {
    margin-left: .25rem;
  }

  .feed-comment-composer {
    grid-template-columns: 1fr;
  }

  .profile-avatar.feed-avatar {
    width: 2.65rem;
    height: 2.65rem;
    flex-basis: 2.65rem;
  }
}

/* Feed interaction cleanup: comment/reply boxes only appear when asked. */
.feed-post-actions {
  margin: .65rem 0 0 3.8rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.tiny-feed-button {
  border: 1px solid rgba(205,183,255,.64);
  background: rgba(255,255,255,.68);
  color: var(--deep-purple);
  border-radius: 999px;
  padding: .34rem .72rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(92,75,150,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-transform: lowercase;
}

.tiny-feed-button:hover {
  transform: translateY(-1px);
  background: rgba(223,247,255,.88);
  box-shadow: 0 10px 20px rgba(92,75,150,.15), 0 0 14px rgba(205,183,255,.32);
}

.feed-comment-composer.is-hidden {
  display: none;
}

.feed-post > .feed-comment-composer {
  margin: .65rem 0 0 3.8rem;
}

.feed-comment-stack {
  min-width: 0;
}

.feed-comment-actions {
  margin: .38rem 0 0 .15rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.feed-comment-stack > .feed-comment-composer {
  margin: .5rem 0 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.feed-replies {
  margin: .65rem 0 0 .75rem;
  padding-left: .65rem;
  border-left: 2px solid rgba(205,183,255,.34);
  display: grid;
  gap: .65rem;
}

.feed-replies .feed-comment {
  gap: .5rem;
}

.feed-replies .profile-avatar.feed-avatar {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  font-size: .64rem;
}

@media (max-width: 720px) {
  .feed-post-actions,
  .feed-post > .feed-comment-composer {
    margin-left: .25rem;
  }

  .feed-comment-stack > .feed-comment-composer {
    grid-template-columns: 1fr;
  }

  .feed-replies {
    margin-left: .2rem;
    padding-left: .55rem;
  }
}


/* Feed threads: keep every reply aligned with the first comment instead of stair-stepping forever. */
.feed-comments {
  gap: .7rem;
}

.feed-comments > .feed-comment {
  margin-left: 0;
}

.feed-comment .feed-comment {
  margin-left: 0;
}

.feed-replies {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}


/* Home feed: collapsed post composer. */
.feed-create-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.feed-open-post {
  width: fit-content;
}

.feed-composer-card.is-hidden,
.feed-create-row .is-hidden {
  display: none;
}

.feed-composer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .7rem;
}

.feed-composer-top .feed-author-chip {
  margin-bottom: 0;
}

.feed-composer-close {
  border: 1px solid rgba(205,183,255,.7);
  background: rgba(255,255,255,.7);
  color: var(--deep-purple);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(92,75,150,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.feed-composer-close:hover {
  transform: translateY(-1px) rotate(6deg);
  background: rgba(232,220,255,.88);
  box-shadow: 0 10px 20px rgba(92,75,150,.15), 0 0 14px rgba(205,183,255,.32);
}

/* Soft dark mode, because night mode should not look like a server closet. */
body[data-theme="dark"] {
  --ink: #f0eaff;
  --muted: #c8bce4;
  --bg-a: #12162d;
  --bg-b: #1d2750;
  --bg-c: #2a1744;
  --cloud: #181d38;
  --card: rgba(31, 38, 74, .76);
  --card-solid: #202849;
  --sky: #6faedf;
  --sky-soft: #25345f;
  --sky-bright: #8cc9ff;
  --lavender: #bba2ff;
  --lilac: #31244f;
  --deep-purple: #f3eaff;
  --midnight: #090b18;
  --star: #fff0b8;
  --violet-glow: rgba(190, 157, 255, .24);
  --sky-glow: rgba(118, 196, 255, .18);
  --shadow: 0 24px 70px rgba(5, 8, 28, .48);
  --soft-border: 2px solid rgba(205, 183, 255, .24);
  background:
    radial-gradient(circle at 15% 12%, rgba(236, 230, 255, .14) 0 4rem, transparent 4.2rem),
    radial-gradient(circle at 84% 11%, rgba(124, 90, 205, .28), transparent 26rem),
    radial-gradient(circle at 16% 78%, rgba(88, 163, 221, .20), transparent 30rem),
    radial-gradient(circle at 72% 84%, rgba(5, 8, 28, .72), transparent 28rem),
    linear-gradient(135deg, var(--bg-a), var(--bg-b) 48%, var(--bg-c));
}

body[data-theme="dark"]::before {
  background-image:
    radial-gradient(rgba(255,255,255,.42) 1.1px, transparent 1.1px),
    radial-gradient(rgba(187,162,255,.26) 1px, transparent 1px),
    radial-gradient(rgba(255,240,184,.55) 1.4px, transparent 1.4px);
  opacity: .52;
}

body[data-theme="dark"]::after {
  background: rgba(19, 24, 50, .72);
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .hero-card,
body[data-theme="dark"] .section-heading,
body[data-theme="dark"] .decor-card,
body[data-theme="dark"] .editor-card,
body[data-theme="dark"] .entries-panel,
body[data-theme="dark"] .chat-shell,
body[data-theme="dark"] .settings-profile-card,
body[data-theme="dark"] .feed-composer-card,
body[data-theme="dark"] .feed-post,
body[data-theme="dark"] .feed-empty-card,
body[data-theme="dark"] .journal-read-card,
body[data-theme="dark"] .album-card,
body[data-theme="dark"] .gallery-card,
body[data-theme="dark"] .gallery-upload-workspace,
body[data-theme="dark"] .notebook-choice,
body[data-theme="dark"] .entry-card,
body[data-theme="dark"] .home-launcher-button {
  background: rgba(31, 38, 74, .72);
  border-color: rgba(205, 183, 255, .25);
  box-shadow: 0 20px 58px rgba(3, 5, 18, .40), 0 0 28px rgba(124, 90, 205, .16);
}

body[data-theme="dark"] .nav-pills a,
body[data-theme="dark"] .pill-button,
body[data-theme="dark"] .small-button,
body[data-theme="dark"] .tiny-feed-button,
body[data-theme="dark"] .feed-composer-close {
  background: linear-gradient(135deg, rgba(47, 57, 100, .86), rgba(52, 38, 84, .82));
  border-color: rgba(205,183,255,.34);
  color: #f4edff;
  box-shadow: 0 10px 22px rgba(3, 5, 18, .30), 0 0 16px rgba(124, 90, 205, .14);
}

body[data-theme="dark"] .nav-pills a:hover,
body[data-theme="dark"] .pill-button:hover,
body[data-theme="dark"] .small-button:hover,
body[data-theme="dark"] .tiny-feed-button:hover,
body[data-theme="dark"] .feed-composer-close:hover {
  background: linear-gradient(135deg, rgba(68, 82, 135, .92), rgba(82, 58, 128, .92));
  box-shadow: 0 12px 26px rgba(3, 5, 18, .34), 0 0 22px rgba(187, 162, 255, .22);
}

body[data-theme="dark"] .soft-input,
body[data-theme="dark"] .soft-editor,
body[data-theme="dark"] .feed-post-main,
body[data-theme="dark"] .feed-comment-body,
body[data-theme="dark"] .message.bot,
body[data-theme="dark"] .message.you {
  background: linear-gradient(135deg, rgba(36, 47, 86, .78), rgba(46, 35, 76, .66));
  border-color: rgba(187,162,255,.36);
  color: #f0eaff;
  box-shadow: 0 12px 26px rgba(3, 5, 18, .28), 0 0 18px rgba(124, 90, 205, .12);
}

body[data-theme="dark"] .message.bot,
body[data-theme="dark"] .feed-comment.bot .feed-comment-body {
  background: linear-gradient(135deg, rgba(35, 54, 96, .82), rgba(58, 42, 91, .70));
}

body[data-theme="dark"] .soft-input:empty::before,
body[data-theme="dark"] .soft-editor:empty::before,
body[data-theme="dark"] .feed-comment-input:empty::before,
body[data-theme="dark"] .feed-input:empty::before {
  color: rgba(232, 220, 255, .56);
}

body[data-theme="dark"] .profile-avatar,
body[data-theme="dark"] .settings-avatar-preview {
  background: linear-gradient(135deg, rgba(38, 49, 91, .92), rgba(62, 42, 94, .9));
  border-color: rgba(187,162,255,.58);
  color: #f4edff;
  box-shadow: 0 12px 26px rgba(3, 5, 18, .34), 0 0 20px rgba(187,162,255,.18);
}

body[data-theme="dark"] .feed-post-header small,
body[data-theme="dark"] .feed-comment-body small,
body[data-theme="dark"] .entry-meta,
body[data-theme="dark"] .status-line,
body[data-theme="dark"] .settings-note,
body[data-theme="dark"] .hero-copy {
  color: rgba(232, 220, 255, .72);
}

body[data-theme="dark"] img {
  filter: saturate(.96) brightness(.95);
}

.settings-note {
  margin: -.35rem 0 .9rem;
  color: var(--muted);
  line-height: 1.5;
}

.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .82rem .9rem;
  border-radius: 1.2rem;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(205,183,255,.44);
  color: var(--deep-purple);
  font-weight: 900;
}

.theme-toggle {
  width: 4rem;
  height: 2.1rem;
  border: 1px solid rgba(205,183,255,.70);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sky-soft), var(--lilac));
  padding: .18rem;
  cursor: pointer;
  box-shadow: inset 0 2px 8px rgba(45,27,82,.10), 0 8px 16px rgba(92,75,150,.10);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.theme-toggle:hover { transform: translateY(-1px); }

.theme-toggle-knob {
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 999px;
  display: block;
  background: #fffdf4;
  box-shadow: 0 4px 10px rgba(45,27,82,.22), 0 0 12px rgba(255,244,199,.66);
  transition: transform .22s ease, background .22s ease;
}

.theme-toggle[aria-checked="true"] {
  background: linear-gradient(135deg, #26345f, #5d448e);
  box-shadow: inset 0 2px 8px rgba(5,8,28,.34), 0 0 18px rgba(187,162,255,.20);
}

.theme-toggle[aria-checked="true"] .theme-toggle-knob {
  transform: translateX(1.86rem);
  background: linear-gradient(135deg, #f8f1ff, #cdb7ff);
}

body[data-theme="dark"] .theme-toggle-row {
  background: rgba(35, 43, 82, .62);
  border-color: rgba(187,162,255,.30);
}

body[data-theme="dark"] .theme-preview {
  background: radial-gradient(circle at 32% 28%, #fff4c7, #bba2ff 46%, #25345f);
}

/* Dark-mode polish pass: readable inputs, softer launcher charms, clearer notebook panels. */
.css-icon {
  position: relative;
  display: inline-block;
  width: 2.65rem;
  height: 2.65rem;
}

.launcher-button {
  color: var(--deep-purple);
}

.css-icon-book {
  width: 2.25rem;
  height: 2.65rem;
  border: .18rem solid currentColor;
  border-radius: .35rem .7rem .7rem .35rem;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(223,247,255,.78));
  box-shadow: inset .42rem 0 0 rgba(205,183,255,.34), 0 0 0 .14rem rgba(255,244,199,.55);
}
.css-icon-book::before {
  content: "";
  position: absolute;
  left: .58rem;
  top: .48rem;
  width: .82rem;
  height: .22rem;
  border-radius: 999px;
  background: var(--star);
  box-shadow: 0 .48rem 0 rgba(205,183,255,.60), 0 .96rem 0 rgba(130,215,255,.50);
}
.css-icon-book::after {
  content: "";
  position: absolute;
  left: .42rem;
  bottom: .34rem;
  width: 1.18rem;
  height: .16rem;
  border-radius: 999px;
  background: rgba(45,27,82,.28);
}

.css-icon-gallery {
  width: 2.65rem;
  height: 2.25rem;
  margin-top: .18rem;
  border: .18rem solid currentColor;
  border-radius: .42rem;
  background: linear-gradient(135deg, rgba(223,247,255,.92), rgba(232,220,255,.76));
  box-shadow: 0 0 0 .14rem rgba(255,244,199,.50), inset 0 0 0 .15rem rgba(255,255,255,.62);
}
.css-icon-gallery::before {
  content: "";
  position: absolute;
  left: .34rem;
  right: .34rem;
  bottom: .34rem;
  height: .86rem;
  background: linear-gradient(135deg, rgba(45,27,82,.72) 0 40%, transparent 41%), linear-gradient(45deg, rgba(130,215,255,.92) 0 48%, rgba(205,183,255,.92) 49%);
  clip-path: polygon(0 100%, 36% 35%, 54% 62%, 74% 18%, 100% 100%);
}
.css-icon-gallery::after {
  content: "";
  position: absolute;
  right: .38rem;
  top: .32rem;
  width: .38rem;
  height: .38rem;
  border-radius: 999px;
  background: var(--star);
  box-shadow: 0 0 .55rem rgba(255,244,199,.65);
}

.css-icon-chat {
  width: 2.8rem;
  height: 2.05rem;
  margin-top: .16rem;
  border: .18rem solid currentColor;
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(223,247,255,.72));
  box-shadow: 0 0 0 .14rem rgba(205,183,255,.45);
}
.css-icon-chat::before {
  content: "";
  position: absolute;
  left: .52rem;
  top: .78rem;
  width: .26rem;
  height: .26rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: .66rem 0 0 currentColor, 1.32rem 0 0 currentColor;
}
.css-icon-chat::after {
  content: "";
  position: absolute;
  left: .46rem;
  bottom: -.55rem;
  width: .72rem;
  height: .72rem;
  background: inherit;
  border-left: .18rem solid currentColor;
  border-bottom: .18rem solid currentColor;
  transform: rotate(-18deg) skewY(18deg);
  border-radius: 0 0 0 .22rem;
}

body[data-theme="dark"] .launcher-button {
  background: linear-gradient(135deg, rgba(48, 67, 116, .54), rgba(56, 43, 91, .50));
  border-color: rgba(187,162,255,.25);
  color: #e9ddff;
  box-shadow: 0 16px 34px rgba(3, 5, 18, .26), 0 0 18px rgba(118,196,255,.08);
}
body[data-theme="dark"] .launcher-button:hover {
  background: linear-gradient(135deg, rgba(62, 82, 139, .62), rgba(75, 55, 115, .58));
  border-color: rgba(187,162,255,.46);
  box-shadow: 0 20px 42px rgba(3, 5, 18, .32), 0 0 22px rgba(187,162,255,.14);
}
body[data-theme="dark"] .css-icon-book,
body[data-theme="dark"] .css-icon-chat,
body[data-theme="dark"] .css-icon-gallery {
  background: linear-gradient(135deg, rgba(164, 219, 255, .20), rgba(187,162,255,.15));
  box-shadow: 0 0 0 .12rem rgba(187,162,255,.24), inset 0 0 0 .12rem rgba(255,255,255,.09);
}
body[data-theme="dark"] .css-icon-book::before { box-shadow: 0 .48rem 0 rgba(187,162,255,.36), 0 .96rem 0 rgba(140,201,255,.32); }
body[data-theme="dark"] .css-icon-book::after { background: rgba(240,234,255,.32); }
body[data-theme="dark"] .css-icon-gallery::before { opacity: .72; }
body[data-theme="dark"] .css-icon-gallery::after { background: rgba(255,240,184,.86); }

body[data-theme="dark"] .soft-input,
body[data-theme="dark"] .soft-editor,
body[data-theme="dark"] .chat-input,
body[data-theme="dark"] .feed-input,
body[data-theme="dark"] .feed-comment-input,
body[data-theme="dark"] .caption-edit-area {
  background: linear-gradient(135deg, rgba(22, 29, 57, .94), rgba(35, 42, 79, .88));
  border-color: rgba(187,162,255,.42);
  color: #f6f0ff;
  caret-color: #fff4c7;
  box-shadow: inset 0 2px 12px rgba(3,5,18,.36), 0 0 0 1px rgba(118,196,255,.06);
}
body[data-theme="dark"] .soft-input:focus,
body[data-theme="dark"] .soft-editor:focus,
body[data-theme="dark"] .chat-input:focus,
body[data-theme="dark"] .feed-input:focus,
body[data-theme="dark"] .feed-comment-input:focus,
body[data-theme="dark"] .caption-edit-area:focus {
  background: linear-gradient(135deg, rgba(25, 35, 69, .98), rgba(42, 48, 90, .94));
  border-color: rgba(205,183,255,.72);
  box-shadow: 0 0 0 .25rem rgba(187,162,255,.18), inset 0 2px 12px rgba(3,5,18,.34);
}
body[data-theme="dark"] .editable-line:empty::before,
body[data-theme="dark"] .soft-editor:empty::before,
body[data-theme="dark"] .chat-input:empty::before,
body[data-theme="dark"] .soft-input:empty::before,
body[data-theme="dark"] .feed-input:empty::before,
body[data-theme="dark"] .feed-comment-input:empty::before {
  color: rgba(232,220,255,.62);
}

body[data-theme="dark"] .journal-sidebar,
body[data-theme="dark"] .journal-main-panel,
body[data-theme="dark"] .journal-read-card,
body[data-theme="dark"] .journal-editor-card,
body[data-theme="dark"] .entry-card,
body[data-theme="dark"] .entries-panel,
body[data-theme="dark"] .editor-card {
  background: linear-gradient(135deg, rgba(25, 33, 66, .88), rgba(36, 31, 64, .80));
  border-color: rgba(187,162,255,.30);
  color: #f3ecff;
  box-shadow: 0 22px 56px rgba(3,5,18,.42), 0 0 22px rgba(124,90,205,.12);
}
body[data-theme="dark"] .journal-entry-link,
body[data-theme="dark"] .entry-card,
body[data-theme="dark"] .notebook-choice-card {
  background: linear-gradient(135deg, rgba(30, 42, 78, .82), rgba(44, 36, 73, .72));
  border-color: rgba(187,162,255,.32);
  color: #f4edff;
}
body[data-theme="dark"] .journal-entry-link:hover,
body[data-theme="dark"] .journal-entry-link.active {
  background: linear-gradient(135deg, rgba(53, 72, 123, .86), rgba(72, 52, 110, .78));
  border-color: rgba(205,183,255,.60);
}
body[data-theme="dark"] .journal-entry-link small,
body[data-theme="dark"] .journal-empty-list,
body[data-theme="dark"] .journal-empty-state p {
  color: rgba(232,220,255,.78);
}
body[data-theme="dark"] .journal-read-body {
  background: rgba(18, 24, 49, .72);
  border-color: rgba(187,162,255,.26);
  color: #f6f0ff;
}
body[data-theme="dark"] .journal-read-header h1,
body[data-theme="dark"] .journal-read-header,
body[data-theme="dark"] .soft-label {
  color: #f7f1ff;
}
body[data-theme="dark"] .journal-delete-entry {
  background: rgba(68, 52, 96, .78);
  color: #fff0f4;
  border-color: rgba(255,180,205,.32);
}

/* Home decorative title card: compact identity plaque, not a brochure goblin. */
.home-title-card {
  position: relative;
  width: min(660px, calc(100% - 2rem));
  margin: -1.35rem auto 1.15rem;
  padding: clamp(1.35rem, 4vw, 2.15rem) clamp(1.15rem, 4vw, 2rem);
  text-align: center;
  overflow: hidden;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 15% 22%, rgba(255, 244, 199, .45), transparent 18%),
    radial-gradient(circle at 84% 28%, rgba(205, 183, 255, .48), transparent 20%),
    linear-gradient(135deg, rgba(247, 252, 255, .88), rgba(223, 247, 255, .72) 52%, rgba(232, 220, 255, .58));
  border: 1px solid rgba(255, 255, 255, .90);
  box-shadow: 0 18px 46px rgba(45, 27, 82, .13), 0 0 30px rgba(205, 183, 255, .16);
  backdrop-filter: blur(16px);
}

.home-title-card::before,
.home-title-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-title-card::before {
  left: -1.4rem;
  bottom: -.6rem;
  width: 7.2rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .52);
  box-shadow: 3.8rem -.35rem 0 rgba(255, 255, 255, .32), 9.4rem .2rem 0 rgba(255, 255, 255, .24);
}

.home-title-card::after {
  right: -1.1rem;
  top: -.65rem;
  width: 6.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .40);
  box-shadow: -3rem .55rem 0 rgba(255, 255, 255, .28);
}

.home-title-card h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.05rem, 7vw, 4rem);
  line-height: .95;
  letter-spacing: .02em;
  color: var(--deep-purple);
  text-shadow: 0 .16rem 0 rgba(255, 255, 255, .56), 0 0 18px rgba(205, 183, 255, .34);
}

.home-title-card p {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: .75rem auto 0;
  color: rgba(45, 27, 82, .72);
  font-weight: 800;
  line-height: 1.55;
}

.home-title-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.home-title-moon {
  left: clamp(1rem, 5vw, 2.2rem);
  top: clamp(1rem, 4vw, 1.55rem);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--star);
  box-shadow: inset -.62rem .08rem 0 rgba(223, 247, 255, .96), 0 0 18px rgba(255, 244, 199, .68);
  transform: rotate(-12deg);
}

.home-title-bow {
  right: clamp(1rem, 5vw, 2.15rem);
  bottom: clamp(1rem, 4vw, 1.45rem);
  width: 3rem;
  height: 1.55rem;
}

.home-title-bow::before,
.home-title-bow::after {
  content: "";
  position: absolute;
  top: .22rem;
  width: 1.2rem;
  height: 1rem;
  background: linear-gradient(135deg, rgba(205, 183, 255, .92), rgba(130, 215, 255, .72));
  border: 2px solid rgba(45, 27, 82, .35);
}

.home-title-bow::before {
  left: .15rem;
  border-radius: 70% 35% 60% 40%;
  transform: rotate(-14deg);
}

.home-title-bow::after {
  right: .15rem;
  border-radius: 35% 70% 40% 60%;
  transform: rotate(14deg);
}

.home-title-bow span {
  position: absolute;
  left: 50%;
  top: .42rem;
  width: .62rem;
  height: .62rem;
  transform: translateX(-50%) rotate(45deg);
  border-radius: .18rem;
  background: rgba(255, 244, 199, .94);
  border: 2px solid rgba(45, 27, 82, .28);
  box-shadow: 0 0 12px rgba(255, 244, 199, .45);
}

.home-title-stars span {
  position: absolute;
  z-index: 1;
  width: .55rem;
  height: .55rem;
  background: rgba(255, 244, 199, .94);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(0 0 8px rgba(255, 244, 199, .55));
  animation: twinkle 3.4s ease-in-out infinite;
}

.home-title-stars span:nth-child(1) { left: 22%; top: 22%; }
.home-title-stars span:nth-child(2) { right: 24%; top: 18%; animation-delay: .7s; transform: scale(.75); }
.home-title-stars span:nth-child(3) { left: 63%; bottom: 20%; animation-delay: 1.3s; transform: scale(.62); }

.home-title-card + .home-feed-shell {
  margin-top: 0;
}

body[data-theme="dark"] .home-title-card {
  background:
    radial-gradient(circle at 15% 22%, rgba(255, 244, 199, .20), transparent 18%),
    radial-gradient(circle at 84% 28%, rgba(187, 162, 255, .22), transparent 20%),
    linear-gradient(135deg, rgba(31, 42, 78, .78), rgba(38, 35, 72, .72) 55%, rgba(43, 53, 96, .62));
  border-color: rgba(205, 183, 255, .28);
  box-shadow: 0 22px 58px rgba(3, 5, 18, .38), 0 0 28px rgba(124, 90, 205, .18);
}

body[data-theme="dark"] .home-title-card h1 {
  color: #f8f2ff;
  text-shadow: 0 .12rem 0 rgba(22, 29, 57, .72), 0 0 22px rgba(187, 162, 255, .28);
}

body[data-theme="dark"] .home-title-card p {
  color: rgba(232, 220, 255, .78);
}

body[data-theme="dark"] .home-title-card::before,
body[data-theme="dark"] .home-title-card::after {
  background: rgba(164, 219, 255, .12);
  box-shadow: 3.8rem -.35rem 0 rgba(187, 162, 255, .10), 9.4rem .2rem 0 rgba(255, 255, 255, .06);
}

body[data-theme="dark"] .home-title-card::after {
  box-shadow: -3rem .55rem 0 rgba(187, 162, 255, .10);
}

body[data-theme="dark"] .home-title-moon {
  background: rgba(255, 244, 199, .88);
  box-shadow: inset -.62rem .08rem 0 rgba(31, 42, 78, .96), 0 0 20px rgba(255, 244, 199, .30);
}

body[data-theme="dark"] .home-title-bow::before,
body[data-theme="dark"] .home-title-bow::after {
  background: linear-gradient(135deg, rgba(187, 162, 255, .62), rgba(118, 196, 255, .34));
  border-color: rgba(232, 220, 255, .28);
}

@media (max-width: 720px) {
  .home-title-card {
    width: min(100%, calc(100% - .9rem));
    margin-top: -1rem;
    border-radius: 1.55rem;
  }

  .home-title-card p {
    font-size: .92rem;
  }

  .home-title-moon {
    width: 1.65rem;
    height: 1.65rem;
  }

  .home-title-bow {
    transform: scale(.82);
    transform-origin: right bottom;
  }
}

/* Silas notebook popup handoff */
.silas-notebook-pop {
  position: fixed;
  right: clamp(.8rem, 3vw, 2rem);
  bottom: clamp(.9rem, 3vw, 1.7rem);
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 21rem);
  align-items: end;
  gap: .55rem;
  max-width: min(92vw, 27rem);
  opacity: 0;
  transform: translateY(1rem) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.silas-notebook-pop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.silas-pop-avatar .profile-avatar {
  width: 4.15rem;
  height: 4.15rem;
  border-radius: 1.35rem;
  box-shadow: 0 12px 28px rgba(45, 27, 82, .22), 0 0 0 3px rgba(205, 183, 255, .56);
  background: linear-gradient(135deg, var(--sky-soft), var(--lilac));
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
}

.silas-pop-bubble {
  position: relative;
  padding: .95rem 1rem .85rem;
  border-radius: 1.25rem 1.25rem 1.25rem .55rem;
  background: linear-gradient(135deg, rgba(223, 247, 255, .94), rgba(239, 230, 255, .94));
  border: 2px solid rgba(205, 183, 255, .78);
  color: var(--deep-purple);
  box-shadow: 0 18px 44px rgba(45, 27, 82, .20), 0 0 22px rgba(130, 215, 255, .24);
  backdrop-filter: blur(14px);
}

.silas-pop-bubble::before {
  content: "";
  position: absolute;
  left: -.42rem;
  bottom: .72rem;
  width: .78rem;
  height: .78rem;
  background: inherit;
  border-left: 2px solid rgba(205, 183, 255, .78);
  border-bottom: 2px solid rgba(205, 183, 255, .78);
  transform: rotate(45deg);
  border-radius: .18rem;
}

.silas-pop-bubble p {
  margin: 0;
  line-height: 1.45;
  font-weight: 750;
}

.silas-pop-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .7rem;
}

.silas-pop-reply {
  text-decoration: none;
}

.silas-pop-close {
  position: absolute;
  top: -.45rem;
  right: -.35rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(205, 183, 255, .82);
  border-radius: 999px;
  background: rgba(247, 252, 255, .96);
  color: var(--deep-purple);
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(45, 27, 82, .14);
}

.chat-handoff-card {
  display: flex;
  justify-content: space-between;
  gap: .9rem;
  align-items: start;
  margin-bottom: .9rem;
  padding: .85rem 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(223, 247, 255, .82), rgba(232, 220, 255, .78));
  border: 2px solid rgba(205, 183, 255, .62);
  box-shadow: 0 14px 34px rgba(45, 27, 82, .13);
}

.chat-handoff-card .handoff-kicker {
  display: block;
  margin-bottom: .22rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
  color: rgba(45, 27, 82, .72);
}

.chat-handoff-card strong {
  display: block;
  color: var(--deep-purple);
  font-family: "Fredoka", sans-serif;
}

.chat-handoff-card p {
  margin: .3rem 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.chat-handoff-card .small-button {
  min-width: 2rem;
  padding: .35rem .58rem;
}

body[data-theme="dark"] .silas-pop-bubble {
  background: linear-gradient(135deg, rgba(42, 55, 94, .96), rgba(51, 43, 88, .94));
  border-color: rgba(187, 162, 255, .44);
  color: #f8f2ff;
  box-shadow: 0 18px 44px rgba(3, 5, 18, .44), 0 0 24px rgba(124, 90, 205, .24);
}

body[data-theme="dark"] .silas-pop-avatar .profile-avatar {
  background: linear-gradient(135deg, rgba(42, 55, 94, .96), rgba(187, 162, 255, .34));
  box-shadow: 0 12px 28px rgba(3, 5, 18, .45), 0 0 0 3px rgba(187, 162, 255, .34);
}

body[data-theme="dark"] .silas-pop-close {
  background: rgba(31, 42, 78, .96);
  color: #f8f2ff;
  border-color: rgba(187, 162, 255, .42);
}

body[data-theme="dark"] .chat-handoff-card {
  background: linear-gradient(135deg, rgba(31, 42, 78, .82), rgba(48, 42, 86, .72));
  border-color: rgba(187, 162, 255, .32);
  box-shadow: 0 16px 40px rgba(3, 5, 18, .34);
}

body[data-theme="dark"] .chat-handoff-card .handoff-kicker,
body[data-theme="dark"] .chat-handoff-card p {
  color: rgba(232, 220, 255, .76);
}

body[data-theme="dark"] .chat-handoff-card strong {
  color: #f8f2ff;
}

@media (max-width: 560px) {
  .silas-notebook-pop {
    left: .75rem;
    right: .75rem;
    grid-template-columns: auto 1fr;
    max-width: none;
  }

  .silas-pop-avatar .profile-avatar {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1.05rem;
  }

  .silas-pop-bubble {
    padding: .82rem .88rem;
    font-size: .92rem;
  }
}

/* Notebook handoff shown inside chat history */
.chat-context-row {
  align-self: center;
  width: min(92%, 34rem);
  margin: .15rem auto .55rem;
  animation: popIn .22s ease both;
}

.chat-context-message {
  padding: .7rem .95rem;
  border-radius: 1.1rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(223, 247, 255, .74), rgba(232, 220, 255, .72));
  border: 1px solid rgba(205, 183, 255, .58);
  box-shadow: 0 10px 24px rgba(45, 27, 82, .12);
  color: rgba(45, 27, 82, .82);
  font-size: .9rem;
  line-height: 1.35;
}

.chat-context-message span {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
  color: var(--deep-purple);
}

.chat-context-message p {
  margin: .25rem 0 0;
  color: var(--muted);
}

body[data-theme="dark"] .chat-context-message {
  background: linear-gradient(135deg, rgba(31, 42, 78, .72), rgba(48, 42, 86, .66));
  border-color: rgba(187, 162, 255, .32);
  box-shadow: 0 14px 32px rgba(3, 5, 18, .28);
  color: rgba(232, 220, 255, .78);
}

body[data-theme="dark"] .chat-context-message span {
  color: #f8f2ff;
}

body[data-theme="dark"] .chat-context-message p {
  color: rgba(232, 220, 255, .74);
}

/* Silas activity toggles */
.silas-settings-card {
  align-items: start;
}

.silas-settings-preview {
  background: linear-gradient(135deg, var(--deep-purple), var(--lilac));
  color: #fffdf4;
  box-shadow: 0 0 18px rgba(205,183,255,.34);
}

.silas-toggle-row + .silas-toggle-row {
  margin-top: .7rem;
}

body[data-theme="dark"] .silas-settings-preview {
  background: linear-gradient(135deg, #0f183d, #5d448e);
  color: #f8f1ff;
}

/* Responsive compact pass: make Ribbon Moon behave on phone screens instead of sprawling like a sleepy cat. */
html {
  -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

button,
a,
[role="button"],
[contenteditable="true"] {
  -webkit-tap-highlight-color: rgba(205,183,255,.24);
}

@media (max-width: 980px) {
  .page-shell {
    width: min(100vw - 1.25rem, 1180px);
    margin-bottom: 3.5rem;
  }

  .home-launcher {
    min-height: auto;
    padding: 1rem .6rem .65rem;
  }

  .home-title-card {
    margin-top: .25rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .settings-shell {
    grid-template-columns: 1fr;
  }

  .chat-window {
    height: min(62vh, 36rem);
  }
}

@media (max-width: 720px) {
  body {
    background-attachment: fixed;
  }

  .topbar {
    margin-top: .3rem;
    top: .3rem;
    min-height: 2.75rem;
    padding: .22rem .28rem;
  }

  .brand-moon {
    font-size: .9rem;
  }

  .nav-pills a {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .page-shell {
    width: min(100vw - .8rem, 1180px);
    margin-top: .55rem;
    margin-bottom: 2.5rem;
  }

  .home-launcher {
    justify-content: center;
    gap: .55rem;
    padding: .65rem .25rem .45rem;
  }

  .launcher-button {
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 1.15rem;
  }

  .css-icon {
    transform: scale(.78);
  }

  .home-title-card {
    width: 100%;
    margin: .15rem auto .75rem;
    padding: 1.1rem .95rem 1rem;
    border-radius: 1.35rem;
  }

  .home-title-card h1 {
    font-size: clamp(1.95rem, 11vw, 2.75rem);
  }

  .home-title-card p {
    max-width: 22rem;
    margin-top: .5rem;
    font-size: .86rem;
    line-height: 1.45;
  }

  .home-title-stars span:nth-child(1) { left: 16%; top: 18%; }
  .home-title-stars span:nth-child(2) { right: 17%; top: 16%; }
  .home-title-stars span:nth-child(3) { left: 74%; bottom: 18%; }

  .home-feed-shell {
    width: 100%;
    margin: 0 auto 2.4rem;
    gap: .75rem;
  }

  .feed-composer-card,
  .feed-post,
  .feed-empty-card {
    border-radius: 1.25rem;
    padding: .75rem;
  }

  .feed-post-top {
    gap: .55rem;
  }

  .feed-post-main {
    padding: .72rem .78rem;
    border-radius: 1rem;
  }

  .profile-avatar.feed-avatar {
    width: 2.35rem;
    height: 2.35rem;
    flex-basis: 2.35rem;
    border-radius: .85rem;
  }

  .feed-comments,
  .feed-post-actions,
  .feed-post > .feed-comment-composer {
    margin-left: 0;
  }

  .feed-comment {
    gap: .45rem;
  }

  .feed-comment .profile-avatar.feed-avatar,
  .feed-replies .profile-avatar.feed-avatar {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
    border-radius: .72rem;
  }

  .feed-comment-body {
    padding: .56rem .62rem;
    border-radius: .9rem;
  }

  .feed-comment-stack > .feed-comment-composer,
  .feed-comment-composer {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .feed-comment-submit,
  .feed-post-button {
    width: fit-content;
  }

  .chat-shell {
    padding: .65rem;
    border-radius: 1.2rem;
  }

  .chat-page-label {
    margin: .1rem 0 .45rem .2rem;
    padding: .22rem .62rem;
    font-size: .74rem;
  }

  .chat-window {
    height: calc(100vh - 12.5rem);
    min-height: 24rem;
    padding: .7rem;
    gap: .65rem;
    border-radius: 1.15rem;
  }

  .chat-message-row {
    max-width: 98%;
    padding-bottom: 1.45rem;
  }

  .message {
    padding: .75rem .82rem;
    border-radius: 1.05rem;
    font-size: .95rem;
  }

  .message small {
    margin-bottom: .25rem;
    font-size: .72rem;
  }

  .chat-message-row .profile-avatar {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .85rem;
  }

  .chat-message-row.bot .profile-avatar { left: .38rem; }
  .chat-message-row.you .profile-avatar { right: .38rem; }

  .chat-input-row {
    margin-top: .65rem;
    gap: .55rem;
  }

  .chat-input {
    min-height: 3rem;
    max-height: 7rem;
    padding: .78rem .9rem;
    border-radius: 1.05rem;
  }

  .chat-input-row .pill-button {
    width: 100%;
    padding: .76rem 1rem;
  }

  .gallery-header-row {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .gallery-header-actions,
  .gallery-detail-actions,
  .button-row,
  .feed-actions-row {
    gap: .45rem;
  }

  .small-button,
  .pill-button,
  .gallery-action-link {
    min-height: 2.25rem;
    padding: .58rem .78rem;
  }

  .gallery-grid,
  .album-grid {
    gap: .65rem;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .image-only-card {
    padding: .35rem;
    border-radius: 1.15rem;
  }

  .image-only-card img {
    border-radius: .86rem;
  }

  .album-card {
    border-radius: 1.15rem;
  }

  .album-card-text {
    padding: .7rem .75rem .78rem;
  }

  .album-card-text h3 {
    font-size: 1.02rem;
  }

  .album-card-text p {
    font-size: .78rem;
  }

  .album-empty-cover {
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 1.15rem;
  }

  .gallery-detail-card,
  .gallery-caption-panel {
    padding: .65rem;
    border-radius: 1.25rem;
  }

  .gallery-detail-image {
    max-height: 68vh;
    border-radius: 1rem;
  }

  .journal-shell {
    gap: .65rem;
    margin-top: .55rem;
  }

  .journal-sidebar,
  .journal-main-panel {
    border-radius: 1.25rem;
  }

  .journal-sidebar {
    padding: .7rem;
  }

  .journal-write-button {
    margin-bottom: .65rem;
  }

  .journal-entry-list {
    grid-auto-columns: minmax(9.2rem, 12rem);
    gap: .45rem;
  }

  .journal-entry-link {
    padding: .58rem .62rem;
    border-radius: .95rem;
  }

  .journal-entry-link small {
    font-size: .7rem;
  }

  .journal-main-panel {
    min-height: 25rem;
    padding: .75rem;
  }

  .journal-empty-state {
    min-height: 22rem;
    padding: 1.2rem .8rem;
  }

  .journal-empty-state h1,
  .journal-read-header h1 {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
  }

  .journal-read-card,
  .journal-editor-card {
    min-height: 24rem;
  }

  .journal-read-card {
    padding: .85rem;
    border-radius: 1.15rem;
  }

  .journal-read-body {
    padding: .8rem;
    border-radius: 1rem;
    font-size: .95rem;
  }

  .soft-label {
    margin-top: .75rem;
  }

  .soft-input,
  .soft-editor {
    padding: .78rem .9rem;
    border-radius: 1.05rem;
  }

  .soft-editor {
    min-height: 11rem;
  }

  .notebook-choice-grid {
    gap: .65rem;
  }

  .notebook-choice-card {
    min-height: 7.25rem;
    border-radius: 1.25rem;
    padding: .9rem;
  }

  .notebook-choice-icon {
    font-size: 2rem;
  }

  .notebook-choice-title {
    font-size: 1.55rem;
  }

  .settings-profile-card {
    padding: .85rem;
    border-radius: 1.25rem;
    gap: .75rem;
  }

  .settings-avatar-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 1.15rem;
  }

  .theme-toggle-row {
    padding: .7rem .75rem;
    border-radius: 1rem;
  }

  .silas-notebook-pop {
    bottom: .65rem;
  }
}

@media (max-width: 430px) {
  .brand {
    max-width: 37%;
    font-size: .72rem;
  }

  .nav-pills a {
    padding: .34rem .42rem;
    font-size: .66rem;
  }

  .page-shell {
    width: min(100vw - .55rem, 1180px);
  }

  .launcher-button {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
  }

  .css-icon {
    transform: scale(.68);
  }

  .home-title-card h1 {
    font-size: clamp(1.72rem, 10vw, 2.25rem);
  }

  .home-title-card p {
    font-size: .8rem;
  }

  .home-title-moon {
    opacity: .75;
  }

  .home-title-bow {
    opacity: .85;
    transform: scale(.68);
  }

  .feed-post-top {
    grid-template-columns: 2.15rem minmax(0, 1fr);
  }

  .profile-avatar.feed-avatar {
    width: 2.05rem;
    height: 2.05rem;
    flex-basis: 2.05rem;
    font-size: .64rem;
  }

  .feed-comment {
    grid-template-columns: 1.85rem minmax(0, 1fr);
  }

  .feed-comment .profile-avatar.feed-avatar,
  .feed-replies .profile-avatar.feed-avatar {
    width: 1.8rem;
    height: 1.8rem;
    flex-basis: 1.8rem;
    font-size: .56rem;
  }

  .chat-window {
    height: calc(100vh - 11.8rem);
    min-height: 22rem;
  }

  .message {
    font-size: .92rem;
  }

  .chat-message-row .profile-avatar {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .78rem;
  }

  .gallery-grid,
  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }

  .journal-entry-list {
    grid-auto-columns: minmax(8.4rem, 10.5rem);
  }

  .journal-read-actions .small-button {
    padding: .4rem .55rem;
    font-size: .78rem;
  }

  .silas-pop-avatar .profile-avatar {
    width: 2.8rem;
    height: 2.8rem;
  }

  .silas-pop-bubble {
    font-size: .86rem;
  }
}

@media (max-width: 360px) {
  .brand {
    max-width: 34%;
  }

  .nav-pills a {
    font-size: .62rem;
  }

  .launcher-button {
    width: 3rem;
    height: 3rem;
  }

  .home-launcher {
    gap: .42rem;
  }

  .gallery-grid,
  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  }
}

@media (hover: none) and (pointer: coarse) {
  .room-tile:hover,
  .launcher-button:hover,
  .album-card:hover,
  .image-only-card:hover,
  .notebook-choice-card:hover,
  .pill-button:hover,
  .small-button:hover,
  .tiny-feed-button:hover {
    transform: none;
  }
}

/* Patch: Silas feed toggles, chat clear, tighter bubbles, and feed pagination. */
.chat-page-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}

.chat-page-tools .chat-page-label {
  margin-bottom: 0;
}

.chat-clear-button {
  flex: 0 0 auto;
  opacity: .86;
}

.chat-screen-cleared {
  align-self: center;
  margin: auto;
  padding: .6rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(205,183,255,.45);
  background: rgba(247,252,255,.42);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}

.chat-message-row {
  padding-bottom: 1.35rem;
}

.chat-message-row .message {
  padding-top: .68rem;
  padding-bottom: .78rem;
}

.chat-message-row .message small,
.message small {
  margin-bottom: .18rem;
  line-height: 1.15;
}

.feed-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .3rem 0 .8rem;
}

.feed-page-button.active {
  background: linear-gradient(135deg, rgba(191,238,255,.95), rgba(205,183,255,.78));
  box-shadow: 0 10px 22px rgba(92,75,150,.16), 0 0 14px rgba(205,183,255,.30);
}

.feed-page-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

body[data-theme="dark"] .chat-screen-cleared {
  background: rgba(17, 23, 58, .72);
  color: rgba(238,242,255,.74);
  border-color: rgba(174,155,255,.38);
}

body[data-theme="dark"] .feed-page-button.active {
  background: linear-gradient(135deg, rgba(71,97,154,.95), rgba(111,82,165,.82));
  color: rgba(247,252,255,.96);
  border-color: rgba(198,184,255,.72);
}

@media (max-width: 640px) {
  .chat-page-tools {
    gap: .45rem;
    margin-bottom: .35rem;
  }

  .chat-clear-button {
    font-size: .72rem;
    padding: .26rem .58rem;
  }

  .chat-message-row {
    padding-bottom: 1.1rem;
  }

  .chat-message-row .message {
    padding: .58rem .72rem .68rem;
  }

  .feed-pagination {
    gap: .25rem;
  }

  .feed-page-button {
    padding: .28rem .58rem;
    font-size: .75rem;
  }
}


/* Patch: actual chat bubble top-spacing cleanup. */
.chat-message-row .message {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding-top: .54rem;
}

.chat-message-row .message small {
  margin: 0;
  padding: 0;
  line-height: 1.08;
}

.chat-message-row .message .message-text {
  margin: 0;
  padding: 0;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message-row.you .message,
.chat-message-row.bot .message {
  padding-top: .54rem;
}

@media (max-width: 640px) {
  .chat-message-row .message {
    gap: .18rem;
    padding-top: .48rem;
  }

  .chat-message-row .message small {
    line-height: 1.04;
  }

  .chat-message-row .message .message-text {
    line-height: 1.34;
  }
}

/* Patch: remove chat avatars and darken the chat conversation area. */
.chat-message-row {
  padding-bottom: 0;
}

.chat-message-row .profile-avatar {
  display: none !important;
}

.chat-message-row .message {
  max-width: min(86%, 42rem);
}

.chat-message-row.you .message {
  margin-left: auto;
}

.chat-message-row.bot .message {
  margin-right: auto;
}

.chat-message-row .message small,
.message.you small,
.message.bot small,
body[data-theme="dark"] .chat-message-row .message small,
body[data-theme="dark"] .message.you small,
body[data-theme="dark"] .message.bot small {
  color: rgba(232, 220, 255, .72);
}

body:not([data-theme="dark"]) .chat-message-row .message small,
body:not([data-theme="dark"]) .message.you small,
body:not([data-theme="dark"]) .message.bot small {
  color: rgba(75, 58, 118, .66);
}

body[data-theme="dark"] .chat-window {
  background:
    radial-gradient(circle at 14% 12%, rgba(121, 103, 193, .22), transparent 12rem),
    radial-gradient(circle at 86% 82%, rgba(57, 104, 164, .18), transparent 15rem),
    linear-gradient(135deg, rgba(11, 16, 44, .88), rgba(22, 19, 55, .86));
  border-color: rgba(202, 190, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(122, 103, 193, .20), 0 18px 48px rgba(2, 4, 20, .36);
}

body[data-theme="dark"] .chat-shell {
  background: rgba(13, 17, 45, .74);
}

@media (max-width: 640px) {
  .chat-message-row {
    padding-bottom: 0;
    max-width: 100%;
  }

  .chat-message-row .message {
    max-width: 92%;
  }
}

/* Home feed post management: tiny delete and cosmetic clear. */
.feed-create-row {
  gap: .5rem;
  flex-wrap: wrap;
}

.feed-clear-posts,
.feed-delete-post {
  opacity: .86;
}

.feed-delete-post:hover {
  border-color: rgba(171, 98, 134, .42);
  background: rgba(255, 231, 242, .72);
}

body[data-theme="dark"] .feed-delete-post:hover {
  border-color: rgba(255, 173, 215, .36);
  background: linear-gradient(135deg, rgba(91, 55, 91, .88), rgba(65, 46, 92, .88));
}

@media (max-width: 640px) {
  .feed-create-row {
    gap: .42rem;
  }

  .feed-post-actions {
    margin-left: .4rem;
  }

  .feed-post > .feed-comment-composer {
    margin-left: .4rem;
  }
}

/* Home cleanup: title plaque first, tiny launcher underneath, feed gets its own room. */
body[data-page="home"] .home-title-card {
  margin-top: clamp(.65rem, 3vw, 1.4rem);
  margin-bottom: clamp(.7rem, 2.4vw, 1.05rem);
}

body[data-page="home"] .home-launcher {
  min-height: 0;
  padding: clamp(.35rem, 2vw, .8rem) clamp(.35rem, 2vw, .8rem) clamp(1.35rem, 4vw, 2.4rem);
}

.feed-page-shell {
  margin-top: clamp(.75rem, 3vw, 1.4rem);
}

.css-icon-feed {
  width: 2.45rem;
  height: 2.45rem;
  border: .18rem solid currentColor;
  border-radius: .72rem;
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(232,220,255,.74));
  box-shadow: 0 0 0 .14rem rgba(130,215,255,.28), inset 0 0 0 .18rem rgba(255,255,255,.45);
}

.css-icon-feed::before {
  content: "";
  position: absolute;
  left: .48rem;
  top: .55rem;
  width: 1.32rem;
  height: .22rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 .52rem 0 currentColor, 0 1.04rem 0 currentColor;
  opacity: .82;
}

.css-icon-feed::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: .38rem;
  width: .46rem;
  height: .46rem;
  border-radius: 999px;
  background: var(--star);
  box-shadow: 0 0 .7rem rgba(255,244,199,.65);
}

body[data-theme="dark"] .css-icon-feed {
  background: linear-gradient(135deg, rgba(37,47,84,.94), rgba(55,49,94,.78));
  box-shadow: 0 0 0 .14rem rgba(187,162,255,.26), inset 0 0 0 .18rem rgba(255,255,255,.08);
}

@media (max-width: 720px) {
  body[data-page="home"] .home-title-card {
    margin-top: .35rem;
    margin-bottom: .55rem;
  }

  body[data-page="home"] .home-launcher {
    padding-top: .15rem;
    padding-bottom: 1.25rem;
  }
}

/* Private login gate */
body[data-page="login"] .page-shell {
  min-height: calc(100vh - 8rem);
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(94vw, 520px);
  margin: 2rem auto;
}

.login-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 4vw, 2rem);
  border-radius: 32px;
  border: 1px solid rgba(205, 183, 255, .78);
  background:
    radial-gradient(circle at 10% 12%, rgba(223, 247, 255, .95), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(205, 183, 255, .65), transparent 30%),
    rgba(247, 252, 255, .88);
  box-shadow: 0 24px 60px rgba(45, 27, 82, .16);
  text-align: center;
}

.login-card h1 {
  margin: .3rem 0 .35rem;
  font-family: var(--display-font);
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: .95;
  color: var(--deep-purple);
  letter-spacing: .02em;
}

.login-blurb {
  max-width: 28rem;
  margin: 0 auto 1.2rem;
  color: rgba(45, 27, 82, .72);
  font-weight: 700;
}

.login-form {
  display: grid;
  gap: .75rem;
  max-width: 22rem;
  margin: 0 auto;
  text-align: left;
}

.real-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  font: inherit;
  outline: none;
}

.login-warning,
.login-error {
  max-width: 26rem;
  margin: .9rem auto 1rem;
  padding: .75rem .85rem;
  border-radius: 18px;
  text-align: left;
  font-weight: 700;
  font-size: .92rem;
}

.login-warning {
  color: #4a316f;
  background: rgba(255, 244, 199, .72);
  border: 1px solid rgba(255, 214, 117, .8);
}

.login-error {
  color: #5c2345;
  background: rgba(255, 219, 235, .8);
  border: 1px solid rgba(255, 170, 215, .8);
}

.login-deco {
  position: absolute;
  pointer-events: none;
  opacity: .82;
}

.login-moon {
  width: 3.2rem;
  height: 3.2rem;
  top: 1.1rem;
  right: 1.2rem;
  border-radius: 50%;
  background: #fff4c7;
  box-shadow: inset -13px 1px 0 rgba(205, 183, 255, .86), 0 0 20px rgba(205, 183, 255, .45);
}

.login-bow {
  width: 4rem;
  height: 2rem;
  left: 1.1rem;
  bottom: 1.1rem;
}

.login-bow::before,
.login-bow::after {
  content: "";
  position: absolute;
  top: .35rem;
  width: 1.55rem;
  height: 1.25rem;
  border-radius: 55% 45% 55% 45%;
  background: rgba(205, 183, 255, .9);
  border: 1px solid rgba(45, 27, 82, .18);
}

.login-bow::before { left: .15rem; transform: rotate(-12deg); }
.login-bow::after { right: .15rem; transform: rotate(12deg); }
.login-bow span {
  position: absolute;
  left: 50%;
  top: .62rem;
  width: .75rem;
  height: .75rem;
  transform: translateX(-50%) rotate(45deg);
  border-radius: .25rem;
  background: #bfeeff;
  border: 1px solid rgba(45, 27, 82, .18);
  z-index: 1;
}

body[data-theme="dark"] .login-card {
  background:
    radial-gradient(circle at 10% 12%, rgba(69, 96, 136, .48), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(136, 104, 190, .34), transparent 30%),
    rgba(19, 18, 43, .9);
  border-color: rgba(205, 183, 255, .35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

body[data-theme="dark"] .login-card h1,
body[data-theme="dark"] .login-blurb {
  color: rgba(244, 239, 255, .93);
}

body[data-theme="dark"] .login-warning {
  color: rgba(255, 244, 199, .95);
  background: rgba(81, 62, 30, .65);
  border-color: rgba(255, 214, 117, .32);
}

body[data-theme="dark"] .login-error {
  color: rgba(255, 219, 235, .95);
  background: rgba(86, 34, 67, .7);
  border-color: rgba(255, 170, 215, .28);
}

@media (max-width: 520px) {
  .login-shell { width: min(94vw, 390px); }
  .login-card { border-radius: 26px; }
  .login-moon { width: 2.4rem; height: 2.4rem; }
  .login-bow { opacity: .6; }
}

/* Silas Memory cabinet */
.memory-settings-card {
  grid-column: 1 / -1;
}

.memory-settings-preview {
  background: linear-gradient(135deg, rgba(223, 247, 255, 0.96), rgba(232, 220, 255, 0.92));
  box-shadow: 0 0 0 .28rem rgba(205, 183, 255, .28), 0 1rem 2.4rem rgba(45, 27, 82, .14);
}

.memory-body-input {
  min-height: 7rem;
  margin-bottom: 1rem;
}

.soft-select {
  width: 100%;
  border: 2px solid rgba(45, 27, 82, .12);
  border-radius: 1.15rem;
  padding: .82rem 1rem;
  margin: .15rem 0 1rem;
  font: inherit;
  font-weight: 850;
  color: var(--deep-purple);
  background: rgba(255, 255, 255, .74);
  outline: none;
  box-shadow: inset 0 .2rem .6rem rgba(45, 27, 82, .04);
}

.soft-select:focus {
  border-color: var(--lavender);
  box-shadow: 0 0 0 .35rem rgba(205, 183, 255, .24);
}

.memory-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.memory-item {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border-radius: 1.35rem;
  border: 2px solid rgba(205, 183, 255, .55);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 .85rem 1.8rem rgba(93, 75, 150, .1);
}

.memory-item.is-paused {
  opacity: .62;
}

.memory-item-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}

.memory-priority-pill {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: .28rem .75rem;
  background: rgba(223, 247, 255, .85);
  border: 1px solid rgba(205, 183, 255, .65);
  color: var(--deep-purple);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: lowercase;
}

.memory-edit-body {
  min-height: 5.4rem;
}

.memory-actions {
  margin-top: .35rem;
}

.memory-empty {
  margin: .25rem 0 0;
}

body[data-theme="dark"] .memory-settings-preview,
body[data-theme="dark"] .memory-priority-pill {
  background: linear-gradient(135deg, rgba(45, 58, 105, .92), rgba(91, 76, 146, .76));
  border-color: rgba(190, 174, 255, .38);
  color: var(--dark-text);
}

body[data-theme="dark"] .soft-select {
  background: rgba(25, 31, 68, .78);
  border-color: rgba(190, 174, 255, .34);
  color: var(--dark-text);
}

body[data-theme="dark"] .memory-item {
  background: rgba(31, 39, 82, .66);
  border-color: rgba(190, 174, 255, .32);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .2);
}

body[data-theme="dark"] .memory-item.is-paused {
  opacity: .55;
}

@media (max-width: 640px) {
  .memory-item {
    padding: .85rem;
    border-radius: 1.1rem;
  }

  .memory-body-input,
  .memory-edit-body {
    min-height: 5.5rem;
  }
}

/* Silas global behavior rules */
.behavior-settings-card {
  grid-column: 1 / -1;
}

.behavior-settings-preview {
  background: linear-gradient(135deg, rgba(244, 236, 255, 0.96), rgba(223, 247, 255, 0.92));
  box-shadow: 0 0 0 .28rem rgba(205, 183, 255, .28), 0 1rem 2.4rem rgba(45, 27, 82, .14);
}

.behavior-rule-list .memory-priority-pill {
  background: rgba(244, 236, 255, .88);
}

body[data-theme="dark"] .behavior-settings-preview {
  background: linear-gradient(135deg, rgba(91, 76, 146, .82), rgba(45, 58, 105, .86));
  border-color: rgba(190, 174, 255, .38);
  color: var(--dark-text);
}

.saved-items-panel {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1.35rem;
  border: 2px solid rgba(205, 183, 255, .42);
  background: rgba(255, 255, 255, .34);
  box-shadow: inset 0 .1rem .5rem rgba(61, 44, 108, .05);
}

.saved-items-panel[hidden] {
  display: none;
}

.saved-items-panel h3 {
  margin: 0;
  color: var(--deep-purple);
  font-size: 1.05rem;
  font-weight: 950;
}

.ghost-button {
  background: rgba(255, 255, 255, .48);
}

body[data-theme="dark"] .saved-items-panel {
  background: rgba(22, 29, 62, .5);
  border-color: rgba(190, 174, 255, .28);
  box-shadow: inset 0 .1rem .5rem rgba(0, 0, 0, .16);
}

body[data-theme="dark"] .saved-items-panel h3 {
  color: var(--dark-text);
}

body[data-theme="dark"] .ghost-button {
  background: rgba(31, 39, 82, .72);
}