/* Layout & theme */
:root{
  --bg:#f1f5f9;
  --panel:#fff;
  --panel-muted:#f8fafc;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#475569;
  /* Accent colour that can be changed via colour picker */
  --accent:#2563eb;
  /* Own message bubble colour follows the accent */
  --bubble-me:var(--accent);
  --bubble-them:#334155;
  --bubble-text:#fff;
}
/* Dark mode support removed.  The chat will always use the same colour
   palette regardless of system preferences to ensure consistent
   readability when a custom theme colour is chosen via the picker. */
html, body { height:100%; }
.mschat-body{ margin:0; background:var(--bg); color:var(--text); }

#mschat-app{ display:flex; height:100vh; min-height:0; }

.mschat-col{ display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--panel); border-right:1px solid var(--border); }
.mschat-col-header{ padding:10px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
#mschat-newmsg-indicator{ margin-left:auto; color:#ef4444; opacity:0; transition:opacity .2s; }
#mschat-newmsg-indicator.active{ opacity:1; }

#mschat-users{ flex:0 0 280px; }
#mschat-user-search{ width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--panel-muted); color:var(--text); }
#mschat-user-list{ flex:1 1 auto; min-height:0; overflow:auto; margin:0; padding:0; list-style:none; }
#mschat-user-list li{ padding:8px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; cursor:pointer; }
#mschat-user-list li .name{ font-weight:600; }
#mschat-user-list li .meta{ font-size:12px; color:var(--muted); }
#mschat-user-list li .badge{ margin-left:auto; background:var(--accent); color:#fff; border-radius:999px; padding:0 8px; font-size:12px; line-height:20px; }

/* Gender-based styling for user list items.  Subtle background tint helps
   differentiate conversations without overpowering the theme. */
#mschat-user-list li.gender-male{ background:rgba(59,130,246,0.12); }
#mschat-user-list li.gender-female{ background:rgba(236,72,153,0.12); }
#mschat-user-list li.gender-other{ background:rgba(139,92,246,0.12); }
#mschat-user-list li.gender-unknown{ /* no special color */ }

/* Improve form appearance in the join/profile panel */
#mschat-profile form label{ display:block; margin-top:12px; font-weight:600; font-size:14px; }
#mschat-profile form input,
#mschat-profile form textarea,
#mschat-profile form select{
  width:100%;
  padding:8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-muted);
  color:var(--text);
  margin-top:4px;
  box-sizing:border-box;
}
#mschat-profile form button[type="submit"]{
  margin-top:16px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}

#mschat-chat{ flex:1 1 auto; min-width:0; min-height:0; }
#mschat-thread{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px; background:var(--panel-muted); }
#mschat-send-form{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--border); background:var(--panel); }

/* Preview area for file uploads. Appears above the attach/send controls
   and uses the same thumb styling for images as within messages. */
#mschat-upload-preview{
  flex: 0 0 auto;
  margin-right: 6px;
  display: none;
  align-items: center;
}
#mschat-upload-preview img{
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  display: block;
}
#mschat-input{ flex:1 1 auto; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--panel-muted); color:var(--text); }
/* Buttons styling. Use the accent colour for primary actions. */
#mschat-send, #mschat-logout, #mschat-back-to-me, #mschat-webcam{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
#mschat-attach{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#6b7280;
  color:#fff;
  cursor:pointer;
}

#mschat-profile{ flex:0 0 320px; }

.mschat-msg{ max-width:70%; padding:10px 12px; border-radius:12px; margin:6px 0; position:relative; white-space:pre-wrap; word-break:break-word; }
.mschat-me{ background:var(--bubble-me); color:var(--bubble-text); margin-left:auto; }
.mschat-them{ background:var(--bubble-them); color:var(--bubble-text); margin-right:auto; }
.mschat-name{ font-size:12px; opacity:.9; margin-bottom:4px; }
.mschat-time{ font-size:11px; opacity:.75; margin-left:8px; }

.mschat-thumb{ max-width:140px; max-height:140px; border-radius:8px; display:block; cursor:zoom-in; box-shadow:0 1px 4px rgba(0,0,0,.1); margin:4px 0; }
#mschat-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:9999; }
#mschat-lightbox .mschat-lb-inner{ max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
#mschat-lb-img{ max-width:100%; max-height:80vh; border-radius:8px; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
#mschat-lb-cap{ color:#eee; margin-top:8px; font-size:14px; text-align:center; }

/* Theme picker and webcam video styling */
#mschat-theme-color{
  width:100%;
  height:36px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-muted);
  cursor:pointer;
  padding:0;
  box-sizing:border-box;
}
#mschat-webcam-video{
  width:100%;
  max-height:200px;
  border-radius:8px;
  margin-bottom:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* Responsive layout for mobile devices */
@media (max-width: 640px){
  #mschat-app{ flex-direction:column; }
  #mschat-users, #mschat-chat, #mschat-profile{
    flex: 1 1 auto;
    width:100%;
    min-width:0;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  #mschat-users{ order:1;min-height:500px; }
  #mschat-user-list{ min-height:300px; }
  #mschat-chat{ order:2;min-height:700px; }
  #mschat-profile{ order:3; }
  .mschat-col-header{ flex-wrap:wrap; padding:8px;padding-top:-10px; height:50px;}
  #mschat-user-search{ width:100%; }
  #mschat-send-form{ flex-wrap:wrap; }
  #mschat-upload-preview{ margin-right:0; margin-bottom:6px; }
  #mschat-send-form input[type="text"]{ flex:1 1 100%; margin-bottom:6px; }
  #mschat-send-form button{ flex:1 1 auto; }
}

/* Read indicator styling for message bubbles. A single check mark
   indicates the message was delivered; double check marks appear
   when the message has been read by the recipient. */
.mschat-read {
  font-size: 0.75em;
  opacity: 0.5;
  margin-left: 4px;
}
.mschat-read.read {
  opacity: 1;
  color: var(--accent);
}

/*
 * When a user is ignored, dim their entry in the user list. Grey them out
 * to make it clear they are muted. The name is still legible but the
 * overall entry is faded.
 */
#mschat-user-list li.mschat-ignored {
  opacity: 0.5;
  filter: grayscale(100%);
}
#mschat-user-list li.mschat-ignored .name {
  opacity: 0.8;
}

.mschat-avatar-grid .mschat-ava-btn{ transition: box-shadow .15s ease; }
.mschat-avatar-grid .mschat-ava-btn:hover{ box-shadow: 0 1px 6px rgba(0,0,0,.15); }


/* Profile column: independent scroll on desktop */
@media (min-width: 900px){
  #mschat-app{ height:100vh; }
  #mschat-profile{ min-height:0; overflow-y:auto; }
  #mschat-users{ min-height:0; overflow-y:auto; }
  #mschat-chat{ min-height:0; }
}

/* Make the profile column scroll independently */
#mschat-profile{ overflow:auto; -webkit-overflow-scrolling: touch; min-height:0; }