body { font-family: monospace; margin: 0; display:flex; flex-direction:column; }
#ribbon {
  background:#222;
  color:#fff;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#ribbon-title { font-weight:bold; letter-spacing:0.5px; }
#session-status { opacity:0.8; margin-right:12px; }
#session-btn {
  background:#ccc;
  color:#222;
  border:none;
  padding:6px 0;
  width:48px;
  cursor:pointer;
  border-radius:4px;
  font-weight:bold;
  text-align:center;
}
#session-btn.logout { background:#4caf50; color:#fff; }
#toggle-roster {
  margin-right:8px;
  background:#555;
  color:#fff;
  border:none;
  padding:6px 0;
  width:32px;
  cursor:pointer;
  border-radius:4px;
  font-weight:bold;
}
#theme-btn {
  background:#444;
  color:#fff;
  border:none;
  padding:6px 0;
  width:32px;
  cursor:pointer;
  border-radius:4px;
  font-weight:bold;
}
#main { display:flex; padding:10px; }
#main.roster-hidden #roster { display:none; }
#roster { width:200px; border-right:1px solid #ccc; padding:5px; }
#chat { flex:1; padding:5px; }
#log { border:1px solid #ccc; height:300px; overflow:auto; padding:5px; }
.composer { display:none; align-items:center; gap:6px; margin-top:4px; }
.composer.show { display:flex; }
input { margin: 3px; }
.pane-title { margin:0 0 8px 0; font-size:1.1em; font-weight:bold; display:flex; align-items:center; gap:6px; }

.contact { cursor:pointer; padding:3px; display:flex; align-items:center; }
.contact:hover { background:#eee; }
.contact.unread span { font-weight:bold; color:darkgreen; }

.presence {
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:5px;
  border:1px solid #444;
}

.online { background:#0f0; }
.offline { background:#f00; }
.timestamp { color:darkblue; font-weight:bold; }
.incoming .timestamp { color:darkgreen; }
.outgoing { text-align:right; }
.msg-card { padding:8px; border-radius:6px; margin-bottom:6px; max-width:55%; border: 1px; border-color: #888; }
.msg-in { background:#f2f2f2; margin-right:auto; text-align:left; }
.msg-out { background:#e6f7e6; margin-left:auto; text-align:right; }
.msg-date { font-size:0.70em; font-weight:bold; margin-bottom:4px; }
.msg-date-in { color:darkred; }
.msg-date-out { color:darkgreen; }
.msg-image { max-width:100%; border-radius:4px; }
.msg-caption { margin-top:4px; font-size:0.9em; }

.modal.hidden { display:none; }
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.modal-content {
  background:#fff;
  padding:16px;
  border-radius:6px;
  min-width:260px;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.modal-content h4 { margin:0 0 8px 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.modal-actions button { padding:6px 10px; cursor:pointer; }

/* Dark mode */
body.dark { background:#111; color:#eee; }
body.dark #ribbon { background:#111; color:#eee; }
body.dark #session-status { color:#ccc; }
body.dark #roster { border-color:#333; }
body.dark #log { border-color:#333; background:#1a1a1a; }
body.dark .contact:hover { background:#222; }
body.dark #toggle-roster { background:#777; color:#111; }
body.dark #theme-btn { background:#777; color:#111; }
body.dark #session-btn { background:#ccc; color:#111; }
body.dark #session-btn.logout { background:#4caf50; color:#fff; }
body.dark .msg-in { background:#1f1f1f; }
body.dark .msg-out { background:#1f2f1f; }
body.dark .modal-content { background:#1c1c1c; color:#eee; }
body.dark input { background:#222; color:#eee; border:1px solid #444; }

/* Mobile-friendly vertical layout */
@media (max-width: 600px) {
  #main {
    flex-direction:column;
    gap:10px;
    padding:8px;
  }
  #roster {
    width:100%;
    border-right:none;
    border-bottom:1px solid #ccc;
  }
  #main.roster-hidden #roster { display:none; }
  #chat { padding:0; }
  #log { height:50vh; }
  .composer {
    flex-wrap:wrap;
    gap:8px;
  }
  .composer input {
    flex:1 1 100%;
    width:100%;
  }
  .composer button {
    flex:1 1 48%;
    min-width:100px;
  }
  #ribbon {
    flex-wrap:wrap;
    gap:8px;
  }
  #ribbon-title { display:none; }
  #session-status { margin-right:0; display:block; }
}