/* TownLink messaging (static/messages.js). Mobile-first.
   Chat v2: a phone-texting layout. Mine on the right in a solid accent bubble (white text), theirs on the left in a neutral
   grey bubble. Runs of same-sender messages stack tightly; only the last bubble of a run has a tail. Light + dark aware. */

/* ---------- inbox ---------- */
.msglist{display:grid;gap:8px}
.msgrow{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);color:inherit;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
@media(hover:hover){.msgrow:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}}
.msgrow:active{transform:scale(.99)}
.msgrow:hover{background:var(--surface-raised);color:inherit}.msgrow.unread b{color:var(--text)}.msgrow.unread{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.msgrow.unread .small{color:var(--text)}
.msgrow .badge,.msghead .badge{position:static}
.msgho{background:linear-gradient(135deg,#818cf8,#4338ca)!important;color:#fff!important}
.msgrow .sfav,.msghead .sfav,.mrow .mav .sfav{border-radius:50%}
.msgini{background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 55%,#000))!important;color:#0b0b10!important;font-weight:700}
.sfav.xs{width:14px;height:14px;font-size:8px;border-radius:50%;vertical-align:-2px;display:inline-grid;place-items:center;object-fit:cover}
.msgs2.admin{display:flex;flex-direction:column;gap:8px;max-height:65vh;overflow-y:auto}
.msgs2.admin .msg2{background:var(--surface-raised);border:1px solid var(--border);border-radius:12px;padding:8px 12px}

/* ---------- conversation: colour tokens (light default; dark follows the device, html[data-theme] overrides either way) ---------- */
.msgwrap{--c-bg:var(--surface);--c-panel:var(--header-bg);--c-line:var(--border);--c-mine:#1F6F5C;--c-mine-text:#ffffff;--c-theirs:#ECE7DE;--c-theirs-text:#18211E;--c-meta:#5A635F;--c-card:var(--surface);--c-quote-mine:rgba(0,0,0,.22);--c-quote-theirs:rgba(0,0,0,.07);--c-read:#1A6452;--c-warn-bg:var(--warn-bg);--c-warn-text:#7A3E06;--c-warn-line:var(--warn-line);
  position:relative;background:var(--c-bg);color:var(--text)}
@media (prefers-color-scheme: dark){
  html:not([data-theme=light]) .msgwrap{--c-bg:#121916;--c-panel:rgba(18,25,22,.94);--c-line:var(--border);--c-mine:#1F6F5C;--c-mine-text:#ffffff;--c-theirs:#26302C;--c-theirs-text:#EEF2EF;--c-meta:#A3AFA9;--c-card:var(--surface);--c-quote-mine:rgba(0,0,0,.24);--c-quote-theirs:rgba(255,255,255,.09);--c-read:#6FD3B1;--c-warn-bg:#2A2111;--c-warn-text:#F5C86E;--c-warn-line:#4A3A18}
}
html[data-theme=dark] .msgwrap{--c-bg:#121916;--c-panel:rgba(18,25,22,.94);--c-line:var(--border);--c-mine:#1F6F5C;--c-mine-text:#ffffff;--c-theirs:#26302C;--c-theirs-text:#EEF2EF;--c-meta:#A3AFA9;--c-card:var(--surface);--c-quote-mine:rgba(0,0,0,.24);--c-quote-theirs:rgba(255,255,255,.09);--c-read:#6FD3B1;--c-warn-bg:#2A2111;--c-warn-text:#F5C86E;--c-warn-line:#4A3A18}
body.inchat{background:var(--surface)}

/* ---------- conversation: header ---------- */
.msghead{position:sticky;top:var(--header-h);z-index:6;display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--c-panel);border-bottom:1px solid var(--c-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.msghead .sfav{width:40px;height:40px;font-size:15px;flex:none}
.msghead .mhname{display:flex;align-items:center;gap:6px;min-width:0;font-size:17px;font-weight:650}
.msghead .mhname b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msghead .mhname a{color:inherit}
.msghead .mhsub{font-size:13px;color:var(--c-meta)}
.msghead .vbadge2{flex:none}
.msgback{display:inline-flex;align-items:center;gap:2px;font-size:30px;line-height:1;color:var(--accent);padding:0 4px 4px 0;min-height:44px;min-width:32px}
.msgback .badge{font-size:11px;margin-top:4px}
.msghead .btn{min-height:40px;padding:6px 12px;font-size:20px;background:transparent;border-color:transparent;color:var(--text)}
.msgblocked{margin:8px 10px;padding:10px 12px;border-radius:12px;background:var(--surface-raised);font-size:15px}

/* ---------- conversation: thread ---------- */
.msgs2{display:flex;flex-direction:column;padding:10px 10px 6px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--c-bg)}
.msgday{display:flex;justify-content:center;margin:16px 0 8px}
.msgday span{font-size:13px;font-weight:600;color:var(--c-meta);padding:2px 10px}
.msgre{display:flex;align-items:center;gap:8px;margin:10px 4px 4px;font-size:13px;color:var(--c-meta)}
.msgre::before,.msgre::after{content:"";flex:1;height:1px;background:var(--c-line)}
.msgre span{padding:1px 8px}

.mrow{display:flex;align-items:flex-end;gap:4px;position:relative;margin-top:3px;border-radius:14px;transition:background .6s}
.mrow.first{margin-top:10px}
.mrow.mine{flex-direction:row-reverse}
.mrow .mav{width:30px;flex:none;align-self:flex-start;margin-top:20px}
.mrow .mav .sfav{width:30px;height:30px;font-size:12px}
.mrow .mcol{display:flex;flex-direction:column;align-items:flex-start;max-width:min(78%,520px);min-width:0}
.mrow.mine .mcol{align-items:flex-end}
.mrow .mname{font-size:13px;font-weight:600;color:var(--c-meta);margin:0 12px 2px}

/* bubbles */
.msg2{position:relative;max-width:100%;padding:8px 13px;border-radius:19px;font-size:16px;line-height:1.42;overflow-wrap:anywhere;word-break:normal;
  background:var(--c-theirs);color:var(--c-theirs-text);cursor:default}
.mrow.mine .msg2{background:var(--c-mine);color:var(--c-mine-text)}
.msg2 .mtext,.msg2 .mcap{font-size:16px;line-height:1.42}
.mrow.mine .msg2 a{color:#fff;text-decoration:underline}
/* the last bubble of a run: a tail, and the corner next to it tucked in */
.mrow.last .msg2.tail{margin-inline-end:0}
.mrow.mine.last .msg2.tail{border-end-end-radius:5px}
.mrow.theirs.last .msg2.tail{border-end-start-radius:5px}
.msg2.tail::after{content:"";position:absolute;bottom:0;width:12px;height:17px;background:inherit;pointer-events:none}
.mrow.mine .msg2.tail::after{inset-inline-end:-6px;clip-path:path("M0 0 C 1 9, 5 14, 12 17 L 0 17 Z")}
.mrow.theirs .msg2.tail::after{inset-inline-start:-6px;clip-path:path("M12 0 C 11 9, 7 14, 0 17 L 12 17 Z")}
[dir=rtl] .mrow.mine .msg2.tail::after{clip-path:path("M12 0 C 11 9, 7 14, 0 17 L 12 17 Z")}
[dir=rtl] .mrow.theirs .msg2.tail::after{clip-path:path("M0 0 C 1 9, 5 14, 12 17 L 0 17 Z")}
.mrow:not(.last) .msg2::after{content:none}

/* photos sit inside the bubble with rounded corners; tap for full size */
.msg2.k-photo{padding:3px}
.msg2.k-photo .mquote{margin:3px 3px 4px;width:calc(100% - 6px)}
.msgphoto{padding:0;border:0;background:none;cursor:zoom-in;display:block;border-radius:16px;overflow:hidden}
.msgphoto img{display:block;width:240px;max-width:100%;height:auto;border-radius:16px}
.msg2.k-photo .mcap{padding:5px 10px 4px}

/* reply-to quote, inside the bubble */
.mquote{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;min-width:120px;margin:2px 0 6px;padding:5px 10px;border:0;border-inline-start:3px solid currentColor;border-radius:10px;
  background:var(--c-quote-theirs);color:inherit;text-align:start;cursor:pointer;font-size:16px;line-height:1.35}
.mrow.mine .mquote{background:var(--c-quote-mine)}
.mquote b{font-size:13px;font-weight:700}
.mquote .qs{max-width:100%;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1}

/* job-details and quote cards: a readable neutral card on either side */
.msg2.card2{width:340px;max-width:100%;padding:4px;background:var(--c-card);color:var(--text);border:1px solid var(--c-line);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mrow.mine .msg2.card2{background:var(--c-card);color:var(--text);border-color:color-mix(in srgb,var(--c-mine) 55%,var(--c-line))}
.msg2.card2 .mquote{width:auto;margin:4px 6px 2px}
.msgcard{padding:8px 10px;font-size:16px;line-height:1.4}.msgcard .small{font-size:15px}.msgcard .tiny{font-size:13px}.msgcard.quote .big{font-size:21px}
.msgdl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0;font-size:15px}.msgdl dt{color:var(--muted)}.msgdl dd{margin:0;font-weight:600}
.mrel{font-size:13px;font-weight:600;color:var(--muted);padding:4px 10px 0}

/* time under the last bubble of a run (or any bubble you tap); ticks on my last message */
.mmeta{display:none;align-items:center;gap:6px;font-size:12.5px;line-height:1.3;color:var(--c-meta);margin:3px 6px 0}
.mrow.last .mmeta,.mrow.showt .mmeta{display:flex}
.mstat{display:inline-flex;gap:3px;align-items:center;font-weight:600}
.mstat .tk{letter-spacing:-3px;padding-inline-end:3px}
.mstat.read{color:var(--c-read)}

.mreply{flex:none;align-self:center;opacity:0;border:0;background:transparent;color:var(--c-meta);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;transition:opacity .15s;padding:0}
.mrow:hover .mreply,.mreply:focus-visible{opacity:1}
@media(hover:none){.mreply{opacity:.6}}
.mrow.flash{background:color-mix(in srgb,var(--accent) 20%,transparent);animation:mflash 1.6s ease-out}
@keyframes mflash{0%{background:color-mix(in srgb,var(--accent) 32%,transparent)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.mrow.flash{animation:none}}

/* safety notes (off-app payment / contact info) */
.msgwarn{margin-top:4px;font-size:13.5px;line-height:1.35;color:var(--c-warn-text);background:var(--c-warn-bg);border:1px solid var(--c-warn-line);border-radius:10px;padding:5px 9px;max-width:100%}
.msghint{font-size:13.5px;line-height:1.35;color:var(--c-warn-text);background:var(--c-warn-bg);border:1px solid var(--c-warn-line);border-radius:10px;padding:5px 9px;margin:0 0 6px}
.msghint[hidden]{display:none}

/* ---------- composer: photo, auto-growing box, send ---------- */
.composer2{position:sticky;bottom:0;z-index:5;background:var(--c-panel);border-top:1px solid var(--c-line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.composer2 .crow{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-end}
.composer2 textarea{flex:1;min-width:0;resize:none;min-height:42px;max-height:140px;border-radius:21px;padding:9px 15px;font-size:16px;line-height:1.4;background:var(--surface-inset);border:1px solid var(--border-strong);color:var(--text)}
.composer2 .iconbtn{flex:none;width:42px;min-width:42px;min-height:42px;height:42px;padding:0;border-radius:50%;font-size:19px;cursor:pointer;background:transparent;border-color:transparent;color:var(--text)}
.composer2 .msend{flex:none;min-width:42px;height:42px;min-height:42px;padding:0 16px;border-radius:21px;font-size:16px;font-weight:650}
.composer2 .mtip{font-size:13px;color:var(--c-meta);margin-top:5px}
.mreplybar{display:flex;gap:8px;align-items:center;margin:0 0 6px;padding:6px 8px 6px 10px;border-inline-start:3px solid var(--accent);border-radius:10px;background:var(--surface-raised);font-size:15px}
.mreplybar[hidden]{display:none}
.msgmeas{display:grid;grid-template-columns:1fr 80px 92px 36px;gap:6px;margin:6px 0}.msgmeas input,.msgmeas select{min-width:0}

/* ---------- phone: the conversation fills the screen like a texting app ---------- */
body.inchat .tabbar{display:none!important}
@media(max-width:719px){
  body.inchat .top{display:none}
  body.inchat .view{padding:0;max-width:none}
  body.inchat .msghead{top:0}
}
@media(min-width:720px){
  body.inchat .view{padding-bottom:16px}
  .msgwrap{border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:clip}
  .msghead{border-radius:0}
  .msgs2{padding:14px 18px 8px}
  .mrow .mcol{max-width:min(66%,560px)}
}

/* polish: the newest bubble eases in; composer send button press */
.msgs2 .mrow:last-of-type .msg2{animation:tfPop var(--dur-2) var(--ease) both}
.composer2 .msend{transition:transform var(--dur-1) var(--ease),filter var(--dur-2)}.composer2 .msend:active{transform:scale(.94)}
.composer2 .iconbtn{transition:background-color var(--dur-2),transform var(--dur-1)}.composer2 .iconbtn:hover{background:var(--surface-inset)}.composer2 .iconbtn:active{transform:scale(.92)}