@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy:#4A0E24;
  --navy-light:#63152F;
  --cream:#F2EFEA;
  --teal:#8C1D4B;
  --teal-dark:#6E1638;
  --mustard:#D9A441;
  --text-dark:#3A0E1E;
  --grey-tick:#9AA0AE;
  --blue-tick:#3B9CE8;
  --danger:#C0503E;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--cream);
  color:var(--text-dark);
}

h1,h2,h3{
  font-family:'Poppins', sans-serif;
}

.hidden{
  display:none !important;
}

header{
  background:var(--navy);
  color:var(--mustard);
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:14px;
}

#headerLogo{
  width:40px;
  height:40px;
  border-radius:50%;
  flex-shrink:0;
}

header h1{
  margin:0;
  font-size:1.3rem;
  letter-spacing:0.3px;
}

#headerIcons{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  position:relative;
}

#headerCameraBtn,
#settingsBtn{
  background:none;
  border:none;
  color:var(--mustard);
  font-size:1.3rem;
  cursor:pointer;
  padding:6px;
  border-radius:50%;
  line-height:1;
  transition:background 0.2s;
}

#headerCameraBtn:hover,
#settingsBtn:hover{
  background:rgba(255,255,255,0.1);
}

.headerMenuDropdown{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  left:auto;
}

/* ===================== LOGIN ===================== */
#loginPage{
  min-height:calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.authCard{
  background:white;
  border-radius:14px;
  padding:32px;
  width:100%;
  max-width:360px;
  box-shadow:0 10px 30px rgba(23,26,48,0.12);
  text-align:center;
}

.authSubtitle{
  color:#6b7080;
  font-size:0.85rem;
  margin-top:-8px;
  margin-bottom:20px;
}

.authCard input{
  width:100%;
  padding:12px;
  margin:6px 0;
  border-radius:8px;
  border:1px solid #DCD8CE;
  font-size:0.95rem;
}

.authCard button{
  width:100%;
  padding:12px;
  margin:6px 0;
  border:none;
  border-radius:8px;
  background:var(--teal);
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s ease;
}

.authCard button:hover{
  background:var(--teal-dark);
}

#googleLogin{
  background:white;
  color:var(--text-dark);
  border:1px solid #DCD8CE !important;
}

#googleLogin:hover{
  background:#f4f2ee;
}

#toggleAuth{
  font-size:0.85rem;
  color:#6b7080;
  margin-top:14px;
}

#toggleAuthLink{
  color:var(--teal-dark);
  font-weight:600;
  cursor:pointer;
}

#message{
  color:var(--danger);
  font-size:0.85rem;
  min-height:18px;
}

/* ===================== APP LAYOUT ===================== */
#schoolApp{
  height:calc(100vh - 64px);
}

#appLayout{
  display:flex;
  height:100%;
}

/* -------- Sidebar -------- */
#sidebar{
  width:300px;
  flex-shrink:0;
  background:var(--navy);
  color:white;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow-y:auto;
  position:relative;
}

#myProfile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  margin-bottom:0;
  border-bottom:1px solid var(--navy-light);
}

#myUsername{
  font-weight:600;
}

#myProfile button{
  background:none;
  border:none;
  color:var(--mustard);
  font-size:0.75rem;
  cursor:pointer;
  padding:0;
  margin-top:4px;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--teal);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family:'Poppins', sans-serif;
  flex-shrink:0;
  overflow:hidden;
  cursor:pointer;
  font-size:0.95rem;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

#friendSearchWrap{
  position:relative;
  margin-bottom:10px;
  padding:12px 16px 0;
  display:flex;
  align-items:center;
}

#friendSearchIcon{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(calc(-50% + 6px));
  color:#9096AC;
  font-size:0.9rem;
  pointer-events:none;
}

#chatTabs{
  display:flex;
  border-top:1px solid var(--navy-light);
  background:var(--navy);
  flex-shrink:0;
}

.chatTab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 4px 10px;
  background:none;
  border:none;
  color:#9096AC;
  font-weight:600;
  cursor:pointer;
  border-top:3px solid transparent;
  font-size:0.7rem;
  transition:all 0.2s;
}

.chatTabIcon{
  font-size:1.15rem;
}

.chatTab.active{
  color:var(--mustard);
  border-top-color:var(--mustard);
}

.chatTab:hover{
  color:white;
}

#sidebarContent{
  background:#1a1a1a;
}

#friendSearch{
  width:100%;
  padding:10px 12px 10px 30px;
  border-radius:20px;
  border:none;
  background:var(--navy-light);
  color:white;
  font-size:0.9rem;
}

#friendSearch::placeholder{
  color:#9096AC;
}

#searchSuggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:white;
  color:var(--text-dark);
  border-radius:8px;
  overflow:hidden;
  z-index:10;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  max-height:260px;
  overflow-y:auto;
}

.suggestionRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
}

.suggestionRow:hover{
  background:#F2EFEA;
}

.suggestionRow .avatar{
  width:32px;
  height:32px;
  font-size:0.75rem;
}

.sidebarLabel{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#9096AC;
  margin:10px 0 6px 4px;
}

.friendRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid #333;
  cursor:pointer;
  transition:background 0.2s;
}

.friendRow:hover, .friendRow.active{
  background:#2a2a2a;
}

.friendRow .avatar{
  flex-shrink:0;
}

.friendRowContent{
  flex:1;
  min-width:0;
}

.friendRow .friendName{
  font-weight:600;
  color:white;
}

.friendRowTopLine{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}

.friendRowBottomLine{
  display:flex;
  align-items:center;
  gap:4px;
}

.friendRowMessage{
  flex:1;
  font-size:0.85rem;
  color:#9096AC;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.friendRowDate{
  font-size:0.75rem;
  color:#9096AC;
  flex-shrink:0;
  white-space:nowrap;
}

.friendRowTick{
  font-size:0.8rem;
  flex-shrink:0;
}

.friendRowTick.grey{ color:var(--grey-tick); }
.friendRowTick.blue{ color:var(--blue-tick); }

.friendRowRight{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

.unreadBadge{
  background:var(--mustard);
  color:var(--navy);
  font-size:0.7rem;
  font-weight:700;
  border-radius:50%;
  min-width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}

#composeBtn{
  position:absolute;
  right:16px;
  bottom:72px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--mustard);
  color:var(--navy);
  border:none;
  font-size:1.6rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  transition:background 0.2s;
  z-index:5;
}

#composeBtn:hover{
  background:#E8B85A;
}

/* -------- Chat window -------- */
#chatWindow{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--cream);
}

#noChatSelected{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8a8f9c;
}

#activeChat{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

#chatHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  background:white;
  border-bottom:1px solid #E4E0D6;
  position:relative;
}

#chatFriendName{
  font-weight:600;
  flex:1;
}

#callButtons button{
  background:none;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  margin-left:8px;
}

#chatBox{
  flex:1;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.chat{
  max-width:60%;
  padding:10px 14px;
  border-radius:14px;
  position:relative;
  line-height:1.35;
  font-size:0.92rem;
}

.chat.sender{
  align-self:flex-end;
  background:var(--teal);
  color:white;
  border-bottom-right-radius:4px;
}

.chat.receiver{
  align-self:flex-start;
  background:white;
  color:var(--text-dark);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

.chat .senderName{
  display:block;
  font-size:0.72rem;
  font-weight:700;
  opacity:0.75;
  margin-bottom:2px;
}

.chat .msgMedia{
  max-width:100%;
  border-radius:8px;
  margin-bottom:4px;
  display:block;
}

.chat .msgMeta{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:4px;
  font-size:0.68rem;
  margin-top:4px;
  opacity:0.8;
}

.chat.receiver .msgMeta{
  opacity:0.55;
}

.tick{
  font-size:0.75rem;
}

.tick.grey{ color:var(--grey-tick); }
.tick.blue{ color:var(--blue-tick); }
.chat.sender .tick.grey{ color:#F0D6DF; }

#mediaPreview{
  display:flex;
  gap:8px;
  padding:8px 20px;
  overflow-x:auto;
  background:#EAE6DC;
}

.previewChip{
  background:white;
  border-radius:6px;
  padding:4px 8px;
  font-size:0.75rem;
  display:flex;
  align-items:center;
  gap:6px;
}

.previewChip .removeChip{
  cursor:pointer;
  color:var(--danger);
  font-weight:700;
}

#inputBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:white;
  border-top:1px solid #E4E0D6;
}

#addMediaBtn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--mustard);
  color:var(--navy);
  font-size:1.3rem;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}

#chatMessage{
  flex:1;
  padding:12px 14px;
  border-radius:20px;
  border:1px solid #DCD8CE;
  font-size:0.92rem;
}

#send{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:var(--teal);
  color:white;
  font-size:1.1rem;
  cursor:pointer;
  flex-shrink:0;
}

#send:hover, #addMediaBtn:hover{
  filter:brightness(0.95);
}

/* -------- Share profile button -------- */
#shareProfileBtn{
  width:calc(100% - 32px);
  margin:12px 16px;
  padding:10px;
  background:var(--teal);
  border:none;
  color:white;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

#shareProfileBtn:hover{
  background:var(--teal-dark);
}

/* -------- Group row three-dot menu -------- */
.friendRowMenuBtn{
  background:none;
  border:none;
  color:#9096AC;
  font-size:1.3rem;
  cursor:pointer;
  padding:0 6px;
  flex-shrink:0;
}

.friendRowMenuBtn:hover{
  color:white;
}

.rowMenuDropdown{
  position:absolute;
  background:white;
  color:var(--text-dark);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  z-index:50;
  overflow:hidden;
  min-width:160px;
}

.rowMenuDropdown button{
  display:block;
  width:100%;
  padding:10px 14px;
  border:none;
  background:none;
  text-align:left;
  cursor:pointer;
  font-size:0.88rem;
  color:var(--text-dark);
}

.rowMenuDropdown button:hover{
  background:#F2EFEA;
}

/* -------- Chat header three-dot menu -------- */
#chatMenuBtn{
  background:none;
  border:none;
  color:var(--text-dark);
  font-size:1.3rem;
  cursor:pointer;
  margin-left:8px;
}

.chatMenuDropdown{
  position:absolute;
  top:56px;
  right:16px;
  background:white;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  z-index:60;
  overflow:hidden;
  min-width:170px;
}

.chatMenuDropdown button{
  display:block;
  width:100%;
  padding:12px 14px;
  border:none;
  background:none;
  text-align:left;
  cursor:pointer;
  font-size:0.9rem;
  color:var(--text-dark);
}

.chatMenuDropdown button:hover{
  background:#F2EFEA;
}

/* -------- Group message ticks (single tick only, no read receipts) -------- */
.chat.sender .tick.single{
  color:#F0D6DF;
  font-size:0.75rem;
}

/* -------- Search overlay mode: show only logo + search + suggestions -------- */
body.search-mode #myProfile,
body.search-mode #shareProfileBtn,
body.search-mode #chatTabs,
body.search-mode #sidebarContent,
body.search-mode #chatWindow{
  display:none !important;
}

body.search-mode #sidebar{
  width:100%;
}

body.search-mode #friendSearchWrap{
  padding:16px;
  margin:0;
}

body.search-mode #searchSuggestions{
  position:static;
  display:block;
  max-height:none;
  height:calc(100vh - 140px);
  box-shadow:none;
  border-radius:8px;
  margin-top:8px;
}

body.search-mode #searchSuggestions.hidden{
  display:none !important;
}

/* ===================== PROFILE SETTINGS PANEL ===================== */
.profileSettingsPanel{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #E4E0D6;
}

.profileSettingsAvatarRow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.profileSettingsAvatarRow .avatar{
  width:56px;
  height:56px;
  font-size:1.1rem;
}

.profileSettingsHint{
  font-size:0.8rem;
  color:#6b7080;
}

#settingsUsername{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  border:1px solid #DCD8CE;
  font-size:0.9rem;
}

#saveProfileSettings{
  width:100%;
  padding:10px;
  border:none;
  border-radius:8px;
  background:var(--teal);
  color:white;
  font-weight:600;
  cursor:pointer;
}

#saveProfileSettings:hover{
  background:var(--teal-dark);
}

#profileSettingsMessage{
  font-size:0.82rem;
  color:var(--danger);
  min-height:16px;
  margin-bottom:0;
}

/* ===================== SHARE LINK MODAL ===================== */
.shareLinkPanel{
  max-height:none;
}

.shareLinkRow{
  display:flex;
  gap:8px;
}

#shareLinkInput{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #DCD8CE;
  font-size:0.85rem;
  color:var(--text-dark);
  background:#F2EFEA;
}

#copyShareLinkBtn{
  padding:10px 16px;
  border:none;
  border-radius:8px;
  background:var(--teal);
  color:white;
  font-weight:600;
  cursor:pointer;
}

#copyShareLinkBtn:hover{
  background:var(--teal-dark);
}

#shareLinkCopiedMsg{
  color:#3B9CE8;
  font-size:0.85rem;
  margin-bottom:0;
  margin-top:8px;
}

/* -------- Media preview thumbnails -------- */
.previewChip img.previewThumb{
  width:32px;
  height:32px;
  object-fit:cover;
  border-radius:4px;
}

.previewChip.uploading{
  opacity:0.6;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:720px){
  #appLayout{
    flex-direction:column;
  }
  #sidebar{
    width:100%;
    max-height:40vh;
  }
  .chat{
    max-width:80%;
  }
}

/* ===================== SETTINGS MODAL ===================== */
.modalOverlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:1000;
  display:flex;
  align-items:flex-end;
}

.settingsPanel{
  background:white;
  width:100%;
  border-radius:16px 16px 0 0;
  padding:20px;
  max-height:60vh;
  overflow-y:auto;
  animation:slideUp 0.3s ease;
}

@keyframes slideUp{
  from{
    transform:translateY(100%);
  }
  to{
    transform:translateY(0);
  }
}

.settingsPanelHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.settingsPanelHeader h2{
  margin:0;
  font-size:1.2rem;
}

.closeSettingsBtn{
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  padding:0;
}

.settingsMenuItem{
  border-bottom:1px solid #E4E0D6;
  padding-bottom:12px;
  margin-bottom:12px;
}

.settingsMenuItem button{
  width:100%;
  padding:12px;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-size:0.95rem;
  color:var(--text-dark);
  transition:background 0.2s;
}

.settingsMenuItem button:hover{
  background:#F2EFEA;
}

.settingsMenuItem button:disabled{
  color:#B7B2A6;
  cursor:not-allowed;
}

.settingsMenuItem button:disabled:hover{
  background:none;
}

.settingsListBtn{
  display:flex !important;
  align-items:center;
  gap:16px;
}

.settingsListIcon{
  font-size:1.3rem;
  flex-shrink:0;
  width:28px;
  text-align:center;
}

.settingsListText{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.settingsListTitle{
  font-weight:600;
  font-size:0.95rem;
  color:var(--text-dark);
}

.settingsListBtn:disabled .settingsListTitle{
  color:#B7B2A6;
}

.settingsListSubtitle{
  font-size:0.78rem;
  color:#9096AC;
}

.friendRow{
  position:relative;
}

.settingsMenuLogout{
  padding-top:12px;
}

.settingsMenuLogout button{
  width:100%;
  padding:12px;
  background:#C0503E;
  border:none;
  color:white;
  border-radius:8px;
  cursor:pointer;
  font-size:0.95rem;
  font-weight:600;
  transition:background 0.2s;
}

.settingsMenuLogout button:hover{
  background:#A73F33;
}