:root {
  --bg:        #0c0a08;
  --bg-soft:   #14110d;
  --bg-card:   #1a1612;
  --bg-hover:  #221c16;
  --line:      #2a2520;
  --ink:       #e8e0d0;
  --ink-mute:  #8a8175;
  --ink-faint: #4a443c;
  --gold:      #ca9335;
  --gold-soft: #d9a755;
  --gold-deep: #8e6824;
  --danger:    #e64545;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font-family: inherit; color: inherit; }

#app { height: 100dvh; display: flex; flex-direction: column; }

/* ───── AUTH ───── */
.auth {
  display: flex; flex-direction: column; align-items: stretch;
  max-width: 30rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; gap: 1rem;
  width: 100%;
}
.auth h1 {
  font-family: ui-serif, Georgia, "Source Serif Pro", Charter, serif;
  font-size: 2rem; font-weight: 500; color: var(--gold);
  letter-spacing: 0.04em; text-align: center; margin: 1rem 0 0.25rem;
}
.auth .sub {
  text-align: center; color: var(--ink);
  font-family: ui-serif, Georgia, serif; font-size: 1.0625rem;
  margin: 0 auto 0.5rem; max-width: 22.5rem;
}
.auth .warn {
  text-align: center; color: var(--gold-soft);
  font-size: 0.875rem; font-style: italic; margin-bottom: 0.5rem;
}
.auth textarea {
  width: 100%; padding: 0.875rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem; line-height: 1.6;
  border: 1px solid var(--line); border-radius: 0.625rem;
  background: var(--bg-card); color: var(--ink);
  resize: vertical; outline: none; min-height: 7rem;
}
.auth textarea:focus { border-color: var(--gold-deep); }

.wordGrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  width: 100%; margin: 0.5rem 0; transition: filter 0.15s;
}
.wordGrid.hidden { filter: blur(10px) brightness(0.3); pointer-events: none; user-select: none; }
.word {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--bg-card);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem; display: flex; align-items: baseline; gap: 0.375rem;
}
.word .num { color: var(--ink-faint); font-size: 0.6875rem; font-family: ui-serif, serif; min-width: 1.25rem; text-align: right; user-select: none; }
.word .w { user-select: text; -webkit-user-select: text; }

.row { display: flex; gap: 0.5rem; }
.btn {
  width: 100%; padding: 0.875rem 1rem;
  border-radius: 0.625rem; border: 1px solid var(--gold);
  background: var(--gold); color: var(--bg);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.15s, transform 0.12s;
}
.btn:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost {
  background: transparent; color: var(--gold); border-color: var(--line);
  font-weight: 500;
}
.btn.ghost:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--gold-deep); }
.btn.small {
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500;
  background: var(--bg-soft); color: var(--ink-mute); border-color: var(--line);
  flex: 1;
}
.btn.small:hover { color: var(--ink); border-color: var(--gold-deep); }
.btn.small.copied { color: var(--gold); border-color: var(--gold-deep); }

.checkbox { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--ink-mute); font-family: ui-serif, serif; cursor: pointer; padding: 0.5rem 0; }
.checkbox input { appearance: none; width: 1.125rem; height: 1.125rem; border: 1px solid var(--line); border-radius: 0.25rem; background: var(--bg-card); cursor: pointer; position: relative; flex-shrink: 0; }
.checkbox input:checked { background: var(--gold); border-color: var(--gold); }
.checkbox input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.375rem; height: 0.625rem; border: solid var(--bg); border-width: 0 0.125rem 0.125rem 0; transform: translate(-50%, -65%) rotate(45deg); }

.error { color: var(--danger); font-size: 0.875rem; text-align: center; padding: 0.25rem; }
.muted { color: var(--ink-mute); font-size: 0.8125rem; text-align: center; }

/* ───── MAIN ───── */
.main { display: flex; height: 100dvh; }
.sidebar {
  width: 22rem; flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
  display: flex; flex-direction: column;
}
.sidebar-head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.sidebar-head .brand {
  font-family: ui-serif, Georgia, serif; font-size: 1.25rem;
  color: var(--gold); font-weight: 500; letter-spacing: 0.03em;
}
.sidebar-head .actions { display: flex; gap: 0.5rem; }
.icon-btn {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  border: 1px solid var(--line); background: var(--bg-card);
  color: var(--ink-mute); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 1rem;
  transition: color 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold-deep); }

.search-bar {
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--line);
  display: flex; gap: 0.5rem;
}
.search-bar input {
  flex: 1; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--bg-card); color: var(--ink);
  font-family: ui-monospace, monospace; font-size: 0.8125rem;
  outline: none;
}
.search-bar input::placeholder { color: var(--ink-faint); }
.search-bar input:focus { border-color: var(--gold-deep); }
.search-bar button {
  padding: 0.5rem 0.875rem; border-radius: 0.5rem;
  border: 1px solid var(--gold-deep); background: transparent; color: var(--gold);
  cursor: pointer; font-size: 0.8125rem; font-weight: 500;
}
.search-bar button:hover { background: var(--bg-card); }

.contacts { flex: 1; overflow-y: auto; }
.contact {
  padding: 0.875rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.75rem;
  transition: background 0.1s;
}
.contact:hover { background: var(--bg-hover); }
.contact.active { background: var(--bg-card); border-left: 2px solid var(--gold); padding-left: calc(1rem - 2px); }
.avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--gold-deep);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: ui-serif, serif; font-weight: 600; font-size: 1.125rem; flex-shrink: 0;
  text-transform: uppercase;
}
.contact-info { min-width: 0; flex: 1; }
.contact-name {
  color: var(--ink); font-size: 0.9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, monospace; letter-spacing: -0.01em;
}
.contact-last { color: var(--ink-mute); font-size: 0.75rem; margin-top: 0.125rem; }
.contact-empty { color: var(--ink-mute); text-align: center; padding: 3rem 1rem; font-style: italic; font-size: 0.875rem; }

.chat-pane { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.chat-head {
  padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.75rem; background: var(--bg-soft);
}
.chat-head .name { font-family: ui-monospace, monospace; font-size: 0.875rem; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .name .full { color: var(--ink-mute); font-size: 0.6875rem; display: block; margin-top: 0.125rem; }

.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-mute); gap: 0.5rem; padding: 2rem; }
.chat-empty .big { font-family: ui-serif, Georgia, serif; font-size: 4rem; color: var(--gold-deep); }
.chat-empty .sub { font-size: 0.9375rem; }

.messages { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.msg {
  max-width: 70%; padding: 0.5rem 0.875rem;
  border-radius: 0.875rem; word-break: break-word;
  font-size: 0.9375rem; line-height: 1.4;
}
.msg.in {
  align-self: flex-start;
  background: var(--bg-card); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 0.25rem;
}
.msg.out {
  align-self: flex-end;
  background: var(--gold-deep); color: var(--ink);
  border-bottom-right-radius: 0.25rem;
}
.msg .ts { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 0.125rem; }
.msg.out .ts { color: rgba(232, 224, 208, 0.5); }
.msg.error { background: rgba(230, 69, 69, 0.15); color: var(--danger); border-color: rgba(230, 69, 69, 0.3); font-style: italic; font-size: 0.8125rem; }

.composer { padding: 0.75rem 1rem; border-top: 1px solid var(--line); display: flex; gap: 0.5rem; background: var(--bg-soft); }
.composer textarea {
  flex: 1; padding: 0.625rem 0.875rem;
  border: 1px solid var(--line); border-radius: 1rem;
  background: var(--bg-card); color: var(--ink);
  resize: none; min-height: 2.5rem; max-height: 8rem; outline: none;
  font-size: 0.9375rem;
}
.composer textarea:focus { border-color: var(--gold-deep); }
.composer button {
  padding: 0 1.25rem; border-radius: 1rem;
  border: 1px solid var(--gold); background: var(--gold); color: var(--bg);
  font-weight: 600; cursor: pointer; font-size: 0.9375rem;
}
.composer button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 760px) {
  .main { flex-direction: column; }
  .sidebar { width: 100%; max-height: 50vh; }
  .sidebar.has-active { display: none; }
  .chat-pane.empty-mobile { display: none; }
}

/* ───── MODAL ───── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 10, 8, 0.85);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.modal {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  max-width: 26rem; width: 100%;
  max-height: 90dvh; overflow-y: auto;
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.modal h2 {
  font-family: ui-serif, Georgia, serif;
  color: var(--gold); font-size: 1.375rem; font-weight: 500;
  margin: 0 0 0.25rem; letter-spacing: 0.02em;
}
.modal-sub {
  color: var(--ink-mute); font-size: 0.8125rem;
  margin: 0 0 0.5rem; line-height: 1.5;
}
.field { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.25rem 0; }
.field > span { color: var(--ink-mute); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.field input {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--bg-card); color: var(--ink);
  font-family: ui-monospace, monospace; font-size: 0.875rem; outline: none;
}
.field input:focus { border-color: var(--gold-deep); }

.modal input[type="file"] {
  padding: 0.5rem; color: var(--ink-mute); font-size: 0.875rem;
  border: 1px dashed var(--line); border-radius: 0.5rem; background: var(--bg-card);
  cursor: pointer;
}
.modal input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.375rem 0.75rem;
  border: 1px solid var(--gold-deep); border-radius: 0.375rem;
  background: var(--bg-soft); color: var(--gold);
  font-family: inherit; cursor: pointer;
}

.vcard-list {
  display: flex; flex-direction: column; gap: 0.375rem;
  max-height: 24rem; overflow-y: auto; padding: 0.25rem 0;
}
.vcard-row {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--bg-card);
  display: flex; align-items: center; gap: 0.625rem;
}
.vcard-info { flex: 1; min-width: 0; }
.vcard-name { color: var(--ink); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-meta { color: var(--ink-mute); font-size: 0.75rem; margin-top: 0.125rem; }

/* welcome */
.chat-empty .welcome-title { font-family: ui-serif, Georgia, serif; font-size: 1.5rem; color: var(--gold); margin-top: -0.5rem; }
.welcome-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 0.875rem; padding: 1rem 1.25rem; max-width: 22rem; width: 100%; margin: 1rem 0 0.5rem; }
.welcome-label { color: var(--ink-mute); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.375rem; }
.welcome-id { font-family: ui-monospace, monospace; font-size: 0.8125rem; color: var(--gold-soft); word-break: break-all; line-height: 1.5; padding: 0.5rem 0.625rem; background: var(--bg-soft); border-radius: 0.375rem; }
.welcome-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; justify-content: center; flex-wrap: wrap; }
.welcome-actions .btn { flex: 0 0 auto; width: auto; padding: 0.625rem 1.25rem; }
.welcome-actions .btn.small { flex: 1; min-width: 8rem; }
.welcome-hint { color: var(--ink-mute); font-size: 0.8125rem; text-align: center; max-width: 22rem; margin-top: 0.5rem; line-height: 1.5; }
@keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }