:root{
  --teal: #14b8a6;
  --teal-dark: #0d9488;
  --purple: #8b5cf6;
  --bg-grad: linear-gradient(160deg, #d9f2ea 0%, #e3ecf9 45%, #eadcf7 100%);
  --card-bg: #ffffff;
  --text-dark: #1e2a33;
  --text-muted: #7a8894;
  --bubble-sent: #d7f3ec;
  --bubble-recv: #f1f3f5;
  --danger: #ef4444;
  --radius: 18px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  background: var(--bg-grad);
  min-height:100vh;
}
a{ color: var(--teal-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== Phone-ish centered app shell (works fine on desktop & mobile) ===== */
.app-shell{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-grad);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ===== Auth pages (login / signup) ===== */
.auth-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 48px 24px 24px;
}
.brand{
  text-align:center;
  margin-bottom: 24px;
}
.brand .logo-icon{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
}
.brand .logo-icon svg{ width:56px; height:56px; }
.brand h1{
  font-size: 30px;
  margin: 4px 0 2px;
  color: #16323a;
  letter-spacing: 0.5px;
}
.brand p{
  margin:0; color: var(--text-muted); font-size: 14px;
}
.card{
  background: var(--card-bg);
  border-radius: 24px;
  padding: 28px 24px;
  width:100%;
  box-shadow: 0 20px 40px rgba(20,60,60,0.10);
}
.card h2{
  margin:0 0 6px; font-size:22px; text-align:center;
}
.card .sub{
  text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:22px;
}
.field{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid #e3e8ec;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 14px;
  background:#fbfcfd;
}
.field:focus-within{
  border-color: var(--teal);
  background:#fff;
}
.field svg{ flex-shrink:0; color:#9aa7ae; width:18px;height:18px; }
.field input{
  border:none; outline:none; background:transparent;
  flex:1; font-size:15px; color:var(--text-dark);
}
.field .toggle-eye{ cursor:pointer; color:#9aa7ae; }
.checkline{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; color:var(--text-muted); margin: 6px 0 18px;
}
.btn-primary{
  width:100%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#fff; border:none; border-radius:14px;
  padding:15px; font-size:16px; font-weight:600;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(13,148,136,0.25);
  transition: transform .15s ease;
}
.btn-primary:active{ transform: scale(0.98); }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; }
.divider{
  display:flex; align-items:center; gap:10px; color:#c3cbd0;
  margin: 18px 0; font-size:12px;
}
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:#e6e9ec; }
.switch-line{ text-align:center; font-size:14px; color:var(--text-muted); }
.error-box{
  background:#fdeaea; color:#c0392b; border-radius:10px;
  padding:10px 12px; font-size:13px; margin-bottom:14px;
}

/* ===== Chat list page ===== */
.topbar{
  background: linear-gradient(135deg, var(--teal), #0aa596);
  padding: 22px 20px 30px;
  border-radius: 0 0 26px 26px;
  display:flex; align-items:center; justify-content:space-between;
  color:#fff;
}
.topbar .brand-mini{
  display:flex; align-items:center; gap:8px;
  font-size:22px; font-weight:700;
}
.topbar .icons{ display:flex; gap:16px; }
.topbar .icons svg{ width:22px;height:22px; cursor:pointer; }

.search-wrap{
  margin: -18px 16px 10px;
  display:flex; gap:10px;
}
.search-box{
  flex:1;
  background:#fff; border-radius:14px;
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.search-box input{ border:none; outline:none; flex:1; font-size:14px; }
.filter-btn{
  width:46px; background:#fff; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06); cursor:pointer;
}

.chat-list{ padding: 4px 12px 90px; flex:1; overflow-y:auto; }
.chat-item{
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:16px;
  padding:12px; margin-bottom:10px;
  cursor:pointer;
  transition: transform .1s ease;
}
.chat-item:active{ transform: scale(0.98); }
.avatar{
  width:50px; height:50px; border-radius:50%;
  flex-shrink:0; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:18px;
}
.chat-meta{ flex:1; min-width:0; }
.chat-meta .row1{ display:flex; justify-content:space-between; align-items:center; }
.chat-meta .name{ font-weight:600; font-size:15.5px; }
.chat-meta .time{ font-size:11.5px; color:var(--text-muted); }
.chat-meta .row2{ display:flex; justify-content:space-between; align-items:center; margin-top:2px;}
.chat-meta .last-msg{
  font-size:13px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px;
}
.badge{
  background: var(--teal); color:#fff; font-size:11px; font-weight:700;
  min-width:20px; height:20px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.empty-state{ text-align:center; color:var(--text-muted); padding:60px 20px; font-size:14px; }

.fab{
  position:absolute; right:22px; bottom:90px;
  width:54px; height:54px; border-radius:50%;
  background: var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(20,184,166,0.4);
  cursor:pointer; border:none;
}

.bottom-nav{
  position:sticky; bottom:0;
  background:#fff; display:flex;
  border-top:1px solid #eef0f2;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.bottom-nav .nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; color:#9aa7ae; cursor:pointer;
}
.bottom-nav .nav-item.active{ color: var(--teal-dark); font-weight:600; }
.bottom-nav svg{ width:22px;height:22px; }

/* ===== Chat conversation page ===== */
.chat-header{
  background: linear-gradient(135deg, var(--teal), #0aa596);
  color:#fff; padding: 16px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:5;
}
.chat-header .back{ cursor:pointer; }
.chat-header .avatar{ width:38px;height:38px; font-size:14px; }
.chat-header .who{ flex:1; }
.chat-header .who .name{ font-weight:600; font-size:16px; }
.chat-header .who .status{ font-size:11.5px; opacity:0.9; display:flex; align-items:center; gap:5px; }
.dot-online{ width:7px;height:7px; border-radius:50%; background:#4ade80; display:inline-block; }
.chat-header .actions{ display:flex; gap:14px; }
.chat-header .actions svg{ width:20px;height:20px; cursor:pointer; }

.messages-wrap{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:4px;
  background-image: radial-gradient(#e3e8ec 1px, transparent 1px);
  background-size: 18px 18px;
}
.msg-row{ display:flex; margin-bottom:6px; }
.msg-row.out{ justify-content:flex-end; }
.msg-row.in{ justify-content:flex-start; }
.bubble{
  max-width:75%;
  padding:10px 13px 8px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.4;
  position:relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.msg-row.out .bubble{ background: var(--bubble-sent); border-bottom-right-radius:4px; }
.msg-row.in .bubble{ background: var(--bubble-recv); border-bottom-left-radius:4px; }
.bubble img{ max-width:100%; border-radius:10px; display:block; margin-bottom:4px; }
.bubble .meta{
  display:flex; gap:4px; align-items:center; justify-content:flex-end;
  font-size:10.5px; color:var(--text-muted); margin-top:3px;
}
.tick{ color:#9aa7ae; }
.tick.seen{ color:#2563eb; }
.day-sep{
  text-align:center; font-size:11.5px; color:var(--text-muted);
  margin: 10px 0; position:relative;
}

.composer{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px max(10px, env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid #eef0f2;
  position:sticky; bottom:0;
}
.composer .icon-btn{
  width:38px;height:38px; border-radius:50%; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; color:#8a97a0; cursor:pointer; flex-shrink:0;
}
.composer input[type=text]{
  flex:1; border:1.5px solid #e6e9ec; border-radius:22px;
  padding:11px 16px; font-size:14.5px; outline:none;
}
.composer input[type=text]:focus{ border-color: var(--teal); }
.send-btn{
  width:42px;height:42px; border-radius:50%; border:none;
  background: var(--teal); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.send-btn:disabled{ opacity:0.5; }

/* New chat / user search page */
.user-row{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  cursor:pointer; border-bottom:1px solid #f0f2f4;
}
.user-row:active{ background:#f7f9fa; }

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px; background:#1e2a33; color:#fff;
  padding:10px 18px; border-radius:10px; font-size:13.5px;
  z-index:50; opacity:0; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }

@media (min-width:481px){
  .app-shell{ box-shadow: 0 0 60px rgba(0,0,0,0.08); }
}