:root{
  --black: #0B0B0C;
  --charcoal: #18171B;
  --charcoal-2: #211F24;
  --red: #C41E3A;
  --red-deep: #6E1620;
  --gold: #E8A93B;
  --ivory: #F3EDE2;
  --ivory-dim: #B9B3A8;
  --palm: #3F7A5C;
  --pano-line: rgba(232,169,59,0.07);
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{ height:100%; }

body{
  background: var(--black);
  font-family:'Manrope', sans-serif;
  color: var(--ivory);
  -webkit-tap-highlight-color: transparent;
}

.screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wordmark{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-0.01em;
  color: var(--ivory);
}
.wordmark span{ color: var(--gold); font-style:italic; }

.pano-texture{
  position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, var(--pano-line) 25%, transparent 25%, transparent 50%, var(--pano-line) 50%, var(--pano-line) 75%, transparent 75%, transparent);
  background-size: 34px 34px;
  opacity:0.5;
  pointer-events:none;
}

.field{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:15px 16px;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  color: var(--ivory);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.field input{
  background:transparent; border:none; outline:none;
  color:var(--ivory); font-family:'Manrope',sans-serif; font-size:15px; width:100%;
}
.field input::placeholder{ color: rgba(243,237,226,0.35); }

.cta{
  width:100%;
  background: var(--gold);
  color:#1A1200;
  border:none;
  padding:16px;
  border-radius:14px;
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:0.01em;
  cursor:pointer;
}
.cta:disabled{ opacity:0.5; }

.cta-outline{
  width:100%;
  background: transparent;
  color: var(--ivory);
  border:1px solid rgba(255,255,255,0.18);
  padding:14px;
  border-radius:14px;
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}

.error-msg{
  color: var(--red);
  background: rgba(196,30,58,0.12);
  border:1px solid rgba(196,30,58,0.3);
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:12px;
  display:none;
}
.error-msg.show{ display:block; }

/* topbar (chat list) */
.topbar{
  padding: 22px 20px 16px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar h1{ font-size:26px; }
.icon-btn{
  width:34px; height:34px;
  border-radius:50%;
  background: var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  color: var(--gold);
  cursor:pointer;
  border:none;
}

.search{
  margin: 14px 20px 6px;
  background: var(--charcoal);
  border-radius:12px;
  padding:11px 14px;
  font-size:13.5px;
  color: var(--ivory-dim);
  display:flex; align-items:center; gap:8px;
}
.search input{
  background:transparent; border:none; outline:none;
  color:var(--ivory); font-family:'Manrope',sans-serif; font-size:13.5px; width:100%;
}

.conv-list{ flex:1; overflow-y:auto; padding: 6px 8px 8px; }
.conv{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:14px; cursor:pointer;
  text-decoration:none; color:inherit;
}
.conv:active{ background: var(--charcoal); }

.avatar{
  width:50px; height:50px; border-radius:50%;
  background: linear-gradient(145deg, var(--red), var(--red-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:18px;
  color: var(--ivory); flex-shrink:0; position:relative;
}
.pulse{
  position:absolute; bottom:1px; right:1px;
  width:12px; height:12px; background: var(--palm);
  border-radius:50%; border:2.5px solid var(--black);
}
.pulse::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid var(--palm); animation: heartbeat 1.8s ease-out infinite;
}
@keyframes heartbeat{
  0%{ transform:scale(0.7); opacity:0.9; }
  70%{ transform:scale(1.6); opacity:0; }
  100%{ opacity:0; }
}

.conv-mid{ flex:1; min-width:0; }
.conv-name{ font-size:15px; font-weight:700; color: var(--ivory); margin-bottom:3px; }
.conv-msg{
  font-size:13px; color: var(--ivory-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px;
}
.conv-right{ text-align:right; flex-shrink:0; }
.conv-time{ font-size:11px; color: var(--ivory-dim); margin-bottom:6px; }
.badge{
  background: var(--gold); color:#1A1200; font-size:11px; font-weight:800;
  min-width:19px; height:19px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
}

.fab{
  position:fixed; right:20px; bottom:26px;
  width:54px; height:54px; border-radius:50%;
  background: var(--red); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--ivory); border:none; cursor:pointer;
  box-shadow: 0 10px 22px -8px rgba(196,30,58,0.6);
}

.empty-state{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 40px; text-align:center; color: var(--ivory-dim);
}
.empty-state .wordmark{ font-size:28px; margin-bottom:10px; opacity:0.5; }

/* chat screen */
.chat-top{
  padding: 18px 16px 14px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,0.06); position:sticky; top:0; background:var(--black); z-index:5;
}
.back{ font-size:22px; color: var(--gold); text-decoration:none; }
.chat-top .avatar{ width:38px; height:38px; font-size:14px; }
.chat-top-info{ flex:1; }
.chat-top-name{ font-size:15px; font-weight:700; color:var(--ivory); }
.chat-top-status{ font-size:11.5px; color: var(--palm); font-weight:600; margin-top:1px; }

.chat-body{
  flex:1; overflow-y:auto; padding: 18px 14px;
  display:flex; flex-direction:column; gap:9px; position:relative;
  background-image:
    linear-gradient(135deg, var(--pano-line) 25%, transparent 25%, transparent 50%, var(--pano-line) 50%, var(--pano-line) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
}
.day-chip{
  align-self:center; background: var(--charcoal); color: var(--ivory-dim);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px;
  margin-bottom:6px; letter-spacing:0.03em;
}
.bubble{
  max-width:76%; padding:10px 13px; font-size:14.5px; line-height:1.4;
  border-radius:16px; position:relative; word-wrap:break-word;
}
.bubble.received{
  background: var(--charcoal-2); color: var(--ivory);
  align-self:flex-start; border-bottom-left-radius:5px;
}
.bubble.sent{
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: var(--ivory); align-self:flex-end; border-bottom-right-radius:5px;
}
.bubble .time{ font-size:10px; opacity:0.6; margin-top:4px; display:block; text-align:right; }

.chat-input{
  display:flex; align-items:center; gap:9px; padding: 10px 12px 16px;
  background: var(--black); border-top:1px solid rgba(255,255,255,0.06);
  position:sticky; bottom:0;
}
.chat-input .field{ flex:1; margin:0; padding:11px 14px; }
.send-btn{
  width:42px; height:42px; border-radius:50%; background: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#1A1200; flex-shrink:0; border:none; cursor:pointer;
}