/*
 * Museum salon redesign
 * Keeps the existing product structure and behavior while replacing the
 * washed-out parchment treatment with a composed, high-contrast interface.
 */

:root {
  --paper: #eee8dc;
  --paper-deep: #ddd2c0;
  --paper-light: #fffdf8;
  --ink: #27241f;
  --ink-soft: #665f55;
  --ink-faint: #948b7e;
  --ochre: #b58a45;
  --ochre-dark: #7f5f2e;
  --petal: #d8b66c;
  --moss: #52614f;
  --rust: #7f3539;
  --line: rgba(53, 45, 34, 0.12);
  --line-strong: rgba(53, 45, 34, 0.22);
  --shadow: 0 24px 70px rgba(38, 30, 20, 0.12);
  --museum: #1f1d1a;
  --museum-soft: #302c27;
  --canvas: #eee8dc;
  --surface: rgba(255, 253, 248, 0.94);
  --surface-solid: #fffdf8;
  --surface-muted: #e7dfd2;
  --brand-color: #7f3539;
  --brand-color-deep: #572328;
  --accent-color: #c79a4e;
  --accent-soft: rgba(199, 154, 78, 0.16);
  --nav-ink: #f5efe4;
  --bubble-ai: #fffdf9;
  --bubble-user: #713036;
  --bubble-user-ink: #fffaf0;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 19px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

:root[data-site="sunflower"] {
  --paper: #eee6cc;
  --paper-deep: #d8caa3;
  --paper-light: #fffaf0;
  --ink: #27281f;
  --ink-soft: #62604e;
  --ink-faint: #8d866b;
  --ochre: #c58b10;
  --ochre-dark: #77530d;
  --petal: #e1b923;
  --moss: #435545;
  --rust: #a04d29;
  --line: rgba(54, 50, 31, 0.13);
  --line-strong: rgba(54, 50, 31, 0.24);
  --museum: #20271f;
  --museum-soft: #303b2e;
  --canvas: #eee6cc;
  --surface: rgba(255, 250, 236, 0.94);
  --surface-solid: #fffaf0;
  --surface-muted: #e4d7b4;
  --brand-color: #435545;
  --brand-color-deep: #29362b;
  --accent-color: #d7a61e;
  --accent-soft: rgba(215, 166, 30, 0.18);
  --bubble-ai: #fffaf0;
  --bubble-user: #34483a;
  --bubble-user-ink: #fff9e9;
  --shadow: 0 24px 70px rgba(38, 36, 18, 0.14);
}

html,
body {
  background: var(--museum);
}

body {
  color: var(--ink);
  background-color: var(--museum);
  background-image:
    linear-gradient(90deg, rgba(16, 15, 13, 0.28), rgba(16, 15, 13, 0.72)),
    url("/assets/juhua-bg-desktop-v2.jpg");
  background-position: center;
  background-size: cover;
}

html[data-site="sunflower"] body {
  background-color: #20271f;
  background-image:
    linear-gradient(90deg, rgba(20, 24, 18, 0.18), rgba(20, 24, 18, 0.76)),
    url("/assets/van-gogh-sunflowers-desktop.jpg");
  background-position: center 35%;
  background-size: cover;
}

.paper-grain {
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

button,
input,
textarea {
  border-radius: var(--radius-sm);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: var(--accent-color);
}

.eyebrow {
  color: var(--ochre-dark);
  font-size: 9px;
  letter-spacing: 0.22em;
}

/* Login — a private gallery entrance, with the artwork kept visible. */

.login-screen {
  isolation: isolate;
  min-height: 100dvh;
  justify-items: end;
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
}

.login-screen::before {
  position: absolute;
  top: 6vh;
  bottom: 6vh;
  left: clamp(28px, 6vw, 92px);
  z-index: -2;
  width: min(52vw, 760px);
  content: "";
  background:
    linear-gradient(rgba(19, 17, 15, 0.02), rgba(19, 17, 15, 0.08)),
    url("/assets/juhua-bg-desktop-v2.jpg") center / cover no-repeat;
  border: 10px solid #191713;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(222, 191, 128, 0.44),
    0 0 0 15px rgba(31, 28, 23, 0.92),
    0 36px 100px rgba(0, 0, 0, 0.48);
}

.login-screen::after {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
  background:
    radial-gradient(circle at 20% 50%, rgba(210, 178, 112, 0.16), transparent 34%),
    linear-gradient(105deg, transparent 0 48%, rgba(13, 13, 12, 0.58) 72%);
}

html[data-site="sunflower"] .login-screen::before {
  background-image:
    linear-gradient(rgba(18, 20, 15, 0.01), rgba(18, 20, 15, 0.07)),
    url("/assets/van-gogh-sunflowers-desktop.jpg");
  background-position: center 38%;
}

.login-card,
html[data-site="sunflower"] .login-card {
  width: min(500px, 100%);
  overflow: visible;
  color: #f6f0e4;
  background:
    linear-gradient(150deg, rgba(52, 47, 40, 0.96), rgba(24, 23, 20, 0.97));
  border: 1px solid rgba(223, 191, 128, 0.35);
  border-radius: var(--radius-xl);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(26px) saturate(0.86);
}

html[data-site="sunflower"] .login-card {
  background:
    linear-gradient(150deg, rgba(55, 65, 48, 0.96), rgba(25, 31, 24, 0.98));
  border-color: rgba(229, 186, 74, 0.42);
}

.login-card::before,
.login-card::after {
  width: 54px;
  height: 54px;
  border-color: rgba(218, 181, 108, 0.62);
}

.login-card::before {
  top: 14px;
  left: 14px;
  border-top-left-radius: 16px;
}

.login-card::after {
  right: 14px;
  bottom: 14px;
  border-bottom-right-radius: 16px;
}

.login-copy-panel {
  padding: 58px clamp(34px, 5vw, 62px) 46px;
  text-align: left;
}

.seal,
html[data-site="sunflower"] .seal {
  width: 54px;
  height: 54px;
  margin: 0 0 34px;
  color: #f5e5bd;
  background: var(--brand-color);
  border: 1px solid rgba(245, 224, 176, 0.3);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
}

html[data-site="sunflower"] .seal {
  color: #263024;
  background: #e0b62e;
}

.login-card .eyebrow {
  color: #d7b671;
}

.login-card h1 {
  margin: 10px 0 14px;
  color: #fffaf0;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.login-copy {
  max-width: 390px;
  margin: 0 0 34px;
  color: rgba(245, 238, 223, 0.69);
  font-size: 14px;
  line-height: 1.85;
}

.login-form label {
  margin-bottom: 10px;
  color: rgba(245, 238, 223, 0.62);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.login-input-row {
  overflow: hidden;
  background: rgba(255, 253, 247, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.login-input-row input {
  min-height: 56px;
  color: #2c2923;
  border-radius: 0;
}

.login-input-row button {
  min-width: 102px;
  color: #fff7e5;
  background: var(--brand-color);
  border-radius: 0;
  font-weight: 600;
}

html[data-site="sunflower"] .login-input-row button {
  color: #293226;
  background: #e0b62e;
}

.form-error {
  color: #efb7a6;
}

.ornament-rule {
  margin-top: 22px;
  color: #d7b671;
}

.ornament-rule::before,
.ornament-rule::after {
  background: rgba(235, 214, 169, 0.18);
}

.privacy-note {
  color: rgba(245, 238, 223, 0.4);
  font-size: 9px;
}

/* App frame */

.app-shell,
html[data-site="sunflower"] .app-shell {
  height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% -20%, var(--accent-soft), transparent 34%),
    var(--canvas);
  grid-template-rows: 72px 1fr;
}

.site-header,
html[data-site="sunflower"] .site-header,
html[data-site="sunflower"] .module-nav {
  padding: 0 clamp(18px, 3vw, 44px);
  color: var(--nav-ink);
  background: rgba(31, 29, 26, 0.97);
  border-bottom: 1px solid rgba(217, 184, 117, 0.22);
  box-shadow: 0 8px 28px rgba(27, 21, 15, 0.14);
  backdrop-filter: blur(18px);
}

html[data-site="sunflower"] .site-header,
html[data-site="sunflower"] .module-nav {
  background: rgba(31, 39, 30, 0.97);
}

.brand {
  gap: 13px;
  color: var(--nav-ink);
}

.brand-mark,
html[data-site="sunflower"] .brand-mark {
  width: 40px;
  height: 40px;
  color: #fff1d2;
  background: var(--brand-color);
  border: 1px solid rgba(255, 242, 214, 0.2);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transform: rotate(-2deg);
}

html[data-site="sunflower"] .brand-mark {
  color: #273126;
  background: #d9ad2d;
}

.brand-words strong {
  color: #fffaf0;
  font-size: 19px;
  letter-spacing: 0.13em;
}

.brand-words small {
  color: rgba(245, 239, 226, 0.45);
}

.module-nav {
  align-items: center;
  gap: 6px;
}

.module-tab {
  min-width: 104px;
  height: 44px;
  align-self: center;
  color: rgba(245, 239, 226, 0.58);
  border-radius: 13px;
  transition: color 160ms ease, background 160ms ease;
}

.module-tab::after {
  display: none;
}

.module-tab:hover {
  color: #fffaf0;
  background: rgba(255, 255, 255, 0.055);
}

.module-tab.is-active {
  color: #fffaf0;
  background: rgba(218, 181, 108, 0.13);
}

.nav-count {
  color: #28241e;
  background: #d6b168;
}

.quiet-button {
  border-radius: 12px;
}

.logout-button {
  color: rgba(245, 239, 226, 0.6);
  border-color: rgba(245, 239, 226, 0.16);
}

.logout-button:hover {
  color: #fffaf0;
  background: rgba(255, 255, 255, 0.06);
}

/* Personal chat */

.chat-view.is-active {
  grid-template-columns: minmax(260px, 302px) 1fr;
}

.conversation-rail,
html[data-site="sunflower"] .conversation-rail {
  padding: 30px 20px 20px clamp(20px, 3vw, 38px);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(229, 220, 207, 0.94));
  border-right: 1px solid var(--line-strong);
  box-shadow: 12px 0 36px rgba(48, 38, 27, 0.06);
}

html[data-site="sunflower"] .conversation-rail {
  background:
    linear-gradient(180deg, rgba(249, 243, 222, 0.94), rgba(222, 210, 177, 0.96));
}

.rail-heading h2,
.card-heading h2,
.dialog-heading h2,
.library-toolbar h2 {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 0.05em;
}

.icon-button,
.mobile-rail-button {
  background: rgba(255, 253, 248, 0.76);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: 0 7px 20px rgba(45, 37, 25, 0.06);
}

.conversation-list {
  margin-top: 20px;
}

.conversation-item {
  margin-bottom: 7px;
  padding: 13px 38px 13px 14px;
  border-radius: 15px;
}

.conversation-item:hover {
  background: rgba(255, 253, 248, 0.68);
  border-color: var(--line);
}

.conversation-item.is-active {
  background: var(--surface-solid);
  border-color: rgba(127, 53, 57, 0.18);
  box-shadow: 0 10px 28px rgba(43, 33, 24, 0.07);
}

html[data-site="sunflower"] .conversation-item.is-active {
  border-color: rgba(67, 85, 69, 0.23);
}

.conversation-item.is-active::before {
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  background: var(--brand-color);
  border-radius: 0 4px 4px 0;
}

.rail-foot {
  color: var(--ink-soft);
}

.chat-panel,
html[data-site="sunflower"] .chat-panel {
  background:
    radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 30%),
    #f3eee5;
}

html[data-site="sunflower"] .chat-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 174, 48, 0.13), transparent 31%),
    #f3edda;
}

.chat-topbar {
  min-height: 76px;
  padding: 14px clamp(20px, 4vw, 58px);
  background: rgba(255, 253, 248, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.chat-title-wrap h2 {
  font-size: 21px;
  font-weight: 600;
}

.memory-status {
  color: var(--ink-soft);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 7px 22px rgba(45, 36, 24, 0.05);
}

.messages {
  padding: 34px clamp(24px, 7vw, 120px) 24px;
}

.empty-chat {
  width: min(620px, 100%);
}

.empty-copy {
  padding: 38px 42px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.empty-copy h3 {
  font-size: clamp(26px, 3.2vw, 38px);
}

.message {
  max-width: 920px;
  margin-bottom: 22px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}

.message.user {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.message-avatar {
  width: 36px;
  height: 36px;
  color: #fffaf0;
  background: var(--brand-color);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(43, 33, 24, 0.13);
}

.message.user .message-avatar {
  color: #2a261f;
  background: var(--accent-color);
}

.message-meta {
  margin-bottom: 6px;
}

.message-content {
  max-width: min(100%, 760px);
  padding: 15px 18px;
  color: var(--ink);
  background: var(--bubble-ai);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(43, 33, 24, 0.06);
}

.message.user .message-content {
  color: var(--bubble-user-ink);
  background: var(--bubble-user);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(66, 37, 35, 0.17);
}

.message.user .message-content code {
  background: rgba(255, 255, 255, 0.12);
}

.message-content pre {
  border-radius: 15px;
}

.composer {
  padding: 13px clamp(24px, 7vw, 120px) 22px;
  background: linear-gradient(transparent, rgba(231, 223, 210, 0.95) 31%);
}

html[data-site="sunflower"] .composer {
  background: linear-gradient(transparent, rgba(226, 215, 183, 0.96) 31%);
}

.composer-paper {
  width: min(920px, 100%);
  overflow: hidden;
  background: rgba(255, 253, 248, 0.97);
  border: 1px solid var(--line-strong);
  border-radius: 23px;
  box-shadow: 0 18px 46px rgba(45, 36, 24, 0.12);
}

.composer textarea {
  min-height: 58px;
  border-radius: 0;
}

.composer-actions {
  min-height: 48px;
}

.send-button,
.stop-button,
.primary-button {
  color: #fffaf0;
  background: var(--brand-color);
  border-color: var(--brand-color);
  border-radius: 13px;
}

.send-button:hover,
.primary-button:hover {
  background: var(--brand-color-deep);
}

/* Shared rooms — compact museum catalogue at left, conversation at right. */

.shared-view {
  overflow: hidden;
  background:
    radial-gradient(circle at 6% 8%, var(--accent-soft), transparent 28%),
    var(--canvas);
}

.shared-shell {
  display: grid;
  width: min(1320px, calc(100% - 44px));
  height: 100%;
  min-height: 0;
  padding: 26px 0;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 16px 22px;
}

.shared-hero {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  padding: 34px 30px 30px;
  color: #fffaf0;
  background:
    linear-gradient(155deg, rgba(40, 27, 28, 0.67), rgba(35, 28, 24, 0.95)),
    url("/assets/juhua-bg-desktop-v2.jpg") center / cover no-repeat;
  border: 1px solid rgba(218, 181, 108, 0.24);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(42, 31, 21, 0.16);
  grid-column: 1;
  grid-row: 1;
}

html[data-site="sunflower"] .shared-hero {
  background:
    linear-gradient(155deg, rgba(31, 42, 31, 0.62), rgba(25, 32, 25, 0.96)),
    url("/assets/van-gogh-sunflowers-desktop.jpg") center 38% / cover no-repeat;
}

.shared-hero .eyebrow {
  color: #e4c77e;
}

.shared-hero h1 {
  margin: 8px 0 14px;
  color: #fffaf0;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: 0.05em;
}

.shared-hero > div:first-child > p:last-child {
  color: rgba(255, 248, 233, 0.7);
  font-size: 12px;
  line-height: 1.75;
}

.shared-presence {
  margin-top: 28px;
  padding: 13px 14px;
  color: rgba(255, 250, 240, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  backdrop-filter: blur(14px);
}

.shared-room-tabs {
  display: flex;
  min-height: 0;
  margin: 0;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  gap: 10px;
}

.shared-room-tab {
  min-height: 72px;
  padding: 14px 15px;
  color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.66);
  border-color: var(--line);
  border-radius: 18px;
}

.shared-room-tab:hover,
.shared-room-tab.is-active {
  color: var(--ink);
  background: var(--surface-solid);
  border-color: var(--line-strong);
  box-shadow: 0 12px 30px rgba(49, 38, 26, 0.08);
}

.shared-room-tab.is-active {
  transform: translateX(4px);
}

.room-tab-mark {
  color: #fffaf0;
  background: var(--brand-color);
}

.shared-room {
  height: 100%;
  min-height: 0;
  background: var(--surface);
  border-color: var(--line);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(48, 37, 23, 0.11);
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-rows: auto minmax(0, 1fr) auto;
  backdrop-filter: blur(18px);
}

.shared-room-head {
  min-height: 82px;
  padding: 16px 25px;
  background: rgba(255, 253, 248, 0.7);
}

.shared-room-head h2 {
  font-size: 21px;
  font-weight: 600;
}

.read-only-badge,
.group-status {
  background: var(--accent-soft);
  border-color: rgba(133, 95, 37, 0.14);
}

.shared-messages {
  min-height: 0;
  max-height: none;
  padding: 28px clamp(18px, 4vw, 58px);
  background:
    linear-gradient(180deg, rgba(242, 235, 223, 0.54), rgba(249, 245, 237, 0.74));
}

html[data-site="sunflower"] .shared-messages {
  background:
    linear-gradient(180deg, rgba(235, 225, 195, 0.58), rgba(248, 242, 222, 0.78));
}

.shared-message {
  max-width: 880px;
  margin-bottom: 20px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
}

.shared-message.sender-user {
  grid-template-columns: minmax(0, 1fr) 38px;
}

.shared-message-avatar {
  width: 35px;
  height: 35px;
  color: #fffaf0;
  background: var(--moss);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(45, 36, 24, 0.12);
}

.shared-message.sender-juhua .shared-message-avatar {
  background: #7f3539;
}

.shared-message.sender-sunflower .shared-message-avatar {
  color: #2d2d22;
  background: #d8aa27;
}

.shared-message.sender-user .shared-message-avatar {
  color: #fffaf0;
  background: var(--museum-soft);
}

.shared-message-content {
  padding: 14px 17px;
  color: var(--ink);
  background: #fffdf9;
  border-color: var(--line);
  border-radius: 22px;
  box-shadow: 0 9px 25px rgba(45, 36, 24, 0.055);
}

.shared-message.sender-juhua .shared-message-content {
  border-color: rgba(127, 53, 57, 0.14);
}

.shared-message.sender-sunflower .shared-message-content {
  background: #fff5cf;
  border-color: rgba(178, 126, 16, 0.2);
}

.shared-message.sender-user .shared-message-content {
  color: var(--bubble-user-ink);
  background: var(--bubble-user);
  border-color: transparent;
}

.shared-message.is-locked .shared-message-content {
  background:
    radial-gradient(circle at 10% 0%, rgba(198, 151, 68, 0.13), transparent 34%),
    #24231f;
  border-color: rgba(228, 199, 126, 0.18);
}

.shared-composer {
  padding: 14px;
  background: rgba(224, 214, 197, 0.72);
}

.shared-composer textarea {
  min-height: 50px;
  background: rgba(255, 253, 248, 0.96);
  border-color: var(--line-strong);
  border-radius: 17px;
}

.shared-composer .send-button {
  min-height: 50px;
  border-radius: 17px;
}

/* Memory — quieter cards, stronger hierarchy. */

.memory-view {
  background:
    radial-gradient(circle at 90% 0%, var(--accent-soft), transparent 30%),
    var(--canvas);
}

.memory-page {
  width: min(1260px, calc(100% - 52px));
  padding-top: 50px;
}

.memory-hero {
  padding: 0 0 34px;
}

.memory-hero h1 {
  font-size: clamp(42px, 5.6vw, 68px);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.memory-stats,
.memory-workbench,
.prompt-card,
.memory-card,
.edit-dialog {
  border-radius: var(--radius-lg);
}

.memory-stats {
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(45, 36, 24, 0.07);
}

.memory-stats div {
  background: var(--surface);
}

.memory-workbench,
.prompt-card {
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.preview-card {
  background: rgba(220, 208, 187, 0.4);
}

.import-card textarea,
.edit-dialog textarea,
.prompt-form textarea {
  background: rgba(255, 253, 248, 0.88);
  border-color: var(--line-strong);
  border-radius: 17px;
}

.preview-item,
.memory-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 18px;
}

.memory-card:hover {
  background: var(--surface-solid);
}

.search-field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.edit-dialog {
  overflow: hidden;
  background: var(--surface-solid);
}

.toast {
  border: 1px solid rgba(238, 211, 157, 0.2);
  border-left: 3px solid var(--petal);
  border-radius: 15px;
}

/* Tablet */

@media (max-width: 980px) {
  .login-screen::before {
    left: 34px;
    width: 54vw;
  }

  .chat-view.is-active {
    grid-template-columns: 236px 1fr;
  }

  .shared-shell {
    width: calc(100% - 30px);
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .shared-hero {
    padding: 26px 22px;
  }

  .shared-hero h1 {
    font-size: 40px;
  }
}

/* Mobile */

@media (max-width: 720px) {
  body,
  html[data-site="sunflower"] body {
    background-position: center top;
    background-size: cover;
  }

  .login-screen {
    align-items: end;
    padding: 14px;
  }

  .login-screen::before {
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center 32%;
    background-size: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-screen::after {
    background: linear-gradient(180deg, rgba(16, 15, 13, 0.06) 12%, rgba(16, 15, 13, 0.82) 75%);
  }

  .login-card,
  html[data-site="sunflower"] .login-card {
    width: 100%;
    border-radius: 28px;
    backdrop-filter: blur(24px);
  }

  .login-copy-panel {
    padding: 34px 26px 29px;
  }

  .seal,
  html[data-site="sunflower"] .seal {
    width: 46px;
    height: 46px;
    margin-bottom: 23px;
    border-radius: 13px;
    font-size: 24px;
  }

  .login-card h1 {
    font-size: 35px;
  }

  .login-copy {
    margin-bottom: 25px;
  }

  .app-shell,
  html[data-site="sunflower"] .app-shell {
    grid-template-rows: 62px 1fr;
  }

  .site-header,
  html[data-site="sunflower"] .site-header {
    padding: 0 13px;
    background: rgba(31, 29, 26, 0.98);
  }

  html[data-site="sunflower"] .site-header {
    background: rgba(31, 39, 30, 0.98);
  }

  .brand-mark,
  html[data-site="sunflower"] .brand-mark {
    width: 35px;
    height: 35px;
    border-radius: 11px;
  }

  .module-nav,
  html[data-site="sunflower"] .module-nav {
    background: rgba(31, 29, 26, 0.98);
    border-top-color: rgba(217, 184, 117, 0.18);
    backdrop-filter: blur(20px);
  }

  html[data-site="sunflower"] .module-nav {
    background: rgba(31, 39, 30, 0.98);
  }

  .module-tab {
    min-width: 88px;
    height: 52px;
    align-self: center;
    padding: 0 8px;
  }

  .conversation-rail,
  html[data-site="sunflower"] .conversation-rail {
    background: #ece4d8;
  }

  html[data-site="sunflower"] .conversation-rail {
    background: #ebe1c5;
  }

  .chat-topbar {
    min-height: 65px;
    padding: 9px 12px;
  }

  .messages {
    padding: 22px 12px 14px;
  }

  .message,
  .message.user {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .message-avatar {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }

  .message-content {
    padding: 12px 14px;
    border-radius: 19px;
  }

  .composer {
    padding: 8px 9px 11px;
  }

  .composer-paper {
    border-radius: 19px;
  }

  .shared-view {
    overflow-y: auto;
  }

  .shared-shell {
    display: block;
    width: calc(100% - 20px);
    height: auto;
    padding: 16px 0 28px;
  }

  .shared-hero {
    min-height: 188px;
    padding: 27px 22px 23px;
    border-radius: 24px;
  }

  .shared-hero h1 {
    font-size: 38px;
  }

  .shared-presence {
    margin-top: 18px;
  }

  .shared-room-tabs {
    display: grid;
    margin: 10px 0;
    grid-template-columns: 1fr 1fr;
  }

  .shared-room-tab {
    min-height: 68px;
    padding: 11px 10px;
  }

  .shared-room-tab.is-active {
    transform: none;
  }

  .shared-room {
    height: auto;
    min-height: calc(100dvh - 360px);
    border-radius: 22px;
  }

  .shared-messages {
    min-height: 330px;
    max-height: calc(100dvh - 465px);
    padding: 20px 11px;
  }

  .shared-message,
  .shared-message.sender-user {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .shared-message-avatar {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }

  .shared-message-content {
    padding: 12px 13px;
    border-radius: 19px;
  }

  .memory-page {
    width: calc(100% - 24px);
    padding-top: 30px;
  }

  .memory-workbench,
  .prompt-card,
  .memory-card {
    border-radius: 20px;
  }
}