/* Messages page modern, clean styling */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-weak:#e8f0fe;
}

body{background:var(--bg);} /* local page background; app layout sets global as well */

/* Hide mobile list by default; only show under mobile media query */
.mobile-list{display:none}

.messages-page h2.heading{
  margin:0 0 12px;
  font-size:20px;
  font-weight:600;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  margin-top:16px;
}

/* Two-pane layout */
.messages-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:16px;
}
.sidebar{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  height:100%;
}
.conversation-pane{
  min-width:0;
}

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

.input{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; min-width:220px}
.button{padding:10px 14px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer}
.button:hover{background:#f3f4f6}
.button.primary{border-color:var(--primary); background:var(--primary); color:#fff}
.button.primary:hover{filter:brightness(0.98)}
.button.back{margin-bottom:8px; display:none}

/* Chat list */
.chat-list{list-style:none; margin:12px 0 0; padding:0; max-height:420px; overflow:auto}
.chat-list li{margin:0; padding:0}
.chat-list button{width:100%; text-align:left; padding:10px 12px; border:1px solid var(--border); background:#fff; border-radius:10px; margin-bottom:8px; cursor:pointer; display:flex; align-items:center; gap:10px}
.chat-list button:hover{background:#f3f4f6}
.chat-list .active{border-color:var(--primary); background:var(--primary-weak)}
.chat-list .label{display:flex; flex-direction:column; min-width:0}
.chat-list .name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-list .snippet{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Avatars */
.avatar{display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#e5e7eb; color:#374151; font-weight:600; user-select:none}
.avatar.lg{width:32px; height:32px; font-size:13px}
.avatar.sm{width:24px; height:24px; font-size:11px}

.messages{
  border:1px solid var(--border);
  border-radius:12px;
  height:420px;
  overflow:auto;
  padding:12px;
  background:#fbfbfc;
}

.msg{margin:8px 0; padding:10px 12px; border-radius:14px; max-width:70%; box-shadow:0 1px 1px rgba(0,0,0,0.03)}
.msg.me{background:var(--primary-weak); margin-left:auto; border:1px solid #d7e5ff}
/* Peer messages show avatar + bubble side by side */
.msg.peer{background:transparent; border:none; padding:0; box-shadow:none; margin-right:auto}
.msg.peer .row{display:flex; align-items:flex-end; gap:8px}
.msg.peer .bubble{background:#f3f4f6; border:1px solid #e7e7e7; border-radius:14px; padding:10px 12px; max-width:70%;}
.msg .meta{font-size:11px; color:var(--muted); margin-top:4px}

.controls{display:flex; gap:8px; margin-top:10px}
.controls .input{flex:1}

.empty{color:var(--muted); margin-top:8px}
.error{color:#b91c1c; display:none; margin-top:10px}

/* Responsive */
@media (max-width: 900px){
  /* Show chat list section first on mobile within center content */
  .mobile-list{display:block}
  .messages-page[data-mode="list"] #mobileList{display:block}
  .messages-page[data-mode="list"] .conversation-pane{display:none}
  .messages-page[data-mode="chat"] #mobileList{display:none}
  .messages-page[data-mode="chat"] .conversation-pane{display:block}
  .messages-page[data-mode="chat"] .button.back{display:inline-block}
}

@media (max-width: 480px){
  .messages{height:60vh}
}


/* Scoped Messages styles from worms.html */
#page-messages .mobile-list {
    margin-bottom: 8px;
}

#page-messages .list-group li {
    list-style: none;
}

#page-messages .list-group {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

#page-messages .list-group li + li {
    border-top: 1px solid #f3f4f6;
}

#page-messages .list-group button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    background: white;
    text-align: left;
}

#page-messages .list-group button:hover {
    background: #f9fafb;
}

#page-messages .list-group button.active {
    background: #eff6ff;
}

#page-messages .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-weight: 600;
    font-size: 12px;
}

#page-messages .avatar.lg {
    width: 32px;
    height: 32px;
}

#page-messages .label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#page-messages .label .name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

#page-messages .label .snippet {
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-messages #conv {
    background: #fff;
}

#page-messages .msg {
    display: flex;
    margin: 8px 0;
    gap: 8px;
    align-items: flex-end;
}

#page-messages .msg .bubble {
    max-width: 80%;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.35;
}

#page-messages .msg.mine {
    justify-content: flex-end;
}

#page-messages .msg.mine .bubble {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}

#page-messages .msg.theirs .bubble {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

#page-messages .msg .meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

#page-messages .msg .avatar {
    flex: 0 0 auto;
}

#page-messages .msg.theirs .avatar {
    margin-right: 2px;
}

#page-messages .msg.mine .avatar {
    order: 2;
    margin-left: 2px;
}

/* Responsive toggling */
@media (min-width: 1025px) {
    #page-messages .mobile-list {
        display: none !important;
    }
}