:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0f1115;
  color: #e6e8ef;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

h1 { margin: 0 0 14px 0; font-size: 22px; }
h2 { margin: 0 0 10px 0; font-size: 16px; }
h3 { margin: 0 0 10px 0; font-size: 14px; color:#cfd3dd; }

.app-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 14px 0;
}
.app-title h1{ margin:0; }

.app-logo{
  width:58px;
  height:58px;
  border-radius:8px;
  /*border:1px solid #242a3a;*/
  background:#0b0d12;
  object-fit:contain;
  flex:0 0 auto;
}

.card {
  /*background: #151926;*/
  /*border: 1px solid #242a3a;*/
  border-radius: 12px;
  padding: 14px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
}

hr {
  border: 0;
  border-top: 1px solid #242a3a;
  margin: 12px 0;
}

input, textarea, button {
  border: 1px solid #2b3246;
  border-radius: 10px;
  padding: 10px 12px;
  background: #0b0d12;
  color: #e6e8ef;
  outline: none;
}

input, textarea { flex: 1; }

button {
  cursor: pointer;
  width: 120px;
}

button:hover { background: #0f1320; }

button.danger {
  background: #3a1515;
  border-color: #602222;
}
button.danger:hover { background: #4a1b1b; }

.status {
  /*margin-bottom: 6px;*/
  padding: 10px 12px;
  border-radius: 12px;
  /*border: 1px solid #242a3a;*/
  /*background: #0b0d12;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.msg { 
  margin-top: 8px;
  margin-bottom: 52px;
  font-size: 13px; 
}
.ok { color: #7ee787; }
.err { color: #ff7b72; }
.muted { color: #aab0c0; }

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

.peer {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #242a3a;
  /*background: #0b0d12;*/
  background: #151926;
  cursor: pointer;
  /* ...deine bestehenden Werte... */
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Chat-Liste: Textblock neben Avatar */
.peer-body {
  flex: 1;
  min-width: 0;
}
.peer:hover { background: #0f1320; }
.peer.active { border-color: #4b7bec; }
.peer .title { font-weight: 600; }
.peer .sub { font-size: 12px; color: #aab0c0; margin-top: 3px; }
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #4b7bec;
  color: #fff;
  font-size: 12px;
  margin-left: 8px;
}

.badge.badge-warn {
  background: #f2cc60;
  color: #111;
}

.msgs {
  /* Scroll-Container: darf nicht wachsen, sondern innerhalb der App scrollen */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /*border: 1px solid #242a3a;*/
  border-radius: 12px;
  padding: 10px;
  /*background: #0b0d12;*/
}

.bubble {
  max-width: 70%;
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 12px;
  /*border: 1px solid #242a3a;*/
  background: #12162a;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble.me {
  margin-left: auto;
  background: #16314a;
  border-color: #2d5c86;
}
.bubble .meta {
  font-size: 11px;
  color: #aab0c0;
  margin-top: 6px;
}

.bubble.me .meta {
  font-size: 11px;
  color: #aab0c0;
  margin-top: 6px;
  text-align: right;
}

/* --- Security / Verification UI --- */
.hidden { display:none !important; }
.warn { color: #f2cc60; }

/* Utility classes (CSP: keine Inline-Styles nötig) */
.mt10 { margin-top: 10px; }
.mt18 { margin-top: 18px; }
/*.mlAuto { margin-left: auto; }*/
.minw240 { min-width: 240px; }
.flex1 { flex: 1; }
.peer-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.trust { font-size:11px; padding:0px 6px; border-radius:999px; border:1px solid #242a3a; background:#0f1115; color:#aab0c0; white-space:nowrap; }
.trust-verified { border-color:#2ea043; color:#7ee787; }
.trust-unverified { border-color:#2b3246; color:#aab0c0; }
.trust-keychange { border-color:#ff7b72; color:#ff7b72; }
.trust-unknown { border-color:#2b3246; color:#aab0c0; }

.active-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.btn-small { width:auto; padding:8px 10px; border-radius:10px; background: #151926;}
.btn-x { width:auto; padding:6px 10px; border-radius:10px; }

.modal-backdrop { 
  position:fixed; 
  inset:0; 
  /*background:rgba(0,0,0,1); */
  background: rgb(11 13 18);
  z-index:999; 
}
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.modal-card { width:min(720px, 96vw); max-height: 90vh; overflow:auto; /*background:#151926;*/ /*border:1px solid #242a3a;*/ border-radius:12px; padding:14px; box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.modal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.modal-actions button { width:auto; }

.btn-danger { background:#3a1515; border-color:#ff7b72; }
.btn-danger:hover { background:#4a1b1b; }

.sec-row { border:1px solid #242a3a; border-radius:12px; padding:10px; background:#0b0d12; margin:8px 0; }
.sec-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; }

.status-text { flex: 1; min-width: 0; }
.status-peer {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.status-actions button { width: auto; padding: 8px 10px; }
.status-hint{
  margin-left: 8px;
  opacity: .85;
  font-size: 12px;
  white-space: nowrap;
}

/* --- Participants / Profile --- */
.user-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid #242a3a;
  /*background:#0b0d12;*/
  background: #151926;
  cursor:pointer;
}
.user-row:hover { background:#0f1320; }
.user-row .name { font-weight:600; }
.user-row .sub { font-size:12px; color:#aab0c0; }

.avatar-sm {
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid #242a3a;
  object-fit:cover;
  background:#0f1115;
}

.avatar-preview {
  width:64px;
  height:64px;
  border-radius:12px;
  border:1px solid #242a3a;
  background:#0b0d12;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.avatar-img {
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:12px;
}


/* =========================
   Mobile-first layout upgrade
   ========================= */

html, body { height: 100%; }

/* Wenn eingeloggt: Seite darf nicht "mitwachsen" – Scrollen findet in Listen/Chat statt */
body.app-chat { overflow: hidden; }
body.app-chat .wrap { height: 100svh; overflow: hidden; }

/* Make the app use the viewport height cleanly */
.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Chat card becomes a flexible pane */
#chat.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Main 2-column layout: allow internal scrolling */
.chat-layout {
  flex: 1;
  align-items: stretch;
  min-height: 0;
}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-sidebar .list {
  overflow: auto;
  min-height: 0;
}
.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-main .msgs {
  flex: 1;
  min-height: 0;
}

/* Textarea: same look as inputs, but better for mobile */
textarea {
  resize: none;
  line-height: 1.35;
  min-height: 44px;
}

/* Composer row: stays compact, message input can grow */
.composer {
  align-items: flex-end;
}
.composer textarea {
  max-height: 140px;
  overflow: auto;
}

/* Helpers */
.mobile-only { display: none !important; }
.active-peer-line { min-width: 0; }

/* --- Small screens: switch to messenger-like single-pane --- */
@media (max-width: 820px) {
  .wrap { 
    /*padding: 10px;*/
	padding: 0px;
  }
  h1 { 
    font-size: 18px; 
	margin: 10px;
  }
  .app-logo { 
    width:29px; 
	height:29px; 
	margin: 10px;
  }
  .app-title{
    gap: 0;
    margin: 0;
  }
  .card { 
    /*padding: 6px;*/
    padding: 6px; 
	border-radius: 14px; 
  }

  /* Prevent iOS zoom on focus; improve touch targets */
  input, textarea, button { font-size: 16px; }
  button { width: auto; min-width: 0; padding: 12px 12px; border-radius: 12px; background: #151926;}
  .btn-small { padding: 10px 12px; }

  .row { 
    flex-wrap: wrap;
  }

  /* Top bar: stack nicely */
  .chat-top { gap: 8px; }
  .chat-top .mlAuto { display: flex; gap: 8px; flex-wrap: wrap; }

  /* Active-Row kompakt: alles in einer Zeile, Chatname mit Ellipsis */
  .active-row { 
    /*flex-wrap: wrap;*/
    flex-wrap: nowrap; 
	justify-content: flex-start;
	gap: 8px;
    margin-top: 4px;
  }
  .active-peer-line { 
    /*flex: 1 1 100%;*/
	flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	margin-top: -10px;
	font-size: 14px;
  }

  /* One pane at a time: either chat list OR messages */
  .chat-layout { flex-direction: column; gap: 12px; }

  body:not(.mobile-chat-open) .chat-main { display: none; }
  body.mobile-chat-open .chat-sidebar { display: none; }
  body.mobile-chat-open .chat-main { display: flex; }

  .mobile-only { display: inline-flex !important; }
  /* hidden muss auf Mobile auch gegen .mobile-only(!important) gewinnen */
  .mobile-only.hidden { display: none !important; }

  /* Give list items more "thumb comfort" */
  .peer, .user-row { 
    /*padding: 12px;*/
  }

  /* Message bubbles: use more width on mobile */
  .bubble { max-width: 80%; }

  /* Composer: keep it close to bottom and avoid overlaps */
  .composer { gap: 8px; }
  #btnSend { flex: 0 0 auto; }

  /* Modals: full-screen on mobile */
  .modal { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal-card {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    padding: 14px;
  }
  .modal-actions { gap: 8px; }
  /* Mobile: Logout oben ausblenden (ist im Profil) */
  .mobile-hide { display: none !important; }
  /* Mobile: weniger Vertikalplatz im oberen Nachrichtenbereich */
  hr { margin: 8px 0; }
  .chat-main h3 { margin-bottom: 6px; }
}