@charset "utf-8";

/* ======================== fillter ================================== */
/* Disable body scroll when panel open */
body.noscroll {
    overflow: hidden;
	height: auto;
}

/* FILTER BUTTON */
.filter-btn {
    position: fixed;
    top: 65px;
    right: 5px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
    z-index: 2003;
    transition: background 0.3s ease;
    color: blue;
    background: #ddd;
}

/* Hover */
.filter-btn:hover {
    background: #eee;
    color: green;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
}

/* When open */
.filter-btn.open {
	position: fixed; 
    top: 5px;
    right: 5px;
}
.filter-btn.open #filterIcon {
    transform: rotate(90deg);
    color: blue;
}

#filterIcon { transition: transform 0.3s ease; }


/* OVERLAY */
.filter-overlay {
    position: fixed;
    inset: 0;
    /*backdrop-filter: blur(1px);*/
    background: rgba(0,0,0,0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2001;
}
.filter-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* PANEL WRAPPER */
.filter-panel-wrapper {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2002;
}

/* SLIDE PANEL */
.filter-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 90%;
    height: 100vh;
    background: #fff;
    padding: 20px 20px 120px;
    transform: translateX(100%); /* hidden */
    transition: transform 0.3s ease;
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    color: #333;
}

/* PANEL TEXT */
.filter-panel h6 { font-size: 28px; }

.filter-panel button {
    background: none;
    border: none;
    color: #333;
    box-shadow: none;
}
.filter-panel button:hover {
	background-color: inherit;
}
.filter-panel.show {
    transform: translateX(0);
}


/* ACCORDION */
.filter-group {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.group-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 10px 0;
    font-size: 17px;
    cursor: pointer;
}

.group-header .arrow {
    font-size: 36px;
    transition: transform 0.25s ease;
}
.group-header.open .arrow {
    transform: rotate(90deg);
	font-size: 36px;
}

.group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.group-content input {
    width: 100%;
	
}

/* SMALL SCREENS */
@media screen and (max-width: 650px) {
    .filter-btn {
        position: static;
        float: right;
    }
}



/* =================================== Mailbox ===================================== */

/* =================================== Mailbox ===================================== */

#messagesWrapper {height:100vh;display:flex;overflow:hidden;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
	
	height: calc(100vh - 150px);
}

/* ================= INBOX ================= */
#inboxPanel {width:340px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column;}
#inboxHeader {padding:14px 16px;font-weight:700;border-bottom:1px solid #eee;}
#searchBox {padding:10px;border-bottom:1px solid #f3f3f3;}
#searchBox input {width:100%;padding:10px;border-radius:10px;border:1px solid #eee;}
#inboxList {overflow:auto;flex:1;}

#inboxList .item {display:flex;align-items:center;padding:10px;border-bottom:1px solid #f4f4f4;cursor:pointer;
overflow: hidden;
}


#inboxList .item:hover {background:#fbfdff;}
#inboxList .pic img {width:48px;height:48px;border-radius:50%;margin-right:12px;object-fit:cover;}
#inboxList .meta {flex:1;}
#inboxList .name {font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


#inboxList .preview {
    font-size: 14px;
    color: #555;
    line-height: 1.3em;
    max-height: calc(1.3em * 2); /* enough height for 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
	max-width: 170px;
}


/* Keep date on far right ALWAYS */
#inboxList .date {
    font-size: 12px;
    color: #999;
    margin-left: auto;
    flex-shrink: 0;
}

/* Blue highlight when unread */
#inboxList .item.unread-item .name,
#inboxList .item.unread-item .preview {
    color: #007aff !important;
    font-weight: 500;
}

/* Unread badge (count number) */
#inboxList .badge {
    background: #007aff;
    color: #fff;
    padding: 3px 7px;
    font-size: 11px;
    border-radius: 12px;
    margin-left: 8px;
    min-width: 20px;
    text-align: center;
    font-weight: 500;
}

/* ================= CHAT ================= */
#chatPanel {flex:1;display:flex;flex-direction:column;background:#f2f4f6;position:relative;
}
#chatHeader {display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #ddd;background:#fff;z-index:10;}
#backBtn {display:none;margin-right:12px;padding:8px 12px;background:#007aff;color:#fff;border:none;border-radius:8px;}
#chatTitle {font-weight:700;}
#chatBody {flex:1;overflow-y:auto;padding:18px;padding-bottom:80px;}
.date-sep {text-align:center;color:#777;font-size:12px;margin:14px 0;}
.bubble {max-width:75%;padding:10px 14px;border-radius:14px;margin-bottom:12px;font-size:15px;position:relative;}
.bubble.me {background:#007aff;color:#fff;margin-left:auto;border-bottom-right-radius:4px;}
.bubble.them {background:#fff;border:1px solid #ddd;color:#111;border-bottom-left-radius:4px;}
.msg-time {font-size:11px;margin-top:6px;text-align:right;opacity:0.7;}

/* ================= COMPOSER ================= */
#chatInputBox {padding:6px;background:#fff;border-top:1px solid #ddd;display:flex;gap:8px;align-items:center;}
#chatInputBox textarea {width:100%;min-height:58px;max-height:140px;padding:10px;border-radius:10px;border:1px solid #ccc;resize:none;}
#chatInputBox .send-btn {min-width: 55px; margin: 0; padding:10px;background:#007aff;color:#fff;border:none;border-radius:8px;}

/* ================= MOBILE ================= */
@media (max-width:820px){
    #inboxPanel,#chatPanel {width:100%;height:100%;position:absolute;top:120px;left:0;overflow:hidden;transition:none;}
    #inboxPanel {z-index:20;}
    #chatPanel {z-index:30;display:none;}
    #chatPanel.active {display:flex;}
    #backBtn {display:inline-block;}
}




/* ============================================================ Photo slider
   RESET (local to slider only)
============================================================ */
.photoSlide,
.photoSlide * {
  box-sizing: border-box;
}

/* ============================================================
   SLIDER CONTAINER
============================================================ */
.photoSlide {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #333;
  overflow: hidden;
  text-align: center;

  border: 1px outset #09f;
  box-shadow: 0 8px 16px rgba(0,0,0,.8);
  margin-bottom: 20px;

}

/* ============================================================
   SLIDES
============================================================ */
.mySlides {
  display: none;
  width: 100%;
}

.fade {
  animation: fade 1.2s ease;
}

@keyframes fade {
  from { opacity: .4; }
  to   { opacity: 1; }
}

/* ============================================================
   SLIDE INNER (CENTERING LAYER)
============================================================ */
.slide-inner {
  width: 100%;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   DEFAULT IMAGE (NON-PROFILE)
============================================================ */
.mySlides img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
   PROFILE PHOTO (photo_no = 0)
============================================================ */
.mySlides.is-profile .slide-inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.mySlides.is-profile img {
  max-width: 300px;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px outset #09f;
  box-shadow: 0 8px 16px rgba(0,0,0,.8);
	
}

/* ============================================================
   NAV ARROWS
============================================================ */
.prev, .next, .prev:hover, .next:hover {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  z-index: 15;
}

.prev { left: 0; }
.next { right: 0; }

.prev:hover,
.next:hover {
  background: rgba(0,0,0,.3);
}

/* ============================================================
   DOTS (FIXED BOTTOM-CENTER)
============================================================ */
.photoSlide .slideDots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  white-space: nowrap;
}

.dot {
  cursor: pointer;
  height: 20px;
  width: 20px;
  line-height: 20px;
  margin: 0 3px;
  border-radius: 50%;
  display: inline-block;
  background: #fff;
  color: #000;              /* SHOW NUMBER */
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: background-color .3s ease;
}


.dot.active,
.dot:hover {
  background: #717171;
}

/* ============================================================
   MOBILE TWEAKS
============================================================ */
@media (max-width: 540px) {

	.slide-inner {
	  min-height: 300px;
	}

	  .prev,
	  .next {
		padding: 14px;
	  }
}

	
@media (max-height: 340px) {
	.slide-inner {
	  max-height: 300px;
	  min-height: 300px;
	}
	.mySlides img {
	  max-height: 300px;
	}
}