/* Zife Communicator - design v3
   Elevated print craft: layered warm paper, engraved guilloche, brass details,
   hand-stamped monogram medallions. Fraunces + Inter, self-hosted. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root {
  --paper: #f1ead7; --panel: #fbf7ea; --panel2: #ece2c8;
  --ink: #1b1815; --ink2: #736a58; --hair: #d5caa9; --hair2: #bfaf8e;
  --accent: #14503c; --accent-ink: #0e3d2d; --accent-soft: #d8e8cf;
  --brass: #8a6420; --brass-soft: #c19a4b;
  --bubble-out: #c3dcb4; --bubble-in: #fffdf6;
  --shadow: 0 1px 2px rgba(27,24,21,.07), 0 1px 1px rgba(27,24,21,.05);
  --danger: #8c3a2b;
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #17130e; --panel: #1f1a13; --panel2: #2a241b;
  --ink: #ece4d2; --ink2: #a09478; --hair: #3a3226; --hair2: #4a4131;
  --accent: #7fc39e; --accent-ink: #9ed8b9; --accent-soft: #22392d;
  --brass: #d4ab5e; --brass-soft: #96793a;
  --bubble-out: #26402f; --bubble-in: #221d15;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --danger: #d08a76;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 400 15px/1.5 'Inter', -apple-system, sans-serif;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* paper grain */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  opacity: .05; background-repeat: repeat; background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--brass-soft); color: var(--ink); }

/* engraved guilloche, tinted via mask */
.guilloche {
  background: currentColor;
  -webkit-mask: url('art/guilloche.svg') center / contain no-repeat;
  mask: url('art/guilloche.svg') center / contain no-repeat;
}

/* ---- header ---- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px 11px; background: var(--accent); color: #f6efdc;
  border-bottom: 2px solid var(--brass);
  box-shadow: 0 3px 0 -1.5px var(--accent), 0 4.5px 0 -2.5px #f6efdc;
}
[data-theme="dark"] #topbar { background: #142a20; color: #ece4d2; box-shadow: 0 3px 0 -1.5px #142a20, 0 4.5px 0 -2.5px var(--brass); }
.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark .mark { width: 36px; height: 36px; color: #f6efdc; border: 1px solid rgba(246,239,220,.55); border-radius: 50%; padding: 3px; background-clip: content-box; }
.wordmark .z { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; color: #f6efdc; letter-spacing: .01em; line-height: 1; }
.wordmark .c { font-size: 10px; font-weight: 600; letter-spacing: .4em; color: var(--brass-soft); text-transform: uppercase; padding-top: 3px; }
#top-right { display: flex; align-items: center; gap: 15px; }
#conn { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e8dfc6; }
#conn .dot { width: 6px; height: 6px; border-radius: 50%; background: #e7a893; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
#conn.on .dot { background: #9fe0bd; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
#theme-toggle { background: none; border: 1px solid rgba(246,239,220,.45); border-radius: 50%; width: 31px; height: 31px; cursor: pointer; color: #f6efdc; display: grid; place-items: center; transition: color .15s, border-color .15s; }
#theme-toggle:hover { color: #fff; border-color: #f6efdc; }
#theme-toggle svg { width: 15px; height: 15px; }

/* ---- layout ---- */
#app { display: flex; height: calc(100% - 60px); }
#chatlist { width: 348px; min-width: 250px; background: var(--panel); border-right: 1px solid var(--hair); overflow-y: auto; }

.chat { padding: 14px 18px 13px; border-bottom: 1px solid var(--hair); cursor: pointer; position: relative; display: flex; gap: 13px; align-items: center; }
.chat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.chat:hover { background: var(--paper); }
.chat.active { background: var(--paper); }
.chat.active::before { background: var(--brass); }
.chat .cbody { flex: 1; min-width: 0; }
.chat .name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17.5px; line-height: 1.25; }
.chat .last { color: var(--ink2); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .when { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); align-self: flex-start; margin-top: 5px; }

/* hand-stamped monogram medallion */
.medal {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px;
  border: 1px solid var(--hair2);
}
.medal::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--hair); }
.medal.t0 { background: #e4ecdf; color: #2a4d3c; }
.medal.t1 { background: #f0e6cf; color: #77602c; }
.medal.t2 { background: #ecdcd2; color: #7d4530; }
.medal.t3 { background: #dde4e8; color: #3b5563; }
[data-theme="dark"] .medal.t0 { background: #26382d; color: #9cc4ae; }
[data-theme="dark"] .medal.t1 { background: #3a3120; color: #c9ab6d; }
[data-theme="dark"] .medal.t2 { background: #3a2822; color: #cf9a7f; }
[data-theme="dark"] .medal.t3 { background: #26313a; color: #93adbd; }

.empty { padding: 72px 28px; text-align: center; color: var(--ink2); }
.empty .rosette { width: 168px; height: 168px; margin: 0 auto 22px; color: var(--accent); opacity: .8; }
.empty .e-text { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--ink); }
.empty .e-sub { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-top: 10px; }

/* ---- chat view ---- */
#chatview { flex: 1; display: flex; flex-direction: column; background: var(--paper); position: relative; }
#chathead { padding: 11px 22px 10px; background: var(--panel); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; gap: 10px; }
#chatname { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; }
#back { display: none; background: none; border: 0; color: var(--ink); font-size: 19px; cursor: pointer; padding: 0 6px 0 0; }

#msgwrap { flex: 1; overflow-y: auto; position: relative; }
#msgwrap::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 460px; height: 460px; max-width: 80%; max-height: 80%;
  background: var(--accent); opacity: .06;
  -webkit-mask: url('art/guilloche.svg') center / contain no-repeat;
  mask: url('art/guilloche.svg') center / contain no-repeat;
  pointer-events: none;
}
[data-theme="dark"] #msgwrap::before { background: #d9cba6; opacity: .05; }
#messages { position: relative; padding: 26px 28px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 100%; }

.day { align-self: center; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); margin: 16px 0 9px; display: flex; align-items: center; gap: 12px; }
.day::before, .day::after { content: ''; width: 52px; height: 1px; background: var(--hair2); }

.msg {
  max-width: 62%; padding: 9px 13px 7px; box-shadow: var(--shadow);
  background: var(--bubble-in); border: 1px solid var(--hair);
  border-radius: 11px 11px 11px 3px; align-self: flex-start;
}
.msg.mine { background: var(--bubble-out); border-color: color-mix(in srgb, var(--accent) 35%, var(--hair)); border-radius: 11px 11px 3px 11px; align-self: flex-end; }
.msg .body { white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px; }
.msg img { max-width: 300px; max-height: 300px; border-radius: 5px; display: block; border: 1px solid var(--hair); }
.msg audio { max-width: 250px; height: 38px; }
.msg .meta { font-family: 'Fraunces', serif; font-style: italic; font-size: 11.5px; color: var(--ink2); text-align: right; margin-top: 4px; }

/* ---- composer ---- */
#composer { display: flex; gap: 9px; align-items: center; padding: 13px 20px; background: var(--panel); border-top: 1px solid var(--hair); }
#composer input[type=text] {
  flex: 1; padding: 11px 15px; font: 400 14.5px 'Inter', sans-serif;
  border: 1px solid var(--hair); border-radius: 6px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 1.5px 3px rgba(27,24,21,.06);
}
[data-theme="dark"] #composer input[type=text] { box-shadow: inset 0 1.5px 3px rgba(0,0,0,.3); }
#composer input[type=text]:focus { outline: none; border-color: var(--brass); }
#composer button {
  background: none; border: 1px solid var(--hair2); border-radius: 6px;
  width: 41px; height: 41px; cursor: pointer; color: var(--ink2);
  display: grid; place-items: center; transition: color .15s, border-color .15s;
}
#composer button:hover { color: var(--accent); border-color: var(--accent); }
#composer button svg { width: 17px; height: 17px; }
#send { background: var(--accent); border-color: var(--accent); color: var(--panel); }
[data-theme="dark"] #send { color: #122019; background: var(--accent); border-color: var(--accent); }
#send:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--panel); }
[data-theme="dark"] #send:hover { color: #14251e; }

#recbar { padding: 12px 20px; background: var(--panel); border-top: 1px solid var(--danger); display: flex; gap: 14px; align-items: center; font-size: 13.5px; }
#recbar .rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
#recbar button { padding: 6px 16px; border: 1px solid var(--hair2); border-radius: 6px; background: none; color: var(--ink); cursor: pointer; font: 500 13px 'Inter', sans-serif; }
#recbar #recstop { background: var(--accent); border-color: var(--accent); color: var(--panel); }

.hidden { display: none !important; }
@media (max-width: 700px) {
  #chatlist { width: 100%; border-right: 0; }
  #chatview { position: fixed; inset: 60px 0 0 0; }
  #back { display: inline; }
  .msg { max-width: 80%; }
  #msgwrap::before { width: 320px; height: 320px; }
}

/* ---- setup ---- */
#setup-btn { background: none; border: 1px solid rgba(246,239,220,.55); border-radius: 50%; width: 31px; height: 31px; cursor: pointer; color: #f6efdc; display: grid; place-items: center; }
#setup-btn svg { width: 15px; height: 15px; }
dialog#setup-dialog { border: 1px solid var(--hair2); border-radius: 8px; background: var(--panel); color: var(--ink); padding: 26px 28px; width: 340px; max-width: 92vw; }
dialog#setup-dialog::backdrop { background: rgba(20,16,10,.45); }
.dlg-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.dlg-sub { font-size: 13px; color: var(--ink2); margin-bottom: 18px; }
#setup-form label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-bottom: 14px; }
#setup-form input { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; font: 400 14px 'Inter', sans-serif; border: 1px solid var(--hair); border-radius: 6px; background: var(--paper); color: var(--ink); }
#setup-form input:focus { outline: none; border-color: var(--brass); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dlg-actions button { padding: 8px 18px; border: 1px solid var(--hair2); border-radius: 6px; background: none; color: var(--ink); cursor: pointer; font: 500 13.5px 'Inter', sans-serif; }
.dlg-actions #setup-save { background: var(--accent); border-color: var(--accent); color: var(--panel); }
[data-theme="dark"] .dlg-actions #setup-save { color: #14251e; }
@media (max-width: 700px) { #conn-text { display: none; } }

/* Pairing overlay */
#pairing {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 247, 240, 0.96);
}
#pairing.hidden { display: none; }
.pair-card {
  background: #fffdf8;
  border: 1px solid #d8cdb4;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(60, 50, 30, 0.18);
  padding: 34px 38px 26px;
  max-width: 420px; width: calc(100vw - 48px);
  text-align: center;
}
.pair-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px; font-weight: 600; letter-spacing: 0.01em;
  margin: 14px 0 8px; color: #2b2416;
}
.pair-steps { font-size: 14px; line-height: 1.55; color: #5d5340; margin: 0 0 18px; }
#qrbox { display: flex; justify-content: center; }
#qrbox svg { width: 100%; max-width: 300px; height: auto; }
.pair-note { margin-top: 14px; font-size: 12px; color: #8a7d63; font-style: italic; }

/* v6 setup notes */
.setup-version { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7d63; margin-bottom: 6px; }
.setup-note { font-size: 13px; color: #a33; margin-bottom: 10px; min-height: 1em; }