/*───────────────────────────────────────────────────────────────
  Chattable theme — vellichor woods
  author: Lyrae
  note: these selectors come from Chattable’s docs
───────────────────────────────────────────────────────────────*/

/* --- tokens to match your site --- */
:root{
  --moss:#0a1b18;            /* deep background */
  --moss-2:#2c3633;          /* card bg tint */
  --violet:#635761;          /* accents (subtle) */
  --gold:#e0c97a;            /* firefly gold */
  --cream:#f6f1e7;           /* text */
  --glass: rgba(44,54,51,.75);
  --glass-2: rgba(10,27,24,.55);
  --shadow: 0 8px 32px #0006, 0 1px 8px rgba(224,201,122,.15);
  --radius: 16px;
  --radius-lg: 22px;
  --blur: 6px;
  --font: "EB Garamond", Georgia, serif;
}

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


/* --- frame background inside the iframe --- */
#background{
  background: linear-gradient(180deg, var(--glass) 0%, var(--glass-2) 100%);
  backdrop-filter: blur(var(--blur)) saturate(110%);
  color: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px 12px 18px;
  font-family: var(--font);
  position: relative;
  width: 100% !important;
  height: 80% !important;
  max-width: none !important;
  max-height: none !important;
}

/* growable message feed (whatever wrapper Chattable uses) */
#background > :not(#top_banner):not(#input){
  flex: 1 1 auto;
  min-height: 0;       /* crucial so it can actually shrink */
  overflow: auto;      /* scrolling happens here */
  padding-right: 4px;  /* avoid scrollbar overlaying text */
}


/* remove default purple strip; restyle banner to subtle gold glow */
#top_banner{
  background: linear-gradient(180deg, rgba(224,201,122,.12), rgba(224,201,122,.03));
  color: var(--cream);
  border-radius: 12px;
  padding: 6px 10px;
  margin: 4px 4px 10px;
  font-weight: 600;
  letter-spacing:.3px;
  text-shadow:
    0 0 2px rgba(224,201,122,.6),
    0 0 6px rgba(224,201,122,.35),
    0 0 12px rgba(224,201,122,.15);
}

/* message area */
.allMessages{
  background: transparent;
  color: var(--cream);
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 10px;
  margin: 2px 8px;
}

/* your messages vs others */
.sent  { background: rgba(224,201,122,.10); }
.received { background: rgba(255,255,255,.05); }

/* sender line + body */
.senderInfo{
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}
.msgBody{
  color: var(--cream);
}

/* quotes / replies */
.reply{
  border-left: 3px solid rgba(224,201,122,.4);
  padding-left: 8px;
  margin: 6px 0;
  color: #e8e1d6;
  opacity: .9;
}

/* timestamps + highlights (@you) */
#timestamp{ color: rgba(246,241,231,.7); font-size: .9em; }
.highlight{
  background: rgba(224,201,122,.18);
  color: var(--cream);
  padding: 0 .25em;
  border-radius: 6px;
}

/* pinned messages */
.pinned{
  border: 1px dashed rgba(224,201,122,.35);
  background: rgba(224,201,122,.08);
}

/* emoji sizing & vibe */
.emoji{ width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
.allMessages.containsOnlyEmojis .emoji{ width: 1.8em; height: 1.8em; }

/* input area (note: it's a contenteditable div, not <input>) */
/* input area (contenteditable), sticky at bottom */
#input{
  position: sticky;
  bottom: 10px;
  z-index: 20;

  min-height: 10%;
  max-height: 34vh;
  overflow: auto;

  margin: 10px 4px 0;
  padding: 12px 16px;
  border-radius: 999px;

  background: rgba(246,241,231,.10);      /* creamy glass */
  color: var(--cream);
  outline: 1px solid rgba(224,201,122,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
              0 0 0 2px rgba(224,201,122,.06);
}
#input:focus{
  outline-color: rgba(224,201,122,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              0 0 0 2px rgba(224,201,122,.18);
}
#input:empty::before{
  content: "Send message [Enter] — be kind. no spoilers. ✨";
  color: #d8d1c7;
  opacity: .7;
}


/* floating “scroll to bottom” / “load more” chips */
#scrollToBottom, #loadMore{
  background: rgba(224,201,122,.18);
  color: var(--cream);
  border: 1px solid rgba(224,201,122,.35);
  padding: 6px 10px;
  border-radius: 999px;
}
#scrollToBottom:hover, #loadMore:hover{
  background: rgba(224,201,122,.28);
}

/* emoji tray + button */
#emojiTray{
  background: rgba(44,54,51,.92);
  border: 1px solid rgba(224,201,122,.25);
  border-radius: 12px;
  padding: 8px;
}
.emojiInGrid{ filter: drop-shadow(0 0 6px rgba(224,201,122,.18)); }
#emojiTrayToggle{
  color: var(--gold);
  background: transparent;
}

/* context menu (right-click on messages) */
.ctxMenuOption{
  background: rgba(44,54,51,.96);
  color: var(--cream);
  border-bottom: 1px solid rgba(224,201,122,.15);
}
.ctxMenuOption:hover{
  background: rgba(224,201,122,.14);
}

/* badges */
.mod   { color:#7ad6ff; font-weight:700; }
.owner { color:#ffd27a; font-weight:700; }
.beta  { color:#c6b7ff; font-weight:700; }

/* typing bubble */
#is_typing{
  background: rgba(224,201,122,.14);
  color: var(--cream);
  border: 1px solid rgba(224,201,122,.25);
  border-radius: 12px;
  padding: 4px 8px;
}

/* settings button + window */
#settings{ color: var(--gold); }
#settings:hover{ filter: drop-shadow(0 0 6px rgba(224,201,122,.6)); }

#settingsWindow, #settingsMenu{
  background: rgba(44,54,51,.96);
  color: var(--cream);
  border: 1px solid rgba(224,201,122,.22);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
#name, #dltranscript, #save, #closeSettingsBtn, #account{
  background: rgba(224,201,122,.12);
  color: var(--cream);
  border: 1px solid rgba(224,201,122,.35);
  border-radius: 10px;
  padding: 6px 10px;
}

/* dialogue modals (e.g., !online) */
.dialogueModal{
  background: rgba(44,54,51,.95);
  color: var(--cream);
  border: 1px solid rgba(224,201,122,.25);
  border-radius: 14px;
}

/* subtle borders around the feed */
.msgWrapper{
  border-left: 1px dashed rgba(224,201,122,.12);
  margin-left: 6px;
  padding-left: 6px;
}