/* =========================================================================
   OMEGA — Unified inbox mockup (Grow UP look)
   Self-contained light "product screenshot". Scales with its container
   via container queries (cqw units). Sales messages across WA / IG / FB.
   ========================================================================= */
.inbox-wrap{container-type:inline-size;width:100%;background:#eef2f7;overflow:hidden}
.inbox{--i-card:#fff;--i-bg:#f5f8fc;--i-line:#e7edf3;--i-line-2:#eef3f8;
  --i-ink:#0c2440;--i-dim:#6b8197;--i-faint:#9bb0c2;--i-accent:#2e74d6;
  --i-accent-soft:#eaf1fd;--i-wa:#25d366;--i-fb:#1877f2;
  font-family:var(--font-body),system-ui,sans-serif;color:var(--i-ink);
  font-size:1.55cqw;line-height:1.3;display:grid;grid-template-columns:37% 1fr;
  width:100%;background:var(--i-card)}

/* ---- list column ---- */
.inbox__list{background:var(--i-card);border-right:1px solid var(--i-line);
  padding:1.3em 1.1em;display:flex;flex-direction:column;gap:.5em;min-width:0}
.inbox__search{display:flex;align-items:center;gap:.6em;background:var(--i-bg);
  border:1px solid var(--i-line);border-radius:.7em;padding:.7em .85em;margin-bottom:.7em}
.inbox__search svg{width:1.1em;height:1.1em;color:var(--i-faint);flex:none}
.inbox__search span{color:var(--i-faint);font-size:.92em}
.conv{display:flex;gap:.75em;padding:.75em .7em;border-radius:.8em;position:relative;
  min-width:0;cursor:default}
.conv--active{background:var(--i-accent-soft)}
.conv--active::before{content:"";position:absolute;left:0;top:.6em;bottom:.6em;width:.22em;
  border-radius:2em;background:var(--i-accent)}
.conv__av{position:relative;width:2.7em;height:2.7em;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;font-family:var(--font-display),sans-serif;
  font-weight:700;font-size:1em}
.conv__badge{position:absolute;bottom:-.15em;right:-.15em;width:1.35em;height:1.35em;
  border-radius:50%;display:grid;place-items:center;border:.14em solid #fff}
.conv__badge svg{width:.85em;height:.85em;color:#fff}
.ch-wa{background:var(--i-wa)}.ch-fb{background:var(--i-fb)}
.ch-ig{background:radial-gradient(circle at 30% 110%,#fdc468,#ed5b8c 45%,#9b36b7 80%)}
.conv__body{min-width:0;flex:1}
.conv__row{display:flex;align-items:baseline;justify-content:space-between;gap:.5em}
.conv__name{font-family:var(--font-display),sans-serif;font-weight:600;font-size:1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv__time{color:var(--i-faint);font-size:.76em;white-space:nowrap;flex:none}
.conv__msg{color:var(--i-dim);font-size:.86em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:.15em}
.conv__dot{width:.6em;height:.6em;border-radius:50%;background:var(--i-accent);flex:none;
  margin-left:.4em;align-self:center}

/* ---- conversation column ---- */
.inbox__main{display:flex;flex-direction:column;background:var(--i-bg);min-width:0}
.inbox__hd{display:flex;align-items:center;gap:.7em;padding:1em 1.2em;background:var(--i-card);
  border-bottom:1px solid var(--i-line)}
.inbox__hd .conv__av{width:2.3em;height:2.3em}
.inbox__hd-meta{min-width:0;flex:1}
.inbox__hd-name{font-family:var(--font-display),sans-serif;font-weight:700;font-size:1em;
  display:flex;align-items:center;gap:.35em}
.inbox__hd-sub{color:var(--i-dim);font-size:.8em;display:flex;align-items:center;gap:.35em;margin-top:.1em}
.inbox__hd-sub svg{width:.95em;height:.95em;color:var(--i-wa)}
.inbox__resolve{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;
  background:var(--i-wa);color:#fff;font-family:var(--font-display),sans-serif;font-weight:600;
  font-size:.85em;padding:.55em .95em;border-radius:.6em;white-space:nowrap}
.inbox__resolve svg{width:1em;height:1em}
.inbox__tag{width:2.1em;height:2.1em;border-radius:.55em;border:1px solid var(--i-line);
  background:var(--i-card);display:grid;place-items:center;color:var(--i-dim);flex:none}
.inbox__tag svg{width:1em;height:1em}

.inbox__msgs{flex:1;padding:1.2em;display:flex;flex-direction:column;gap:.7em;overflow:hidden}
.msg{max-width:74%;padding:.7em .9em;font-size:.9em;line-height:1.4;border-radius:1em;
  position:relative}
.msg__t{display:block}
.msg__time{display:block;font-size:.74em;margin-top:.3em;opacity:.7}
.msg--in{align-self:flex-start;background:var(--i-card);border:1px solid var(--i-line);
  border-bottom-left-radius:.3em;color:var(--i-ink)}
.msg--in .msg__time{color:var(--i-faint)}
.msg--out{align-self:flex-end;background:var(--i-accent);color:#fff;border-bottom-right-radius:.3em}
.msg--out .msg__time{color:rgba(255,255,255,.8)}

.inbox__composer{background:var(--i-card);border-top:1px solid var(--i-line);padding:.9em 1.2em}
.inbox__tabs{display:flex;gap:1.2em;margin-bottom:.7em;font-size:.86em}
.inbox__tabs b{font-family:var(--font-display),sans-serif;font-weight:600;color:var(--i-accent);
  padding-bottom:.35em;border-bottom:.16em solid var(--i-accent)}
.inbox__tabs span{color:var(--i-faint);display:inline-flex;align-items:center;gap:.35em}
.inbox__input{display:flex;align-items:center;gap:.7em;background:var(--i-bg);
  border:1px solid var(--i-line);border-radius:.7em;padding:.8em .95em}
.inbox__input span{color:var(--i-faint);font-size:.9em;flex:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.inbox__send{display:inline-flex;align-items:center;gap:.4em;background:var(--i-accent);
  color:#fff;font-family:var(--font-display),sans-serif;font-weight:600;font-size:.85em;
  padding:.55em .9em;border-radius:.6em;flex:none}
.inbox__send svg{width:1em;height:1em}

@container (max-width:520px){
  .inbox{font-size:2.4cqw}
  .conv__msg,.inbox__tag:nth-child(n+2){display:none}
}