/* The Messenger (/messenger/): always light, the app's navy and orange. */
:root { --ink:#0E1A2B; --muted:#5A6677; --line:#DCE2EA; --bg:#F6F7F9; --bg2:#EEF1F5; --accent:#C24D0A; --accent-dark:#A13F08; --tint:#FFF4EC; --tint2:#FDE6D5; --navy:#0B1F3B; --navy2:#12305A; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; }
a { color:var(--navy2); } a:hover { color:var(--accent-dark); }
input, textarea, select, button { font:inherit; font-size:16px; touch-action:manipulation; }
.mg-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mg-muted { color:var(--muted); }
.mg-grow { flex:1; }
.mg-bold { font-weight:700; color:var(--ink); }
.mg-pad { padding:16px; }
.mg-bar { display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; background:var(--navy); color:#fff; }
.mg-brand { color:#fff; font-weight:700; text-decoration:none; }
.mg-brand:hover { color:#FBCBA9; }
.mg-who { color:#C9D3E1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:30vw; }
.mg-bar form { margin:0; }
.mg-lang select { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:5px 6px; font-size:14px; max-width:120px; }
.mg-lang option { color:#0E1A2B; }
.mg-barlink, .mg-barbtn { color:#fff; background:none; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:6px 10px; font-size:14px; text-decoration:none; cursor:pointer; min-height:36px; display:inline-flex; align-items:center; }
.mg-barlink:hover, .mg-barbtn:hover { background:rgba(255,255,255,.1); color:#fff; }
.mg-msgs { padding:8px 14px 0; }
.mg-flash { margin:0 0 8px; padding:10px 14px; border-radius:8px; background:#e0f2fe; }
.mg-flash.error { background:#fee2e2; color:#991b1b; }
.mg-error { color:#991b1b; background:#fee2e2; border-radius:8px; padding:8px 12px; margin:8px 0 0; }

/* two columns: list | conversation; phones show one at a time */
.mg-grid { flex:1; display:grid; grid-template-columns:minmax(280px, 360px) 1fr; min-height:0; height:calc(100vh - 52px); height:calc(100dvh - 52px); }
.mg-side { background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.mg-search { padding:12px 12px 6px; margin:0; }
.mg-search input { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--bg); }
.mg-chips { display:flex; gap:6px; flex-wrap:wrap; padding:4px 12px 10px; border-bottom:1px solid var(--line); }
.mg-chip { padding:5px 11px; border-radius:999px; background:var(--bg2); color:var(--ink); font-size:13px; text-decoration:none; min-height:30px; display:inline-flex; align-items:center; }
.mg-chip.on { background:var(--accent); color:#fff; }
.mg-chip.mg-new { background:var(--tint); color:var(--accent-dark); font-weight:600; }
.mg-list { overflow-y:auto; flex:1; }
.mg-row { display:flex; gap:10px; padding:11px 12px; text-decoration:none; color:inherit; border-bottom:1px solid #F0F2F5; }
.mg-row:hover { background:var(--bg); color:inherit; }
.mg-row.on { background:var(--tint); box-shadow:inset 3px 0 0 var(--accent); }
.mg-av { width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:var(--navy2); }
.mg-av.mg-k-supplier { background:#5A6677; } .mg-av.mg-k-customer { background:#166534; } .mg-av.mg-k-client { background:var(--accent); }
.mg-row-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.mg-row-top { display:flex; gap:6px; align-items:baseline; min-width:0; }
.mg-row-top b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-kind { font-size:11px; border-radius:4px; padding:0 5px; background:var(--bg2); color:var(--muted); white-space:nowrap; }
.mg-time { font-size:12px; white-space:nowrap; }
.mg-sub { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-row-last { display:flex; gap:6px; align-items:center; }
.mg-last { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.mg-badge { background:var(--accent); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:0 7px; min-width:20px; text-align:center; }

.mg-main { display:flex; flex-direction:column; min-height:0; min-width:0; }
.mg-head { display:flex; gap:10px; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mg-head form { margin:0; }
.mg-head-text { flex:1; min-width:0; }
.mg-title { font-weight:700; font-size:16px; }
.mg-facts { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; }
.mg-status { background:var(--tint2); color:#82340B; border-radius:999px; padding:0 8px; font-weight:600; }
.mg-back { display:none; color:var(--ink); }
.mg-btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 12px; font-size:14px; color:var(--ink); text-decoration:none; cursor:pointer; min-height:36px; display:inline-flex; align-items:center; }
.mg-btn:hover { border-color:var(--accent); color:var(--accent-dark); }
.mg-note { margin:0; padding:8px 16px; background:#fef3c7; color:#92400e; font-size:14px; }
.mg-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.mg-b { max-width:min(640px, 85%); padding:9px 13px; border-radius:14px; background:#fff; border:1px solid var(--line); align-self:flex-start; overflow-wrap:anywhere; }
.mg-b.mg-me { align-self:flex-end; background:var(--tint); border-color:var(--tint2); }
.mg-b.mg-team { align-self:flex-end; background:#F3F6FA; border-color:var(--line); }
.mg-b.mg-col { background:#F0FDF4; border-color:#BBF7D0; }
.mg-whoat { font-size:12px; color:var(--muted); margin-bottom:2px; }
.mg-newtag { background:#1d4ed8; color:#fff; border-radius:999px; padding:0 6px; font-size:10px; font-weight:700; }
.mg-att { margin:6px 0 0; padding-left:18px; font-size:14px; }
.mg-attnote { font-size:12px; color:var(--muted); }
.mg-tick { font-size:11px; color:var(--muted); text-align:right; margin-top:2px; }
.mg-tick-read { color:#1d4ed8; }
.mg-typing { margin:0; padding:2px 18px 6px; font-size:13px; color:var(--muted); font-style:italic; }
.mg-compose { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; padding:10px 12px; background:#fff; border-top:1px solid var(--line); position:sticky; bottom:0; }
.mg-compose textarea { flex:1; min-width:0; resize:none; border:1px solid var(--line); border-radius:10px; padding:9px 12px; max-height:160px; min-height:42px; }
.mg-attach { position:relative; cursor:pointer; color:var(--muted); width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.mg-attach:hover { background:var(--bg); color:var(--accent-dark); }
.mg-attach input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.mg-send { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:0 18px; min-height:42px; font-weight:600; cursor:pointer; }
.mg-send:hover { background:var(--accent-dark); }
.mg-send:disabled { opacity:.6; }
.mg-files { flex-basis:100%; font-size:13px; }
.mg-files:empty { display:none; }
.mg-compose .mg-error { flex-basis:100%; }
.mg-empty { flex:1; display:flex; align-items:center; justify-content:center; }

@media (max-width: 760px) {
  .mg-grid { grid-template-columns:1fr; }
  .mg-has-conv > .mg-side { display:none; }
  .mg-app:not(.mg-has-conv) > .mg-main { display:none; }
  .mg-back { display:inline-flex; }
  .mg-who, .mg-barlink { display:none; }
  .mg-barbtn { white-space:nowrap; padding:4px 8px; font-size:13px; }
  .mg-head { padding:8px 12px; gap:6px 10px; }
  .mg-head-text { flex:1 1 calc(100% - 40px); }
  .mg-title { font-size:15px; }
  .mg-head .mg-btn { min-height:32px; padding:4px 10px; font-size:13px; }
  .mg-b { max-width:88%; }
}

/* simple pages: sign-in, new conversation */
.mg-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; max-width:440px; margin:40px auto; width:calc(100% - 32px); }
.mg-card-wide { max-width:640px; }
.mg-card h1 { margin:0 0 12px; font-size:22px; }
.mg-card h2 { font-size:16px; margin:20px 0 6px; }
.mg-card label { display:block; font-weight:600; font-size:14px; margin:12px 0 4px; }
.mg-card input[type=email], .mg-card input[type=search] { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.mg-card form[role=search] { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.mg-card form[role=search] label { flex-basis:100%; }
.mg-card form[role=search] input { flex:1; width:auto; }
.mg-wide { width:100%; margin-top:14px; }
.mg-or { margin-top:18px; font-size:14px; }
.mg-pick { list-style:none; padding:0; margin:0; }
.mg-pick li a { display:block; padding:9px 4px; border-bottom:1px solid #F0F2F5; text-decoration:none; }
.mg-empty > div { text-align:center; padding:16px; max-width:420px; }
.mg-pushbox { border-top:1px solid var(--line); padding:8px 12px; font-size:14px; }
.mg-pushbox summary { cursor:pointer; color:var(--navy2); font-weight:600; padding:4px 0; }
.mg-pushbox .push-box h2 { display:none; }
.mg-pushbox .push-box .btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 10px; cursor:pointer; }