/* ============================================================
   Ember — warm, cozy, cream-paper identity
   All colours live in the tokens below; tweak them here.
   ============================================================ */

:root {
  /* Paper & ink */
  --paper:        #faf6ef;   /* background paper                */
  --paper-glow:   #fffdf8;   /* soft radial glow at the top     */
  --paper-2:      #f3ece0;   /* secondary paper                 */
  --card:         #ffffff;   /* panels / cards                  */
  --border:       #e8dfd1;   /* light border                    */
  --border-2:     #ded3c1;   /* stronger border                 */
  --ink:          #2c2621;   /* primary text                    */
  --ink-soft:     #6f665c;   /* secondary text                  */
  --ink-dim:      #9a9088;   /* placeholders, fine print        */

  /* Mode accents */
  --ember:        #e2622f;   /* Normal — ember orange           */
  --ember-soft:   #f4a05a;
  --ember-wash:   #fbe9dc;
  --sage:         #5f8a5f;   /* Private — sage green            */
  --sage-wash:    #e8efe4;
  --slate:        #7d798f;   /* Incognito — slate               */
  --slate-wash:   #ecebf0;

  /* Active accent — repointed by [data-mode] below */
  --accent:       var(--ember);
  --accent-wash:  var(--ember-wash);

  /* Shadows: soft & brown-tinted, never grey */
  --shadow-sm: 0 1px 3px rgba(90, 60, 30, .08);
  --shadow-md: 0 4px 16px rgba(90, 60, 30, .10);
  --shadow-lg: 0 8px 32px rgba(90, 60, 30, .14);

  /* Type */
  --font-body:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

/* The active mode re-tints the whole app through --accent */
body[data-mode="normal"]    { --accent: var(--ember); --accent-wash: var(--ember-wash); }
body[data-mode="private"]   { --accent: var(--sage);  --accent-wash: var(--sage-wash);  }
body[data-mode="incognito"] { --accent: var(--slate); --accent-wash: var(--slate-wash); }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* cream paper with a soft glow at the top */
  background:
    radial-gradient(120% 55% at 50% 0%, var(--paper-glow) 0%, var(--paper) 70%)
    var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;               /* the <main> scrolls, not the body */
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  flex: none;
}

.plan-chip {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: var(--shadow-sm);
}
.plan-chip strong { color: var(--ember); font-weight: 600; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn.subtle { border: none; background: transparent; box-shadow: none; }

/* ============================================================
   Main scroll area
   ============================================================ */
.main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS momentum scrolling */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* ---------- Start screen ---------- */
.start-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  gap: 30px;
}
.start-screen[hidden] { display: none; }

.greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: .2px;
}
.greeting-flame { width: 34px; height: 34px; }

/* Mode picker cards */
.mode-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(680px, 100%);
}
@media (max-width: 560px) {
  .mode-picker { grid-template-columns: 1fr; }   /* stack on phones */
}

.mode-card {
  text-align: left;
  font-family: inherit;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.mode-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.mode-desc { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* Each card's dot carries its own mode colour */
.mode-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mode-card[data-mode="normal"]    .mode-dot { background: var(--ember); }
.mode-card[data-mode="private"]   .mode-dot { background: var(--sage);  }
.mode-card[data-mode="incognito"] .mode-dot { background: var(--slate); }

/* Selected card tints in its own wash */
.mode-card.selected { box-shadow: var(--shadow-md); }
.mode-card.selected[data-mode="normal"]    { border-color: var(--ember); background: var(--ember-wash); }
.mode-card.selected[data-mode="private"]   { border-color: var(--sage);  background: var(--sage-wash);  }
.mode-card.selected[data-mode="incognito"] { border-color: var(--slate); background: var(--slate-wash); }

/* ---------- Conversation ---------- */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 16px 24px;
  width: min(760px, 100%);
  margin: 0 auto;
}

/* “● Private chat started” pill */
.mode-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--accent-wash);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 4px 0;
}
.mode-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Messages */
.msg { display: flex; gap: 10px; }

.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 18px 18px 6px 18px;
  max-width: 82%;
}

.msg.ai { align-items: flex-start; }
.msg.ai .avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-top: 2px;
}
.msg.ai .avatar img { width: 16px; height: 16px; }
.msg.ai .bubble { max-width: 88%; padding-top: 3px; }

.bubble {
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.bubble img.sent-image {
  display: block;
  max-width: 220px;
  border-radius: 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}

/* blinking cursor while streaming */
.bubble.streaming::after {
  content: "▍";
  color: var(--accent);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.bubble.error { color: #a3392a; background: #fbeae4; border-radius: 12px; }

/* ============================================================
   Composer
   ============================================================ */
.composer-wrap {
  flex: none;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}

.composer {
  width: min(760px, 100%);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 10px;
}

.composer-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  background: transparent;
  max-height: 150px;          /* auto-grow cap (matched in JS) */
  padding: 2px 4px 6px;
}
.composer-input::placeholder { color: var(--ink-dim); }

.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.composer-left, .composer-right { display: flex; align-items: center; gap: 6px; }

.model-label {
  font-size: 12.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  user-select: none;
}

.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: 14px;
  background: var(--accent);      /* recolours with the mode */
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn:active:not(:disabled) { transform: scale(.94); }

/* pending image attachment thumbnail */
.attach-preview { position: relative; }
.attach-preview img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  display: block;
}
.attach-remove {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-size: 12px; line-height: 1;
  cursor: pointer;
}

.disclaimer {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-dim);
  margin: 8px 0 0;
}
.disclaimer-accent { color: var(--accent); }  /* recolours with the mode */

/* ============================================================
   History drawer
   ============================================================ */
.scrim {
  position: fixed; inset: 0;
  background: rgba(60, 40, 20, .28);
  z-index: 40;
  opacity: 1;
  transition: opacity .2s;
}
.scrim[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(310px, 84vw);
  background: var(--paper);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transform: translateX(-105%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
}
.drawer.open { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
.drawer-flame { width: 22px; height: 22px; }
.drawer-title { font-family: var(--font-serif); font-size: 20px; flex: 1; }

.drawer-new {
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.drawer-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-dim);
  padding: 0 6px 6px;
}

.history-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.history-item:hover, .history-item.active { background: var(--paper-2); }
.history-item .title {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* sage dot marks private chats */
.history-item .private-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); flex: none;
}
.history-item .delete {
  border: none; background: none;
  color: var(--ink-dim); font-size: 15px;
  cursor: pointer; padding: 2px 4px;
}
.history-empty { font-size: 13.5px; color: var(--ink-dim); padding: 8px; }

/* ============================================================
   Memory screen
   ============================================================ */
.memory-screen {
  position: fixed; inset: 0;
  z-index: 55;
  background:
    radial-gradient(120% 55% at 50% 0%, var(--paper-glow) 0%, var(--paper) 70%)
    var(--paper);
  display: flex;
  flex-direction: column;
}
.memory-screen[hidden] { display: none; }

.memory-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.memory-title { font-size: 19px; font-weight: 700; margin: 0; flex: 1; }

/* On/Off switch */
.switch-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; user-select: none;
}
.switch {
  width: 46px; height: 27px;
  border-radius: 999px;
  background: var(--border-2);
  position: relative;
  transition: background .18s;
}
.switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s;
}
#memoryToggle:checked + .switch { background: var(--ember); }
#memoryToggle:checked + .switch::after { transform: translateX(19px); }

.memory-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  width: min(720px, 100%);
  margin: 0 auto;
}

.memory-banner {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--ember-wash);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 0 0 18px;
}
.memory-banner strong { color: var(--ink); }

/* memory disabled → list fades out */
.memory-screen.off .memory-list,
.memory-screen.off .memory-add { opacity: .4; pointer-events: none; }

.memory-list { display: flex; flex-direction: column; gap: 12px; }

.memory-card {
  display: flex;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}
.memory-main { flex: 1; min-width: 0; }
.memory-text { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

.memory-tags { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tag {
  font: inherit;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 3px 10px;
  border: none;
}
.tag.src-ai   { background: var(--ember-wash); color: var(--ember); }
.tag.src-user { background: var(--paper-2);    color: var(--ink-soft); }
.tag.pin {
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  border: 1px dashed var(--border-2);
}
.tag.pin.pinned { color: var(--ember); border: 1px solid var(--ember-soft); background: var(--ember-wash); }

.memory-actions { display: flex; flex-direction: column; gap: 8px; }
.memory-actions .icon-btn { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }

/* inline edit */
.memory-edit { width: 100%; }
.memory-edit textarea {
  width: 100%; font: inherit; font-size: 14.5px;
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 8px 10px; resize: vertical; min-height: 56px; outline: none;
}
.memory-edit textarea:focus { border-color: var(--ember); }
.memory-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.memory-edit-row button {
  font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 10px; padding: 7px 14px; cursor: pointer;
}
.memory-edit-save { background: var(--ember); color: #fff; border: none; }
.memory-edit-cancel { background: transparent; color: var(--ink-soft); border: 1px solid var(--border-2); }

.memory-empty { font-size: 13.5px; color: var(--ink-dim); padding: 6px 2px; }

/* add-your-own row */
.memory-add { display: flex; gap: 10px; margin-top: 16px; }
.memory-add input { flex: 1; }
.memory-add-btn {
  font: inherit; font-size: 14.5px; font-weight: 700;
  color: #fff; background: var(--ember);
  border: none; border-radius: 12px;
  padding: 0 20px; cursor: pointer;
  box-shadow: var(--shadow-md);
}

.memory-demo {
  border-top: 1px dashed var(--border-2);
  margin-top: 22px; padding-top: 14px;
  font-size: 12px; color: var(--ink-dim); line-height: 2;
}

/* “✦ Memory updated” chip — used inline in chats and in the demo footer */
.mem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ember);
  background: var(--ember-wash);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}
.chat-log .mem-chip { align-self: flex-start; margin-left: 38px; }

/* ============================================================
   Settings
   ============================================================ */
.settings {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(60, 40, 20, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.settings[hidden] { display: none; }

.settings-card {
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings-head h2 { font-family: var(--font-serif); font-weight: 400; margin: 0; font-size: 22px; }

.settings-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  margin: 16px 0 6px;
}
.settings-hint { font-size: 12px; color: var(--ink-dim); margin: 0 0 6px; }

.settings-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.settings-input:focus { border-color: var(--accent); }
.settings-memory { min-height: 130px; resize: vertical; line-height: 1.5; }

.settings-save {
  display: block;
  width: 100%;
  margin-top: 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}