/* =============== Base =============== */
:root{
  --brand:#174F78; --accent:#ffd54b; --bg:#f5f5f5; --text:#111; --muted:#888; --dkGrey: #666;
  --rlvBlue:#174F78; --rlvDkRed:#A52D2D; --rlvYellow:#FFE180; --rlvCream:#FBF8E9;
  --rlvRed:#C12023; --rlvDkYellow:#ffd54b; --rlvLightYellow:#fbedb6; --rlvTerrocotta:#e66c55;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:Arial,sans-serif; background:var(--bg); color:var(--text) }

/* =============== Common UI =============== */
.topbar{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e6e6e6; }
.topbar-inner{ display:flex; align-items:center; gap:10px; padding:10px 12px; }
.topbar .logo{ max-width:100%; height:auto }
.topbar .search{ display:flex; align-items:center; gap:8px; flex:1; border:1px solid #ddd; border-radius:20px; padding:6px 10px; }
.topbar .search input{ border:none; outline:none; flex:1; font-size:14px; background:transparent; }

.icon-btn{ background:transparent; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; }
.icon-btn:hover{ background:#f0f0f0 }

/* =============== Conversation list =============== */
.conversation-list{ list-style:none; padding:0; margin:0; }
.conversation-list li{
  padding-left:12px; padding-right:12px; padding-top:6px; padding-bottom:6px; border-bottom:4px solid #eee; background:#fff; border-radius:12px;
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  column-gap:10px; row-gap:4px;
}
.conversation-list li:hover{ background:var(--rlvLightYellow); cursor:context-menu; }
.conversation-list li.selected{ background:var(--rlvDkYellow); cursor:pointer; }

.conversation-name{ font-weight:600; color:#000; grid-column:1 / 2; grid-row:1; }
.lastMsgTime{ grid-column:2 / 3; grid-row:1; align-self:start; font-size:.7em; color:var(--muted); font-weight:bold }
.lastMsg{
  grid-column:1 / 3; grid-row:2; font-size:.8em; color:var(--brand);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.unreadMessages{ font-size:.78em; color:var(--muted) }

/* =============== Chat bubbles =============== */
.chat-window{ padding:10px; }
.bubble{ max-width:72%; padding:5px; margin:4px 0; border-radius:12px; line-height:1.32; word-wrap:break-word; font-size:1.1em }
.inbound{ background:var(--brand); color:#fff; margin-left:auto; align-self:flex-end }
.outbound{ background:var(--accent); color:#000; align-self:flex-start }
.timestamp{ font-size:.7em; opacity:.8; margin-top:4px; display:block; }
.timestamp.inbound{ color:var(--rlvCream); }
.timestamp.outbound{ color:var(--dkGrey); }

/* =============== Composer (mobile-safe) =============== */
.send-form{
  display:flex; gap:8px; align-items:center; padding:10px;
  background:#fff; border-top:1px solid #eee; width:100%; box-sizing:border-box;
}
.send-form input[type="text"], .send-form select{ min-width:0; } /* allow shrinking */
.send-form input[type="text"]{
  flex:1 1 auto; padding:10px; border:1px solid #ddd; border-radius:8px;
}
.send-form select{
  flex:0 1 40%; max-width:45vw; white-space:nowrap;
  padding:8px; border:1px solid #ddd; border-radius:8px; background:#fff;
}
.send-form button{ padding:10px 16px; background:#128C7E; color:#fff; border:none; border-radius:8px; cursor:pointer; flex:0 0 auto; }
.send-form button:hover{ filter:brightness(0.95) }

/* =============== Mobile-first layout =============== */
.app{ display:flex; flex-direction:column; min-height:100vh; }
.sidebar{ display:none; }
.topbar--desktop-only{ display:none; }

.conversations-col{ display:block; }
.chat-col{ display:none; }

/* Chat page on mobile: only show chat; composer sticky */
.app.is-chat .conversations-col{ display:none; }
.app.is-chat .chat-col{
  display:flex; flex-direction:column; min-height:100vh; background:#fff;
}
.app.is-chat .send-form{ position:sticky; bottom:0; z-index:5; }

/* Bottom nav (mobile only) */
.bottom-nav{ position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid #e6e6e6; }
.bottom-nav-inner{ display:flex; align-items:center; justify-content:space-around; padding:10px 6px; }
.bottom-nav .icon-btn{ width:40px; height:40px; border-radius:10px; }

/* =============== Desktop (≥1024px): 3 columns =============== */
@media (min-width:1024px){
  html,body{ height:100%; overflow:hidden; }
  .bottom-nav{ display:none; }
  .icon-btn{ width:48px; height:48px; }

  .app{
    display:grid;
    grid-template-columns:10% 30% 60%;
    height:100vh; min-height:0; overflow:hidden;
  }

  /* Sidebar */
  .sidebar{
    display:flex;
    grid-column:1;
    background:#fff;
    border-right:1px solid #e6e6e6;
    position:sticky; top:0;
    height:100vh; overflow:hidden;
    flex-direction:column; align-items:center; gap:10px;
    padding:12px 8px;
  }
  .sidebar .menu-vertical{ display:flex; flex-direction:column; gap:8px; width:100%; align-items:center; }

  .version-text {
    font-size: 0.7rem;
    color: var(--rlvBlue);
    margin: 4px 0 8px 0;
    text-align: center;
    }

  .version-text {
    font-size: 0.5rem;
    color: var(--rlvBlue);
    margin-left: 4px;
    vertical-align: super; /* raises it slightly */
  }

  /* Conversations column */
  .conversations-col{
    display:flex; grid-column:2; flex-direction:column;
    min-height:0; overflow:hidden; border-right:1px solid #e6e6e6; background:#fff;
  }
  .conversations-col .topbar{ flex:0 0 auto; position:sticky; top:0; z-index:5; }
  .conversations-col .list-wrap{ flex:1 1 auto; min-height:0; overflow:auto; }

  /* Chat column */
  .chat-col{
    display:grid; grid-column:3;
    grid-template-rows:auto minmax(0,1fr) auto;
    height:100vh; min-height:0; overflow:hidden; background:#fff;
  }
  .chat-header{
    margin:0; position:sticky; top:0; z-index:5;
    padding:10px 12px; border-bottom:1px solid #e6e6e6; background:#fff;
  }
  .chat-window{ grid-row:2; min-height:0; overflow:auto; padding:16px; }
  .send-form{ grid-row:3; position:static; }

  /* Desktop chat-only pages: make chat span full width */
  .app.is-chat{ grid-template-columns:1fr; }
  .app.is-chat .chat-col{ grid-column:1 / -1; }
}

/* =============== WhatsApp status ticks =============== */
.wa-status {
  display: inline-block;
  margin-left: 6px;          /* small gap from timestamp */
  font-size: 0.9em;          /* slightly larger than timestamp (which is 0.7em) */
  vertical-align: middle;
}

/* Single black tick (sent) */
.wa-status.sent::before {
  content: "✔";              /* single tick */
  color: #079a02;               /* black */
}

/* Double black ticks (delivered) */
.wa-status.delivered::before {
  content: "✔✔";             /* two ticks */
  color: #079a02;               /* black */
  letter-spacing: -2px;      /* tighten spacing between ticks */
}

/* Blue heart (read) */
.wa-status.read::before {
  content: "♥";              /* heart symbol */
  color: var(--rlvBlue);     /* your brand blue */
}

/* Red cross (failed) */
.wa-status.failed::before {
  content: "✖";              /* cross symbol */
  color: var(--rlvRed);      /* your red */
}

.wa-status.none {
  color: #888;
  font-style: italic;
}