:root{
  /* =========================
     JESUSWW BRAND / CORE TOKENS
     ========================= */
  --jw-bg1:#060912;
  --jw-bg2:#0A1020;
  --jw-bg3:#10182B;

  --jw-surface:rgba(255,255,255,.06);
  --jw-surface-2:rgba(255,255,255,.08);
  --jw-surface-3:rgba(255,255,255,.10);

  --jw-border:rgba(255,255,255,.10);
  --jw-border-strong:rgba(255,255,255,.16);

  --jw-text:#FFFFFF;
  --jw-text-soft:rgba(255,255,255,.84);
  --jw-muted:rgba(255,255,255,.62);
  --jw-faint:rgba(255,255,255,.42);

  --jw-accent:#7C3AED;
  --jw-accent2:#3B82F6;
  --jw-gold:#F6C453;
  --jw-success:#22C55E;
  --jw-danger:#EF4444;

  --jw-ai:rgba(34,197,94,.12);
  --jw-me:rgba(124,58,237,.16);

  --jw-glass:saturate(160%) blur(18px);

  --shadow-xs:0 4px 12px rgba(0,0,0,.16);
  --shadow-sm:0 10px 24px rgba(0,0,0,.24);
  --shadow-md:0 18px 40px rgba(0,0,0,.32);
  --shadow-lg:0 24px 60px rgba(0,0,0,.42);

  /* =========================
     LAYOUT
     ========================= */
  --hdrH:60px;
  --sidebarW:312px;
  --radius-xs:12px;
  --radius-sm:16px;
  --radius-md:20px;
  --radius-lg:24px;
  --radius-pill:999px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;

  /* =========================
     COMPOSER
     ========================= */
  --composerMax:980px;
  --cmpH:76px;
  --vvBottom:0px;
  --cmpTotal:calc(var(--cmpH) + 28px + env(safe-area-inset-bottom) + var(--vvBottom));

  /* =========================
     LEGACY SUPPORT
     ========================= */
  --hdrBg:rgba(255,255,255,.92);
  --hdrBorder:rgba(0,0,0,.08);
  --hdrText:#0b0f17;
  --hdrMuted:rgba(11,15,23,.64);
  --hdrBtnHover:rgba(0,0,0,.06);
  --hdrBtnActive:rgba(0,0,0,.10);

  --jw-purpleA:#7C3AED;
  --jw-purpleB:#3B82F6;
  --jw-goldA:#F6C453;
  --jw-goldB:#F59E0B;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--jw-text);
  background:
    radial-gradient(1000px 560px at 18% -8%, rgba(124,58,237,.26), transparent 56%),
    radial-gradient(960px 520px at 90% -4%, rgba(59,130,246,.20), transparent 54%),
    linear-gradient(180deg,var(--jw-bg2),var(--jw-bg1));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

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

/* =========================
   ACCESSIBILITY / HELPERS
   ========================= */
.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;
}

.goldline{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,196,83,.65), transparent);
  opacity:.55;
}

/* =========================
   HEADER
   ========================= */
.app-header{
  position:sticky;
  top:0;
  z-index:9999;
  height:calc(var(--hdrH) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg, rgba(10,16,32,.82), rgba(7,10,18,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(170%) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}

.app-header .row{
  position:relative;
  z-index:2;
  height:var(--hdrH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
}

.hdr-left,
.hdr-mid,
.hdr-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.hdr-mid{
  min-width:0;
  flex:1;
}

.hdr-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  max-width:min(640px, 64vw);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
}

.hdr-title small{
  font-weight:800;
  font-size:.86em;
  color:rgba(255,255,255,.58);
}

.brand-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.24);
  font-weight:950;
  overflow:hidden;
  isolation:isolate;
  background-clip:padding-box;
}

.brand-dot{
  position:relative;
  width:10px;
  height:10px;
  border-radius:50%;
  background:conic-gradient(from 180deg, var(--jw-gold), var(--jw-accent), var(--jw-accent2), var(--jw-gold));
  box-shadow:0 0 0 3px rgba(246,196,83,.14);
  will-change:transform, filter;
  animation:jwDotBreath 2.6s ease-in-out infinite;
}

.brand-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(246,196,83,.20), transparent 60%);
  filter:blur(2px);
  opacity:.45;
  transform:scale(.92);
  animation:jwDotGlow 2.6s ease-in-out infinite;
  pointer-events:none;
}

body.is-devotion .brand-dot{
  background:linear-gradient(135deg, #93C5FD, #A5B4FC, #67E8F9);
  box-shadow:0 0 0 3px rgba(147,197,253,.18);
  animation:jwDotDevotion 2.9s ease-in-out infinite;
}

body.is-devotion .brand-dot::after{
  background:radial-gradient(circle, rgba(147,197,253,.22), transparent 62%);
  opacity:.40;
}

.icon-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease, opacity .14s ease;
  touch-action:manipulation;
  flex:0 0 auto;
}

.icon-btn:hover{
  background:rgba(255,255,255,.06);
}

.icon-btn:active{
  background:rgba(255,255,255,.10);
  transform:translateY(1px);
}

.icon-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.34);
}

.hdr-action{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-weight:900;
  padding:8px 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease, border-color .14s ease;
  touch-action:manipulation;
}

.hdr-action:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
}

.hdr-action:active{
  background:rgba(255,255,255,.10);
  transform:translateY(1px);
}

.icon{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================
   APP LAYOUT
   ========================= */
.app{
  height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top)));
  display:flex;
  min-height:0;
}

/* =========================
   SIDEBAR
   ========================= */
.sidebar{
  position:relative;
  width:var(--sidebarW);
  max-width:92vw;
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(124,58,237,.12), transparent 58%),
    radial-gradient(680px 220px at 100% 0%, rgba(59,130,246,.10), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(7,11,21,.78);
  border-right:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  padding:14px;
  padding-bottom:96px;
  overflow:auto;
  transition:transform .18s ease, width .18s ease, padding .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.03),
    18px 0 48px rgba(0,0,0,.26);
  z-index:70;
}

.sidebar.closed{
  width:0 !important;
  padding:0 !important;
  border-right:0 !important;
  overflow:hidden !important;
}

.sidebar.closed *{
  pointer-events:none;
}

.side-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 12px;
}

.side-title h2{
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.14);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
  touch-action:manipulation;
}

.pill:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.18);
}

.pill:active{ transform:translateY(1px); }

.pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--jw-gold);
  box-shadow:
    0 0 0 3px rgba(246,196,83,.16),
    0 0 14px rgba(246,196,83,.24);
}

#closeMenuBtn.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  height:36px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120px 60px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(124,58,237,.14), rgba(59,130,246,.10));
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:saturate(150%) blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.20);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}

#closeMenuBtn .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--jw-gold);
  box-shadow:
    0 0 0 3px rgba(246,196,83,.16),
    0 0 8px rgba(246,196,83,.34);
}

#closeMenuBtn:hover{
  filter:brightness(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.28);
}

#closeMenuBtn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.22),
    0 6px 16px rgba(0,0,0,.24);
}

#closeMenuBtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.46), 0 10px 26px rgba(0,0,0,.30);
}

/* =========================
   MODE LIST
   ========================= */
.mode-list{
  display:grid;
  gap:12px;
}

/* =========================
   MODE CARD BASE
   ========================= */
.mode-card{
  position:relative;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, filter .14s ease;
  touch-action:manipulation;
  user-select:none;
  scroll-margin-bottom:80px;
}

.mode-card:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.16);
  box-shadow:
    0 16px 32px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.mode-card:active{
  transform:translateY(1px);
}

.mode-card .thumb{
  position:relative;
  height:76px;
  background:
    radial-gradient(480px 160px at 20% 0%, rgba(124,58,237,.34), transparent 60%),
    radial-gradient(460px 160px at 88% 0%, rgba(59,130,246,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.mode-card .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.24));
}

.mode-card .meta{
  position:relative;
  padding:12px 12px 13px;
}

.mode-card .name{
  margin:0 0 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:950;
  font-size:14px;
  letter-spacing:-.01em;
}

.mode-card .name span{
  opacity:.88;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
}

.mode-card .desc{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.45;
}

.mode-card:hover .desc{
  color:rgba(255,255,255,.80);
}

.mode-card:hover .name span{
  opacity:1;
}

/* =========================
   ACTIVE / SELECTED CARD
   ========================= */
.mode-card.active{
  border-color:rgba(246,196,83,.48);
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 0 1px rgba(246,196,83,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.11));
}

.mode-card.active .thumb{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.02);
}

.mode-card.active .name{
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

.mode-card.active .desc{
  color:rgba(255,255,255,.86);
}

/* upper-right gold badge */
.mode-card.active::before{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--jw-gold);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 0 0 4px rgba(246,196,83,.14),
    0 0 18px rgba(246,196,83,.30);
  animation:modeBadgePulse 2.2s ease-in-out infinite;
  z-index:4;
}

/* breathing aura under active card */
.mode-card.active::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-22px;
  height:50px;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(246,196,83,.16) 0%,
      rgba(124,58,237,.12) 38%,
      rgba(59,130,246,.08) 60%,
      transparent 76%);
  filter:blur(20px);
  animation:modeAuraBreath 3s ease-in-out infinite;
  z-index:0;
}

/* =========================
   MODE CARD — UNIQUE PER MODE
   Add one of these classes to each card:
   .mode-scripture
   .mode-devotion
   .mode-listening
   .mode-discernment
   .mode-prayer
   ========================= */

/* shared positioning helpers */
.mode-card .thumb i,
.mode-card .thumb .orb,
.mode-card .thumb .ring,
.mode-card .thumb .beam{
  position:absolute;
  pointer-events:none;
}

/* subtle motion */
@keyframes modeFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.02); }
}

@keyframes modePulse{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.06); }
}

@keyframes modeSweep{
  0%{ transform:translateX(-120%) skewX(-18deg); opacity:0; }
  25%{ opacity:.5; }
  50%{ opacity:.8; }
  100%{ transform:translateX(170%) skewX(-18deg); opacity:0; }
}

@keyframes modeHaloSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

@keyframes modeBadgePulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 0 0 4px rgba(246,196,83,.14),
      0 0 18px rgba(246,196,83,.30);
  }
  50%{
    transform:scale(1.1);
    box-shadow:
      0 0 0 6px rgba(246,196,83,.10),
      0 0 26px rgba(246,196,83,.42);
  }
}

@keyframes modeAuraBreath{
  0%,100%{
    opacity:.65;
    transform:scale(1);
    filter:blur(20px);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
    filter:blur(24px);
  }
}

/* =========================
   SCRIPTURE
   ========================= */
.mode-card.mode-scripture .thumb{
  background:
    radial-gradient(520px 180px at 12% 0%, rgba(246,196,83,.20), transparent 56%),
    radial-gradient(460px 180px at 82% 0%, rgba(124,58,237,.42), transparent 58%),
    linear-gradient(180deg, rgba(255,248,220,.07), rgba(255,255,255,.02));
}

.mode-card.mode-scripture .thumb::before{
  content:"";
  position:absolute;
  inset:auto auto 12px 14px;
  width:78px;
  height:78px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(246,196,83,.22) 0%, rgba(246,196,83,.08) 45%, transparent 70%);
  filter:blur(10px);
  animation:modePulse 4.8s ease-in-out infinite;
}

.mode-card.mode-scripture .thumb::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 32%, rgba(0,0,0,.30));
}

.mode-card.mode-scripture .name span{
  color:rgba(255,223,148,.82);
}

.mode-card.mode-scripture.active{
  border-color:rgba(246,196,83,.62);
  box-shadow:
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(246,196,83,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   DEVOTION
   ========================= */
.mode-card.mode-devotion .thumb{
  background:
    radial-gradient(460px 170px at 18% 0%, rgba(255,177,66,.22), transparent 58%),
    radial-gradient(430px 180px at 84% 0%, rgba(236,72,153,.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.mode-card.mode-devotion .thumb::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  left:14px;
  top:-10px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,196,118,.18), rgba(255,196,118,.04) 55%, transparent 72%);
  filter:blur(12px);
  animation:modeFloat 5.2s ease-in-out infinite;
}

.mode-card.mode-devotion .thumb::after{
  background:
    linear-gradient(180deg, rgba(255,245,220,.08), transparent 40%, rgba(0,0,0,.26));
}

.mode-card.mode-devotion .name span{
  color:rgba(255,208,152,.82);
}

.mode-card.mode-devotion.active{
  border-color:rgba(255,190,100,.42);
  box-shadow:
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,190,100,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   LISTENING
   ========================= */
.mode-card.mode-listening .thumb{
  background:
    radial-gradient(520px 180px at 12% 0%, rgba(56,189,248,.22), transparent 58%),
    radial-gradient(460px 180px at 86% 0%, rgba(59,130,246,.28), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.mode-card.mode-listening .thumb::before{
  content:"";
  position:absolute;
  inset:auto 12px 10px auto;
  width:86px;
  height:86px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(96,165,250,.18), rgba(96,165,250,.05) 55%, transparent 72%);
  filter:blur(12px);
  animation:modePulse 5s ease-in-out infinite;
}

.mode-card.mode-listening .thumb::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%, rgba(0,0,0,.28));
}

.mode-card.mode-listening .name span{
  color:rgba(166,215,255,.82);
}

.mode-card.mode-listening.active{
  border-color:rgba(96,165,250,.42);
  box-shadow:
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(96,165,250,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   DISCERNMENT
   ========================= */
.mode-card.mode-discernment .thumb{
  background:
    radial-gradient(520px 180px at 16% 0%, rgba(34,197,94,.18), transparent 56%),
    radial-gradient(460px 180px at 86% 0%, rgba(124,58,237,.26), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.mode-card.mode-discernment .thumb::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:60%;
  height:100%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform:skewX(-18deg);
  animation:modeSweep 5.6s linear infinite;
}

.mode-card.mode-discernment .thumb::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 32%, rgba(0,0,0,.30));
}

.mode-card.mode-discernment .name span{
  color:rgba(176,255,202,.82);
}

.mode-card.mode-discernment.active{
  border-color:rgba(74,222,128,.38);
  box-shadow:
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(74,222,128,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   PRAYER
   ========================= */
.mode-card.mode-prayer .thumb{
  background:
    radial-gradient(540px 180px at 16% 0%, rgba(246,196,83,.16), transparent 56%),
    radial-gradient(460px 180px at 84% 0%, rgba(168,85,247,.30), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.mode-card.mode-prayer .thumb::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

  /* 🔥 scaled to button/card feel */
  width:42px;
  height:42px;

  border-radius:50%;
  border:1px solid rgba(246,196,83,.32);

  /* tighter, cleaner glow */
  box-shadow:
    0 0 0 4px rgba(246,196,83,.06),
    0 0 10px rgba(246,196,83,.18),
    inset 0 0 8px rgba(246,196,83,.10);

  opacity:.9;

  /* slower + calmer spin */
  animation:modeHaloSpin 16s linear infinite;
}

.mode-card.mode-prayer .thumb::after{
  background:
    linear-gradient(180deg, rgba(255,250,232,.08), transparent 36%, rgba(0,0,0,.30));
}

.mode-card.mode-prayer .name span{
  color:rgba(255,225,170,.84);
}

.mode-card.mode-prayer.active{
  border-color:rgba(246,196,83,.48);
  box-shadow:
    0 22px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(246,196,83,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   SIDE SECTION
   ========================= */
.side-section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.side-section .side-title-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}

.side-section .side-title-mini h3{
  margin:0;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.64);
}

.side-ghost{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.side-ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.side-ghost:active{
  transform:translateY(1px);
}

/* =========================
   CHAT LIST
   ========================= */
.side-chats{
  display:grid;
  gap:8px;
  margin-bottom:8px;
}

.side-chat-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.side-chat-item:active{ transform:translateY(1px); }

.side-chat-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 10px 18px rgba(0,0,0,.14);
}

.side-chat-item.current{
  border-color:rgba(246,196,83,.36);
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(59,130,246,.08));
  box-shadow:
    0 12px 24px rgba(0,0,0,.20),
    0 0 0 1px rgba(246,196,83,.10);
}

.side-chat-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:4px;
  background:rgba(255,255,255,.30);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
  flex:0 0 auto;
}

.side-chat-item.current .side-chat-dot{
  background:var(--jw-gold);
  box-shadow:
    0 0 0 3px rgba(246,196,83,.14),
    0 0 14px rgba(246,196,83,.24);
}

.side-chat-meta{
  min-width:0;
  flex:1;
}

.side-chat-title{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.side-chat-sub{
  margin-top:2px;
  font-size:11.5px;
  color:rgba(255,255,255,.56);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.side-chat-actions{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}

.side-mini{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

.side-mini:hover{
  background:rgba(255,255,255,.06);
}

.side-mini:active{
  transform:translateY(1px);
}

.side-mini.danger{
  border-color:rgba(255,80,80,.26);
  background:rgba(255,80,80,.08);
}

.side-empty{
  padding:10px 6px;
  color:rgba(255,255,255,.62);
}

.side-overlay{
  display:none;
  z-index:65;
}

/* =========================
   ACCESSIBILITY / MOBILE
   ========================= */
.mode-card:focus-visible,
.side-chat-item:focus-visible,
.side-ghost:focus-visible,
.side-mini:focus-visible,
.pill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(124,58,237,.34),
    0 12px 28px rgba(0,0,0,.22);
}

@media (prefers-reduced-motion:reduce){
  .mode-card.active::before,
  .mode-card.active::after,
  .mode-card.mode-scripture .thumb::before,
  .mode-card.mode-devotion .thumb::before,
  .mode-card.mode-listening .thumb::before,
  .mode-card.mode-discernment .thumb::before,
  .mode-card.mode-prayer .thumb::before{
    animation:none !important;
  }
}

@media (max-width:640px){
  .sidebar{
    padding:12px;
    padding-bottom:92px;
  }

  .mode-list{
    gap:10px;
  }

  .mode-card{
    border-radius:18px;
  }

  .mode-card .thumb{
    height:74px;
  }

  .mode-card .meta{
    padding:12px;
  }

  .mode-card.mode-prayer .thumb::before{
  width:36px;
  height:36px;
}
}

/* =========================
   MAIN / PANEL / CHAT
   ========================= */
.main{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom) + 110px);
}

.panel{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--jw-surface);
  border:1px solid var(--jw-border);
  box-shadow:var(--shadow-md);
  backdrop-filter:var(--jw-glass);
}

.top{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  backdrop-filter:var(--jw-glass);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.hint{
  color:var(--jw-muted);
  font-size:12px;
  line-height:1.35;
}

.chat{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:16px;
  padding-bottom:calc(var(--cmpTotal) + 16px);
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.08));
}

.chat-empty-state{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px calc(var(--cmpTotal) + 34px);
  pointer-events:none;
  user-select:none;
  opacity:0;
  visibility:hidden;
  transform:scale(.985);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.chat.show-empty-state .chat-empty-state{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.chat-empty-kicker{
  margin:0 0 10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
}

.chat-empty-title{
  max-width:900px;
  margin:0;
  font-weight:980;
  letter-spacing:-.045em;
  line-height:.96;
  font-size:clamp(34px, 7vw, 88px);
  color:rgba(255,255,255,.10);
  text-wrap:balance;
}

.chat-empty-sub{
  max-width:560px;
  margin-top:14px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.42);
}

body[data-theme="light"] .chat-empty-kicker{
  color:rgba(11,18,32,.28) !important;
}

body[data-theme="light"] .chat-empty-title{
  color:rgba(11,18,32,.10) !important;
}

body[data-theme="light"] .chat-empty-sub{
  color:rgba(11,18,32,.40) !important;
}

@media (max-width:520px){
  .chat-empty-state{
    padding:28px 16px calc(var(--cmpTotal) + 26px);
  }

  .chat-empty-title{
    font-size:clamp(28px, 10vw, 54px);
    line-height:1.02;
  }

  .chat-empty-sub{
    margin-top:10px;
    font-size:13px;
  }
}

.msg{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  margin:12px 0;
}

.msg.me{ align-items:flex-end; }
.msg.ai{ align-items:flex-start; }

.bubble{
  margin:0;
  max-width:min(84%, 720px);
  white-space:pre-wrap;
  word-break:break-word;
  padding:13px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  line-height:1.5;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.me .bubble{
  background:var(--jw-me);
  border-color:rgba(124,58,237,.28);
}

.ai .bubble{
  background:var(--jw-ai);
  border-color:rgba(34,197,94,.18);
}

.msg-actions{
  display:flex;
  gap:12px;
  margin-top:6px;
  padding-left:6px;
  font-size:13px;
  opacity:.74;
}

.msg-actions button{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  color:var(--jw-muted);
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
  font-weight:600;
}

.msg-actions button:hover{
  background:rgba(255,255,255,.06);
  color:var(--jw-text);
}

.msg-actions svg{
  width:16px;
  height:16px;
  fill:currentColor;
  stroke:none;
  opacity:.85;
}

.msg-actions .lbl{
  line-height:1;
}

/* =========================
   COMPOSER — ALIVE / SILICON VALLEY
   ========================= */
.composer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  padding:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom) + var(--vvBottom));
  background:
    linear-gradient(180deg,
      rgba(3,6,14,0) 0%,
      rgba(3,6,14,.20) 34%,
      rgba(3,6,14,.48) 72%,
      rgba(3,6,14,.72) 100%);
  pointer-events:none;
}

.composer-inner{
  position:relative;
  overflow:hidden;
  pointer-events:auto;
  max-width:var(--composerMax);
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding:11px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(9,13,24,.78);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.42),
    0 8px 26px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transform:translateZ(0);
}

/* soft animated sheen */
.composer-inner::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.06) 18%,
      rgba(255,255,255,.12) 28%,
      transparent 42%);
  transform:translateX(-120%);
  animation:composerSheen 7s linear infinite;
  opacity:.75;
}

/* ambient energy glow */
.composer-inner::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-26px;
  height:54px;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(124,58,237,.24) 0%,
      rgba(124,58,237,.12) 38%,
      rgba(59,130,246,.08) 60%,
      transparent 78%);
  filter:blur(20px);
  opacity:.95;
}

textarea{
  flex:1;
  min-height:48px;
  height:48px;
  max-height:180px;
  resize:none;
  overflow:hidden;
  border-radius:16px;
  padding:13px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:15px;
  line-height:1.45;
  outline:none;
  box-sizing:border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    transform .18s ease;
}

textarea::placeholder{
  color:rgba(255,255,255,.42);
}

textarea:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.14);
}

textarea:focus{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border-color:rgba(124,58,237,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px rgba(124,58,237,.14),
    0 10px 30px rgba(124,58,237,.14);
  transform:translateY(-1px);
}

.btn{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font-weight:950;
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  white-space:nowrap;
  flex:0 0 auto;
  transform:translateZ(0);
  transition:
    transform .16s ease,
    filter .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity:.85;
}

.btn::after{
  content:"";
  position:absolute;
  inset:auto;
  top:0;
  left:-130%;
  width:70%;
  height:100%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  transition:left .55s ease;
}

.btn:hover::after{
  left:145%;
}

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

.btn:active{
  transform:translateY(1px) scale(.985);
}

.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.btn-send{
  min-width:96px;
  min-height:48px;
  border-radius:999px !important;
  padding:12px 19px !important;
  background:
    radial-gradient(140px 90px at 20% 18%, rgba(255,255,255,.22), transparent 52%),
    radial-gradient(120px 80px at 82% 88%, rgba(99,102,241,.20), transparent 58%),
    linear-gradient(135deg, var(--jw-purpleA), var(--jw-purpleB)) !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 14px 34px rgba(88,28,255,.26),
    0 10px 24px rgba(0,0,0,.26) !important;
  font-weight:950 !important;
  font-size:15px !important;
  letter-spacing:.01em;
}

.btn-send:hover{
  filter:brightness(1.07) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 18px 42px rgba(88,28,255,.34),
    0 12px 28px rgba(0,0,0,.30) !important;
}

.btn-send:active{
  transform:translateY(1px) scale(.985);
}

.btn-clear{
  min-height:48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.14);
}

.btn-clear:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.18);
}

/* optional: make composer feel slightly alive without being distracting */
@keyframes composerSheen{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(140%); }
}

/* mobile tightening */
@media (max-width:640px){
  .composer{
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--vvBottom));
  }

  .composer-inner{
    gap:8px;
    padding:9px;
    border-radius:20px;
  }

  textarea{
    min-height:46px;
    height:46px;
    font-size:16px; /* prevents iOS zoom */
    border-radius:14px;
  }

  .btn-send,
  .btn-clear{
    min-height:46px;
  }

  .btn-send{
    min-width:84px;
    padding:12px 16px !important;
  }
}
/* =========================
   HISTORY MODAL
   ========================= */
.jw-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:18000;
}

.jw-modal.open{
  opacity:1;
  pointer-events:auto;
}

.jw-modal-card{
  width:min(720px, calc(100vw - 28px));
  max-height:min(80vh, 720px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:rgba(12,16,28,.78);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.46);
  backdrop-filter:saturate(160%) blur(18px);
}

.jw-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.jw-modal-body{
  min-height:120px;
  overflow:auto;
  padding:12px 12px 14px;
}

.jw-modal-foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.jw-history-list{
  display:grid;
  gap:10px;
}

.jw-history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.jw-history-item .meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.jw-history-item .title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.jw-history-item .sub{
  font-size:12px;
  color:rgba(255,255,255,.56);
}

.jw-history-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.jw-mini{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}

.jw-mini:hover{
  background:rgba(255,255,255,.06);
}

.jw-mini.danger{
  border-color:rgba(255,80,80,.26);
  background:rgba(255,80,80,.08);
}

/* =========================
   MORE MENU
   ========================= */
.more-wrap{
  position:relative;
  z-index:17000;
}

.more-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:196px;
  padding:8px;
  border-radius:18px;
  background:rgba(10,14,26,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  backdrop-filter:saturate(160%) blur(16px);
  opacity:0;
  transform:translateY(-6px) scale(.985);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  z-index:17000;
}

.more-menu.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.more-item{
  width:100%;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
}

.more-item:hover{
  background:rgba(255,255,255,.06);
}

.more-item:active{
  background:rgba(255,255,255,.10);
}

.mi-ic{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

/* =========================
   DEVOTION
   ========================= */
.dev-card-one{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  padding:10px 12px;
  line-height:1.15;
}

.dev-card-one,
.dev-card-one *{
  margin:0 !important;
  padding:0 !important;
}

.dev-k{
  opacity:.72;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}

.dev-topic{
  font-weight:900;
  font-size:1.02rem;
}

.dev-gap{ margin-left:6px; }

.dev-link{
  color:#A78BFA !important;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

.dev-link:hover{ opacity:.92; }

.dev-verse{
  font-weight:800;
  opacity:.95;
}

.dev-app{
  opacity:.96;
  font-weight:500;
}

.dev-hazard{
  font-size:.9rem;
  opacity:.95;
  white-space:nowrap;
}

.dev-score-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}

.dev-score-icon{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.tone-neutral{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
}
.tone-neutral .dev-score-icon{
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.tone-low{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#BFDBFE;
}
.tone-low .dev-score-icon{
  background:#60A5FA;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}

.tone-mid{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.22);
  color:#FDE68A;
}
.tone-mid .dev-score-icon{
  background:#FBBF24;
  box-shadow:0 0 0 3px rgba(245,158,11,.14);
}

.tone-high{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.22);
  color:#BBF7D0;
}
.tone-high .dev-score-icon{
  background:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}

.tone-danger{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.26);
  color:#FECACA;
}
.tone-danger .dev-score-icon{
  background:#EF4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.14);
}

.bubble.devotion-bubble{
  white-space:normal !important;
  padding:14px !important;
}

.msg.ai.devotion-row .bubble.devotion-bubble{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(15,20,30,.74) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.28) !important;
  padding:16px !important;
  line-height:1.5;
}

.msg.ai.devotion-row .bubble.devotion-bubble *{
  line-height:inherit !important;
}

.jw-devocard{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(246,196,83,.05), transparent 60%),
    radial-gradient(900px 300px at 80% 0%, rgba(124,58,237,.08), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 14px 36px rgba(0,0,0,.24);
  padding:16px 16px 14px;
  margin:0;
}

.msg.ai.devotion-row .jw-devocard{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

.jw-devocard .k{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  font-weight:950;
}

.jw-devocard .topic{
  margin:0 0 6px;
  font-size:22px;
  font-weight:980;
  letter-spacing:-.02em;
  line-height:1.12;
}

.jw-devocard .blk-title{
  margin:2px 0 6px;
  font-weight:950;
  font-size:14px;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.92);
}

.jw-devocard .verse,
.jw-devocard .blk{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
}

.jw-devocard .blk{
  color:rgba(255,255,255,.84);
}

.jw-devocard .ref{
  margin:8px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.66);
  font-weight:900;
  opacity:.95;
}

.jw-devocard .rule,
.msg.ai.devotion-row .rule{
  display:block;
  height:1px;
  margin:8px 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.85;
}

.jw-devocard .continue{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.msg.ai.devotion-row .sp{
  display:block;
  height:12px;
}

.msg.ai.devotion-row .sp.sm{
  height:6px;
}

.jw-pillbtn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:950;
  font-size:15px;
  letter-spacing:-.01em;
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.28);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  user-select:none;
  cursor:pointer;
  white-space:nowrap;
}

.jw-pillbtn:hover{
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 16px 34px rgba(0,0,0,.34);
}

.jw-pillbtn:active{
  transform:translateY(1px) scale(.99);
  filter:brightness(.99);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.20),
    0 10px 24px rgba(0,0,0,.28);
}

.jw-pillbtn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.14),
    0 0 0 6px rgba(124,58,237,.28),
    0 16px 34px rgba(0,0,0,.34);
}

.jw-pillbtn.purple{
  background:
    radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(90deg, var(--jw-purpleA), var(--jw-purpleB));
}

.jw-pillbtn.gold{
  background:
    radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(90deg, var(--jw-goldA), var(--jw-goldB));
  color:#1b1405;
  text-shadow:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 14px 30px rgba(0,0,0,.30);
}

.msg.ai.devotion-row .jw-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.msg.ai.devotion-row .jw-actions .jw-pillbtn{
  min-height:44px;
  padding:10px 18px;
  font-size:15px;
  line-height:1;
  border-radius:999px;
  flex:0 0 auto;
}

.msg.ai.devotion-row .jw-actions .jw-pillbtn.gold,
.msg.ai.devotion-row .jw-actions .jw-pillbtn.purple:not([data-action="devotion-next"]){
  width:92px;
  justify-content:center;
}

.msg.ai.devotion-row .jw-actions .jw-pillbtn[data-action="devotion-next"]{
  width:220px;
  justify-content:center;
  white-space:nowrap;
}

.msg.ai.devotion-row .jw-nf{
  width:100%;
  border-radius:22px;
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-color:transparent !important;
  box-shadow:0 14px 36px rgba(0,0,0,.24) !important;
}

.msg.ai.devotion-row .jw-nf .k{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  font-weight:950;
}

.msg.ai.devotion-row .jw-nf .h{
  margin:0 0 8px;
  font-size:18px;
  font-weight:980;
  letter-spacing:-.02em;
  line-height:1.15;
}

.msg.ai.devotion-row .jw-nf .sub{
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:13.5px;
  line-height:1.45;
}

.msg.ai.devotion-row .jw-nf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
}

.msg.ai.devotion-row .jw-nf-sugs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  min-width:unset;
  padding-left:0;
  padding-right:0;
}

.msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
  width:160px;
  min-height:46px;
  padding:12px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  border-radius:999px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:0 0 auto;
}

.msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:disabled,
.msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none !important;
  filter:none !important;
}

.msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
  order:2;
  margin-left:10px;
  flex:0 0 auto;
  width:auto !important;
  padding:12px 18px !important;
}

.jw-quiet{
  display:flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  max-width:100%;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.jw-quiet-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(246,196,83,.95), rgba(245,158,11,.95));
  box-shadow:0 0 0 4px rgba(246,196,83,.12);
  flex:0 0 auto;
}

.jw-quiet-text{
  font-weight:950;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.90);
}

/* =========================
   LIGHT THEME
   ========================= */
body[data-theme="light"]{
  --jw-text:#0b1220;
  --jw-muted:rgba(11,18,32,.60);
  --jw-bg1:#F7F9FC;
  --jw-bg2:#EEF2F8;
  --jw-surface:rgba(255,255,255,.74);
  --jw-surface-2:rgba(255,255,255,.84);
  --jw-border:rgba(15,23,42,.08);
  --jw-border2:rgba(15,23,42,.12);
  --jw-shadow:0 14px 38px rgba(15,23,42,.10);
  --jw-ai:rgba(34,197,94,.08);
  --jw-me:rgba(124,58,237,.10);
  --jw-glass:saturate(170%) blur(16px);
}

body[data-theme="light"]{
  background:
    radial-gradient(1100px 560px at 18% -8%, rgba(124,58,237,.12), transparent 56%),
    radial-gradient(980px 520px at 90% -2%, rgba(59,130,246,.10), transparent 54%),
    linear-gradient(180deg,var(--jw-bg2),var(--jw-bg1));
}

body[data-theme="light"] .app-header{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(170%) blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.45);
}

body[data-theme="light"] .app-header,
body[data-theme="light"] .app-header .hdr-title,
body[data-theme="light"] .app-header .hdr-action,
body[data-theme="light"] .app-header .icon-btn{
  color:#0b1220 !important;
}

body[data-theme="light"] .hdr-title small{
  color:rgba(11,18,32,.54) !important;
}

body[data-theme="light"] .icon-btn:hover,
body[data-theme="light"] .hdr-action:hover{
  background:rgba(15,23,42,.05) !important;
}

body[data-theme="light"] .icon-btn:active,
body[data-theme="light"] .hdr-action:active{
  background:rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .brand-badge{
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(59,130,246,.08)) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 8px 18px rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.62) !important;
  border-right:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .side-title h2,
body[data-theme="light"] .side-section .side-title-mini h3{
  color:rgba(11,18,32,.64) !important;
}

body[data-theme="light"] .pill,
body[data-theme="light"] #closeMenuBtn.pill,
body[data-theme="light"] .side-ghost{
  color:#0b1220 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:rgba(255,255,255,.64) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .mode-card{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .mode-card .desc,
body[data-theme="light"] .mode-card .name span{
  color:rgba(11,18,32,.58) !important;
}

body[data-theme="light"] .mode-card.active{
  border-color:rgba(124,58,237,.22) !important;
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(59,130,246,.06)) !important;
}

body[data-theme="light"] .side-chat-item{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .side-chat-title{
  color:#0b1220 !important;
}

body[data-theme="light"] .side-chat-sub,
body[data-theme="light"] .side-empty{
  color:rgba(11,18,32,.54) !important;
}

body[data-theme="light"] .side-mini{
  background:rgba(255,255,255,.62) !important;
  color:#0b1220 !important;
  border:1px solid rgba(15,23,42,.10) !important;
}

body[data-theme="light"] .panel{
  background:rgba(255,255,255,.54) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .top{
  background:rgba(255,255,255,.48) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .hint{
  color:rgba(11,18,32,.54) !important;
}

body[data-theme="light"] .chat{
  background:rgba(255,255,255,.26) !important;
}

body[data-theme="light"] .bubble{
  color:#0b1220 !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .me .bubble{
  background:rgba(124,58,237,.10) !important;
  border-color:rgba(124,58,237,.16) !important;
}

body[data-theme="light"] .ai .bubble{
  background:rgba(34,197,94,.08) !important;
  border-color:rgba(34,197,94,.14) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .bubble.devotion-bubble{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.58),
    0 12px 28px rgba(15,23,42,.10) !important;
  color:#0b1220 !important;
}

body[data-theme="light"] .composer{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(247,249,252,.70) 42%, rgba(238,242,248,.88)) !important;
}

body[data-theme="light"] .composer-inner{
  background:rgba(255,255,255,.80) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.10) !important;
}

body[data-theme="light"] textarea{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:#0b1220 !important;
}

body[data-theme="light"] textarea::placeholder{
  color:rgba(11,18,32,.42) !important;
}

body[data-theme="light"] .btn-clear{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:#0b1220 !important;
}

body[data-theme="light"] .jw-modal{
  background:rgba(15,23,42,.30) !important;
}

body[data-theme="light"] .jw-modal-card{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(15,23,42,.10) !important;
}

body[data-theme="light"] .jw-history-item{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .jw-history-item .sub{
  color:rgba(11,18,32,.54) !important;
}

body[data-theme="light"] .jw-mini{
  background:rgba(255,255,255,.72) !important;
  color:#0b1220 !important;
  border:1px solid rgba(15,23,42,.10) !important;
}

body[data-theme="light"] .more-menu{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.12) !important;
}

body[data-theme="light"] .more-item{
  color:#0b1220 !important;
}

body[data-theme="light"] .more-item:hover{
  background:rgba(15,23,42,.05) !important;
}

body[data-theme="light"] .mi-ic{
  background:rgba(15,23,42,.05) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard{
  color:#0b1220 !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .k{
  color:rgba(11,18,32,.56) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .topic{
  color:#0b1220 !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .blk-title{
  color:rgba(11,18,32,.90) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .verse,
body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .blk{
  color:rgba(11,18,32,.82) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .ref{
  color:rgba(11,18,32,.56) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .rule,
body[data-theme="light"] .msg.ai.devotion-row .rule{
  background:linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent) !important;
  opacity:1 !important;
}

body[data-theme="light"] .dev-k{
  color:rgba(11,18,32,.56) !important;
}
body[data-theme="light"] .dev-topic{
  color:#0b1220 !important;
}
body[data-theme="light"] .dev-verse,
body[data-theme="light"] .dev-app,
body[data-theme="light"] .dev-hazard{
  color:rgba(11,18,32,.80) !important;
}

body[data-theme="light"] .dev-link{
  color:#5b21b6 !important;
}
body[data-theme="light"] .dev-link:hover{
  color:#4c1d95 !important;
}

body[data-theme="light"] .dev-score-badge{
  background:rgba(15,23,42,.04) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:rgba(11,18,32,.74) !important;
}

body[data-theme="light"] .dev-score-icon{
  background:rgba(15,23,42,.32) !important;
  box-shadow:0 0 0 3px rgba(15,23,42,.06) !important;
}

body[data-theme="light"] .jw-quiet{
  background:rgba(15,23,42,.04) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:rgba(11,18,32,.70) !important;
  box-shadow:none !important;
}

body[data-theme="light"] .jw-quiet-dot{
  background:linear-gradient(135deg, var(--jw-gold), var(--jw-accent)) !important;
  box-shadow:0 0 0 3px rgba(246,196,83,.14) !important;
}

body[data-theme="light"] .jw-quiet-text{
  color:rgba(11,18,32,.72) !important;
  font-weight:800;
  font-size:13.5px;
  line-height:1.25;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#0b1220 !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf .k{
  color:rgba(11,18,32,.52) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf .h{
  color:#0b1220 !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf .sub{
  color:rgba(11,18,32,.70) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn{
  background:rgba(255,255,255,.82) !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn[disabled],
body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn[aria-disabled="true"]{
  background:rgba(15,23,42,.04) !important;
  color:rgba(11,18,32,.40) !important;
  box-shadow:none !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
  background:linear-gradient(135deg, var(--jw-gold), #f2b94b) !important;
  color:#1b1405 !important;
  box-shadow:0 12px 28px rgba(246,196,83,.28) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
  background:
    radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(90deg, var(--jw-purpleA), var(--jw-purpleB)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.26) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):hover{
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 14px 34px rgba(0,0,0,.32) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):active{
  transform:translateY(1px) scale(.99);
  filter:brightness(.99);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.18),
    0 10px 24px rgba(0,0,0,.24) !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):disabled,
body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold)[aria-disabled="true"]{
  background:rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.45) !important;
  box-shadow:none !important;
  filter:none !important;
}

body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):not(.purple):disabled,
body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):not(.purple)[aria-disabled="true"]{
  background:rgba(148,163,184,.36) !important;
  color:rgba(255,255,255,.88) !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  cursor:not-allowed !important;
}

/* =========================
   TABLET / MOBILE
   ========================= */
@media (max-width:860px){
  .sidebar{
    position:fixed;
    top:calc(var(--hdrH) + env(safe-area-inset-top));
    left:0;
    height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top)));
    transform:translateX(-104%);
    z-index:70;
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
    box-shadow:0 24px 60px rgba(0,0,0,.34);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .side-overlay{
    display:block;
    position:fixed;
    top:calc(var(--hdrH) + env(safe-area-inset-top));
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.34);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  .side-overlay.open{
    opacity:1;
    pointer-events:auto;
  }

  body[data-theme="light"] .side-overlay{
    background:rgba(15,23,42,.18);
  }
}

@media (max-width:520px){
  :root{
    --hdrH:54px;
    --sidebarW:86vw;
  }

  html,body{
    height:100%;
    overflow:hidden;
  }

  .app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }

  .app{
    height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top))) !important;
    margin-top:calc(var(--hdrH) + env(safe-area-inset-top));
  }

  .hdr-desktop-only{
    display:none !important;
  }

  .hdr-left{
    gap:10px !important;
    z-index:3;
  }

  .hdr-right{
    display:flex !important;
    align-items:center;
    gap:8px;
    z-index:3;
  }

  .hdr-mid{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
    pointer-events:none;
    width:min(70vw, 320px);
  }

  .hdr-mid *{
    pointer-events:auto;
  }

  .hdr-title{
    max-width:100%;
    justify-content:center;
    text-align:center;
    font-size:18px;
  }

  .hdr-title small{
    display:none !important;
  }

  #historyBtn,
  #shareBtn,
  .profile-btn{
    display:none !important;
  }

  .more-wrap,
  #moreBtn{
    display:inline-flex !important;
  }

  .main{
    padding:0 !important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 110px) !important;
  }

  .panel{
    height:100% !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
  }

  .panel .top{
    display:none !important;
  }

  .chat{
    height:100% !important;
    padding:14px 12px !important;
    padding-bottom:calc(var(--cmpTotal) + 14px) !important;
    background:transparent !important;
    border-radius:0 !important;
  }

  .bubble{
    max-width:92% !important;
  }

  .composer{
    left:0;
    right:0;
    bottom:0;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .composer-inner{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
  }

  textarea,
  input,
  select{
    font-size:16px !important;
  }

  .jw-devocard{
    padding:14px 14px 12px;
    border-radius:20px;
  }

  .jw-devocard .topic{
    font-size:20px;
  }

  .jw-devocard .continue{
    justify-content:flex-start;
  }

  .jw-devocard .nextbtn{
    width:100%;
    text-align:center;
    white-space:normal !important;
  }

  .msg.ai.devotion-row .sp{
    height:10px;
  }

  .msg.ai.devotion-row .rule{
    margin:6px 0;
  }

  .msg.ai.devotion-row .jw-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .msg.ai.devotion-row .jw-actions .jw-pillbtn{
    width:100% !important;
    justify-content:center;
  }

  .msg.ai.devotion-row .jw-nf-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .msg.ai.devotion-row .jw-nf-sugs{
    flex-direction:column;
    align-items:stretch;
  }

  .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
    width:100%;
    white-space:normal;
  }

  .msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
    margin-left:0;
    margin-top:6px;
    width:100%;
  }

  .msg.ai.devotion-row .jw-quiet,
  body[data-theme="light"] .msg.ai.devotion-row .jw-quiet{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
    padding:12px 14px !important;
    align-items:center;
  }

  .msg.ai.devotion-row .jw-quiet-text,
  body[data-theme="light"] .msg.ai.devotion-row .jw-quiet-text{
    flex:1 !important;
    white-space:normal !important;
    text-align:left !important;
  }
}

@media (max-width:420px){
  .main{
    padding:12px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom) + 110px);
  }

  .top{
    padding:12px;
  }

  .composer{
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--vvBottom));
  }

  .composer-inner{
    padding:10px;
  }

  .btn-send{
    min-width:78px;
  }
}

@media (prefers-reduced-motion: reduce){
  .brand-dot,
  .brand-dot::after{
    animation:none !important;
  }
}

@keyframes jwDotBreath{
  0%,100%{
    transform:scale(1);
    filter:brightness(1);
  }
  50%{
    transform:scale(1.14);
    filter:brightness(1.06);
  }
}

@keyframes jwDotGlow{
  0%,100%{
    opacity:.40;
    transform:scale(.92);
  }
  50%{
    opacity:.72;
    transform:scale(1.04);
  }
}

@keyframes jwDotDevotion{
  0%,100%{
    transform:scale(1);
    filter:saturate(1.04) brightness(1.02);
  }
  50%{
    transform:scale(1.12);
    filter:saturate(1.12) brightness(1.05);
  }
}

/* =========================
   PRAYER CARD
   ========================= */
.prayer-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,10,24,.48);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:17050;
}

.prayer-overlay.show{
  display:flex;
}

.prayer-card{
  width:min(100%,560px);
  max-height:min(90dvh, 760px);
  display:flex;
  flex-direction:column;
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.22), transparent 34%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.14), transparent 34%),
    linear-gradient(180deg, rgba(12,18,34,.98), rgba(8,12,24,.98));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.40);
}

.prayer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 10px;
  flex:0 0 auto;
}

.prayer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 20px 20px;
}

.prayer-foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 20px 20px;
  flex:0 0 auto;
}

.prayer-title .kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  margin-bottom:6px;
}

.prayer-title .h{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
}

.prayer-title .sub{
  margin-top:6px;
  color:rgba(255,255,255,.70);
  font-size:.96rem;
}

.prayer-verse{
  margin:0 0 14px;
  color:#f6c453;
  font-weight:800;
  line-height:1.5;
}

.prayer-text{
  margin:0;
  color:rgba(255,255,255,.90);
  line-height:1.72;
  font-size:1rem;
  white-space:pre-line;
}

.prayer-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  border-radius:14px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  border-color:transparent;
}

.prayer-btn:hover,
.prayer-btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

body.prayer-open{
  overflow:hidden;
}

@media (max-width:640px){
  .prayer-overlay{
    padding:12px;
    align-items:flex-end;
  }

  .prayer-card{
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:24px;
  }

  .prayer-head,
  .prayer-body,
  .prayer-foot{
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width:480px){
  .prayer-card{
    max-height:calc(100dvh - 20px);
  }

  .prayer-body{
    padding-bottom:16px;
  }

  .prayer-foot{
    gap:8px;
  }

  .prayer-btn{
    flex:1 1 100%;
    width:100%;
    text-align:center;
  }
}

/* =========================
   LIGHT THEME — PRAYER CARD
   ========================= */
body[data-theme="light"] .prayer-overlay{
  background:rgba(240,245,255,.50);
}

body[data-theme="light"] .prayer-card{
  color:#0f172a;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.12), transparent 40%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 40%),
    linear-gradient(180deg,#ffffff,#f6f8fc);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}

body[data-theme="light"] .prayer-title .kicker{
  color:rgba(0,0,0,.52);
}

body[data-theme="light"] .prayer-title .sub{
  color:rgba(0,0,0,.62);
}

body[data-theme="light"] .prayer-verse{
  color:#a16207;
}

body[data-theme="light"] .prayer-text{
  color:#1e293b;
}

body[data-theme="light"] .prayer-btn{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.04);
  color:#0f172a;
}

body[data-theme="light"] .prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  color:#fff;
}

/* =========================
   SMART HEADER STATUS VISIBILITY
   ========================= */
.hdr-title small{
  display:inline !important;
}

@media (max-width:720px){
  .hdr-title small{
    display:none !important;
  }
}

@media (max-width:860px){
  .hdr-title{
    max-width:65vw !important;
  }
}

@media (min-width:521px){
  .hdr-mid{
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    justify-content:center !important;
    pointer-events:none;
  }

  .hdr-mid *{
    pointer-events:auto;
  }

  .hdr-left,
  .hdr-right{
    flex:0 0 auto;
  }
}

/* =========================
   SIDEBAR SEARCH BUTTON
   ========================= */
.side-search-wrap{
  margin:0 0 12px;
}

.side-search-btn{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#fff;
  border-radius:16px;
  min-height:46px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.side-search-btn:hover{
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(59,130,246,.08));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

.side-search-btn:active{
  transform:translateY(1px) scale(.995);
}

.side-search-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.34), 0 12px 26px rgba(0,0,0,.22);
}

/* =========================
   CONVERSATION SEARCH MODAL
   ========================= */
.jw-search-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:78px 18px 18px;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:19000;
}

.jw-search-modal.open{
  opacity:1;
  pointer-events:auto;
}

.jw-search-card{
  width:min(1000px, calc(100vw - 36px));
  max-height:min(76vh, 760px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:rgba(13,18,30,.94);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 56px rgba(0,0,0,.40);
  backdrop-filter:saturate(160%) blur(16px);
}

.jw-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.jw-search-head-left{
  min-width:0;
}

.jw-search-title{
  font-size:15px;
  font-weight:950;
  letter-spacing:-.01em;
}

.jw-search-sub{
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,.58);
}

.jw-search-input-wrap{
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.jw-search-input{
  width:100%;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:0 16px;
  outline:none;
  font-size:17px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.jw-search-input::placeholder{
  color:rgba(255,255,255,.44);
}

.jw-search-input:focus{
  border-color:rgba(124,58,237,.72);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
}

.jw-search-body{
  overflow:auto;
  padding:8px 10px 12px;
}

.jw-search-results{
  display:grid;
  gap:8px;
}

.jw-search-empty{
  padding:18px 12px;
  color:rgba(255,255,255,.64);
}

.jw-search-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

.jw-search-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
}

.jw-search-item.current{
  border-color:rgba(246,196,83,.32);
  background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(59,130,246,.08));
}

.jw-search-meta{
  min-width:0;
}

.jw-search-name{
  font-weight:950;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.jw-search-time{
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,.56);
}

.jw-search-snippet{
  margin-top:7px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.80);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.jw-search-snippet mark{
  background:rgba(246,196,83,.18);
  color:#fff;
  border-radius:6px;
  padding:0 .12em;
}

.jw-search-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.jw-search-open{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.jw-search-open:hover{
  background:rgba(255,255,255,.08);
}

body.search-open{
  overflow:hidden;
}

/* =========================
   LIGHT THEME — SEARCH
   ========================= */
body[data-theme="light"] .side-search-btn{
  color:#0b1220;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,247,251,.90));
}

body[data-theme="light"] .jw-search-modal{
  background:rgba(15,23,42,.24);
}

body[data-theme="light"] .jw-search-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
}

body[data-theme="light"] .jw-search-title{
  color:#0b1220;
}

body[data-theme="light"] .jw-search-sub,
body[data-theme="light"] .jw-search-time{
  color:rgba(11,18,32,.54);
}

body[data-theme="light"] .jw-search-input{
  color:#0b1220;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}

body[data-theme="light"] .jw-search-input::placeholder{
  color:rgba(11,18,32,.40);
}

body[data-theme="light"] .jw-search-item{
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.07);
}

body[data-theme="light"] .jw-search-item.current{
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(59,130,246,.06));
  border-color:rgba(124,58,237,.16);
}

body[data-theme="light"] .jw-search-name,
body[data-theme="light"] .jw-search-snippet{
  color:#0b1220;
}

body[data-theme="light"] .jw-search-open{
  color:#0b1220;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}

body[data-theme="light"] .jw-search-empty{
  color:rgba(11,18,32,.58);
}

@media (max-width:640px){
  .jw-search-modal{
    padding:72px 10px 10px;
  }

  .jw-search-card{
    width:calc(100vw - 20px);
    max-height:82vh;
    border-radius:22px;
  }

  .jw-search-item{
    grid-template-columns:1fr;
  }

  .jw-search-actions{
    justify-content:flex-start;
  }
}

/* =========================
   HISTORY SEARCH BAR
   ========================= */
.jw-history-search-wrap{
  padding:8px 4px 12px;
}

.jw-history-search-input{
  width:100%;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:0 14px;
  font-size:14px;
  font-weight:700;
  outline:none;
}

.jw-history-search-input::placeholder{
  color:rgba(255,255,255,.46);
}

.jw-history-search-input:focus{
  border-color:rgba(124,58,237,.72);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
}

body[data-theme="light"] .jw-history-search-input{
  color:#0b1220;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}

/* =========================
   SIDE TOOLS NEW CHAT SEARCH HISTORY PRAYER
   ========================= */

.side-tools{
  display:grid;
  gap:10px;
  margin:0 0 14px;
}

.side-tool-btn{
  appearance:none;
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  border-radius:18px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.side-tool-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

.side-tool-btn:active{
  transform:translateY(0) scale(.985);
}

.side-tool-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.28);
  border-color:rgba(124,58,237,.34);
}

.side-tool-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.10));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.side-tool-icon .icon{
  width:20px;
  height:20px;
}

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

.side-tool-text strong{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
  color:#fff;
}

.side-tool-text small{
  font-size:12px;
  color:rgba(255,255,255,.62);
  line-height:1.35;
}

body[data-theme="light"] .side-tool-btn{
  background:rgba(255,255,255,.72) !important;
  color:#0b1220 !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .side-tool-btn:hover{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.10) !important;
}

body[data-theme="light"] .side-tool-icon{
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(59,130,246,.06)) !important;
  border:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="light"] .side-tool-text strong{
  color:#0b1220 !important;
}

body[data-theme="light"] .side-tool-text small{
  color:rgba(11,18,32,.56) !important;
}

/* =========================================================
   PERFECT + TRUE
   COMPOSER + LEGAL FOOTER FINAL OVERRIDE
   Add at the very end of the CSS
   ========================================================= */

:root{
  --jw-composer-bottom: 24px;
  --jw-composer-bottom-mobile: 18px;
  --jw-composer-bottom-small: 14px;
  --jw-legal-font: 11px;
  --jw-legal-font-mobile: 10px;
}

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

.composer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--jw-composer-bottom) !important;
  z-index: 9999;
  padding-left: 14px;
  padding-right: 14px;

  /* critical: do not push composer down with safe-area */
  padding-bottom: calc(14px + var(--vvBottom)) !important;

  background: transparent !important;
  pointer-events: none;
}

/* keep the composer itself above everything */
.composer-inner{
  position: relative;
  z-index: 2;
}

/* subtle bridge glow only */
.composer::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-8px;
  height:18px;
  border-radius:999px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(124,58,237,.08) 0%,
      rgba(59,130,246,.04) 46%,
      transparent 78%
    );
  filter: blur(10px);
  opacity: .75;
}

/* =========================
   LEGAL FOOTER
   ========================= */

.jw-legal-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0 !important;
  z-index: 9998;
  pointer-events: none;
  text-align: center;

  /* footer sits low and quiet */
  padding: 0 12px calc(6px + env(safe-area-inset-bottom)) !important;

  /* remove visible strip / bar look */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.jw-legal-footer::before,
.jw-legal-footer::after{
  display: none !important;
  content: none !important;
}

.jw-legal-inner{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  max-width: min(100%, 980px);
  margin: 0 auto;

  font-size: var(--jw-legal-font);
  line-height: 1.15;
  font-weight: 600;
  color: rgba(255,255,255,.40);
  text-shadow: none;
  opacity: 1;
  padding: 0;
}

.jw-legal-text{
  opacity: .82;
}

.jw-legal-divider{
  opacity: .18;
}

.jw-legal-link{
  color: rgba(255,255,255,.52);
  text-decoration: none;
  font-weight: 700;
  transition: color .15s ease, opacity .15s ease;
}

.jw-legal-link:hover{
  color: rgba(255,255,255,.82);
  opacity: 1;
}

.jw-legal-link:active{
  opacity: .72;
}

/* =========================
   LIGHT THEME
   ========================= */

body[data-theme="light"] .jw-legal-inner{
  color: rgba(15,23,42,.38);
}

body[data-theme="light"] .jw-legal-link{
  color: rgba(15,23,42,.52);
}

body[data-theme="light"] .jw-legal-link:hover{
  color: rgba(15,23,42,.82);
}

body[data-theme="light"] .composer::after{
  background:
    radial-gradient(
      ellipse at center,
      rgba(124,58,237,.06) 0%,
      rgba(59,130,246,.03) 46%,
      transparent 78%
    );
  opacity: .6;
}

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

@media (max-width: 640px){
  .composer{
    bottom: var(--jw-composer-bottom-mobile) !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(10px + var(--vvBottom)) !important;
  }

  .composer::after{
    left: 16%;
    right: 16%;
    bottom: -7px;
    height: 14px;
    filter: blur(8px);
    opacity: .68;
  }

  .jw-legal-footer{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
  }

  .jw-legal-inner{
    font-size: var(--jw-legal-font-mobile);
    gap: 6px;
    line-height: 1.12;
  }
}

@media (max-width: 420px){
  .composer{
    bottom: var(--jw-composer-bottom-small) !important;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: calc(8px + var(--vvBottom)) !important;
  }

  .composer::after{
    left: 14%;
    right: 14%;
    bottom: -6px;
    height: 12px;
    filter: blur(7px);
    opacity: .62;
  }

  .jw-legal-footer{
    padding-bottom: calc(3px + env(safe-area-inset-bottom)) !important;
  }

  .jw-legal-inner{
    font-size: 9.6px;
    gap: 5px;
    line-height: 1.08;
  }
}

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

@media (prefers-reduced-motion: reduce){
  .jw-legal-link{
    transition: none;
  }
}

/* =========================================================
   NO WRAP FOOTER — SINGLE LINE
   ========================================================= */

.jw-legal-inner{
  flex-wrap: nowrap !important;   /* 🔥 stop wrapping */
  white-space: nowrap;            /* keep everything on one line */
  overflow: hidden;               /* prevent layout break */
  text-overflow: ellipsis;        /* graceful cut if needed */
  max-width: 100%;
}

/* tighten spacing so it fits */
.jw-legal-inner{
  gap: 6px;
}

/* slightly reduce text size on mobile so it fits clean */
@media (max-width: 640px){
  .jw-legal-inner{
    font-size: 10px;
    letter-spacing: -0.01em;
  }
}

@media (max-width: 420px){
  .jw-legal-inner{
    font-size: 9.5px;
    gap: 5px;
  }
}

/* make links truncate nicely instead of wrapping */
.jw-legal-link{
  flex-shrink: 0;
}

/* allow main text to compress if needed */
.jw-legal-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* optional: reduce divider spacing for tight screens */
.jw-legal-divider{
  margin: 0 2px;
}

/* =========================================================
   SIDEBAR PROFILE DOCK + COMPOSER FIX
   Add at the very end of the CSS
   ========================================================= */

/* -------------------------
   SIDEBAR LAYOUT FIX
   ------------------------- */
.sidebar{
  display:flex;
  flex-direction:column;
  gap:0;
}

.side-section{
  margin-top:14px;
}

/* let old chats area take available space */
.side-section[aria-label="Old chats"]{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#sideChats{
  min-height:0;
}

/* -------------------------
   PROFILE DOCK AT BOTTOM
   ------------------------- */
.side-profile-dock{
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:14px;
  padding-top:12px;
  background:
    linear-gradient(180deg, rgba(7,11,21,0), rgba(7,11,21,.82) 24%, rgba(7,11,21,.94) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.side-profile-card{
  margin:0;
}

.side-profile-btn{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color:#fff;
  border-radius:22px;
  padding:18px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

.side-profile-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow:
    0 18px 36px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.side-profile-btn:active{
  transform:translateY(1px);
}

.side-profile-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.45),
    0 18px 36px rgba(0,0,0,.28);
}

.side-profile-avatar{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #facc15, #eab308);
  color:#fff;
  font-weight:950;
  font-size:17px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 10px 18px rgba(0,0,0,.16);
}

.side-profile-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.side-profile-name{
  font-size:17px;
  line-height:1.15;
  font-weight:950;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.side-profile-plan{
  font-size:13px;
  line-height:1.15;
  color:rgba(255,255,255,.66);
  font-weight:800;
}

/* light theme */
body[data-theme="light"] .side-profile-dock{
  background:
    linear-gradient(180deg, rgba(247,249,252,0), rgba(247,249,252,.86) 24%, rgba(247,249,252,.96) 100%);
}

body[data-theme="light"] .side-profile-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border-color:rgba(15,23,42,.08);
  color:#0f172a;
}

body[data-theme="light"] .side-profile-name{
  color:#0f172a;
}

body[data-theme="light"] .side-profile-plan{
  color:rgba(15,23,42,.58);
}
/* =========================================================
   SIDEBAR BOTTOM PROFILE DOCK
   ========================================================= */

.sidebar{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:0 !important;
}

.sidebar-main{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  padding-bottom:14px;
}

.side-profile-dock{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  padding:10px 14px 12px; /* slightly tighter */
  border-top:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(
      180deg,
      rgba(7,11,21,0) 0%,
      rgba(7,11,21,.72) 28%,
      rgba(7,11,21,.96) 100%
    );
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}

.side-profile-card{
  margin:0 !important;
}

.side-profile-btn{
  width:100%;
  min-height:72px;      /* was 96px */
  padding:12px 14px;    /* tighter vertical padding */
  border-radius:18px;   /* slightly shorter visual profile */
}

.side-profile-avatar{
  width:40px;
  height:40px;
  min-width:40px;
  font-size:15px;
}

.side-profile-name{
  font-size:15px;
  line-height:1.1;
}

.side-profile-plan{
  font-size:12px;
  line-height:1.1;
}

/* make sure scrolling content never hides under dock */
#sideChats,
.side-chats{
  padding-bottom:8px;
}

/* =========================================================
   COMPOSER ALIGNMENT FIX
   ========================================================= */

.composer{
  left:calc(var(--sidebarW) + 14px);
  right:14px;
  bottom:18px;
  padding:0;
  padding-bottom:calc(10px + var(--vvBottom));
  background:transparent;
}

.composer-inner{
  max-width:none;
  width:100%;
  margin:0;
}

.jw-legal-footer{
  left:calc(var(--sidebarW) + 14px);
  right:14px;
  padding-left:0;
  padding-right:0;
}

/* sidebar closed = center composer/footer in full page */
body.sidebar-closed .composer{
  left:50%;
  right:auto;
  width:min(var(--composerMax), calc(100vw - 28px));
  transform:translateX(-50%);
}

body.sidebar-closed .composer-inner{
  width:100%;
  margin:0 auto;
}

body.sidebar-closed .jw-legal-footer{
  left:50%;
  right:auto;
  width:min(var(--composerMax), calc(100vw - 28px));
  transform:translateX(-50%);
}

/* mobile / tablet */
@media (max-width:900px){
  .composer{
    left:10px;
    right:10px;
    bottom:14px;
    padding-bottom:calc(8px + var(--vvBottom));
    transform:none;
    width:auto;
  }

  .jw-legal-footer{
    left:10px;
    right:10px;
    transform:none;
    width:auto;
  }

  body.sidebar-closed .composer{
    left:10px;
    right:10px;
    width:auto;
    transform:none;
  }

  body.sidebar-closed .jw-legal-footer{
    left:10px;
    right:10px;
    width:auto;
    transform:none;
  }
}

@media (max-width:640px){
  .side-profile-dock{
    padding:8px 12px 10px;
  }

  .side-profile-btn{
    min-height:64px;
    padding:10px 12px;
    border-radius:16px;
  }

  .side-profile-avatar{
    width:36px;
    height:36px;
    min-width:36px;
    font-size:14px;
  }

  .side-profile-name{
    font-size:14px;
  }

  .side-profile-plan{
    font-size:11.5px;
  }

  .composer{
    left:8px;
    right:8px;
    bottom:12px;
  }

  .jw-legal-footer{
    left:8px;
    right:8px;
  }

  body.sidebar-closed .composer,
  body.sidebar-closed .jw-legal-footer{
    left:8px;
    right:8px;
    width:auto;
    transform:none;
  }
}

/* MOBILE: hide composer + legal footer when side menu is open */
@media (max-width:900px){
  body.sidebar-open .composer{
    opacity:0;
    pointer-events:none;
    transform:translateY(16px);
  }

  body.sidebar-open .jw-legal-footer{
    opacity:0;
    pointer-events:none;
  }

  .composer{
    transition:opacity .18s ease, transform .18s ease;
  }

  .jw-legal-footer{
    transition:opacity .18s ease;
  }
}

.mobile-compose-fab{
  position:fixed;
  right:14px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:10050;
  width:56px;
  height:56px;
  border:none;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg, #7C3AED, #3B82F6);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 8px 20px rgba(124,58,237,.25);
}

.mobile-compose-fab svg{
  width:24px;
  height:24px;
  display:block;
  stroke:#fff;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (min-width:901px){
  .mobile-compose-fab{
    display:none !important;
  }
}

/* =========================================================
   PROFILE SHEET (for More > Profile and sidebar profile)
   Keeps header profile link unchanged
   ========================================================= */

.jw-profile-sheet{
  position:fixed;
  inset:0;
  z-index:19000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.jw-profile-sheet.open{
  opacity:1;
  pointer-events:auto;
}

.jw-profile-sheet-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:min(84vh, 760px);
  overflow:auto;
  border-radius:28px;
  background:
    radial-gradient(540px 200px at 10% 0%, rgba(124,58,237,.12), transparent 56%),
    radial-gradient(520px 180px at 100% 0%, rgba(59,130,246,.10), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(10,14,26,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(18px) scale(.985);
  transition:transform .18s ease;
  color:#fff;
  padding-top:10px;
}

.jw-profile-sheet.open .jw-profile-sheet-card{
  transform:translateY(0) scale(1);
}

/* ========================================
   CLOSE BUTTON — TRUE TOP RIGHT
   ======================================== */
.jw-profile-sheet-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .14s ease, transform .14s ease, border-color .14s ease;
}

.jw-profile-sheet-close:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
}

.jw-profile-sheet-close:active{
  transform:translateY(1px);
}

.jw-profile-sheet-close svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ========================================
   HEADER
   ======================================== */
.jw-profile-sheet-head{
  display:block;
  position:relative;
  padding:18px 18px 10px;
}

.jw-profile-auth-block{
  padding-right:56px; /* reserve space for X */
}

.jw-profile-auth-intro{
  margin-bottom:10px;
}

.jw-profile-sheet-user{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.jw-profile-sheet-avatar{
  width:52px;
  height:52px;
  min-width:52px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #facc15, #eab308);
  color:#fff;
  font-size:18px;
  font-weight:950;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 10px 20px rgba(0,0,0,.18);
}

.jw-profile-sheet-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.jw-profile-sheet-meta strong{
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.jw-profile-sheet-meta small{
  font-size:13px;
  line-height:1.2;
  color:rgba(255,255,255,.62);
  font-weight:700;
}

.jw-profile-auth-copy{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(255,255,255,.66);
}

/* ========================================
   BODY
   ======================================== */
.jw-profile-sheet-body{
  padding:0 12px 14px;
}

.jw-profile-sheet-divider{
  height:1px;
  margin:10px 8px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.jw-profile-item{
  width:100%;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:14px 12px;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.jw-profile-item:hover{
  background:rgba(255,255,255,.06);
}

.jw-profile-item:active{
  transform:translateY(1px);
}

.jw-profile-item-ic{
  width:34px;
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.jw-profile-item-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.jw-profile-item-text strong{
  font-size:15px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.01em;
}

.jw-profile-item-text small{
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.62);
  font-weight:600;
}

.jw-profile-item-danger .jw-profile-item-text strong{
  color:#fecaca;
}

.jw-profile-item-danger .jw-profile-item-text small{
  color:rgba(254,202,202,.72);
}

/* ========================================
   AUTH ROWS
   ======================================== */
.jw-auth-row{
  position:relative;
  background:linear-gradient(
    135deg,
    rgba(124,58,237,.12),
    rgba(59,130,246,.08)
  );
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.12);
}

.jw-auth-row:hover{
  background:linear-gradient(
    135deg,
    rgba(124,58,237,.18),
    rgba(59,130,246,.14)
  );
  border-color:rgba(255,255,255,.12);
}

.jw-auth-google .jw-profile-item-ic,
.jw-auth-apple .jw-profile-item-ic,
.jw-auth-microsoft .jw-profile-item-ic{
  background:rgba(255,255,255,.06);
}

.jw-auth-icon{
  width:18px;
  height:18px;
  display:block;
}

.jw-auth-icon-apple{
  width:17px;
  height:17px;
}

.jw-auth-row::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  box-shadow:0 0 0 4px rgba(255,255,255,.04);
}

/* ========================================
   LIGHT MODE
   ======================================== */
body[data-theme="light"] .jw-profile-sheet{
  background:rgba(15,23,42,.16);
}

body[data-theme="light"] .jw-profile-sheet-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92)),
    #fff;
  border-color:rgba(15,23,42,.08);
  color:#0f172a;
}

body[data-theme="light"] .jw-profile-sheet-meta small,
body[data-theme="light"] .jw-profile-item-text small,
body[data-theme="light"] .jw-profile-auth-copy{
  color:rgba(15,23,42,.58);
}

body[data-theme="light"] .jw-profile-sheet-close{
  border-color:rgba(15,23,42,.08);
  background:rgba(15,23,42,.04);
  color:#0f172a;
}

body[data-theme="light"] .jw-profile-item{
  color:#0f172a;
}

body[data-theme="light"] .jw-profile-item:hover{
  background:rgba(15,23,42,.05);
}

body[data-theme="light"] .jw-profile-item-ic{
  background:rgba(15,23,42,.04);
}

/* ========================================
   DESKTOP
   ======================================== */
@media (min-width:901px){
  .jw-profile-sheet{
    align-items:flex-start;
    justify-content:flex-start;
    padding:82px 16px 16px calc(var(--sidebarW) + 18px);
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .jw-profile-sheet-card{
    width:390px;
    border-radius:24px;
  }
}

/* ========================================
   MOBILE
   ======================================== */
@media (max-width:640px){
  .jw-profile-sheet{
    padding:10px;
    align-items:flex-end;
  }

  .jw-profile-sheet-card{
    width:100%;
    max-height:min(86vh, 760px);
    border-radius:24px;
    padding-top:8px;
  }

  .jw-profile-sheet-head{
    padding:16px 14px 8px;
  }

  .jw-profile-auth-block{
    padding-right:52px; /* reserve space for X */
  }

  .jw-profile-sheet-close{
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .jw-profile-sheet-avatar{
    width:46px;
    height:46px;
    min-width:46px;
    font-size:17px;
  }

  .jw-profile-sheet-meta strong{
    font-size:16px;
  }

  .jw-profile-item{
    padding:13px 10px;
    gap:12px;
  }

  .jw-profile-item-ic{
    width:32px;
    min-width:32px;
    height:32px;
  }

  .jw-profile-item-text strong{
    font-size:14px;
  }

  .jw-profile-item-text small{
    font-size:11.5px;
  }
}

/* ========================================
   SIGN-IN BUTTON SPACING
   ======================================== */

.jw-profile-auth-block{
  display:flex;
  flex-direction:column;
  gap:12px; /* clean, consistent spacing */
}

/* tighten visual rhythm slightly on mobile */
@media (max-width:640px){
  .jw-profile-auth-block{
    gap:10px;
  }
}