/* =========================================
   JESUSWW V2 — PRODUCTION CHAT LAYOUT
========================================= */

* {
  box-sizing: border-box;
}

:root {
  --bg: #070912;
  --sidebar: rgba(7, 10, 20, 0.97);
  --panel: rgba(11, 15, 29, 0.90);
  --panel-soft: rgba(19, 25, 45, 0.82);
  --border: rgba(168, 181, 218, 0.18);
  --text: #f7f2e8;
  --muted: #aeb6cc;
  --gold: #e4b85f;
  --gold-light: #fff0bd;
  --green: #72d5a5;
  --red: #ef9999;
  --sidebar-width: 280px;

  /*
   * Horizontal position of the sun inside
   * the visible chat workspace.
   */
  --scene-focal-x: 46%;
	
	
  --font-ui:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-display:
    Georgia,
    "Times New Roman",
    serif;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  overflow: hidden;

  color: var(--text);

  background-color: var(--bg);

  background-image:
    linear-gradient(
      180deg,
      rgba(7, 9, 18, 0.18),
      rgba(7, 9, 18, 0.55)
    ),
    url("../images-v2/chat-background.png");

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  font-family: var(--font-ui);
}

button,
textarea,
a,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================
   ACCESSIBILITY
========================================= */

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}


/* =========================================
   APP SHELL
========================================= */

.app-shell {
  width: 100%;
  height: 100dvh;

  display: grid;
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);

  background: transparent;
}

.ui-icon {
  width: 22px;
  height: 22px;

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================
   SIDEBAR
========================================= */

.app-sidebar {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 100dvh;
  min-height: 0;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  padding: 24px 18px 16px;

    background:
    linear-gradient(
      180deg,
      rgba(7, 10, 20, 0.94),
      rgba(8, 12, 23, 0.91)
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-right: 1px solid var(--border);

  box-shadow:
    18px 0 50px rgba(0, 0, 0, 0.20);
}


/* =========================================
   SIDEBAR BRAND
========================================= */

.sidebar-brand {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 0 5px;

  font-family: var(--font-display);
  font-size: 1.42rem;
  letter-spacing: 0.13em;
}

.brand-mark {
  width: 30px;
  height: 30px;

  flex: 0 0 auto;
  object-fit: contain;

  filter:
    drop-shadow(
      0 0 13px rgba(228, 184, 95, 0.30)
    );
}

.brand-name {
  white-space: nowrap;
}

.icon-btn {
  display: grid;
  place-items: center;

  padding: 6px;
  margin-left: auto;

  border: 0;
  border-radius: 8px;

  color: var(--muted);
  background: transparent;

  cursor: pointer;
}

.icon-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-collapse .ui-icon {
  width: 18px;
  height: 18px;
}


/* =========================================
   NEW CONVERSATION
========================================= */

.new-chat-btn {
  width: 100%;
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin: 24px 0 18px;
  padding: 12px 15px;

  border: 1px solid var(--gold);
  border-radius: 11px;

  color: var(--gold-light);
  background: rgba(228, 184, 95, 0.035);

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.new-chat-btn:hover {
  transform: translateY(-1px);

  background: rgba(228, 184, 95, 0.09);

  box-shadow:
    0 0 24px rgba(228, 184, 95, 0.10);
}


/* =========================================
   SIDEBAR NAVIGATION
========================================= */

.primary-nav {
  display: grid;
  gap: 4px;
}

.nav-item {
  position: relative;

  width: 100%;
  min-height: 45px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 10px 13px;

  border: 0;
  border-radius: 10px;

  color: #c7cee0;
  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-item.active {
  color: var(--text);

  background:
    linear-gradient(
      90deg,
      rgba(228, 184, 95, 0.12),
      rgba(108, 99, 180, 0.12)
    );
}

.nav-item.active::before {
  content: "";

  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;

  width: 3px;

  border-radius: 3px;

  background: var(--gold);

  box-shadow:
    0 0 12px var(--gold);
}

.nav-item.active .ui-icon {
  color: var(--gold-light);
}

.sidebar-support {
  flex: 0 0 auto;
  margin-top: 8px;
  border: 1px solid rgba(228, 184, 95, 0.3);
  color: var(--gold-light);
  background:
    linear-gradient(
      135deg,
      rgba(228, 184, 95, 0.1),
      rgba(228, 184, 95, 0.025)
    );
  text-decoration: none;
}

.sidebar-support:hover {
  border-color: rgba(245, 207, 126, 0.65);
  color: #fff1bd;
  background:
    linear-gradient(
      135deg,
      rgba(228, 184, 95, 0.18),
      rgba(228, 184, 95, 0.06)
    );
}

.sidebar-support .ui-icon {
  color: var(--gold-light);
  filter: drop-shadow(0 0 7px rgba(228, 184, 95, 0.28));
}

.sidebar-support:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}


/* =========================================
   RECENT CONVERSATIONS
========================================= */

.recent-block {
  min-height: 0;

  flex: 1;

  margin-top: 18px;
  padding: 19px 9px;

  overflow-y: auto;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sidebar-label {
  color: #929cb8;

  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.recent-toggle {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 0;
  padding: 0;

  border: 0;
  color: #929cb8;
  background: transparent;

  font: inherit;
  text-align: left;

  cursor: default;
}

.recent-toggle-chevron {
  min-width: 68px;
  min-height: 32px;
  flex: 0 0 auto;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 6px 10px;

  border: 1px solid rgba(228, 184, 95, 0.38);
  border-radius: 999px;

  color: var(--gold-light);
  background: rgba(228, 184, 95, 0.08);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.recent-toggle-chevron::before {
  content: "Show";
}

.recent-toggle-chevron::after {
  content: "";

  width: 7px;
  height: 7px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.recent-toggle:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 6px;
  border-radius: 2px;
}

.recent-empty {
  margin: 12px 0 0;

  color: #7f899f;

  font-size: 0.76rem;
  line-height: 1.45;
}


/* =========================================
   SIDEBAR BOTTOM
========================================= */

.sidebar-bottom {
  flex: 0 0 auto;

  margin-top: 0;
  padding-top: 8px;

  background:
    linear-gradient(
      180deg,
      rgba(8, 12, 23, 0),
      rgba(8, 12, 23, 0.88) 18px
    );
}


/* =========================================
   ACCOUNT PANEL
========================================= */

.account-panel {
  margin-top: 8px;
  padding: 12px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.025);
}

.account-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.account-status {
  min-width: 0;
}

.status-dot {
  width: 8px;
  height: 8px;

  margin-top: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

background: #8a94aa;
}

.status-dot.signed-in {
  background: var(--green);

  box-shadow:
    0 0 10px rgba(114, 213, 165, 0.60);
}

.status-title {
  display: block;

  font-size: 0.82rem;
}

.status-detail {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 0.66rem;
  line-height: 1.35;

  overflow-wrap: anywhere;
}

.signin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;

  margin-top: 11px;
}

.signin-links a,
.logout-link {
  color: var(--gold-light);

  font-size: 0.70rem;
  text-decoration: none;
}

.signin-links a:hover,
.logout-link:hover {
  text-decoration: underline;
}

.logout-link {
  display: inline-block;

  margin-top: 8px;

  color: #d8a4a4;
}

.user-id {
  display: none;
}

.privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 12px 0;

  color: #929db5;

  font-size: 0.67rem;
}

.privacy-note .ui-icon {
  width: 15px;
  height: 15px;
}


/* =========================================
   CHAT WORKSPACE
========================================= */

.chat-workspace {
  position: relative;

  min-width: 0;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  background: transparent;
}

.chat-workspace::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 31%,
      rgba(126, 103, 216, 0.11),
      transparent 35%
    ),
    linear-gradient(
      90deg,
      rgba(7, 9, 18, 0.38),
      transparent 22%,
      transparent 78%,
      rgba(7, 9, 18, 0.18)
    );
}


/* =========================================
   WORKSPACE HEADER
========================================= */

.workspace-header {
  position: relative;
  z-index: 2;

  min-height: 82px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 14px 28px;
}

.mode-tabs {
  grid-column: 2;

  display: flex;
  align-items: center;
  gap: 3px;

  padding: 5px;

  border: 1px solid var(--border);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(13, 17, 31, 0.76),
      rgba(8, 11, 22, 0.66)
    );

  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mode-tab {
  position: relative;

  min-height: 40px;

  padding: 8px 20px;

  border: 1px solid transparent;
  border-radius: 999px;

  color: #abb4ca;
  background: transparent;

  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.mode-tab:hover {
  color: var(--text);

  background:
    rgba(255, 255, 255, 0.035);
}

.mode-tab:active {
  transform: scale(0.98);
}

.mode-tab.active,
.mode-tab[aria-pressed="true"] {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.72);

  background:
    linear-gradient(
      180deg,
      rgba(228, 184, 95, 0.13),
      rgba(228, 184, 95, 0.055)
    );

  box-shadow:
    inset 0 0 20px rgba(228, 184, 95, 0.06),
    0 0 20px rgba(228, 184, 95, 0.07);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.workspace-tools {
  grid-column: 3;

  min-width: max-content;

  display: flex;
  align-items: center;
  justify-self: end;
  gap: 14px;

  flex: 0 0 auto;
}

.translation-btn span {
  display: inline-block;
  flex: 0 0 auto;
}

.translation-btn {
  min-width: max-content;
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  flex: 0 0 auto;

  padding: 8px 14px;

  white-space: nowrap;

  border: 1px solid var(--border);
  border-radius: 10px;

  color: var(--text);
  background: rgba(8, 11, 22, 0.62);

  cursor: pointer;
}

.translation-btn:hover {
  border-color: rgba(228, 184, 95, 0.45);
}

.chat-status {
  color: var(--muted);

  font-size: 0.72rem;
  white-space: nowrap;
}

.chat-status.ready {
  color: var(--green);
}

.chat-status.error {
  color: var(--red);
}


/* =========================================
   CONVERSATION STAGE
========================================= */

.conversation-stage {
  position: relative;
  z-index: 1;

  min-height: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 0 34px 17px;
}

.chat-messages {
  width: min(980px, 100%);
  min-height: 0;
  max-height: none;

  flex: 1;

  margin: 0 auto;
  padding: 34px 24px 170px;

  overflow-y: auto;

  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(228, 184, 95, 0.24)
    transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 7px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: rgba(228, 184, 95, 0.24);
}


/* =========================================
   EMPTY CHAT
========================================= */

.chat-empty {
  position: relative;

  min-height: 100%;

  display: block;

  padding-bottom: 70px;

  color: var(--muted);

  text-align: center;
}

.chat-empty[hidden] {
  display: none;
}

.chat-empty-content {
  position: absolute;
  left: var(--scene-focal-x);
  top: 50%;

  width: min(760px, 90%);
  max-width: 760px;

  transform:
    translate(-50%, -50%);
}

.empty-mark {
  width: 52px;
  height: 52px;

  margin-bottom: 18px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 18px rgba(228, 184, 95, 0.28)
    );
}

.verse-label {
  display: block;

  margin-bottom: 13px;

  color: var(--gold);

  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.chat-empty strong {
  display: block;

  color: var(--gold-light);

  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.65rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.chat-empty p {
  margin: 14px 0 0;

  font-size: 1rem;
  line-height: 1.6;
}


/* =========================================
   CHAT MESSAGES
========================================= */

.chat-message {
  display: flex;

  margin: 0 0 24px;
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-message.assistant {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: min(82%, 760px);

  padding: 17px 19px;

  border-radius: 18px;

  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.chat-message.user .chat-bubble {
  color: #211706;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  border-bottom-right-radius: 5px;
}

.chat-message.assistant .chat-bubble {
  color: var(--text);

  background: rgba(12, 17, 31, 0.76);

  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;

  box-shadow:
    0 15px 46px rgba(0, 0, 0, 0.16);
}

.chat-message.streaming .chat-bubble::after {
  content: "▋";

  display: inline-block;

  margin-left: 3px;

  color: var(--gold-light);

  animation:
    chat-cursor 0.8s
    steps(2, start)
    infinite;
}

@keyframes chat-cursor {
  50% {
    opacity: 0;
  }
}


/* =========================================
   CHAT COMPOSER
========================================= */

.chat-composer {
  position: absolute;
  left: 50%;
  bottom: 46px;

  width: min(1040px, calc(100% - 68px));

  padding: 0;

  transform: translateX(-50%);

  border: 0;
  background: transparent;
}

.chat-input-row {
  min-height: 68px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px 9px 8px 14px;

  border: 1px solid rgba(168, 181, 218, 0.30);
  border-radius: 25px;

  background: rgba(8, 11, 22, 0.86);

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.32);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.chat-input-row:focus-within {
  border-color: rgba(228, 184, 95, 0.60);

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.32),
    0 0 0 3px rgba(228, 184, 95, 0.08);
}

.composer-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  color: var(--gold-light);
}

.chat-input {
  width: 100%;
  min-height: 46px;
  max-height: 150px;

  padding: 12px 4px;

  resize: none;

  border: 0;
  outline: 0;

  color: var(--text);
  background: transparent;

  line-height: 1.45;
}

.chat-input::placeholder {
  color: #939caf;
}

.chat-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.chat-input:disabled {
  opacity: 0.65;
}

.chat-send {
  width: 50px;
  height: 50px;
  min-width: 50px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #191205;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  box-shadow:
    0 0 24px rgba(228, 184, 95, 0.34);

  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.chat-send:hover {
  transform: scale(1.035);

  box-shadow:
    0 0 32px rgba(228, 184, 95, 0.45);
}

.chat-send:disabled {
  opacity: 0.55;

  cursor: not-allowed;
  transform: none;
}

.chat-send .ui-icon {
  width: 21px;
  height: 21px;
}

.chat-composer-note {
  margin-top: 8px;

  color: #8e97aa;

  font-size: 0.66rem;
  text-align: center;
}

.care-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;

  margin: 0;
  padding: 0 12px;

  color: #7f899d;

  font-size: 0.62rem;
  text-align: center;
}


/* =========================================
   HIDDEN DEVELOPMENT CONTROLS

   The elements remain in the HTML because
   the existing JavaScript requires them.
========================================= */

.developer-controls {
  display: none !important;
}


/* =========================================
   TWO-STEP VERIFICATION
========================================= */

.two-step-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 18px;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.two-step-modal[hidden] {
  display: none;
}

.two-step-card {
  width: min(420px, 100%);

  padding: 28px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background: rgba(12, 17, 31, 0.98);

  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.62);
}

.two-step-card h2 {
  margin: 0 0 8px;

  color: var(--text);

  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
}

.two-step-card p {
  margin: 0;

  color: var(--muted);

  line-height: 1.55;
}

.two-step-input {
  width: 100%;

  margin: 18px 0;
  padding: 15px;

  border: 1px solid var(--border);
  border-radius: 14px;
  outline: none;

  color: var(--text);
  background: #080b15;

  font-size: 1.5rem;
  letter-spacing: 0.25em;
  text-align: center;
}

.two-step-input:focus {
  border-color: rgba(228, 184, 95, 0.65);

  box-shadow:
    0 0 0 3px rgba(228, 184, 95, 0.09);
}

.two-step-remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 4px 0 18px;

  color: var(--muted);

  font-size: 0.90rem;
  line-height: 1.45;

  cursor: pointer;
  user-select: none;
}

.two-step-remember input {
  width: 17px;
  height: 17px;

  flex: 0 0 auto;

  margin: 2px 0 0;

  accent-color: var(--gold);

  cursor: pointer;
}

.two-step-remember strong {
  display: block;

  color: var(--text);
}

.two-step-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.two-step-card .btn {
  appearance: none;

  min-height: 43px;

  padding: 10px 15px;

  border: 1px solid var(--border);
  border-radius: 11px;

  color: var(--text);
  background: var(--panel-soft);

  cursor: pointer;
}

.two-step-card .btn.primary {
  color: #1c1405;

  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  font-weight: 800;
}

.two-step-card .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.two-step-message {
  min-height: 22px;

  margin-top: 12px;

  color: var(--muted);

  font-size: 0.90rem;
}

.two-step-message.error {
  color: var(--red);
}

.two-step-message.success {
  color: var(--green);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {
  :root {
    --sidebar-width: 236px;
  }

  .mode-tab {
    padding-inline: 13px;
  }

  .workspace-header {
    padding-inline: 18px;
  }

  .conversation-stage {
    padding-inline: 20px;
  }
}


/* =========================================
   COLLAPSED TABLET SIDEBAR
========================================= */

@media (max-width: 820px) {
    :root {
    --sidebar-width: 76px;
    --scene-focal-x: 52%;
  }
	
  .app-sidebar {
    padding-inline: 10px;
  }

  .sidebar-brand {
    justify-content: center;
    padding: 0;
  }

  .sidebar-brand > .brand-name,
  .sidebar-collapse,
  .new-chat-btn span,
  .nav-item span,
  .recent-block,
  .privacy-note span {
    display: none;
  }
	
	  .account-heading,
  .sidebar-sign-in span,
  .sidebar-sign-out {
    display: none;
  }

  .account-panel {
    padding: 6px;
    border: 0;
    background: transparent;
  }

  .sidebar-sign-in {
    min-height: 44px;
    justify-content: center;
    padding: 8px;
  }

  .sidebar-sign-in .ui-icon {
    width: 21px;
    height: 21px;
  }

  .sidebar-sign-in-arrow {
    display: none;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .new-chat-btn {
    padding: 10px;
  }

  .nav-item {
    justify-content: center;
    padding: 10px;
  }

  .privacy-note {
    justify-content: center;
  }

  .workspace-header {
    display: flex;
    justify-content: space-between;

    overflow-x: auto;
  }

  .mode-tabs {
    flex: 0 0 auto;
  }

  .mode-tab {
    padding-inline: 11px;

    font-size: 0.76rem;
  }

  .chat-status {
    display: none;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 620px) {
  html,
  body {
    overflow: auto;
  }
	  :root {
    --scene-focal-x: 50%;
  }

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

  .app-sidebar {
    display: none;
  }

  .chat-workspace {
    min-height: 100dvh;
  }

  .workspace-header {
    min-height: 64px;

    padding: 10px;
  }

  .mode-tabs {
    max-width: calc(100vw - 78px);

    overflow-x: auto;
    scrollbar-width: none;
  }

  .mode-tabs::-webkit-scrollbar {
    display: none;
  }

  .mode-tab {
    min-width: max-content;
  }

  .translation-btn {
    padding-inline: 10px;
  }

  .conversation-stage {
    padding-inline: 10px;
  }

  .chat-messages {
    padding: 20px 8px 155px;
  }

  .chat-empty {
    padding-bottom: 90px;
  }

  .chat-empty strong {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .chat-empty p {
    font-size: 0.90rem;
  }

  .chat-bubble {
    max-width: 92%;
  }

  .chat-composer {
    bottom: 42px;

    width: calc(100% - 20px);
  }

  .composer-icon {
    display: none;
  }

  .chat-input-row {
    min-height: 60px;

    border-radius: 21px;
  }

  .chat-send {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .care-note {
    padding-inline: 12px;
  }

  .two-step-card .actions {
    flex-direction: column;
  }

  .two-step-card .btn {
    width: 100%;
  }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================
   SIDEBAR SIGN-IN CONTROL
========================================= */

.sidebar-sign-in {
  width: 100%;
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 13px;
  padding: 9px 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  color: var(--text);
  background: rgba(255, 255, 255, 0.035);

  font-size: 0.80rem;
  font-weight: 700;
  text-align: left;

  cursor: pointer;

  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.sidebar-sign-in:hover {
  color: var(--gold-light);
  border-color: rgba(228, 184, 95, 0.48);
  background: rgba(228, 184, 95, 0.07);
}

.sidebar-sign-in .ui-icon {
  width: 18px;
  height: 18px;

  color: var(--gold-light);
}

.sidebar-sign-in-arrow {
  margin-left: auto;

  color: var(--muted);

  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.sidebar-sign-out {
  width: 100%;
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 13px;
  padding: 9px 11px;

  border: 1px solid rgba(239, 153, 153, 0.26);
  border-radius: 10px;

  color: #f0b4b4;
  background: rgba(239, 153, 153, 0.04);

  font-size: 0.80rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.sidebar-sign-out:hover {
  border-color: rgba(239, 153, 153, 0.48);
  background: rgba(239, 153, 153, 0.08);
  text-decoration: none;
}

.sidebar-sign-out .ui-icon {
  width: 18px;
  height: 18px;
}

.sidebar-sign-out[hidden] {
  display: none !important;
}

.sidebar-sign-out:hover {
  text-decoration: none;
}

.sidebar-sign-out[hidden] {
  display: none;
}


/* =========================================
   LOGIN MODAL
========================================= */

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;

  display: grid;
  place-items: center;

  padding: 20px;
}

.login-modal[hidden] {
  display: none;
}

.login-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(112, 91, 184, 0.17),
      transparent 40%
    ),
    rgba(2, 4, 10, 0.78);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* =========================================
   LOGIN MODAL CARD
========================================= */

.login-modal-card {
  position: relative;
  z-index: 1;

  width: min(460px, 100%);
  max-height: calc(100dvh - 40px);

  padding: 30px;

  overflow-y: auto;

  border: 1px solid rgba(168, 181, 218, 0.20);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(126, 103, 216, 0.12),
      transparent 32%
    ),
    linear-gradient(
      160deg,
      rgba(17, 22, 40, 0.99),
      rgba(8, 12, 23, 0.99)
    );

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(228, 184, 95, 0.03);

  animation:
    login-modal-enter 0.22s ease-out;
}

@keyframes login-modal-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================
   LOGIN MODAL CLOSE
========================================= */

.login-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 10px;

  color: var(--muted);
  background: transparent;

  font-size: 1.5rem;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.login-modal-close:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}


/* =========================================
   LOGIN MODAL BRAND
========================================= */

.login-modal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-bottom: 24px;

  color: var(--text);

  font-family: var(--font-display);
  font-size: 1.10rem;
  letter-spacing: 0.14em;
}

.login-modal-mark {
  width: 28px;
  height: 28px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 13px rgba(228, 184, 95, 0.35)
    );
}


/* =========================================
   LOGIN MODAL HEADING
========================================= */

.login-modal-heading {
  text-align: center;
}

.login-modal-eyebrow {
  display: block;

  margin-bottom: 10px;

  color: var(--gold);

  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-modal-heading h2 {
  margin: 0;

  color: var(--text);

  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.login-modal-heading p {
  margin: 12px auto 0;

  max-width: 370px;

  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.6;
}


/* =========================================
   LOGIN PROVIDERS
========================================= */

.login-provider-list {
  display: grid;
  gap: 11px;

  margin-top: 25px;
}

.login-provider {
  width: 100%;
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  padding: 11px 48px;

  border: 1px solid var(--border);
  border-radius: 12px;

  color: var(--text);
  background: rgba(255, 255, 255, 0.035);

  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.login-provider:hover {
  transform: translateY(-1px);

  border-color: rgba(228, 184, 95, 0.42);
  background: rgba(255, 255, 255, 0.06);
}

.login-provider.google {
  color: #211706;

  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  box-shadow:
    0 10px 28px rgba(228, 184, 95, 0.12);
}

.login-provider.google:hover {
  box-shadow:
    0 13px 34px rgba(228, 184, 95, 0.20);
}

.provider-icon {
  position: absolute;
  left: 17px;

  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;
}


/* =========================================
   GOOGLE ICON
========================================= */
.google-icon {
  padding: 3px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.16);
}

.google-icon svg {
  width: 100%;
  height: 100%;

  display: block;
}


/* =========================================
   MICROSOFT ICON
========================================= */

.microsoft-icon {
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 2px;
}

.microsoft-icon span {
  display: block;

  width: 9px;
  height: 9px;
}

.microsoft-icon span:nth-child(1) {
  background: #f25022;
}

.microsoft-icon span:nth-child(2) {
  background: #7fba00;
}

.microsoft-icon span:nth-child(3) {
  background: #00a4ef;
}

.microsoft-icon span:nth-child(4) {
  background: #ffb900;
}


/* =========================================
   APPLE ICON
========================================= */

.apple-icon {
  color: #ffffff;
}

.apple-icon svg {
  width: 24px;
  height: 24px;

  display: block;
}


/* =========================================
   LOGIN MODAL DIVIDER
========================================= */

.login-modal-divider {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 22px 0 17px;

  color: #8993aa;

  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-modal-divider::before,
.login-modal-divider::after {
  content: "";

  height: 1px;

  flex: 1;

  background: var(--border);
}


/* =========================================
   LOGIN PRIVACY
========================================= */

.login-privacy {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  padding: 13px;

  border: 1px solid rgba(114, 213, 165, 0.14);
  border-radius: 11px;

  background: rgba(114, 213, 165, 0.035);
}

.login-privacy .ui-icon {
  width: 18px;
  height: 18px;

  margin-top: 1px;

  color: var(--green);
}

.login-privacy p {
  margin: 0;

  color: #aeb7ca;

  font-size: 0.73rem;
  line-height: 1.5;
}

.login-terms {
  margin: 15px 12px 0;

  color: #778198;

  font-size: 0.64rem;
  line-height: 1.5;
  text-align: center;
}


/* =========================================
   LOGIN MODAL MOBILE
========================================= */

@media (max-width: 520px) {
  .login-modal {
    padding: 10px;
  }

  .login-modal-card {
    max-height: calc(100dvh - 20px);

    padding:
      27px
      18px
      21px;

    border-radius: 19px;
  }

  .login-modal-brand {
    margin-bottom: 19px;
  }

  .login-provider {
    min-height: 48px;

    padding-inline: 43px;

    font-size: 0.80rem;
  }

  .provider-icon {
    left: 14px;
  }

  .login-modal-heading p {
    font-size: 0.82rem;
  }
}

.sidebar-sign-in[hidden] {
  display: none !important;
}

body.login-modal-is-open {
  overflow: hidden;
}

/* Keep authentication visible on short screens or browser zoom */

@media (max-height: 760px) and (min-width: 621px) {
  .app-sidebar {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .sidebar-brand {
    min-height: 36px;
  }

  .new-chat-btn {
    min-height: 44px;
    margin-top: 12px;
    margin-bottom: 10px;
  }

  .nav-item {
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .recent-block {
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .recent-empty {
    display: none;
  }

  .account-panel {
    margin-top: 4px;
    padding: 8px;
  }

  .account-heading {
    display: none;
  }

  .sidebar-sign-in,
  .sidebar-sign-out {
    min-height: 38px;
    margin-top: 0;
  }

  .privacy-note {
    padding-top: 7px;
  }
}

/* =========================================
   BIBLE TRANSLATION SELECTOR
========================================= */

.translation-control {
  position: relative;

  width: 86px;

  display: block;
  flex: 0 0 86px;
}

.translation-label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}

.translation-control .translation-btn {
  width: 86px;
  min-width: 86px;
  height: 42px;
  min-height: 42px;

  display: block;

  padding:
    8px
    29px
    8px
    13px;

  appearance: none;
  -webkit-appearance: none;

  border: 1px solid var(--border);
  border-radius: 10px;

  color: var(--text);
  background: rgba(8, 11, 22, 0.72);

  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
}

.translation-control .translation-btn:hover {
  border-color:
    rgba(228, 184, 95, 0.45);
}

.translation-control .translation-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.translation-chevron {
  position: absolute;
  top: 50%;
  right: 12px;

  transform: translateY(-54%);

  color: var(--text);

  line-height: 1;

  pointer-events: none;
}

.recent-conversations {
  display: grid;
  gap: 5px;

  margin-top: 10px;
}

.recent-empty[hidden] {
  display: none;
}

.recent-conversation {
  position: relative;

  width: 100%;
  min-width: 0;

  display: grid;
  gap: 4px;

  padding: 10px 11px;

  border: 1px solid transparent;
  border-radius: 10px;

  color: #aeb7cb;
  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.recent-conversation:hover {
  color: var(--text);

  border-color:
    rgba(168, 181, 218, 0.12);

  background:
    rgba(255, 255, 255, 0.035);
}

.recent-conversation.active,
.recent-conversation[aria-current="true"] {
  color: var(--text);

  border-color:
    rgba(228, 184, 95, 0.20);

  background:
    linear-gradient(
      90deg,
      rgba(228, 184, 95, 0.10),
      rgba(108, 99, 180, 0.07)
    );
}

.recent-conversation.active::before,
.recent-conversation[aria-current="true"]::before {
  content: "";

  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;

  width: 2px;

  border-radius: 2px;

  background: var(--gold);

  box-shadow:
    0 0 9px rgba(228, 184, 95, 0.55);
}

.recent-conversation-title {
  display: block;

  min-width: 0;

  overflow: hidden;

  font-size: 0.75rem;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-conversation-meta {
  color: #7f899f;

  font-size: 0.61rem;
  line-height: 1.35;
}

.recent-conversation:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* =========================================
   WORKSPACE VIEWS
========================================= */

.workspace-view {
  position: relative;
  z-index: 1;

  min-width: 0;
  min-height: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
}

.workspace-view[hidden] {
  display: none !important;
}


/* =========================================
   FEATURE PAGES
========================================= */

.feature-view {
  height: 100dvh;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(7, 10, 22, 0.14),
      rgba(5, 8, 17, 0.72)
    );
}

.feature-header {
  position: relative;
  z-index: 2;

  min-height: 150px;

  display: flex;
  align-items: flex-end;

  padding:
    34px
    clamp(26px, 5vw, 72px)
    25px;

  border-bottom:
    1px solid rgba(158, 171, 207, 0.16);

  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 18, 0.28),
      rgba(8, 12, 25, 0.58)
    );
}

.feature-header h1 {
  margin: 6px 0 7px;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.1rem, 4vw, 3.8rem);

  font-weight: 600;
  line-height: 1;
}

.feature-header p {
  max-width: 650px;

  margin: 0;

  color: var(--muted);

  font-size: 0.92rem;
  line-height: 1.6;
}

.feature-eyebrow {
  color: var(--gold);

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.feature-content {
  position: relative;
  z-index: 1;

  min-height: 0;

  flex: 1;

  display: grid;
  place-items: center;

  padding:
    34px
    clamp(26px, 5vw, 72px);

  overflow-y: auto;
}

.feature-welcome {
  width: min(720px, 100%);

  padding: clamp(30px, 5vw, 58px);

  border:
    1px solid rgba(158, 171, 207, 0.2);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 22, 42, 0.9),
      rgba(8, 12, 25, 0.83)
    );

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  text-align: center;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.feature-mark {
  width: 58px;
  height: 58px;

  margin-bottom: 19px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 16px
      rgba(228, 184, 95, 0.34)
    );
}

.feature-welcome h2 {
  margin: 12px 0;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.8rem, 4vw, 3rem);

  font-weight: 600;
  line-height: 1.12;
}

.feature-welcome p {
  max-width: 540px;

  margin: 0 auto;

  color: var(--muted);

  font-size: 0.94rem;
  line-height: 1.65;
}


/* =========================================
   FEATURE PAGE MOBILE FOUNDATION
========================================= */

@media (max-width: 620px) {
  .feature-view {
    min-height: 100dvh;
    height: auto;
  }

  .feature-header {
    min-height: 128px;

    padding:
      24px
      18px
      20px;
  }

  .feature-content {
    padding: 20px 14px;
  }

  .feature-welcome {
    padding: 30px 20px;

    border-radius: 18px;
  }

  .feature-mark {
    width: 48px;
    height: 48px;
  }
}

/* =========================================
   ACCESSIBLE HIDDEN LABEL
========================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}


/* =========================================
   SCRIPTURE HISTORY PAGE
========================================= */

.scripture-header {
  justify-content: space-between;
  gap: 28px;
}

.scripture-version {
  width: 94px;
  min-width: 94px;
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;

  border:
    1px solid rgba(228, 184, 95, 0.42);

  border-radius: 12px;

  color: var(--gold-light);

  background:
    linear-gradient(
      180deg,
      rgba(228, 184, 95, 0.09),
      rgba(8, 11, 22, 0.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.17);
}

.scripture-version strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.2rem;
  font-weight: 600;
}


/* =========================================
   SCRIPTURE CONTENT
========================================= */

.scripture-content {
  display: block;

  width: 100%;

  padding-top: 30px;
}

.scripture-history-search-area,
.scripture-history {
  width: min(820px, 100%);

  margin-inline: auto;
}


/* =========================================
   SCRIPTURE SEARCH
========================================= */

.scripture-history-search-label {
  display: block;

  margin-bottom: 10px;

  color: #d9deea;

  font-size: 0.82rem;
  font-weight: 700;
}

.scripture-history-search-box {
  min-height: 60px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px 9px 8px 19px;

  border:
    1px solid rgba(228, 184, 95, 0.52);

  border-radius: 16px;

  background: rgba(4, 7, 16, 0.86);

  box-shadow:
    0 0 0 4px rgba(228, 184, 95, 0.035),
    0 17px 44px rgba(0, 0, 0, 0.24);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.scripture-history-search-box:focus-within {
  border-color:
    rgba(228, 184, 95, 0.82);

  box-shadow:
    0 0 0 4px rgba(228, 184, 95, 0.07),
    0 19px 48px rgba(0, 0, 0, 0.28);
}

.scripture-history-search-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;

  padding: 0;

  border: 0;
  outline: 0;

  color: var(--text);
  background: transparent;

  font: inherit;
  font-size: 0.94rem;
}

.scripture-history-search-input::placeholder {
  color: #747e96;
}

.scripture-history-clear {
  min-width: 76px;
  min-height: 42px;

  padding: 9px 15px;

  border: 0;
  border-radius: 11px;

  color: #211805;

  background:
    linear-gradient(
      135deg,
      #ffe8a0,
      #e1b150
    );

  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.scripture-history-clear:hover {
  transform: translateY(-1px);

  box-shadow:
    0 10px 24px rgba(228, 184, 95, 0.18);
}

.scripture-history-clear:active {
  transform: translateY(0);
}


/* =========================================
   SCRIPTURE HISTORY
========================================= */

.scripture-history {
  margin-top: 37px;
}

.scripture-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 10px;
}

.scripture-history-heading h2 {
  margin: 0;

  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.32rem;
  font-weight: 600;
}

.scripture-history-heading span {
  color: var(--muted);

  font-size: 0.72rem;
  white-space: nowrap;
}

.scripture-history-list {
  border-top:
    1px solid rgba(158, 171, 207, 0.17);
}


/* Generated by index-v2.js */

.scripture-history-item {
  width: 100%;
  min-height: 82px;

  display: grid;
  grid-template-columns:
    minmax(145px, 0.38fr)
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 20px;

  padding: 15px 6px;

  border: 0;
  border-bottom:
    1px solid rgba(158, 171, 207, 0.17);

  color: inherit;
  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    background 180ms ease,
    padding 180ms ease;
}

.scripture-history-item:hover {
  padding-inline: 12px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(228, 184, 95, 0.055),
      transparent
    );
}

.scripture-history-reference {
  overflow: hidden;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.04rem;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.scripture-history-preview {
  overflow: hidden;

  color: #abb4c9;

  font-size: 0.78rem;
  line-height: 1.5;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.scripture-history-date {
  color: #78839a;

  font-size: 0.7rem;
  white-space: nowrap;
}


/* =========================================
   SCRIPTURE EMPTY STATE
========================================= */

.scripture-history-empty {
  min-height: 245px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px 22px;

  border-top:
    1px solid rgba(158, 171, 207, 0.17);

  color: var(--muted);

  text-align: center;
}

.scripture-history-empty[hidden] {
  display: none;
}

.scripture-history-empty .ui-icon {
  width: 31px;
  height: 31px;

  margin-bottom: 14px;

  color: var(--gold);
}

.scripture-history-empty strong {
  color: var(--text);

  font-size: 0.88rem;
  font-weight: 700;
}

.scripture-history-empty p {
  max-width: 420px;

  margin: 8px 0 0;

  color: #818ba2;

  font-size: 0.76rem;
  line-height: 1.55;
}


/* =========================================
   SCRIPTURE RESPONSIVE FOUNDATION
========================================= */

@media (max-width: 760px) {
  .scripture-history-item {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 5px 14px;
  }

  .scripture-history-preview {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .scripture-header {
    align-items: flex-end;
  }

  .scripture-version {
    width: 78px;
    min-width: 78px;
    min-height: 46px;
  }

  .scripture-content {
    padding:
      20px
      14px
      34px;
  }

  .scripture-history-search-box {
    flex-wrap: wrap;

    padding: 12px;
  }

  .scripture-history-search-input {
    width: calc(100% - 92px);

    font-size: 1rem;
  }

  .scripture-history {
    margin-top: 29px;
  }

  .scripture-history-item {
    min-height: 88px;
  }
}

/* =========================================
   SCRIPTURE — REFINED FONT WEIGHTS
========================================= */

.scripture-view .feature-eyebrow,
.scripture-history-search-label,
.scripture-history-clear {
  font-weight: 600;
}

.scripture-view h1,
.scripture-version strong,
.scripture-history-heading h2,
.scripture-history-reference,
.scripture-history-empty strong {
  font-weight: 500;
}

.scripture-history-search-input,
.scripture-history-preview,
.scripture-history-date {
  font-weight: 400;
}

/* =========================================
   SCRIPTURE SEARCH — REFINED ACTIVE STATE
========================================= */

.scripture-history-search-input:focus,
.scripture-history-search-input:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.scripture-history-search-box {
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.scripture-history-search-box:focus-within {
  border-color:
    rgba(228, 184, 95, 0.78);

  background:
    rgba(5, 8, 18, 0.94);

  box-shadow:
    0 0 0 3px rgba(228, 184, 95, 0.08),
    0 0 28px rgba(228, 184, 95, 0.11),
    0 18px 42px rgba(0, 0, 0, 0.25);
}

.scripture-history-searchure-history-search-box:focus-within
.scripture-history-search-input::placeholder {
  color: #929bb1;
}

/* =========================================================
   UNIFIED RESPONSIVE SIDEBAR
========================================================= */

.mobile-menu-toggle {
  display: none;
}


/* =========================================================
   DESKTOP COLLAPSED SIDEBAR
========================================================= */

@media (min-width: 821px) {
  body.sidebar-collapsed {
    --sidebar-width: 76px;
  }

  body.sidebar-collapsed .app-sidebar {
    padding-inline: 10px;
  }

  body.sidebar-collapsed .sidebar-brand {
    justify-content: center;

    padding-inline: 0;
  }

  body.sidebar-collapsed
  .sidebar-brand > .brand-name,

  body.sidebar-collapsed
  .new-chat-btn span,

  body.sidebar-collapsed
  .nav-item span,

  body.sidebar-collapsed
  .recent-block,

  body.sidebar-collapsed
  .account-heading,

  body.sidebar-collapsed
  .user-id,

  body.sidebar-collapsed
  .privacy-note span,

  body.sidebar-collapsed
  .sidebar-sign-in > span,

  body.sidebar-collapsed
  .sidebar-sign-out > span {
    display: none;
  }

  body.sidebar-collapsed
  .sidebar-collapse {
    position: absolute;
    top: 68px;
    right: -15px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    margin: 0;

    border:
      1px solid rgba(158, 171, 207, 0.24);

    border-radius: 50%;

    background: #0b1020;

    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.28);
  }

  body.sidebar-collapsed
  .sidebar-collapse .ui-icon {
    width: 16px;
    height: 16px;

    transform: rotate(180deg);
  }

  body.sidebar-collapsed
  .brand-mark {
    width: 36px;
    height: 36px;
  }

  body.sidebar-collapsed
  .new-chat-btn,

  body.sidebar-collapsed
  .nav-item {
    justify-content: center;

    padding-inline: 10px;
  }

  body.sidebar-collapsed
  .account-panel {
    padding: 6px;

    border: 0;

    background: transparent;
  }

  body.sidebar-collapsed
  .sidebar-sign-in:not([hidden]),

  body.sidebar-collapsed
  .sidebar-sign-out:not([hidden]) {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
  }

  body.sidebar-collapsed
  .sidebar-sign-in .ui-icon,

  body.sidebar-collapsed
  .sidebar-sign-out .ui-icon {
    width: 21px;
    height: 21px;

    margin: 0;
  }

  body.sidebar-collapsed
  .privacy-note {
    justify-content: center;
  }
}


/* =========================================================
   TABLET ICON RAIL AUTHENTICATION
========================================================= */

@media (min-width: 621px) and (max-width: 820px) {
  .sidebar-sign-in > span,
  .sidebar-sign-out > span,
  .account-heading,
  .user-id {
    display: none;
  }

  .sidebar-sign-out:not([hidden]),
  .sidebar-sign-in:not([hidden]) {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
  }

  .sidebar-sign-out .ui-icon,
  .sidebar-sign-in .ui-icon {
    width: 21px;
    height: 21px;

    margin: 0;
  }
}


/* =========================================================
   MOBILE PORTRAIT SIDEBAR DRAWER
========================================================= */

@media (max-width: 620px) {
  .mobile-menu-toggle {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    z-index: 850;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
      1px solid rgba(158, 171, 207, 0.25);

    border-radius: 12px;

    color: var(--text);

    background:
      rgba(8, 11, 22, 0.88);

    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  body.mobile-sidebar-open
  .mobile-menu-toggle {
    opacity: 0;

    pointer-events: none;

    transform: translateX(-10px);
  }

  .mobile-menu-lines {
    width: 19px;
    height: 15px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-menu-lines span {
    width: 100%;
    height: 1.5px;

    display: block;

    border-radius: 2px;

    background: currentColor;
  }

  /* Prevent the menu button from covering content */

  .workspace-header {
    padding-left: 62px;
  }

  .feature-header {
    padding-left: 68px;
  }

  /* Restore complete account text inside the open drawer */

  .app-sidebar
  .sidebar-sign-in > span,

  .app-sidebar
  .sidebar-sign-out > span {
    display: inline;
  }

  .app-sidebar
  .sidebar-sign-in-arrow {
    display: inline;

    margin-left: auto;
  }

  .app-sidebar
  .sidebar-sign-out:not([hidden]),

  .app-sidebar
  .sidebar-sign-in:not([hidden]) {
    display: flex;
  }

  /* Collapse button becomes the drawer close button */

  .app-sidebar
  .sidebar-collapse {
    position: static;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin-left: auto;
  }
}

/* =========================================
   COLLAPSED SIDEBAR — EXPAND BUTTON
========================================= */

@media (min-width: 821px) {
  body.sidebar-collapsed .app-sidebar {
    overflow: visible;
  }

  body.sidebar-collapsed .sidebar-collapse {
    right: -15px;
    z-index: 20;

    isolation: isolate;

    box-shadow:
      0 0 0 1px rgba(158, 171, 207, 0.12),
      0 8px 24px rgba(0, 0, 0, 0.42);
  }

  body.sidebar-collapsed
  .sidebar-collapse:hover {
    color: var(--gold-light);

    border-color:
      rgba(228, 184, 95, 0.55);

    background: #101528;
  }
}

/* =========================================
   MOBILE MENU — BELOW MODE SELECTOR
========================================= */

@media (max-width: 620px) {
  body[data-workspace-view="chat"]
  .mobile-menu-toggle {
    top:
      calc(
        env(safe-area-inset-top) +
        var(--mobile-header-height) +
        10px
      );

    left: 12px;
  }

  body[data-workspace-view="chat"]
  .workspace-header {
    padding-left: 10px;
  }

  body[data-workspace-view="chat"]
  .conversation-stage {
    padding-top: 54px;
  }

  /* Keep the button at the top on separate feature pages */

  body:not([data-workspace-view="chat"])
  .mobile-menu-toggle {
    top: max(
      10px,
      env(safe-area-inset-top)
    );
  }
}

/* =========================================
   PRAYER ARCHIVE
========================================= */

.prayer-view .feature-eyebrow,
.prayer-view .scripture-history-search-label,
.prayer-view .scripture-history-clear {
  font-weight: 600;
}

.prayer-view h1,
.prayer-view .scripture-history-heading h2,
.prayer-view .scripture-history-reference,
.prayer-view .scripture-history-empty strong {
  font-weight: 500;
}

.prayer-view .scripture-history-search-input,
.prayer-view .scripture-history-preview,
.prayer-view .scripture-history-date {
  font-weight: 400;
}

/* =========================================
   DISCERNMENT ARCHIVE
========================================= */

.discernment-view .feature-eyebrow,
.discernment-view
.scripture-history-search-label,
.discernment-view
.scripture-history-clear {
  font-weight: 600;
}

.discernment-view h1,
.discernment-view
.scripture-history-heading h2,
.discernment-view
.scripture-history-reference,
.discernment-view
.scripture-history-empty strong {
  font-weight: 500;
}

.discernment-view
.scripture-history-search-input,
.discernment-view
.scripture-history-preview,
.discernment-view
.scripture-history-date {
  font-weight: 400;
}

/* =========================================================
   SAVED RESPONSES PAGE
========================================================= */

.saved-content {
  width: 100%;

  display: block;

  padding:
    30px
    clamp(26px, 5vw, 72px)
    50px;
}


/* =========================================================
   SAVED TOOLBAR
========================================================= */

.saved-toolbar {
  width: min(1180px, 100%);

  display: grid;
  grid-template-columns:
    minmax(240px, 1fr)
    auto
    auto;
  align-items: center;
  gap: 12px;

  margin-inline: auto;
}


/* Search */

.saved-search {
  min-width: 0;
  min-height: 56px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 8px 18px;

  border:
    1px solid rgba(158, 171, 207, 0.24);

  border-radius: 15px;

  color: #8d98b1;

  background:
    rgba(5, 9, 20, 0.82);

  box-shadow:
    0 13px 34px rgba(0, 0, 0, 0.17);

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.saved-search:focus-within {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.72);

  background:
    rgba(5, 8, 18, 0.94);

  box-shadow:
    0 0 0 3px rgba(228, 184, 95, 0.07),
    0 0 26px rgba(228, 184, 95, 0.09),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.saved-search svg {
  width: 20px;
  height: 20px;

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.saved-search input {
  width: 100%;
  min-width: 0;

  padding: 0;

  border: 0;
  outline: 0;

  color: var(--text);
  background: transparent;

  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.saved-search input:focus,
.saved-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.saved-search input::placeholder {
  color: #77829b;
}


/* Mode filter */

.saved-filter {
  width: 112px;
  min-height: 56px;

  padding:
    0
    36px
    0
    16px;

  border:
    1px solid rgba(158, 171, 207, 0.24);

  border-radius: 15px;

  color: #e9e5dc;

  background-color:
    rgba(7, 11, 23, 0.9);

  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;

  cursor: pointer;
}

.saved-filter:hover {
  border-color:
    rgba(228, 184, 95, 0.48);
}

.saved-filter:focus-visible {
  outline:
    2px solid rgba(255, 240, 189, 0.78);

  outline-offset: 3px;
}


/* Grid/list toggle */

.saved-layout-toggle {
  display: flex;

  padding: 4px;

  border:
    1px solid rgba(158, 171, 207, 0.24);

  border-radius: 14px;

  background:
    rgba(7, 11, 23, 0.9);
}

.saved-layout-button {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 10px;

  color: #7f89a0;
  background: transparent;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.saved-layout-button:hover {
  color: #d9deea;
}

.saved-layout-button.active,
.saved-layout-button[aria-pressed="true"] {
  color: #241a06;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  box-shadow:
    0 7px 18px rgba(228, 184, 95, 0.17);
}

.saved-layout-button svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-layout-button svg rect {
  fill: none;
}

.saved-layout-button:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 3px;
}


/* =========================================================
   SAVED RESULTS HEADING
========================================================= */

.saved-results-heading {
  width: min(1180px, 100%);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin:
    32px
    auto
    13px;
}

.saved-results-heading h2 {
  margin: 0;

  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.32rem;
  font-weight: 500;
}

.saved-results-heading span {
  color: var(--muted);

  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
}


/* =========================================================
   SAVED RESPONSE COLLECTION
========================================================= */

.saved-response-list {
  width: min(1180px, 100%);

  margin-inline: auto;
}

.saved-response-list:empty {
  display: none;
}


/* Grid layout */

.saved-response-list.saved-grid-layout {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px;
}


/* List layout */

.saved-response-list.saved-list-layout {
  display: flex;
  flex-direction: column;
  gap: 11px;
}


/* =========================================================
   SAVED RESPONSE CARD
========================================================= */

.saved-response-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding: 20px 21px 16px;

  border:
    1px solid rgba(158, 171, 207, 0.23);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 27, 48, 0.9),
      rgba(7, 13, 27, 0.92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 15px 38px rgba(0, 0, 0, 0.16);

  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.saved-response-card:hover {
  border-color:
    rgba(228, 184, 95, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(20, 31, 54, 0.94),
      rgba(8, 14, 29, 0.96)
    );

  transform:
    translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 19px 44px rgba(0, 0, 0, 0.21);
}


/* Card header */

.saved-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.saved-card-meta {
  min-width: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 15px;
}

.saved-card-mode {
  color: var(--gold-light);

  font-size: 0.75rem;
  font-weight: 500;
}

.saved-card-date {
  color: #7f899f;

  font-size: 0.69rem;
  font-weight: 400;
}


/* Heart */

.saved-heart-button {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  border:
    1px solid transparent;

  border-radius: 50%;

  color: var(--gold);
  background: transparent;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.saved-heart-button:hover {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.3);

  background:
    rgba(228, 184, 95, 0.07);

  transform: scale(1.05);
}

.saved-heart-button svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-heart-button.active svg,
.saved-heart-button[aria-pressed="true"] svg {
  fill: currentColor;
}

.saved-heart-button:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 2px;
}


/* Response text */

.saved-card-response {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;

  margin:
    13px
    0
    12px;

  color: #e7e4dc;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.94rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.58;
}

.saved-card-reference {
  overflow: hidden;

  margin:
    auto
    0
    13px;

  color: #8f99b0;

  font-size: 0.72rem;
  line-height: 1.45;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Card footer */

.saved-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding-top: 13px;

  border-top:
    1px solid rgba(158, 171, 207, 0.16);
}

.saved-open-conversation {
  min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 0;

  border: 0;

  color: #d9deea;
  background: transparent;

  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 180ms ease,
    gap 180ms ease;
}

.saved-open-conversation:hover {
  gap: 11px;

  color: var(--gold-light);
}

.saved-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.saved-copy-button,
.saved-share-button {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid transparent;

  border-radius: 9px;

  color: #9da7bc;
  background: transparent;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.saved-copy-button:hover,
.saved-share-button:hover {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.24);

  background:
    rgba(228, 184, 95, 0.055);
}

.saved-copy-button svg,
.saved-share-button svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-copy-button:focus-visible,
.saved-share-button:focus-visible,
.saved-open-conversation:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 2px;
}


/* =========================================================
   LIST VIEW CARD OVERRIDES
========================================================= */

.saved-list-layout .saved-response-card {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.23fr)
    minmax(0, 1fr)
    auto;
  grid-template-rows:
    auto
    auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 5px;

  padding:
    16px
    18px;
}

.saved-list-layout .saved-card-header {
  grid-column: 1;
  grid-row: 1 / 3;

  align-self: stretch;
}

.saved-list-layout .saved-card-meta {
  align-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.saved-list-layout .saved-heart-button {
  position: absolute;

  margin:
    -5px
    0
    0
    106px;
}

.saved-list-layout .saved-card-response {
  grid-column: 2;
  grid-row: 1;

  -webkit-line-clamp: 2;

  margin: 0;

  font-size: 0.88rem;
}

.saved-list-layout .saved-card-reference {
  grid-column: 2;
  grid-row: 2;

  margin: 0;
}

.saved-list-layout .saved-card-footer {
  grid-column: 3;
  grid-row: 1 / 3;

  align-self: stretch;

  padding:
    0
    0
    0
    18px;

  border-top: 0;
  border-left:
    1px solid rgba(158, 171, 207, 0.16);
}


/* =========================================================
   SAVED EMPTY STATE
========================================================= */

.saved-response-empty {
  width: min(1180px, 100%);
  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-inline: auto;

  padding: 45px 24px;

  border-top:
    1px solid rgba(158, 171, 207, 0.17);

  color: var(--muted);

  text-align: center;
}

.saved-response-empty[hidden] {
  display: none;
}

.saved-response-empty .ui-icon {
  width: 34px;
  height: 34px;

  margin-bottom: 16px;

  color: var(--gold);
}

.saved-response-empty strong {
  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1rem;
  font-weight: 500;
}

.saved-response-empty p {
  max-width: 430px;

  margin:
    9px
    0
    19px;

  color: #818ba2;

  font-size: 0.77rem;
  line-height: 1.6;
}

.saved-empty-action {
  min-height: 42px;

  padding:
    9px
    18px;

  border:
    1px solid rgba(228, 184, 95, 0.55);

  border-radius: 11px;

  color: var(--gold-light);

  background:
    rgba(228, 184, 95, 0.055);

  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.saved-empty-action:hover {
  color: #211805;

  border-color: var(--gold-light);

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  transform: translateY(-1px);
}

.saved-empty-action:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 3px;
}


/* =========================================================
   SAVED PAGE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
  .saved-response-list.saved-grid-layout {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .saved-list-layout .saved-response-card {
    grid-template-columns:
      minmax(125px, 0.2fr)
      minmax(0, 1fr);
  }

  .saved-list-layout .saved-card-footer {
    grid-column: 1 / -1;
    grid-row: 3;

    padding:
      11px
      0
      0;

    border-left: 0;
    border-top:
      1px solid rgba(158, 171, 207, 0.16);
  }
}


@media (max-width: 700px) {
  .saved-toolbar {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .saved-search {
    grid-column: 1 / -1;
  }

  .saved-filter {
    width: 100%;
  }
}


@media (max-width: 620px) {
  .saved-content {
    padding:
      20px
      14px
      38px;
  }

  .saved-toolbar {
    gap: 9px;
  }

  .saved-search {
    min-height: 52px;

    padding-inline: 15px;
  }

  .saved-search input {
    font-size: 1rem;
  }

  .saved-filter {
    min-height: 50px;
  }

  .saved-layout-button {
    width: 42px;
    height: 42px;
  }

  .saved-results-heading {
    margin-top: 27px;
  }

  .saved-results-heading h2 {
    font-size: 1.16rem;
  }

   /* Mobile grid view: full preview cards */

  .saved-response-list.saved-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .saved-grid-layout .saved-response-card {
    display: flex;
    flex-direction: column;

    padding:
      18px
      17px
      14px;
  }


  /* Mobile list view: compact saved-response rows */

  .saved-response-list.saved-list-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .saved-list-layout .saved-response-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    gap: 7px;

    padding:
      12px
      14px;

    border-radius: 13px;
  }

  .saved-list-layout .saved-card-header {
    width: 100%;

    grid-column: 1;
    grid-row: auto;

    align-self: auto;
  }

  .saved-list-layout .saved-card-meta {
    flex-direction: row;
    align-items: center;
    gap: 6px 11px;
  }

  .saved-list-layout .saved-heart-button {
    position: static;

    width: 34px;
    height: 34px;

    margin: 0;
  }

  .saved-list-layout .saved-card-response {
    grid-column: 1;
    grid-row: auto;

    margin: 0;

    font-size: 0.84rem;
    line-height: 1.45;

    -webkit-line-clamp: 2;
  }

  .saved-list-layout .saved-card-reference {
    grid-column: 1;
    grid-row: auto;

    margin: 0;

    font-size: 0.67rem;
  }

  .saved-list-layout .saved-card-footer {
    width: 100%;

    grid-column: 1;
    grid-row: auto;

    align-self: auto;

    padding:
      7px
      0
      0;

    border-left: 0;
    border-top:
      1px solid rgba(158, 171, 207, 0.13);
  }

  .saved-list-layout .saved-open-conversation {
    padding:
      4px
      0;
  }

  .saved-list-layout .saved-copy-button,
  .saved-list-layout .saved-share-button {
    width: 32px;
    height: 32px;
  }

  .saved-response-empty {
    min-height: 260px;

    padding:
      37px
      18px;
  }
}


@media (max-width: 390px) {
  .saved-toolbar {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .saved-filter {
    grid-column: 1;
  }

  .saved-layout-toggle {
    grid-column: 1;

    width: max-content;
  }

  .saved-card-footer {
    align-items: flex-end;
  }

  .saved-open-conversation span:first-child {
    max-width: 108px;
  }
}

/* =========================================
   CHAT RESPONSE SAVE HEART
========================================= */

.chat-message.assistant {
  align-items: flex-end;
  gap: 8px;
}

.chat-message.assistant .chat-bubble {
  max-width:
    min(
      calc(82% - 44px),
      760px
    );
}

.chat-message-actions {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  padding-bottom: 3px;
}

.chat-heart-button {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  padding: 0;

  border: 1px solid
    rgba(168, 181, 218, 0.22);

  border-radius: 50%;

  color: #aeb7ca;

  background:
    rgba(12, 17, 31, 0.76);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.18);

  cursor: pointer;

  opacity: 0.62;

  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.chat-heart-button svg {
  width: 18px;
  height: 18px;

  display: block;

  overflow: visible;
}

.chat-heart-button path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    fill 0.18s ease,
    stroke 0.18s ease;
}

.chat-message.assistant:hover
.chat-heart-button,
.chat-heart-button:hover,
.chat-heart-button:focus-visible {
  opacity: 1;
}

.chat-heart-button:hover {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.52);

  background:
    rgba(228, 184, 95, 0.09);

  box-shadow:
    0 8px 26px
    rgba(228, 184, 95, 0.16);

  transform:
    translateY(-1px);
}

.chat-heart-button:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 3px;
}

.chat-heart-button.saved {
  color: var(--gold-light);

  opacity: 1;

  border-color:
    rgba(228, 184, 95, 0.58);

  background:
    rgba(228, 184, 95, 0.12);

  box-shadow:
    0 0 22px
    rgba(228, 184, 95, 0.16);
}

.chat-heart-button.saved path {
  fill: currentColor;
  stroke: currentColor;
}

.chat-heart-button:disabled {
  opacity: 0;

  cursor: default;
  pointer-events: none;
  transform: none;
}


/* Keep the control accessible on touchscreens */

@media (hover: none) {
  .chat-heart-button:not(:disabled) {
    opacity: 0.88;
  }

  .chat-heart-button.saved {
    opacity: 1;
  }
}


/* Mobile response heart */

@media (max-width: 620px) {
  .chat-message.assistant {
    gap: 6px;
  }

  .chat-message.assistant .chat-bubble {
    max-width:
      calc(92% - 40px);
  }

  .chat-message-actions {
    padding-bottom: 2px;
  }

  .chat-heart-button {
    width: 34px;
    height: 34px;

    flex-basis: 34px;
  }

  .chat-heart-button svg {
    width: 17px;
    height: 17px;
  }
}

/* Give the saved-response filter enough room */

.saved-filter {
  width: 170px;
  min-width: 170px;

  padding-left: 18px;
  padding-right: 42px;

  white-space: nowrap;
  text-overflow: clip;
}

.saved-response-card[hidden] {
  display: none !important;
}

/* =========================================================
   SYNC PAGE
========================================================= */

.sync-content {
  width: 100%;

  display: block;

  padding:
    30px
    clamp(26px, 5vw, 72px)
    50px;
}


/* =========================================================
   PRIMARY SYNC STATUS
========================================================= */

.sync-overview-card {
  width: min(1180px, 100%);

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 22px;

  margin-inline: auto;

  padding: 25px 27px;

  border:
    1px solid rgba(228, 184, 95, 0.27);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(20, 27, 49, 0.94),
      rgba(8, 13, 27, 0.94)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.035),
    0 19px 48px
      rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sync-overview-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(228, 184, 95, 0.35);

  border-radius: 17px;

  color: var(--gold-light);

  background:
    rgba(228, 184, 95, 0.075);

  box-shadow:
    0 0 28px
    rgba(228, 184, 95, 0.08);
}

.sync-overview-icon .ui-icon {
  width: 27px;
  height: 27px;
}

.sync-overview-copy {
  min-width: 0;
}

.sync-status-label,
.sync-card-eyebrow {
  display: block;

  color: var(--gold);

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sync-overview-copy h2 {
  margin:
    5px
    0
    7px;

  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.35rem, 2.3vw, 2rem);

  font-weight: 500;
  line-height: 1.2;
}

.sync-overview-copy > p {
  max-width: 690px;

  margin: 0;

  color: var(--muted);

  font-size: 0.78rem;
  line-height: 1.6;
}

.sync-last-row {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 11px !important;

  color: #7f899f !important;

  font-size: 0.66rem !important;
}

.sync-last-row time {
  color: #aeb7ca;
}


/* Sync button */

.sync-now-button {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding:
    11px
    20px;

  border:
    1px solid var(--gold-light);

  border-radius: 13px;

  color: #211705;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  box-shadow:
    0 9px 26px
    rgba(228, 184, 95, 0.18);

  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.sync-now-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 13px 32px
    rgba(228, 184, 95, 0.27);
}

.sync-now-button:focus-visible {
  outline:
    2px solid #fff0bd;

  outline-offset: 3px;
}

.sync-now-button:disabled {
  opacity: 0.6;

  cursor: wait;
  transform: none;
}

.sync-now-button .ui-icon {
  width: 18px;
  height: 18px;
}

.sync-now-button.syncing .ui-icon {
  animation:
    sync-button-rotation
    0.85s
    linear
    infinite;
}

@keyframes sync-button-rotation {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   SYNC STATISTICS
========================================================= */

.sync-stat-grid {
  width: min(1180px, 100%);

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 13px;

  margin:
    16px
    auto
    0;
}

.sync-stat-card {
  min-width: 0;

  padding:
    20px
    20px
    18px;

  border:
    1px solid rgba(158, 171, 207, 0.2);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 24, 44, 0.88),
      rgba(7, 12, 25, 0.91)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.025),
    0 13px 34px
      rgba(0, 0, 0, 0.15);
}

.sync-stat-value {
  display: block;

  overflow: hidden;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.65rem, 3vw, 2.25rem);

  font-weight: 500;
  line-height: 1;

  text-overflow: ellipsis;
}

.sync-stat-label {
  display: block;

  margin-top: 8px;

  color: var(--text);

  font-size: 0.73rem;
  font-weight: 600;
}

.sync-stat-card p {
  margin:
    8px
    0
    0;

  color: #818ba2;

  font-size: 0.67rem;
  line-height: 1.52;
}


/* =========================================================
   ACCOUNT AND PRIVACY
========================================================= */

.sync-information-grid {
  width: min(1180px, 100%);

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;

  margin:
    16px
    auto
    0;
}

.sync-information-card {
  min-width: 0;

  padding:
    22px
    23px;

  border:
    1px solid rgba(158, 171, 207, 0.2);

  border-radius: 17px;

  background:
    rgba(9, 15, 29, 0.87);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.025),
    0 15px 38px
      rgba(0, 0, 0, 0.16);
}

.sync-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sync-card-heading h2 {
  margin:
    4px
    0
    0;

  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1rem;
  font-weight: 500;
}

.sync-account-status-dot {
  width: 12px;
  height: 12px;

  flex: 0 0 12px;

  border-radius: 50%;

  background: #7d879b;

  box-shadow:
    0 0 0 6px
    rgba(125, 135, 155, 0.08);
}

.sync-account-status-dot.signed-in {
  background: #65d7ad;

  box-shadow:
    0 0 0 6px
      rgba(101, 215, 173, 0.09),
    0 0 20px
      rgba(101, 215, 173, 0.21);
}

.sync-account-card > p {
  margin:
    17px
    0
    16px;

  color: var(--muted);

  font-size: 0.75rem;
  line-height: 1.58;
}

.sync-account-details {
  display: grid;
  grid-template-columns:
    minmax(0, 0.7fr)
    minmax(0, 1.3fr);
  gap: 10px;

  margin: 0;
}

.sync-account-details > div {
  min-width: 0;

  padding:
    12px
    13px;

  border:
    1px solid rgba(158, 171, 207, 0.15);

  border-radius: 11px;

  background:
    rgba(4, 8, 18, 0.45);
}

.sync-account-details dt {
  color: #737e95;

  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sync-account-details dd {
  overflow: hidden;

  margin:
    5px
    0
    0;

  color: #dce1ec;

  font-size: 0.72rem;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Privacy card */

.sync-privacy-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  border-radius: 11px;

  color: var(--gold-light);

  background:
    rgba(228, 184, 95, 0.075);
}

.sync-privacy-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.sync-data-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap:
    10px
    16px;

  margin:
    18px
    0
    0;

  padding: 0;

  list-style: none;
}

.sync-data-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  color: #aeb7ca;

  font-size: 0.69rem;
  line-height: 1.48;
}

.sync-data-list li span {
  color: #65d7ad;
}


/* Bottom status message */

.sync-page-message {
  width: min(1180px, 100%);

  margin:
    15px
    auto
    0;

  padding:
    12px
    15px;

  border:
    1px solid rgba(158, 171, 207, 0.15);

  border-radius: 12px;

  color: #8994aa;

  background:
    rgba(5, 9, 19, 0.54);

  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}

.sync-page-message.success {
  color: #8ce3c3;

  border-color:
    rgba(101, 215, 173, 0.24);

  background:
    rgba(101, 215, 173, 0.055);
}

.sync-page-message.error {
  color: #f0a8ad;

  border-color:
    rgba(219, 101, 110, 0.27);

  background:
    rgba(219, 101, 110, 0.055);
}


/* =========================================================
   SYNC RESPONSIVE DESIGN
========================================================= */

@media (max-width: 1000px) {
  .sync-stat-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .sync-information-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


@media (max-width: 760px) {
  .sync-overview-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    padding:
      22px
      21px;
  }

  .sync-now-button {
    grid-column: 1 / -1;

    width: 100%;
  }
}


@media (max-width: 620px) {
  .sync-content {
    padding:
      20px
      14px
      38px;
  }

  .sync-overview-card {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 15px;

    padding:
      20px
      18px;

    border-radius: 17px;
  }

  .sync-overview-icon {
    width: 50px;
    height: 50px;

    border-radius: 14px;
  }

  .sync-overview-copy h2 {
    font-size: 1.35rem;
  }

  .sync-last-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .sync-stat-grid {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 10px;

    margin-top: 12px;
  }

  .sync-stat-card {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;

    padding:
      16px
      17px;
  }

  .sync-stat-value {
    grid-row: 1 / 3;

    min-width: 45px;

    font-size: 1.7rem;
  }

  .sync-stat-label {
    margin-top: 0;
  }

  .sync-stat-card p {
    margin-top: 4px;
  }

  .sync-information-grid {
    gap: 10px;

    margin-top: 12px;
  }

  .sync-information-card {
    padding:
      19px
      17px;
  }

  .sync-account-details {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .sync-data-list {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .sync-page-message {
    margin-top: 12px;

    text-align: left;
  }
}

/* Match Saved and Sync titles to other feature pages */

.saved-view h1,
.sync-view h1,
.settings-view h1 {
  font-weight: 500;
}

/* =========================================
   CHAT RESPONSE ACTIONS
========================================= */

.chat-message.assistant {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.chat-message.assistant .chat-bubble {
  max-width:
    min(
      82%,
      760px
    );
}

.chat-message-actions {
  display: flex;
  align-items: center;
  gap: 4px;

  min-height: 34px;

  padding:
    0
    0
    0
    7px;
}


/* Shared action-button appearance */

.chat-copy-button,
.chat-share-button,
.chat-heart-button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  padding: 0;

  border:
    1px solid transparent;

  border-radius: 9px;

  color: #929db3;

  background: transparent;

  box-shadow: none;

  cursor: pointer;

  opacity: 0.68;

  transition:
    color 180ms ease,
    opacity 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}


/* Copy and Share SVG styling */

.chat-copy-button svg,
.chat-share-button svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Keep the heart consistent with the action row */

.chat-heart-button svg {
  width: 17px;
  height: 17px;
}


/* Hover and keyboard states */

.chat-message-actions:hover
.chat-copy-button,

.chat-message-actions:hover
.chat-share-button,

.chat-message-actions:hover
.chat-heart-button,

.chat-copy-button:hover,
.chat-share-button:hover,
.chat-heart-button:hover,

.chat-copy-button:focus-visible,
.chat-share-button:focus-visible,
.chat-heart-button:focus-visible {
  opacity: 1;
}

.chat-copy-button:hover,
.chat-share-button:hover {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.25);

  background:
    rgba(228, 184, 95, 0.055);

  transform:
    translateY(-1px);
}

.chat-copy-button:focus-visible,
.chat-share-button:focus-visible {
  outline:
    2px solid var(--gold-light);

  outline-offset: 2px;
}


/* Copy confirmation */

.chat-copy-button.completed,
.chat-share-button.completed {
  color: #75ddb7;

  border-color:
    rgba(101, 215, 173, 0.28);

  background:
    rgba(101, 215, 173, 0.07);

  opacity: 1;
}


/* Buttons remain hidden until a response is ready */

.chat-copy-button:disabled,
.chat-share-button:disabled {
  opacity: 0;

  cursor: default;
  pointer-events: none;
  transform: none;
}


/* Saved heart remains visibly active */

.chat-heart-button.saved {
  border-radius: 9px;

  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.32);

  background:
    rgba(228, 184, 95, 0.075);

  opacity: 1;
}


/* Touch devices cannot rely on hover */

@media (hover: none) {
  .chat-copy-button:not(:disabled),
  .chat-share-button:not(:disabled),
  .chat-heart-button:not(:disabled) {
    opacity: 0.9;
  }

  .chat-heart-button.saved {
    opacity: 1;
  }
}


/* Mobile */

@media (max-width: 620px) {
  .chat-message.assistant {
    gap: 5px;
  }

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

  .chat-message-actions {
    gap: 3px;

    padding-left: 5px;
  }

  .chat-copy-button,
  .chat-share-button,
  .chat-heart-button {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
  }

  .chat-copy-button svg,
  .chat-share-button svg,
  .chat-heart-button svg {
    width: 18px;
    height: 18px;
  }
}

/* =========================================
   COLLAPSED SIDEBAR TOOLTIPS
========================================= */

@media (min-width: 621px) {
  .app-sidebar
  [data-tooltip]:not(.sidebar-collapse) {
    position: relative;
  }

  .app-sidebar
  [data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: 50%;
    left: calc(100% + 14px);

    z-index: 10000;

    padding: 8px 12px;

    color: #fff8e6;
    background: #111625;

    border: 1px solid rgba(228, 184, 95, 0.35);
    border-radius: 8px;

    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(228, 184, 95, 0.08);

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
      translateX(-4px)
      translateY(-50%);

    transition:
      opacity 140ms ease,
      visibility 140ms ease,
      transform 140ms ease;
  }
}

/* Manually collapsed desktop sidebar */

@media (min-width: 821px) {
  body.sidebar-collapsed
  .app-sidebar
  [data-tooltip]:hover::after,

  body.sidebar-collapsed
  .app-sidebar
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;

    transform:
      translateX(0)
      translateY(-50%);
  }
}

/* Automatic tablet icon rail */

@media (min-width: 621px) and (max-width: 820px) {
  .app-sidebar {
    overflow: visible;
  }

  .app-sidebar
  [data-tooltip]:hover::after,

  .app-sidebar
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;

    transform:
      translateX(0)
      translateY(-50%);
  }
}

/* =========================================
   RECENT CONVERSATION RENAME
========================================= */

.recent-conversation-item {
  position: relative;

  min-width: 0;
}

.recent-conversation-item
.recent-conversation {
  padding-right: 38px;
}

.recent-conversation[hidden],
.recent-conversation-rename[hidden],
.recent-conversation-rename-form[hidden] {
  display: none;
}

.recent-conversation-rename {
  position: absolute;
  top: 7px;
  right: 7px;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 7px;

  color: #8f99b1;
  background: rgba(12, 16, 30, 0.88);

  font-size: 16px;
  line-height: 1;

  cursor: pointer;

  opacity: 0;

  transition:
    opacity 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.recent-conversation-item:hover
.recent-conversation-rename,

.recent-conversation-item:focus-within
.recent-conversation-rename {
  opacity: 1;
}

.recent-conversation-rename:hover,
.recent-conversation-rename:focus-visible {
  color: var(--gold-light);

  border-color:
    rgba(228, 184, 95, 0.35);

  background:
    rgba(228, 184, 95, 0.10);
}

.recent-conversation-rename:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.recent-conversation-rename-form {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    30px
    30px;
  align-items: center;
  gap: 5px;

  padding: 6px;

  border: 1px solid
    rgba(228, 184, 95, 0.28);
  border-radius: 10px;

  background:
    rgba(10, 14, 27, 0.96);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.28);
}

.recent-conversation-rename-input {
  width: 100%;
  min-width: 0;
  height: 32px;

  padding: 6px 8px;

  border: 1px solid
    rgba(228, 184, 95, 0.35);
  border-radius: 7px;

  color: var(--text);
  background: #080c18;

  font: inherit;
  font-size: 0.72rem;
}

.recent-conversation-rename-input:focus {
  border-color: var(--gold);

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(228, 184, 95, 0.10);
}

.recent-conversation-rename-save,
.recent-conversation-rename-cancel {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 7px;

  color: var(--text);
  background: rgba(255, 255, 255, 0.035);

  font-size: 15px;

  cursor: pointer;
}

.recent-conversation-rename-save:hover,
.recent-conversation-rename-save:focus-visible {
  color: #171204;
  border-color: var(--gold);
  background: var(--gold-light);
}

.recent-conversation-rename-cancel:hover,
.recent-conversation-rename-cancel:focus-visible {
  color: #ffd1d1;
  border-color: rgba(216, 120, 120, 0.45);
  background: rgba(216, 120, 120, 0.10);
}

/* =========================================
   RECENT CONVERSATION DELETE
========================================= */

.recent-conversation-item
.recent-conversation {
  padding-right: 70px;
}

.recent-conversation-delete[hidden] {
  display: none;
}

.recent-conversation-delete {
  position: absolute;
  top: 7px;
  right: 38px;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 7px;

  color: #8f99b1;
  background: rgba(12, 16, 30, 0.88);

  cursor: pointer;

  opacity: 0;

  transition:
    opacity 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.recent-conversation-delete svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.recent-conversation-item:hover
.recent-conversation-delete,

.recent-conversation-item:focus-within
.recent-conversation-delete {
  opacity: 1;
}

.recent-conversation-delete:hover,
.recent-conversation-delete:focus-visible {
  color: #ffd1d1;

  border-color:
    rgba(216, 120, 120, 0.45);

  background:
    rgba(216, 120, 120, 0.10);
}

.recent-conversation-delete:focus-visible {
  outline: 2px solid #e2a0a0;
  outline-offset: 2px;
}

.recent-conversation-delete:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* =========================================
   CHAT — SIGN-IN REQUIRED
========================================= */

.chat-auth-required {
  display: grid;
  gap: 8px;
}

.chat-auth-required strong {
  color: var(--gold-light);

  font-size: 0.95rem;
  font-weight: 650;
}

.chat-auth-required > span {
  color: var(--muted);

  font-size: 0.82rem;
  line-height: 1.5;
}

.chat-auth-sign-in {
  width: fit-content;
  min-height: 38px;

  margin-top: 4px;
  padding: 8px 16px;

  border: 1px solid
    rgba(228, 184, 95, 0.55);
  border-radius: 10px;

  color: #1b1407;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.chat-auth-sign-in:hover {
  transform: translateY(-1px);

  box-shadow:
    0 8px 22px
    rgba(228, 184, 95, 0.18);
}

.chat-auth-sign-in:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* =========================================
   SETTINGS — CONVERSATION DEFAULTS
========================================= */

.settings-content {
  width: 100%;
  max-width: 1100px;

  margin-inline: auto;

  place-items: center;
}

.settings-panel {
  width: min(100%, 980px);

  margin-inline: auto;

  padding: clamp(22px, 3vw, 34px);

  border: 1px solid var(--border);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 22, 40, 0.88),
      rgba(8, 12, 24, 0.82)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.22);
}

.settings-panel-heading h2 {
  margin: 8px 0 8px;

  color: var(--text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.45rem, 3vw, 2rem);
  font-weight: 500;
}

.settings-panel-heading p {
  max-width: 680px;
  margin: 0;

  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.65;
}

.settings-field-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 16px;

  margin-top: 28px;
}

.settings-field {
  display: grid;
  gap: 6px;

  padding: 18px;

  border: 1px solid
    rgba(168, 181, 218, 0.14);
  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.025);
}

.settings-field-label {
  color: var(--text);

  font-size: 0.88rem;
  font-weight: 650;
}

.settings-field-description {
  min-height: 38px;

  color: var(--muted);

  font-size: 0.72rem;
  line-height: 1.45;
}

.settings-field select {
  width: 100%;
  min-height: 44px;

  margin-top: 8px;
  padding: 0 38px 0 13px;

  border: 1px solid var(--border);
  border-radius: 11px;

  color: var(--text);
  background: #090d1a;

  font: inherit;
  font-size: 0.80rem;

  cursor: pointer;
}

.settings-field select:focus-visible {
  border-color:
    rgba(228, 184, 95, 0.65);

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(228, 184, 95, 0.10);
}

.settings-save-status {
  margin: 18px 0 0;

  color: #98a3bb;

  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .settings-field-grid {
    grid-template-columns: 1fr;
  }

  .settings-field-description {
    min-height: 0;
  }
}

/* =========================================
   SOUL DASHBOARD
========================================= */

.soul-view {
  --soul-card-bg:
    linear-gradient(
      145deg,
      rgba(20, 24, 53, 0.9),
      rgba(7, 11, 27, 0.95)
    );

  --soul-card-border:
    rgba(228, 184, 95, 0.34);

  height: 100dvh;
  overflow: hidden;
}


/* =========================================
   SOUL HEADER
========================================= */

.soul-header {
  min-height: auto;

  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  padding:
    24px
    clamp(28px, 5vw, 72px)
    22px;

  text-align: center;
}

.soul-header-copy {
  width: min(780px, 100%);
  margin-inline: auto;
}

.soul-header h1 {
  margin: 7px 0 5px;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.5rem, 5vw, 4.5rem);

  font-weight: 500;
  line-height: 1;
}

.soul-header-copy > p {
  max-width: 680px;
  margin: 0 auto;

  color: #b4bdd2;

  font-size:
    clamp(0.84rem, 1.35vw, 1.02rem);

  line-height: 1.55;
}

.soul-privacy-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 12px;

  color: #d7cdb8;

  font-size: 0.73rem;
  line-height: 1;
}

/* Prevent the privacy SVG from becoming oversized */

.soul-privacy-note svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  max-width: 15px;
  min-height: 15px;
  max-height: 15px;

  display: block;

  flex: 0 0 15px;

  fill: none !important;
  stroke: var(--gold-light) !important;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Used if the SVG was replaced by the diamond symbol */

.soul-privacy-symbol {
  width: 16px;
  height: 16px;

  display: inline-grid;
  place-items: center;

  flex: 0 0 16px;

  color: var(--gold-light);

  font-size: 1rem;
  line-height: 1;
}


/* =========================================
   SOUL CONTENT
========================================= */

.soul-content {
  width: 100%;
  min-height: 0;

  display: block;

  flex: 1;

  padding:
    22px
    clamp(24px, 4vw, 58px)
    42px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-color:
    rgba(228, 184, 95, 0.36)
    transparent;
}

.soul-dashboard {
  width: min(1440px, 100%);

  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  align-items: stretch;
  gap: 15px;

  margin-inline: auto;
}


/* =========================================
   SOUL CARDS
========================================= */

.soul-card {
  min-width: 0;

  padding:
    clamp(19px, 2vw, 27px);

  overflow: hidden;

  border:
    1px solid var(--soul-card-border);

  border-radius: 18px;

  background:
    var(--soul-card-bg);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.04),
    0 18px 44px
      rgba(0, 0, 0, 0.22),
    0 0 34px
      rgba(228, 184, 95, 0.025);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.soul-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.soul-card-header > div {
  min-width: 0;
}

.soul-card-header h2,
.soul-reflection-heading h2 {
  margin: 5px 0;

  color: #f1eee7;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.24rem, 1.8vw, 1.62rem);

  font-weight: 500;
  line-height: 1.15;
}

.soul-card-header p {
  margin: 0;

  color: #939db4;

  font-size: 0.76rem;
  line-height: 1.5;
}

.soul-card-caption {
  margin: 17px 0 0;

  color: #b9a989;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.soul-data-placeholder {
  margin: 0;

  color: #8792aa;

  font-size: 0.76rem;
  line-height: 1.55;
}


/* =========================================
   DESKTOP CARD PLACEMENT
========================================= */

.soul-heart-card {
  grid-column: span 4;
  grid-row: span 2;
}

.soul-rhythm-card {
  grid-column: span 5;
}

.soul-feeling-card {
  grid-column: span 3;
}

.soul-scripture-card {
  grid-column: span 5;
}

.soul-reflection-card {
  grid-column: span 3;
}

.soul-journey-card {
  grid-column: 1 / -1;
}


/* =========================================
   HEART THEME VISUAL
========================================= */

.soul-theme-visual {
  min-height: 300px;

  position: relative;

  display: grid;
  place-items: center;

  margin-top: 14px;

  overflow: hidden;
}

.soul-theme-orbit {
  width: min(260px, 76%);
  aspect-ratio: 1;

  position: absolute;

  border:
    1px solid rgba(158, 171, 207, 0.15);

  border-radius: 50%;

  box-shadow:
    0 0 0 34px
      rgba(158, 171, 207, 0.035),
    0 0 0 68px
      rgba(158, 171, 207, 0.022);
}

.soul-theme-orbit::before,
.soul-theme-orbit::after {
  content: "";

  width: 44%;
  height: 62%;

  position: absolute;
  top: 19%;
  left: 28%;

  border-radius:
    60%
    40%
    58%
    42%;

  background:
    linear-gradient(
      160deg,
      rgba(240, 198, 105, 0.88),
      rgba(139, 93, 208, 0.56)
    );

  filter:
    drop-shadow(
      0 0 18px
      rgba(182, 125, 231, 0.2)
    );

  opacity: 0.68;
  transform: rotate(32deg);
}

.soul-theme-orbit::after {
  background:
    linear-gradient(
      160deg,
      rgba(203, 111, 170, 0.8),
      rgba(102, 167, 236, 0.72)
    );

  transform: rotate(122deg);
}

.soul-theme-center {
  width: 112px;
  aspect-ratio: 1;

  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 12px;

  border:
    1px solid rgba(241, 204, 125, 0.55);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(51, 41, 85, 0.98),
      rgba(8, 13, 30, 0.98)
    );

  box-shadow:
    0 0 28px
      rgba(228, 184, 95, 0.18);

  text-align: center;
}

.soul-theme-center span {
  color: #909ab1;

  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soul-theme-center strong {
  margin-top: 4px;

  color: #f3ead7;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.1;
}

.soul-theme-list {
  width: 100%;

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 12px;

  text-align: center;
}

.soul-theme-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;

  color: #d9d2e8;

  font-size: 0.65rem;
  line-height: 1.2;
}

.soul-theme-item strong {
  font-weight: 500;
}

.soul-theme-item small {
  color: #eac56f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.65rem;
}


/* =========================================
   RANGE SELECTORS
========================================= */

.soul-range-select {
  width: auto;
  min-width: 118px;
  min-height: 38px;

  flex: 0 0 auto;

  padding:
    7px
    32px
    7px
    12px;

  border:
    1px solid rgba(158, 171, 207, 0.26);

  border-radius: 10px;

  color: #d8dce7;

  background-color:
    rgba(7, 11, 25, 0.84);

  font: inherit;
  font-size: 0.7rem;

  cursor: pointer;
  pointer-events: auto;
}

.soul-range-select:focus-visible {
  border-color:
    rgba(228, 184, 95, 0.72);

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(228, 184, 95, 0.11);
}


/* =========================================
   SPIRITUAL RHYTHM
========================================= */

.soul-chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;

  margin: 18px 0 10px;

  color: #aab3c7;

  font-size: 0.69rem;
}

.soul-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.soul-legend-dot {
  width: 8px;
  height: 8px;

  display: inline-block;

  border-radius: 50%;
}

.soul-legend-dot.prayer {
  background: #efc86e;
  box-shadow: 0 0 10px rgba(239, 200, 110, 0.5);
}

.soul-legend-dot.scripture {
  background: #aa75e9;
  box-shadow: 0 0 10px rgba(170, 117, 233, 0.5);
}

.soul-legend-dot.discernment {
  background: #72b8ef;
  box-shadow: 0 0 10px rgba(114, 184, 239, 0.5);
}

.soul-rhythm-chart {
  min-height: 190px;

  position: relative;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid rgba(158, 171, 207, 0.12);

  border-radius: 12px;

  background:
    linear-gradient(
      to bottom,
      rgba(38, 43, 78, 0.25),
      rgba(7, 12, 28, 0.18)
    );
}

.soul-chart-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(158, 171, 207, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(158, 171, 207, 0.08) 1px,
      transparent 1px
    );

  background-size:
    100% 25%,
    12.5% 100%;
}

.soul-rhythm-chart .soul-data-placeholder {
  max-width: 260px;

  position: relative;
  z-index: 2;

  padding: 20px;

  text-align: center;
}


/* =========================================
   FEELING SUMMARY
========================================= */

.soul-feeling-bar {
  min-height: 48px;

  display: flex;

  margin-top: 24px;

  overflow: hidden;

  border:
    1px solid rgba(228, 184, 95, 0.24);

  border-radius: 12px;
}

.soul-feeling-segment {
  width: 20%;
  min-width: 0;

  opacity: 0.78;
}

.soul-feeling-segment.hopeful {
  background: linear-gradient(90deg, #e8b855, #e9c982);
}

.soul-feeling-segment.uncertain {
  background: linear-gradient(90deg, #b67b8d, #9d708a);
}

.soul-feeling-segment.grateful {
  background: linear-gradient(90deg, #8f65c1, #7352ad);
}

.soul-feeling-segment.weary {
  background: linear-gradient(90deg, #5369ab, #496094);
}

.soul-feeling-segment.peaceful {
  background: linear-gradient(90deg, #638ac8, #83afe5);
}

.soul-feeling-list {
  margin-top: 18px;

  text-align: center;
}

.soul-insight-line {
  margin: 22px 0 0;
  padding-top: 16px;

  border-top:
    1px solid rgba(158, 171, 207, 0.14);

  color: #c3b79d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
}


/* =========================================
   SCRIPTURES
========================================= */

.soul-scripture-list {
  display: grid;
  gap: 9px;

  margin: 20px 0 0;
  padding: 0;

  list-style: none;
}

.soul-scripture-list li:not(.soul-data-placeholder) {
  display: grid;
  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 12px;

  color: #d9dde8;

  font-size: 0.8rem;
}

.soul-scripture-list li:not(.soul-data-placeholder)::before {
  content: counter(list-item);

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(228, 184, 95, 0.5);

  border-radius: 50%;

  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


/* =========================================
   GENTLE REFLECTION
========================================= */

.soul-reflection-card {
  display: flex;
  flex-direction: column;
}

.soul-reflection-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.soul-reflection-mark {
  color: var(--gold-light);

  font-size: 1.75rem;
  line-height: 1;
}

.soul-reflection-card > p {
  margin: 18px 0;

  color: #d3d7e2;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.88rem;
  line-height: 1.6;
}

.soul-reflect-button {
  width: max-content;
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  margin-top: auto;

  padding: 10px 20px;

  border:
    1px solid rgba(255, 225, 156, 0.65);

  border-radius: 10px;

  color: #231906;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  box-shadow:
    0 8px 22px
    rgba(228, 184, 95, 0.17);

  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;

  cursor: pointer;
}

.soul-reflect-button:hover {
  transform: translateY(-1px);
}

.soul-reflect-button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}


/* =========================================
   JOURNEY TIMELINE
========================================= */

.soul-journey-card {
  min-height: 205px;
}

.soul-journey-timeline {
  min-height: 105px;

  position: relative;

  display: grid;
  place-items: center;

  margin-top: 20px;

  overflow: hidden;

  border-top:
    1px solid rgba(158, 171, 207, 0.09);
}

.soul-journey-timeline::before {
  content: "";

  height: 1px;

  position: absolute;
  top: 50%;
  right: 5%;
  left: 5%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(228, 184, 95, 0.7),
      rgba(130, 104, 202, 0.65),
      rgba(228, 184, 95, 0.65),
      transparent
    );
}

.soul-journey-timeline .soul-data-placeholder {
  position: relative;
  z-index: 2;

  padding: 8px 15px;

  background:
    rgba(10, 14, 32, 0.92);
}


/* =========================================
   SOUL STATUS
========================================= */

.soul-page-status {
  width: 100%;
  margin: 0 0 18px;
  padding: 10px 14px;

  color: #c8b98f;

  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;

  opacity: 0.9;
}


/* =========================================
   SOUL TABLET
========================================= */

@media (max-width: 1180px) {
  .soul-heart-card,
  .soul-rhythm-card,
  .soul-feeling-card,
  .soul-scripture-card,
  .soul-reflection-card {
    grid-column: span 6;
    grid-row: auto;
  }

  .soul-journey-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .soul-dashboard {
    grid-template-columns: 1fr;
  }

  .soul-heart-card,
  .soul-rhythm-card,
  .soul-feeling-card,
  .soul-scripture-card,
  .soul-reflection-card,
  .soul-journey-card {
    grid-column: 1;
    grid-row: auto;
  }
}


/* =========================================
   SOUL MOBILE
========================================= */

@media (max-width: 620px) {
  .soul-view {
    min-height: 100dvh;
    height: 100dvh;
  }

  .soul-header {
    min-height: auto;

    padding:
      calc(58px + env(safe-area-inset-top))
      17px
      18px;
  }

  .soul-header h1 {
    font-size: clamp(2.35rem, 13vw, 3.35rem);
  }

  .soul-header-copy > p {
    font-size: 0.83rem;
    line-height: 1.5;
  }

  .soul-privacy-note {
    margin-top: 10px;

    font-size: 0.68rem;
  }

  .soul-content {
    padding:
      14px
      12px
      calc(34px + env(safe-area-inset-bottom));
  }

  .soul-dashboard {
    gap: 12px;
  }

  .soul-card {
    padding: 19px 17px;

    border-radius: 16px;
  }

  .soul-card-header {
    flex-direction: column;
    gap: 12px;
  }

  .soul-card-header h2,
  .soul-reflection-heading h2 {
    font-size: 1.32rem;
  }

  .soul-range-select {
    width: 100%;
    min-height: 42px;
  }

  .soul-theme-visual {
    min-height: 275px;
  }

  .soul-theme-orbit {
    width: min(235px, 74%);
  }

  .soul-theme-center {
    width: 100px;
  }

  .soul-rhythm-chart {
    min-height: 180px;
  }

  .soul-chart-legend {
    justify-content: flex-start;
  }

  .soul-feeling-bar {
    min-height: 42px;
  }

  .soul-scripture-list
  li:not(.soul-data-placeholder) {
    grid-template-columns:
      28px
      minmax(0, 1fr);
  }

  .soul-reflect-button {
    width: 100%;
  }

  .soul-journey-card {
    min-height: 190px;
  }
}

/* =========================================================
   SOUL — REFERENCE DESIGN OVERRIDES
   Keep this at the very bottom of index-v2.css
========================================================= */

.soul-view {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(80, 66, 158, 0.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(6, 9, 25, 0.08),
      rgba(4, 7, 18, 0.62)
    );
}


/* Header */

.soul-header {
  min-height: 215px;

  align-items: center;
  justify-content: center;

  padding:
    34px
    clamp(24px, 4vw, 58px)
    24px;

  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 22, 0.12),
      rgba(8, 11, 29, 0.26)
    );
}

.soul-header .feature-eyebrow {
  display: none;
}

.soul-header-copy {
  width: min(780px, 100%);

  text-align: center;
}

.soul-header h1 {
  margin: 0 0 5px;

  color: #fff0bf;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3rem, 5.4vw, 5rem);

  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;

  text-shadow:
    0 0 28px rgba(238, 198, 111, 0.12);
}

.soul-header-copy > p {
  max-width: 720px;

  color: #d3c8bb;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(0.95rem, 1.45vw, 1.22rem);

  line-height: 1.45;
}

.soul-privacy-note {
  margin-top: 10px;

  color: #ddd7ca;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.76rem;
}

.soul-privacy-note svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;

  fill: none !important;
  stroke: #f1c96f !important;
}


/* Dashboard */

.soul-content {
  width: 100%;

  display: block;

  padding:
    17px
    clamp(18px, 3.5vw, 52px)
    42px;
}

.soul-dashboard {
  width: min(1420px, 100%);

  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-template-areas:
    "heart heart heart rhythm rhythm rhythm rhythm rhythm feeling feeling feeling feeling"
    "heart heart heart scripture scripture scripture scripture scripture reflection reflection reflection reflection"
    "journey journey journey journey journey journey journey journey journey journey journey journey";

  align-items: stretch;
  gap: 12px;

  margin-inline: auto;
}

.soul-heart-card {
  grid-area: heart;
}

.soul-rhythm-card {
  grid-area: rhythm;
}

.soul-feeling-card {
  grid-area: feeling;
}

.soul-scripture-card {
  grid-area: scripture;
}

.soul-reflection-card {
  grid-area: reflection;
}

.soul-journey-card {
  grid-area: journey;
}


/* Cards */

.soul-card {
  padding:
    clamp(18px, 1.7vw, 25px);

  border:
    1px solid rgba(239, 199, 115, 0.54);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(26, 28, 66, 0.8),
      rgba(10, 14, 38, 0.9)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 177, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(229, 184, 92, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.2);
}

.soul-card .feature-eyebrow {
  display: none;
}

.soul-card-header h2,
.soul-reflection-heading h2 {
  margin: 0 0 4px;

  color: #f5f0e8;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.34rem, 1.8vw, 1.75rem);

  font-weight: 400;
  letter-spacing: -0.015em;
}

.soul-card-header p {
  color: #aea8b5;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.77rem;
}

.soul-card-caption {
  color: #c4ad8b;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.79rem;
}


/* Heart card */

.soul-heart-card {
  min-height: 486px;
}

.soul-theme-visual {
  min-height: 346px;

  margin-top: 6px;
}

.soul-theme-orbit {
  width: min(275px, 86%);
  aspect-ratio: 1;

  border:
    1px solid rgba(153, 139, 204, 0.12);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse 27% 37% at 50% 25%,
      rgba(239, 195, 100, 0.93) 0%,
      rgba(224, 170, 77, 0.72) 58%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 27% 37% at 73% 43%,
      rgba(238, 168, 150, 0.88) 0%,
      rgba(184, 111, 158, 0.66) 58%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 27% 37% at 65% 70%,
      rgba(103, 180, 238, 0.88) 0%,
      rgba(75, 123, 199, 0.66) 58%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 27% 37% at 35% 70%,
      rgba(134, 114, 232, 0.9) 0%,
      rgba(91, 72, 183, 0.68) 58%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 27% 37% at 27% 43%,
      rgba(218, 119, 178, 0.88) 0%,
      rgba(156, 81, 159, 0.68) 58%,
      transparent 62%
    );

  box-shadow:
    0 0 0 33px rgba(124, 112, 190, 0.026),
    0 0 0 65px rgba(124, 112, 190, 0.018);
}

/* The five petals now come from the background */

.soul-theme-orbit::before,
.soul-theme-orbit::after {
  display: none;
}

.soul-theme-center {
  width: 108px;

  border-color:
    rgba(240, 204, 132, 0.7);

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(54, 43, 84, 0.98),
      rgba(11, 14, 34, 0.99)
    );

  box-shadow:
    0 0 28px rgba(229, 187, 98, 0.18);
}

.soul-theme-center strong {
  color: #f5efe4;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;
}


/* Rhythm */

.soul-rhythm-card {
  min-height: 292px;
}

.soul-chart-legend {
  margin: 14px 0 9px;
}

.soul-rhythm-chart {
  min-height: 155px;

  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      rgba(33, 39, 82, 0.28),
      rgba(8, 12, 32, 0.12)
    );
}


/* Feelings */

.soul-feeling-card {
  min-height: 292px;
}

.soul-feeling-bar {
  min-height: 57px;

  margin-top: 21px;

  border-radius: 12px;

  box-shadow:
    0 0 20px rgba(112, 118, 218, 0.08);
}

.soul-insight-line {
  color: #d4b996;

  font-size: 0.86rem;
}


/* Scripture and reflection */

.soul-scripture-card,
.soul-reflection-card {
  min-height: 183px;
}

.soul-scripture-list {
  margin-top: 12px;
}

.soul-reflection-heading {
  align-items: center;
}

.soul-reflection-mark {
  color: #efc671;

  font-size: 2.1rem;
}

.soul-reflection-card > p {
  margin: 13px 0;

  color: #e1dcd3;

  font-size: 0.82rem;
}

.soul-reflect-button {
  min-height: 38px;

  padding: 8px 20px;

  border-radius: 9px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


/* Journey */

.soul-journey-card {
  min-height: 175px;
}

.soul-journey-timeline {
  min-height: 85px;

  margin-top: 10px;
}

.soul-journey-timeline::before {
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent 1%,
      rgba(236, 193, 102, 0.8) 18%,
      rgba(237, 198, 110, 0.86) 38%,
      rgba(142, 103, 213, 0.75) 58%,
      rgba(237, 198, 110, 0.78) 78%,
      transparent 99%
    );

  box-shadow:
    0 0 12px rgba(230, 188, 98, 0.16);
}


/* Status */

.soul-page-status {
  color: #a79677;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* =========================================================
   SOUL RESPONSIVE LAYOUT
========================================================= */

@media (max-width: 1180px) {
  .soul-dashboard {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "heart rhythm"
      "heart feeling"
      "scripture reflection"
      "journey journey";
  }

  .soul-heart-card,
  .soul-rhythm-card,
  .soul-feeling-card,
  .soul-scripture-card,
  .soul-reflection-card,
  .soul-journey-card {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .soul-header {
    min-height: auto;

    padding:
      calc(62px + env(safe-area-inset-top))
      18px
      20px;
  }

  .soul-header h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .soul-dashboard {
    grid-template-columns: 1fr;

    grid-template-areas:
      "heart"
      "rhythm"
      "feeling"
      "scripture"
      "reflection"
      "journey";
  }

  .soul-content {
    padding:
      13px
      12px
      calc(34px + env(safe-area-inset-bottom));
  }

  .soul-card {
    padding: 19px 17px;

    border-radius: 15px;
  }

  .soul-heart-card,
  .soul-rhythm-card,
  .soul-feeling-card,
  .soul-scripture-card,
  .soul-reflection-card,
  .soul-journey-card {
    min-height: auto;
  }

  .soul-theme-visual {
    min-height: 315px;
  }

  .soul-card-header {
    flex-direction: column;
    gap: 12px;
  }

  .soul-range-select {
    width: 100%;
  }

  .soul-reflect-button {
    width: 100%;
  }
}

/* =========================================================
   SOUL — PERFECT CIRCLES AND LIVING GLOW
   Keep at the very bottom of index-v2.css
========================================================= */


/* Ambient light behind the Soul dashboard */

.soul-view::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background-image:
    url("/images-v2/soul/soul-constellation-overlay.svg"),

    radial-gradient(
      circle at 15% 20%,
      rgba(244, 205, 119, 0.82) 0 1px,
      transparent 3px
    ),

    radial-gradient(
      circle at 83% 14%,
      rgba(244, 205, 119, 0.74) 0 1px,
      transparent 3px
    ),

    radial-gradient(
      circle at 91% 58%,
      rgba(155, 135, 238, 0.68) 0 1px,
      transparent 3px
    ),

    radial-gradient(
      circle at 8% 70%,
      rgba(244, 205, 119, 0.58) 0 1px,
      transparent 3px
    ),

    radial-gradient(
      ellipse at 50% 25%,
      rgba(89, 70, 178, 0.18),
      transparent 54%
    );

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    center center,
    center,
    center,
    center,
    center,
    center;

  background-size:
    cover,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;

  opacity: 0.78;

  filter:
    drop-shadow(
      0 0 5px
      rgba(237, 198, 112, 0.08)
    );

  animation:
    soul-ambient-breathe
    8s
    ease-in-out
    infinite;
}

@media (max-width: 620px) {
  .soul-view::before {
    background-position:
      center top,
      center,
      center,
      center,
      center,
      center;

    background-size:
      auto 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%;

    opacity: 0.72;
  }
}

/* Keep page content above the ambient glow */

.soul-header,
.soul-content {
  position: relative;
  z-index: 1;
}


/* Enhanced illuminated cards */

.soul-card {
  border-color:
    rgba(239, 200, 117, 0.48);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.055),
    inset 0 0 28px
      rgba(105, 88, 190, 0.035),
    0 0 0 1px
      rgba(244, 210, 139, 0.025),
    0 0 24px
      rgba(236, 192, 98, 0.065),
    0 20px 48px
      rgba(0, 0, 0, 0.25);

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.soul-card:hover {
  border-color:
    rgba(247, 211, 135, 0.68);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.07),
    inset 0 0 32px
      rgba(105, 88, 190, 0.05),
    0 0 29px
      rgba(236, 192, 98, 0.1),
    0 22px 50px
      rgba(0, 0, 0, 0.28);
}


/* =========================================================
   FIVE-PETAL SOUL FLOWER
========================================================= */

.soul-theme-visual {
  isolation: isolate;
}


/* Concentric spiritual-growth rings */

.soul-theme-visual::before,
.soul-theme-visual::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  aspect-ratio: 1 / 1;

  pointer-events: none;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}

.soul-theme-visual::before {
  width: min(306px, 90%);

  border:
    1px solid rgba(147, 137, 204, 0.17);

  box-shadow:
    0 0 30px
    rgba(105, 87, 195, 0.05);
}

.soul-theme-visual::after {
  width: min(248px, 74%);

  border:
    1px solid rgba(147, 137, 204, 0.12);
}


/* Flower container */

.soul-theme-orbit {
  width: min(276px, 82%);
  height: auto;
  aspect-ratio: 1 / 1;

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;

  border: 0;
  border-radius: 50%;

  background: transparent;

  filter:
    drop-shadow(
      0 0 10px
      rgba(235, 194, 105, 0.15)
    )
    drop-shadow(
      0 0 21px
      rgba(120, 98, 224, 0.14)
    );

  transform:
    translate(-50%, -50%);

  animation:
    soul-flower-breathe
    6s
    ease-in-out
    infinite;
}


/* Remove the old generated shapes */

.soul-theme-orbit::before,
.soul-theme-orbit::after {
  display: none !important;
}


/* Shared organic petal shape */

.soul-petal {
  --petal-angle: 0deg;
  --petal-scale: 1;
  --petal-light: rgba(255, 255, 255, 0.7);
  --petal-main: rgba(210, 150, 220, 0.95);
  --petal-deep: rgba(100, 65, 175, 0.82);
  --petal-glow: rgba(170, 110, 225, 0.32);

   width: 45%;
  height: 58%;

  position: absolute;
    top: -4%;
  left: 27.5%;

  display: block;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);

   border-radius:
    52% 48% 44% 56%
    /
    66% 64% 36% 34%;

  clip-path: polygon(
    50% 0%,
    64% 3%,
    79% 12%,
    91% 28%,
    98% 46%,
    94% 63%,
    82% 78%,
    65% 90%,
    50% 100%,
    35% 90%,
    18% 78%,
    6% 63%,
    2% 46%,
    9% 28%,
    21% 12%,
    36% 3%
  );

  background:
    radial-gradient(
      ellipse at 48% 18%,
      var(--petal-light) 0%,
      rgba(255, 255, 255, 0.18) 24%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 52% 78%,
      rgba(255, 255, 255, 0.18),
      transparent 48%
    ),
    linear-gradient(
      165deg,
      var(--petal-main) 0%,
      var(--petal-deep) 82%
    );

  box-shadow:
    inset 8px 4px 18px rgba(255, 255, 255, 0.14),
    inset -8px -12px 22px rgba(12, 9, 42, 0.2),
    0 0 15px var(--petal-glow),
    0 0 34px color-mix(
      in srgb,
      var(--petal-glow) 55%,
      transparent
    );

  opacity: 0.9;

  transform:
    rotate(var(--petal-angle))
    scaleY(var(--petal-scale));

  transform-origin: 50% 94%;

  transition:
    transform 500ms ease,
    opacity 300ms ease,
    filter 300ms ease,
    box-shadow 300ms ease;

  isolation: isolate;
}


/* Fine illuminated veins inside each petal */

.soul-petal::before {
  content: "";

  position: absolute;
  inset: 7% 8% 5%;

  border-radius: inherit;

  background:
    repeating-conic-gradient(
      from -28deg at 50% 100%,
      transparent 0deg 8deg,
      rgba(255, 255, 255, 0.12) 9deg 10deg,
      transparent 11deg 18deg
    ),
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 16px,
      rgba(255, 255, 255, 0.08) 17px,
      transparent 19px 28px
    );

  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}


/* Soft inner bloom */

.soul-petal::after {
  content: "";

  width: 58%;
  height: 62%;

  position: absolute;
  right: 5%;
  bottom: 2%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 70%
    );

  filter: blur(8px);
  opacity: 0.72;
  pointer-events: none;
}


/* Purpose — top gold petal */

.soul-petal-purpose {
  --petal-angle: 0deg;
  --petal-light: rgba(255, 247, 197, 0.9);
  --petal-main: rgba(255, 218, 103, 0.98);
  --petal-deep: rgba(196, 133, 33, 0.84);
  --petal-glow: rgba(255, 201, 75, 0.42);
}


/* Faith — upper-right coral petal */

.soul-petal-faith {
  --petal-angle: 72deg;
  --petal-light: rgba(255, 233, 222, 0.86);
  --petal-main: rgba(244, 159, 166, 0.97);
  --petal-deep: rgba(170, 76, 138, 0.84);
  --petal-glow: rgba(238, 124, 169, 0.4);
}


/* Work — lower-right blue petal */

.soul-petal-work {
  --petal-angle: 144deg;
  --petal-light: rgba(221, 246, 255, 0.88);
  --petal-main: rgba(96, 190, 250, 0.98);
  --petal-deep: rgba(55, 102, 199, 0.86);
  --petal-glow: rgba(76, 170, 245, 0.42);
}


/* Healing — lower-left violet petal */

.soul-petal-healing {
  --petal-angle: 216deg;
  --petal-light: rgba(231, 220, 255, 0.84);
  --petal-main: rgba(144, 112, 238, 0.98);
  --petal-deep: rgba(77, 48, 173, 0.87);
  --petal-glow: rgba(130, 92, 236, 0.42);
}


/* Family — upper-left magenta petal */

.soul-petal-family {
  --petal-angle: 288deg;
  --petal-light: rgba(255, 222, 248, 0.86);
  --petal-main: rgba(220, 112, 199, 0.98);
  --petal-deep: rgba(142, 54, 154, 0.86);
  --petal-glow: rgba(211, 84, 193, 0.42);
}

/* Soft interaction */

.soul-theme-visual:hover
.soul-petal {
  opacity: 0.98;

  filter:
    saturate(1.08)
    brightness(1.08);

  box-shadow:
    inset 8px 4px 18px rgba(255, 255, 255, 0.18),
    inset -8px -12px 22px rgba(12, 9, 42, 0.18),
    0 0 20px var(--petal-glow),
    0 0 44px var(--petal-glow);
}


/* Fluid center circle */

.soul-theme-center {
  width:
    clamp(
      78px,
      32%,
      112px
    );

  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;

  position: relative;
  z-index: 3;

  box-sizing: border-box;
  flex: 0 1 auto;

  padding:
    clamp(
      8px,
      3%,
      14px
    );

  overflow: hidden;

  border:
    1px solid
    rgba(249, 215, 141, 0.72);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 28%,
      rgba(62, 49, 96, 0.99),
      rgba(17, 17, 50, 0.99) 68%,
      rgba(8, 11, 29, 1)
    );

  box-shadow:
    inset 0 1px 1px
      rgba(255, 255, 255, 0.08),
    inset 0 -10px 24px
      rgba(5, 8, 25, 0.26),
    0 0 18px
      rgba(242, 198, 104, 0.18),
    0 0 38px
      rgba(110, 84, 211, 0.14);
}


/* Center highlight */

.soul-theme-center::before {
  content: "";

  width: 66%;
  height: 42%;

  position: absolute;
  top: 7%;
  left: 17%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 255, 0.07),
      transparent 72%
    );

  pointer-events: none;
}

.soul-theme-center span,
.soul-theme-center strong {
  position: relative;
  z-index: 1;
}

.soul-theme-center span {
  max-width: 90%;

  overflow-wrap: normal;
  word-break: normal;

  text-align: center;
}

.soul-theme-center strong {
  max-width: none;

  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;

  text-align: center;
}

.soul-theme-center span {
  font-size:
    clamp(
      0.45rem,
      1.7vw,
      0.61rem
    );

  line-height: 1.15;
}

.soul-theme-center strong {
  font-size:
    clamp(
      0.56rem,
      2.25vw,
      0.88rem
    );

  line-height: 1;
  letter-spacing: -0.015em;
}
/* =========================================================
   GRAPH GLOW — READY FOR JAVASCRIPT SVG
========================================================= */

.soul-rhythm-chart svg {
  width: 100%;
  height: 100%;

  position: relative;
  z-index: 2;

  overflow: visible;
}

.soul-chart-line {
  fill: none;

  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}

.soul-chart-line.prayer {
  stroke: #f2c86f;

  filter:
    drop-shadow(
      0 0 5px
      rgba(242, 200, 111, 0.7)
    );
}

.soul-chart-line.scripture {
  stroke: #af79ed;

  filter:
    drop-shadow(
      0 0 5px
      rgba(175, 121, 237, 0.65)
    );
}

.soul-chart-line.discernment {
  stroke: #77bff4;

  filter:
    drop-shadow(
      0 0 5px
      rgba(119, 191, 244, 0.65)
    );
}

.soul-chart-point {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1;

  filter:
    drop-shadow(
      0 0 4px
      currentColor
    );
}


/* =========================================================
   FEELING BAR — ILLUMINATED COLOR SYSTEM
========================================================= */

.soul-feeling-bar {
  min-height: 58px;

  position: relative;
  isolation: isolate;

  overflow: hidden;

  border:
    1px solid rgba(246, 207, 126, 0.48);

  border-radius: 14px;

  background:
    rgba(7, 10, 28, 0.78);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.18),
    inset 0 -8px 16px
      rgba(5, 7, 24, 0.18),
    0 0 0 1px
      rgba(255, 229, 167, 0.025),
    0 0 14px
      rgba(238, 194, 103, 0.12),
    0 0 28px
      rgba(108, 91, 220, 0.12),
    0 14px 30px
      rgba(0, 0, 0, 0.18);
}


/* Shared segment styling */

.soul-feeling-segment {
  position: relative;

  opacity: 1;

  border-right:
    1px solid rgba(255, 255, 255, 0.07);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.18),
    inset 0 -12px 18px
      rgba(4, 7, 23, 0.15);

  filter:
    saturate(1.15)
    brightness(1.05);

  transition:
    filter 200ms ease,
    transform 200ms ease;
}

.soul-feeling-segment:last-child {
  border-right: 0;
}


/* Soft light inside every color */

.soul-feeling-segment::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 18%,
      rgba(255, 255, 255, 0.23),
      transparent 62%
    );
}


/* Hopeful — luminous gold */

.soul-feeling-segment.hopeful {
  background:
    linear-gradient(
      135deg,
      #f7d477 0%,
      #e8b950 47%,
      #bd873b 100%
    );
}


/* Uncertain — reflective rose */

.soul-feeling-segment.uncertain {
  background:
    linear-gradient(
      135deg,
      #d99aaf 0%,
      #b87091 50%,
      #8c557a 100%
    );
}


/* Grateful — radiant violet */

.soul-feeling-segment.grateful {
  background:
    linear-gradient(
      135deg,
      #bd8bf2 0%,
      #8d60ce 50%,
      #6842a6 100%
    );
}


/* Weary — deep indigo */

.soul-feeling-segment.weary {
  background:
    linear-gradient(
      135deg,
      #7189d0 0%,
      #5368aa 50%,
      #394b83 100%
    );
}


/* Peaceful — celestial blue */

.soul-feeling-segment.peaceful {
  background:
    linear-gradient(
      135deg,
      #9dcbf6 0%,
      #6fa5df 50%,
      #4c78b7 100%
    );
}


/* Slow reflected-light sweep */

.soul-feeling-bar::after {
  content: "";

  width: 36%;
  height: 180%;

  position: absolute;
  top: -40%;
  left: -48%;
  z-index: 4;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  filter: blur(3px);

  transform:
    skewX(-18deg);

  animation:
    soul-feeling-shimmer
    8s
    ease-in-out
    infinite;
}


/* Hover or touch emphasis */

.soul-feeling-segment:hover {
  z-index: 3;

  filter:
    saturate(1.28)
    brightness(1.16);

  transform: scaleY(1.07);
}


@keyframes soul-feeling-shimmer {
  0%,
  58% {
    left: -48%;
    opacity: 0;
  }

  66% {
    opacity: 0.75;
  }

  84% {
    left: 112%;
    opacity: 0.2;
  }

  100% {
    left: 112%;
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .soul-feeling-bar::after {
    display: none;
    animation: none;
  }
}


/* Journey line glow */

.soul-journey-timeline::before {
  box-shadow:
    0 0 7px
      rgba(242, 198, 105, 0.38),
    0 0 17px
      rgba(129, 96, 216, 0.2);
}


/* =========================================================
   GENTLE ANIMATION
========================================================= */

@keyframes soul-flower-breathe {
  0%,
  100% {
    filter:
      drop-shadow(
        0 0 9px
        rgba(235, 194, 105, 0.14)
      )
      drop-shadow(
        0 0 17px
        rgba(120, 98, 224, 0.12)
      );

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50% {
    filter:
      drop-shadow(
        0 0 14px
        rgba(235, 194, 105, 0.24)
      )
      drop-shadow(
        0 0 25px
        rgba(120, 98, 224, 0.2)
      );

    transform:
      translate(-50%, -50%)
      scale(1.018);
  }
}

@keyframes soul-ambient-breathe {
  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 0.9;
  }
}


/* Preserve accessibility */

@media (prefers-reduced-motion: reduce) {
  .soul-view::before,
  .soul-theme-orbit {
    animation: none;
  }

  .soul-card,
  .soul-feeling-segment {
    transition: none;
  }
}


/* Mobile sizing */

@media (max-width: 620px) {
  .soul-theme-visual::before {
    width: min(292px, 91%);
  }

  .soul-theme-visual::after {
    width: min(238px, 75%);
  }

  .soul-theme-orbit {
    width: min(264px, 83%);
  }

  .soul-theme-center {
  width:
    clamp(
      76px,
      32%,
      108px
    );

  height: auto;
  min-width: 0;
  min-height: 0;

  flex: 0 1 auto;
}
}

.soul-feeling-list.has-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  column-gap: 24px;
  row-gap: 10px;

  margin-top: 17px;

  text-align: center;
}

.soul-feeling-item {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: none;

  color: #cbc6d2;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.25;
}

.soul-feeling-item span {
  color: #cbc6d2;

  font: inherit;
}

.soul-feeling-item strong {
  color: #f5efe4;

  font: inherit;
  font-weight: 400;
}

.soul-feeling-item.hopeful strong {
  color: #f2c86f;
}

.soul-feeling-item.uncertain strong {
  color: #d99aaf;
}

.soul-feeling-item.grateful strong {
  color: #bd8bf2;
}

.soul-feeling-item.weary strong {
  color: #8398d7;
}

.soul-feeling-item.peaceful strong {
  color: #9dcbf6;
}

.soul-feeling-segment[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .soul-feeling-list.has-data {
    column-gap: 18px;
    row-gap: 8px;
  }

  .soul-feeling-item {
    font-size: 0.82rem;
  }
}

.soul-scripture-reference {
  color: #eee8df;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.9rem;
  font-weight: 400;
}

.soul-scripture-theme {
  color: #d6b77e;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;

  white-space: nowrap;
}

@media (max-width: 620px) {
  .soul-scripture-list
  li:not(.soul-data-placeholder) {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      auto;

    gap: 9px;
  }

  .soul-scripture-reference {
    font-size: 0.84rem;
  }

  .soul-scripture-theme {
    font-size: 0.75rem;
  }
}

.soul-reflect-button:disabled {
  cursor: not-allowed;

  opacity: 0.46;

  filter: grayscale(0.35);

  box-shadow: none;
}

.soul-reflect-button:not(:disabled) {
  cursor: pointer;
}

.soul-journey-timeline.has-data {
  min-height: 125px;

  display: grid;
  grid-template-columns:
    repeat(
      var(--journey-columns, 4),
      minmax(0, 1fr)
    );

  align-items: start;
  gap: 14px;

  padding: 18px 8px 4px;

  overflow: visible;
}

.soul-journey-timeline.has-data::before {
  top: 36px;
}

.soul-journey-milestone {
  min-width: 0;

  position: relative;
  z-index: 2;

  display: grid;
  justify-items: center;
  gap: 4px;

  text-align: center;
}

.soul-journey-marker {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 4px;

  border:
    1px solid rgba(
      239,
      198,
      113,
      0.68
    );

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(42, 34, 73, 0.98),
      rgba(9, 13, 34, 0.98)
    );

  color: #f1c970;

  font-size: 1.15rem;

  box-shadow:
    0 0 14px
      rgba(237, 193, 101, 0.2);
}

.soul-journey-milestone strong {
  color: #eee8df;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.3;
}

.soul-journey-milestone time {
  color: #b5a98f;

  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soul-journey-detail {
  color: #898fa9;

  font-size: 0.65rem;
}

@media (max-width: 620px) {
  .soul-journey-timeline.has-data {
    min-height: 0;

    grid-template-columns: 1fr;
    gap: 15px;

    padding:
      10px
      0
      4px;
  }

  .soul-journey-timeline.has-data::before {
    width: 1px;
    height: auto;

    top: 14px;
    right: auto;
    bottom: 14px;
    left: 19px;
  }

  .soul-journey-milestone {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    justify-items: start;
    column-gap: 12px;
    row-gap: 2px;

    text-align: left;
  }

  .soul-journey-marker {
    grid-row: 1 / span 3;

    margin: 0;
  }

  .soul-journey-milestone strong,
  .soul-journey-milestone time,
  .soul-journey-detail {
    grid-column: 2;
  }
}

/* =========================================================
   SOUL VISUAL ROLLOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

  /* -------------------------
     Flower petals
  ------------------------- */

  .soul-theme-orbit {
    cursor: default;
  }

  .soul-theme-orbit:hover
  .soul-petal {
    opacity: 0.62;

    filter:
      saturate(0.86)
      brightness(0.92);
  }

  .soul-theme-orbit:hover
  .soul-petal:hover {
    z-index: 4;

    opacity: 1;

    filter:
      saturate(1.25)
      brightness(1.16)
      drop-shadow(
        0 0 13px
        rgba(248, 212, 139, 0.38)
      );

    transform:
      rotate(
        var(--petal-angle)
      )
      scaleY(
        var(--petal-scale)
      )
      scale(1.065);
  }

  .soul-theme-center {
    transition:
      transform 260ms ease,
      border-color 260ms ease,
      box-shadow 260ms ease,
      filter 260ms ease;
  }

  .soul-theme-orbit:hover
  .soul-theme-center {
    border-color:
      rgba(255, 224, 158, 0.92);

    box-shadow:
      inset 0 1px 1px
        rgba(255, 255, 255, 0.12),
      inset 0 -10px 24px
        rgba(5, 8, 25, 0.22),
      0 0 24px
        rgba(242, 198, 104, 0.34),
      0 0 50px
        rgba(110, 84, 211, 0.24);

    filter: brightness(1.06);

    transform: scale(1.025);
  }


  /* -------------------------
     Spiritual rhythm graph
  ------------------------- */

  .soul-rhythm-chart {
    cursor: crosshair;

    transition:
      border-color 240ms ease,
      box-shadow 240ms ease,
      background 240ms ease;
  }

  .soul-rhythm-chart:hover {
    background:
      linear-gradient(
        180deg,
        rgba(42, 47, 96, 0.38),
        rgba(8, 12, 32, 0.18)
      );

    box-shadow:
      inset 0 0 0 1px
        rgba(166, 173, 219, 0.1),
      0 0 24px
        rgba(112, 94, 205, 0.13);
  }

  .soul-chart-line {
    transition:
      opacity 220ms ease,
      stroke-width 220ms ease,
      filter 220ms ease;
  }

  .soul-rhythm-chart:hover
  .soul-chart-line {
    stroke-width: 3;
    opacity: 0.82;
  }

  .soul-rhythm-chart
  .soul-chart-line:hover {
    stroke-width: 4;
    opacity: 1;

    filter:
      drop-shadow(
        0 0 5px
        currentColor
      )
      drop-shadow(
        0 0 11px
        currentColor
      );
  }

  .soul-chart-point {
    transform-box: fill-box;
    transform-origin: center;

    transition:
      transform 180ms ease,
      opacity 180ms ease,
      filter 180ms ease;
  }

  .soul-rhythm-chart:hover
  .soul-chart-point {
    transform: scale(1.3);
  }

  .soul-rhythm-chart
  .soul-chart-point:hover {
    opacity: 1;

    filter:
      drop-shadow(
        0 0 7px
        currentColor
      );

    transform: scale(2);
  }


  /* -------------------------
     Feeling color bar
  ------------------------- */

  .soul-feeling-segment {
    cursor: default;

    transform-origin: center;

    transition:
      opacity 220ms ease,
      filter 220ms ease,
      transform 220ms ease,
      box-shadow 220ms ease;
  }

  .soul-feeling-bar:hover
  .soul-feeling-segment:not([hidden]) {
    opacity: 0.58 !important;

    filter:
      saturate(0.86)
      brightness(0.9);
  }

  .soul-feeling-bar:hover
  .soul-feeling-segment:not([hidden]):hover {
    z-index: 4;

    opacity: 1 !important;

    filter:
      saturate(1.34)
      brightness(1.18);

    box-shadow:
      inset 0 1px 0
        rgba(255, 255, 255, 0.28),
      inset 0 -12px 18px
        rgba(4, 7, 23, 0.1),
      0 0 18px
        rgba(230, 211, 255, 0.28);

    transform: scaleY(1.09);
  }

  .soul-feeling-item {
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      filter 200ms ease;
  }

  .soul-feeling-list:hover
  .soul-feeling-item {
    opacity: 0.58;
  }

  .soul-feeling-list
  .soul-feeling-item:hover {
    opacity: 1;

    filter: brightness(1.18);

    transform: translateY(-2px);
  }
}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  .soul-petal,
  .soul-theme-center,
  .soul-rhythm-chart,
  .soul-chart-line,
  .soul-chart-point,
  .soul-feeling-segment,
  .soul-feeling-item {
    transition: none !important;
  }
}

.soul-visual-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(260px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 10px 15px;

  pointer-events: none;

  border: 1px solid rgba(235, 195, 115, 0.55);
  border-radius: 12px;

  background: linear-gradient(
    145deg,
    rgba(30, 28, 59, 0.98),
    rgba(10, 13, 31, 0.98)
  );

  color: #f5e8c9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.015em;
  text-align: center;

  box-shadow:
    inset 0 1px 0 rgba(255, 237, 193, 0.08),
    0 0 18px rgba(232, 190, 103, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.35);

  opacity: 1;
}
.soul-visual-tooltip[hidden] {
  display: none;
}

[data-soul-tooltip] {
  cursor: help;
}

@media (hover: none) {
  .soul-visual-tooltip {
    display: none !important;
  }

  [data-soul-tooltip] {
    cursor: default;
  }
}

/* =========================================================
   SOUL — FINAL MOBILE QA FIXES
========================================================= */

/* Correct Scripture ranking numbers */

.soul-scripture-list {
  counter-reset: soul-scripture-rank;
}

.soul-scripture-list
li:not(.soul-data-placeholder)::before {
  counter-increment:
    soul-scripture-rank;

  content:
    counter(soul-scripture-rank);
}


/* Let the complete Soul page scroll on mobile */

@media (max-width: 620px) {
  .soul-view {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .soul-header {
    flex: 0 0 auto;

    padding:
      calc(
        62px +
        env(safe-area-inset-top)
      )
      20px
      24px;
  }

  .soul-content {
    min-height: auto;

    flex: 0 0 auto;

    padding:
      14px
      12px
      calc(
        44px +
        env(safe-area-inset-bottom)
      );

    overflow: visible;
  }

  .soul-page-status {
    margin:
      0
      auto
      18px;

    padding:
      8px
      12px;

    font-size: 0.62rem;
    line-height: 1.45;
    letter-spacing: 0.09em;
  }

  .soul-dashboard {
    width: 100%;
    gap: 12px;
  }
}

button.sidebar-sign-out {
  appearance: none;
  -webkit-appearance: none;

  font: inherit;

  cursor: pointer;
}

/* =========================================================
   RECENT SHOW/HIDE — SHORT LAPTOP SCREENS
========================================================= */

@media (min-width: 821px) and (max-height: 900px) {

  .app-sidebar {
    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    -webkit-overflow-scrolling: touch;
  }

  .recent-toggle {
    min-height: 32px;
    cursor: pointer;
  }

  .recent-toggle-chevron {
    display: inline-flex;
    margin-right: 2px;
  }

  .recent-toggle:hover
  .recent-toggle-chevron {
    border-color:
      rgba(245, 207, 126, 0.72);

    background:
      rgba(228, 184, 95, 0.15);
  }

  .recent-block {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;

    overflow: hidden;
  }

  .recent-block:not(.is-expanded)
  .recent-conversations {
    display: none;
  }

  .recent-block.is-expanded {
    flex:
      0 0
      clamp(280px, 46dvh, 460px);

    min-height: 280px;
    max-height:
      clamp(280px, 46dvh, 460px);
  }

  /* Change Show to Hide on short laptops */

  .recent-block.is-expanded
  .recent-toggle-chevron::before {
    content: "Hide";
  }

  .recent-block.is-expanded
  .recent-toggle-chevron::after {
    transform:
      translateY(2px)
      rotate(225deg);
  }

  /* Refined laptop conversation spacing */

  .recent-block.is-expanded
  .recent-conversations {
    height: auto;
    max-height:
      calc(100% - 48px);

    display: grid;
    gap: 8px;

    margin-top: 10px;
    padding:
      2px
      5px
      12px
      0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    -webkit-overflow-scrolling: touch;
  }

  .recent-conversation-item {
    min-height: 56px;
  }

  .recent-conversation {
    min-height: 56px;

    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* =========================================
   V3 PUBLIC DEVOTION CARD
========================================= */

.public-devotion-message {
  width: 100%;
  justify-content: flex-start;
}

.public-devotion-card {
  width: min(100%, 760px);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(228, 184, 95, .28);
  border-radius: 20px;
  background:
    linear-gradient(
      160deg,
      rgba(21, 25, 43, .96),
      rgba(8, 12, 24, .94)
    );
  box-shadow: 0 18px 55px rgba(0, 0, 0, .25);
  color: var(--text);
  overflow-wrap: anywhere;
}

.public-devotion-eyebrow {
  color: var(--gold);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.public-devotion-search {
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.public-devotion-title {
  margin: 0 0 24px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.25;
}

.public-devotion-section {
  padding: 20px 0;
  border-top: 1px solid rgba(168, 181, 218, .14);
}

.public-devotion-section h3 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-devotion-section p {
  margin: 0;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.85;
  white-space: pre-wrap;
}

.public-devotion-section:first-of-type p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff0d3;
}

.public-devotion-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(228, 184, 95, .25);
}

.public-devotion-footer span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.public-devotion-next {
  max-width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(228, 184, 95, .55);
  border-radius: 12px;
  background: rgba(228, 184, 95, .09);
  color: var(--gold-light);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background .2s, border-color .2s;
}

.public-devotion-next:hover {
  background: rgba(228, 184, 95, .18);
  border-color: var(--gold);
}

.public-devotion-next:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .public-devotion-card {
    padding: 20px 17px;
    border-radius: 15px;
  }

  .public-devotion-section {
    padding: 17px 0;
  }

  .public-devotion-section p {
    font-size: .91rem;
    line-height: 1.75;
  }

  .public-devotion-next {
    width: 100%;
  }
}


/* V3 — Explore Devotion Topics */

.public-devotion-explore {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(228, 184, 95, .22);
}

.public-devotion-explore h3 {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.public-devotion-explore p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.public-devotion-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.public-devotion-topic {
  padding: 9px 14px;
  border: 1px solid rgba(228, 184, 95, .32);
  border-radius: 999px;
  background: rgba(228, 184, 95, .055);
  color: var(--gold-light);
  font-size: .8rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.public-devotion-topic:hover {
  background: rgba(228, 184, 95, .15);
  border-color: var(--gold);
}

.public-devotion-topic:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .public-devotion-topic {
    font-size: .76rem;
    padding: 9px 12px;
  }
}


/* V3 — Private Guest Devotion History */

.public-devotion-history {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(228, 184, 95, .22);
}

.public-devotion-history h3 {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.public-devotion-history p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.public-devotion-history-clear {
  margin-top: 16px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.public-devotion-history-clear:hover {
  color: var(--gold-light);
}


/* =========================================
   V3 — GUEST WELCOME BACK
========================================= */

.guest-welcome-history {
  width: min(100%, 600px);
  margin: 28px auto 0;
  padding: 22px 24px;

  border: 1px solid rgba(228, 184, 95, .24);
  border-radius: 18px;

  background: rgba(9, 13, 26, .80);
  backdrop-filter: blur(14px);

  box-shadow: 0 14px 40px rgba(0, 0, 0, .20);

  text-align: center;
}

.guest-welcome-history h2 {
  margin: 0 0 8px;

  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 400;
}

.guest-welcome-history > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.guest-welcome-topics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.guest-welcome-topic {
  padding: 9px 15px;

  border: 1px solid rgba(228, 184, 95, .38);
  border-radius: 999px;

  background: rgba(228, 184, 95, .075);
  color: var(--gold-light);

  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;

  transition: background .2s, border-color .2s;
}

.guest-welcome-topic:hover {
  background: rgba(228, 184, 95, .18);
  border-color: var(--gold);
}

.guest-welcome-topic:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.guest-welcome-history .guest-welcome-privacy {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .7rem;
}

@media (max-width: 620px) {
  .guest-welcome-history {
    margin-top: 20px;
    padding: 16px 13px;
  }

  .guest-welcome-topic {
    padding: 8px 12px;
    font-size: .75rem;
  }
}


/* =========================================
   JESUSWW V3 — DEVOTION CARD REDESIGN
   ========================================= */

.chat-message.public-devotion-message {
  width: min(100%, 800px);
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.public-devotion-card,
.public-devotion-message > .public-devotion-explore,
.public-devotion-message > .public-devotion-history {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid rgba(222, 166, 71, .72);
  border-radius: 24px;
  background: linear-gradient(
    125deg,
    rgba(10, 15, 29, .97),
    rgba(12, 17, 33, .96) 60%,
    rgba(8, 12, 24, .97)
  );
  box-shadow: 0 16px 48px rgba(0, 0, 0, .24);
  color: #f8f0df;
}

.public-devotion-card {
  padding: clamp(22px, 4vw, 38px);
}

.public-devotion-eyebrow {
  color: #e9b65c;
  font-size: .74rem;
  letter-spacing: .22em;
  font-weight: 800;
}

.public-devotion-search {
  margin: 10px 0 4px;
  color: #aab1c7;
  font-size: .86rem;
}

.public-devotion-title {
  margin: 0 0 26px;
  font-family: var(--font-display);
  color: #fff1d6;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.13;
}

.public-devotion-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 19px;
  background: #edbc66;
  border-radius: 2px;
}

/* Devotion sections */

.public-devotion-section {
  padding: 19px 0;
  border-top: 1px solid rgba(173, 181, 209, .16);
}

.public-devotion-section h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 10px;
  color: #eab65c;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.public-devotion-section-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  color: #efbb60;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.public-devotion-section p {
  margin: 0 0 0 50px;
  color: #f0edf0;
  font-size: .99rem;
  line-height: 1.72;
  white-space: pre-wrap;
}

/* Highlighted Scripture */

.public-devotion-section[data-section="scripture"] {
  margin: 0 0 6px;
  padding: 23px 25px;
  border: 1px solid rgba(230, 173, 83, .58);
  border-radius: 17px;
  background: linear-gradient(
    115deg,
    rgba(50, 39, 30, .62),
    rgba(33, 35, 51, .72)
  );
}

.public-devotion-section[data-section="scripture"] h3 {
  margin-bottom: 12px;
}

.public-devotion-section[data-section="scripture"] p {
  margin-left: 0;
  color: #fff2db;
  font-family: var(--font-display);
  font-size: clamp(1.13rem, 2.4vw, 1.55rem);
  line-height: 1.48;
}

/* Reflection and Prayer */

.public-devotion-section[data-section="reflection"] p,
.public-devotion-section[data-section="prayer"] p {
  padding: 16px 19px;
  border: 1px solid rgba(175, 185, 215, .22);
  border-radius: 13px;
  background: rgba(29, 33, 50, .7);
  font-family: var(--font-display);
  font-size: 1.08rem;
}

.public-devotion-section[data-section="prayer"] p {
  border-color: rgba(231, 176, 88, .5);
  background: linear-gradient(
    120deg,
    rgba(75, 55, 34, .55),
    rgba(45, 40, 41, .6)
  );
}

/* Continue button */

.public-devotion-footer {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 0;
  gap: 8px;
}

.public-devotion-footer span {
  display: none;
}

.public-devotion-next {
  width: 100%;
  max-width: none;
  min-height: 62px;
  border: 1px solid #f3c675;
  border-radius: 13px;
  background: linear-gradient(
    100deg,
    rgba(84, 68, 48, .54),
    rgba(52, 43, 36, .64)
  );
  color: #fff1c8;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 146, .22);
}

.public-devotion-next:hover {
  background: rgba(118, 89, 45, .35);
}

/* Explore More and Recently Viewed */

.public-devotion-message > .public-devotion-explore,
.public-devotion-message > .public-devotion-history {
  padding: 23px 27px;
}

.public-devotion-message > .public-devotion-explore h3,
.public-devotion-message > .public-devotion-history h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  color: #fff0d9;
  letter-spacing: -.02em;
  text-transform: none;
}

.public-devotion-message > .public-devotion-explore p,
.public-devotion-message > .public-devotion-history p {
  margin: 0 0 14px;
  color: #aeb6cd;
  font-size: .85rem;
}

.public-devotion-topic-list {
  gap: 10px;
}

.public-devotion-topic,
.guest-welcome-topic {
  border: 1px solid rgba(230, 170, 69, .8);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(33, 34, 40, .74);
  color: #f8edda;
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 400;
}

.public-devotion-topic:hover,
.guest-welcome-topic:hover {
  background: rgba(102, 75, 38, .4);
}

.guest-welcome-history {
  border-color: rgba(222, 166, 71, .7);
  border-radius: 22px;
  background: linear-gradient(
    130deg,
    rgba(10, 15, 29, .95),
    rgba(11, 16, 31, .96)
  );
}

.guest-welcome-history h2 {
  font-size: 1.5rem;
}

.guest-welcome-topics {
  gap: 10px;
}

/* Mobile */

@media (max-width: 620px) {
  .chat-message.public-devotion-message {
    gap: 10px;
  }

  .public-devotion-card {
    padding: 23px 19px;
    border-radius: 19px;
  }

  .public-devotion-message > .public-devotion-explore,
  .public-devotion-message > .public-devotion-history {
    padding: 20px 18px;
    border-radius: 19px;
  }

  .public-devotion-section[data-section="scripture"] {
    padding: 18px 16px;
  }

  .public-devotion-section p {
    margin-left: 0;
    font-size: .94rem;
  }

  .public-devotion-section h3 {
    gap: 10px;
  }

  .public-devotion-next {
    min-height: 56px;
    font-size: 1.12rem;
  }

  .public-devotion-topic {
    padding: 9px 13px;
    font-size: .88rem;
  }
}

/* V3 — Refined gold devotion icons */

.public-devotion-section-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #efbb60;
}

.public-devotion-section-icon svg {
  display: block;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* V3 — Scripture quotation marks and KJV reference */

.public-devotion-section[data-section="scripture"] h3 {
  display: none;
}

.public-devotion-section[data-section="scripture"] {
  position: relative;
  padding: 24px 24px 23px 88px;
}

.public-devotion-section[data-section="scripture"]::before {
  content: "“";
  position: absolute;
  left: 25px;
  top: 12px;
  color: #d6a554;
  font-family: Georgia, serif;
  font-size: 5.2rem;
  line-height: 1;
  opacity: .9;
}

.public-devotion-section[data-section="scripture"] p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  line-height: 1.5;
  color: #fff1da;
}

.public-devotion-scripture-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  color: #b6bed6;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.public-devotion-kjv-tag {
  padding: 3px 8px;
  border: 1px solid rgba(228, 184, 95, .4);
  border-radius: 5px;
  color: #e4b85f;
  font-size: .66rem;
  letter-spacing: .1em;
}

@media (max-width: 620px) {
  .public-devotion-section[data-section="scripture"] {
    padding: 20px 17px 20px 59px;
  }

  .public-devotion-section[data-section="scripture"]::before {
    left: 15px;
    top: 15px;
    font-size: 3.7rem;
  }
}


/* =========================================
   V3 — PHASE 7A DEVOTION DISCOVERY
========================================= */

.guest-discovery {
  width: min(100%, 600px);
  margin: 28px auto 0;
  padding: 25px 24px;

  border: 1px solid rgba(228, 184, 95, .65);
  border-radius: 22px;

  background: linear-gradient(
    130deg,
    rgba(10, 15, 29, .96),
    rgba(13, 18, 34, .94)
  );

  box-shadow: 0 16px 45px rgba(0, 0, 0, .25);
  backdrop-filter: blur(14px);
  text-align: center;
}

.guest-discovery h2 {
  margin: 0 0 9px;
  color: #fff0d9;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 400;
}

.guest-discovery > p {
  margin: 0 0 19px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
}

.guest-discovery-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.guest-discovery-topic {
  min-height: 48px;
  padding: 10px 14px;

  border: 1px solid rgba(228, 184, 95, .65);
  border-radius: 999px;

  background: rgba(228, 184, 95, .065);
  color: #fff0d9;

  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;

  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.guest-discovery-topic:hover {
  background: rgba(228, 184, 95, .18);
  border-color: var(--gold-light);
}

.guest-discovery-topic:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.guest-discovery .guest-discovery-privacy {
  margin: 19px 0 0;
  color: #9fa9c0;
  font-size: .72rem;
}

@media (max-width: 620px) {
  .guest-discovery {
    margin-top: 20px;
    padding: 19px 15px;
    border-radius: 18px;
  }

  .guest-discovery-topics {
    gap: 9px;
  }

  .guest-discovery-topic {
    min-height: 44px;
    padding: 9px 10px;
    font-size: .9rem;
  }
}


/* =========================================
   V3 — PHASE 7B PRIVACY CONTROLS
========================================= */

.guest-welcome-clear-history {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 17px;
  padding: 9px 0;

  border: none;
  border-bottom: 1px solid rgba(177, 186, 213, .5);
  border-radius: 0;

  background: transparent;
  color: #aeb7d0;

  font-family: inherit;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .015em;

  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.guest-welcome-clear-history:hover {
  color: #f0bd66;
  border-bottom-color: #f0bd66;
}

.guest-welcome-clear-history:focus-visible {
  outline: 2px solid #f0bd66;
  outline-offset: 5px;
}

@media (max-width: 620px) {
  .guest-welcome-clear-history {
    margin-top: 15px;
    font-size: .8rem;
    min-height: 40px;
  }
}


/* =========================================
   V3 — PHASE 7C-1 ACCOUNT INVITATION
========================================= */

.guest-account-invitation {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(228, 184, 95, .22);
  text-align: center;
}

.guest-account-invitation h3 {
  margin: 0 0 10px;
  color: #fff0d9;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 400;
}

.guest-account-invitation > p {
  margin: 0 auto 17px;
  max-width: 440px;
  color: #aeb6cc;
  font-size: .83rem;
  line-height: 1.7;
}

.guest-account-signin {
  display: block;
  width: 100%;
  min-height: 51px;
  padding: 12px 18px;
  border: 1px solid #edbc66;
  border-radius: 12px;
  background: linear-gradient(
    110deg,
    rgba(84, 68, 48, .54),
    rgba(52, 43, 36, .64)
  );
  color: #fff1c8;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.guest-account-signin:hover {
  background: rgba(118, 89, 45, .35);
  border-color: #fff0bd;
}

.guest-account-signin:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
}

.guest-account-invitation .guest-account-privacy {
  margin: 13px 0 0;
  color: #9ca7bf;
  font-size: .72rem;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .guest-account-invitation {
    margin-top: 20px;
    padding-top: 19px;
  }

  .guest-account-signin {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* =========================================
   V3 — COMPACT WELCOME LAYOUT
   No additional scrolling
========================================= */

/* Smaller laptop screens */
@media (max-width: 1200px), (max-height: 850px) {

  .chat-empty-content {
    top: 46%;
    width: min(760px, 90%);
  }

  .guest-welcome-history {
    padding: 22px 24px;
  }

  .guest-welcome-history h2 {
    font-size: 1.55rem;
  }

  .guest-account-invitation {
    margin-top: 14px;
    padding-top: 15px;
  }

  .guest-account-invitation h3 {
    font-size: 1.35rem;
  }

  .guest-account-invitation > p {
    margin-bottom: 12px;
    line-height: 1.45;
  }

  .guest-account-signin {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 1rem;
  }

  .guest-account-invitation .guest-account-privacy {
    margin-top: 8px;
  }

  .guest-welcome-clear-history {
    margin-top: 10px;
  }
}

/* Shorter screens */
@media (max-height: 700px) {

  .chat-empty-content {
    top: 43%;
  }

  .guest-welcome-history {
    padding: 14px 20px;
  }

  .guest-account-invitation {
    margin-top: 10px;
    padding-top: 10px;
  }

  .guest-account-invitation h3 {
    font-size: 1.2rem;
  }

  .guest-account-invitation > p {
    font-size: .75rem;
  }
}


/* =========================================
   V3 — REFINED COMPACT WELCOME LAYOUT
   No additional scrolling
========================================= */

@media (max-width: 1200px), (max-height: 850px) {

  .chat-empty-content {
    top: 44%;
    width: min(760px, 90%);
  }

  .guest-welcome-history {
    padding: 18px 22px;
  }

  .guest-welcome-history h2 {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }

  .guest-welcome-history > p {
    margin-bottom: 10px;
  }

  .guest-welcome-topics {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .guest-welcome-clear-history {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .guest-account-invitation {
    margin-top: 11px;
    padding-top: 13px;
  }

  .guest-account-invitation h3 {
    margin-bottom: 7px;
    font-size: 1.3rem;
  }

  .guest-account-invitation > p {
    max-width: 460px;
    margin: 0 auto 11px;
    font-size: .8rem;
    line-height: 1.45;
  }

  .guest-account-signin {
    min-height: 43px;
    padding: 8px 14px;
    font-size: 1rem;
  }

  /* Center the privacy message beneath Sign In */

  .guest-account-invitation .guest-account-privacy {
    display: block;
    width: 100%;
    max-width: none;
    margin: 11px auto 0;
    padding: 0 8px;

    color: #aeb6cc;
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
  }
}

/* Short laptop screens */

@media (max-height: 700px) {

  .chat-empty-content {
    top: 41%;
  }

  .guest-welcome-history {
    padding: 13px 18px;
  }

  .guest-welcome-history h2 {
    font-size: 1.35rem;
  }

  .guest-account-invitation {
    margin-top: 8px;
    padding-top: 9px;
  }

  .guest-account-invitation h3 {
    font-size: 1.15rem;
  }

  .guest-account-invitation > p {
    margin-bottom: 8px;
    font-size: .75rem;
  }

  .guest-account-invitation .guest-account-privacy {
    margin-top: 8px;
    font-size: .68rem;
  }
}



/* =========================================
   JESUSWW V3 — MOBILE WELCOME POSITION FIX
   Restores horizontal alignment
========================================= */

@media (max-width: 620px) {

  /* Reset the empty-state container */
  .chat-empty {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 30px;
    overflow: visible;
  }

  /* Center the entire welcome experience */
  .chat-empty-content {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 15px 10px 25px !important;

    text-align: center;
    box-sizing: border-box;
  }

  /* Keep heading within screen width */
  .chat-empty-content h1 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 10px;

    font-size: clamp(1.7rem, 7vw, 2.3rem);
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
  }

  .chat-empty-content > p {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 15px;
    font-size: .82rem;
    line-height: 1.5;
  }

  /* Center the guest panel */
  .guest-welcome-history,
  .guest-discovery {
    position: relative;
    left: auto;
    right: auto;
    transform: none;

    width: 100%;
    max-width: 100%;

    margin: 15px auto 0;
    padding: 18px 15px;

    box-sizing: border-box;
    text-align: center;
  }

  /* Keep invitation contained */
  .guest-account-invitation {
    width: 100%;
    max-width: 100%;
    margin: 13px auto 0;
    padding-top: 13px;
    box-sizing: border-box;
  }

  .guest-account-invitation > p {
    max-width: 100%;
    margin: 0 auto 12px;
    font-size: .77rem;
    line-height: 1.45;
  }

  .guest-account-signin {
    display: block;
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    margin: 0 auto;
  }

  .guest-account-invitation .guest-account-privacy {
    width: 100%;
    max-width: 100%;
    margin: 10px auto 0;
    padding: 0 5px;
    text-align: center;
  }

  /* Preserve existing chat scrolling */
  .chat-messages {
    min-width: 0;
    overflow-x: hidden;
  }
}



/* =========================================
   V3 — ONE PANEL, TWO EXPANDABLE SECTIONS
========================================= */

.guest-mobile-collapse-toggle {
  display: none;
}

@media (min-width: 621px) {
  .guest-welcome-section .guest-mobile-collapse-body {
    display: block !important;
  }

  .guest-welcome-section .guest-mobile-collapse-body[hidden] {
    display: block !important;
  }

  .guest-welcome-section .guest-mobile-collapse-body {
    padding: 0;
  }
}

@media (max-width: 620px) {

  /* One outer card only */
  .guest-welcome-history {
    width: 100%;
    max-width: 100%;
    margin: 10px auto 0;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(228, 184, 95, .7);
    border-radius: 18px;
    background: rgba(9, 14, 29, .95);
  }

  .guest-welcome-section {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .guest-welcome-section + .guest-welcome-section {
    border-top: 1px solid rgba(228, 184, 95, .22);
  }

  .guest-mobile-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 12px 3px;
    border: 0;
    background: transparent;
    color: #fff0d9;
    text-align: left;
    cursor: pointer;
  }

  .guest-mobile-collapse-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .guest-mobile-collapse-title {
    font-family: Georgia, serif;
    font-size: 1.12rem;
    line-height: 1.25;
  }

  .guest-mobile-collapse-subtitle {
    color: #aeb6cc;
    font-size: .72rem;
  }

  .guest-mobile-collapse-arrow {
    flex-shrink: 0;
    color: #e4b85f;
    font-size: 1.5rem;
    transition: transform .2s ease;
  }

  .guest-mobile-collapse-toggle[aria-expanded="true"]
  .guest-mobile-collapse-arrow {
    transform: rotate(180deg);
  }

  .guest-mobile-collapse-body {
    padding: 0 2px 14px;
  }

  .guest-mobile-collapse-body[hidden] {
    display: none !important;
  }

  /* Hide headings already shown in the toggle */
  .guest-collapse-history
  .guest-mobile-collapse-body > h2,
  .guest-collapse-account
  .guest-account-invitation > h3 {
    display: none;
  }

  .guest-collapse-account .guest-account-invitation {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .guest-collapse-account .guest-account-privacy {
    text-align: center;
  }
}


/* =========================================================
   JESUSWW V2 — PRODUCTION MOBILE LAYOUT
   Add this entire section to the bottom of index-v2.css
   ========================================================= */

@media (max-width: 620px) {
  :root {
    --scene-focal-x: 50%;
    --mobile-header-height: 64px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }

  button,
  a {
    touch-action: manipulation;
  }

  /* Application */

  .app-shell {
    position: relative;

    width: 100%;
    height: 100dvh;
    min-height: 100svh;

    display: block;
  }

  .chat-workspace {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
  }

  /* Mobile drawer backdrop */

  .app-shell::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 899;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: rgba(2, 4, 10, 0.72);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
      opacity 180ms ease,
      visibility 180ms ease;
  }

  body.mobile-sidebar-open .app-shell::before {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile sidebar drawer */

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 900;

    width: min(86vw, 340px);
    height: 100dvh;

    display: flex;

    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(16px, env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior: contain;

    border-right:
      1px solid rgba(168, 181, 218, 0.22);

    transform: translateX(-105%);

    transition:
      transform 220ms ease;

    box-shadow:
      24px 0 70px rgba(0, 0, 0, 0.55);
  }

  body.mobile-sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  /* Restore content hidden by the tablet breakpoint */

  .sidebar-brand {
    min-height: 44px;

    justify-content: flex-start;
    padding: 0 5px;
  }

  .sidebar-brand > .brand-name {
    display: inline;
  }

  .sidebar-collapse {
    display: grid;

    width: 40px;
    height: 40px;

    margin-left: auto;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .new-chat-btn {
    min-height: 50px;

    justify-content: center;

    margin: 20px 0 14px;
    padding: 11px 14px;
  }

  .new-chat-btn span,
  .nav-item span,
  .privacy-note span,
  .sidebar-sign-in span {
    display: inline;
  }

  .primary-nav {
    gap: 3px;
  }
	
	body.recent-mobile-expanded
.primary-nav
.nav-item:not([data-view="chat"]) {
  display: none;
}

body.recent-mobile-expanded
.primary-nav {
  gap: 0;
}

body.recent-mobile-expanded
.recent-block {
  margin-top: 8px;
}

  .nav-item {
    min-height: 46px;

    justify-content: flex-start;

    padding: 10px 13px;
  }

 .recent-block {
  display: block;

  flex: 0 0 auto;
  min-height: 0;
  max-height: none;

  margin-top: 14px;
  padding: 15px 9px;

  overflow: hidden;

  transition:
    flex-basis 220ms ease,
    max-height 220ms ease;
}

.recent-toggle {
  min-height: 32px;
  cursor: pointer;
}

.recent-toggle-chevron {
  display: inline-flex;
  margin-right: 2px;
}

.recent-toggle:hover
.recent-toggle-chevron {
  border-color: rgba(245, 207, 126, 0.72);
  background: rgba(228, 184, 95, 0.15);
}

.recent-block:not(.is-expanded) {
  flex-basis: auto;
}

.recent-block:not(.is-expanded)
.recent-conversations {
  display: none;
}

	.recent-block.is-expanded {
  flex-basis: calc(100dvh - 270px);
  min-height: 420px;
  max-height: calc(100dvh - 270px);
}

.recent-block.is-expanded
.recent-toggle-chevron::before {
  content: "Hide";
}

.recent-block.is-expanded
.recent-toggle-chevron::after {
  transform: translateY(2px) rotate(225deg);
}

.recent-block.is-expanded
.recent-conversations {
  height: calc(100% - 47px);
  max-height: none;

  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;

  margin-top: 10px;
  padding: 2px 5px 12px 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  -webkit-overflow-scrolling: touch;
}

  .account-heading {
    display: flex;
  }

  .account-panel {
    margin-top: 7px;
    padding: 11px;

    border: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.025);
  }

  .sidebar-sign-in {
    min-height: 46px;

    justify-content: flex-start;

    padding: 9px 12px;
  }

  .sidebar-sign-in-arrow {
    display: inline;
    margin-left: auto;
  }

  .sidebar-sign-out:not([hidden]) {
    display: flex;
  }

  .sidebar-sign-out[hidden],
  .sidebar-sign-in[hidden] {
    display: none !important;
  }

  .privacy-note {
    justify-content: flex-start;
  }

  /* Mobile header */

  .workspace-header {
    position: relative;
    z-index: 10;

    width: 100%;
    min-height: var(--mobile-header-height);

    display: flex;
    align-items: center;
    gap: 8px;

    padding:
      max(8px, env(safe-area-inset-top))
      10px
      8px;

    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(6, 9, 18, 0.88),
        rgba(6, 9, 18, 0.42)
      );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* This button will be added in the next HTML step */

  .mobile-menu-toggle {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--text);
    background: rgba(8, 11, 22, 0.72);
  }

  .mobile-menu-toggle .ui-icon {
    width: 21px;
    height: 21px;
  }

  .mode-tabs {
    min-width: 0;
    max-width: none;

    flex: 1;

    gap: 2px;

    padding: 3px;

    overflow-x: auto;
    overscroll-behavior-x: contain;

    scrollbar-width: none;

    scroll-snap-type: x proximity;
  }

  .mode-tabs::-webkit-scrollbar {
    display: none;
  }

  .mode-tab {
    min-width: max-content;
    min-height: 38px;

    flex: 0 0 auto;

    padding: 7px 13px;

    font-size: 0.76rem;

    scroll-snap-align: start;
  }

  .workspace-tools {
    flex: 0 0 auto;

    gap: 0;
  }

  .translation-btn {
    min-height: 42px;

    padding: 8px 11px;

    border-radius: 11px;

    font-size: 0.78rem;
  }

  .chat-status {
    display: none;
  }

  /* Conversation area */

  .conversation-stage {
    min-height: 0;

    padding:
      0
      8px
      max(10px, env(safe-area-inset-bottom));
  }

  .chat-messages {
    width: 100%;

    padding:
      16px
      6px
      calc(142px + env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior-y: contain;

    scroll-padding-bottom:
      calc(142px + env(safe-area-inset-bottom));

    -webkit-overflow-scrolling: touch;
  }

  .chat-message {
    margin-bottom: 16px;
  }

  .chat-bubble {
    max-width: 92%;

    padding: 14px 15px;

    border-radius: 16px;

    font-size: 0.94rem;
    line-height: 1.62;
  }

  /* Empty welcome screen */

  .chat-empty {
    min-height: 100%;

    padding-bottom:
      calc(110px + env(safe-area-inset-bottom));
  }

  .chat-empty-content {
    top: 46%;
    left: var(--scene-focal-x);

    width: calc(100% - 28px);

    transform: translate(-50%, -50%);
  }

  .empty-mark {
    width: 42px;
    height: 42px;

    margin-bottom: 14px;
  }

  .verse-label {
    margin-bottom: 10px;

    font-size: 0.61rem;
    letter-spacing: 0.17em;
  }

  .chat-empty strong {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.04;
  }

  .chat-empty p {
    max-width: 330px;

    margin: 13px auto 0;

    font-size: 0.88rem;
    line-height: 1.5;
  }

  /* Mobile composer */

  .chat-composer {
    left: 50%;
    bottom:
      calc(31px + env(safe-area-inset-bottom));

    width: calc(100% - 16px);

    transform: translateX(-50%);
  }

  .chat-input-row {
    min-height: 58px;

    gap: 8px;

    padding: 6px 7px 6px 13px;

    border-radius: 20px;

    background: rgba(8, 11, 22, 0.94);

    box-shadow:
      0 14px 44px rgba(0, 0, 0, 0.46);
  }

  .composer-icon {
    display: none;
  }

  .chat-input {
    min-height: 44px;
    max-height: 118px;

    padding: 11px 2px;

    /* Prevents automatic input zoom on iPhone */
    font-size: 16px;
  }

  .chat-send {
    width: 46px;
    height: 46px;
    min-width: 46px;

    flex: 0 0 46px;
  }

  .chat-send .ui-icon {
    width: 20px;
    height: 20px;
  }

  .chat-composer-note {
    margin-top: 6px;

    font-size: 0.61rem;
  }

  .care-note {
    bottom: max(3px, env(safe-area-inset-bottom));

    padding-inline: 14px;

    font-size: 0.56rem;
    line-height: 1.35;
  }

  /* Login modal becomes a mobile bottom sheet */

  .login-modal {
    align-items: end;

    padding:
      max(12px, env(safe-area-inset-top))
      0
      0;
  }

  .login-modal-card {
    width: 100%;
    max-width: none;
    max-height:
      calc(100dvh - max(12px, env(safe-area-inset-top)));

    padding:
      27px
      18px
      max(22px, env(safe-area-inset-bottom));

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius: 24px 24px 0 0;
  }

  .login-modal-close {
    top: 12px;
    right: 12px;

    width: 40px;
    height: 40px;
  }

  .login-modal-brand {
    margin-bottom: 18px;
  }

  .login-modal-heading h2 {
    padding-inline: 20px;

    font-size: clamp(1.75rem, 9vw, 2.2rem);
  }

  .login-modal-heading p {
    font-size: 0.82rem;
  }

  .login-provider-list {
    margin-top: 20px;
  }

  .login-provider {
    min-height: 52px;

    padding-inline: 44px;

    font-size: 0.82rem;
  }

  .provider-icon {
    left: 15px;
  }

  .login-modal-divider {
    margin-block: 18px 14px;
  }

  .login-terms {
    margin-top: 13px;

    font-size: 0.60rem;
  }
}


/* Small phones */

@media (max-width: 380px) {
  .mode-tab {
    padding-inline: 11px;
  }

  .translation-btn {
    padding-inline: 9px;
  }

  .chat-empty strong {
    font-size: 1.92rem;
  }

  .chat-empty p {
    font-size: 0.82rem;
  }

  .chat-input-row {
    padding-left: 11px;
  }

  .chat-send {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}


/* =========================================================
   EXTERNAL SOUL FLOWER SVG
========================================================= */

.soul-theme-visual {
  min-height:
    clamp(
      440px,
      42vw,
      560px
    );

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  margin-top: 18px;

  padding:
    clamp(28px, 4vw, 48px)
    0
    clamp(82px, 7vw, 104px);

  overflow: visible;
}

/* The SVG already contains its own orbit rings */

.soul-theme-visual::before,
.soul-theme-visual::after {
  display: none;
}


.soul-theme-flower-object {
  width:
    min(
      410px,
      100%
    );

  margin: 0;
	
  height: auto;
  aspect-ratio: 1 / 1;

  position: relative;
  z-index: 3;

  display: block;

  flex: 0 1 auto;

  overflow: visible;

  border: 0;
  outline: 0;

      background: transparent !important;
  color-scheme: normal;
  filter: none;
  box-shadow: none;
}

.soul-theme-visual .soul-theme-list {
  right: 12px;
  bottom: 24px;
  left: 12px;

  width: auto;

  box-sizing: border-box;
}
/* Existing JavaScript can continue updating this element */

.soul-primary-theme-source {
  display: none !important;
}


.soul-flower-fallback {
  max-width: 260px;

  margin: auto;

  color: #aeb5ca;

  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}


/* Mobile Soul flower */

@media (max-width: 620px) {
  .soul-theme-visual {
    min-height: 430px;

    margin-top: 14px;

    padding:
      24px
      0
      86px;
  }

  .soul-theme-flower-object {
    width:
      min(
        330px,
        100%
      );

    margin: 0;
  }

  .soul-theme-visual .soul-theme-list {
    bottom: 20px;
  }
}


/* Small mobile screens */

@media (max-width: 380px) {
  .soul-theme-visual {
    min-height: 325px;
  }

  .soul-theme-flower-object {
    width:
      min(
        304px,
        98%
      );
  }
}


/* Mobile landscape */

@media (max-width: 900px) and (max-height: 500px) {
  .workspace-header {
    min-height: 54px;

    padding-block: 5px;
  }

  .chat-messages {
    padding-top: 10px;
  }

  .chat-empty-content {
    top: 43%;
  }

  .empty-mark,
  .verse-label,
  .chat-empty p,
  .care-note {
    display: none;
  }

   .chat-composer {
    bottom:
      calc(9px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   JESUSWW V3 — DESKTOP WELCOME PANEL FIT
   Keeps complete panel above composer
   Does not change mobile expandable sections
========================================================= */

@media (min-width: 621px) {

  /* Use the available workspace height */
  .chat-empty-content {
    position: absolute !important;
    top: 44% !important;
    bottom: auto !important;
    left: var(--scene-focal-x) !important;

    width: min(760px, 90%) !important;
    max-width: 760px !important;

    transform: translate(-50%, -50%) !important;
  }

  /* Reduce space above the welcome card */
  .empty-mark {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
  }

  .verse-label {
    margin-bottom: 6px;
  }

  .chat-empty strong {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    line-height: 1.1;
  }

  .chat-empty-content > p {
    margin: 7px 0 0;
    line-height: 1.35;
  }

  /* JESUSWW V3 — Desktop subtitle-to-panel spacing */
@media (min-width: 621px) {
  .chat-empty-content > p {
    margin-bottom: 18px;
  }

  .guest-welcome-history,
  .guest-discovery {
    margin-top: 13px;
  }
}

  .guest-welcome-history h2 {
    margin: 0 0 4px;
    font-size: 1.38rem;
  }

  .guest-welcome-history > p {
    margin: 4px 0 7px;
    line-height: 1.35;
  }

  .guest-welcome-topics {
    gap: 6px;
    margin: 7px 0;
  }

  .guest-welcome-topic {
    padding: 6px 13px;
  }

  .guest-welcome-privacy {
    margin: 6px 0 !important;
  }

  .guest-welcome-clear-history {
    margin: 5px auto 0;
  }

  /* Compact the account invitation */
  .guest-account-invitation {
    margin-top: 9px;
    padding-top: 10px;
  }

  .guest-account-invitation h3 {
    margin: 0 0 4px;
    font-size: 1.27rem;
  }

  .guest-account-invitation > p {
    margin: 0 auto 8px;
    line-height: 1.35;
    font-size: .78rem;
  }

  .guest-account-signin {
    min-height: 40px;
    padding: 7px 12px;
    font-size: 1rem;
  }

  .guest-account-invitation .guest-account-privacy {
    margin: 6px auto 0;
    text-align: center;
    line-height: 1.3;
    font-size: .68rem;
  }

}

/* Short desktop screens: keep logo and welcome panel visible */
@media (min-width: 621px) and (max-height: 850px) {

  .chat-empty-content {
  top: 46% !important;
}

  .empty-mark {
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
}

  .verse-label {
    margin-bottom: 4px;
  }

  .guest-welcome-history {
    margin-top: 9px;
    padding-top: 10px;
    padding-bottom: 9px;
  }

  .guest-welcome-topics {
    gap: 5px;
  }

  .guest-account-invitation {
    margin-top: 7px;
    padding-top: 8px;
  }

}


/* =========================================
   JESUSWW V3 — WELCOME HEADING HIERARCHY
   Desktop refinement only
========================================= */

@media (min-width: 621px) {

  /* Primary heading */
  .guest-welcome-history h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.25;
    color: #fff0c7;
  }

  /* Secondary, optional account invitation */
  .guest-account-invitation h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.3;
    color: #e5d4ad;
  }

  /* Slightly quieter supporting text */
  .guest-account-invitation > p {
    font-size: .76rem;
    color: #aeb6cc;
    line-height: 1.4;
  }
}

/* JESUSWW V3 — Refined mobile guest history */

@media (max-width: 620px) {

  .guest-collapse-history .guest-welcome-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 14px 0;
  }

  .guest-collapse-history .guest-welcome-topic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid rgba(225, 174, 86, .65);
    border-radius: 14px;
    background: rgba(210, 161, 79, .08);
    color: #fff0d1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .92rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .guest-collapse-history .guest-welcome-topic:active {
    background: rgba(225, 174, 86, .18);
  }

  .guest-collapse-history .guest-mobile-collapse-body {
    padding: 0 5px 12px;
  }

  .guest-collapse-history .guest-welcome-privacy {
    margin: 12px 0 8px !important;
    font-size: .76rem;
    line-height: 1.4;
  }

  .guest-collapse-history .guest-welcome-clear-history {
    margin: 8px auto 2px;
    font-size: .83rem;
  }

  .guest-welcome-section + .guest-welcome-section {
    border-top: 1px solid rgba(225, 174, 86, .2);
  }
}

/* =========================================
   PHASE 7C-2 — GUEST DEVOTION SOUL IMPORT
========================================= */

.guest-soul-import-offer {
  margin: 0 0 22px;
  padding: 20px;
  border: 1px solid rgba(228, 184, 95, .55);
  border-radius: 18px;
  background: rgba(8, 12, 28, .92);
  color: #f8efd8;
}

.guest-soul-import-offer h2 {
  margin: 0 0 8px;
  font: 1.35rem Georgia, serif;
}

.guest-soul-import-offer p {
  color: #b9c0d2;
  line-height: 1.6;
}

.guest-soul-import-offer button,
.guest-soul-import-actions button {
  padding: 11px 19px;
  border: 1px solid #b48b42;
  border-radius: 11px;
  background: rgba(228, 184, 95, .13);
  color: #fff0bd;
  cursor: pointer;
}

.guest-soul-import-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .76);
  display: grid;
  place-items: center;
  padding: 18px;
}

.guest-soul-import-dialog {
  width: min(100%, 540px);
  max-height: 88dvh;
  overflow-y: auto;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid #b48b42;
  border-radius: 18px;
  background: #0c1122;
  box-shadow: 0 22px 75px #0009;
  color: #f7eed9;
}

.guest-soul-import-dialog h2 {
  font: 1.65rem Georgia, serif;
  margin: 0 0 12px;
}

.guest-soul-import-dialog p {
  color: #bac2d6;
  line-height: 1.6;
}

.guest-soul-import-topics {
  max-height: 170px;
  overflow-y: auto;
  padding-left: 24px;
  line-height: 1.8;
}

.guest-soul-import-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0;
  line-height: 1.5;
}

.guest-soul-import-consent input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  accent-color: #e4b85f;
}

.guest-soul-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.guest-soul-import-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.guest-soul-import-status {
  min-height: 22px;
}

/* =========================================
   V3 — DEVOTION EXPERIENCE SELECTOR
========================================= */

/* JavaScript controls when the selector appears. */
.devotion-experience[hidden] {
  display: none !important;
}

.devotion-experience {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 66px;
  padding: 9px 16px;
  background: rgba(7, 10, 22, .95);
  border-bottom: 1px solid rgba(228, 184, 95, .20);
}

.devotion-experience-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 9px 17px;
  border: 1px solid rgba(228, 184, 95, .25);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: #c7cee0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.devotion-experience-btn span {
  font-size: .88rem;
  font-weight: 700;
}

.devotion-experience-btn small {
  font-size: .68rem;
  color: #aab3c8;
}

.devotion-experience-btn.active {
  background: rgba(228, 184, 95, .13);
  border-color: #e4b85f;
  color: #fff0bd;
}

.devotion-experience-btn:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .devotion-experience {
    gap: 7px;
    padding: 8px 10px;
  }

  .devotion-experience-btn {
    flex: 1 1 0;
    padding: 9px 6px;
    border-radius: 10px;
  }

  .devotion-experience-btn span {
    font-size: .78rem;
  }

  .devotion-experience-btn small {
    font-size: .60rem;
    line-height: 1.25;
    text-align: center;
  }
}

/* =========================================
   V3 SOUL IMPORT FLOATING INVITATION
========================================= */

.guest-soul-import-offer {
  position: fixed;
  top: 102px;
  right: 22px;
  z-index: 900;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 125px);
  overflow-y: auto;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(228, 184, 95, .55);
  border-radius: 18px;
  background: #0c1122;
  color: #f7f2e8;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .5);
}

.guest-soul-import-eyebrow {
  display: block;
  margin: 0 34px 10px 0;
  color: #e4b85f;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.guest-soul-import-offer h2 {
  margin: 0 0 12px;
  color: #fff1cf;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.3;
}

.guest-soul-import-offer p {
  margin: 0;
  color: #b8c2d8;
  font-size: .85rem;
  line-height: 1.6;
}

.guest-soul-import-offer .guest-soul-import-close {
  position: absolute;
  top: 9px;
  right: 10px;
  border: 0;
  padding: 4px 10px;
  background: transparent;
  color: #c5cbd8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.guest-soul-import-offer .guest-soul-import-review {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  padding: 12px;
  border: 1px solid rgba(228, 184, 95, .55);
  border-radius: 10px;
  background: rgba(228, 184, 95, .18);
  color: #fff0bd;
  font-weight: 700;
  cursor: pointer;
}

.guest-soul-import-offer .guest-soul-import-later {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #c7cddd;
  font-size: .85rem;
  cursor: pointer;
}

.guest-soul-import-offer button:hover {
  color: #fff;
}

.guest-soul-import-offer button:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .guest-soul-import-offer {
    top: auto;
    right: 16px;
    bottom: 16px;
    max-height: min(60dvh, 440px);
  }
}