/* ============ semantic theme layer ============ */
:root {
  --bg: #0a0a0a; --panel: #111; --panel2: #181818; --border: #2a2a2a;
  --text: #33ff66; --text-dim: #1d9940; --accent: #33ff66;
  --bubble-me: #0d2b16; --bubble-kin: #10241a;
  --input-bg: #050505; --danger: #ff5555;
  --font: "SF Mono", Menlo, Consolas, monospace;
  --radius: 0px;
}
body.theme-aim {
  --bg: #d4d0c8; --panel: #ece9d8; --panel2: #ffffff; --border: #808080;
  --text: #000; --text-dim: #555; --accent: #0a246a;
  --bubble-me: #ffffcc; --bubble-kin: #e2e9f5;
  --input-bg: #fff; --danger: #cc0000;
  --font: Tahoma, Verdana, sans-serif;
  --radius: 3px;
}
body.theme-modern {
  --bg: #101014; --panel: #17171d; --panel2: #1f1f27; --border: #2c2c36;
  --text: #e8e8ee; --text-dim: #8a8a99; --accent: #7c6cff;
  --bubble-me: #7c6cff; --bubble-kin: #262630;
  --input-bg: #1c1c24; --danger: #ff6b6b;
  --font: -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}
body.theme-pink {
  --bg: #fff0f6; --panel: #fff7fb; --panel2: #ffe4f0; --border: #f5c2d8;
  --text: #5c2440; --text-dim: #b8829c; --accent: #ec4899;
  --bubble-me: #ec4899; --bubble-kin: #ffe4f0;
  --input-bg: #ffffff; --danger: #e0426b;
  --font: "SF Pro Rounded", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;
}
body.theme-pink { background: linear-gradient(160deg, #fff0f6 0%, #ffdcec 45%, #f8e7ff 100%) fixed; }
body.theme-pink #sidebar, body.theme-pink #tabbar, body.theme-pink #chatHeader,
body.theme-pink #chatInputRow, body.theme-pink #journalInputRow { background: rgba(255,247,251,.8); backdrop-filter: blur(6px); }
body.theme-pink #logo { background: linear-gradient(90deg, #f9a8d4, #ec4899); color: #fff; border-bottom: none; }
body.theme-pink .msg.me { color: #fff; background: linear-gradient(135deg, #f472b6, #ec4899); box-shadow: 0 3px 10px rgba(236,72,153,.28); }
body.theme-pink .msg.me .who, body.theme-pink .msg.me .ts { color: rgba(255,255,255,.78); }
body.theme-pink .msg.me .action { color: rgba(255,255,255,.85); }
body.theme-pink .msg.kin { box-shadow: 0 2px 8px rgba(236,72,153,.12); }
body.theme-pink .btn.primary { color: #fff; background: linear-gradient(135deg, #f472b6, #ec4899); border-color: #ec4899; }
body.theme-pink .kin-avatar { background: #fff; box-shadow: 0 2px 6px rgba(236,72,153,.18); }
body.theme-pink .kin-item.active { background: #ffe4f0; }
body.theme-pink .j-entry, body.theme-pink #modal { box-shadow: 0 4px 16px rgba(236,72,153,.15); }
body.theme-pink #brandHeart { display: inline; }
#brandHeart { display: none; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size:calc(var(--fs-scale,1)*14px); overflow: hidden;
}

/* CRT scanlines overlay */
body.theme-crt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
body.theme-crt { text-shadow: 0 0 4px rgba(51,255,102,.35); }

#app { display: flex; height: 100%; }

/* ============ sidebar (buddy list) ============ */
#sidebar {
  width: 230px; min-width: 230px; background: var(--panel);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
#logo {
  padding: 14px 12px 10px; font-weight: bold; letter-spacing: 2px;
  border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
}
#logo .brand { cursor: default; }
body.theme-aim #logo { background: linear-gradient(#0a246a, #a6caf0); color: #fff; text-shadow: none; }

#kinList { flex: 1; overflow-y: auto; padding: 6px; }
.kin-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); margin-bottom: 3px;
}
.kin-item:hover { background: var(--panel2); }
.kin-item.active { background: var(--panel2); border-color: var(--accent); }
.kin-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size:calc(var(--fs-scale,1)*18px); flex-shrink: 0;
  background: var(--bubble-kin); border: 2px solid var(--kin-color, var(--accent));
}
.kin-meta { overflow: hidden; }
.kin-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kin-last { font-size:calc(var(--fs-scale,1)*11px); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; }

#sidebarBtns { padding: 8px; border-top: 1px solid var(--border); display: flex; gap: 6px; }

/* ============ main area ============ */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#tabbar {
  display: flex; align-items: center; gap: 4px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.tab {
  padding: 6px 16px; cursor: pointer; border: 1px solid var(--border);
  border-radius: var(--radius); background: transparent; color: var(--text-dim);
  font-family: var(--font); font-size:calc(var(--fs-scale,1)*13px);
}
.tab.active { color: var(--text); border-color: var(--accent); background: var(--panel2); }
#statusChip {
  margin-left: auto; font-size:calc(var(--fs-scale,1)*11px); color: var(--text-dim);
  border: 1px dashed var(--border); padding: 4px 10px; border-radius: var(--radius);
}

/* ============ chat pane ============ */
#chatPane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chatHeader {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; background: var(--panel);
}
#chatHeader .kin-avatar { width: 28px; height: 28px; font-size:calc(var(--fs-scale,1)*15px); }
#chatHeaderName { font-weight: bold; }
#chatHeader .spacer { flex: 1; }
#chatLog { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; padding: 8px 12px; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.msg.me { align-self: flex-end; background: var(--bubble-me); }
body.theme-modern .msg.me { color: #fff; }
.msg.kin { align-self: flex-start; background: var(--bubble-kin); }
.msg .who { font-size:calc(var(--fs-scale,1)*10px); color: var(--text-dim); margin-bottom: 3px; }
body.theme-modern .msg.me .who { color: rgba(255,255,255,.7); }
.msg.system { align-self: center; background: none; color: var(--text-dim); font-size:calc(var(--fs-scale,1)*12px); font-style: italic; max-width: 90%; }
.msg .ts { font-size:calc(var(--fs-scale,1)*9px); color: var(--text-dim); margin-top: 4px; text-align: right; }
body.theme-modern .msg.me .ts { color: rgba(255,255,255,.6); }
.msg .action { font-style: italic; color: var(--text-dim); }
body.theme-modern .msg.me .action { color: rgba(255,255,255,.75); }
#chatSearch {
  width: 130px; padding: 5px 8px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size:calc(var(--fs-scale,1)*12px); outline: none;
}
#chatSearch:focus { border-color: var(--accent); width: 200px; }
.d-add { background: rgba(51, 255, 102, .22); }
.d-del { background: rgba(255, 85, 85, .22); text-decoration: line-through; }
.ab-col { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; font-size:calc(var(--fs-scale,1)*12px); white-space: pre-wrap; line-height: 1.5; max-height: 260px; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 4px; cursor: pointer; }
.pick-row:hover { border-color: var(--accent); }
.pick-row .pick-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trig-chip {
  display: inline-block; padding: 2px 9px; border: 1px solid var(--accent); border-radius: 999px;
  font-size:calc(var(--fs-scale,1)*10px); margin: 0 4px 4px 0; color: var(--accent);
}
.j-entry.off { opacity: .55; }
.j-scope { font-size:calc(var(--fs-scale,1)*10px); color: var(--text-dim); }

/* quick-send bar */
#quickBar { flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--panel); border-top: 1px solid var(--border); align-items: center; }
.snip-chip {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  background: var(--panel2); color: var(--text); font-family: var(--font);
  font-size:calc(var(--fs-scale,1)*12px); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snip-chip:hover { border-color: var(--accent); }
.snip-chip.gen { border-style: dashed; border-color: var(--accent); color: var(--accent); background: transparent; }
.snip-chip.util { color: var(--text-dim); }
.day-sep { align-self: center; font-size:calc(var(--fs-scale,1)*10px); color: var(--text-dim); border: 1px dashed var(--border); border-radius: 999px; padding: 2px 12px; margin: 4px 0; }
.msg { position: relative; }
.msg .pin-btn { position: absolute; top: 2px; right: 4px; background: none; border: none; cursor: pointer; color: var(--text-dim); opacity: 0; font-size:calc(var(--fs-scale,1)*11px); transition: opacity .15s; }
.msg:hover .pin-btn { opacity: .8; }
.msg .pin-btn.pinned { opacity: .9; color: var(--accent); }
.stats-table { width: 100%; border-collapse: collapse; font-size:calc(var(--fs-scale,1)*12px); }
.stats-table th, .stats-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }

#chatInputRow { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); }
#chatInput {
  flex: 1; resize: none; height: 44px; padding: 10px 12px;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size:calc(var(--fs-scale,1)*14px); outline: none;
}
#chatInput:focus { border-color: var(--accent); }

#emptyState {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--text-dim);
}

/* ============ journal pane ============ */
#journalPane { flex: 1; display: none; flex-direction: column; min-height: 0; }
#journalInputRow { padding: 12px; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; gap: 8px; }
#journalInput {
  flex: 1; resize: none; height: 60px; padding: 10px 12px;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size:calc(var(--fs-scale,1)*14px); outline: none;
}
#journalInput:focus { border-color: var(--accent); }
#journalList { flex: 1; overflow-y: auto; padding: 16px; }
.j-entry { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; background: var(--panel); }
.j-ts { font-size:calc(var(--fs-scale,1)*11px); color: var(--text-dim); margin-bottom: 6px; display: flex; justify-content: space-between; }
.j-text { white-space: pre-wrap; line-height: 1.5; }
.j-reaction { margin-top: 10px; padding: 8px 10px; background: var(--bubble-kin); border-radius: var(--radius); font-size:calc(var(--fs-scale,1)*13px); }
.j-reaction .who { font-size:calc(var(--fs-scale,1)*10px); color: var(--text-dim); margin-bottom: 3px; }
.j-actions { margin-top: 8px; display: flex; gap: 6px; }

/* ============ buttons / forms ============ */
.btn {
  padding: 6px 12px; cursor: pointer; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size:calc(var(--fs-scale,1)*12px);
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
body.theme-crt .btn.primary { color: #000; text-shadow: none; }
body.theme-modern .btn.primary { color: #fff; }
body.theme-aim .btn.primary { color: #fff; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 3px 8px; font-size:calc(var(--fs-scale,1)*11px); }

/* ============ modal ============ */
#modalWrap {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 100; align-items: center; justify-content: center;
}
#modalWrap.open { display: flex; }
#modal {
  width: 420px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: 20px;
}
#modal h2 { font-size:calc(var(--fs-scale,1)*15px); margin-bottom: 16px; letter-spacing: 1px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size:calc(var(--fs-scale,1)*11px); color: var(--text-dim); margin-bottom: 5px; letter-spacing: 1px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size:calc(var(--fs-scale,1)*13px); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .hint { font-size:calc(var(--fs-scale,1)*10px); color: var(--text-dim); margin-top: 4px; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.theme-row { display: flex; gap: 8px; }
.theme-row .btn.sel { border-color: var(--accent); background: var(--panel2); }

#buildStamp { position: fixed; bottom: 4px; right: 8px; font-size:calc(var(--fs-scale,1)*9px); color: var(--text-dim); opacity: .6; z-index: 5; }

/* ============ PIN lock ============ */
#lockScreen {
  position: fixed; inset: 0; z-index: 2000; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
#lockScreen.unlocked { display: none; }
#lockTitle { letter-spacing: 4px; font-weight: bold; }
#lockHex { font-size:calc(var(--fs-scale,1)*15px); color: var(--text-dim); letter-spacing: 2px; }
#pinDots { display: flex; gap: 14px; cursor: text; }
.pin-cell {
  width: 34px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size:calc(var(--fs-scale,1)*20px); background: var(--input-bg);
}
.pin-cell.filled { border-color: var(--accent); color: var(--accent); }
#pinInput { position: absolute; opacity: 0; pointer-events: none; }
#pinDots.shake { animation: pinshake .35s; }
.pin-cell.err { border-color: var(--danger); color: var(--danger); }
@keyframes pinshake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}