/* OPTIONAL — full styles for Codecraft CSS tab */

/* =========================================================
   OPTIONAL — Prototype styles (internal, combined master file)
   ========================================================= */

/* ========== DESIGN TOKENS (palette) ========== */
:root{
  --oat:#ECE4D5; --paper:#F7F2E9; --walnut:#8A6A4F; --amber:#E0A24E;
  --sienna:#C06B3A; --green:#66734F; --blue:#5E7C89; --pink:#A85E67; --ink:#34302A;
  --cork:#C7A26B;
}

/* ========== RESET ========== */
*{ margin:0; padding:0; box-sizing:border-box; }

/* ========== STAGE (centers the phone; flexbox per assignment) ========== */
#stage{
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--oat);
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  overflow:hidden;
}
#phone-scaler{
  transform:scale(var(--fit));
  transform-origin:center center;
}
:root{ --fit:0.95; }
@media (min-height: 42rem){ :root{ --fit:0.86; } }
@media (min-height: 46rem){ :root{ --fit:0.94; } }
@media (min-height: 50rem){ :root{ --fit:1.00; } }
@media (min-height: 54rem){ :root{ --fit:1.06; } }
@media (min-height: 60rem){ :root{ --fit:1.14; } }
@media (max-height: 40rem){ :root{ --fit:0.80; } }
@media (max-height: 34rem){ :root{ --fit:0.68; } }

/* ========== PHONE FRAME (rem-based, not px) ========== */
#phone{
  width:22.5rem; height:48.75rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(224,162,78,0.22) 0%, rgba(224,162,78,0) 46%),
    radial-gradient(circle at 12% 90%, rgba(192,107,58,0.18) 0%, rgba(192,107,58,0) 44%),
    radial-gradient(circle at 90% 80%, rgba(78,110,106,0.16) 0%, rgba(78,110,106,0) 46%),
    linear-gradient(160deg, #EFE6D6 0%, #E4D8C3 100%);
  border-radius:2.75rem; border:0.56rem solid var(--ink);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  box-shadow:0 1.1rem 2.5rem rgba(52,48,42,0.35);
}
#glow{
  position:absolute; top:0; left:0; right:0; height:7.5rem;
  background:radial-gradient(circle at 50% 0%, rgba(224,162,78,0.20) 0%, rgba(224,162,78,0) 75%);
  pointer-events:none; z-index:0;
}

/* ========== SCREEN SWITCHING ========== */
.screen{ display:none; flex:1; flex-direction:column; position:relative; z-index:1; height:100%; }
.active-screen{ display:flex; animation:fadeIn 0.35s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ========== SHARED CHROME (status bar, branding, menu) ========== */
.statusbar{
  height:1.5rem; display:flex; align-items:center; justify-content:space-between;
  padding:0.6rem 1.4rem 0; font-size:0.7rem; font-weight:600; color:var(--ink);
  position:relative; z-index:1;
}
/* branding-row: houses the nav arrows on either side of the app name/tagline,
   using the whitespace that was already there instead of adding new rows */
.branding-row{ display:flex; align-items:center; justify-content:space-between; padding:0 1.05rem; position:relative; z-index:1; }
.branding-row .branding{ flex:1; padding:0; }
.branding{ text-align:center; padding:0 1.25rem; position:relative; z-index:1; }
.appname{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:#A02020; letter-spacing:0.04em; line-height:1; }
.tagline{ font-family:'Caveat', cursive; font-size:1.05rem; color:#2C3E4A; font-weight:600; line-height:1.3; }

/* nav arrows: quiet chevrons, no fill/border, sit in the branding row's
   existing whitespace so nothing else has to move or shrink */
.navarrow{ background:none; border:none; padding:0; width:1.2rem; height:1.2rem;
  font-size:1rem; line-height:1; color:var(--walnut); opacity:0.55; cursor:pointer; flex-shrink:0; }
.navarrow:hover{ opacity:0.9; }
.navarrow.right{ text-align:right; }

.menurow{ display:flex; justify-content:space-between; align-items:center; padding:0 1.15rem; margin-top:-0.3rem; position:relative; z-index:2; }
.hamburger{ font-size:1.15rem; color:var(--ink); cursor:pointer; background:none; border:none; }
.journalbtn{ display:flex; align-items:center; gap:0.25rem; background:none; border:none; cursor:pointer;
  color:var(--walnut); font-family:'Nunito', system-ui, sans-serif; font-size:0.68rem; font-weight:700; }
.journalbtn .jicon{ font-size:0.95rem; }

.pagetitle{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.4rem; font-weight:400; color:var(--ink);
  text-align:center; padding:0.25rem 1rem 0.1rem; line-height:1.15; }
.quote{ font-family:'Caveat', cursive; font-size:1rem; color:var(--sienna); font-weight:600;
  text-align:center; padding:0 1.9rem 0.4rem; }

/* ========== SHARED COMPANION BAR (bottom of every screen) ========== */
.companion{ background:var(--ink); color:var(--paper); border-radius:1.13rem;
  margin:0.75rem 0.9rem 0.9rem; padding:1rem 1.13rem; display:flex; align-items:center; gap:0.6rem;
  min-height:4rem; box-shadow:0 0.4rem 1rem rgba(52,48,42,0.4); position:relative; z-index:1; cursor:pointer; }
.companion::before{ content:""; position:absolute; top:0; left:1rem; right:1rem; height:0.13rem; background:var(--walnut); border-radius:0.13rem; }
.companion input{ flex:1; min-width:0; border:none; background:transparent; color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:1rem; outline:none; line-height:1.4; height:1.5rem; padding:0; }
.companion input::placeholder{ color:#c9c2b6; }
.companion .sendbtn{ background:var(--sienna); color:var(--paper); border:none; border-radius:0.63rem;
  padding:0.56rem 1rem; font-size:0.8rem; font-weight:700; cursor:pointer; }

.content{ flex:1; overflow-y:auto; padding:0.4rem 0.9rem 0; display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1; }

/* ========== INTRO SCREEN ========== */
#screen-intro{ justify-content:space-between; --tag-x:50%; --tag-y:72%; --tag-size:1.15rem; --tag-color:#F7F2E9; position:relative; overflow:hidden; }
#screen-intro .branding, #screen-intro .greeting, #screen-intro .intro-actions{ position:relative; z-index:1; }
.couch-area{ height:34%; display:flex; align-items:center; justify-content:center; padding:2.9rem 1.9rem 0; }
.couch-wrap{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
.couch-wrap img{ width:100%; height:auto; filter:drop-shadow(0 0.6rem 1rem rgba(52,48,42,0.16)); }
.couch-tagline{ position:absolute; top:var(--tag-y); left:var(--tag-x); transform:translate(-50%,-50%);
  font-family:'Caveat', cursive; font-size:var(--tag-size); color:var(--tag-color); font-weight:600;
  white-space:nowrap; text-align:center; text-shadow:0 0.06rem 0.2rem rgba(52,48,42,0.4); pointer-events:none; }
.couch-area img{ width:100%; height:auto; filter:drop-shadow(0 0.6rem 1rem rgba(52,48,42,0.16)); }
.greeting{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 2rem; text-align:center; }
.greeting h1{ font-family:'Dangrek', system-ui, sans-serif; font-size:2.6rem; color:var(--ink); font-weight:400; line-height:1.25; }
.intro-actions{ display:flex; flex-direction:column; align-items:center; padding:0 1.9rem 2.75rem; }
.intro-actions button{ width:14.5rem; border:none; border-radius:62.4rem; padding:0.88rem 0;
  font-family:'Nunito', system-ui, sans-serif; font-size:1.06rem; font-weight:600; cursor:pointer; letter-spacing:0.02em; }
.intro-actions .share{ background:var(--sienna); color:var(--paper); margin-bottom:0.75rem; box-shadow:0 0.4rem 1rem rgba(192,107,58,0.32); }
.intro-actions .dont{ background:transparent; color:var(--ink); border:0.13rem solid var(--walnut); }

#phone.on-welcome .statusbar{ display:none; }

#phone.on-checkin{ }
#phone.on-checkin::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(168,94,103,0.5) 0%, transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(224,162,78,0.5) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(224,162,78,0.45) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(168,94,103,0.45) 0%, transparent 55%);
  opacity:0.5; }
#phone.on-checkin .statusbar{ position:relative; z-index:1; }

/* ========== WELCOME / SPLASH SCREEN ========== */
#screen-welcome{ justify-content:center; align-items:center; padding:1.5rem 1.5rem 2rem; text-align:center; gap:1rem; position:relative; overflow:hidden; }
.spotlights{ position:absolute; inset:0; top:-2.5rem; pointer-events:none; z-index:0; }
.spotlights span{ position:absolute; width:95%; height:85%; filter:blur(22px); }
.spotlights .c-tl{ top:-16%; left:-20%;  background:radial-gradient(circle at 0% 0%, var(--pink) 0%, rgba(168,94,103,0.5) 34%, transparent 68%); }
.spotlights .c-tr{ top:-16%; right:-20%; background:radial-gradient(circle at 100% 0%, var(--amber) 0%, rgba(224,162,78,0.5) 34%, transparent 68%); }
.spotlights .c-bl{ bottom:-16%; left:-20%; background:radial-gradient(circle at 0% 100%, var(--amber) 0%, rgba(224,162,78,0.5) 34%, transparent 68%); }
.spotlights .c-br{ bottom:-16%; right:-20%;background:radial-gradient(circle at 100% 100%, var(--pink) 0%, rgba(168,94,103,0.5) 34%, transparent 68%); }
.spotlights .top-wash{ top:0; left:0; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(168,94,103,0.35), rgba(224,162,78,0.28) 50%, rgba(168,94,103,0.35)); filter:blur(30px); }
.welcome-couch{ width:96%; max-width:23rem; height:auto; position:relative; z-index:1;
  filter:drop-shadow(0 0.8rem 1.6rem rgba(52,48,42,0.4)); }
.welcome-hook{
  --l1-x: 17%;
  --l2-x: 15%;
  --l3-x: 15%;
  --hook-y: -3rem;
  --step-gap: 0.5rem;
  font-family:'Dangrek', system-ui, sans-serif; font-size:1.35rem; font-weight:400; color:black;
  line-height:1.6; position:relative; z-index:1; text-shadow:0 0.06rem 0.3rem rgba(247,242,233,0.6);
  margin-top:calc(0.5rem + var(--hook-y)); display:flex; flex-direction:column; align-items:stretch;
  text-align:left; width:100%; max-width:20rem; gap:var(--step-gap);
}
.welcome-hook .l1{ margin-left:var(--l1-x); }
.welcome-hook .l2{ margin-left:var(--l2-x); }
.welcome-hook .l3{ margin-left:var(--l3-x); font-size:1.5rem; color:black; line-height:1.5; white-space:nowrap; }
.welcome-hook .opt{ color:#A02020; }
.welcome-hook em{ font-style:italic; color:black; font-size:1.35rem; }
.welcome-hook .dots{ font-size:1.9rem; letter-spacing:0.1em; color:black; }
.welcome-hook .edots{ font-size:1.35rem; letter-spacing:0.1em; color:black; font-style:italic; }
.welcome-sub{ font-family:'Caveat', cursive; font-size:1.5rem; color:#2C3E4A; font-weight:600; z-index:1; text-shadow:0 0.06rem 0.3rem rgba(247,242,233,0.7); position:absolute; top:1.8rem; left:0; right:0; }

/* ========== HOME SCREEN ========== */
.mapbox{ height:11.25rem; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden;
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); position:relative; cursor:pointer; }
.mapbox img{ width:100%; height:100%; object-fit:cover; display:block; }
.map-tap{ position:absolute; bottom:0.5rem; right:0.5rem; background:rgba(52,48,42,0.8); color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:0.6rem; font-weight:700; padding:0.2rem 0.5rem; border-radius:0.75rem; }
.share-bar{ width:100%; background:var(--green); color:var(--paper); border:0.13rem solid var(--ink);
  border-radius:0.6rem; padding:0.6rem; font-family:'Dangrek', system-ui, sans-serif; font-size:0.95rem;
  cursor:pointer; box-shadow:0 0.2rem 0.5rem rgba(52,48,42,0.22); }
.share-bar:active{ transform:scale(0.99); }
.highlights-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.4rem; }
.highlight{ background:var(--paper); border-radius:0.5rem; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.18);
  border-left:0.19rem solid var(--green); font-size:0.56rem; font-weight:600; color:var(--ink); padding:0.4rem; line-height:1.2;
  height:2.6rem; display:flex; align-items:center; }
.highlight.b{ border-left-color:var(--blue); }
.highlight.p{ border-left-color:var(--pink); }
.divider{ height:0.13rem; background:var(--walnut); opacity:0.35; border-radius:0.13rem; margin:0.13rem 0.4rem; }
.subheader{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; font-weight:400; color:var(--ink); text-align:center; }
.navlinks{ display:flex; justify-content:space-around; gap:0.5rem; }
.navlink{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; cursor:pointer; }
.navlink span{ font-size:0.63rem; font-weight:700; color:var(--ink); text-align:center; }
.shape{ width:4rem; height:4rem; background-size:cover; background-position:center; box-shadow:0 0.25rem 0.6rem rgba(52,48,42,0.28); }
.shape.circle{ border-radius:50%; border:0.13rem solid var(--ink); }
.shape.squircle{ border-radius:1.4rem; border:0.13rem solid var(--ink); }
.shape.blob{ border:0.13rem solid var(--ink); border-radius:58% 42% 63% 37% / 41% 46% 54% 59%; }

/* ========== MIND / BODY SCREEN ========== */
.hero{ height:11.25rem; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); }
.hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.listwrap{ position:relative; }
.optionlist{ background:var(--paper); border-radius:0.75rem; border:0.13rem solid var(--ink);
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); overflow-y:auto; max-height:14rem; }
.optionrow{ display:flex; align-items:center; justify-content:space-between; padding:0.94rem 1rem;
  min-height:3rem; border-bottom:0.06rem solid var(--oat); cursor:pointer; }
.optionrow:last-child{ border-bottom:none; }
.optionrow .label{ font-size:0.94rem; font-weight:700; color:var(--ink); }
.optionrow .chevron{ font-size:1rem; color:var(--sienna); font-weight:700; }

/* ========== CHAT ROOMS SCREEN ========== */
.roomstab{ display:flex; align-items:center; gap:0.3rem; background:var(--blue); color:var(--paper);
  border:none; border-radius:62.4rem; padding:0.3rem 0.7rem; font-size:0.7rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.campfire{ display:flex; align-items:center; gap:0.6rem; color:var(--paper); border-radius:0.75rem;
  border:0.13rem solid var(--ink); padding:1rem; cursor:pointer; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.25);
  position:relative; overflow:hidden; min-height:5.75rem; }
.campfire .cf-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.campfire::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(52,48,42,0.72) 0%, rgba(52,48,42,0.45) 55%, rgba(52,48,42,0.25) 100%); }
.campfire .cf-text{ flex:1; position:relative; z-index:2; }
.campfire .cf-title{ font-size:1.06rem; font-weight:700; line-height:1.1; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-sub{ font-family:'Caveat', cursive; font-size:0.94rem; color:#f6e3d4; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-go{ font-size:1.13rem; font-weight:700; position:relative; z-index:2; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.feedlabel{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:var(--ink); padding-left:0.13rem; }

.post.meetup{ border:0.13rem solid var(--green); background:#f2f5ec; }
.meetup-tag{ display:inline-block; background:var(--green); color:var(--paper); font-family:'Nunito', system-ui, sans-serif;
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:0.15rem 0.5rem; border-radius:0.4rem; margin-bottom:0.4rem; }
.meetup-title{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.1rem; color:var(--ink); margin-bottom:0.3rem; }
.meetup-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:0.5rem; font-family:'Nunito', system-ui, sans-serif; font-size:0.72rem; color:var(--walnut); font-weight:600; }
.meetup-join{ background:var(--green); color:var(--paper); padding:0.3rem 0.7rem; border-radius:0.6rem; cursor:pointer; }

.dog-photo{ background:linear-gradient(160deg,#bcd3e0,#9fbccb); position:relative; }
.dog{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:5.5rem; height:5rem; }
.dog-ear{ position:absolute; top:1rem; width:1.6rem; height:2.6rem; background:#8a5a3c; border-radius:50% 50% 45% 45%; }
.dog-ear.l{ left:0.1rem; transform:rotate(-16deg); }
.dog-ear.r{ right:0.1rem; transform:rotate(16deg); }
.dog-face{ position:absolute; top:0.8rem; left:50%; transform:translateX(-50%); width:3.6rem; height:3.8rem; background:#a9713f; border-radius:48% 48% 45% 45%; }
.dog-eye{ position:absolute; top:1.1rem; width:0.5rem; height:0.5rem; background:#34302A; border-radius:50%; }
.dog-eye.l{ left:0.8rem; } .dog-eye.r{ right:0.8rem; }
.dog-snout{ position:absolute; bottom:0.5rem; left:50%; transform:translateX(-50%); width:1.5rem; height:1.2rem; background:#c99a6a; border-radius:50%; }
.dog-snout::after{ content:""; position:absolute; top:0.15rem; left:50%; transform:translateX(-50%); width:0.6rem; height:0.45rem; background:#34302A; border-radius:50%; }
.post{ background:var(--paper); border-radius:0.75rem; border:0.09rem solid #ddd2bd; box-shadow:0 0.13rem 0.45rem rgba(52,48,42,0.12); padding:0.7rem 0.8rem; }
.post-head{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.avatar{ width:1.6rem; height:1.6rem; border-radius:50%; flex-shrink:0; }
.a1{ background:var(--green); } .a2{ background:var(--pink); } .a3{ background:var(--blue); }
.post-user{ font-size:0.75rem; font-weight:700; color:var(--ink); }
.post-time{ font-size:0.63rem; color:#9c9384; }
.post-body{ font-size:0.78rem; color:var(--ink); line-height:1.4; }
.post-img{ margin-top:0.5rem; height:7.5rem; border-radius:0.5rem; overflow:hidden; background:#cdbfa6; display:flex; align-items:center; justify-content:center; }
.post-img img{ width:100%; height:100%; object-fit:cover; }
.post-actions{ display:flex; gap:1rem; margin-top:0.5rem; }
.post-actions span{ font-size:0.7rem; color:var(--walnut); font-weight:600; }

/* ========== KNOWLEDGE HUB SCREEN ========== */
.sharebtn{ background:var(--green); color:var(--paper); border:none; border-radius:62.4rem;
  padding:0.3rem 0.75rem; font-size:0.7rem; font-weight:700; cursor:pointer; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
/* ===== KNOWLEDGE HUB — ADJUSTABLE KNOBS =====
   Change these 4 numbers to tune the layout yourself:
     --board-height : how tall the corkboard is (smaller = shorter, scrolls sooner)
     --board-top    : gap ABOVE the board (bigger = pushes board down, more room up top)
     --header-drop  : pushes Pin/Knowledge Hub/quote DOWN as a group (bigger = lower)
     --chat-bottom  : gap below the companion chat box (bigger = lifts chat up)
   ============================================= */
#screen-knowledge{ --board-height:22rem; --board-top:1.5rem; --header-drop:0rem; --chat-bottom:0.9rem; }
#screen-knowledge .menurow{ margin-top:var(--header-drop); }
#screen-knowledge .companion{ margin-bottom:var(--chat-bottom); }
.board{ height:var(--board-height); flex-shrink:0; overflow-y:auto; margin:var(--board-top) 0.75rem 0; border-radius:0.75rem; border:0.19rem solid #6f4f2e;
  background-color:var(--cork);
  background-image:
    radial-gradient(rgba(120,85,40,0.35) 0.06rem, transparent 0.1rem),
    radial-gradient(rgba(160,120,70,0.30) 0.06rem, transparent 0.1rem);
  background-size:0.56rem 0.56rem, 0.81rem 0.81rem; background-position:0 0, 0.3rem 0.4rem;
  box-shadow:inset 0 0.13rem 0.6rem rgba(80,55,25,0.4);
  padding:0.75rem 0.6rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; align-content:start; }
.kcard{ background:var(--paper); border-radius:0.38rem; padding:0.56rem 0.56rem 0.6rem; position:relative;
  box-shadow:0 0.2rem 0.5rem rgba(52,48,42,0.3); min-height:6rem; display:flex; flex-direction:column; }
.kcard::before{ content:""; position:absolute; top:-0.3rem; left:50%; transform:translateX(-50%);
  width:0.75rem; height:0.75rem; border-radius:50%; background:radial-gradient(circle at 35% 35%, #f08a8a, #c0392b); box-shadow:0 0.13rem 0.19rem rgba(0,0,0,0.4); }
.kcard:nth-child(3n)::before{ background:radial-gradient(circle at 35% 35%, #7fb3e0, #2c6ca3); }
.kcard:nth-child(3n+1)::before{ background:radial-gradient(circle at 35% 35%, #8fc98f, #4a7d4a); }
.ktype{ font-size:0.53rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.13rem 0.4rem; border-radius:0.25rem; align-self:flex-start; margin-bottom:0.4rem; }
.t-video{ background:#f3d9cf; color:#993c1d; } .t-read{ background:#dbe6d2; color:#3b6d11; }
.t-link{ background:#d5e2ea; color:#185fa5; } .t-audio{ background:#efe0c0; color:#854f0b; }
.t-support{ background:#f4cdd3; color:#993556; }
.kthumb{ height:2.5rem; border-radius:0.25rem; margin-bottom:0.4rem; background:linear-gradient(135deg,#cdbfa6,#b7a68a); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.ktitle{ font-size:0.7rem; font-weight:700; color:var(--ink); line-height:1.25; }
.kmeta{ font-size:0.56rem; color:#9c9384; margin-top:auto; }
.kcard.support{ background:#fbeef0; border:0.09rem solid var(--pink); grid-column:1 / -1; min-height:auto; }
.kcard.support::before{ background:radial-gradient(circle at 35% 35%, #e88f9a, #a83a4a); }
.kcard.support .ktitle{ font-size:0.75rem; }
.kcard.support .kline{ font-size:0.63rem; color:var(--ink); margin-top:0.19rem; }
.kcard.support .kline strong{ color:var(--pink); }

/* ========== COMPANION CHAT SCREEN ========== */
.chathead{ display:flex; align-items:center; gap:0.6rem; padding:0.7rem 1.15rem 0.4rem; position:relative; z-index:1; }
.chathead .cavatar{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; border:0.13rem solid var(--ink); background:var(--paper); }
.chathead .cname{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:var(--ink); line-height:1; }
.chathead .cstatus{ font-family:'Caveat', cursive; font-size:1rem; color:var(--green); }
.thread{ flex:1; min-height:0; overflow-y:auto; padding:0.5rem 0.9rem; display:flex; flex-direction:column; gap:0.6rem; position:relative; z-index:1; }
.msg{ max-width:76%; padding:0.63rem 0.8rem; font-size:0.8rem; line-height:1.4; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.15); font-family:'Nunito', system-ui, sans-serif; }
.msg.bot{ align-self:flex-start; background:var(--paper); color:var(--ink); border-radius:0.88rem 0.88rem 0.88rem 0.25rem; border:0.06rem solid #e0d5c0; }
.msg.you{ align-self:flex-end; background:var(--sienna); color:var(--paper); border-radius:0.88rem 0.88rem 0.25rem 0.88rem; }
.msgrow{ display:flex; align-items:flex-end; gap:0.44rem; max-width:100%; align-self:flex-start; }
.msgrow .mini{ width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; border:0.09rem solid var(--ink); background:var(--paper); flex-shrink:0; }

/* feeling chips (Companion screen — the showOptions() menu trigger) */
.feelings{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0.1rem 0 0.2rem; }
.fchip{ background:var(--paper); border:0.09rem solid #ddd2bd; border-radius:1.3rem; padding:0.4rem 0.75rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; font-weight:700; color:var(--ink); cursor:pointer; }
.fchip.pos{ border:0.13rem solid var(--green); color:#3b6d11; }
.fchip.other{ background:var(--oat); border:0.09rem dashed var(--walnut); color:var(--walnut); }

/* ========== LEFT DRAWER (app menu) ========== */
#scrim{ position:absolute; inset:0; background:rgba(52,48,42,0.45); opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:5; }
#scrim.open{ opacity:1; pointer-events:auto; }
#menu-drawer{ position:absolute; top:0; left:0; height:100%; width:13.75rem; background:var(--paper);
  border-right:0.19rem solid var(--ink); transform:translateX(-100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.5rem 1rem; box-shadow:0.5rem 0 1.5rem rgba(52,48,42,0.3); }
#menu-drawer.open{ transform:translateX(0); }
#menu-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:#A02020; margin-bottom:0.25rem; }
#menu-drawer .dsub{ font-family:'Caveat', cursive; font-size:1.2rem; color:#2C3E4A; margin-bottom:1rem; }
.navitem{ display:flex; align-items:center; gap:0.6rem; padding:0.8rem 0.5rem; border-radius:0.5rem; cursor:pointer; font-size:0.9rem; font-weight:600; color:var(--ink); border-bottom:0.06rem solid var(--oat); }
.navitem:last-child{ border-bottom:none; }
.navitem .ndot{ width:0.6rem; height:0.6rem; border-radius:50%; flex-shrink:0; }

/* ========== RIGHT DRAWER (topic rooms) ========== */
#rooms-drawer{ position:absolute; top:0; right:0; height:100%; width:13.13rem; background:var(--paper);
  border-left:0.19rem solid var(--ink); transform:translateX(100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.25rem 0.9rem; box-shadow:-0.5rem 0 1.5rem rgba(52,48,42,0.3); overflow-y:auto; }
#rooms-drawer.open{ transform:translateX(0); }
#rooms-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; color:var(--ink); margin-bottom:0.25rem; }
#rooms-drawer .dsub{ font-family:'Caveat', cursive; font-size:1.2rem; color:var(--sienna); margin-bottom:0.9rem; }
.roomrow{ display:flex; align-items:center; gap:0.5rem; padding:0.7rem 0.5rem; border-radius:0.5rem; cursor:pointer; }
.roomrow .roomdot{ width:0.56rem; height:0.56rem; border-radius:50%; flex-shrink:0; }
.roomrow .rn{ font-size:0.8rem; font-weight:600; color:var(--ink); }
.drawer-close{ position:absolute; top:0.9rem; right:0.9rem; font-size:1.13rem; color:var(--ink); cursor:pointer; background:none; border:none; }

/* ========== JOURNAL PANEL (slides up from the bottom, Companion screen) ========== */
#journal-panel{ position:absolute; left:0; right:0; bottom:0; height:78%; background:var(--paper);
  border-top:0.19rem solid var(--ink); border-radius:1.4rem 1.4rem 0 0; transform:translateY(100%);
  transition:transform 0.28s; z-index:6; display:flex; flex-direction:column; padding:1.1rem 1.15rem;
  box-shadow:0 -0.5rem 1.5rem rgba(52,48,42,0.3); }
#journal-panel.open{ transform:translateY(0); }
.journal-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.journal-head h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.1rem; color:var(--ink); }
.journal-sub{ font-family:'Caveat', cursive; font-size:1rem; color:var(--green); font-weight:600; margin-top:-0.2rem; }
.journal-entries{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; margin:0.5rem 0; }
.jentry{ background:#fff; border:0.06rem solid #e0d5c0; border-radius:0.63rem; padding:0.5rem 0.63rem; }
.jentry-top{ display:flex; justify-content:space-between; font-size:0.63rem; color:#9c9384; }
.jentry-feeling{ font-weight:700; }
.jentry-feeling.pos{ color:#3b6d11; }
.jentry-feeling.neu{ color:var(--sienna); }
.jentry-note{ font-size:0.7rem; color:var(--ink); margin-top:0.19rem; }
.journal-compose{ border-top:0.06rem solid #ddd2bd; padding-top:0.63rem; display:flex; flex-direction:column; gap:0.4rem; }
.journal-compose label{ font-size:0.7rem; color:var(--walnut); font-weight:600; }
.journal-compose textarea{ width:100%; border:0.06rem solid #ddd2bd; border-radius:0.63rem; padding:0.5rem 0.63rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; color:var(--ink); resize:none; }
.journal-savebtn{ align-self:flex-end; background:var(--sienna); color:var(--paper); border:none; border-radius:0.5rem;
  padding:0.4rem 0.9rem; font-size:0.68rem; font-weight:700; cursor:pointer; }

/* =====================================================================
   PER-SCREEN LAYOUT KNOBS
   Every screen has 3 knobs you can tune yourself. Change ONLY the numbers.
     --content-top : gap ABOVE the main content (bigger = content sits lower,
                     more room for the title/quote/buttons up top)
     --header-drop : moves the menu row (hamburger + any buttons) DOWN
     --chat-bottom : gap below the companion chat box (bigger = lifts chat up)
   Companion has an extra one:
     --compose-height : how tall the big "what's on your mind" box is
   ===================================================================== */

/* ----- HOME ----- */
#screen-home{ --content-top:0.4rem; --header-drop:0rem; --chat-bottom:0.9rem; }
#screen-home .menurow{ margin-top:var(--header-drop); }
#screen-home .content{ gap:1.15rem; padding-top:var(--content-top); }
#screen-home .companion{ margin-bottom:var(--chat-bottom); }
#screen-home .divider{ margin-top:0.7rem; }

/* ----- MIND / BODY ----- */
#screen-mindbody{ --content-top:0.4rem; --header-drop:0rem; --chat-bottom:0.9rem; }
#screen-mindbody .menurow{ margin-top:var(--header-drop); }
#screen-mindbody .content{ padding-top:var(--content-top); }
#screen-mindbody .companion{ margin-bottom:var(--chat-bottom); }
#screen-mindbody .optionlist{ max-height:19rem; }

/* ----- CHAT ROOMS ----- */
#screen-chatrooms{ --content-top:0.4rem; --header-drop:0rem; --chat-bottom:2.5rem; }
#screen-chatrooms .menurow{ margin-top:var(--header-drop); }
#screen-chatrooms .content{ gap:0.85rem; padding-top:var(--content-top); padding-bottom:0; }
#screen-chatrooms .companion{ margin-top:0.35rem; margin-bottom:var(--chat-bottom); }

/* ----- COMPANION (top can feel crowded — tune these) ----- */
#screen-companion{ --header-drop:0rem; --thread-top:0.4rem; --chat-bottom:3rem; --compose-height:10rem; }
#screen-companion .menurow{ margin-top:var(--header-drop); }
#screen-companion .thread{ padding-top:var(--thread-top); }
#screen-companion .companion{ min-height:var(--compose-height); padding:1.3rem 1.4rem; border-radius:1.5rem; flex-direction:column; align-items:stretch; gap:0.6rem; margin:0.75rem 0.9rem var(--chat-bottom); }
#screen-companion .companion textarea{ flex:1; width:100%; border:none; background:transparent; color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:1.3rem; outline:none; resize:none; line-height:1.4; }
#screen-companion .companion textarea::placeholder{ color:#c9c2b6; }
#screen-companion .companion::before{ display:none; }
#screen-companion .companion .sendbtn{ padding:0.9rem 1.7rem; font-size:1.05rem; align-self:flex-end; }

@media (max-width: 600px){
  #stage{ padding:0; }
  #phone-scaler{ transform:none; width:100%; height:100dvh; }
  #phone{
    width:100%; height:100dvh;
    border:none; border-radius:0;
    box-shadow:none;
  }
  .statusbar{ padding-top:0.4rem; }
}