:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #e8f5e9; color: #111; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#1b5e20; color:#fff; }
.brand { font-weight: 700; }
.spacer { flex: 1; }
.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.4); color:#fff; padding:8px 10px; border-radius:10px; }
.ghost:active { transform: scale(0.98); }

.main { padding: 12px; max-width: 1100px; margin: 0 auto; }
.card { background:#fff; border-radius:14px; padding:14px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); max-width: 420px; }
.row { display:flex; flex-direction: column; gap:6px; margin: 10px 0; }
input { padding:10px 12px; border-radius: 12px; border: 1px solid #ddd; font-size: 16px; }
button { padding:10px 12px; border-radius: 12px; border: 0; background:#2e7d32; color:#fff; font-weight:600; }
button:active { transform: scale(0.98); }
.actions { display:flex; justify-content:flex-end; margin-top: 12px; }
.err { color:#b00020; margin-top:10px; white-space: pre-wrap; }

.hidden { display: none !important; }
.split { display:grid; grid-template-columns: 320px 1fr; gap: 12px; }
.panel { background:#fff; border-radius:14px; padding: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); height: calc(100vh - 90px); overflow:auto; }
.panelTitle { font-weight:700; margin: 6px 6px 10px; }
.list { display:flex; flex-direction: column; gap: 6px; }
.item { padding: 10px; border-radius: 12px; border: 1px solid #eee; cursor: pointer; background: #fafafa; }
.item.active { border-color: #2e7d32; background: #e8f5e9; }
.itemTitle { font-weight: 700; }
.itemSub { font-size: 12px; color: #555; margin-top: 4px; }

.chat { background:#fff; border-radius:14px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); display:flex; flex-direction: column; height: calc(100vh - 90px); overflow:hidden; }
.chatHeader { padding: 10px 12px; border-bottom: 1px solid #eee; }
#chatTitle { font-weight: 800; }
.muted { font-size: 12px; color:#666; margin-top:4px; }

.msgs { flex: 1; overflow:auto; padding: 10px; background: #f3f8f3; }
.msg { max-width: 75%; padding: 10px 12px; border-radius: 14px; margin: 6px 0; border: 1px solid rgba(0,0,0,0.05); }
.me { margin-left: auto; background: #c8e6c9; }
.other { margin-right: auto; background: #fff; }
.meta { font-size: 11px; color:#666; margin-top: 4px; }

.composer { display:flex; gap: 8px; padding: 10px; border-top:1px solid #eee; background:#fff; }
#etMessage { flex:1; }

dialog { border:0; border-radius: 14px; padding: 14px; max-width: 520px; width: calc(100% - 30px); }
.dlgTitle { font-weight: 800; margin-bottom: 10px; }
.dlgActions { display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px; }
.pre { white-space: pre-wrap; font-size: 13px; color:#222; }
.btnLink { display:inline-block; padding:10px 12px; border-radius: 12px; background:#2e7d32; color:#fff; text-decoration:none; font-weight:700; }

/* ===== Mobile (phone) layout ===== */
@media (max-width: 820px) {

  .split {
    display: block;
  }

  .panel,
  .chat {
    width: 100%;
    max-width: none;
    height: calc(100vh - 90px);
  }

  body.is-mobile-chat .panel {
    display: none;
  }

  body.is-mobile-list .chat {
    display: none;
  }

  body {
    overflow-x: hidden;
  }
}

.msgPhoto {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 6px;
  cursor: pointer;
}

.composer button {
  flex: 0 0 auto;
}

.imageModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.imageModal.hidden {
  display: none;
}

.imageModalImg {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.imageModalClose {
  position: absolute;
  top: 14px;
  right: 22px;
  font-size: 40px;
  line-height: 1;
  color: white;
  cursor: pointer;
  user-select: none;
}

.reactionsRow {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reactionChip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 12px;
}