:root{
  --bg:#f9e7e7;
  --accent:#ee4d36;
  --teal:#55c4bb;
  --text:#09080a;
  --muted:#f3d9d9;
  --maxw:640px;
  --border:2px;
  --radius:0;             /* square corners */
  --app-h: 100vh;         /* updated via JS to visible viewport height */
  --composer-h: 88px;     /* updated via JS to input bar height */
}

/* No page scroll; only chat scrolls */
html,body{
  height:100%;
  margin:0;
  background:var(--muted);
  color:var(--text);
  overflow:hidden;
  font-family:"Futura PT", Futura, "Avenir Next", Avenir, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.app{
  height:var(--app-h);           /* visible viewport height (handles mobile keyboard) */
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
  display:flex;
  flex-direction:column;
  gap:12px;
  box-sizing:border-box;
  overscroll-behavior:contain;
}

/* ===== Top bar (sticky) ===== */
.topbar{
  position:sticky;
  top:env(safe-area-inset-top, 0);
  z-index:10;
  background:transparent;
  display:grid;
  grid-template-columns: 1fr auto; /* title left, toggle right */
  align-items:center;
  gap:12px;
  padding:8px 0 2px;
}

/* ===== Brand ===== */
.brand{
  display:inline-flex;                 /* sit content in a single row */
  align-items:baseline;                /* align to text baseline */
  gap:10px;
  margin:0;
  line-height:1.05;
  font-weight:700;
  font-size: 2rem;                     /* title size */
  letter-spacing:.3px;
  white-space:nowrap;                  /* prevent wrapping */
}
.brand .title{
  font-weight:900;
  color:var(--teal);
  text-shadow:-3px 3px 0 var(--accent);
  letter-spacing:1px;
}
.brand .brandmark{
  height:1em;                          /* match text height */
  width:auto;
  object-fit:contain;
  display:inline-block;
  vertical-align:baseline;             /* align with text baseline */
  transform: translateY(0.03em);       /* tiny nudge for optical alignment */
  image-rendering:auto;
}
@media (max-width:768px){
  .brand{ font-size:1.6rem; }          /* scales both text & logo together */
}

/* ===== Toggle ===== */
.toggle{
  display:inline-flex;
  border:var(--border) solid var(--accent);
  padding:3px;
  gap:4px;
  background:var(--bg);
  border-radius:4px;
}
.toggle button{
  all:unset;
  padding:8px 12px;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  border-radius:4px;
}
@media (max-width:560px){
  .toggle button{ padding:6px 8px; font-size:.75rem; }
}
.toggle .on{ background:var(--teal); color:#fff; }
.toggle .off{ background:transparent; color:var(--accent); }

.accent-strong{ color:var(--accent); font-weight:800; }
.accent-medium{ color:var(--accent); font-weight:600; }
.accent-teal-medium{ color:var(--teal); font-weight:600; }

/* ===== Divider ===== */
.divider{
  flex:0 0 auto;
  display:block;
  width:100%;
  height:auto;
  margin:6px 0 6px;
  object-fit:contain;
}
/* Keep divider visible on mobile (was previously hidden) */
@media (max-width:560px){
  .divider{ margin:4px 0; }
}

/* ===== Chat panel (fills remaining height) ===== */
.panel{
  flex:1 1 auto;
  min-height:0; /* critical to allow inner scroll to size */
  border:var(--border) solid var(--accent);
  border-radius:4px;
  background:var(--bg);
  padding: clamp(14px, 2vw, 20px);
  overflow:hidden; /* wrapper has no scrollbars */
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom: 1rem; /* buffer handled by sticky input padding */
}

/* Only this scrolls */
.scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:4px; /* space for scrollbar */
  /* keep last message clear of the sticky input bar */
  padding-bottom: calc(var(--composer-h) + 16px);
}

/* Messages */
.msg{
  margin:1rem 0 0 0; /* space between messages */
  font-size:clamp(15px, 1.15vw, 18px);
  line-height:1.25;
}

.msg.user{
  padding:1rem 0; /* vertical padding for breathing */
  border-bottom:var(--border) solid var(--accent);
  border-top:var(--border) solid var(--accent);
  border-radius:var(--radius);
  max-width:min(720px, 90%);
  background:transparent;
}
.accent-teal{ color:var(--teal); font-weight:800; }

/* Tighten bullet lists inside bot/user messages */
.msg ul {
  margin: 6px 0 8px;         /* less vertical air above/below lists */
  padding-left: 1.15em;      /* neat indent */
}

.msg li {
  margin: 2px 0;             /* smaller gap between bullets */
  line-height: 0.75;          /* slightly tighter than paragraph text */
}

/* Paragraph rhythm inside AI messages */
.msg.ai p {
  margin: 0 0 8px;           /* consistent end-space per paragraph */
}

/* Normalize breaks: treat <br><br> as one 'paragraph gap' visually */
.msg.ai br + br {
  line-height: 0;            /* prevents the double-break from feeling too tall */
}


/* Typing indicator */
.typing {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 1em;
}
.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.5;
  animation: bounce 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(1) { animation-delay: 0s; }
.typing .dot:nth-child(2) { animation-delay: .15s; }
.typing .dot:nth-child(3) { animation-delay: .3s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%          { transform: translateY(-6px); opacity: 1; }
}

/* Typing / loading bubble */
.msg.ai.typing {
  opacity: 0.9;
}

.msg.ai .dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.msg.ai .dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: var(--accent, #32e6b7); /* fallback if --accent missing */
  animation: gd-bounce 1.2s infinite ease-in-out;
}

.msg.ai .dots span:nth-child(2) { animation-delay: 0.15s; }
.msg.ai .dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes gd-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%          { transform: translateY(-4px); opacity: 1; }
}

/* Reduced motion: keep it subtle */
@media (prefers-reduced-motion: reduce) {
  .msg.ai .dots span { animation: none; opacity: .7; }
}

/* ===== Input bar (sticky bottom) ===== */
.inputbar{
  position:sticky;
  bottom:0;
  z-index:10;
  display:flex;
  gap:10px;
  align-items:center;
  background:var(--bg); /* ensure solid behind inputs on iOS */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.inputbar .field{
  flex:1 1 auto; min-width:0; /* prevents wrapping */
  display:flex; align-items:center; gap:10px;
  border:var(--border) solid var(--accent);
  border-radius:4px;
  background:var(--bg);
  padding:8px 10px;
}
.field input{
  all:unset;
  flex:1 1 auto; min-width:0;
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.2;
  color:var(--text);
}
.field{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Mic button */
.mic {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  height: 28px;
  width: 28px;
  transition: transform 0.12s ease, color 0.12s ease;
}

.mic:hover {
  transform: scale(1.1);
}

.mic:active {
  transform: scale(0.92);
}

/* Listening state = pulsing glow */
.mic.listening {
  color: var(--accent);
  animation: mic-pulse 1.2s infinite ease-in-out;
}

/* Recording state = teal + steady glow */
.mic.recording {
  color: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  border-radius: 50%;
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.mic img, .send img {
  display: block;
  height: 24px;
  width: 24px;
}

/* Send button */

.send {
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
  border: var(--border) solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.send:hover:not(:disabled) {
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.send:active:not(:disabled) {
  transform: translateY(2px) scale(0.97);
  background: color-mix(in srgb, var(--accent) 90%, black 10%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset;
}

.send:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
/* ===== Hint text ===== */

.hint{
  font-size:clamp(12px, .95vw, 14px);
  text-align:center;
  padding-top:6px;
  padding-bottom:6px;
}
.hint .b{ color:var(--teal); font-weight:600; }
.hint .a{ color:var(--accent); font-weight:600; }

/* About Modal */
.card p {
  margin-bottom: 1rem; /* Instead of <br> tags */
}



/* Staff password modal */
#staffModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  padding: 12px; /* prevent edge clipping on small screens */
}

#staffModal * {
  box-sizing: border-box; /* keep widths sane */
}

#staffModal .card {
  background: #111;
  color: #fff;
  width: min(92vw, 420px); /* a touch wider & safer */
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

#staffModal h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  letter-spacing: .02em;
}

#staffModal label {
  font-size: 13px;
  opacity: .9;
  display: block;
  margin-bottom: 8px;
}

#staffModal input {
  display: block;
  width: 100%;          /* full width inside the card */
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0c0c0c;
  color: #fff;
}

#staffModal .row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;      /* avoid button overflow on tiny screens */
}

#staffModal button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  background: #1f1f1f;
  color: #fff;
  cursor: pointer;
}

#staffModal button.primary {
  background: var(--accent);  /* <-- fixed: add semicolon */
  color: #061617;
  font-weight: 600;
}

/* Desktop horizontal breathing */
@media (min-width:1100px){
  .app{ padding-inline:56px; }
}

/* ===== Compact rhythm & consistent gaps (added) ===== */

/* Consistent single gap between any two messages 
#chat .msg + .msg {
  margin-top: 10px;
} */

/* Tight inner rhythm for multi-bubble assistant replies, if used */
#chat .msg .bubble + .bubble {
  margin-top: 8px;
}

/* Trim default margins inside messages so lines don’t drift apart */
#chat .msg p,
#chat .msg ul,
#chat .msg ol {
  margin: 4px 0;
}

#chat .msg li {
  margin: 2px 0;
}

/* Ensure the first message never gets extra spacing */
#chat .msg:first-child {
  margin-top: 0;
}
/* --- Spirit Guide: quick splash (revised to avoid flash) --- */
#sg-splash{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--muted, #f3d9d9); /* fully covers page immediately */
  z-index: 10000;
  pointer-events: none;
  opacity: 1;                         /* <-- was 0; start visible to block page flash */
}

#sg-splash img{
  width: clamp(96px, 12vw, 160px);
  height: auto;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.18));
  transform: scale(.85);
  opacity: 0;                         /* image itself fades in via animation */
}

/* Run both: image “pop” + overlay fade-out */
#sg-splash.show{
  animation: sg-fade 720ms ease forwards;
}
#sg-splash.show img{
  animation: sg-pop 620ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes sg-pop{
  0%   { transform: scale(.85) rotate(-2deg); opacity: 0; }
  55%  { transform: scale(1.08) rotate(0);   opacity: 1; }
  100% { transform: scale(1.00);             opacity: 1; }
}
@keyframes sg-fade{
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #sg-splash.show,
  #sg-splash.show img{ animation: none; }
  #sg-splash{ opacity: 0; } /* skip overlay if user prefers reduced motion */
}