<!-- dashboard.html (Dashboard v1.97.2, 2026-10-18_0830 CT) GLOBAL BACK (Andy, Oct 18 morning, one question at a time: "I only want the mouse button to be able to go back. I don't want a back on the website any more than it is now"). The mouse and browser Back now walk back through every move: sidebar sections, a thread, ticket or household, the tabs inside a page (Settings, a household, a conversation's side panel) and Learned Resolutions back to the chat. A list comes back as you left it: the same scroll, search, Active or Archived, and ticket filters. Popups still close first, Forward works, a reload keeps the trail, with nothing left Back leaves. The Back arrow on screen is unchanged and keeps its own job. Dashboard only; pairs with portal 1.89.1 and webhook 9.49.1. Prior v1.97.1: (Dashboard v1.97.1, 2026-10-18_0045 CT) LEARNED RESOLUTIONS (Andy, Oct 18: "Resolutions is better", consistent everywhere; pairs with portal v1.89.1 and webhook 9.49.1; DEPLOY WEBHOOK, THEN PORTAL, THEN DASHBOARD). The button, the list, its note and every prompt say resolution; the 0110 number sits at the right again beside the button. Nothing else moved. Prior v1.97.0: (Dashboard v1.97.0, 2026-10-17_1600 CT) FIXES LEARNED (Andy, Oct 17 2026; pairs with portal v1.89.0 and webhook 9.49.0; DEPLOY WEBHOOK, THEN PORTAL, THEN DASHBOARD). The My Andi page gains Fixes learned (a button beside the title, for the whole team): every fix a teammate taught My Andi, newest first (when, who, the problem, the fix, whether it held). NOTHING IS EVER DELETED (Andy, Oct 17 night): Didn't hold marks a fix that came back, with a reason (the teammate who taught it, an Owner or a Manager); techs still see it labeled and client Andi never uses it. Hide (Owner or Manager) puts away a fix entered by mistake; it stays on record. Fixes stay with the team that taught them. Nothing else moved. Prior v1.96.0: (Dashboard v1.96.0, 2026-10-17_1015 CT) THE MOUSE BACK BUTTON (Andy, Oct 17 2026; pairs with portal v1.88.0 and ops 0.2.0; DEPLOY PORTAL FIRST). The mouse and browser Back do exactly what the Back arrow does: every step the arrow records (a thread, ticket or household opened from where you were) is also a browser history step, Back runs the arrow's own logic, and pressing the arrow uses up the same step, so the two never drift. Forward reopens what Back closed. With nothing left to step back through, Back leaves the page like any site. A ticket or page link, a push tap and Text from a household now record where you were, so Back returns there. Sidebar section changes are not steps (the arrow never counted them). The portal sign in is unchanged; after the portal 1.88.0 deploy, a tab that an older ops sign in had switched needs one sign in again. Prior v1.95.0, 2026-10-16_0300 CT: THE REMOVAL FIX (Andy, Oct 15 and 16; pairs with portal v1.87.0 and webhook 9.48.0; DEPLOY PORTAL, THEN DASHBOARD, THEN WEBHOOK). (1) Remove a person opens a small screen with a Forget checkbox: Andi stops reading their past messages from this house (nothing is deleted; Restore undoes it). (2) A removed person's conversation keeps their name with a No household tag, and the side panel offers + Add to household (the portal now resolves them to no house). (3) The thread shows a divider where they were removed or restored. (4) Restore says which numbers stayed with someone else. DEPLOY SIGNAL: the sidebar reads Dashboard v1.95.0. Prior: (Dashboard v1.94.1, 2026-10-14_0855 CT) v1.94.1 (Andy, Oct 14 morning, first look): in Settings, My Andi, the team thread fills its box as tall as the teammate list and scrolls inside it. DEPLOY SIGNAL: the sidebar reads Dashboard v1.94.1. Prior: (Dashboard v1.94.0, 2026-10-14_0000 CT) THE UI PASS (Andy, Oct 13 night; pairs with portal v1.86.0 and
webhook 9.47.0; DEPLOY WEBHOOK, THEN PORTAL, THEN DASHBOARD). (1) THE LOGO OWNS THE TOP OF THE BAR: centered, up to
180 px wide and 70 px tall; Logo and name puts the name under it, centered and wrapping, never cut off; Logo only shows
just the logo; the phone number is centered under it in every mode. (2) MY ANDI, right under Dashboard: the teammate's
own thread with My Andi, one thread across the phone and the desktop (each message says Text or Desktop), the same
Andi answering, a waiting indicator, and "Also text me answers I asked from the desktop" (off by default). A My Andi
text redraws an open view. (3) SETTINGS, MY ANDI (Owners and Managers): Team threads (the team on the left, a
person's thread on the right, read only), Code lookups, and Strangers. (4) ROLES: Owner, Manager, Member, one Role
dropdown on Add and Edit teammate; the Service manager box is gone; what a teammate may change follows the permissions
the portal sends (an older portal sends none, and then only an owner may, as before); a Manager cannot change an owner.
(5) Add a teammate takes a cell phone. (6) Follow ups show the client name. (7) "Tech line" reads My Andi wherever a
person sees it. DEPLOY SIGNAL: the sidebar reads Dashboard v1.94.0.
Prior v1.93.0, 2026-10-12_2310 CT ON CALL, THE RULES (pairs with portal v1.85.0;
DEPLOY PORTAL FIRST). The On call tab gains AFTER HOURS (Nobody is paged, or Only critical is paged until a time the
next morning) and a BACKUP picker (one manager, paged when a page has no got it in 30 minutes or when nobody is on the
schedule); Right now says who after hours or the backup would page. SLACK, THREE PLACES: the catch all, an On call
channel for real pages only (saved after the portal posts a hello there), and on each household a Slack channel picked
from the channels the app can see (a likely match listed first, never picked for you). Recent pages shows why a page
went out and a backup page. A PAGE LINK (?ticket=N or ?page=N) opens that ticket or thread once the app is signed in,
then clears itself. On portal 1.84.0 the new controls answer with the portal's error and nothing else changes. DEPLOY
SIGNAL: the sidebar reads Dashboard v1.93.0.
Prior v1.92.0, 2026-10-09_0100 CT ON CALL, SHIP 3: THE PAGE (pairs with portal
v1.84.0; DEPLOY PORTAL FIRST). The On call tab stops saying setup only. NEW: a Slack section where the owner
pastes the shop's Slack app bot token and the on call channel ID and presses Connect; the portal checks both
with Slack and posts a hello before saving, and the tab shows Connected to the channel (the token is never
shown again) with Disconnect. Everyone else sees whether Slack is connected. NEW: Recent pages, the last 15
handoffs: when, what, who was paged, and whether the page went out, was acknowledged and reached the client,
or got the no response nudge. The tech line note says the line is live and how a page is answered. On portal
1.83.0 the Slack section says it needs the portal update and nothing else changes. DEPLOY SIGNAL: the
sidebar reads Dashboard v1.92.0.
Prior v1.91.0, 2026-10-08_2300 CT ON CALL, SHIP 1: THE SETUP (pairs with portal
v1.83.0; DEPLOY PORTAL FIRST). Nothing in this build texts, pages or posts to anyone. NEW Settings tab, On
call, visible to every teammate: the switch and the on call hours per day (owner), who is on call right now,
a twelve week schedule with one tech per week Monday to Sunday, and single day swaps (owner or service
manager). Only an active teammate with a cell phone on file can be picked, and the tab names anyone who
still needs a cell. The tech line number shows once it is assigned. The teammate editor gains a Slack member
ID (so the page can tag the right person later) and a Service manager box (lets a member edit the schedule);
the Team list shows the service manager beside the role. On portal 1.82.0 the tab says it could not load
and nothing else changes. DEPLOY SIGNAL: the sidebar reads Dashboard v1.91.0.
Prior v1.90.0, 2026-10-06_2215 CT THE TICKET CARD GETS ITS TOTAL, AND AN EMPTY
RESPONSE TIME SAYS WHY (pairs with portal v1.82.0; DEPLOY PORTAL FIRST). Two of Andy's parked items. ONE. Tickets
by category now carries a line under its title, for example 2 tickets, last 30 days, read from the portal's new
tickets_opened field, which counts every ticket opened in the page window, categorized or not, so the number is
real and never the sum of the bars. The bars follow the same window now (the portal change). With no tickets in
the window the card says so instead of No tickets categorized yet, which read as a fault. On a portal that does
not send the field the line stays hidden. TWO. Avg response time showed a blank when there was nothing to
average; it now carries the same kind of note as Avg resolution time, fills in as the team replies to tickets,
shown only while the number is empty. Nothing else changes. DEPLOY SIGNAL: the sidebar reads Dashboard v1.90.0.
Prior v1.89.0, 2026-10-05_2053 CT SEEN, NEEDS NOTHING (pairs with portal
v1.81.0; DEPLOY PORTAL FIRST). Andy, Oct 4: "I can't stand the conversation badge showing 2 and I
have no way to clear it." The sticky dot had exactly one way out, a reply, and the two threads
holding it needed none: a test thread on a mistyped address and an archived thread belonging to a
real person. FOUR THINGS.

(1) MARK AS READ, IN TWO PLACES THAT DO ONE THING. A Mark as read button in the open thread's header,
shown ONLY while that thread is lighting the badge, and the same action on a right click (long press
on the phone) of the client's last message, beside Reply by email on an email bubble. Both call
markThreadRead, which posts the team wide stamp (portal 1.81.0) and clears the dot for everyone. The
unread RULE is untouched: threadUnread simply treats a thread as read while its newest message is no
newer than the stamp, so the next message from anyone lights it exactly as before.

(2) ARCHIVED THREADS LEAVE THE BADGE. updateConvBadge counts only threads that are not archived.
Archive still touches no statistic; the badge is a to do signal, not a statistic.

(3) SETTINGS ARCHIVE AND DELETE BY THREAD KEY. The list sent phone_number, which is null on an email
only thread, so it asked to archive a thread called null and failed. It sends the key now, and the
row names the address instead of printing null.

(4) THE TITLE BAR FOLLOWS THE THEME. The installed app's title bar took the manifest's navy and never
changed. The theme-color meta now tracks the topbar colour and is repainted on every light and dark
switch; the manifest carries the dark topbar colour for the moment before the page has loaded.

Prior v1.88.0, 2026-09-13_2145 CT THE RULE MOVES TO ONE PLACE, AND THE
SEND STOPS DISARMING A THREAD THAT HAS NOWHERE TO GO (dashboard only, no portal change).

Found by Andy on the first email sent from 1.87.0: the reply went out, threaded correctly, and the
compose then fell back to the DISABLED text box. Sending clears _emailReplyTo and re-renders the
mode, which is right on a mixed thread and wrong on a phoneless one, where there is nothing to fall
back to.

It is the cancel X defect one path over, and that is the tell. I removed the X in 1.87.0 because it
led to a dead end, then left the SEND doing exactly what the X would have done. Two paths to the
same dead end and I only closed one, because the arming lived in loadThread and the disarming lived
somewhere else.

SO THE RULE LIVES IN ONE FUNCTION NOW. emlApplyReplyMode decides everything: with no phone and no
target it ARMS the newest client email instead of disabling, so open, send, cancel and every future
caller all land in the same state without any of them knowing about each other. The 1.87.0 auto arm
in loadThread is deleted rather than kept alongside it, because two places computing one rule is how
this happened in the first place.

The disabled compose survives as the honest floor: no phone and no answerable email row means there
is genuinely nothing to send, and the box says so.

Prior v1.87.0, 2026-09-13_2130 CT A THREAD WITH ONE CHANNEL DEFAULTS TO IT (dashboard only).

Andy, looking at 1.86.1: why wouldn't this default to email. He is right and the answer is that the
right click was built for the wrong thread. It exists to DISAMBIGUATE on a MIXED thread, where a
client texts and emails and a tech has to say which message they are answering. An email only
thread has nothing to disambiguate: there is one channel, one client message, and making somebody
right click to reach the only thing that works is a step with no question behind it.

SO THE REPLY ARMS ITSELF. On a thread with no phone, loadThread points the email reply at the
NEWEST client email in the thread and the compose opens blue, reading Send Email, with the subject
strip above it. Nothing new is sent and no new path is taken: this is exactly what emlStartReply
does on a right click, called for you instead of by you.

A MIXED THREAD IS UNCHANGED, deliberately. Text stays the default there because it is the live
channel and the one Andi is on, and email stays behind the right click. The auto arm is gated on
having NO phone, which is the same gate as the tint and the disabled compose, so all three agree
about what kind of thread this is.

AND THE CANCEL X IS GONE on a phoneless thread, because there is nothing to cancel back to. In
1.86.1 pressing it would have dropped you into a disabled text box on a thread that can only do
email, which is a control whose only outcome is a dead end.

Prior v1.86.1, 2026-09-13_2115 CT TWO THINGS FROM THE FIRST LOOK AT
1.86.0 ON A REAL EMAIL ONLY THREAD. (1) THE PLACEHOLDER WAS TOO LONG AND CLIPPED at the second
line, so it read "No phone number on this thread. Right click a message to" and stopped mid
sentence. The compose textarea is one row tall and does not grow for placeholder text. Shortened
to fit. (2) THE DISABLED SEND BUTTON STILL LOOKED LIVE. opacity 0.45 over a saturated green still
reads as a green button, which is the same class of mistake as a state glyph that paints its own
colour: the eye reads HUE first and dimming a colour is not the same as removing it. It goes
grayscale as well, so a control that cannot fire does not look like one that can.
Prior v1.86.0, 2026-09-13_2045 CT THE OPEN THREAD STOPS CLAIMING A
CHANNEL IT DOES NOT HAVE (pairs with portal v1.77.0; DEPLOY PORTAL FIRST). Found on the first live
email only thread, minutes after 1.85.0. The LIST row was right and the OPEN THREAD was wrong in
two places, which is the same defect twice: a surface still asking the phone question when the key
is an address.

(1) THE HEADER SAID "Andi is handling this" AND IT WAS FALSE. andiActive is computed as the absence
of a human takeover, so a thread with no human rows reads as Andi covering it. Andi does not answer
email at all (getHistory has excluded email rows since webhook 9.31.0) and he cannot text somebody
with no phone, so the header was claiming cover that does not exist. The list already suppressed
the pill for exactly this reason in 1.85.0 and the header never learned. The status now renders
EMPTY on a thread with no phone rather than saying something untrue, and statusForOpenConv does the
same so the SSE resets cannot put the sentence back.

(2) THE SEND BUTTON WOULD HAVE TEXTED SOMEBODY WITH NO PHONE. Portal 1.75.0 returns a clean 422 so
nothing breaks and the tech's words are restored, but a control that cannot work should not be
offered. The compose is disabled on a phoneless thread and the placeholder names the thing that
DOES work: reply by email off the client's own message. The moment email reply mode is armed the
compose enables again, because that path sends through Graph and needs no phone at all.

BOTH READ THE PORTAL, NOT THE ROW. phone_number and thread_key now ride on the /api/thread payload
(portal 1.77.0), because the row the user clicked is not available when a thread is opened from a
push notification or a deep link, which is exactly when a wrong answer would be least noticed.

THE COMPOSE ELEMENTS ARE DISABLED, NEVER REMOVED. Six places read #reply-input and #send-btn by id
and none of them guard for null. Taking the markup out would have traded an honest empty header for
a TypeError, which is the same class as the search crash 1.85.0 fixed an hour ago.

Prior v1.85.0, 2026-09-14_0210 CT AN EMAIL ONLY THREAD GETS ITS ROW
(pairs with portal v1.76.0; DEPLOY PORTAL FIRST). Andy, looking at the live list: why doesn't it
get a row, it would look the same with name and household, just blue and no Andi on the right.
He was right, and reading the renderer is what settled it. The list has been keyed on thread_key
since portal 1.75.0, so an email only thread DOES produce a row. Three things were wrong with it.

(1) THE NAME RENDERED AS THE WORD null. The fallback chain was fullName || phone_number and both
are null on an email only thread, so the client's name slot printed the literal string. thread_key
is the address and is now the honest last resort.

(2) THE ROW COULD NOT BE OPENED. enterConversation was handed encodeURIComponent(phone_number),
so the click opened /api/thread?phone=null and the thread came back empty. It is handed the KEY
now, and that needs no portal change at all, because /api/thread has compared its parameter
against thread_key since 1.75.0. That one line is what makes the whole thing clickable.

(3) THE GREEN Andi PILL SHOWED, AND IT WAS A LIE. andiActive is !humanHandling, and an email only
thread has no human rows, so the pill appeared by default. Andi does not answer email at all
(getHistory has excluded email rows since webhook 9.31.0) and he cannot text somebody with no
phone, so the pill was claiming cover that does not exist. It is suppressed explicitly rather
than by side effect, and the slot is left EMPTY rather than saying Email, because that pill
answers who is covering this thread and the honest answer is a person.

AND A CRASH THAT WAS WAITING: filterConvs called t.phone_number.includes(q) with no guard, so the
first search typed after an email only thread existed would have thrown a TypeError and taken the
whole conversation search down. It searches the key now.

THE TINT IS SCOPED TO THREADS WITH NO PHONE, and that is the whole design argument. It reuses
--ch-email-band, the same token as the email band inside a thread, so blue means one thing in both
places. A texting client who sent one email in September is NOT tinted: a tint that covers a mixed
thread reads as entirely email, which is exactly the bug v1.82.0 through v1.84.1 kept correcting
one level down. A thread with no phone is email only permanently, so the tint can never go stale.
A wash plus a solid left edge rather than a flat fill, because the unread dot and the message
count live in that row and a flat fill swallows both.

Prior v1.84.1, 2026-09-13_2300 CT THE BAND STOPS AT THE CHANNEL CHANGE
(dashboard only, NO portal change, portal stays 1.74.0). Found live minutes after 1.84.0 deployed,
on a real client thread. Andy answered an email at 3:17, the client replied by email at 3:18, then
he TEXTED a photo at 3:21 and the blue ran straight through the photo and every message after it.
WHY: v1.83.0 scoped the band to the SESSION and a session closes on a SUMMARY row, so an email
landing in a session that has not been summarised yet paints every text that follows for as long
as the session stays open, which on a quiet thread is days. That is the 1.79.0 pane tint back in a
smaller box and by the same mechanism, a colour that only one specific later event can retire.
THE CORRECTION KEEPS BOTH HALVES. v1.82.0 banded a contiguous run of email ROWS and came out
striped, because the summary card that closes an email exchange carries channel sms and fell onto
the plain floor under the exchange it was summarising. Those two cases were never the same thing.
A MARKER (summary, handback, send marker, ticket marker) is a note ABOUT the conversation rather
than a message on a channel, so it INHERITS and never closes the band. A REAL MESSAGE on another
channel is a genuine channel change and closes it. A marker that closes an email exchange takes
the channel BEHIND it, because a summary belongs to what it summarises; the date line that opens
the next session takes the channel AHEAD of it, because it introduces what comes next. The render
harness assertion that read bandCount === 1 and called it "the text did not split the band" was
passing for the wrong reason the whole time, since bandCount counts OPENINGS and never had an
opinion about what landed inside; it is replaced by div balance, which measures containment
exactly. Both harnesses invert one assertion each, with the reason on the record.
Prior v1.84.0, 2026-09-13_2115 CT EMAIL SHIP B: A REPLY CAN LEAVE BY
EMAIL (pairs with portal v1.74.0 and webhook v9.32.0. DEPLOY WEBHOOK, THEN PORTAL, THEN THIS. The
webhook fence that stops an email reply silencing Andi on the texts has to exist before anything
can send an email reply, so this ship reverses the usual order for the first time). Until tonight,
replying in an email thread sent an SMS to whatever number was on the household and nothing on
screen said so. THE LOCKED RULE, FINISHED: background carries what ARRIVED, which is Ship A and is
unchanged, and THE REPLY CONTROL CARRIES WHAT IS ABOUT TO LEAVE, which is this build. Right click a
client email bubble (long press on the phone) and one item appears, Reply by email. The reply box
takes the email tint, the Send button reads Send Email, and a strip above it names the subject and
sender being answered with an X to cancel. RIGHT CLICK IS THE MECHANISM, NOT A NICETY: a reply
without In-Reply-To starts a NEW thread in the client's mail app, so the answer arrives looking
unrelated to the question, which means respond to THIS email is the mechanically correct send and a
generic reply box is the degraded version. Graph will not let anyone write those headers directly
(internetMessageHeaders takes custom x- headers only), so the portal asks Exchange to build the
reply with createReply and patches the tech's words on top of the draft, above the quoted original.
WHO THE CLIENT SEES (Andy): it should say who is replying. The sign off in the body is the floor
and cannot fail; the From display name is the upgrade and is dropped silently if Exchange refuses
it, because a cosmetic gain may never cost a client their answer. EMAIL IS ITS OWN LANE (Andy):
sending an email does NOT add Hand back, does NOT flip the header to a human handling it, and does
NOT silence Andi on the texts. The andiActive read here now ignores email human rows so this
surface agrees with the webhook rather than contradicting it. ALSO: a live email event redraws the
thread instead of appending a bare bubble, because bands and channel markers are computed across
the whole thread and cannot be drawn one row at a time; and a failed send now puts the tech's words
back in the box instead of eating them, which mattered less when Telnyx was the only thing that
could refuse. NOT IN THIS BUILD, deliberately: the ticket workspace thread renders the same bubbles
but wires no menu, so it behaves exactly as it does today; right click on an SMS bubble; and the
ticket scoped conversation, which this build exists to make possible and does not attempt.
Prior v1.83.0, 2026-09-13_1615 CT THE BAND IS SESSION SCOPED
(dashboard only, NO portal change, portal stays 1.73.0). v1.82.0 wrapped a contiguous RUN of email
rows, which came out striped: blue behind the client's email, plain behind the summary card that
closes the very same exchange. If the exchange happened over email then the EXCHANGE is the thing
that was email, so the whole section holds the colour now, including Andi's turns in it, the
markers inside it and the summary that ends it. A SESSION is what the renderer already draws: it
opens on a green date line and closes on a summary row, which is also where the next date line is
emitted, so sessions are counted by walking the summary rows. A session is an email exchange if
ANY non-marker row in it arrived by email; a session holding both channels still goes blue, and
the per bubble EMAIL and TEXT markers are what say which row was which, since those are per row
and the background is per section. The band decision now happens once at the top of the loop for
every row instead of per branch, which is exactly what let the summary card fall outside its own
session before. STILL NOT A CLAIM ABOUT OUTBOUND: the thread background stays plain, the reply box
stays plain, and the blue Send Email control lands in Ship B. STILL OPEN: nothing notifies the
portal on an inbound email, so an email does not append live or push until a refresh.
Prior v1.82.0, 2026-09-13_1530 CT THE EMAIL SECTION BAND (dashboard
only, NO portal change, portal stays 1.73.0). The email messages now sit on a full width blue
section that bleeds to the pane edges, rather than the colour living only inside the bubble.
WHY THIS IS NOT THE 1.79.0 PANE TINT COMING BACK, which is the whole question: that tint coloured
the ENTIRE conversation window and keyed off the LAST INBOUND, so it was a standing claim about
the thread, and only a text from the client could retire it. On an email-preferring client it
would have sat blue for months while every message leaving the box was a text. THIS band is
scoped to the rows it sits under. It says "these messages arrived by email", which is a fact
about those rows and cannot go stale, and it says nothing at all about what happens when you hit
Send. It opens on a contiguous run of email messages and closes the moment anything else appears,
so summary cards, ticket markers, handbacks and every text stay outside it on the plain floor.
The thread background itself stays untinted. The outbound signal goes on the reply control in
Ship B, where a blue Send Email button says what is about to leave at the point it leaves.
KEPT: subject and sender on the bubble, EMAIL and TEXT markers on mixed threads, the escaped
body, flex-shrink:0 on the base .sms-msg. STILL OPEN: nothing notifies the portal on an inbound
email, so an email does not append live, does not push, and does not move a badge until a refresh.
Prior v1.81.0, 2026-09-13_1400 CT SHIP A, SUBTRACTED (dashboard only,
NO portal change, portal stays 1.73.0). This build REMOVES the pane tint, the reply note and the
flag fab lift, and is smaller than the build before it. WHY: the pane tint keyed off the last
INBOUND, which meant only a TEXT FROM THE CLIENT could clear it. A tech replying did not clear it.
Andi did not clear it. So the first real email turned the pane blue and on an email-preferring
client it would have stayed blue for months, the whole time that every message leaving the box was
a text. The colour was answering "how did they reach us" while wrapped around the control that
answers "how am I about to reply", and on a quiet thread those two answers drift apart and stay
apart. A note in small print underneath was contradicting the colour above it, which is the
surface arguing with itself. THE SPLIT THAT REPLACES IT: BACKGROUND CARRIES WHAT ARRIVED, per
message, which is the email bubble and nothing else; THE REPLY CONTROL WILL CARRY WHAT IS ABOUT TO
LEAVE, in Ship B, because the signal belongs on the thing that does the thing. Until Ship B lands,
nothing on this screen makes any claim about the outbound channel, which is correct, because
nothing but a text can go. KEPT UNCHANGED: the email bubble with subject and sender, the EMAIL and
TEXT markers on mixed threads, the escaped email body, and flex-shrink:0 on the base .sms-msg.
--ch-email-pane is deleted rather than left declared and unused; Ship B declares what the reply
control needs. STILL OPEN: nothing notifies the portal on an inbound email, so an email does not
append live, does not push, and does not move a badge until something refreshes.
Prior v1.80.0, 2026-09-13_1200 CT THE EMAIL BUBBLE HAD NO HEIGHT
(dashboard only, NO portal change, portal stays 1.73.0). Three defects off the first real client
email to land on the deployed 1.79.0, all three layout, all three mine. (1) THE BUBBLE RENDERED AS
A 2px LINE. A flex item whose overflow is anything but visible has an automatic minimum size of
ZERO. 1.79.0 put overflow:hidden on the email bubble so the corners would clip the subject strip,
which set that one bubble's minimum height to zero; .sms-thread is a scrolled column flex container
so it was overflowing, and flex-shrink crushed the only item that would let it. Measured in a real
browser: the bubble 2px, its own subject strip 51px, its body 38px. The content was laid out
correctly and the parent was squashed out from under it. flex-shrink:0 now sits on the BASE
.sms-msg, not on the email rule, because the trap belongs to any bubble that ever needs to clip.
(2) THE TINT WAS APPLIED AND INVISIBLE. Dark pane #101319 against a floor of #0d0d0c, which is
four values on red. The rule that channels are muted while statuses are saturated was right;
confusing muted with low contrast was not. Redone in both themes, and the threshold that let it
pass was wrong too, so the harness now measures the delta instead of trusting it. (3) THE FLAG FAB
SAT ON THE NOTE. bottom:74px was tuned when the reply box was the only thing under the thread; the
note landed in that band and the circle covered the end of the sentence. Lifted when the note is
present, plus a reserved right gutter that survives the note wrapping, which a fixed lift cannot.
WHY NONE OF THIS WAS CAUGHT: email_render_harness asserts on HTML strings and went 52 green on a
build whose bubble had no height. A new email_layout_harness loads this actual file into headless
Chromium, injects the real thread with the real Sept 8 row, and MEASURES. It reproduces all three
against 1.79.0 before it passes against this.
Prior v1.79.0, 2026-09-09_2055 CT EMAIL LOOKS LIKE EMAIL (Ship A, the
dashboard half; pairs with portal v1.73.0, DEPLOY PORTAL FIRST). Since Sept 8 a real client email
has been matched, written to the right thread and rendered as an ordinary grey client bubble,
indistinguishable from a text. channel, email_subject and email_from were on every one of those
rows and nothing read them. FOUR THINGS. (1) THE PANE IS TINTED to the channel of the last INBOUND,
not one bubble, because a tech glances at a thread for two seconds before typing and a border is
something you have to look for. Muted slate indigo, and the palette rule it sets down is that
STATUS colours are saturated and CHANNEL colours are muted, so email never competes with the five
saturated colours already spoken for on this screen and Slack and voice have somewhere to live
later. (2) THE EMAIL BUBBLE carries SUBJECT and SENDER above the body: a text has no subject and an
email's is usually where the real complaint is, and the sender address is the only thing on a phone
keyed thread that says WHICH person in a two person household wrote it. It stays a right aligned
client bubble rather than a card, because the row is the client speaking, but it is wider and a
long body collapses behind Show more. (3) THE PER BUBBLE MARKER, drawn only on a thread that
actually holds both channels, since a tinted mixed thread otherwise reads as entirely email. Every
pure SMS thread in the account renders exactly as it did in v1.78.0. (4) THE REPLY BAR IS NOT
TINTED, and that is a deliberate departure from the locked design rather than an omission. The
design puts the bar inside the tint so the colour says what is about to LEAVE; Ship A can only
receive, so a tinted bar would say email while the Send button sends a text. A note says it in
words until Ship B wires the toggle, and both come out then. ALSO: the email body is escaped, which
this renderer has never done, because emailDoor only runs htmlToText when there is no plain text
part, so a text/plain email reaches the bubble with no tag stripping. The SMS path is untouched;
that hole is older and gets its own pass. KNOWN AND NOT FIXED HERE: nothing notifies the portal on
an inbound email, so an email does not append live, does not push, and does not move a badge until
something refreshes the list. That is a webhook change and it carries a real product question about
whether a tech gets a push at 11pm for a channel Andi does not answer.
Prior v1.78.0, 2026-09-09_1925 CT ARCHIVE AND DELETE FOR THREADS.
Two controls, not one, and both live together in Settings > Conversations, owner only. ARCHIVE hides a
thread from the Conversations list and touches no statistic, so the home panel keeps its history
when somebody tidies up; the Archived filter reads them back and Restore puts them straight back.
DELETE is permanent, gated behind typing the word DELETE, and removes every message, summary and
ticket marker on that number. The prompt warns that the home panel numbers move, because they are
counted off the conversations table.
Requires portal v1.72.0. Previous note follows.
THE TEAM TOGGLE COULD NOT SHOW THAT
IT WAS ON. Dashboard only, no portal change.
U+1F4E3 MEGAPHONE IS AN EMOJI PRESENTATION GLYPH, so the font paints it in its own colours and
CSS `color` cannot touch it. Every other toggle in this editor signals its on state through
`.vocab-tog.on { opacity:1;color:#1D9E75; }`, so the megaphone could only ever move OPACITY, and
the difference between on and off was a shade you had to hunt for. The clock and the speech
balloon are text presentation glyphs and take the green, which is exactly why they looked right
and this one did not. Andy turned three of them on to show the difference and there was
effectively none.
THE FAILURE MODE IS THE BAD KIND: it wrote to the database correctly and rendered a lie. A
control that cannot show its own state is worse than a missing control, because a missing one
sends you looking.
Replaced with U+25C9 FISHEYE, a plain geometric character with no emoji presentation anywhere, so
it takes the green like the rest. The client balloon is left alone: it renders monochrome and
takes colour already, confirmed on Andy's screen against the clock beside it.
LESSON, and it belongs in the file rather than in a chat: any glyph used as a STATE indicator in
this editor has to be text presentation. An emoji is fine as decoration and never fine as the
thing carrying the signal.
Prior v1.77.0, 2026-09-05_1930 CT NUDGES BECOME A SETTING (pairs with portal v1.71.0). Editor only: NOTHING HERE SENDS ANYTHING, and the sweep that reads these rows is off in webhook v9.30.2 until the duplicate send is diagnosed. WHY: v9.30.0 texted Todd Moitz, a real client, twice, while his Ticket 25 had a confirmed visit booked for Sep 10, asking whether it had sorted itself out. He replied Close it? No one has come yet. He was not ignoring us, he was waiting on US. THE STATUS ROW IS NOW THE TRIGGER, which is the inversion rather than a tuned interval. The old trigger was silence, which is a blocklist: nudge by default and subtract the wrong cases one real client at a time. This is an allowlist. A client is chased only where a HUMAN has put the ticket in a status that says the client owes us something, and every state nobody thought about is silent by default. TWO INDEPENDENT TOGGLES PER STATUS, client and team, plus an interval in hours. Andy: full control to the integrator of as much as possible. Both refuse where they would be a lie, and the PORTAL refuses the write too, so this is the courtesy half of the rule rather than the rule: not on the two endings, and CLIENT is never allowed on Scheduled, which is the Todd case written as code. The team toggle IS allowed on Scheduled, because a booked visit nobody prepared for is a real thing to remind the office about, and reminding the office wakes nobody up. THE MASTER SWITCH sits above all of it in Settings and is OFF for every integrator including existing ones. This feature introduced itself by texting a real client twice, so it earns an explicit opt in from the people who have already met it. THE GRID GOES FROM FOUR COLUMNS TO SIX. Checked against a screenshot of Andy low resolution laptop first: the status list was four columns with most of the row empty, so this is width that already existed rather than width taken from something. NOTE, carried forward from v1.74.0 and still not fixed: the ticket status dot keys off the literal status string, so a ticket in one of the waiting statuses draws the open dot. -->
<!-- Prior v1.76.0, 2026-09-05_1630 CT THE PHOTO RENDERS WHEN IT HAS A CAPTION, AND THE CATEGORY PANEL SPLITS (pairs with portal v1.70.0, which is already live, so this deploys alone). Ship 3, dashboard half. ONE. THE CAPTIONED PHOTO. This is the half of Lance August report that was never fixed, and the Sept 2 close ruled out a different incident (two photos five minutes apart, two R2 keys) without ever looking for this one. The refs, the R2 object and the message row were all correct, confirmed by hard refresh. What was wrong is that the live path decided whether a photo had arrived by reading the message TEXT: appendLiveMessage soft reloaded the thread only when the message was exactly the string photo in brackets. The webhook writes that string ONLY when there is no caption. Send a picture with any words attached and the row text is the caption, so the test never matched, no reload fired, and the image sat invisible until some later message forced a redraw. A photo with a caption has never rendered live. The trigger is now the EVENT carrying media refs, which is a fact about the message rather than a guess read off its text, with the old bare string test kept underneath as a belt so nothing that works today stops working. Portal v1.70.0 puts the refs on the new_message event and the webhook half sends them; until the webhook ships, the belt is what runs and behaviour is exactly as it is today. TWO. THE CATEGORY PANEL SPLITS PARENT FROM SUBCATEGORY. Issues by category and Tickets by category both rendered a flat list off the old symptom vocabulary, where reboot required sat beside network as though they were the same kind of thing. They are not: one is an OUTCOME and the other is a place in the house. The panel now renders the eleven parents plus Other, each row expandable into its subcategories, and the parent bar is the sum of its children so the totals still add up. Uncategorised is its OWN row and is never dropped, which is the rule that made the hero say 11 conversations while the categories summed to 9 back in v1.64.0. A parent the shop has HIDDEN is not rendered, but its tickets still count in the total, because a number that changes when somebody toggles a checkbox is not a number anyone can trust. THREE. THE CATEGORIES EDITOR joins the Tickets settings tab beside statuses and urgency. Owners can rename a parent, hide a parent they do not service, and add, rename, hide or remove a subcategory. There is no add or delete for a PARENT, deliberately and not as an oversight: every analytic here is a ratio across time or across shops, and a parent that appears in June makes every earlier comparison dishonest. A seeded subcategory hides rather than deletes for the same reason. NOTE, carried forward from v1.74.0 and still not fixed: the ticket status dot keys off the literal status string, so a ticket in one of the waiting statuses draws the open dot. Still defensible, still its own decision. -->
<!-- Prior v1.75.0, 2026-09-05_1256 CT THE THREAD SHOWS WHAT THE PHONE SHOWED (dashboard only, no portal change; deploys alone). Found by holding Andy's handset next to the dashboard: webhook v9.27.2's ticket list arrived on the phone as four clean lines and rendered here as one run on paragraph. The newlines were never lost. They were composed, stored, sent and delivered intact; HTML collapses whitespace by default and esc() escapes the text without ever turning a line break into one. So .sms-msg has silently flattened EVERY multi line message since the thread was built, in the conversation view and the ticket workspace both, and it went unnoticed for months because Andi rarely sent one until the server started composing lists. white-space:pre-wrap keeps the breaks and still wraps long lines; overflow-wrap:anywhere keeps a long unbroken string (a URL, a model number) from pushing the bubble wide. Nothing stored changes and no message is rewritten. THE RULE THIS ENFORCES, and it is worth stating because it is the second time today a surface disagreed with reality: the dashboard thread is what the client received, character for character. A thread that renders differently from the phone is not a cosmetic issue, it is the record lying about what was sent. Prior v1.74.0, 2026-09-05_1247 CT THE TICKET NUMBER IN THE HOUSEHOLD RAIL (dashboard only, no portal change; deploys alone). Andy, Sept 5, looking at the Hepola rail: "in picture we should have ticket number in the tickets." The list showed a status dot, a label and a date, and that house carries three shade tickets and two rows both labelled Master Bed Shade, so no row could be named out loud to a tech or typed into a Teams message. Same reasoning as v1.60.9 putting the number on the ticket LIST and the conversation rail glance; this was the surface that got missed. Rendered quiet and tabular ahead of the label so the labels still line up down the column. It also matters more today than yesterday: webhook v9.27.2 now speaks these numbers to the CLIENT over text, so a client saying Ticket 31 needs to find Ticket 31 on this screen without counting rows. NOTE, deliberately not fixed here: the status dot still keys off the literal status string, so a ticket in one of the new waiting statuses draws the open dot. That is defensible (waiting IS live work) and a real dot for the waiting kind is its own decision, not a drive by. Prior v1.73.0, 2026-09-04_0230 CT THE HISTORY READS NEWEST FIRST, AND "JUST NOW" IS GONE (dashboard only, no portal change). Three things from Andy walking Ticket 30's history live. (1) "JUST NOW" WAS A LIE WITH A LONG LIFE. fmtDur was written for the LIVE clock, where under a minute genuinely means a ticket that just opened, and the history block reused it. But a history row measures the gap to the NEXT row, so it freezes the moment the status changes: a stretch that lasted forty seconds on Sep 3 will still read "just now" in a year. Andy: it should not be anywhere. It is now <1m everywhere, which is true whether the span is live or frozen, and it is one rule rather than one per surface. (2) THE CURRENT ROW SHOWS NO DURATION. It is the only row still growing, and the number it would show already has a home two blocks up in Time on this ticket. A second live number in the history is noise, and worse, it invites the reader to add it to the total. Blank means still happening. (3) NEWEST FIRST, WITH THE MIDDLE COLLAPSED, and the reversal is Andy's call over my lean. I argued a timeline should read forward; he is right that the thing you open a history for is what just happened, and making that the last line of a long scroll is backwards. So: the four most recent changes, then a collapsed band naming how many it hides, then the OPEN row pinned at the bottom as the anchor. Under six rows nothing collapses, since there is nothing to hide. The band expands in place and the ticket rail does not move. NOTE the durations still measure forward in time regardless of display order, so reversing the list changes what you read first and never what a row means. -->
<!-- Prior v1.72.0, 2026-09-04_0200 CT THE BADGES STAY RIGHT (dashboard only, no portal change). Andy, on the live sidebar: with the open badge at zero the remaining two slid left and sat against the word Tickets instead of at the right edge. The cause is that the right alignment was never a property of the GROUP, it was margin-left:auto on .nav-badge, which is to say on whichever badge happened to be first, and .sched and .waiting each override it with a fixed 3px so they can sit tight against their neighbour. With three badges visible the first one pushes and the rest follow and it looks deliberate; hide the first and nothing pushes at all. It has been latent since v1.9.0 added the second badge and only surfaced now because v1.71.0 made a nav item that regularly has its FIRST badge empty. THE FIX is a real group: the badges live in one flex container that owns the margin-left:auto and the spacing between them, so alignment no longer depends on which of them happen to be showing. Applied to every nav item rather than only Tickets, so a single badge and a group of three sit on exactly the same right edge, which they did not before either. No count, colour or behaviour changes. -->
<!-- Prior v1.71.0, 2026-09-04_0130 CT THE WAITING BADGE, AND TWO WRITERS THAT DISAGREED (dashboard only, no portal change; portal v1.69.0 already carries waiting_tickets). Found by Andy on the live board: moving a ticket to Waiting on Parts turned the red badge off, then navigating back into Tickets turned it on again. A REAL BUG AND A CLEAN ONE. Two functions write that badge and v1.66.0 only updated one of them. loadTickets counts from the rows it just fetched and I taught it that waiting is live work, so it counted open PLUS waiting; loadCounts reads open_tickets off /api/stats, which counts kind 'open' only. Whichever ran last won, so the number changed depending on how you arrived at the page. The lesson is the one from the two seeds in portal v1.68.0, which is why that has a test: two copies of a count is not a duplication problem, it is a DRIFT problem, and the drift is invisible until the two paths disagree in front of someone. THE FIX IS NOT TO PICK ONE, it is to stop having two answers. Both writers now read the same three fields and set the same three badges. THE THIRD BADGE, Andy's call, and the right one: waiting gets its OWN badge in its own colour rather than hiding inside open or vanishing. Scheduled already proved the pattern in v1.9.0, red for what needs you and purple for what is booked, and waiting is a third thing that is neither. Now the sidebar and the board tell the same story: three numbers, three sections, same order. Open stays strictly kind 'open', so red goes back to meaning act now, which is the same reasoning that stops the clock in a waiting status. The badge colour is the seeded Waiting on Client blue rather than a per status colour, because a shop with three waiting statuses cannot have three badges and the sidebar is answering "how much is parked", not "parked on what". -->
<!-- Prior v1.70.0, 2026-09-04_0100 CT OPEN AND SCHEDULED KEEP THEIR COLOURS (pairs with portal v1.69.0; DEPLOY PORTAL FIRST). Andy, asked whether a recoloured status should follow through to the sidebar badges: he does not want Open and Scheduled recolourable at all, for support reasons. That is the better answer than syncing the badges, and it removes the inconsistency rather than plumbing around it, because those two badges ARE Open and Scheduled and nothing else in the sidebar reads a status colour. Their colours are a language the whole dashboard already speaks (nav badges, conversation ticket dots, board section headers, ticket pills), so a shop that turned Open green would make every screenshot they send unreadable to whoever is helping them. Colour editing only ever existed for CUSTOM statuses, where the server assigns a default the shop would otherwise be stuck with; applying it to all six was reflex, not a decision. NOW: Open and Scheduled render a plain dot, not a control. Waiting on Client, Waiting on Parts, Resolved, Closed and anything a shop adds keep the picker, since nothing outside the ticket surfaces reads those. Labels stay editable on every status including the two frozen ones, which is the split that matters: what a shop calls Open is theirs, what colour Open is belongs to everyone who has to read their screen. THE PORTAL REFUSES IT TOO, in v1.69.0, because a rule enforced only in the dashboard is a rule until someone hits the API. URGENCY COLOUR EDITING IS REMOVED entirely: Low through Critical is a scale, the four seeded colours already read as one, and nothing is keyed to them. Its dots go plain too, so the two lists still line up column for column. -->
<!-- Prior v1.69.0, 2026-09-04_0010 CT THE GRID ACTUALLY LINES UP (dashboard only, no portal change; deploys alone). Two faults Andy saw in the v1.68.0 editor, both mine and both structural rather than cosmetic. (1) BROKEN LINES. Every CELL drew its own bottom border, so what should read as one separator under a row rendered as four fragments with a gap at each column gap. A CSS grid puts column-gap BETWEEN the cells, and a border on a cell stops at the cell, so the gaps were literal holes in the line. Fixed by removing the per cell border and drawing ONE line per row: the row is its own grid with no gaps in the border's path, and the separator lives on a full width wrapper instead of on four separate boxes. This is the same class of mistake as styling four things and expecting them to behave as one. (2) NOTHING SHARED A BASELINE. The name is an INPUT with its own padding, line height and border box; the dot is a colour swatch; the toggle is a button; the remove is a button. Four different intrinsic heights, each vertically centring itself in its own cell, so the label sat a couple of pixels off from the dot beside it and the eye read it as crooked. Fixed by giving every row a fixed height and centring every cell on it, so what kind of control a cell holds no longer changes where it sits. The name input's own border is now transparent at rest and its padding matches the other cells' optical centre, so it lines up whether it is showing as text or as a field. Also in passing: the clock toggle glyph was an hourglass, which reads as WAITING rather than COUNTING and is exactly backwards for a status whose clock is running; it is a clock face now. The dash on the rows where the toggle would be meaningless is a proper muted em dash rather than a hairline that looked like a rendering fault. -->
<!-- Prior v1.68.0, 2026-09-03_2330 CT THE TICKETS SETTINGS TAB, POLISHED (dashboard only, no portal change; deploys alone). Andy on the v1.66.0 editor: feels not polished. He was right and the specific fault was alignment. Every row laid itself out and floated its controls right, so nothing lined up down the page and four different control types sat at four different sizes. IT IS A REAL GRID NOW, with a header row and fixed columns, and the STATUS and URGENCY lists share the same column widths so the two sections read as one page instead of two lists that happen to sit near each other. The action column keeps its width on every row, so a locked row leaves an empty cell rather than dragging everything right. THE COLOUR IS A DOT, per Andy, matched to the ticket dots used everywhere else, with a ring so it reads as a control rather than decoration. THE NAME reads as plain text at rest and picks up a field border on hover and focus, which is how every other editable field in this app behaves; before this it was bare text nobody would think to click. THREE LABELS REMOVED: LOCKED, ALWAYS COUNTS and ENDED were three grey words saying overlapping things, and the absence of the remove action already says locked without spending a column on it. The CLOCK column now uses the same toggle language as the Team tab envelope, lit green when the status counts, with a quiet dash where the toggle would be meaningless (Open always counts, the two endings are over). URGENCY gets a real DEFAULT column of radios, because one of N is exactly what a radio is and "Make default" repeated on every row was a radio wearing a costume. ORDERING IS NOT IN THIS BUILD: the arrows are gone and Andy did not want them, drag was considered and dropped, and new statuses simply append to the bottom, which is where they nearly always belong. The capability is still in the portal for when someone actually needs to reorder. -->
<!-- Prior v1.67.0, 2026-09-03_2230 CT THE CLOCK SAYS WHETHER IT IS RUNNING (dashboard only, no portal change; portal v1.68.0 is already live so this deploys alone). Found by Andy in the first walk of v1.66.0: Ticket 30 sat in Waiting on Parts and the board still read "1m on the clock", which is the one wording in the build that is actively false. The clock was stopped. Whether a clock is running was only signalled in two places nobody looks at, a strikethrough down in History and a line of small grey text above the status select, and neither is on the board where you scan ten tickets and decide what is really aging. A RUNNING CLOCK NOW CARRIES A CLOCK ICON AND A STOPPED ONE CARRIES NOTHING, which is Andy's call and the better one: absence reads as fast as presence and there is no second glyph to learn. Three surfaces, one helper, so they can never disagree: the LIST ROW reads "1m on the clock" with the icon while running and "1m, paused" bare while stopped; the RAIL HEADER carries the icon beside Ticket 30 the whole time you are working the ticket; the RAIL CLOCK BLOCK matches. An ENDED ticket, resolved or closed, shows the final number with no icon and no paused word, because a clock that cannot resume is neither running nor paused, it is over. Nothing about the stored numbers changes; this is display only. -->
<!-- Prior v1.66.0, 2026-09-03_2140 CT THE STATUS MODEL, THE CLOCK, URGENCY AND THE EDITORS (pairs with portal v1.68.0; DEPLOY PORTAL FIRST). The UI half of the build that stopped status being derived from scheduled_at. NOTHING IN THIS FILE HARDCODES A STATUS WORD ANY MORE: the list comes from GET /api/ticket-vocab and every pill, section header, filter and colour reads label, colour and KIND off the row the portal sends, so an integrator adding Waiting on a Ladder gets a working board with no dashboard change. THE ACTIVE TAB now means every kind that is not an ending, which is what makes a waiting ticket visible instead of quietly dropping off the board. THE STATUS SELECT replaces the derived word in the ticket rail; Scheduled still requires a date and setting a date still flips a live ticket to Scheduled, so the fast path nobody complained about is untouched. CLOSED IS ITS OWN ENDING with its own modal: it asks for a REASON, never a fix, because the fix field feeds Andi's learning pool and a ticket closed as a duplicate has nothing true to put in it. Closed tickets show their reason where a resolved ticket shows its resolution. THE CLOCK renders as Time on this ticket in the rail and finally fills the Avg resolution time row on the home panel, which has been deliberately blank since v1.64.0; the note under it now states the sample size rather than promising the number later, and it counts only tickets that were really clocked, never the backfilled history. URGENCY is a second, independent axis: a ticket can be Waiting on Parts AND critical. It renders as a chip on the list row and a select in the rail, and it is a human field this build. Andi does not triage it yet and does not know the new statuses; that is one webhook pass and it waits on the four Aug 20 live tests. STATUS HISTORY is a new rail block off ticket_status_events: every transition with how long it sat there and whether that stretch counted, which is the audit under the resolution number and the thing John has never had in Freshdesk. NEW SETTINGS TAB, Tickets, owner only: rename any status, recolour it, reorder it, toggle whether it stops the clock, and add your own. Open, Scheduled, Resolved and Closed cannot be removed and their meaning cannot be changed, which is what locked protects; their labels and colours are yours. Same editor for priorities. LIGHT MODE, John's reported defect: every date input carried a hardcoded color-scheme:dark, so in light mode the browser drew dark native chrome into a light field and the calendar icon vanished. It now follows the theme. -->
<!-- Prior v1.65.0, 2026-09-03_0330 CT THE ANDI STATS CARD COMES BACK (pairs with portal v1.65.0; DEPLOY PORTAL FIRST). A correction to v1.64.0 and the mistake is worth naming: Andy said Andi's average response time was not impressive and that he did not care how many messages a fix took. Both true, and both rows deserved to go. I then removed the CARD they lived in, which took households served and total households with it, and scattered the rest of Andi's numbers into the hero and the ticket card, leaving the Andi section as a single chart when it should be the richest part of the page. Two bad rows is not a bad card. THE CARD IS BACK beside the issue chart, holding the numbers that are actually about Andi: conversations after hours, the after hours share, OVERNIGHT (9pm to 6am, the ones that would otherwise have been a morning callback), weekend, households served, and total households. Overnight and weekend deliberately overlap, since a 2am Sunday is both and forcing exclusive buckets would make each number misleading. The hero goes back to three clean figures, conversations, messages and rate, and its window line goes back to being just the window rather than carrying the after hours share as an afterthought. Prior v1.64.0, 2026-09-03_0230 CT AFTER HOURS LEADS, AND THE TICKET CLOCK GETS ITS ROWS (pairs with portal v1.64.0; DEPLOY PORTAL FIRST). Three changes, all of them removing something before adding something. OUT: Andi's average response time and average messages to resolve. 3.3 seconds is a description of a computer rather than a metric, and Andy on the message count: if the issue gets resolved, how many messages it took does not matter. Both are gone from the portal payload too, not merely hidden, so nothing computes a number no one reads. Response time earns its place back after the Freshdesk import, as a before and after pair against AO's real historical answer time on the same clients, which is the version that means something. IN: AFTER HOURS, in the hero. How many of Andi's conversations happened while the office was closed, evaluated in the integrator's own timezone. It is the one number that is the entire product, and it is the morning unwrap the roadmap describes: open the page to see what he handled overnight. THE TICKET CLOCK gets both rows now, per Andy's rule that nothing waits on data landing later. Response time is REAL tonight, ticket opened to first human reply, backfilled onto every existing ticket. Resolution time renders as a row with a blank value and a quiet note, because the only number computable today is closed minus opened, which is exactly what John is complaining about in Freshdesk: three weeks waiting on a backordered part reads as a three week resolution. It fills in when the status model lands and the clock can stop on Waiting on Client, Scheduled and Waiting on Parts. Also: the Andi issue chart goes full width now that the card beside it is gone, and Uncategorized shows as its own row rather than being silently dropped, which is what made the hero say 11 conversations while the categories summed to 9. Prior v1.63.0, 2026-09-03_0130 CT THE HOME PANEL BECOMES ANDI AND TICKETS (pairs with portal v1.63.0; DEPLOY PORTAL FIRST). v1.62.0 made the numbers real but kept the shape, and the shape was the actual complaint: Chris said the top boxes look like Freshdesk, and wiring them to live data made the Freshdesk-looking part accurate rather than making it not look like Freshdesk. The governing line from the roadmap is that Freshdesk reminds you how buried you are and RestWerks should remind you how covered you are, so a row of queue counts can never lead this page. THE NEW SHAPE, Andy's: a HERO, then an ANDI section for what he handled, then a TICKET section for what escalated. The ratio between the two sections IS the resolution rate, per category, which is the whole product story on one screen and something Freshdesk structurally cannot show because it only ever holds the bottom half. HERO: conversations handled and messages handled lead, with the resolution rate beside them. Volume first on purpose, because a percentage with no volume under it is the thing a skeptical owner is right to distrust, and because a count that climbs is the reason to open the page tomorrow. ANDI SECTION: issues by category, with an Integrator and World toggle. World is present and visibly disabled rather than hidden, because it is a real planned scope and not vaporware, and it turns on when the resolution pool carries an integrator id. TICKET SECTION: ticket categories, open and scheduled, follow ups. REMOVED: the four count tiles, which duplicated the sidebar badges and were the specific thing that read as Freshdesk, and the 24h / 7d / 30d toggle that moved with them (windowing belongs in Analytics; the hero states its window inline). ZEROS ARE FINE AND STAY VISIBLE, per Andy: a new integrator sits at zero with somewhere to go, never a red down arrow. Prior v1.62.0, 2026-09-02_2330 CT THE HOME PANEL STOPS BEING A MOCKUP (pairs with portal v1.61.0 which adds GET /api/home-stats; DEPLOY PORTAL FIRST). Every number on the first screen of this dashboard was hardcoded HTML and had been since the panel was built: 83 percent resolution rate, 6 conversations, 5 resolved, 14 truck rolls avoided this month, 4.2 messages to resolve, 100 percent after hours coverage, and a five row issue category chart with invented percentages. None of it moved, none of it had element ids, and nothing could bind to it. It was flagged in the July 29 code verification pass as the same failure class as the 2pm incident but living in the UI, and it matters now because on Sept 9 John and Chris start landing here from every push notification tap. NOW COMPUTED, from the portal: conversations, resolved by Andi, resolution rate plus real 7 day, 30 day and all time trend rows, average response time, average messages per resolved session, top TICKET categories (relabeled, because these are escalations rather than a survey of everything clients ask), households, active households, open tickets and follow ups. The 24h / 7d / 30d buttons were dead and now actually re-query. DELETED RATHER THAN COMPUTED, which is the important half: TRUCK ROLLS AVOIDED, because no truck roll model exists and counting resolved sessions would inflate it by every battery question nobody would have called about, so it returns when the time saved model earns it; and AFTER HOURS COVERAGE 100 PERCENT, which is a tautology since Andi answers whenever he is not muted. EMPTY IS EMPTY: every field renders an em space rather than a zero or a placeholder when the portal returns null, so a new integrator with no traffic sees blanks instead of a fabricated first impression. Prior v1.61.0, 2026-09-02_2200 CT EMAIL ON THE PERSON, THE UI HALF (dashboard only, no portal change; pairs with portal v1.60.0 which is already deployed, so this deploys alone). Portal 1.60.0 made email a first class field on the person and every people read now returns email plus the full emails list; until this build there was no way to see or type one outside the API. THE FIELD: the add and edit person modal gains Email (optional) directly under Phone, since the two are the same kind of fact and belong together. Absent means untouched and an empty string clears, matching the phone rules exactly, so clearing an address deactivates the row rather than deleting it and a restore later brings it back. Client side format check before the call so an obvious typo never costs a round trip; the portal still validates and still owns the duplicate answer. THE DISPLAY: the household People row shows the address under the number, and the conversation rail roster shows it under the number too, both quiet and both hidden entirely when there is none, so a household with no addresses on file looks exactly as it does today. A person with an email and no phone now reads as reachable instead of showing only No phone on file, which is the case the Freshdesk archive is about to create 800 times. NOT IN THIS BUILD: the attach and create household paths (their flows have no email field yet and adding one there is a different decision), and any import or archive surface. Prior v1.60.9, 2026-08-02_2200 CT THE HANDBACK MARKER TELLS THE TRUTH + THE TICKET NUMBER IS IN THE LIST (dashboard only, no portal change; pairs with webhook v9.24.0 but deploys independently in either order). (1) HANDBACK LABEL. The thread render hardcoded the string "Handed back to Andi" for every role handback row and discarded the row's own message, so three different events read as one identical sentence: a person pressing Hand back in the portal, the resume sweep reclaiming a thread a human left dangling (stored as "Resumed by Andi"), and a client saying the word Andi to wake him ("Client texted Andi"). On the Aaron Cowden thread that single ambiguous line was the whole diagnosis: the marker sat under an unanswered client question and there was no way to read which of the three had written it, so the thread said a human had been handling while the bubbles said nobody had. Now it renders esc(m.message) with the old string as the fallback for any row that has none, exactly the treatment the send_marker branch two lines below already used. Display only, nothing stored changes, and every historical row already carries its real text. (2) TICKET NUMBER IN THE LIST. The ticket workspace rail header has read Ticket N since v1.60.3, but the ticket LIST showed household, person, summary and opened time with no number anywhere, so two tickets on the same house with the same summary (the two Hepola master bedroom shade rows, 7:09 PM and 7:52 PM) were separable only by timestamp and could not be named out loud in a Teams message. The number now leads the meta line, Ticket 214 followed by Opened and by whom, chosen over the household line and the right rail because it is a lookup aid rather than the thing you scan for and it matches the rail header wording. Added in two more places for the same reason: the conversation rail ticket glance gains a Ticket row above Status, and the household Activity timeline meta now reads Ticket 214 instead of the bare word Ticket. NOTE for the parked per-household ticket code work (household_code plus per-household sequence, HEP01-01): these three surfaces join the list of places the display code will replace raw ids, which is a known and accepted cost, not a reason to have waited. Then prior v1.60.8, 2026-08-02_1900 CT THE PLACES KEY COMES OUT OF THIS FILE (pairs with portal v1.58.0; deploy portal FIRST). GitHub secret scanning flagged the Google Places key that has sat as a literal string in this file since v1.27.0. Rotating it fixes nothing: this file ships to a PUBLIC GitHub Pages repo, so any key written into it is public by definition, and the referrer lock that was supposed to make that safe is one curl flag to defeat. Google Cloud showed 22 requests and zero errors over the exposure window, so nothing was actually abused, but the structure was wrong. The key now lives ONLY in the GOOGLE_PLACES_KEY env var on the portal. wireAddressAutocomplete now calls POST /api/places/autocomplete and GET /api/places/details/:placeId with credentials, both requireAuth, so the Places quota sits behind the dashboard login instead of on the open internet. NOTHING ELSE about the typeahead moves: same debounce, same custom dropdown, same styling, same graceful fallback to plain typing for rural addresses Places cannot find. The details response keeps Google's own field names (addressComponents, formattedAddress) so parseAddressParts is untouched. Cost is one extra hop per keystroke, which at beta volume is not felt. Then prior v1.60.7, 2026-07-29_2200 CT THE SCROLL BUG, THE WHOLE THING: A DUPLICATE MARKER ID. Found live on v1.60.6 (Andy confirmed the sidebar version, so the 1.60.6 harness passed while the real page failed, meaning the harness was missing something the real page has). It was: buildThreadHTML is SHARED between the Conversations thread and the ticket workspace, both render the same ticket_marker rows with the same tkmark-N-opened ids, and a hidden panel keeps its DOM when you switch tabs. tkThreadScroll looked the marker up with document.getElementById, which searches the WHOLE document and returns the FIRST match in DOM order, and the Conversations panel sits before the Tickets panel. So whenever the same phone number's conversation had been viewed in the session, the lookup returned the HIDDEN Conversations copy of the marker: on 1.60.5 and earlier its rects read zero and the thread pinned to the top; on 1.60.6 the new offsetParent gate saw a marker with no layout and politely waited six seconds for it, then gave up with no scroll at all. Same top-of-thread symptom by two different routes. THIS EXPLAINS THE INTERMITTENCY that ate five fixes (1.60.1/2/3/5/6): a fresh session straight to Tickets finds the ticket copy first and works, which is exactly how it passed the July 27 spot check on Ticket 22; viewing the conversation first, which is what live use looks like, makes it fail every time. THE FIX: the marker lookup is scoped to the ticket thread element itself (el.querySelector on the id within #tk-thread), so the Conversations copy can never be the one measured. The 1.60.6 visibility gates stay, they are correct, they just finally have the right element to gate on. Verified in the headless Chromium harness EXTENDED with a hidden duplicate-marker decoy panel ahead of the detail view in DOM order: the 1.60.6 logic fails against the decoy (no scroll), the 1.60.7 logic lands the marker at the viewport top with the decoy present, hidden-then-shown and already-visible both. STANDING LESSON: duplicate element ids across the shared thread renderer are a landmine (getElementById, anchor links, label-for all resolve to the first copy); a proper per-surface id prefix is parked for a cleanup pass. Then prior v1.60.6, 2026-07-29_2120 CT THE SCROLL RACE, ACTUALLY. 1.60.5 waited for a scrollable box before anchoring, but that was the WRONG readiness signal: while the ticket detail view is still hidden, the walk up from #tk-thread escapes into the ticket LIST panel scroller, which is always scrollable, so tkThreadScroll found a box, measured the hidden marker (every rect on a hidden element reads zero), computed a negative delta, Math.max clamped it to scrollTop 0, landed the thread at the very top, RETURNED TRUE, and the poll settled believing it had succeeded. Fourth attempt at this bug (1.60.1 rect math, 1.60.2 walk-up plus timers, 1.60.3 anchor fallback, 1.60.5 poll-for-scrollable), and every prior fix was verified by one manual open, which a race survives. THE FIX: readiness is the THREAD ITSELF being laid out, not any ancestor being scrollable. tkThreadScroll now returns false while el.offsetParent is null or the marker it is about to measure has no layout, so the poll keeps waiting through the hidden phase and anchors on the first frame the panel is genuinely visible; a single verify pass at 400ms re-applies if a late render moved or reset the scroll, and tkAnchorOnLoad still re-anchors as photos change the height. VERIFIED THIS TIME IN A REAL BROWSER: a headless Chromium harness reproduces the hidden-then-shown sequence with a decoy list scroller; the 1.60.5 logic lands at scrollTop 0 in that harness (the bug reproduced mechanically) and the 1.60.6 logic lands the marker at the viewport top. Then prior v1.60.5, 2026-07-29_1930 CT TICKET LABEL FROM THE ISSUE + THE SCROLL RACE. Two fixes from the July 29 walk. (1) LABEL FROM THE ISSUE. A ticket's label showed the raw ticket_type, a dispatch word, so the conversation rail ticket list read truck roll, remote, truck roll and told you nothing about which ticket was which. New fmtTicketLabel: a stored value that is a real label is shown as is, and a dispatch word (truck roll, remote, firmware, other, service, repair, onsite, tbd) or an empty value derives a label from the issue text instead (tkDeriveLabel keeps the naming half of the summary, drops the symptom half, shortens bedroom to Bed, caps at four words, title cases). So Master bedroom shade not working, needs service reads Master Bed Shade with no data migration and nothing stored is ever rewritten. Applied in FOUR places: the conversation rail ticket list, the rail glance (Type row is now Label), the household Activity meta line, and the ticket workspace rail. The workspace label also MOVED from the bottom of the rail to the very top and into the rail header next to Ticket N, because it sat under Type below Contact and had to be hunted for. Field renamed Type to Label; the stored column stays ticket_type so no portal change. (2) THE SCROLL RACE. Opening a ticket still landed at the top of the conversation intermittently. 1.60.1 through 1.60.3 fixed the rect math and the anchor fallback but kept four fixed timers at frame/150/450/1000ms, and while the ticket detail view is still hidden every scrollHeight and clientHeight is zero, so the walk up finds no scrollable box and all four passes are silent no ops with no fifth chance. That is why it passed a spot check on Ticket 22 and failed later on Ticket 23: a race, not bad math. tkThreadScroll now RETURNS whether it succeeded, and new tkAnchorThread polls on requestAnimationFrame until the box is genuinely scrollable, anchors once, then tkAnchorOnLoad re anchors as late loading photos change the height. Bails after 6 seconds so an empty thread never spins. Then prior v1.60.4, 2026-07-27_2120 CT CATEGORY READS HUMAN. The ticket rail Category showed the raw stored value (control_system); new fmtCategory renders it with spaces and a capital (Control system) in the rail and both fallback spots where issue_category can stand in for a missing summary. Stored value untouched, display only. Then prior v1.60.3, 2026-07-27_2110 CT TICKET NUMBER SHOWN + RESOLVED MARKER FALLBACK. The ticket workspace rail header now reads Ticket N instead of a bare Ticket, so the number the thread markers and the team talk in is finally visible on the ticket itself. The marker anchor gains a fallback: if a ticket has no opened marker but does have a resolved one (or only the resolved survives), the thread lands there instead of the bottom, so resolved tickets anchor too. Tickets predating marker rows entirely (before portal 1.24.0) still have nothing to anchor to and land at the bottom by design. Then prior v1.60.2, 2026-07-27_2055 CT TICKET SCROLL, THE REAL FIX. The 1.60.1 rect math was correct but aimed at #tk-thread, which is not always the element actually scrolling when the ticket detail opens (and can still be hidden when the first scroll runs, where every rect is zero and the assignment lands on nothing). tkThreadScroll now walks up from #tk-thread to the first ancestor whose scrollHeight exceeds its clientHeight and scrolls THAT box, and the scroll is scheduled idempotently at frame, 150ms, 450ms, and 1000ms so visibility timing and late loading photos cannot beat it; each pass recomputes from live geometry so repeats are harmless. Issue time fix from 1.60.1 rides along unchanged. Then prior v1.60.1, 2026-07-27_2035 CT TICKET THREAD SCROLL + ISSUE TIME FIX (dashboard only, no portal change; found in the July 27 live test). SCROLL: opening a ticket landed the thread at the very beginning of the conversation. Two causes: the marker anchor scroll used mk.offsetTop, which measures against the nearest positioned ancestor, not the scrolling #tk-thread, so the computed position was near zero; and thread photos loading after the scroll shifted the layout out from under it. Now tkThreadScroll computes the target with rect math relative to the scroll container (correct regardless of ancestry), scrolls immediately, and runs one more pass at 400ms so late loading photos cannot leave the view stranded; no marker still lands at the bottom, same as before. ISSUE TIME: the ticket Issues list showed Jul 28, 1:15 AM against messages stamped 8:15 PM, five hours off, because ticket_issues created_at arrives as a zoneless UTC string and the browser parsed it as local. New fmtIssueTime appends Z to a zoneless timestamp before the existing fmtTime formats it, used only by fmtIssueMeta so nothing else changes. Then prior v1.60.0, 2026-07-20_1340 CT PWA SLICE B, PUSH NOTIFICATIONS (pairs with portal v1.56.0 + sw.js v1.33.0; deploy portal first, then sw.js + this together to Pages). Decisions locked by Andy July 20: full per event matrix, quiet hours in v1, client messages the only default on event. The Notifications placeholder in Your settings becomes the real thing: Turn on notifications runs the permission plus subscribe handshake from the user gesture (iOS grants only from a tap AFTER install; a non installed Safari tab shows the install hint instead of a dead button), posting the device subscription with a friendly label to POST /api/push/subscribe; Turn off unsubscribes the device. The per event matrix (New client message all/off, Unknown number on/off, Takeover and handback all/off, New ticket all/mine/off, Ticket assigned to me on/off, Follow up assigned to me on/off) autosaves on change through PUT /api/push/prefs, as do Quiet hours (enable plus half hour start and end selects reusing timeOptions, evaluated server side on the company timezone) and Mute (1 hour, until tomorrow 7 AM, unmute; state line shows when it lifts). Tapping a push deep links: the service worker focuses an open dashboard and posts open_thread (a message listener navigates to Conversations and opens the thread) or cold starts with #thread= which is consumed after login init. The app icon badge lights on push and clears on focus/visibilitychange via clearAppBadge. If the portal reports push not configured (no VAPID vars yet) the section says so instead of half working. Then prior v1.59.0, 2026-07-20_1210 CT INBOUND MMS PHOTOS RENDER (pairs with portal v1.55.0 + webhook v9.21.0; deploy portal first, then webhook, then this). Todd Moitz photos vanished because the webhook fetched inbound images for Andi vision only and discarded them; the row logged as [photo] with nothing stored. Now the webhook stores each photo in R2 with refs on the message row, /api/thread returns media_urls (signed, 1 hour), and this build renders them: buildThreadHTML draws each photo as a rounded thumbnail under its bubble (a bare [photo] row with photos shows the images only, no placeholder bubble; text plus photos shows both), client photos right aligned, team side left, in both the conversation thread and the ticket thread since both use buildThreadHTML. One delegated click listener opens any .sms-photo in the existing lightbox, surviving every innerHTML rebuild. Live: appendLiveMessage still appends the [photo] line instantly, then a new refreshLiveThread() soft reloads the open thread 1.2s later so the image pops in without losing scroll intent; signed URLs expire in an hour so a long idle thread just re fetches on open. New CSS .sms-photos/.sms-photo. Then prior v1.58.1, 2026-07-10_0936 CT QUIET WALL PLATES. WattBox PowerLink2 wall plates and power cord kits join the material list (they are install parts like HDMI cables and brackets, not defective-able devices), so they render quietly in the grey Prewire and labor group. Then prior v1.58.0, 2026-07-08_2045 CT LIVE IMPORT FIXES (pairs with portal v1.54.0; deploy portal first). Five fixes from the first live Blattner import. WATTBOX RESTORED: the 1.57.0 spec-word phantom guard lacked a word boundary, so "WattBox..." matched ^watt and every WattBox line in the document was silently demoted to a continuation; boundary added and the assertion suite now asserts WattBox presence so this class of loss can never pass green again. TOUCH SCREEN: TSW-1070R descriptions say "touch screen" not "touch panel"; the classifier and type map now know both (touch screen remote still wins first, so remotes stay remotes). DM-NVX IS VIDEO: per Andy the NVX gear is part of the video system, so its stored kind becomes video and it groups under Video in the room; the TV chip, the gap dot, and the client lens are DECOUPLED from kind and count actual displays via eqIsDisplay, so TV counts stay exact (7 in Blattner) with decoders present. EQ_KNOWN GROWS UP: entries can now override manufacturer, model, and product_type (type always wins over the keyword guess, fixing Intrinsic showing "Apple TV" instead of Control driver), and Auton DM-60 lands properly as Auton / DM-60 / TV lift / video. HOUSE SYSTEMS PER BUILDING: equipment rows now carry building_id (portal 1.54.0 stamps every row including house buckets); the house list groups under the same building headers as rooms, so Main House and Guest House each show their own Security, Surveillance, Network, and AV Distribution instead of merging. A/V receiver type added (Anthem MRX). Then prior v1.57.0, 2026-07-07_1552 CT KINDS + BUILDINGS + KNOWN MODELS + MANUAL DEVICE (pairs with portal v1.53.0; deploy portal first). Validated against the real Blattner PDF, full assertion suite green. NEW KINDS stored on the record: network, security, surveillance, lighting_control, lighting_fixture join video/audio/shade/source/control/other; section signal decides first (a keypad inherits its section: DSC keypad in Security is security, Alisse in Lighting Control is lighting_control), keywords fall back anywhere; each kind gets a colored render group (chip palette mirrored onto group headers, control is no longer a grey stepchild) and the room chips read the stored kind. KNOWN_MODELS seed map (EQ_KNOWN, checked before all keywords, the forerunner of the equipment intelligence database): CP4 control processor, DM-NAX audio amplifier, DM-NVX video over IP stays control so TV counts never inflate, NG-SW network, Intrinsic/(DEV) control driver not a source, DMF-CI chassis control. BUILDING CAPTURE: the page header ("Client:Address - Main House") is read per page before the header dedupe strips it, every line carries its building, sections inherit it, rows send building to the import; the portal find-or-creates the building and keys rooms per building, so Main House Kitchen and Guest House Kitchen are two rooms and gear stops merging across structures (the WattBox-in-the-wrong-bucket confusion). QUIET PARTS: category recomputes when a continuation line lands (the deciding words like "flex bracket" and "back box" arrive on line two; equipment upgrades to material, never the reverse), and media enclosures, HDMI cables, tilting mounts, mounting plates, centering kits join the material list, so brackets and boxes all go quiet grey consistently. PER UNIT SPLIT extended: access points (AP 1..n in Network) and cameras (Camera 1..n in Surveillance) split into qty 1 rows, individually labelable and defect trackable, staying in their sections by design. PHANTOM GUARD: a bare number followed by a spec word (15 Ampere, 1000 watt) is a continuation, never a qty line. MANUAL DEVICE: + Add device in the equipment header opens the edit modal in create mode (full kind list, Room select or unassigned) and posts to the new portal POST /equipment (source manual, survives every re import). Then prior v1.56.0, 2026-07-06_2315 CT PARSER ACCURACY + SHADE ROOMS + DEVICE MOVE (pairs with portal v1.52.0; deploy portal first). Validated end to end against the real Blattner sales order in a node harness before landing. EXTRACTION: pure price tokens ($X,XXX.XX) are stripped from every line so column prices never pollute item text (they were killing the speaker keyword and garbling descriptions); the header/footer dedupe now keys on text+y AND a page top zone pass, so cookie cutter proposals no longer lose real gear repeated across rooms (Bedroom Four/Five imported EMPTY before this) while division headers like "Lighting Control/Shades" still strip instead of becoming fake rooms. CLASSIFIER: eqIsDisplay requires category equipment, excludes lift/mount/module/enclosure/bracket, and the tv token gets a real word boundary so AppleTV stops counting as a television (the TV overcount root cause: Apple TVs, the Auton lift, and the Sanus mount were all classing video, which also fired the false gap dot); NEW kind "source" for Apple TV / Roku / Kaleidescape / music servers with its own render group and modal option; audio now matches soundbar and subwoofer (they classed other before, the same failure class as the Focal in walls) and Focal joins EQ_MAKERS along with Admit One, Anthem, Cleerline, Alarm.com, Autonomics, Intrinsic, Macurco, Strong, Winland; remote controls (TSR-310, HR-CV-MINI) now class control and type Remote; grills, flex brackets, back boxes, ground stakes, rack/mount/centering kits, wire harnesses, patch cords go material. PARSER: qty regex learns ft alongside ea so building to building wiring parses as real prewire lines instead of "130x ft" garbage rows (they render in the grey Prewire and labor group like all non equipment); Out of Area / Travel / Lodging / Per Diem and Room Note lines are dropped at parse, never rows; Building to Building Wiring joins EQ_HOUSE. SHADES: room extraction v2 for the window name format ("Kitchen Left Window", "Bedroom #1 Big Window"): only real shade lines (never power supplies, panels, prewire, labor) get their trailing window descriptor split off, the remainder matches against rooms from the same parse with number normalization (#1 == One) or creates the room for the reconcile flow, and EVERY multi qty shade splits into qty 1 rows with per unit position labels (Center Window, Right Window, Window 1..4) so an individually defective shade is trackable across repeat failures. DEVICE MOVE: the edit modal gains a Room select (model households only) saved as room_id through the portal PUT which validates the room and syncs the as sold room string; covers shades grouped in one room and any parser misplacement. Then prior v1.55.0, 2026-07-06_1706 CT TICKET ISSUES. A ticket is a container for one visit to a home and can hold several separate issues. The ticket workspace Issue block becomes an Issues list: the summary is the headline issue one, then each added issue shows its body plus who added it and when, with a quiet remove on added issues (never on the headline) and an Add issue box at the bottom that posts to POST /api/tickets/:id/issues. Remove calls DELETE /api/tickets/:id/issues/:issueId. The conversation rail ticket glance also lists added issues read only under the Issue row. New ticketIssuesBlock, ticketIssueAdd, ticketIssueRemove, fmtIssueMeta; issues[] comes from the portal reads (v1.51.0). Andi appends over text via [[TICKETADD]] (webhook v9.20.0), fixing the live miss where Andi said "Added both to the ticket" and nothing landed anywhere. Pairs with portal v1.51.0, webhook v9.20.0, systemPrompt v9.12; deploy portal first, then the backend pair, then this. Then prior v1.54.0, 2026-06-25_2220 CT) Slice 4 piece 4, the polish, and the LAST slice-4 piece (dashboard only, no portal change). CHIPS expanded: a display-only classifier (eqChipCat) teases lighting fixtures and the camera/network/security gear out of the control/other kinds by keyword, so rooms now show lighting, control, security, cameras, network chips alongside TV/audio/shade on one shared palette. It never touches stored data, so a mis-fire is a cosmetic chip only (the underlying parser-accuracy cluster, TV miscount etc, stays parked and separate). FILTER: a chip filter bar above the room list (appears when 2+ categories are present); tap a category to show only rooms with it, All to clear; survives lens/refresh. EXPAND/COLLAPSE fix: the toggle now reads true all-open state instead of any-open (one manually opened room no longer makes the button offer Expand when it should offer Collapse), and the label re-syncs when a single room is toggled. HOUSE-BUCKET fold-in: expense/wiring/labor buckets that backfilled as rooms are now excluded from the merge target dropdown and from Andi's match suggestions (eqIsNonRoom), so they stop cluttering the reconcile. Slice 4 is now complete through piece 4. Then prior v1.53.0, 2026-06-25_2208 CT Slice 4 piece 3b, manual combine in Edit room (fold this room into a chosen room; uses portal v1.49.0 merge). Then prior v1.52.0 Slice 4 piece 3, the reconcile (Combine duplicates: Andi's suggested matches + confirm). Then prior v1.51.0, 2026-06-25_2135 CT Slice 4 piece 2, the fixes: room editor (name, number, building with inline + New building, floor/level fixed list + Other), + Add room, + Add building, building rename/delete on hover. Dashboard only, uses portal v1.49.0 endpoints. Then prior v1.50.0, 2026-06-25_0707 CT Slice 4 piece 1, the view: the household System tab now renders equipment from the real room model (h.rooms + h.buildings the portal read now returns) as Building > Level > Room, devices grouped by room_id, instead of the flat as-sold room string. Buildings and levels are progressive, so with none assigned yet it reads as today's flat room list but is model-driven and ready for the grouping tools (pieces 2-4). A household whose rooms are not built yet falls back to the old flat grouping so nothing blanks. PARSER now keeps the room number ("Loft 301" -> room_number "301") sent on import. Pairs with portal v1.50.0; deploy portal first. Then prior v1.49.0, 2026-06-24_2252 CT Clear reworked: one quiet "Clear all equipment" link moved to the BOTTOM of the equipment section (out of the header), single confirm, now calls DELETE /equipment/all which truly wipes every device AND every room regardless of source (fixes the old Clear that posted an empty import keyed on source-with-no-doc-id and could not reach doc-tagged equipment or orphaned rooms). Pairs with portal v1.47.0; deploy portal first. Then prior v1.48.0, 2026-06-24_2244 CT, Slice 3c: the single Files door. The System-tab "Import sales order" / "Re-import" button and "View sales order" are removed; equipment now enters only by uploading a document in Files (3b). The empty state points there. Expand all and Clear stay. Dashboard only, no portal change. Then prior v1.47.0, 2026-06-24_2234 CT, Delete cascade: deleting a document that built equipment now shows a counted confirm ("built N rooms and M devices, delete it and everything it built?") and the portal removes that document's gear atomically. A document that built nothing deletes as before. Pairs with portal v1.46.0; deploy portal first. Then prior v1.46.0, 2026-06-24_2055 CT,  Slice 3b: the single Files door. Uploading a document into Files now lets Andi classify it, and if it is an equipment list, offers to build the room-by-room record from it with provenance to that exact file (source_doc_id). Wired into the shared pickDocument handler, so it works the same on the household-detail Files tab AND the conversation rail. A drawing or design doc is classified "show" and simply filed as reference, never parsed. A wrong-house drop (name/address mismatch) is flagged in the confirm before building. No sales_order_source duplicate is stored from this path: the document already lives in Files and the equipment links to it, avoiding the double-listing. Non-PDF uploads are just filed. The System-tab import button is untouched this slice (it comes off in 3c). Pairs with portal v1.45.0 (upload returns the file id); deploy portal first. Then prior v1.45.0, 2026-06-21_0205 CT — Team summary cleanup (dashboard only, no portal change). The master "Send the morning summary" checkbox is removed; the envelope column now reads as a column with a Summary header. On is purely per recipient: a teammate with a lit envelope gets the summary, an empty list means nobody does (settingsSaveSummary now derives summary_enabled from whether any recipient is lit). NEW "Also send to": outside email addresses (a shared inbox, an owner's non-login address) render as their own rows under the team list, each with a lit envelope and a remove ✕, added via an inline + Add email field. Outside addresses are simply the summary_recipients that do not match a team login, so this needs no schema change and no portal change; added = lit, ✕ = removed (no mute-but-keep for outside addresses, which is the one thing that would need a portal field). Sidebar version label bumped. Then prior v1.44.0 — 2026-06-21_0140 CT — Settings rebuild rework + text sharpening (pairs with portal v1.41.0; deploy portal first). REWORK of v1.43.0: the sidebar logo choice moves out of a per-user Preferences tab and into Branding as a company-level, owner-set choice beside the logo. Tab order is now Info, Team, Branding, Andi (Team second, Preferences removed). Run setup wizard again moves to the Info tab. saveLogoLayout now saves through PUT /api/company (owner only) instead of the removed /api/me/prefs, and applyCompanyBranding reads the choice from the company record (_rwCompany.sidebar_logo_layout) instead of the user; logo_only shows just the logo, name_only just the name, missing logo always falls back to the name. SHARPENING: the dashboard body now sets -webkit-font-smoothing:antialiased and -moz-osx-font-smoothing:grayscale (the website already did; the dashboard did not), so light-on-dark text, the active tab included, renders crisper. company_website (Info) and the Andi voice field (Andi tab, stored only, webhook still does not read it) are unchanged from v1.43.0. Sidebar version label bumped here too. Then prior v1.43.0 — 2026-06-21_0115 CT — Company settings rebuilt into tabs (pairs with portal v1.40.0; deploy portal first). Company settings moves from one long scroll to tabs (Info, Branding, Andi, Team, Preferences) reusing the existing hd-tab component; the identity strip (Account ID, SMS number) stays pinned above the strip on every tab. NEW: Info gains a Company website field (the field Andi serves later). A new Andi tab holds an Andi voice and tone description (STORED ONLY this build, the webhook does not read it yet, prompt wiring is the deliberate next slice) plus the existing Quick messages editor moved in. A new Preferences tab holds a per-user Sidebar logo choice (Logo and name, Logo only, Name only) that updates the sidebar live, plus Run setup wizard again. applyCompanyBranding now honors the sidebar logo choice: logo_only shows just the logo, name_only shows just the name, and a missing logo always falls back to the company name. New saves: settingsSaveAndi (PUT /api/company andi_voice), company_website folded into settingsSaveInfo, saveLogoLayout (POST /api/me/prefs). The on-screen sidebar version label is bumped here too. Then prior v1.42.1 — 2026-06-21_0040 CT — Rail pass (pairs with portal v1.39.0; deploy portal first). PEOPLE in the conversation rail: a read-only roster tab (name, role, number with copy, text per person) from the people the by-phone payload now returns. RAIL TAB ORDER now matches the household default: System, People, Activity, Photos, Files, Andi. TICKET DOTS recolored to the badge palette: open #cc4400, scheduled #7c3aed, resolved is a hollow ring (was muted gray). EQUIPMENT rail rooms show the colored category chips (eqRoomChips) instead of a plain count, falling back to the count when a room has no TV/audio/shade. REMOVE HOUSEHOLD moved off the People tab into the header edit screen as a muted link to the right of the fields, and now gates behind typing DELETE plus a final confirm before the same deactivate call. SALES ORDER row now reads 'Sales order' (portal relabel). Then prior v1.42.0 — 2026-06-21_0010 CT — Documents + equipment in the rail + ticket read-only glance (pairs with portal v1.38.0). DOCUMENTS: both Files tabs (rail and household detail) replace the single static Open sales order button with a per-household document list, each row a file icon, your label, the filename and date, click to open via signed URL, delete per row. + Add document uploads any file type with a free-text label (stored section='document'); the imported sales order shows in the same list. Photos endpoints now also exclude documents so an uploaded PDF never shows as a broken thumbnail. EQUIPMENT IN THE RAIL (item 6): the conversation rail System tab now shows the same as-sold room rows as household detail, slimmed and read only, from the equipment the by-phone payload now returns. TICKET READ-ONLY GLANCE (item 4): a ticket in the rail Activity tab expands in place to show status, type, opened, scheduled, assignment, and on a resolved ticket what fixed it plus who and when, without leaving the conversation; editing still opens the ticket workspace. No ticket-history table exists, so scheduled-history and reopen-history timelines are not shown. The on-screen sidebar version label is bumped here too (it was missed at v1.41.0). Then prior v1.41.0 — 2026-06-20_2345 CT — Rail Files tab + Photos images only (pairs with portal v1.37.0). A client-last thread now clears on view when the most recent TEAM voice was a HUMAN, i.e. the client is just acknowledging a person (Todd's thumbs up, Nick's "You tell me"), instead of staying stuck unread until someone sends a pointless reply. A client-last thread where ANDI was the last team voice (a real escalation Andi punted) stays sticky exactly as before, so nothing a client is genuinely waiting on goes quietly read. threadUnread now compares the new last_assistant_at against last_human_at from the portal; summary/handback/ticket_marker rows have their own roles and never count as a team voice, so a session-close summary written after the ack cannot poison the read. No visual change. Then prior v1.39.0 — 2026-06-14_2345 CT — Equipment batch 5 (pairs with portal v1.34.0, deploy portal first). (1) The Equipment header (lens toggle and controls) and the systems banner now stick just below the tab strip while the room rows scroll under them; System Types scrolls away as reference. (2) Each room name has a rename pencil that sets the client-facing label across every device in that room in one call (POST /equipment/room-label); the room field is removed from the device modal so the device popup is just the device. (3) System Types rows swapped so connectivity leads (Internet provider, Network, WiFi network, WiFi password on top). (4) The stored sales-order PDF is filtered out of Photos (it was rendering as a broken image) and now lives in a new Files tab that opens it in a tab via the signed URL; Photos is images only. (5) The sidebar avatar uses the user bubble color instead of the integrator brand color. Then prior v1.38.0 — 2026-06-14_2320 CT — Conversation list timestamps (dashboard only). The conversation rows showed time only, so a message from yesterday or last week read as if it were today. New fmtConvTime gives a messaging-app stamp: today shows the time, yesterday says Yesterday, earlier this week shows the weekday, older shows the date (year added for prior years). Applied to the conversation list rows; the thread keeps its own per-session date separators. Then prior v1.37.0 — 2026-06-14_2300 CT — Equipment batch 4 (dashboard only, no portal change). (1) The systems banner is the whole snapshot again: the named-system pills (Control, Lighting, Network, Security, Surveillance) are back alongside the capability pills (MXNET, Apple TV, Sonos, Xtreme UPS, WattBox); the named pills come from eqNamedSystems so the banner and the editable System Types fields never disagree. (2) ELAN and Nice are normalized to one canonical label, ELAN/Nice, at the source (eqNorm) so device rows, the System Types fields, and the banner all read one brand. (3) System Types editable fields squared (border-radius 6px), 4-across kept. (4) More space between the divider and the Equipment header. (5) Brighter room-row borders so each room reads as its own block. Then prior v1.36.0 — 2026-06-14_2230 CT — Equipment batch 3 (pairs with portal v1.33.0, deploy portal first). (1) System Types now 4-across with the connectivity row grouped (Internet provider, Network, WiFi network, WiFi password), pill-styled inputs, and a divider separating it from Equipment. (2) Cameras relabeled Surveillance; detection reads the NVR/camera/doorbell manufacturer (Nice) and no longer false-hits the Luma drive inside the NVR. (3) Camera model parse fixed: the model token regex now accepts parenthetical segments like EL-IP-OTA4-(Color) and Lutron (polymer)/(color) SKUs, and stops at spec tokens (4MP/4TB), so surveillance models show in the record; new device types Camera/Doorbell/NVR/Surveillance controller. (4) Expand all and Collapse all merged into one toggle button. (5) Import now also stores the source PDF (POST /equipment/source) and the header gains View sales order (GET /equipment/source signed URL). (6) Andi remembers moved to the last tab; household-detail tabs are drag-to-reorder (session only, persistence parked with the preferences cluster). Rail Cameras relabeled Surveillance. Then prior v1.35.0 — 2026-06-14_2200 CT — Equipment batch 2 (dashboard only, no portal change). (1) System Types moved ABOVE Equipment and auto-populates from the sales order on every import (overwrite-always: SO is the word of truth); Locks relabeled Security (DSC/Qolsys), ISP left blank for the wizard. (2) Systems banner is now the CAPABILITY layer only — MXNET, Apple TV, Sonos (detection fixed: manufacturer now in the corpus), Xtreme UPS, WattBox — and no longer repeats the named control/lighting/network/security that the fields show. (3) Equipment header gains Expand all / Collapse all and Clear import (Clear posts an empty import, PDF untouched). (4) Lens switch preserves which rooms are open so the integrator/client difference shows in place. (5) Room summary pills start in a fixed mid-row lane (rname min-width) so they align vertically. (6) WiFi network + password show in System AND Andi remembers, one shared value mirrored both ways (eqMirror); save works from either tab (active-panel feedback). (7) Andi remembers is its own tab in the household detail AND the conversation rail; Security manager moved there. (8) Section block titles (.hd-block-title, .eq-section-title) recolored Andi green; ticket-rail amber labels keep their accent. Then prior v1.34.0 — 2026-06-14_2115 CT — Equipment section (sales-order parser, dashboard half; pairs with portal v1.32.0, deploy portal first). Layout A in the household System tab: the parsed as-sold equipment record renders as collapsible room rows (summary chips collapsed, grouped device detail on expand), with an Integrator/Client lens toggle, amber gap dots where a room has 2+ TVs and no position labels, and a systems banner (MXNET, Lutron HomeWorks, DSC NEO...). Import sales order runs the PDF parse IN THE BROWSER via lazy-loaded pdf.js (cdnjs 3.11.174): text items are reconstructed into indented lines by x-coordinate, the proven soParser logic (qty/indent-tier clustering, make/model split, derived product type, category, shade-room extraction, system detection) runs client-side, and the resulting rows POST to /api/households/:id/equipment/import so the portal carries no PDF dependency and Railway needs no buildpack. Every device row is click-to-edit in a modal (room_label rename keeps the as-sold room alias trail since room is server-locked, position label, make/model/type/qty/category); delete supported. Reads _hd.equipment + _hd.systems already returned by GET /api/households/:id. The old structured Equipment field block is retitled System types; its fields, IDs, and save logic are untouched. Then prior v1.33.1 — 2026-06-14_1342 CT — PWA Slice A: the real compose gap fix (phone only, desktop untouched). The black gap under the compose bar was the home-indicator safe area: .reply-box reserves padding-bottom of env(safe-area-inset-bottom) so the bar clears the home indicator at rest, but when the keyboard is open iOS does NOT collapse that inset even though the keyboard covers the indicator, leaving ~34px of bar padding under the input; since --white is near-black in dark mode it read as one black gap, not part of the bar. Measured with the flag FAB as a ruler: the fixed container does reach the keyboard, the residual was this padding. FIX: a body.m-kb class is added while #reply-input is focused (dead-reliable, independent of the iOS visualViewport quirks that broke the prior two attempts) and body.m-kb .reply-box drops the bottom padding to a flat 0.5rem; the safe-area inset returns on blur so the resting bar still clears the home indicator. The v1.33.0 flex fix (detail-content flex column, thread-main flex:1 min-height:0) stays, since it correctly anchors the compose to the container bottom. Then prior v1.33.0 — 2026-06-14_1336 CT — flex container fill + comfortable compose size. ROOT CAUSE of the black gap between the compose bar and the keyboard: the detail-content wrapper was not a flex column, so thread-main (flex:1) had no definite height to flex against and sized itself to the message content instead of the fixed keyboard-sized container. When the messages did not reach the bottom, the box ended early and the absolute-bottom compose docked to the end of the box, leaving the container floor showing as black down to the keyboard. Shrinking the input never touched this because the gap is independent of row height. FIX: detail-content is now display:flex/column and thread-main is flex:1 min-height:0, so the thread fills the full container, the sms-thread scrolls internally, and the compose docks right on the keyboard with zero dead space. The reclaimed space goes to the chat window. Compose also restored to a comfortable tappable size (input min-height 40px, Send/Quick 0.6rem/0.9rem) since the gap, not the row, was the space hog. Then prior v1.32.9 — 2026-06-14_1325 CT — compose row shrunk (input + buttons). Note on the iOS keyboard form-assistant bar (up/down arrows + checkmark): confirmed it is drawn by iOS for any focused web text field and cannot be removed or shrunk from a web page; only a native app wrapper could, which is out of scope. Then prior v1.32.8 — 2026-06-14_1317 CT — rail X removed + left-edge back-swipe. The previous trim only touched the input, so the Send/Quick buttons kept the row tall. Now the input min-height drops to 30px with tighter padding AND the buttons shrink (0.4rem padding, 0.82rem font), so the whole compose row is genuinely slimmer. Note on the iOS keyboard form-assistant bar (up/down arrows + checkmark): confirmed it is drawn by iOS for any focused web text field and cannot be removed or shrunk from a web page; only a native app wrapper could, which is out of scope. Then prior v1.32.8 — 2026-06-14_1317 CT — rail X removed + left-edge back-swipe. (1) The floating rail close X is removed; swipe-right closes the household rail (anywhere on the rail, since it is not a scroll surface). (2) New: a left-edge swipe-right goes back from a thread to the list, mirroring native iOS back. Edge-start only (touch must begin within 24px of the left edge) so it never collides with vertical scrolling or tapping bubbles inside the thread; only armed when no overlay (rail/menu) is open. The Back chevron stays as the obvious, discoverable exit. Rail swipe stays anywhere; menu drawer keeps swipe-left + scrim. Then prior v1.32.7 — 2026-06-14_1308 CT — rail interaction fix (scrim was trapping/dimming the rail). Then prior v1.32.6 — mobile polish (slim compose + swipe to dismiss). The household rail was greyed out, closed on any tap, and ignored swipes. Root cause: the thread container is position:fixed (keyboard glue), which creates a stacking context that traps the rail below the body-level scrim; the scrim (z-index 60 at root) therefore painted ON TOP of the rail, dimming it and catching every tap, and the swipe never saw the rail because the finger hit the scrim. Fix: the scrim now activates for the menu drawer only, not the rail. The rail is opaque and near full width so the scrim added little there; it now renders clean and fully interactive, closed by the X (top-right) or swipe-right. The menu drawer keeps its scrim and swipe-left since that path is not trapped (the sidebar is not inside the fixed thread). Then prior v1.32.6 — 2026-06-14_1248 CT — mobile polish (slim compose + swipe to dismiss). (1) Compose row slimmed: tighter reply-box padding (0.35rem), shorter textarea (min-height 34px), smaller Send/Quick, centered, so the input hugs the keyboard in a slim single row; thread bottom padding trimmed to match. (2) Swipe to dismiss: swipe right closes the right-slide household rail, swipe left closes the left-slide menu drawer (55px threshold, mostly-horizontal so a vertical scroll inside either panel never closes it); the X, scrim tap, and Esc still work. Rail layout otherwise unchanged per Andy. Then prior v1.32.5 — 2026-06-14_1151 CT — keyboard glue fix 4 (offset restored, scratchy-scroll + name fixes kept). v1.32.4 blanked the thread because it removed the visual-viewport top offset; that offset is exactly what compensates for iOS pushing the page up when the keyboard opens, so with top:0 the fixed thread sat off the top of the screen. The working .3 docking is restored: container top is var(--m-top) and var(--m-top)=visualViewport.offsetTop again (set on resize+scroll). The two genuine fixes from .4 are kept: (1) scratchy scroll gone, the thread is no longer force-scrolled on every viewport event (scroll-to-bottom happens once on reply-input focus only); (2) the contact name is back, the header is a plain relative top block instead of sticky, which had misbehaved inside the fixed container. The .4 root-element overflow lock is dropped (not needed, .3 worked without it). Then prior v1.32.4 — 2026-06-14_1125 CT — keyboard glue fix 3 (reverted). Then prior v1.32.3 — 2026-06-14_1115 CT — keyboard glue fix 2 (absolute compose bar). (1) SCRATCHY SCROLL fixed: the thread was being force-scrolled to the bottom on every visual-viewport event, fighting the finger; height now updates on resize only, and scroll-to-bottom happens once on reply-input focus. (2) CONTACT NAME restored: the header was position:sticky which misbehaved inside the now-fixed thread container and hid the name; it is now a plain relative top block (flex:0 0 auto). (3) GAP reduced: dropped the visual-viewport top offset (top:0) and now lock the root element too while a thread is open, so iOS cannot pan and open a gap between the compose bar and the keyboard. Then prior v1.32.3 — 2026-06-14_1115 CT — PWA Slice A keyboard glue fix 2 (phone only, desktop untouched). v1.32.2 pinned the thread to the visible viewport but the compose bar relied on position:sticky, which collapsed once the container became fixed+overflow:hidden, so the bar lost its dock and rendered as a bare cursor in a black gap. Now the compose bar is pinned position:absolute to the bottom of thread-main (which is position:relative and fills the keyboard-sized fixed container), so it docks right above the keyboard in both states; the message list gets bottom padding so the newest message clears the bar. Then prior v1.32.2 — 2026-06-14_1102 CT — PWA Slice A keyboard glue (phone only, desktop untouched). On the installed iOS web app the keyboard opening left a black gap and floated the compose bar (iOS shrinks the visual viewport and pans the page instead of resizing layout). Fix: while a conversation or ticket thread is open on phone (new body.m-thread class, threads only so household editing still scrolls normally), the page is scroll-locked so iOS cannot pan it, and the detail view is pinned position:fixed to the actually-visible area using the visual viewport (height var(--m-vh), top var(--m-top), both written from window.visualViewport on resize/scroll). The compose bar then rides the top of the keyboard. The thread also re-pins to the newest message as the keyboard moves. Visibility detection switched to client rects so it survives the fixed positioning (offsetParent is null for fixed). No transform is used on the thread container so the right-slide household rail still tracks the viewport. The iOS field-navigation bar (up/down arrows + checkmark) is browser chrome and stays; correcting the earlier claim that installing removes it. Then prior v1.32.1 — 2026-06-14_1049 CT — PWA Slice A mobile fixes (Conversations landing, chevron-only Back, viewport keyboard hint). Then prior v1.32.0 — 2026-06-14_1003 CT — PWA Slice A: installable mobile app + responsive phone pass (one-pass, no portal change, desktop untouched). Head gains the web app manifest link, theme-color, apple-touch-icon and standalone metas, and /sw.js is registered for an installable home-screen app with an offline shell. A mobile-only layer follows, all gated behind @media (max-width:768px) for CSS and matchMedia for JS, so the desktop layout is literally unaffected: the left sidebar becomes an off-canvas drawer opened by a hamburger in the topbar over a scrim; the phone nav is trimmed to Conversations, Tickets, Follow Ups, Households, Resolved by Andi (the other items carry m-hide; user settings and log out stay on the avatar menu); list-then-detail already swaps one view at a time on this codebase, so the drill-down reuses the existing Back; the conversation and ticket thread go texting-native full screen with the Back chevron overlaid left of the contact name, a keyboard-docked compose bar sized to window.visualViewport, and the household rail (equipment-panel) slides in from the right when the contact name is tapped, over a scrim, dismissed by the scrim, the X, or swipe. RW Option 1 monogram icon set ships in /icons. Then prior v1.31.0 — 2026-06-13_2320 CT — Household made consistent across both rails (pairs with portal v1.31.0, deploy portal first). The clickable household link added to the conversation header in v1.30.0 is removed; the conversation header is just the contact name again. Instead the household Name is now clickable in the rail Household block (goToHousehold) in conversations. The ticket rail gains a Household block (Name + Address) pinned at the very top above Status, matching the conversation rail, with the Name clickable; address comes from the new household_address on the tickets payload. The View household link is removed from the ticket rail header, and the inline household link is removed from the ticket chat header too, so both chat headers (conversation and ticket) are just the contact name and the household lives only in the rail block. Then prior v1.30.0 — 2026-06-13_2255 CT — + Create relocated and clickable household in conversations (dashboard only, no portal change). + Create moves out of the reply box up into the conversation rail Household header (right side, compact orange); the reply box is now Type a reply, Send, Quick. The contact name in the conversation header now carries a clickable household link (mirrors the ticket header pattern, goToHousehold), built from the authoritative household-by-phone record. Both are conversations only; the ticket view is untouched. Then prior v1.29.0 — 2026-06-13_2210 CT — Quick messages, Cluster A slice (pairs with portal v1.30.0, deploy portal first). A Quick button sits next to Send in every conversation: it opens a popover of integrator-level message templates and clicking one drops that text into the reply box (click-to-compose, a human always sends, nothing is automatic). Owners manage the list in a new Settings section (add, edit, reorder, delete); a default welcome and capabilities message is seeded for each integrator and is fully editable. The list comes from GET /api/quick-messages and is the one source of truth the deferred Andi send triggers will read later. Any teammate can use the popover; only owners see the editor. Then prior v1.28.0 — 2026-06-13_2028 CT — Address edit views go to four fields (dashboard only, no portal change). The household pencil and company Settings dropped the redundant all-in-one address line; Street is now the autocomplete and fills Street/City/State/ZIP on pick. The formatted address is composed from the four parts on save (composeAddress) and still drives the header line and every existing reader of address. If all four are blank the save omits the address entirely, so a legacy household with a formatted address on file but no parts is never wiped. Create, attach, and wizard stay single-field. Then prior v1.27.0 — 2026-06-13_2018 CT — Address autocomplete (Google Places API New, pairs with portal v1.29.0, deploy portal first). One shared wireAddressAutocomplete helper drives a custom typeahead dropdown (styled to the dashboard, graceful fallback to plain typing for rural addresses) on all five address inputs: household create, attach new-household, the setup wizard, the household header pencil, and company Settings. On selection it parses street/city/state/zip from the Places result. The create modals stash the parsed parts in holders their submits send; the household pencil and company Settings show the four parts as separate editable fields under the autocomplete, pre-filled from the record and saved alongside the formatted address. The formatted address string stays the display value everywhere. Browser key is referrer-locked to restwerks.com. Then prior v1.26.0 — 2026-06-13_1700 CT — Not Andi tag + People row redesign + back fix + flag FAB nudge (pairs with portal v1.28.0, deploy portal first). NOT ANDI: the right list tag and the thread header now read Not Andi in blue when a Special client is inside its coverage window (computed client-side from client_type + window + integrator timezone the portal now sends on the list and /api/thread; updates on refresh, not to the second). Three modes only: Andi green, Andi resumes blue on a real human takeover, Not Andi blue on a coverage mute. No countdown and no Hand back on a mute (Andi resumes on his own). The two SSE status resets respect the mute too. PEOPLE ROW: the whole person row is now clickable to open Edit (the Edit button is gone, Remove and Text stay and stop the row click); Andi's read is pulled off the row (it lives in the Edit modal); the type, relationship, and opt-in pills are grouped and vertically centered instead of stacking under the number. TEXT BUTTON FIX: Text now switches to the Conversations panel before opening the thread (it was rendering into a hidden panel, so it looked dead). BACK FIX: currentViewOrList only counts a detail view when its owning panel is active, so Back from a conversation no longer lands on a stale household People view. OPTED IN: the Textable pill is renamed Opted in to match the opt-in family. FLAG FAB nudged left off the scrollbar. Then prior v1.25.0 — 2026-06-13_1620 CT — Coverage window time picker (half-hour dropdowns across 24 hours). Then prior v1.24.0 — 2026-06-13_1545 CT — Special coverage window + owner default fix (build #4). Then prior v1.23.0 — 2026-06-13_1430 CT — Client type field (build #3). Then prior v1.22.0 — 2026-06-12_1145 CT — Morning feedback batch (dashboard only, no portal change). FLAG FAB: Flag for review leaves the thread header (it wrapped into a two line orphan when a human was handling) and the ticket rail; it is now a pinned round flag icon inside the chat, bottom right above + Create, same spot in every handling state, lit amber while flag mode is active, click again to cancel. TEAM REDESIGN: the separate Morning summary email section folds into Team; each active row carries an envelope toggle on the right (lit green = gets the summary), click toggles and saves immediately; master send toggle sits above the list and auto saves; role becomes its own right column (UniFi style); outside-address entry UI removed (saved extras in the database are preserved untouched); pending invites never show the envelope, recipients stay password_set logins only. TABS: System leads in household detail (Activity often empty; integrators want the house first), order System/People/Activity/Photos; the conversation rail mirrors it (System/Activity/Photos) and its System tab gains the Andi remembers block (WiFi network, WiFi password, garage code, from household-by-phone which already returns h.*). COLORS: session summary cards and Resolved by Andi cards adopt the morning email color language — Issue #cc4400, Andi #1D9E75, Follow up #2D7DD2, client mindset italic with no label. FLAG LIST: Flagged for Andi compacts to one slim row per flag (note, who, when, flagged message count, status chip); click expands the bubble snapshot and actions inline, caret rotates, expanded state survives re-renders. Then prior v1.21.2 — 2026-06-12_0015 CT — Resolved dot color (found live: resolved tickets in the conversation rail wore the same green as everything live in the dashboard, reading as still open; resolved is now muted grey so green keeps one meaning). Then prior v1.21.1 — 2026-06-11_2330 CT — Flag UX pass from first live use + attach relocation (pairs with webhook v9.13; no portal change). IN-CHAT FLAGGING: the modal is retired; Flag for review puts the open thread into flag mode, Andi bubbles become tappable (data-mi indexes on every bubble, amber outline on select, multiple allowed, hover hint), the reply box yields to a slim amber bar (count, optional why note, Send to RestWerks, Cancel); snapshot logic unchanged, full-array indexes mapped to displayable rows for context. FLAG CARDS: exact thread format now, same bubble classes with real left/right alignment and per-message time rows, flagged bubbles outlined amber and context dimmed; Open conversation link removed (integrators do not need it). ATTACH RELOCATION: + Add to household moved from the thread header into the Household rail section where it reads naturally, shown on both the no-household empty state and the unattached-with-household case; header slot stays but renders empty. Then prior v1.21.0 — 2026-06-11_2230 CT — Flag for review, integrator half (item 10, pairs with portal v1.25.0 + webhook v9.12; deploy portal, webhook, then dashboard). Built disposable per design. Flag for review link in the conversation header and a Flag link in the ticket rail header open a modal listing the thread Andi messages (last 25) as checkboxes: pick multiple, optional why note, Send to RestWerks; the snapshot posted is the picked messages plus up to two surrounding messages each side exactly as displayed (window._threadMsgs cached by both thread loaders). New left-nav item under Settings, Flagged for Andi: read-only log of this account submissions, each rendering its snapshot as chat bubbles (flagged ones outlined amber, context dimmed) with the why note, who, when, and an Open conversation jump; no dismiss on the integrator side by design, Andy is the reviewer (his Open/Resolved review surface is parked for the RestWerks ops dash; the table already carries status and resolution fields). Then prior v1.20.0 — 2026-06-11_2120 CT — John meeting night batch (pairs with portal v1.24.0, portal first). PICKER: native date inputs draw dark (color-scheme), ticket scheduling is now a date field plus a 15 minute time select (6:00 AM to 9:00 PM, legacy odd minutes round-trip as their own option), saveSchedule composes the two. BACK FIX: three household refresh paths (header save, opt-in text, create modal) were calling enterHousehold on the household already open, pushing a self-entry onto the back stack, so Back popped you back where you stood once per save; refreshes now open in place, and the stack itself refuses consecutive duplicates and self-pushes (sameNav guard in pushBack and all three enter wrappers). TICKET MARKERS: ticket_marker rows render as quiet clickable system lines (click opens the ticket), the opened marker is the scroll anchor when its ticket view loads the thread (loadTicketThread takes the ticket id from openTicket, resync, and SSE reload), live SSE markers render as system lines too. RESOLVED LOCK: a resolved ticket shows a read-only notice instead of the reply box; Reopen restores it. SUMMARY RECIPIENTS: new Settings section, master toggle plus team checkboxes (from /api/team, now carrying email) plus free-entry outside addresses, saved through PUT /api/company; rule is all users selectable including owner, nobody mandatory. Then prior v1.19.0 — 2026-06-11_1930 CT — send_marker rendering (pairs with webhook v9.10, no portal change). A member-send completion marker row (role send_marker, written by the webhook to the requester thread after a send actually delivers) now renders as a quiet centered system line in both the thread render loop and the live SSE append, exactly like Handed back to Andi. It was falling through to the default Andi-bubble path, so the thread showed a green bubble the client never received (scared the integrator into thinking a send was misdelivered or blocked). Then prior v1.18.0 — 2026-06-11_1830 CT — Timezone setting (pairs with portal v1.23.0, deploy portal first). Settings Company info gains a Timezone select (US zones, defaults to Central) saved through the existing PUT /api/company alongside name/address/phone/email; the portal stores it as the integrator's one authoritative zone. Display fix rides on the portal half: scheduled_at now arrives as a zone-free wall-time string, so fmtTime and the schedule picker show exactly the time that was picked (the 2pm-saved-9am-texted bug) with no dashboard logic change needed. Then prior v1.17.0 — 2026-06-11_1700 CT — Client-texts-first attach (pairs with portal v1.22.0). Unknown chip: conversation rows for numbers no person owns (client-texts-first threads) now carry an amber Unknown badge so they read as a worklist; derived from the new attached flag, with a name-absence fallback so the dashboard renders fine before the portal half deploys. Attach flow: an unattached thread's header gets an + Add to household button (shown when the context route returns no client); the new modal offers Existing household (search, person fields, last name defaults to the home's primary) or New household (person + project + address, built around them), posts to /api/conversations/:phone/attach, and on success reopens the thread so the name, rail, and attach state all reflect the new person. When the orphan phone row already resolves to a household (a member texted before being entered), that household is preselected. Then prior v1.16.0 — 2026-06-11_0030 CT — SSE reload debounce (pairs with portal v1.21.0, either half deploys safely alone). New scheduleListRefresh: SSE-driven conversations + counts reloads from new_message, handback, and viewed events now collapse into one trailing refresh per 300ms window instead of one immediate reload per event per open dashboard, so a rapid exchange or a teammate clicking through threads costs one round trip instead of a dozen. Direct user actions (Refresh button, tab switches, sends) still call the loaders directly and refresh immediately; panel-specific reloads (open tickets/follow ups tab) unchanged. Then prior v1.15.2 — 2026-06-10_2340 CT — Unified create picker: the create modal now shows Household + Client everywhere, only the populate differs per entry point. Chat create locks both (household line added above About). Household create locks the home and adds a Client select of that home's active people, defaulting to the first person with a number so schedule texts have someone to send to (the ticket-12 no-phone gap). Cold create searches households (name, nickname, people) then picks the person from the same select; Whole household stays available; the new-client path is unchanged. crClientPayload now built from household + person. Also fixed: loadConvContext read ctx.household_id which the context route never returns (it returns a household object), so the conversation Note toggle could never appear; now reads the object and also captures the household name for the chat create header. Then prior  Parked 15b due-date format: new fmtDueDate helper renders due dates as "Jun 10" instead of raw ISO, parsing the date part directly so timezone math can never shift the day; applied in the follow ups list row, the household Activity stream, and the conversation rail follow up card. Pairs with portal v1.20.1 which adds bubble_color to GET /api/team, fixing parked 14 (grouped-by-assignee banners had no color because the team payload never carried one; the dashboard bubbleColorFor code was already correct and is unchanged). Then prior v1.15.0 — #24 SSE hardening (needs portal v1.20.0). Reconnect now backs off 5s/10s/20s/30s-cap and resets when healthy. Every RE-connect runs a full state resync (replay-by-refresh: conversations, counts, the active Tickets/Follow Ups panel, the open ticket thread, and the open conversation re-pulls its thread), so anything missed while the pipe was down appears without a manual refresh. New ping watchdog: the portal pings every 25s as a real event; no beat for 65s means the pipe died without onerror (proxy drop, laptop sleep), so the dashboard kills it and reconnects, and the reconnect resyncs — this is the fix for auto-reclaim (and anything else) not flipping live on a silently dead connection. Waking a backgrounded tab with a stale beat forces a fresh pipe immediately. Then prior — Phase C2 (needs portal v1.19.0). Create popup: modes are now three independent toggles (Ticket / Follow up / Note), click to select, click again to unselect, any combo, popup grows per selection; follow up field relabeled Follow up, new Note field; Tickets and Follow Ups pages open it single-mode with no toggles (dedicated spots); the conversation + Create shows all three (Note when the thread resolves to a household); notes POST to /api/households/:id/notes. Household header: mirrors the list preview (name + project tag + address line), pencil opens inline edit for project and address (removed from System, and removed from the System save payload so saving System can no longer clobber them), orange + Create button (same as conversation) on the right pre-scoped to the home. Tabs: strip is sticky-anchored at the top of the scroll; remove/restore zone moved from System to People. System tab regrouped: Equipment / Andi remembers / Household settings (system notes stays). Activity tab: tickets, follow ups, and notes interleaved newest-first in one stream with All / Tickets / Follow ups / Notes filter chips. Photos: per-photo delete with confirm (portal DELETE). Conversation rail: now tabbed (Activity / System / Photos, slim variant) with household identity and Andi read pinned above. Then prior — Ticket grouping color. Tickets default Group-by-assignee OFF, so the board lands on the Open/Scheduled split (checkbox still toggles assignee grouping; Follow Ups stays grouped by assignee by default since follow ups are about people). Section banners are now fully filled with a DIM color and dark readable text: Open dim red, Scheduled dim purple. In assignee grouping, each person banner is filled with a dim version of that person bubble color, text darkened from the same color for contrast. Dashboard only. Then prior — Ticket rail refinements: Resolve/Reopen button moved to the bottom of the rail; top Status shows just the word (tip removed); Scheduled helper now reads "Setting a date moves the ticket to Scheduled. Clear returns it to Open." (Optional removed); View household moved into the rail header (right side), removed from the body; status pill removed from the chat header (redundant with the rail Status); ticket icon removed from the rail header; resolved tickets use the SAME rail layout as open/scheduled with Type, Scheduled, and Assigned shown read-only and a Reopen button at the bottom. Dashboard only. Then prior — Phase A ticket UI: removed the ticket icon from list rows; Active view now splits into Open and Scheduled sections by default (Group-by-assignee checkbox still overrides to assignee grouping; Follow Ups unchanged); Scheduled pill recolored purple to match its dot; left-nav Tickets shows two counts, red open + purple scheduled; ticket row label is now Household first then client name (mirror of the conversation list); ticket detail rail leads with the Status block. Dashboard only, uses portal v1.17.0 counts. Then prior — Password UX (Kristin feedback): show/hide eye toggle on every password field (login, signup, set-password, Settings current/new/confirm); confirm-password with live match check added to signup and Settings change-password, each submit gated on match, matching the existing set-password flow; current-password field kept. Then prior — Active/Resolved/All tabs. Tickets tabs are now Active (open + scheduled), Resolved, All, defaulting to Active so the board is never blank when only scheduled tickets exist; within Active, open work sorts above scheduled, and each keeps its Open/Scheduled pill. Follow Ups match: Active (pending) / Resolved / All, default Active. Real empty-state copy per bucket instead of "No tickets match this view." Household rows now show open tickets (red) and scheduled tickets (amber) as separate labeled badges plus follow ups (blue), so the preview reads open vs booked at a glance. Nav Tickets badge counts active (open + scheduled) consistently. Needs portal v1.17.0. — Prior (v1.8.1): labeled count badges + per-number action row (#14/#15/#16), #8 badges, #10 confirmed. The Scheduled save was sending the raw picker value (2026-06-18T11:00), which Postgres rejected, so the whole update 500'd: the date never saved and the auto flip to Scheduled rode along and died with it. Now the date is normalized to a clean timestamp (2026-06-18 11:00:00) before sending, so it saves and the ticket flips to Scheduled on its own. Added a Clear button next to Save that wipes the date and drops the ticket from Scheduled back to Open. Save failures now show an inline error instead of silently re-enabling the button. Dashboard only, no portal or webhook change. — Prior (v1.6.2): testing-feedback batch (universal back, rail ticket history, Create resize, scheduled save button, high-res width pass). — Prior (v1.6.1): team-consistent unread + shared Seen by + Create move + width pass start. Ticket detail re-laid out to mirror the conversation view: chat in the center column, ticket info in a right rail where the household/system panel sits. The rail carries an amber accent so a ticket reads differently from a conversation at a glance. Ticket reply box now matches the chat: Enter sends (Shift+Enter newline) and the Send button disables while sending to stop duplicate sends. — Unified ticket thread (text side). The ticket detail now shows the same SMS conversation that lives in chat and lets you reply from inside the ticket; replying reuses /api/send so it texts the client and hands the thread to the team exactly like a chat reply, and the open ticket thread refreshes live on new messages. Email-only clients show a placeholder (email channel is a later build). — Ticket lifecycle + fixes. Bug fixes: ticket/follow-up badges now update live (loadCounts on every SSE message + open tab refreshes), and the ticket detail was rebuilt so clicking a ticket reliably opens it. Ticket workspace: issue, contact, reassign, quick status (open/scheduled), and a human-only Resolve flow that pulls an Andi-drafted context synopsis (/api/draft-synopsis) and requires a "what fixed it" note before closing; resolved tickets show the resolution and can be reopened. Tickets and Follow Ups gained a filter toolbar (status, Mine, Group by assignee) with role-based defaults (owner sees the whole board grouped by assignee, members default to their own open work). Needs portal v1.12.0 and webhook v9.4. v1.4.1: fixed blank ticket detail (closeTicket was wiping the ticket-detail-content container that openTicket writes into) and the badges disappearing on a Conversations click (updateConvBadge reset tickets/follow ups from window globals that were never populated; now set in loadCounts/loadTickets/renderFollowups). -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
<title>RestWerks</title>
<!-- PWA Slice A: installable app (manifest + icons + standalone metas). SW registered at end of script. -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#1e1e1c">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="RestWerks">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand: #1D9E75; --brand-dark: #0f6e50; --brand-light: #e1f5ee;
  --ink: #1a1a18; --ink-mid: #444441; --ink-soft: #888780;
  --canvas: #faf9f6; --canvas-warm: #f1efe8; --white: #ffffff;
  --border: #e5e3de; --green: #1D9E75; --green-bg: #e1f5ee;
  --red: #cc4400; --red-bg: #faeee8; --blue: #2D7DD2; --blue-bg: #e8f2fb;
  --sidebar: #111110; --sidebar-w: 224px; --topbar-h: 52px;
}
body.dark { --canvas:#141413;--canvas-warm:#1c1c1a;--white:#1e1e1c;--border:#2a2a27;--ink:#f0efe8;--ink-mid:#c0bfb8;--ink-soft:#6b6a64;--sidebar:#0c0c0b; }
body { font-family:'DM Sans',sans-serif;background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.5;min-height:100vh;transition:background 0.2s,color 0.2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }
#login-screen { position:fixed;inset:0;background:#0d0d0c;display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:1.5rem; }
.login-box { background:#1a1a18;border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:2.25rem 2.5rem;width:360px;display:flex;flex-direction:column;gap:1.1rem; }
.login-brand { text-align:center;margin-bottom:0.25rem; }
.login-brand-name { font-family:'DM Serif Display',serif;font-size:1.75rem;letter-spacing:-0.02em; }
.login-brand-name .rw { color:white; } .login-brand-name .accent { color:var(--brand); }
.login-powered { font-size:0.72rem;color:rgba(255,255,255,0.25);margin-top:3px; }
.login-label { font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.35);margin-bottom:5px; }
.login-input { width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);color:white;padding:0.6rem 0.85rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s; }
.login-input:focus { border-color:var(--brand); }
.login-input::placeholder { color:rgba(255,255,255,0.18); }
.login-btn { width:100%;background:var(--brand);color:white;border:none;padding:0.65rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:background 0.2s;margin-top:0.1rem; }
.login-btn:hover { background:var(--brand-dark); }
.login-error { font-size:0.78rem;color:#f87171;text-align:center;min-height:1rem; }
.login-hint { font-size:0.72rem;color:rgba(255,255,255,0.18);text-align:center; }
.login-footer { font-size:0.7rem;color:rgba(255,255,255,0.15);display:flex;align-items:center;gap:0.35rem; }
.login-footer span { color:var(--brand); }
.login-toggle { font-size:0.78rem;color:rgba(255,255,255,0.4);text-align:center;margin-top:0.2rem; }
.login-toggle a { color:var(--brand);cursor:pointer;text-decoration:none;font-weight:500; }
.login-toggle a:hover { text-decoration:underline; }
.login-pwhint { font-size:0.68rem;color:rgba(255,255,255,0.3);line-height:1.45;margin-top:5px; }
.login-pwhint.ok { color:#34d399; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:40px; }
.pw-eye { position:absolute;right:8px;top:0;height:100%;display:flex;align-items:center;justify-content:center;width:30px;background:none;border:none;cursor:pointer;color:#9aa0a6;padding:0; }
.pw-eye:hover { color:var(--brand,#1D9E75); }
.login-note { font-size:0.78rem;text-align:center;min-height:1rem; }
.login-note.ok { color:#34d399; } .login-note.bad { color:#f87171; }
.acct-banner { display:none;align-items:center;justify-content:space-between;gap:1rem;padding:0.6rem 1.5rem;font-size:0.82rem;font-weight:500; }
.acct-banner.show { display:flex; }
.acct-banner.preview { background:rgba(45,125,210,0.12);color:#2D7DD2;border-bottom:1px solid rgba(45,125,210,0.25); }
.acct-banner.verify { background:rgba(224,134,0,0.13);color:#b36b00;border-bottom:1px solid rgba(224,134,0,0.25); }
.acct-banner .linkbtn { color:inherit;font-weight:600;cursor:pointer;text-decoration:underline;background:none;border:none;font-size:0.82rem;font-family:inherit;white-space:nowrap; }
#app { display:none;min-height:100vh; }
.shell { display:flex;min-height:100vh; }
.sidebar { width:var(--sidebar-w);background:var(--sidebar);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,0.05);z-index:50; }
.sidebar-logo { padding:1.1rem 1.2rem 1rem;border-bottom:1px solid rgba(255,255,255,0.06); }
.integrator-name { font-size:1rem;font-weight:600;color:white;letter-spacing:-0.01em; }
.integrator-accent { color:var(--i-brand,var(--brand)); }
.integrator-number { font-size:0.68rem;color:rgba(255,255,255,0.35);margin-top:3px;letter-spacing:0.04em; }
.sidebar-nav { padding:0.75rem 0;flex:1;overflow-y:auto; }
.nav-group-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.35);padding:0.6rem 1.2rem 0.3rem; }
.nav-item { display:flex;align-items:center;gap:0.6rem;padding:0.5rem 1.2rem;font-size:0.85rem;color:rgba(255,255,255,0.75);cursor:pointer;transition:all 0.15s;border-left:2px solid transparent;user-select:none; }
.nav-item:hover { color:white;background:rgba(255,255,255,0.06); }
.nav-item.active { color:white;background:rgba(255,255,255,0.08);border-left-color:var(--i-brand,var(--brand)); }
.nav-icon { font-size:0.9rem;width:16px;text-align:center;flex-shrink:0; }
/* v1.72.0 THE GROUP owns the right alignment, not the first badge. Putting margin-left:auto on
   .nav-badge meant the push belonged to whichever badge came first, and the later ones override
   it with a fixed gap; hide the first and nothing pushes. A nav item whose first badge is often
   zero (Tickets, since v1.71.0) made that visible. */
.nav-badges { margin-left:auto;display:flex;align-items:center;gap:3px;flex-shrink:0; }
.nav-badge { background:var(--red);color:white;font-size:0.62rem;font-weight:700;padding:1px 6px;border-radius:100px;min-width:16px;text-align:center; }
.nav-badge.blue { background:var(--blue); } .nav-badge.green { background:var(--green); } .nav-badge.sched { background:#7c3aed; }
/* v1.71.0 waiting: neither actionable nor booked, so it gets its own number rather than being
   folded into open (where red stops meaning act now) or dropped (where it goes invisible). */
.nav-badge.waiting { background:#2D7DD2; }
.sidebar-user { padding:0.85rem 1.2rem;border-top:1px solid rgba(255,255,255,0.06); }
.user-row { display:flex;align-items:center;gap:0.6rem;margin-bottom:0.4rem; }
.user-avatar { width:26px;height:26px;border-radius:50%;background:var(--i-brand,var(--brand));display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:700;color:white;flex-shrink:0; }
.user-name { font-size:0.78rem;color:rgba(255,255,255,0.8);font-weight:500; }
.user-role { font-size:0.65rem;color:rgba(255,255,255,0.35); }
.sidebar-rw { font-size:0.62rem;color:rgba(255,255,255,0.18); }
.sidebar-rw span { color:var(--brand); }
.sidebar-user { position:relative; }
.user-row { cursor:pointer;border-radius:8px;padding:0.3rem;transition:background 0.15s; }
.user-row:hover { background:rgba(255,255,255,0.05); }
.user-caret { margin-left:auto;color:rgba(255,255,255,0.3);font-size:0.62rem;transition:transform 0.15s; }
.sidebar-user.open .user-caret { transform:rotate(180deg); }
.user-menu { display:none;position:absolute;bottom:calc(100% - 0.5rem);left:1.2rem;right:1.2rem;background:#23231f;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:0.35rem;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:50; }
.sidebar-user.open .user-menu { display:block; }
.user-menu-item { display:flex;align-items:center;gap:0.55rem;padding:0.55rem 0.65rem;border-radius:7px;font-size:0.85rem;color:rgba(255,255,255,0.82);cursor:pointer;transition:background 0.12s; }
.user-menu-item:hover { background:rgba(255,255,255,0.07); }
.user-menu-item.danger { color:#f87171; }
.main { margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0; }
.topbar { background:var(--white);border-bottom:1px solid var(--border);padding:0 1.5rem;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;transition:background 0.2s,border-color 0.2s; }
.topbar-left { display:flex;align-items:center;gap:0.75rem; }
.page-title { font-size:0.9rem;font-weight:600;color:var(--ink); }
.andi-status { display:flex;align-items:center;gap:5px;font-size:0.72rem;color:var(--ink-soft); }
.status-dot { width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }
.topbar-right { display:flex;align-items:center;gap:0.6rem; }
.mode-toggle { width:30px;height:30px;border-radius:7px;background:var(--canvas-warm);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.85rem;transition:all 0.15s; }
.mode-toggle:hover { background:var(--border); }
.content { padding:1.25rem 1.5rem;flex:1;min-width:0; }
.panel { display:none; } .panel.active { display:block; }
.stat-value.g { color:var(--green); } .stat-value.r { color:var(--red); } .stat-value.b { color:var(--blue); }
.panel-chrome { background:var(--white);border:1px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:1rem; }
.panel-chrome-header { padding:0.85rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.panel-chrome-title { font-size:0.85rem;font-weight:600;color:var(--ink); }
.panel-chrome-action { font-size:0.75rem;color:var(--brand);cursor:pointer;font-weight:500;padding:0.3rem 0.75rem;border:1px solid var(--brand);border-radius:6px;transition:all 0.15s; }
.panel-chrome-action:hover { background:var(--brand);color:white; }
.analytics-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;margin-bottom:1rem; }
.analytics-card { background:var(--white);border:1px solid var(--border);border-radius:11px;padding:1.1rem 1.25rem; }
.analytics-title { font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:1rem; }
.issue-row { display:flex;align-items:center;gap:0.75rem;margin-bottom:0.6rem; }
.issue-row:last-child { margin-bottom:0; }
.issue-label { font-size:0.82rem;color:var(--ink-mid);width:140px;flex-shrink:0; }
.issue-bar-wrap { flex:1;height:6px;background:var(--canvas-warm);border-radius:100px;overflow:hidden; }
.issue-bar { height:100%;border-radius:100px;background:var(--brand); }
.issue-pct { font-size:0.72rem;color:var(--ink-soft);width:32px;text-align:right;flex-shrink:0; }
.trend-row { display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border); }
.trend-row:last-child { border-bottom:none; }
.trend-label { font-size:0.82rem;color:var(--ink-mid); }
.trend-val { font-size:0.85rem;font-weight:600;color:var(--ink); }
.trend-val.up { color:var(--green); } .trend-val.down { color:var(--red); }
.section-divider { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-soft);padding-bottom:0.6rem;border-bottom:1px solid var(--border);margin-bottom:0.875rem;margin-top:1.1rem; }
.section-divider:first-child { margin-top:0; }
.conv-card:last-child { margin-bottom:0; }
.conv-card:hover { box-shadow:0 3px 12px rgba(0,0,0,0.07);transform:translateY(-1px); }
.conv-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.5rem; }
.conv-name { font-size:0.9rem;font-weight:600;color:var(--ink); }
.conv-time { font-size:0.7rem;color:var(--ink-soft);flex-shrink:0;margin-left:0.5rem; }
.status-pill { display:inline-flex;align-items:center;gap:4px;font-size:0.67rem;font-weight:700;padding:2px 7px;border-radius:100px;margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.05em; }
.pill-resolved { background:var(--green-bg);color:#0f6e50; } .pill-open { background:var(--red-bg);color:var(--red); }
.pill-dot { width:4px;height:4px;border-radius:50%;background:currentColor; }
.conv-row { font-size:0.82rem;color:var(--ink-mid);margin-bottom:4px;line-height:1.55; }
.conv-row strong { color:var(--ink);font-weight:500; }
.conv-followup { font-size:0.82rem;color:var(--blue);margin-bottom:4px;line-height:1.55; }
.conv-followup strong { font-weight:500; }
.conv-mindset { font-size:0.78rem;color:var(--ink-soft);font-style:italic;margin-top:5px; }
.conv-detail-hint { font-size:0.7rem;color:var(--brand);margin-top:6px;font-weight:500; }
.back-btn { display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--ink-soft);cursor:pointer;margin-bottom:1rem;transition:color 0.15s;font-weight:500;position:sticky;top:0;z-index:6;background:var(--canvas);padding:0.2rem 0; }
.back-btn:hover { color:var(--ink); }
/* dark-mode scrollbars (page, panels, textareas) */
body.dark { scrollbar-color:#3a3a36 #1a1a18; }
body.dark ::-webkit-scrollbar { width:10px;height:10px; }
body.dark ::-webkit-scrollbar-track { background:#1a1a18; }
body.dark ::-webkit-scrollbar-thumb { background:#3a3a36;border-radius:6px;border:2px solid #1a1a18; }
body.dark ::-webkit-scrollbar-thumb:hover { background:#4a4a45; }
body.dark ::-webkit-scrollbar-corner { background:#1a1a18; }
.detail-card { background:var(--white);border:1px solid var(--border);border-radius:11px;overflow:hidden; }
.detail-header { padding:1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between; }
.detail-name { font-size:1.1rem;font-weight:600;color:var(--ink);margin-bottom:4px; }
.detail-meta { font-size:0.75rem;color:var(--ink-soft); }
.sms-thread { padding:1.25rem;display:flex;flex-direction:column;gap:0.5rem;background:#f8f8f8;flex:1;overflow-y:auto;min-height:0; }
body.dark .sms-thread { background:#0d0d0c; }
.thread-main .sms-thread { max-height:none; }
.sms-msg { max-width:min(75%, 620px);padding:0.55rem 0.85rem;border-radius:16px;font-size:0.85rem;line-height:1.5;
  /* v1.75.0: THE THREAD SHOWS WHAT THE PHONE SHOWED. Found Sept 5 by comparing the dashboard
     against Andy's actual handset side by side: the ticket list arrived on the phone as four
     clean lines and rendered here as one run on paragraph. The newlines were never lost, they
     were stored, sent and delivered intact; HTML simply collapses whitespace, and esc() escapes
     the text without ever converting a line break. So this has silently flattened EVERY multi
     line message since the thread was built, in both the conversation view and the ticket
     workspace, and nobody caught it because Andi rarely sent one until the server started
     composing ticket lists. pre-wrap keeps the breaks and still wraps long lines normally;
     nothing about the stored message changes. The rule this enforces: the dashboard thread is
     what the client received, character for character. */
  white-space:pre-wrap;overflow-wrap:anywhere;
  /* v1.80.0: A FLEX ITEM WITH overflow OTHER THAN visible HAS AN AUTOMATIC MINIMUM SIZE OF ZERO.
     v1.79.0 put overflow:hidden on the email bubble so the rounded corners would clip the subject
     strip and the Show more button, which silently set that one bubble's minimum height to zero.
     .sms-thread is a scrolled column flex container, so it was overflowing, so flex-shrink did
     what it is supposed to do and crushed the only item that would let it: the first real client
     email rendered as a 2px line while its own subject strip measured 51px and its body 38px.
     The children were laid out correctly the whole time and the parent had been squashed out from
     under them. 52 string assertions went green on this, because no string assertion has ever had
     an opinion about a box model. It is pinned on the BASE rule, not on the email rule, since the
     trap belongs to any bubble that ever needs to clip. */
  flex-shrink:0; }
.sms-client { background:#e0e0e0;color:#1a1a18;align-self:flex-end;border-bottom-right-radius:4px; }
body.dark .sms-client { background:#2a2a27;color:#f0efe8; }
.sms-andi { background:var(--green);color:white;align-self:flex-start;border-bottom-left-radius:4px; }
.sms-human { background:var(--i-brand,#1D9E75);color:white;align-self:flex-start;border-bottom-left-radius:4px; }
.sms-sender { font-size:0.62rem;color:var(--ink-soft);padding:0 0.85rem;align-self:flex-start;margin-top:-4px; }
.sms-time { font-size:0.65rem;color:var(--ink-soft);padding:0 0.85rem; }
.sms-time.right { text-align:right;align-self:flex-end; }
/* ── CHANNEL: EMAIL (v1.79.0) ───────────────────────────────────────────────
   THE PALETTE RULE THIS ESTABLISHES, and it matters more with every channel
   added: STATUS colours are SATURATED (green Andi, blue teammate and follow
   up, orange issue and open, purple scheduled, amber flag) and CHANNEL colours
   are MUTED. A channel is context, not a state, so it must never read as a
   sixth status competing with the five that already mean something on this
   screen. Email takes a muted slate indigo; Slack and voice can take
   neighbouring muted hues later and still collide with nothing. */
/* v1.80.0: MUTED HAD TO MEAN LOWER CHROMA, NOT LOWER CONTRAST, and v1.79.0 confused the two.
   The dark pane was #101319 against a thread floor of #0d0d0c: four values on red, six on green,
   thirteen on blue. The class was applied, the mechanism worked perfectly, and on a real screen
   there was simply nothing to see. The rule stands (statuses saturated, channels muted) and the
   values are redone to clear it by a margin the layout harness now measures rather than by an
   eyeball, in BOTH themes, since the first version was only ever looked at in dark. */
:root { --ch-email:#4F6191; --ch-email-band:#dae4f6; --ch-email-soft:#c6d3ef; --ch-email-line:#adbfe0; --ch-email-ink:#36426b; }
body.dark { --ch-email:#93a1c9; --ch-email-band:#171d2e; --ch-email-soft:#2a3350; --ch-email-line:#404b6b; --ch-email-ink:#b9c6e8; }
/* v1.81.0: THE PANE TINT IS GONE, AND THE REASON IS WORTH KEEPING. It keyed off the
   last INBOUND, so only a TEXT FROM THE CLIENT could clear it. A reply from a tech
   did not. Andi did not. So the first real email turned the whole pane blue and it
   would have stayed blue for months on a client who prefers email, the entire time
   that every single message leaving the box was a text. The colour was answering
   "how did they reach us" while sitting around the control that answers "how am I
   about to reply", and on a quiet thread those two drift apart and stay apart.
   THE SPLIT THAT REPLACED IT: BACKGROUND CARRIES WHAT ARRIVED, per message, which
   is the email bubble below and nothing else. THE REPLY CONTROL WILL CARRY WHAT IS
   ABOUT TO LEAVE, in Ship B, because the signal belongs on the thing that does the
   thing rather than on a pane around it. Until then nothing on this screen makes any
   claim about the outbound channel, which is correct: nothing but a text can go. */
/* v1.82.0: THE EMAIL SECTION BAND. A full width tinted section behind the email messages
   themselves, bleeding to the pane edges with a negative margin that cancels .sms-thread's
   1.25rem padding. THE DIFFERENCE FROM THE 1.79.0 PANE TINT MATTERS AND IS THE WHOLE REASON
   THIS IS SAFE: that tint coloured the ENTIRE conversation window and keyed off the last
   inbound, so it was a claim about the thread as a whole and only a text from the client could
   ever retire it. This is scoped to the rows it sits under. It says "these messages arrived by
   email", which is a fact about those rows and cannot go stale, and it says nothing whatsoever
   about what happens when you hit Send. It opens on a run of email messages and closes the
   moment anything else appears, so summary cards, ticket markers and every text stay outside
   it on the plain floor. The reply control carries the outbound signal, in Ship B. */
.eml-band { display:flex;flex-direction:column;gap:0.5rem;margin:0 -1.25rem;padding:0.7rem 1.25rem;
  background:var(--ch-email-band);border-top:1px solid var(--ch-email-line);border-bottom:1px solid var(--ch-email-line); }
/* THE EMAIL BUBBLE. Wider than a text on purpose: an email is paragraphs, and
   75% of the column is a canyon to read one in. It stays a right aligned
   client bubble rather than becoming a card, because the row IS the client
   speaking and pulling it out of the conversation line would break the one
   thing that makes a thread readable at a glance. */
.sms-msg.sms-email { max-width:min(88%, 700px);padding:0;background:var(--ch-email-soft);border:1px solid var(--ch-email-line);overflow:hidden; }
body.dark .sms-msg.sms-email { background:var(--ch-email-soft); }
.eml-head { padding:0.5rem 0.85rem 0.45rem;border-bottom:1px solid var(--ch-email-line);white-space:normal; }
.eml-subj { font-size:0.8rem;font-weight:600;color:var(--ch-email-ink);line-height:1.35; }
.eml-from { font-size:0.66rem;color:var(--ink-soft);margin-top:2px;overflow-wrap:anywhere; }
.eml-body { padding:0.55rem 0.85rem;white-space:pre-wrap; }
.eml-body.eml-clamp { max-height:11.5rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 68%,transparent 100%); }
.eml-more { display:block;width:100%;border:none;border-top:1px solid var(--ch-email-line);background:transparent;color:var(--ch-email-ink);font-family:inherit;font-size:0.68rem;font-weight:600;letter-spacing:0.03em;padding:0.35rem;cursor:pointer; }
.eml-more:hover { background:var(--ch-email-line); }
/* THE PER BUBBLE MARKER, drawn ONLY on a thread that genuinely carries both
   channels. Once the pane is tinted a mixed thread reads as entirely email,
   and a tech scrolling back a week should never have to infer which channel
   something went out on. A pure SMS thread, which is every thread but one
   today, renders exactly as it did in v1.78.0 with no marker anywhere. */
.sms-chan { font-weight:600;letter-spacing:0.05em;text-transform:uppercase;font-size:0.58rem; }
.sms-chan.ch-e { color:var(--ch-email); }
.sms-chan.ch-s { color:var(--ink-soft); }
/* WHAT IS ABOUT TO LEAVE, and as of v1.84.0 something finally can. Ship A left
   this blank on purpose: the bar could not carry an outbound signal while
   nothing but a text was able to go, and a surface that claims a channel it
   cannot use is the one thing a thread is never allowed to do.
   NOW THE SIGNAL SITS ON THE CONTROL THAT PERFORMS THE ACTION rather than on a
   frame around it, which is the whole rule Andy wrote after the 1.79.0 pane
   tint: a colour wrapped around a box can drift from what the box does, and a
   colour ON the button cannot, because it is repainted by the same state that
   decides where the message goes. It appears only while a reply target is
   held and disappears with it, so the default state of this bar still makes
   no claim at all. */
.reply-target { display:flex;align-items:center;gap:0.55rem;padding:0.45rem 1.25rem;
  border-top:1px solid var(--ch-email-line);background:var(--ch-email-band);
  font-size:0.72rem;color:var(--ch-email-ink); }
.reply-target-label { font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:0.6rem;flex-shrink:0; }
.reply-target-main { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.reply-target-x { border:none;background:transparent;color:var(--ch-email-ink);font-size:1rem;
  cursor:pointer;padding:0 0.2rem;line-height:1;flex-shrink:0; }
.reply-box.eml-mode { background:var(--ch-email-band);border-top-color:var(--ch-email-line); }
.reply-box.eml-mode .reply-textarea { border-color:var(--ch-email-line); }
.reply-send.eml-send { background:var(--ch-email); }
/* The one item menu. One item reads odd and is still the right shape: the
   second item (attach this message to a ticket) is the next thing to land
   here, and a menu is what it lands in. */
.eml-menu { position:fixed;z-index:80;background:var(--white);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.28);padding:0.3rem;min-width:170px; }
.eml-menu-item { padding:0.5rem 0.7rem;border-radius:7px;font-size:0.8rem;color:var(--ink);cursor:pointer;white-space:nowrap; }
.eml-menu-item:hover { background:var(--canvas-warm); }
.eml-menu-item.eml-menu-dead { color:var(--ink-soft);font-style:italic;cursor:default; }
.eml-menu-item.eml-menu-dead:hover { background:transparent; }
/* v1.81.0: .reply-note and the .flag-fab lift that existed to clear it are both gone. The note
   was there to say in small print what the pane tint was implying wrongly in colour, so removing
   the tint removed the need for the apology. The fab goes back to bottom:74px, which is where it
   has been correct since long before email existed. */
.sms-resolved { align-self:center;background:var(--green-bg);color:#0f6e50;border-radius:100px;font-size:0.72rem;font-weight:600;padding:0.25rem 0.85rem;margin-top:0.25rem; }
.detail-summary { padding:1.25rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem; }
.detail-row { font-size:0.82rem;color:var(--ink-mid);line-height:1.55; }
.detail-row strong { color:var(--ink);font-weight:500; }
.detail-followup { font-size:0.82rem;color:var(--blue); }
.detail-followup strong { font-weight:500; }
.detail-mindset { font-size:0.78rem;color:var(--ink-soft);font-style:italic; }
.ticket-row { display:flex;align-items:flex-start;gap:0.75rem;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s; }
.ticket-row:last-child { border-bottom:none; }
.ticket-row:hover { background:var(--canvas-warm); }
.ticket-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;margin-top:1px; }
.t-red { background:var(--red-bg); }
.ticket-body { flex:1;min-width:0; }
.ticket-client { font-size:0.85rem;font-weight:600;color:var(--ink); }
.ticket-issue { font-size:0.78rem;color:var(--ink-mid);margin-top:2px;line-height:1.5; }
.ticket-meta { font-size:0.68rem;color:var(--ink-soft);margin-top:4px; }
.ticket-right { display:flex;flex-direction:column;align-items:flex-end;gap:0.35rem;flex-shrink:0; }
.t-pill { font-size:0.67rem;font-weight:700;padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:0.04em; }
.t-open { background:var(--red-bg);color:var(--red); }
.t-scheduled { background:#ede9fe;color:#7c3aed; }
.t-resolved { background:var(--green-bg);color:#0f6e50; }
.ticket-person { color:var(--ink-soft);font-weight:400; }
.clock-badge { font-size:0.65rem;color:var(--ink-soft);display:flex;align-items:center;gap:3px; }
.ticket-detail-section { padding:1.1rem 1.25rem;border-bottom:1px solid var(--border); }
.ticket-detail-section:last-child { border-bottom:none; }
.ticket-detail-label { font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:0.5rem; }
.ticket-detail-value { font-size:0.875rem;color:var(--ink-mid);line-height:1.6; }
/* v1.55.0 ticket issues (a ticket holds several separate issues) */
.tk-issue { padding:0.5rem 0.6rem;margin-bottom:0.4rem;background:var(--canvas-warm,#faf8f5);border:1px solid var(--border);border-radius:7px; }
.tk-issue:last-of-type { margin-bottom:0; }
.tk-issue-body { font-size:0.85rem;color:var(--ink-mid);line-height:1.5;white-space:pre-wrap; }
.tk-issue-meta { font-size:0.68rem;color:var(--ink-soft);margin-top:0.25rem; }
.tk-issue-x { color:var(--ink-soft);cursor:pointer;text-decoration:underline;margin-left:0.35rem; }
.tk-issue-x:hover { color:#c0392b; }
.tk-issue-add { margin-top:0.55rem; }
.tk-issue-add textarea { width:100%;box-sizing:border-box;resize:vertical;min-height:44px; }
.tk-issue-add-row { display:flex;justify-content:flex-end;margin-top:0.35rem; }
.tk-issue-add-btn { background:#b45309;color:#fff;border:none;border-radius:8px;padding:0.45rem 0.8rem;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.tk-issue-add-btn:hover { background:#92400e; }
.tk-issue-add-btn:disabled { opacity:0.6;cursor:default; }
/* v1.6.0 household data foundation styles */
.hd-read { margin-top:0.4rem;padding:0.45rem 0.55rem;background:var(--canvas-warm,#faf8f5);border:1px solid var(--border);border-radius:7px;display:flex;flex-direction:column;gap:0.2rem; }
.hd-read-tag { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--brand,#2D7DD2); }
.hd-read-scores { font-size:0.78rem;color:var(--ink-mid);font-weight:600; }
.hd-read-voice { font-size:0.78rem;color:var(--ink-mid);font-style:italic; }
.hd-read-notes { font-size:0.75rem;color:var(--ink-soft); }
.hd-hist-sub { font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin:0.3rem 0 0.4rem; }
.hd-hist-row { display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.5rem 0.65rem;border:1px solid var(--border);border-radius:8px;margin-bottom:0.4rem;cursor:pointer;transition:background 0.12s; }
.hd-hist-row:hover { background:var(--canvas-warm,#faf8f5); }
.hd-hist-row.static { cursor:default; }
.hd-hist-row.static:hover { background:transparent; }
.hd-hist-main { min-width:0; }
.hd-hist-title { font-size:0.83rem;color:var(--ink);font-weight:500;line-height:1.35; }
.hd-hist-meta { font-size:0.72rem;color:var(--ink-soft);margin-top:0.15rem; }
.hp-read-head { font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--brand,#2D7DD2);margin:0.9rem 0 0.5rem;border-top:1px solid var(--border);padding-top:0.8rem; }
.hp-read-note { font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:0.7rem;margin-left:0.4rem; }
.tk-house-link { font-size:0.8rem;color:var(--brand,#2D7DD2);cursor:pointer;font-weight:600; }
.tk-house-link:hover { text-decoration:underline; }
.tk-house-inline { cursor:pointer; }
.tk-house-inline:hover { text-decoration:underline; }
.conv-read-scores { font-size:0.78rem;color:var(--ink-mid);font-weight:600; }
.conv-read-voice { font-size:0.78rem;color:var(--ink-mid);font-style:italic;margin-top:0.15rem; }
.conv-ow { padding:0.45rem 0.55rem;border:1px solid var(--border);border-radius:8px;margin-bottom:0.4rem;cursor:pointer;transition:background 0.12s; }
.conv-ow:hover { background:var(--canvas-warm,#faf8f5); }
.conv-ow.static { cursor:default; }
.conv-ow.static:hover { background:transparent; }
.ow-pill { display:inline-block;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:0.1rem 0.4rem;border-radius:4px;vertical-align:middle; }
.ow-ticket { background:#fef3c7;color:#92400e; }
.ow-followup { background:#dbeafe;color:#1e40af; }
.ow-type { display:inline-block;font-size:0.65rem;color:var(--ink-soft);margin-left:0.35rem;vertical-align:middle; }
.ow-title { font-size:0.8rem;color:var(--ink);margin-top:0.2rem;line-height:1.35; }
.ow-sub { font-size:0.7rem;color:var(--ink-soft);margin-top:0.1rem; }
/* v1.6.1 seen-by line + orange create button */
.seen-by { display:flex;align-items:center;justify-content:center;gap:0.4rem;flex-wrap:wrap; }
.seen-label { font-size:0.7rem;color:var(--ink-soft); }
.seen-dot { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:0.58rem;font-weight:700;letter-spacing:0.02em;cursor:default;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,0.6); }
.reply-create { background:#b45309;color:#fff;border:none;border-radius:10px;padding:0.6rem 1rem;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;cursor:pointer;white-space:nowrap;margin-left:0.5rem;flex-shrink:0; }
.reply-create:hover { background:#92400e; }
/* v1.30.0: + Create moved into the conversation rail Household header (compact). Same orange,
   sized for the 53px header. Conversations only; the ticket rail keeps its own header. */
.rail-create { background:#b45309;color:#fff;border:none;border-radius:8px;padding:0.3rem 0.7rem;font-family:'DM Sans',sans-serif;font-size:0.76rem;font-weight:500;cursor:pointer;white-space:nowrap; }
.rail-create:hover { background:#92400e; }
/* v1.6.2 conversation rail ticket history + scheduled save */
.conv-ticket-line { display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.5rem;border-radius:7px;cursor:pointer;transition:background 0.12s; }
.conv-ticket-line:hover { background:var(--canvas-warm,#faf8f5); }
/* v1.42.0 documents list (Files tab, both rail and household detail) */
.doc-row { display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.4rem;border-bottom:1px solid var(--border); }
.doc-row:last-child { border-bottom:none; }
.doc-icon { flex:0 0 auto;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;letter-spacing:0.03em;background:var(--canvas-warm);color:var(--ink-soft);border:1px solid var(--border); }
.doc-icon.pdf { background:var(--red-bg);color:var(--red);border-color:var(--red); }
.doc-meta { flex:1;min-width:0;cursor:pointer; }
.doc-label { font-size:0.82rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.doc-file { font-size:0.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.doc-del { flex:0 0 auto;background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:0.85rem;padding:0.2rem 0.35rem;border-radius:5px; }
.doc-del:hover { color:var(--red);background:var(--red-bg); }
.doc-add-btn { display:inline-block;margin-top:0.6rem;font-size:0.78rem;font-weight:500;color:var(--brand);cursor:pointer;padding:0.3rem 0.1rem; }
.doc-add-btn:hover { text-decoration:underline; }
/* v1.42.0 equipment in the conversation rail (item 6, read only, slim) */
.cv-eq-room { border:1px solid var(--border);border-radius:7px;margin-bottom:0.4rem;overflow:hidden; }
.cv-eq-roomhead { display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.55rem;cursor:pointer; }
.cv-eq-roomhead:hover { background:var(--canvas-warm); }
.cv-eq-caret { font-size:0.7rem;color:var(--ink-soft); }
.cv-eq-rname { flex:1;font-size:0.8rem;font-weight:500;color:var(--ink); }
.cv-eq-rn { font-size:0.72rem;color:var(--ink-soft); }
.cv-eq-devs { padding:0.15rem 0.55rem 0.5rem 1.5rem; }
.cv-eq-dev { display:flex;align-items:baseline;gap:0.4rem;font-size:0.76rem;padding:0.18rem 0; }
.cv-eq-q { color:var(--ink-soft);font-size:0.72rem; }
.cv-eq-nm { color:var(--ink); }
.cv-eq-md { color:var(--ink-soft);font-size:0.72rem; }
.cv-eq-pos { color:var(--ink-soft);font-size:0.72rem; }
/* v1.42.0 ticket read-only glance in the rail (item 4) */
.ctl-caret { font-size:0.7rem;color:var(--ink-soft);margin-left:auto; }
.conv-ticket-detail { padding:0.45rem 0.55rem 0.55rem;border-left:2px solid var(--border);margin:0 0 0.4rem 0.5rem; }
.cv-tk-row { display:flex;gap:0.6rem;font-size:0.76rem;padding:0.12rem 0; }
.cv-tk-k { flex:0 0 86px;color:var(--ink-soft); }
.cv-tk-v { color:var(--ink); }
.cv-tk-res { margin-top:0.35rem; }
.cv-tk-resnote { font-size:0.76rem;color:var(--ink);margin-top:0.2rem;line-height:1.4; }
.cv-tk-open { display:inline-block;margin-top:0.5rem;font-size:0.74rem;color:var(--brand);cursor:pointer; }
.cv-tk-open:hover { text-decoration:underline; }
.ctl-status { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.ctl-status.ow-open { background:#cc4400; }
.ctl-status.ow-scheduled { background:#7c3aed; }
.ctl-status.ow-resolved { background:transparent;border:1.5px solid #b8b4ad;box-sizing:border-box; } /* v1.42.1: resolved is a hollow ring, not live */
/* v1.42.1 People roster in the rail (read only) */
.cv-person { padding:0.5rem 0.1rem;border-bottom:1px solid var(--border); }
.cv-person:last-child { border-bottom:none; }
.cv-person-top { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem; }
.cv-person-name { font-size:0.84rem;font-weight:600;color:var(--ink); }
.cv-person-role { font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border);border-radius:100px;padding:1px 7px; }
.cv-person-bot { display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap; }
/* v1.42.1 Remove household, muted, off to the right of the edit fields */
.hd-head-edit-row { display:flex;align-items:center;gap:0.6rem; }
.hd-remove-link { margin-left:auto;font-size:0.72rem;color:var(--ink-soft);cursor:pointer;white-space:nowrap; }
.hd-remove-link:hover { color:var(--red); }
.ctl-num { font-size:0.72rem;color:var(--ink-soft);flex-shrink:0;font-variant-numeric:tabular-nums; } /* v1.74.0 */
.ctl-label { flex:1;font-size:0.8rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ctl-date { font-size:0.72rem;color:var(--ink-soft);flex-shrink:0; }
.tk-sched-row { display:flex;gap:0.4rem;align-items:center; }
/* v1.21.1: in-chat flag mode */
.flag-mode .sms-msg.sms-andi { cursor:pointer; }
.flag-mode .sms-msg.sms-andi:hover { outline:2px dashed rgba(204,122,0,0.5); }
.sms-msg.flag-sel { box-shadow:0 0 0 2px #cc7a00; }
/* v1.20.0: native date popups draw in dark mode instead of the white pasted-in look */
/* v1.66.0 LIGHT MODE DEFECT (John, first sitting): this was an unconditional color-scheme:dark,
   set back when the dashboard was dark only. A native date input draws its OWN chrome from
   color-scheme, so in light mode the browser painted a dark calendar icon and dark popup into a
   light field and the icon read as invisible. It follows the theme now. Light mode has never been
   walked end to end, so assume there are more of these. */
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: light; }
body.dark input[type="date"], body.dark input[type="datetime-local"], body.dark input[type="time"] { color-scheme: dark; }
.tk-sched-row .fld-input { flex:1;min-width:0; }
.tk-sched-save { background:#b45309;color:#fff;border:none;border-radius:8px;padding:0.45rem 0.7rem;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0; }
.tk-sched-save:hover { background:#92400e; }
.tk-sched-save:disabled { opacity:0.6;cursor:default; }
.tk-sched-clear { background:transparent;color:var(--ink-soft);border:1px solid var(--border);border-radius:8px;padding:0.45rem 0.7rem;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0; }
.tk-sched-clear:hover { background:var(--canvas-warm,#faf8f5);color:var(--ink); }
.tk-sched-clear:disabled { opacity:0.6;cursor:default; }
.status-select { display:flex;gap:0.5rem;margin-top:0.5rem; }
.status-opt { padding:0.35rem 0.85rem;border-radius:7px;font-size:0.78rem;font-weight:600;cursor:pointer;border:2px solid var(--border);color:var(--ink-soft);transition:all 0.15s;background:var(--white);font-family:'DM Sans',sans-serif; }
.status-opt:hover { border-color:var(--ink-soft); }
.status-opt.sel-open { border-color:var(--red);color:var(--red);background:var(--red-bg); }
.status-opt.sel-scheduled { border-color:#b45309;color:#b45309;background:#fef3e2; }
.status-opt.sel-resolved { border-color:var(--green);color:#0f6e50;background:var(--green-bg); }
.clock-display { font-size:1.5rem;font-weight:700;color:var(--red);letter-spacing:-0.02em;margin-bottom:3px; }
.clock-note { font-size:0.72rem;color:var(--ink-soft); }
.household-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.875rem;padding:1.1rem 1.25rem; }
.household-card { background:var(--white);border:1px solid var(--border);border-radius:10px;padding:1rem;cursor:pointer;transition:box-shadow 0.15s,transform 0.12s; }
.household-card:hover { box-shadow:0 3px 12px rgba(0,0,0,0.07);transform:translateY(-1px); }
.household-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem; }
.household-avatar { width:32px;height:32px;border-radius:50%;background:var(--canvas-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:var(--ink-mid); }
.h-status { width:7px;height:7px;border-radius:50%; }
.household-name { font-size:0.88rem;font-weight:600;color:var(--ink);margin-bottom:2px; }
.household-address { font-size:0.72rem;color:var(--ink-soft); }
.household-last { font-size:0.7rem;color:var(--ink-soft);margin-top:0.5rem; }
.followup-row { display:flex;align-items:flex-start;gap:0.75rem;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border); }
.followup-row:last-child { border-bottom:none; }
.followup-row.done { opacity:0.45; }
.followup-check { width:20px;height:20px;border-radius:5px;border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all 0.15s;background:var(--white); }
.followup-check:hover { border-color:var(--green); }
.followup-check.checked { background:var(--green);border-color:var(--green); }
.followup-check.checked::after { content:'✓';font-size:0.65rem;color:white;font-weight:700; }
.followup-body { flex:1; }
.followup-client { font-size:0.85rem;font-weight:600;color:var(--ink); }
.followup-note { font-size:0.78rem;color:var(--ink-mid);margin-top:2px;line-height:1.5; }
.followup-meta { font-size:0.68rem;color:var(--ink-soft);margin-top:4px; }
.followup-resolved-note { font-size:0.68rem;color:var(--green);margin-top:3px;display:none; }
.followup-row.done .followup-resolved-note { display:block; }
.placeholder-body { padding:3rem;text-align:center;color:var(--ink-soft);font-size:0.875rem;font-style:italic; }
.loading-row { padding:1.5rem 1.25rem;text-align:center;color:var(--ink-soft);font-size:0.82rem;font-style:italic; }
.thread-summary { margin:0.75rem 0.85rem;padding:0.75rem 1rem;background:var(--canvas-warm);border:1px solid var(--border);border-radius:10px;font-size:0.78rem;color:var(--ink-mid);line-height:1.6; }
.thread-summary strong { color:var(--ink);font-weight:500; }
.thread-summary-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:0.4rem; }
.reply-box { padding:0.65rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;align-items:flex-end; }
.reply-textarea { flex:1;background:var(--canvas-warm);border:1px solid var(--border);border-radius:10px;padding:0.5rem 0.85rem;font-family:'DM Sans',sans-serif;font-size:0.85rem;color:var(--ink);resize:none;outline:none;min-height:36px;max-height:80px;line-height:1.4;overflow-y:auto; }
.reply-send { background:var(--green);color:white;border:none;border-radius:10px;padding:0.6rem 1rem;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;cursor:pointer;white-space:nowrap; }
/* v1.29.0: quick messages. Quick opens a popover of integrator templates; clicking one drops its
   body into the reply box (click-to-compose, never auto-send). Owners manage the list in Settings. */
.reply-quick { background:var(--canvas-warm);color:var(--ink-mid);border:1px solid var(--border);border-radius:10px;padding:0.6rem 0.85rem;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;cursor:pointer;white-space:nowrap; }
.reply-quick:hover { color:var(--ink); }
.qm-pop { position:absolute;right:30px;bottom:118px;z-index:7;width:300px;max-height:320px;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.28);padding:0.35rem; }
.qm-pop-empty { padding:0.85rem;font-size:0.78rem;color:var(--ink-soft);font-style:italic; }
.qm-pop-item { padding:0.5rem 0.6rem;border-radius:8px;cursor:pointer; }
.qm-pop-item:hover { background:var(--canvas-warm); }
.qm-pop-item-label { font-size:0.8rem;font-weight:600;color:var(--ink);margin-bottom:0.15rem; }
.qm-pop-item-body { font-size:0.72rem;color:var(--ink-soft);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.qm-row { display:flex;align-items:flex-start;gap:0.6rem;padding:0.6rem 0;border-bottom:1px solid var(--border); }
.qm-row-main { flex:1;min-width:0; }
.qm-row-label { font-size:0.82rem;font-weight:600;color:var(--ink); }
.qm-default-pill { font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--green);margin-left:0.4rem; }
.qm-row-body { font-size:0.74rem;color:var(--ink-soft);line-height:1.45;margin-top:0.2rem;white-space:pre-wrap; }
.qm-row-acts { display:flex;flex-direction:column;gap:0.3rem;align-items:flex-end; }
.qm-mini { background:none;border:none;color:var(--ink-soft);font-size:0.72rem;cursor:pointer;padding:0.1rem 0.3rem; }
.qm-mini:hover { color:var(--ink); }
.qm-mini.danger:hover { color:#cc4400; }
.qm-edit-fields { display:flex;flex-direction:column;gap:0.4rem;flex:1; }
.thread-shell { display:flex;gap:0;height:calc(100vh - var(--topbar-h) - 5.5rem);min-height:0; }
.thread-main { flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--white);position:relative; }
/* v1.22.0: flag for review lives as a pinned icon inside the chat, above + Create. Same spot
   whether Andi or a human is handling, so it never wraps in the header again. */
.flag-fab { position:absolute;right:30px;bottom:74px;z-index:6;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--ink-soft);font-size:0.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.22); }
.flag-fab:hover { color:#cc7a00;border-color:#cc7a00; }
.flag-fab.on { background:#cc7a00;border-color:#cc7a00;color:#fff; }
/* v1.22.0: team list columns (UniFi style): role column + morning email toggle per row. */
.team-role { font-size:0.75rem;color:var(--ink-soft);min-width:52px;text-align:right;white-space:nowrap; }
.team-mail { font-size:0.95rem;color:var(--ink-soft);opacity:0.3;cursor:pointer;padding:0.15rem 0.35rem;border-radius:6px;line-height:1; }
.team-mail:hover { opacity:0.75;background:var(--canvas-warm); }
.team-mail.on { opacity:1;color:#1D9E75; }
/* v1.22.0: summary card + resolved cards carry the morning email color language. */
.ss-issue { color:#cc4400; } .ss-andi { color:#1D9E75; } .ss-fu { color:#2D7DD2; }
.ss-mind { font-style:italic; }
.thread-main .sms-thread { overflow-x:hidden; }
.equipment-panel { width:clamp(300px, 26%, 480px);flex-shrink:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--white);margin-left:0.875rem; }
.equipment-panel-header { padding:0.75rem 1.25rem;border-bottom:1px solid var(--border);font-size:0.85rem;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;height:53px;box-sizing:border-box; }
.equipment-panel-body { flex:1;overflow-y:auto;padding:0.75rem 1rem; }
.eq-section { margin-bottom:1rem; }
.eq-section-title { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--green);margin-bottom:0.4rem; }
.eq-row { display:flex;justify-content:space-between;align-items:baseline;padding:0.2rem 0;border-bottom:1px solid var(--canvas-warm);font-size:0.78rem; }
.eq-row:last-child { border-bottom:none; }
.eq-label { color:var(--ink-soft);flex-shrink:0;margin-right:0.5rem; }
.eq-value { color:var(--ink);font-weight:500;text-align:right; }
.eq-notes { font-size:0.78rem;color:var(--ink-mid);line-height:1.5;padding:0.4rem 0;font-style:italic; }
.photo-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin-top:0.5rem; }
.photo-thumb { aspect-ratio:4/3;border-radius:7px;overflow:hidden;cursor:pointer;background:var(--canvas-warm);border:1px solid var(--border);position:relative; }
.photo-thumb img { width:100%;height:100%;object-fit:cover;transition:opacity 0.15s; }
.photo-thumb:hover img { opacity:0.85; }
.photo-upload-btn { display:flex;align-items:center;justify-content:center;gap:0.4rem;width:100%;margin-top:0.5rem;padding:0.5rem;background:var(--canvas-warm);border:1px dashed var(--border);border-radius:7px;font-size:0.75rem;color:var(--ink-soft);cursor:pointer;transition:all 0.15s;font-family:'DM Sans',sans-serif; }
.photo-upload-btn:hover { border-color:var(--brand);color:var(--brand); }
.photo-lightbox { position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:1000;display:flex;align-items:center;justify-content:center;cursor:zoom-out; }
.photo-lightbox img { max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain; }
/* v1.59.0: inbound MMS photos in the thread */
.sms-photos { display:flex;flex-wrap:wrap;gap:0.35rem;max-width:min(75%, 620px); }
.sms-photos.right { align-self:flex-end;justify-content:flex-end; }
.sms-photo { max-width:220px;max-height:220px;border-radius:12px;cursor:zoom-in;object-fit:cover;border:1px solid var(--border);display:block; }
.sms-system { text-align:center;font-size:0.7rem;color:var(--ink-soft);padding:0.5rem 1rem;user-select:none; }
.sms-system-line { display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0; }
.sms-system-line .sline { flex:1;height:1px;background:var(--border); }
.sms-system-line.green .sline { background:var(--green);opacity:0.4; }
.sms-system-line span { font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);white-space:nowrap; }
.sms-system-line.green span { color:var(--green); }
.handback-btn { background:none;color:var(--blue);border:1px solid var(--blue);border-radius:7px;padding:0.25rem 0.75rem;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:500;cursor:pointer;white-space:nowrap; }
.handback-btn:hover { background:var(--blue);color:white; }
/* v1.89.0: quieter than Hand back on purpose. It says nothing to the client and changes no state on
   the thread; it only tells the team this one needs nothing. */
.markread-btn { background:none;color:var(--ink-soft);border:1px solid var(--border);border-radius:7px;padding:0.25rem 0.75rem;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:500;cursor:pointer;white-space:nowrap; }
.markread-btn:hover { color:var(--ink);border-color:var(--ink-soft); }
.conv-list-header { padding:0.85rem 1.25rem 0.5rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;border-bottom:1px solid var(--border); }
.conv-search { flex:1;background:var(--canvas-warm);border:1px solid var(--border);border-radius:8px;padding:0.45rem 0.75rem;font-family:'DM Sans',sans-serif;font-size:0.82rem;color:var(--ink);outline:none;transition:border-color 0.2s; }
.conv-search:focus { border-color:var(--brand); }
.conv-search::placeholder { color:var(--ink-soft); }
.conv-card { display:flex;align-items:stretch;cursor:pointer;border-bottom:2px solid var(--canvas-warm);transition:background 0.12s;position:relative; }
.conv-card:last-child { border-bottom:none; }
.conv-card:hover { background:var(--canvas-warm); }
.conv-unread-indicator { width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.conv-unread-dot { width:8px;height:8px;border-radius:50%;background:transparent; }
.conv-card.unread .conv-unread-dot { background:var(--green); }
/* v1.85.0: an email only thread, meaning one with no phone number at all. Same token as the email
   band inside a thread. Wash plus a left edge, never a flat fill: the unread dot and the count
   sit in this row and a solid block swallows them. */
.conv-card.email-only { background:var(--ch-email-band);box-shadow:inset 3px 0 0 var(--ch-email); }
.conv-card.email-only:hover { background:var(--ch-email-soft); }
.conv-card.email-only .conv-name { color:var(--ch-email-ink); }
/* v1.86.0: the compose on a thread that cannot be texted. Quiet rather than alarming: the thread
   is not broken, it just answers on a different channel. */
.reply-box.reply-nophone .reply-textarea { opacity:0.55;cursor:not-allowed; }
.reply-box.reply-nophone .reply-send { opacity:0.4;filter:grayscale(1);cursor:not-allowed; }
.conv-card-body { flex:1;padding:0.4rem 1rem 0.4rem 0.5rem;min-width:0; }
.conv-card-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:0.1rem; }
.conv-name { font-size:0.88rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:0.4rem; }
.conv-card.unread .conv-name { font-weight:700; }
.conv-time { font-size:0.72rem;color:var(--ink-soft);flex-shrink:0; }
.conv-household { font-size:0.75rem;color:var(--ink-soft);font-weight:400;margin-left:0.5rem; }
/* v1.95.0: a removed person's row: their name stays, the house is gone. */
.conv-nohouse { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);border:1px solid var(--line, rgba(128,128,128,0.35));border-radius:100px;padding:1px 8px;margin-left:0.5rem;vertical-align:middle; }
.sms-removal { text-align:center;font-size:0.7rem;color:var(--ink-soft);padding:0.5rem 1rem;user-select:none;font-weight:600; }
.rm-forget { display:flex;gap:0.55rem;align-items:flex-start;margin-top:0.4rem;cursor:pointer;font-size:0.85rem;line-height:1.35; }
.rm-forget input { margin-top:0.2rem; }
.rm-forget-note { display:block;font-size:0.75rem;color:var(--ink-soft);margin-top:0.2rem; }

.conv-card-bottom { display:flex;align-items:flex-end;justify-content:space-between;margin-top:0.25rem;gap:0.5rem; }
.conv-preview { font-size:0.78rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;flex:1;min-width:0; }
.conv-card.unread .conv-preview { color:var(--ink-mid); }
.conv-card-meta { display:flex;align-items:center;gap:0.4rem;flex-shrink:0; }
.conv-msg-count { font-size:0.68rem;color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border);border-radius:100px;padding:1px 7px; }
.conv-andi-label { font-size:0.68rem;color:var(--green);font-weight:600; }
.conv-notandi-label { font-size:0.68rem;color:#2D7DD2;font-weight:600;white-space:nowrap; }
.resume-countdown { font-size:0.68rem;color:#2D7DD2;font-weight:600;white-space:nowrap; }
/* v1.17.0 unknown-number chip + attach button */
.conv-unknown { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#b45309;background:#fef3e2;border:1px solid #f0c98a;border-radius:100px;padding:1px 8px;margin-left:0.5rem;vertical-align:middle; }
.attach-btn { background:none;color:#b45309;border:1px solid #e3b778;border-radius:7px;padding:0.25rem 0.75rem;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:500;cursor:pointer;white-space:nowrap; }
.attach-btn:hover { background:#b45309;color:white; }
.resume-countdown.resume-urgent { color:#E08600; }
.status-sep { color:var(--ink-soft);margin:0 2px; }
.session-divider { display:flex;align-items:center;gap:0.75rem;padding:0.85rem 0.5rem 0.5rem;margin:0 0.85rem; }
.session-line { flex:1;height:2px;background:var(--green);border-radius:100px;opacity:0.5; }
.session-label { font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--green);white-space:nowrap;opacity:0.8; }
.session-close { display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.5rem 0.85rem;margin:0 0.85rem; }
.session-summary-card { margin:0.5rem 0.85rem;padding:0.5rem 1rem;font-size:0.72rem;color:var(--ink-soft);line-height:1.8;text-align:left;display:flex;flex-direction:column;gap:0.1rem;align-self:stretch; }
.session-summary-card .ss-row { display:block;margin-bottom:0.1rem; }
.session-summary-card .ss-row strong { color:var(--ink-mid);font-weight:600; }
.session-summary-card .ss-mindset { font-style:italic;color:var(--ink-soft); }
/* ── Setup wizard + company settings (increment #3) ── */
.wiz-overlay { display:none;position:fixed;inset:0;background:rgba(10,10,9,0.72);backdrop-filter:blur(3px);z-index:2000;align-items:center;justify-content:center;padding:1.5rem; }
.wiz-overlay.show { display:flex; }
.wiz-card { background:var(--white);border:1px solid var(--border);border-radius:16px;width:520px;max-width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.4); }
.wiz-head { padding:1.5rem 1.75rem 1rem; }
.wiz-steps { display:flex;gap:0.4rem;margin-bottom:1rem; }
.wiz-pip { height:4px;flex:1;border-radius:100px;background:var(--border);transition:background 0.2s; }
.wiz-pip.on { background:var(--brand); }
.wiz-title { font-family:'DM Serif Display',serif;font-size:1.5rem;letter-spacing:-0.01em;color:var(--ink); }
.wiz-sub { font-size:0.85rem;color:var(--ink-soft);margin-top:0.35rem;line-height:1.45; }
.wiz-body { padding:0.5rem 1.75rem; }
.wiz-foot { padding:1.25rem 1.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem; }
.wiz-step { display:none; } .wiz-step.on { display:block; }
.fld { margin-bottom:0.9rem; }
.fld-label { font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--ink-soft);margin-bottom:0.35rem; }
.fld-input { width:100%;background:var(--canvas);border:1px solid var(--border);color:var(--ink);padding:0.6rem 0.8rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.15s; }
.fld-input:focus { border-color:var(--brand); }
.fld-row { display:flex;gap:0.6rem; } .fld-row > * { flex:1;min-width:0; }
.btn-primary { background:var(--brand);color:white;border:none;padding:0.6rem 1.2rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.86rem;font-weight:600;cursor:pointer;transition:background 0.15s; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:disabled { opacity:0.55;cursor:default; }
.btn-ghost { background:none;border:none;color:var(--ink-soft);font-family:'DM Sans',sans-serif;font-size:0.85rem;cursor:pointer;padding:0.6rem 0.4rem; }
.btn-ghost:hover { color:var(--ink); }
.wiz-err { font-size:0.78rem;color:var(--red);min-height:1rem;margin-top:0.2rem; }
.logo-drop { border:1.5px dashed var(--border);border-radius:10px;padding:1.1rem;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s;color:var(--ink-soft);font-size:0.82rem; }
.logo-drop:hover { border-color:var(--brand);background:var(--canvas); }
.logo-preview { display:flex;align-items:center;gap:0.8rem;background:var(--canvas);border:1px solid var(--border);border-radius:10px;padding:0.7rem 0.9rem; }
.logo-preview img { height:40px;width:auto;max-width:160px;object-fit:contain;border-radius:4px;background:#fff; }
.color-row { display:flex;gap:0.75rem;flex-wrap:wrap; }
.color-cell { flex:1;min-width:120px; }
.color-pick { display:flex;align-items:center;gap:0.5rem; }
.color-pick input[type=color] { width:34px;height:34px;border:1px solid var(--border);border-radius:7px;background:none;cursor:pointer;padding:2px;flex-shrink:0; }
.color-pick input[type=text] { flex:1;min-width:0; }
.sb-logo-img { max-width:100%;max-height:34px;width:auto;object-fit:contain;display:block; }
.sb-brandrow { display:flex;align-items:center;gap:0.55rem;min-width:0; }
.sb-brandrow .sb-logo-img { max-height:32px;max-width:84px;flex-shrink:0; }
.sb-brandname { font-size:0.92rem;font-weight:600;color:white;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
/* v1.94.0: the logo owns the top of the bar, centered and large; the name sits under it and wraps; the number centered. */
.sidebar-logo { text-align:center; }
.sb-brand { display:flex;flex-direction:column;align-items:center;gap:0.45rem;width:100%;min-width:0; }
.sb-logo-big { display:block;max-width:180px;width:auto;max-height:70px;height:auto;object-fit:contain;margin:0 auto; }
.sb-brandname-under { font-size:0.92rem;font-weight:600;color:white;letter-spacing:-0.01em;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.25;max-width:100%; }
.sidebar-logo .integrator-number { text-align:center;margin-top:0.4rem; }
/* v1.94.0: MY ANDI, the teammate's own thread, and the team view in Settings. */
.ma-chrome { display:flex;flex-direction:column; }
.ma-number { font-size:0.76rem;color:var(--ink-soft); }
.ma-thread { padding:1rem 1.25rem;overflow-y:auto;max-height:calc(100vh - 290px);min-height:260px;display:flex;flex-direction:column;gap:0.55rem;background:var(--canvas); }
.ma-row { display:flex;flex-direction:column;max-width:78%; }
.ma-row.me { align-self:flex-end;align-items:flex-end; }
.ma-row.andi { align-self:flex-start;align-items:flex-start; }
.ma-b { padding:0.55rem 0.8rem;border-radius:12px;font-size:0.86rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere; }
.ma-row.me .ma-b { background:var(--brand);color:#fff;border-bottom-right-radius:4px; }
.ma-row.andi .ma-b { background:var(--white);color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px; }
.ma-meta { font-size:0.68rem;color:var(--ink-soft);margin-top:0.2rem;padding:0 0.2rem; }
.ma-typing .ma-b { color:var(--ink-soft);font-style:italic; }
.ma-older { align-self:center;font-size:0.76rem;color:var(--brand);cursor:pointer;padding:0.2rem 0.6rem; }
.ma-compose { display:flex;gap:0.6rem;padding:0.8rem 1.25rem;border-top:1px solid var(--border);background:var(--white);align-items:flex-end; }
.ma-compose textarea { flex:1;resize:none;min-height:42px;max-height:160px;font-family:'DM Sans',sans-serif;font-size:0.88rem;padding:0.6rem 0.75rem;border:1px solid var(--border);border-radius:8px;background:var(--canvas);color:var(--ink);outline:none; }
.ma-compose textarea:focus { border-color:var(--brand); }
.ma-fixes { overflow-y:auto;max-height:calc(100vh - 160px);background:var(--white); }
.mat-held { color:var(--ink-soft);font-size:0.78rem; }
.ma-foot { display:flex;flex-wrap:wrap;gap:0.4rem 1rem;align-items:center;padding:0 1.25rem 0.85rem;background:var(--white); }
.ma-pref { display:flex;align-items:center;gap:0.45rem;font-size:0.78rem;color:var(--ink-mid);cursor:pointer; }
.ma-pref.off { color:var(--ink-soft);cursor:default; }
.ma-err { font-size:0.78rem;color:var(--red); }
.ma-empty { margin:auto;max-width:460px;text-align:center;color:var(--ink-soft);font-size:0.86rem;line-height:1.7;padding:1.5rem 0.5rem; }
.mat-wrap { display:flex;gap:1rem;flex-wrap:wrap; }
.mat-list { flex:0 0 220px;min-width:200px;display:flex;flex-direction:column;gap:2px; }
.mat-person { display:flex;justify-content:space-between;gap:0.5rem;padding:0.5rem 0.65rem;border-radius:8px;cursor:pointer;font-size:0.84rem;color:var(--ink); }
.mat-person:hover { background:var(--canvas-warm); }
.mat-person.sel { background:var(--brand-light);color:var(--brand-dark); }
body.dark .mat-person.sel { background:rgba(29,158,117,0.18);color:var(--ink); }
.mat-person .mat-sub { font-size:0.7rem;color:var(--ink-soft); }
.mat-thread { flex:1 1 320px;min-width:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;position:relative;min-height:420px; }
/* v1.94.1 (Andy, Oct 14): the team thread fills its box, as tall as the teammate list, and scrolls inside it. */
.mat-thread .ma-thread { position:absolute;inset:0;max-height:none;min-height:0; }
.mat-table { width:100%;border-collapse:collapse;font-size:0.8rem; }
.mat-table td, .mat-table th { text-align:left;padding:0.4rem 0.5rem;border-bottom:1px solid var(--border);vertical-align:top; }
.mat-table th { font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:600; }
.set-section { padding:1.25rem 1.5rem;border-bottom:1px solid var(--border); }
.set-section:last-child { border-bottom:none; }
.set-section-title { font-size:0.82rem;font-weight:700;color:var(--ink);margin-bottom:0.15rem; }
.set-section-note { font-size:0.76rem;color:var(--ink-soft);margin-bottom:0.9rem;line-height:1.45; }
.set-readonly { font-size:0.86rem;color:var(--ink-mid);background:var(--canvas);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.8rem; }
.set-saverow { display:flex;align-items:center;gap:0.9rem;margin-top:0.4rem; }
.set-saved { font-size:0.78rem;color:var(--green);opacity:0;transition:opacity 0.2s; }
.set-saved.show { opacity:1; }
.set-status-pill { display:inline-block;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:2px 9px;border-radius:100px; }
.set-status-pill.preview { background:var(--blue-bg);color:var(--blue); }
.set-status-pill.live { background:var(--green-bg);color:var(--green); }
.set-link { color:var(--brand);cursor:pointer;font-size:0.82rem;font-weight:500;text-decoration:none; }
.set-link:hover { text-decoration:underline; }
/* v1.43.0 settings tabs: reuse the .hd-tab button look, own strip + panels */
/* v1.66.0 status and priority chips. Colour arrives per row from the portal, so these carry
   layout only and the fill is set inline. */
.t-pill-dyn { display:inline-block;padding:0.2rem 0.55rem;border-radius:999px;font-size:0.68rem;font-weight:600;letter-spacing:0.01em;white-space:nowrap; }
.t-prio { display:inline-block;padding:0.15rem 0.45rem;border-radius:4px;font-size:0.62rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;white-space:nowrap;margin-left:0.4rem; }
.tk-clock { font-size:0.68rem;color:var(--ink-soft);white-space:nowrap; }
/* v1.67.0 A RUNNING clock carries the icon; a stopped one carries nothing. Absence is the signal,
   so there is no second glyph to learn and a paused ticket cannot be misread as counting. */
.tk-clock-ico { margin-right:0.25rem;opacity:0.85;font-size:0.9em; }
.tk-clock-off { opacity:0.62; }
.tk-hist-row { display:flex;align-items:baseline;gap:0.5rem;padding:0.3rem 0;border-bottom:1px solid var(--border);font-size:0.75rem; }
.tk-hist-row:last-child { border-bottom:none; }
.tk-hist-dot { width:8px;height:8px;border-radius:50%;flex:0 0 8px; }
.tk-hist-dur { margin-left:auto;color:var(--ink-soft);font-size:0.7rem; }
.tk-hist-dur.nocount { text-decoration:line-through;opacity:0.65; }
/* v1.73.0 the collapsed band. Expands in place so the rail never jumps. */
.tk-hist-more { padding:0.35rem 0;font-size:0.7rem;color:var(--ink-soft);cursor:pointer;border-bottom:1px solid var(--border);text-align:center; }
.tk-hist-more:hover { color:var(--ink); }
/* v1.68.0 ONE grid, shared by the status list and the urgency list, so the two sections line up
   with each other as well as within themselves. Columns: dot, name, state, action. The action
   column keeps its width on a locked row rather than collapsing, which is what stopped the old
   flex rows from ever aligning. */
/* v1.69.0 THE ROW IS THE ROW. v1.68.0 put the border on each CELL, and a grid's column-gap sits
   BETWEEN cells, so the separator rendered as four fragments with a hole at every gap. The border
   now lives on a full width row wrapper whose line nothing can interrupt, and the columns are
   defined once so the header and every row share them exactly.
   EVERY ROW IS ONE FIXED HEIGHT and every cell centres on it. That is the other half of what
   looked crooked: an input, a colour swatch and two buttons have four different intrinsic
   heights, and each was centring itself in its own box rather than against a shared line. */
.vocab-grid { display:block;margin-top:0.35rem; }
.vocab-row-g { display:grid;grid-template-columns:22px minmax(0,1fr) 92px 34px;column-gap:0.6rem;align-items:center;height:42px;border-bottom:1px solid var(--border); }
.vocab-row-g:last-child { border-bottom:none; }
/* v1.77.0: THE STATUS LIST GETS ITS OWN WIDTHS. The first version of this widened .vocab-row-g,
   which is shared by the urgency and category editors, so both would have rendered four cells
   into a seven column grid and collapsed. Caught by the harness assertion that the lists share
   column widths, which existed precisely because they LOOK like one component and are three. */
.vocab-row-s { grid-template-columns:22px minmax(0,1fr) 78px 62px 62px 66px 34px; }
.vocab-row-g.vocab-headrow { height:28px;border-bottom:1px solid var(--border); }
.vocab-head { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);display:flex;align-items:center; }
.vocab-head.c { justify-content:center; }
.vocab-cell { display:flex;align-items:center;height:100%;min-width:0; }
.vocab-cell.c { justify-content:center; }
/* The dot matches the ticket dots used across the dashboard. The ring is what makes it read as a
   control; a flat square read as decoration and nobody would click it. */
/* v1.70.0 A STATIC dot for the rows whose colour is frozen. Same size and same ring as the
   editable one, so the column still reads as one column; it simply is not a control. */
.vocab-dot-static { width:16px;height:16px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--border);box-sizing:border-box; }
.vocab-dot { width:16px;height:16px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none; }
.vocab-dot::-webkit-color-swatch-wrapper { padding:0; }
.vocab-dot::-webkit-color-swatch { border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--border); }
.vocab-dot::-moz-color-swatch { border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--border); }
/* Plain text at rest, a field on hover and focus. Same behaviour as every other editable value. */
.vocab-name { width:100%;font-size:0.85rem;line-height:1.2;color:var(--ink);background:none;border:1px solid transparent;border-radius:6px;padding:0.3rem 0.45rem;margin:0;font-family:inherit;box-sizing:border-box;display:block; }
.vocab-name:hover { border-color:var(--border);background:var(--canvas-warm); }
.vocab-name:focus { outline:none;border-color:var(--border);background:var(--canvas-warm); }
/* The clock toggle speaks the Team tab's envelope language: dim when off, green when on. */
.vocab-tog { font-size:0.95rem;color:var(--ink-soft);opacity:0.3;cursor:pointer;padding:0.15rem 0.35rem;border-radius:6px;line-height:1;background:none;border:none; }
.vocab-tog:hover { opacity:0.75;background:var(--canvas-warm); }
.vocab-tog.on { opacity:1;color:#1D9E75; }
.vocab-na { color:var(--ink-soft);opacity:0.5;font-size:0.9rem;line-height:1; }
.vocab-act { background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:0.8rem;padding:0.2rem 0.35rem;border-radius:6px;line-height:1; }
.vocab-act:hover { color:#c0392b;background:var(--canvas-warm); }
.vocab-add { margin-top:0.85rem;display:flex;gap:0.5rem;align-items:center; }
.set-tabs { display:flex;gap:0.15rem;border-bottom:1px solid var(--border);flex-wrap:wrap;padding:0.85rem 1.5rem 0; }
.set-tabpanel { display:none; }
/* v1.91.0: the On call tab */
.oc-now { font-size:0.86rem;color:var(--ink);background:var(--canvas);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.8rem;line-height:1.45; }
.oc-now b { font-weight:700; }
.oc-switch { display:inline-flex;align-items:center;gap:0.55rem;cursor:pointer;background:none;border:1px solid var(--border);border-radius:999px;padding:0.3rem 0.8rem 0.3rem 0.35rem;font-family:'DM Sans',sans-serif;font-size:0.82rem;color:var(--ink); }
.oc-switch[disabled] { cursor:default;opacity:0.75; }
.oc-knob { width:30px;height:18px;border-radius:999px;background:var(--border);position:relative;transition:background 0.15s;flex:none; }
.oc-knob::after { content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:white;transition:left 0.15s; }
.oc-switch.on .oc-knob { background:var(--green); }
.oc-switch.on .oc-knob::after { left:14px; }
.oc-days { display:flex;flex-direction:column;gap:0.35rem;margin-bottom:0.8rem; }
.oc-day { display:grid;grid-template-columns:7.5rem 1fr 1fr;gap:0.6rem;align-items:center; }
.oc-day label { display:flex;align-items:center;gap:0.45rem;font-size:0.82rem;color:var(--ink);cursor:pointer; }
.oc-day .fld-input { padding:0.4rem 0.6rem;font-size:0.82rem; }
.oc-day.off .fld-input { opacity:0.4; }
.oc-ro { font-size:0.82rem;color:var(--ink);padding:0.15rem 0; }
.oc-week { display:grid;grid-template-columns:9.5rem 1fr;gap:0.6rem;align-items:center;padding:0.35rem 0;border-bottom:1px solid var(--border); }
.oc-week:last-child { border-bottom:none; }
.oc-wlabel { font-size:0.82rem;color:var(--ink); }
.oc-wlabel small { display:block;font-size:0.68rem;color:var(--ink-soft); }
.oc-week .fld-input { padding:0.4rem 0.6rem;font-size:0.82rem; }
.oc-warn { font-size:0.72rem;color:#cc7a00;margin-top:0.2rem; }
.oc-add { display:grid;grid-template-columns:10rem 1fr auto;gap:0.5rem;align-items:center;margin-top:0.6rem; }
.oc-add .fld-input { padding:0.4rem 0.6rem;font-size:0.82rem; }
.oc-err { font-size:0.76rem;color:#cc4400;min-height:1em;margin-top:0.35rem; }
/* v1.92.0: Slack and the page log */
.oc-slack { display:grid;grid-template-columns:1fr 12rem auto;gap:0.5rem;align-items:center; }
.oc-slack .fld-input { padding:0.4rem 0.6rem;font-size:0.82rem; }
.oc-page { display:grid;grid-template-columns:7.5rem 1fr auto;gap:0.6rem;align-items:center;padding:0.4rem 0;border-bottom:1px solid var(--border);font-size:0.8rem;color:var(--ink); }
.oc-page:last-child { border-bottom:none; }
.oc-page small { display:block;font-size:0.68rem;color:var(--ink-soft); }
.oc-tag { display:inline-block;font-size:0.68rem;padding:0.08rem 0.45rem;border-radius:999px;border:1px solid var(--border);color:var(--ink-soft);margin-left:0.25rem;white-space:nowrap; }
.oc-tag.good { color:var(--green);border-color:var(--green); }
.oc-tag.warn { color:#cc7a00;border-color:#cc7a00; }
.oc-sub { font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);margin:1.1rem 0 0.45rem; }
.oc-row { display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.2rem; }
.oc-row .fld-input { padding:0.4rem 0.6rem;font-size:0.82rem;width:auto; }
.oc-row .oc-grow { flex:1 1 12rem;min-width:0; }
.oc-inline { display:inline-flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--ink-soft); }
.hh-slack { display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center; }
.hh-slack .fld-input { width:auto;flex:1 1 12rem;min-width:0; }
@media (max-width: 640px) { .oc-slack { grid-template-columns:1fr; } .oc-page { grid-template-columns:1fr; } }
@media (max-width: 640px) {
  .oc-day { grid-template-columns:6rem 1fr 1fr; }
  .oc-week { grid-template-columns:1fr; gap:0.3rem; }
  .oc-add { grid-template-columns:1fr; }
}
.set-tabpanel.active { display:block; }
.set-tabpanel .set-section:first-child { padding-top:1.4rem; }
.hh-toolbar { display:flex;align-items:center;gap:0.75rem;padding:0.8rem 1rem;border-bottom:1px solid var(--border); }
.hh-search { flex:1;min-width:0;background:var(--canvas);border:1px solid var(--border);color:var(--ink);padding:0.5rem 0.8rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.85rem;outline:none;transition:border-color 0.15s; }
.hh-search:focus { border-color:var(--brand); }
.hh-add-btn { background:var(--brand);color:white;border:none;padding:0.52rem 0.95rem;border-radius:8px;font-size:0.82rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:background 0.15s; }
.hh-add-btn:hover { background:var(--brand-dark); }
.hh-list { display:flex;flex-direction:column; }
.hh-row { display:flex;align-items:center;gap:0.7rem;padding:0.7rem 1rem;border-bottom:1px solid var(--border); }
.hh-row:last-child { border-bottom:none; }
.hh-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.hh-main { min-width:0;flex:1; }
.hh-name { font-size:0.88rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.hh-sub { font-size:0.76rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }
.hh-empty { padding:3rem 1.5rem;text-align:center;color:var(--ink-soft);font-size:0.875rem;line-height:1.8; }
.hh-project { display:inline-block;font-size:0.66rem;font-weight:600;color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border);border-radius:100px;padding:1px 8px;margin-left:0.45rem;vertical-align:middle; }
.hh-label-preview { font-size:0.8rem;color:var(--brand-dark);background:var(--brand-light);border-radius:8px;padding:0.5rem 0.75rem;margin-bottom:0.5rem;font-weight:600; }
.hh-row.clickable { cursor:pointer;transition:background 0.12s; }
.hh-row.clickable:hover { background:var(--canvas-warm); }
.hh-chev { color:var(--ink-soft);font-size:0.9rem;flex-shrink:0;padding-left:0.25rem; }
.hh-section-head { font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft);padding:0.7rem 1rem 0.35rem; }
.hh-show-removed { font-size:0.76rem;color:var(--brand-dark);cursor:pointer;padding:0.6rem 1rem;display:inline-block; }
.hh-show-removed:hover { text-decoration:underline; }
.hh-row.removed .hh-name, .hh-row.removed .hh-sub { opacity:0.55; }
/* detail panel */
.hd-head { display:flex;align-items:flex-start;gap:0.7rem;padding:0.85rem 1rem;border-bottom:1px solid var(--border); }
.hd-head-main { flex:1;min-width:0; }
.hd-title-row { display:flex;align-items:center;gap:0.55rem;min-width:0; }
.hd-title-row .hd-title { flex:0 1 auto; }
.hd-pencil { background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:0.85rem;padding:0 0.1rem; }
.hd-pencil:hover { color:var(--brand,#1D9E75); }
.hd-head .hh-sub { margin-top:0.15rem; }
.hd-head-edit { margin-top:0.5rem;display:flex;flex-direction:column;gap:0.45rem;max-width:480px; }
.hd-head-edit-row { display:flex;align-items:center;gap:0.5rem; }
.hd-head-edit-row .btn-primary, .hd-head-edit-row .btn-ghost { padding:0.4rem 0.9rem;font-size:0.8rem; }
.hd-back { background:none;border:1px solid var(--border);color:var(--ink-mid);border-radius:8px;padding:0.4rem 0.7rem;font-size:0.8rem;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap; }
.hd-back:hover { background:var(--canvas-warm); }
.hd-title { font-size:1rem;font-weight:700;color:var(--ink);min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.hd-removed-tag { font-size:0.66rem;font-weight:700;color:#9a6a00;background:#fdf0d8;border:1px solid #f0d9a8;border-radius:100px;padding:1px 9px; }
.hd-body { padding:1rem;max-height:calc(100vh - 220px);overflow-y:auto; }
.hd-block { margin-bottom:1.4rem; }
.hd-tabs { display:flex;gap:0.15rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem;flex-wrap:wrap;position:sticky;top:-1rem;background:var(--white);z-index:5;padding-top:0.25rem; }
.hd-tab { background:none;border:none;padding:0.55rem 0.95rem;cursor:pointer;color:var(--ink-soft);font-weight:600;font-size:0.85rem;border-bottom:2px solid transparent;margin-bottom:-1px; }
.hd-tab:hover { color:var(--ink); }
.hd-tab.active { color:var(--ink);border-bottom-color:var(--brand,#1D9E75); }
.hd-tabpanel { display:none; }
.hd-tabpanel.active { display:block; }
.hd-chiprow { display:flex;gap:0.4rem;margin-bottom:0.8rem;flex-wrap:wrap; }
.hd-chip { background:var(--canvas-warm);border:1px solid var(--border);color:var(--ink-soft);border-radius:100px;padding:0.25rem 0.75rem;font-size:0.76rem;font-weight:600;cursor:pointer; }
.hd-chip.on { background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark); }
.cv-tabs { position:static;margin-bottom:0.8rem;padding-top:0; }
.cv-tabs .hd-tab { padding:0.4rem 0.6rem;font-size:0.78rem; }
.photo-thumb { position:relative; }
.photo-del { position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.55);color:#fff;border:none;border-radius:6px;width:24px;height:24px;font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s; }
.photo-thumb:hover .photo-del { opacity:1; }
.photo-del:hover { background:#cc4400; }
.hd-block-title { font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--green);margin-bottom:0.6rem;display:flex;align-items:center;justify-content:space-between; }
.hd-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.7rem; }
.hd-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem 0.7rem; }
@media (max-width:900px){ .hd-grid-4 { grid-template-columns:1fr 1fr; } }
.sys-types .hd-input { border-radius:6px;background:var(--canvas-warm);border:1px solid var(--border);padding:0.4rem 0.7rem; }
.sys-types .hd-input:focus { border-color:var(--green); }
.sys-types label { color:var(--ink-soft); }
.eq-divider { height:1px;background:var(--border);margin:1.2rem 0 1.25rem; }
.eq-sticky { position:sticky;top:1.4rem;z-index:4;background:var(--white);padding:0.45rem 0 0.55rem;box-shadow:0 8px 8px -8px rgba(0,0,0,0.45); }
.eq-room-pencil { color:var(--ink-soft);font-size:0.78rem;cursor:pointer;padding:0 0.35rem;opacity:0;transition:opacity 0.12s,color 0.12s; }
.eq-rhead:hover .eq-room-pencil { opacity:0.65; }
.eq-room-pencil:hover { opacity:1;color:var(--green); }
.hd-tab[draggable] { cursor:grab; }
.hd-tab.dragging { opacity:0.5; }

/* ── Equipment section (layout A: collapsible room rows over the parsed sales order) ── */
.eq-head { display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-bottom:0.55rem; }
.eq-head .hd-block-title { margin:0; }
.eq-spacer { flex:1; }
.eq-btn { font-family:inherit;font-size:0.74rem;font-weight:600;color:var(--ink-mid);background:var(--canvas-warm);
  border:1px solid var(--border);border-radius:7px;padding:0.32rem 0.6rem;cursor:pointer; }
.eq-btn:hover { color:var(--ink); }
.eq-lens { display:inline-flex;background:var(--canvas-warm);border:1px solid var(--border);border-radius:8px;padding:2px; }
.eq-lens button { font-family:inherit;font-size:0.72rem;font-weight:600;color:var(--ink-soft);background:none;border:none;border-radius:6px;padding:0.28rem 0.6rem;cursor:pointer; }
.eq-lens button.on { background:var(--white);color:var(--green);box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.eq-systems { display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.7rem; }
.eq-sys { background:var(--canvas-warm);border:1px solid var(--border);border-radius:20px;padding:0.25rem 0.6rem;font-size:0.72rem;color:var(--ink-mid);display:flex;gap:0.35rem;align-items:center; }
.eq-sys b { color:var(--ink);font-weight:600; }
.eq-sys .d { width:6px;height:6px;border-radius:50%;background:var(--green); }
.eq-chip { display:inline-flex;align-items:center;gap:0.25rem;font-size:0.7rem;font-weight:600;padding:0.14rem 0.45rem;border-radius:6px; }
.eq-chip.tv { color:#7fb5e8;background:rgba(45,125,210,0.13); }
.eq-chip.au { color:#5fd3aa;background:rgba(29,158,117,0.14); }
.eq-chip.sh { color:#caa6f0;background:rgba(124,58,237,0.16); }
.eq-chip.li { color:#e6c15a;background:rgba(212,160,40,0.15); }
.eq-chip.co { color:#9db4d8;background:rgba(90,120,180,0.16); }
.eq-chip.se { color:#e8998a;background:rgba(204,68,0,0.15); }
.eq-chip.ca { color:#6fc7bf;background:rgba(40,160,150,0.15); }
.eq-chip.nw { color:#cdb98a;background:rgba(150,120,60,0.16); }
.eq-fbar { display:flex;flex-wrap:wrap;gap:0.35rem;margin:0 0 0.8rem; }
.eq-fchip { font-size:0.7rem;font-weight:600;padding:0.16rem 0.55rem;border-radius:999px;border:1px solid var(--border);color:var(--ink-soft);cursor:pointer;user-select:none; }
.eq-fchip:hover { border-color:var(--ink-soft);color:var(--ink); }
.eq-fchip.on { background:var(--ink);color:var(--white);border-color:var(--ink); }
.eq-chip .n { font-weight:700;opacity:0.75; }
.eq-gapdot { width:7px;height:7px;border-radius:50%;background:var(--amber,#d99a2b);display:inline-block;margin-left:0.3rem; }
.eq-room { border:1px solid #3f3f3a;border-radius:9px;background:var(--white);margin-bottom:0.5rem; }
.eq-rhead { display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.75rem;cursor:pointer;user-select:none; }
.eq-car { color:var(--ink-soft);font-size:0.75rem;transition:transform 0.15s; }
.eq-room.open .eq-car { transform:rotate(90deg); }
.eq-rname { font-weight:600;font-size:0.85rem;flex:0 0 auto;min-width:185px; }
.eq-chips { display:flex;gap:0.3rem;flex:0 1 auto;flex-wrap:wrap; }
.eq-building { font-size:0.82rem;font-weight:700;color:var(--ink);margin:1.1rem 0 0.55rem;padding-bottom:0.3rem;border-bottom:1px solid var(--border);letter-spacing:0.01em; }
.eq-building.unassigned { color:var(--ink-soft);font-weight:600; }
.eq-level { font-size:0.66rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin:0.7rem 0 0.35rem 0.15rem; }
.eq-tools { display:flex;gap:0.5rem;margin:0.3rem 0 0.7rem; }
.eq-tool { background:none;border:1px dashed var(--border);border-radius:7px;color:var(--ink-soft);font-size:0.74rem;padding:0.3rem 0.6rem;cursor:pointer; }
.eq-tool:hover { color:var(--ink);border-color:var(--ink-soft); }
.eq-building { display:flex;align-items:center; }
.eq-bld-tools { margin-left:auto;display:flex;gap:0.5rem;opacity:0;transition:opacity 0.12s; }
.eq-building:hover .eq-bld-tools { opacity:0.6; }
.eq-bld-tools span { cursor:pointer;font-size:0.78rem; }
.eq-bld-tools span:hover { opacity:1;color:var(--ink); }
.eq-tool-match { border-style:solid;border-color:var(--green);color:var(--green); }
.eq-tool-match:hover { background:var(--green-bg);color:#0f6e50;border-color:var(--green); }
.eq-match-modal { max-width:440px; }
.eq-match-sub { color:var(--ink-soft);font-size:0.76rem;margin-bottom:0.8rem;line-height:1.4; }
.eq-match-card { border:1px solid var(--border);border-radius:9px;padding:0.7rem 0.8rem;margin-bottom:0.6rem;background:var(--canvas-warm); }
.eq-match-pair { display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap; }
.eq-keep { display:flex;align-items:center;gap:0.4rem;font-size:0.86rem;cursor:pointer; }
.eq-keep input { cursor:pointer; }
.eq-match-plus { color:var(--ink-soft);font-weight:700; }
.eq-match-reason { display:flex;align-items:center;gap:0.45rem;color:var(--ink-soft);font-size:0.74rem;margin:0.45rem 0 0.6rem; }
.eq-match-basis { font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--border);border-radius:5px;padding:0.05rem 0.3rem; }
.eq-match-basis.num { color:var(--green);border-color:var(--green); }
.eq-match-actions { display:flex;gap:0.5rem; }
.eq-match-hint { color:var(--ink-soft);font-size:0.72rem;margin-top:0.2rem;line-height:1.4; }
.eq-body { display:none;padding:0.1rem 0.75rem 0.65rem;border-top:1px solid var(--border); }
.eq-room.open .eq-body { display:block; }
.eq-grp { font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;margin:0.6rem 0 0.3rem; }
.eq-grp.v { color:#6fa8dc; } .eq-grp.a { color:var(--green); } .eq-grp.s { color:#a98fd6; } .eq-grp.o { color:var(--ink-soft); }
.eq-grp.src { color:#d9a0d0; } .eq-grp.co { color:#9db4d8; } .eq-grp.nw { color:#cdb98a; } .eq-grp.se { color:#e8998a; } .eq-grp.ca { color:#6fc7bf; } .eq-grp.lc { color:#e6c15a; } .eq-grp.lf { color:#f0d58a; }
.eq-dev { display:flex;gap:0.5rem;align-items:baseline;padding:0.18rem 0;font-size:0.8rem;cursor:pointer;border-radius:5px; }
.eq-dev:hover { background:var(--canvas-warm); }
.eq-dev .q { color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:1.5rem; }
.eq-dev .nm { font-weight:600; }
.eq-dev .md { color:var(--ink-soft);font-size:0.72rem;font-family:ui-monospace,monospace; }
.eq-dev .ty { color:var(--ink-mid);font-size:0.7rem;background:var(--canvas-warm);border:1px solid var(--border);border-radius:5px;padding:0.02rem 0.38rem; }
.eq-dev .pos { color:var(--amber,#d99a2b);font-size:0.7rem;font-weight:600; }
.eq-acc { margin-left:2rem;color:var(--ink-soft);font-size:0.72rem;padding:0.05rem 0; }
.eq-nonq { color:var(--ink-soft);font-size:0.73rem;padding:0.1rem 0; }
.eq-nonq .tag { display:inline-block;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);border:1px solid var(--border);border-radius:4px;padding:0 0.28rem;margin-right:0.35rem; }
.eq-client { background:var(--canvas-warm);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;font-size:0.82rem;color:var(--ink-mid); }
.eq-client b { color:var(--ink); }
.eq-empty { background:var(--canvas-warm);border:1px dashed var(--border);border-radius:9px;padding:1rem;text-align:center;color:var(--ink-soft);font-size:0.82rem; }
.eq-busy { color:var(--ink-soft);font-size:0.78rem;font-style:italic;padding:0.4rem 0; }
.eq-modal-bg { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:120;display:none;align-items:center;justify-content:center; }
.eq-modal-bg.show { display:flex; }
.eq-modal { background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem;width:min(420px,92vw);max-height:88vh;overflow:auto; }
.eq-modal h3 { font-size:0.95rem;font-weight:700;margin-bottom:0.7rem; }
.eq-modal label { display:block;font-size:0.68rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;margin:0.55rem 0 0.2rem; }
.eq-modal input, .eq-modal select { width:100%;font-family:inherit;font-size:0.85rem;background:var(--canvas);color:var(--ink);border:1px solid var(--border);border-radius:7px;padding:0.45rem 0.55rem;box-sizing:border-box; }
.eq-modal-actions { display:flex;gap:0.5rem;margin-top:1rem;align-items:center; }
.eq-modal .save { background:var(--green);color:#fff;border:none;border-radius:8px;padding:0.5rem 0.9rem;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer; }
.eq-modal .cancel { background:none;border:1px solid var(--border);color:var(--ink-mid);border-radius:8px;padding:0.5rem 0.9rem;font-family:inherit;font-size:0.82rem;cursor:pointer; }
.eq-modal .del { color:var(--red);background:none;border:none;font-size:0.76rem;cursor:pointer;margin-left:auto; }
.hd-fld { display:flex;flex-direction:column; }
.hd-fld.full { grid-column:1 / -1; }
.hd-fld label { font-size:0.72rem;color:var(--ink-soft);margin-bottom:0.25rem; }
.hd-input { background:var(--canvas);border:1px solid var(--border);color:var(--ink);padding:0.5rem 0.65rem;border-radius:8px;font-size:0.85rem;font-family:'DM Sans',sans-serif;outline:none;transition:border-color 0.15s; }
.hd-input:focus { border-color:var(--brand); }
textarea.hd-input { resize:vertical;min-height:70px;line-height:1.5; }
.hd-toggle-row { display:flex;align-items:center;gap:0.55rem;font-size:0.85rem;color:var(--ink);margin-top:0.2rem; }
.hd-save-bar { display:flex;align-items:center;gap:0.75rem;padding-top:0.4rem; }
.hd-save { background:var(--brand);color:white;border:none;padding:0.55rem 1.1rem;border-radius:8px;font-size:0.84rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif; }
.hd-save:hover { background:var(--brand-dark); }
.hd-save:disabled { opacity:0.6;cursor:default; }
.hd-saved-note { font-size:0.8rem;color:var(--brand-dark);font-weight:600;opacity:0;transition:opacity 0.2s; }
.hd-saved-note.show { opacity:1; }
.hd-err { font-size:0.8rem;color:#c0392b;font-weight:600; }
.hd-person { display:flex;align-items:center;gap:0.7rem;padding:0.6rem 0;border-bottom:1px solid var(--border); }
.hd-person:last-of-type { border-bottom:none; }
.hd-person.removed { opacity:0.6; }
.hd-person-main { min-width:0;flex:1; }
.hd-person-name { font-size:0.88rem;font-weight:600;color:var(--ink); }
.hd-person-sub { font-size:0.76rem;color:var(--ink-soft);margin-top:1px; }
.hd-person-rel { font-size:0.66rem;font-weight:600;color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border);border-radius:100px;padding:1px 8px;margin-left:0.4rem; }
.hd-person-type { font-size:0.66rem;font-weight:600;color:#157a5b;background:rgba(29,158,117,0.10);border:1px solid rgba(29,158,117,0.30);border-radius:100px;padding:1px 8px;margin-left:0.4rem; }
.hd-person-actions { display:flex;gap:0.4rem;flex-shrink:0; }
/* v1.63.0 home hero + sections. Volume leads; the rate supports it. */
.hero-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.6rem 1.8rem; margin-bottom:1.4rem; }
.hero-main { display:flex; flex-wrap:wrap; gap:2.8rem; align-items:flex-end; }
.hero-figure { min-width:150px; }
.hero-num { font-size:3rem; font-weight:700; line-height:1.05; letter-spacing:-0.02em; }
.hero-num.g { color:var(--green); }
.hero-cap { font-size:0.78rem; color:var(--ink-soft); margin-top:0.3rem; }
.hero-rate { margin-left:auto; text-align:right; }
.hero-foot { display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; margin-top:1.4rem; padding-top:0.9rem; border-top:1px solid var(--border); font-size:0.76rem; color:var(--ink-soft); }
.hero-trend b { color:var(--ink); font-weight:600; margin-left:0.25rem; }
.hs-note { font-size:0.68rem; color:var(--ink-soft); opacity:0.75; margin-top:0.12rem; }
.sec-head { display:flex; align-items:center; gap:0.9rem; margin:1.6rem 0 0.7rem; }
.sec-title { font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); }
.sec-scope { display:flex; gap:0.3rem; margin-left:auto; }
.scope-btn { background:transparent; border:1px solid var(--border); color:var(--ink-soft); border-radius:6px; padding:0.25rem 0.7rem; font-size:0.74rem; cursor:pointer; font-family:inherit; }
.scope-btn.active { background:var(--green); border-color:var(--green); color:#fff; }
.scope-btn:disabled { opacity:0.4; cursor:not-allowed; }
@media (max-width:768px) {
  .hero-main { gap:1.4rem; }
  .hero-num { font-size:2.2rem; }
  .hero-rate { margin-left:0; text-align:left; }
}
.hd-person-email { margin-top:0.12rem; }
.hd-person-email a { font-size:0.74rem; }
.cv-person-email { margin-top:0.1rem; }
.cv-person-email a { font-size:0.74rem;word-break:break-all; }
.hd-person-pills { display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;max-width:240px; }
.hd-person-pills > span { margin-left:0; }
.hd-tel { color:var(--ink-mid);text-decoration:none;border-bottom:1px dotted var(--border); }
.hd-tel:hover { color:var(--brand);border-bottom-color:var(--brand); }
.hd-copy { background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:0.8rem;padding:0 0.3rem;line-height:1; }
.hd-copy:hover { color:var(--ink); }
.hd-mini[disabled] { opacity:0.4;cursor:default; }
.optin-badge { font-size:0.62rem;font-weight:600;border-radius:100px;padding:1px 7px;margin-left:0.45rem;vertical-align:middle; }
.optin-badge.ok { color:#0f6e50;background:var(--green-bg);border:1px solid var(--green); }
.optin-badge.wait { color:#b45309;background:#fef3e2;border:1px solid #f0c98a; }
.optin-badge.off { color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border); }
.optin-badge.none { color:var(--ink-soft);background:var(--canvas-warm);border:1px solid var(--border); }
.hh-counts { display:flex;gap:1rem;align-items:flex-start;flex-shrink:0;margin-right:1.5rem; }
.hh-count-col { display:flex;flex-direction:column;align-items:center;gap:0.25rem; }
.hh-count-label { font-size:0.58rem;font-weight:700;color:var(--ink-soft);text-decoration:underline;text-transform:uppercase;letter-spacing:0.03em; }
.hh-count { min-width:20px;height:20px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;padding:0 6px; }
.hh-count.tickets { color:#fff;background:var(--red,#c0392b); }
.hh-count.scheduled { color:#fff;background:#7c3aed; }
.hh-count.followups { color:#fff;background:var(--blue,#2D7DD2); }
.hd-mini { background:none;border:1px solid var(--border);color:var(--ink-mid);border-radius:7px;padding:0.32rem 0.6rem;font-size:0.76rem;cursor:pointer;font-family:'DM Sans',sans-serif; }
.hd-mini:hover { background:var(--canvas-warm); }
.hd-mini.danger { color:#c0392b;border-color:#e6b3ab; }
.hd-mini.danger:hover { background:#fbeae7; }
.hd-add-person { background:none;border:1px dashed var(--border);color:var(--brand-dark);border-radius:8px;padding:0.5rem;font-size:0.8rem;font-weight:600;cursor:pointer;width:100%;margin-top:0.6rem;font-family:'DM Sans',sans-serif; }
.hd-add-person:hover { background:var(--brand-light); }
.hd-photo-add { display:inline-flex;align-items:center;gap:0.4rem;background:none;border:1px dashed var(--border);color:var(--brand-dark);border-radius:8px;padding:0.5rem 0.8rem;font-size:0.8rem;font-weight:600;cursor:pointer;margin-top:0.6rem;font-family:'DM Sans',sans-serif; }
.hd-photo-add:hover { background:var(--brand-light); }
.hd-danger-zone { border:1px solid #e6b3ab;background:#fdf3f1;border-radius:9px;padding:0.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem; }
.hd-danger-zone .dz-text { font-size:0.78rem;color:var(--ink-mid);line-height:1.5; }
.hd-danger-btn { background:#c0392b;color:white;border:none;padding:0.5rem 0.95rem;border-radius:8px;font-size:0.8rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif; }
.hd-danger-btn:hover { background:#a93226; }
.hd-restore-btn { background:var(--brand);color:white;border:none;padding:0.5rem 0.95rem;border-radius:8px;font-size:0.8rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif; }
.res-card { background:var(--white);border:1px solid var(--border);border-radius:10px;padding:0.9rem 1rem;margin-bottom:0.75rem;cursor:pointer;transition:box-shadow 0.15s,transform 0.12s; }
.res-card:last-child { margin-bottom:0; }
.res-card:hover { box-shadow:0 3px 12px rgba(0,0,0,0.07);transform:translateY(-1px); }
.res-top { display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;margin-bottom:0.5rem; }
.res-name { font-size:0.9rem;font-weight:600;color:var(--ink); }
.res-time { font-size:0.72rem;color:var(--ink-soft);flex-shrink:0; }
.res-row { font-size:0.82rem;color:var(--ink-mid);margin-bottom:4px;line-height:1.55; }
.res-row strong { color:var(--ink);font-weight:600; }
.res-mindset { font-size:0.78rem;color:var(--ink-soft);font-style:italic;margin-top:5px; }
.cr-modes { display:flex;gap:0.4rem;margin-bottom:0.9rem; }
.cr-mode { flex:1;background:var(--canvas);border:1px solid var(--border);color:var(--ink-mid);border-radius:8px;padding:0.5rem;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif; }
.cr-mode.sel { background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark); }
.cr-newlink { font-size:0.76rem;color:var(--brand-dark);cursor:pointer;margin-top:0.4rem;display:inline-block; }
.cr-newlink:hover { text-decoration:underline; }
#cr-results { display:flex;flex-direction:column;max-height:170px;overflow-y:auto; }
.cr-result { padding:0.5rem 0.65rem;border:1px solid var(--border);border-top:none;cursor:pointer;font-size:0.82rem; }
.cr-result:first-child { border-top:1px solid var(--border);border-radius:8px 8px 0 0; }
.cr-result:last-child { border-radius:0 0 8px 8px; }
.cr-result:hover { background:var(--canvas-warm); }
.cr-result .cr-r-sub { font-size:0.72rem;color:var(--ink-soft); }
.cr-draft-note { font-size:0.74rem;color:var(--ink-soft);font-style:italic;margin-top:0.3rem; }
.list-toolbar { display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding:0.7rem 1.25rem;border-bottom:1px solid var(--border); }
.seg-group { display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden; }
.seg { background:var(--white);border:none;border-right:1px solid var(--border);color:var(--ink-soft);font-size:0.76rem;font-weight:600;padding:0.35rem 0.7rem;cursor:pointer;font-family:'DM Sans',sans-serif; }
.seg:last-child { border-right:none; }
.seg.on { background:var(--brand-light);color:var(--brand-dark); }
.toolbar-toggles { display:flex;align-items:center;gap:0.9rem; }
.tg { display:inline-flex;align-items:center;gap:0.35rem;font-size:0.76rem;color:var(--ink-mid);cursor:pointer;user-select:none; }
.group-head { padding:0.55rem 1.25rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);background:var(--canvas-warm);border-bottom:1px solid var(--border); }
.group-head.gh-open { background:#f7dede;color:#7a1f1f;border-bottom-color:#e7b9b9; }
.group-head.gh-scheduled { background:#e8defa;color:#492c79;border-bottom-color:#d0bff0; }
.group-count { color:inherit;opacity:0.65;font-weight:600;margin-left:0.3rem; }
/* Ticket detail mirrors the conversation view (chat center, info rail right). The amber accent
   on the rail makes a ticket read differently from a conversation at a glance. */
.ticket-rail { border-color:#e3b778; }
.ticket-rail-header { background:#fef3e2;color:#b45309;border-bottom-color:#e3b778; }
.ticket-rail .eq-section-title { color:#b45309; }
.ticket-rail .status-select { display:flex;flex-wrap:wrap;gap:0.4rem; }
body.dark .ticket-rail { border-color:#5a4a2a; }
body.dark .ticket-rail-header { background:#2a2310;color:#e0a955;border-bottom-color:#5a4a2a; }
body.dark .ticket-rail .eq-section-title { color:#e0a955; }
.team-list { display:flex;flex-direction:column;margin-top:0.5rem; }
.team-row { display:flex;align-items:center;gap:0.65rem;padding:0.6rem 0;border-bottom:1px solid var(--border); }
.team-row:last-child { border-bottom:none; }
.team-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0; }
.team-main { flex:1;min-width:0; }
.team-name { font-size:0.85rem;font-weight:600;color:var(--ink); }
.team-email { font-size:0.75rem;color:var(--ink-soft);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.team-you { font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);background:var(--canvas-warm);border-radius:100px;padding:1px 6px;margin-left:0.2rem; }
.team-pill { font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border-radius:100px;padding:1px 7px;margin-left:0.3rem; }
.team-pill.pending { background:rgba(224,134,0,0.14);color:#b36b00; }
.team-pill.off { background:var(--canvas-warm);color:var(--ink-soft); }
.team-actions { display:flex;gap:0.4rem;flex-shrink:0; }
.team-action { background:none;border:1px solid var(--border);color:var(--ink-mid);font-family:'DM Sans',sans-serif;font-size:0.74rem;padding:0.28rem 0.6rem;border-radius:6px;cursor:pointer; }
.team-action:hover { background:var(--canvas-warm); }
.team-action.danger { color:var(--red);border-color:var(--red-bg); }
.us-ok { font-size:0.78rem;color:var(--green); }
select.fld-input { appearance:auto;cursor:pointer; }
.me-palette { display:flex;gap:0.45rem;flex-wrap:wrap; }
.me-swatch { width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 0.12s;position:relative; }
.me-swatch.sel { border-color:var(--ink); }
.me-swatch.taken { opacity:0.28;cursor:not-allowed; }
.team-row { cursor:pointer;border-radius:8px;transition:background 0.12s; }
.team-row:hover { background:var(--canvas-warm); }
.team-toggle { font-size:0.76rem;color:var(--brand);cursor:pointer;font-weight:500;margin-top:0.6rem;display:inline-block; }
.team-toggle:hover { text-decoration:underline; }
/* v1.45.0 summary column header + Also send to (outside addresses) */
.team-head { display:flex;justify-content:flex-end;align-items:center;padding:0 0.4rem 0.4rem;margin-top:0.5rem; }
.team-head-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--ink-soft);padding-right:1.15rem; }
.team-outside-label { font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin:1rem 0 0.2rem; }
.team-outnote { font-size:0.76rem;color:var(--ink-soft);font-style:italic;padding:0.2rem 0 0.1rem;line-height:1.4; }
.team-outrow { display:flex;align-items:center;gap:0.65rem;padding:0.55rem 0.4rem;border-bottom:1px solid var(--border); }
.team-outrow:last-child { border-bottom:none; }
.team-outaddr { flex:1;min-width:0;font-size:0.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.team-outmail { font-size:0.95rem;color:#1D9E75;line-height:1;flex-shrink:0; }
.team-outx { color:var(--ink-soft);cursor:pointer;font-size:0.85rem;padding:0.1rem 0.35rem;border-radius:6px;line-height:1;flex-shrink:0; }
.team-outx:hover { background:var(--canvas-warm);color:#c0392b; }
.team-addlink { font-size:0.76rem;color:var(--brand);cursor:pointer;font-weight:500;margin-top:0.6rem;display:inline-block; }
.team-addlink:hover { text-decoration:underline; }
.team-addrow { display:flex;gap:0.5rem;align-items:center;margin-top:0.6rem; }
.acct-id-row { display:flex;align-items:center;gap:0.6rem;background:var(--canvas);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.8rem; }
.id-strip { display:flex;gap:1.5rem;flex-wrap:wrap;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--canvas-warm); }
.id-cell { display:flex;flex-direction:column;gap:0.3rem;min-width:150px; }
.id-cell-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft); }
.id-cell-row { display:flex;align-items:center;gap:0.5rem; }
.id-cell-val { font-size:0.95rem;font-weight:600;color:var(--ink);letter-spacing:0.02em; }
.id-cell-empty { font-size:0.9rem;color:var(--ink-soft);font-style:italic; }
.id-cell-copy { font-size:0.7rem;color:var(--brand);cursor:pointer;font-weight:500;border:1px solid var(--border);border-radius:6px;padding:0.14rem 0.55rem;background:var(--white);font-family:inherit; }
.id-cell-copy:hover { background:var(--brand);color:white;border-color:var(--brand); }
.acct-id-val { font-size:0.9rem;font-weight:600;color:var(--ink);letter-spacing:0.04em;font-family:'DM Sans',monospace; }
.acct-id-copy { margin-left:auto;font-size:0.74rem;color:var(--brand);cursor:pointer;font-weight:500;border:1px solid var(--brand);border-radius:6px;padding:0.2rem 0.6rem;background:none;font-family:inherit; }
.acct-id-copy:hover { background:var(--brand);color:white; }
.us-color-row { display:flex;align-items:center;gap:0.6rem; }
.us-color-dot { width:22px;height:22px;border-radius:50%;flex-shrink:0; }
/* ============================================================
   PWA Slice A — mobile layer (v1.32.0). Everything below is gated
   to phone width; the desktop layout above is untouched.
   ============================================================ */
.m-hamburger { display:none; }
.m-scrim { display:none; }

@media (max-width: 768px) {
  .m-hamburger {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-left:-0.35rem; margin-right:0.1rem;
    background:none; border:none; color:var(--ink); font-size:1.35rem;
    line-height:1; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent;
  }
  /* off-canvas drawer */
  .sidebar {
    transform:translateX(-100%);
    transition:transform 0.22s ease;
    width:min(82vw, 300px);
    box-shadow:0 0 40px rgba(0,0,0,0.45);
  }
  body.m-nav-open .sidebar { transform:translateX(0); }
  .main { margin-left:0; }

  /* shared scrim for the drawer and the rail sheet */
  .m-scrim {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45);
    opacity:0; pointer-events:none; transition:opacity 0.2s; z-index:45;
  }
  body.m-nav-open .m-scrim { opacity:1; pointer-events:auto; }

  /* hide desktop-only chrome on phone */
  .m-hide { display:none !important; }
  .topbar { padding:0 0.9rem; }
  .content { padding:0.7rem 0.7rem; }

  /* texting-native: drop the topbar while a thread/detail is open */
  body.m-in-detail .topbar { display:none; }
  body.m-in-detail .content { padding:0; }
  body.m-in-detail .acct-banner { display:none !important; }

  /* detail views full screen, Back chevron overlaid left of the name */
  #conv-detail-view, #ticket-detail-view { position:relative; }
  #conv-detail-view > .back-btn, #ticket-detail-view > .back-btn {
    position:absolute; top:0; left:0; height:52px; width:3rem; margin:0; padding:0;
    display:flex; align-items:center; justify-content:center; z-index:8; background:var(--white);
    font-size:0; color:var(--ink); border-bottom:1px solid var(--border);
  }
  #conv-detail-view > .back-btn::before, #ticket-detail-view > .back-btn::before {
    content:"\276E"; font-size:1.2rem; font-weight:400; color:var(--ink);
  }

  .thread-shell { height:100%; gap:0; }
  /* keyboard glue: when a thread is open, lock the page so iOS cannot pan it,
     and pin the thread to the actually-visible area (visual viewport). The
     compose bar then rides the top of the keyboard instead of detaching. */
  body.m-thread { overflow:hidden; }
  body.m-thread #conv-detail-view,
  body.m-thread #ticket-detail-view {
    position:fixed; left:0; right:0; top:var(--m-top, 0px);
    height:var(--m-vh, 100dvh); overflow:hidden;
  }
  body.m-thread #conv-detail-content,
  body.m-thread #ticket-detail-content { height:100%; display:flex; flex-direction:column; }
  .thread-main { border:none; border-radius:0; flex:1; min-height:0; }
  .detail-header {
    height:52px !important; min-height:52px; padding:0 1rem 0 3rem !important;
    align-items:center !important; position:relative; z-index:6; background:var(--white);
    flex:0 0 auto;
  }
  .detail-name {
    font-size:1.02rem; margin-bottom:0; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58vw;
  }
  .detail-name::after { content:"\203A"; color:var(--ink-soft); margin-left:0.35rem; font-weight:400; }
  .sms-thread { padding:0.85rem 0.8rem 4rem; }

  /* compose bar pinned to the bottom of the thread (thread-main is position:relative
     and fills the fixed, keyboard-sized container, so absolute-bottom always docks it
     right above the keyboard; sticky broke once the container went fixed+overflow). */
  .reply-box {
    position:absolute; left:0; right:0; bottom:0; align-items:center;
    padding:0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
    gap:0.5rem; background:var(--white); border-top:1px solid var(--border); z-index:7;
  }
  .reply-textarea { font-size:16px; min-height:40px; max-height:96px; padding:0.55rem 0.8rem; line-height:1.35; } /* 16px keeps iOS from zooming on focus */
  .reply-send, .reply-quick { padding:0.6rem 0.95rem; font-size:0.9rem; }
  /* keyboard up: iOS does not collapse the home-indicator safe area even though the
     keyboard covers it, so drop that bottom padding while the reply box is focused
     (otherwise it reads as a black gap under the compose bar). */
  body.m-kb .reply-box { padding-bottom:0.5rem; }
  .flag-fab { bottom:84px; right:16px; }
  .qm-pop { right:14px; bottom:132px; width:min(300px, 88vw); }

  /* household rail becomes a right slide-in sheet */
  .equipment-panel {
    position:fixed; top:0; right:0; bottom:0;
    width:min(90vw, 380px); margin:0; border-radius:0; border:none;
    transform:translateX(100%); transition:transform 0.24s ease;
    z-index:65; box-shadow:0 0 40px rgba(0,0,0,0.45);
  }
  body.m-rail-open .equipment-panel { transform:translateX(0); }
  .equipment-panel-header { height:52px; }

  /* comfortable tap targets in lists */
  .nav-item { padding:0.7rem 1.2rem; font-size:0.95rem; }
  .conv-card-body { padding:0.55rem 1rem 0.55rem 0.5rem; }
  .household-grid { grid-template-columns:1fr; padding:0.8rem; }
}
</style>
</head>
<body>

<div id="login-screen">
  <div class="login-box">
    <div class="login-brand">
      <div class="login-brand-name"><span class="rw">Rest</span><span class="accent">Werks</span></div>
      <div class="login-powered">Integrator dashboard</div>
    </div>
    <div id="login-note" class="login-note"></div>

    <!-- SIGN IN -->
    <div id="login-form">
      <div>
        <div class="login-label">Email</div>
        <input class="login-input" type="email" id="login-email" placeholder="you@yourcompany.com" autocomplete="username" />
      </div>
      <div style="margin-top:0.9rem;">
        <div class="login-label">Password</div>
        <div class="pw-wrap"><input class="login-input" type="password" id="login-pw" placeholder="••••••••" autocomplete="current-password" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div>
      </div>
      <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.9rem;">
        <input type="checkbox" id="remember-me" style="width:14px;height:14px;accent-color:var(--brand);cursor:pointer;" />
        <label for="remember-me" style="font-size:0.78rem;color:rgba(255,255,255,0.45);cursor:pointer;">Keep me signed in for 30 days</label>
      </div>
      <button class="login-btn" onclick="doLogin()" style="margin-top:1rem;">Sign in</button>
      <div class="login-error" id="login-error"></div>
      <div class="login-toggle"><a onclick="showForgot()">Forgot password?</a></div>
      <div class="login-toggle">New to RestWerks? <a onclick="showSignup()">Create an account</a></div>
    </div>

    <!-- SIGN UP -->
    <div id="signup-form" style="display:none;">
      <div>
        <div class="login-label">Company name</div>
        <input class="login-input" type="text" id="su-company" placeholder="Your company" autocomplete="organization" />
      </div>
      <div style="display:flex;gap:0.6rem;margin-top:0.9rem;">
        <div style="flex:1;min-width:0;">
          <div class="login-label">First name</div>
          <input class="login-input" type="text" id="su-first" placeholder="First" autocomplete="given-name" />
        </div>
        <div style="flex:1;min-width:0;">
          <div class="login-label">Last name</div>
          <input class="login-input" type="text" id="su-last" placeholder="Last" autocomplete="family-name" />
        </div>
      </div>
      <div style="margin-top:0.9rem;">
        <div class="login-label">Email</div>
        <input class="login-input" type="email" id="su-email" placeholder="you@yourcompany.com" autocomplete="email" />
      </div>
      <div style="margin-top:0.9rem;">
        <div class="login-label">Password</div>
        <div class="pw-wrap"><input class="login-input" type="password" id="su-pw" placeholder="Create a password" autocomplete="new-password" oninput="checkPw();checkSuMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div>
        <div class="login-pwhint" id="su-pwhint">At least 10 characters, with an uppercase, lowercase, number, and special character.</div>
        <div class="pw-wrap" style="margin-top:8px;"><input class="login-input" type="password" id="su-pw2" placeholder="Re-enter password" autocomplete="new-password" oninput="checkSuMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div>
        <div class="login-pwhint" id="su-matchhint" style="display:none;">✓ Passwords match</div>
      </div>
      <button class="login-btn" onclick="doSignup()" style="margin-top:1rem;">Create account</button>
      <div class="login-error" id="signup-error"></div>
      <div class="login-toggle">Already have an account? <a onclick="showLogin()">Sign in</a></div>
    </div>

    <!-- FORGOT PASSWORD -->
    <div id="forgot-form" style="display:none;">
      <div>
        <div class="login-label">Email</div>
        <input class="login-input" type="email" id="fp-email" placeholder="you@yourcompany.com" autocomplete="email" />
      </div>
      <button class="login-btn" onclick="submitForgot()" style="margin-top:1rem;">Send reset link</button>
      <div class="login-note" id="fp-note" style="margin-top:0.6rem;"></div>
      <div class="login-toggle"><a onclick="showLogin()">Back to sign in</a></div>
    </div>

    <!-- SET PASSWORD (invite + reset landing) -->
    <div id="setpw-form" style="display:none;">
      <div class="login-label" style="text-align:center;margin-bottom:0.6rem;">Set your password</div>
      <div>
        <div class="login-label">New password</div>
        <div class="pw-wrap"><input class="login-input" type="password" id="sp-pw" placeholder="Create a password" autocomplete="new-password" oninput="checkSpPw();checkSpMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div>
        <div class="login-pwhint" id="sp-pwhint">At least 10 characters, with an uppercase, lowercase, number, and special character.</div>
      </div>
      <div style="margin-top:0.9rem;">
        <div class="login-label">Confirm password</div>
        <div class="pw-wrap"><input class="login-input" type="password" id="sp-pw2" placeholder="Re-enter password" autocomplete="new-password" oninput="checkSpMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div>
        <div class="login-pwhint" id="sp-matchhint" style="display:none;">✓ Passwords match</div>
      </div>
      <button class="login-btn" onclick="submitSetpw()" style="margin-top:1rem;">Set password and sign in</button>
      <div class="login-error" id="sp-error"></div>
    </div>
  </div>
  <div class="login-footer">Powered by <span>RestWerks</span></div>
</div>

<div id="app">
<div class="shell">
  <aside class="sidebar">
    <div class="sidebar-logo">
      <div class="integrator-name" id="sb-name">RestWerks <span class="integrator-accent">AV</span></div>
      <div class="integrator-number" id="sb-number">952-997-0100</div>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-group-label m-hide">Overview</div>
      <div class="nav-item active m-hide" onclick="nav('dashboard',this)"><span class="nav-icon">⊞</span> Dashboard</div>
      <div class="nav-item" onclick="nav('myandi',this)"><span class="nav-icon">✦</span> My Andi</div>
      <div class="nav-group-label" style="margin-top:0.5rem;">Activity</div>
      <div class="nav-item" onclick="nav('conversations',this)"><span class="nav-icon">💬</span> Conversations <span class="nav-badges"><span class="nav-badge green" id="badge-conversations" style="display:none;">0</span></span></div>
      <div class="nav-item" onclick="nav('tickets',this)"><span class="nav-icon">🎫</span> Tickets <span class="nav-badges"><span class="nav-badge" id="badge-tickets" title="Open" style="display:none;">0</span><span class="nav-badge sched" id="badge-tickets-sched" title="Scheduled" style="display:none;">0</span><span class="nav-badge waiting" id="badge-tickets-waiting" title="Waiting" style="display:none;">0</span></span></div>
      <div class="nav-item" onclick="nav('followups',this)"><span class="nav-icon">⚑</span> Follow Ups <span class="nav-badges"><span class="nav-badge blue" id="badge-followups" style="display:none;">0</span></span></div>
      <div class="nav-group-label" style="margin-top:0.5rem;">Clients</div>
      <div class="nav-item" onclick="nav('households',this)"><span class="nav-icon">🏠</span> Households</div>
      <div class="nav-item m-hide" onclick="nav('proactive',this)"><span class="nav-icon">📣</span> Proactive Outreach</div>
      <div class="nav-group-label" style="margin-top:0.5rem;">Reports</div>
      <div class="nav-item m-hide" onclick="nav('analytics',this)"><span class="nav-icon">📊</span> Analytics</div>
      <div class="nav-item" onclick="nav('resolved',this)"><span class="nav-icon">✓</span> Resolved by Andi <span class="nav-badges"><span class="nav-badge green" id="badge-resolved" style="display:none;">0</span></span></div>
      <div class="nav-group-label m-hide" style="margin-top:0.5rem;">Account</div>
      <div class="nav-item m-hide" onclick="nav('settings',this)"><span class="nav-icon">⚙</span> Settings</div>
      <div class="nav-item m-hide" onclick="nav('flagged',this)"><span class="nav-icon">⚑</span> Flagged for Andi</div>
    </nav>
    <div class="sidebar-user" id="sidebar-user">
      <div class="user-row" onclick="toggleUserMenu(event)">
        <div class="user-avatar" id="sb-avatar">AH</div>
        <div style="min-width:0;"><div class="user-name" id="sb-username">&mdash;</div><div class="user-role" id="sb-role"></div></div>
        <div class="user-caret">▾</div>
      </div>
      <div class="user-menu">
        <div class="user-menu-item" onclick="openUserSettings(event)">⚙&nbsp; Settings</div>
        <div class="user-menu-item danger" onclick="doLogout(event)">⎋&nbsp; Log out</div>
        <div style="padding:0.4rem 0.65rem 0.2rem;font-size:0.68rem;color:rgba(255,255,255,0.35);">Dashboard v1.97.2</div>
      </div>
      <div class="sidebar-rw">Powered by <span>RestWerks</span></div>
    </div>
  </aside>

  <main class="main">
    <div id="acct-banner-preview" class="acct-banner preview">
      <span>Preview mode. You are exploring with sample data. Go live to connect your number and start texting your clients.</span>
    </div>
    <div id="acct-banner-verify" class="acct-banner verify">
      <span>Confirm your email to finish setup. Check your inbox for the link.</span>
      <button class="linkbtn" id="resend-btn" onclick="resendVerification()">Resend email</button>
    </div>
    <div class="topbar">
      <div class="topbar-left">
        <button class="m-hamburger" onclick="mToggleNav()" aria-label="Menu">☰</button>
        <div class="page-title" id="page-title">Dashboard</div>
      </div>
      <div class="topbar-right">
        <div class="mode-toggle" onclick="toggleMode()" id="mode-btn">🌙</div>
      </div>
    </div>

    <div class="content">

      <div id="panel-dashboard" class="panel active">

        <!-- HERO: what Andi did. Volume leads, rate supports it. -->
        <div class="hero-card">
          <div class="hero-main">
            <div class="hero-figure">
              <div class="hero-num" id="hs-convs">&#8195;</div>
              <div class="hero-cap">conversations handled by Andi</div>
            </div>
            <div class="hero-figure">
              <div class="hero-num" id="hs-msgs">&#8195;</div>
              <div class="hero-cap">messages he answered</div>
            </div>
            <div class="hero-figure hero-rate">
              <div class="hero-num g" id="hs-rate">&#8195;</div>
              <div class="hero-cap">resolved without a tech</div>
            </div>
          </div>
          <div class="hero-foot">
            <span id="hs-window">Last 30 days</span>
            <span class="hero-trend">7 days <b id="hs-t7">&#8195;</b></span>
            <span class="hero-trend">30 days <b id="hs-t30">&#8195;</b></span>
            <span class="hero-trend">all time <b id="hs-tall">&#8195;</b></span>
          </div>
        </div>

        <!-- ANDI: what he handled -->
        <div class="sec-head">
          <div class="sec-title">Andi</div>
          <div class="sec-scope">
            <button class="scope-btn active" id="hs-scope-int" onclick="hsScope('integrator')">This shop</button>
            <button class="scope-btn" id="hs-scope-world" disabled title="Turns on when the shared resolution pool is scoped per integrator">World</button>
          </div>
        </div>
        <div class="analytics-grid">
          <div class="analytics-card">
            <div class="analytics-title">Issues by category</div>
            <div id="hs-issues"><div class="loading-row">Loading...</div></div>
          </div>
          <div class="analytics-card">
            <div class="analytics-title">Andi stats</div>
            <div class="trend-row"><div class="trend-label">After hours<div class="hs-note">outside 7 to 5, weekdays</div></div><div class="trend-val g" id="hs-ah">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Share after hours</div><div class="trend-val" id="hs-ahpct">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Overnight<div class="hs-note">9pm to 6am</div></div><div class="trend-val" id="hs-overnight">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Weekend</div><div class="trend-val" id="hs-weekend">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Households served</div><div class="trend-val" id="hs-hh7">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Total households</div><div class="trend-val" id="hs-hh">&#8195;</div></div>
          </div>
        </div>

        <!-- TICKETS: what needed a human -->
        <div class="sec-head"><div class="sec-title">Tickets</div></div>
        <div class="analytics-grid">
          <div class="analytics-card">
            <div class="analytics-title">Tickets by category<div class="hs-note" id="hs-cats-total" style="display:none;text-transform:none;letter-spacing:normal;font-weight:400;"></div></div>
            <div id="hs-cats"><div class="loading-row">Loading...</div></div>
          </div>
          <div class="analytics-card">
            <div class="analytics-title">Open work</div>
            <div class="trend-row" onclick="nav('tickets',navItem('tickets'))" style="cursor:pointer;"><div class="trend-label">Open tickets</div><div class="trend-val r" id="hs-open">&#8195;</div></div>
            <div class="trend-row" onclick="nav('tickets',navItem('tickets'))" style="cursor:pointer;"><div class="trend-label">Scheduled</div><div class="trend-val" id="hs-sched">&#8195;</div></div>
            <div class="trend-row" onclick="nav('followups',navItem('followups'))" style="cursor:pointer;"><div class="trend-label">Follow ups pending</div><div class="trend-val b" id="hs-fu">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Avg response time<div class="hs-note" id="hs-tkresp-note" style="display:none;">fills in as the team replies to tickets</div></div><div class="trend-val" id="hs-tkresp">&#8195;</div></div>
            <div class="trend-row"><div class="trend-label">Avg resolution time<div class="hs-note" id="hs-tkres-note">fills in as tickets resolve</div></div><div class="trend-val" id="hs-tkres">&#8195;</div></div>
          </div>
        </div>
      </div>

      <div id="panel-conversations" class="panel">
        <div id="conv-list-view">
          <div class="panel-chrome">
            <div class="conv-list-header">
              <input class="conv-search" type="text" id="conv-search" placeholder="Search conversations..." oninput="filterConvs(this.value)" />
              <div class="seg-group" id="conv-seg">
                <button class="seg on" id="conv-seg-active" onclick="convSetView('active')">Active</button>
                <button class="seg" id="conv-seg-archived" onclick="convSetView('archived')">Archived</button>
                <button class="seg" id="conv-seg-all" onclick="convSetView('all')">All</button>
              </div>
              <div class="panel-chrome-action" onclick="loadRealConversations()">&#x21bb; Refresh</div>
            </div>
            <div id="real-convs-body"><div class="loading-row">Loading...</div></div>
          </div>
        </div>
        <div id="conv-detail-view" style="display:none;">
          <div class="back-btn" onclick="goBack()">&#8592; Back</div>
          <div id="conv-detail-content"></div>
        </div>
      </div>

      <div id="panel-resolved" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">Resolved by Andi</div></div>
          <div id="resolved-list" style="padding:1.1rem 1.25rem;"><div class="hh-empty">Loading...</div></div>
        </div>
      </div>

      <div id="panel-tickets" class="panel">
        <div id="ticket-list-view">
          <div class="panel-chrome">
            <div class="panel-chrome-header"><div class="panel-chrome-title">Tickets</div><div class="panel-chrome-action" onclick="openCreate('ticket')">+ New ticket</div></div>
            <div id="ticket-list"><div class="hh-empty">Loading...</div></div>
          </div>
        </div>
        <div id="ticket-detail-view" style="display:none;">
          <div class="back-btn" onclick="goBack()">← Back</div>
          <div id="ticket-detail-content"></div>
        </div>
      </div>

      <div id="panel-myandi" class="panel">
        <div class="panel-chrome ma-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">My Andi</div><div class="ma-number" id="ma-number" style="margin-left:auto;"></div><button class="btn-ghost" id="ma-fixes-btn" style="margin-left:0.75rem;font-size:0.8rem;padding:0.25rem 0.7rem;" onclick="maToggleFixes()">Learned Resolutions</button></div>
          <div class="ma-fixes" id="ma-fixes" style="display:none;"><div class="set-section-note" style="padding:0.85rem 1.25rem 0;">Resolutions your team taught My Andi. A resolution is what a teammate tried; it may not resolve every case. If one came back, mark it Didn't hold and say what happened. Nothing is ever deleted. They stay with your team.</div><div id="mat-fixes" style="padding:0.6rem 1.25rem 1rem;"><div class="mat-sub">Loading...</div></div></div>
          <div class="ma-thread" id="ma-thread"><div class="hh-empty">Loading...</div></div>
          <div class="ma-compose">
            <textarea id="ma-input" rows="2" placeholder="Ask about a client, codes, tickets, or what you did" onkeydown="maKey(event)"></textarea>
            <button class="btn-primary" id="ma-send" onclick="maSend()">Send</button>
          </div>
          <div class="ma-foot">
            <label class="ma-pref" id="ma-pref-wrap"><input type="checkbox" id="ma-text-desktop" onchange="maSavePref(this.checked)" /> Also text me answers I asked from the desktop</label>
            <span class="ma-err" id="ma-err"></span>
          </div>
        </div>
      </div>

      <div id="panel-followups" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">Follow ups</div><div class="panel-chrome-action" onclick="openCreate('followup')">+ Add follow up</div></div>
          <div id="followup-list"><div class="hh-empty">Loading...</div></div>
        </div>
      </div>

      <div id="panel-households" class="panel">
        <div id="hh-list-view">
          <div class="panel-chrome">
            <div class="hh-toolbar">
              <input class="hh-search" id="hh-search" type="text" placeholder="Search households..." oninput="filterHouseholds(this.value)" />
              <button class="hh-add-btn" onclick="openAddHousehold()">+ Add household</button>
            </div>
            <div class="hh-list" id="hh-list"><div class="hh-empty">Loading...</div></div>
          </div>
        </div>
        <div id="hh-detail-view" style="display:none;">
          <div class="back-btn" onclick="goBack()">← Back</div>
          <div class="panel-chrome">
            <div class="hd-head">
              <div class="hd-head-main">
                <div class="hd-title-row">
                  <div class="hd-title" id="hd-title">Household</div>
                  <span class="hh-project" id="hd-project-tag" style="display:none;"></span>
                  <span class="hd-removed-tag" id="hd-removed-tag" style="display:none;">Removed</span>
                  <button class="hd-pencil" id="hd-pencil" title="Edit project and address" onclick="hdEditHead()" style="display:none;">&#9998;</button>
                </div>
                <div class="hh-sub" id="hd-address-line" style="display:none;"></div>
                <div class="hd-head-edit" id="hd-head-edit" style="display:none;">
                  <input class="fld-input" type="text" id="hd-edit-project" placeholder="Project name" />
                  <div class="addr-parts">
                    <input class="fld-input" type="text" id="hd-edit-street" placeholder="Street" />
                    <input class="fld-input" type="text" id="hd-edit-city" placeholder="City" />
                    <input class="fld-input" type="text" id="hd-edit-state" placeholder="State" />
                    <input class="fld-input" type="text" id="hd-edit-zip" placeholder="ZIP" />
                  </div>
                  <div class="hd-head-edit-row"><button class="btn-primary" onclick="hdSaveHead()">Save</button><button class="btn-ghost" onclick="hdCancelHead()">Cancel</button><span class="hd-err" id="hd-head-err"></span><a class="hd-remove-link" onclick="openRemoveHousehold()">Remove household</a></div>
                </div>
              </div>
              <button class="reply-create" id="hd-create-btn" onclick="openHouseholdCreate()" style="display:none;">+ Create</button>
            </div>
            <div class="hd-body" id="hd-body"><div class="hh-empty">Loading...</div></div>
          </div>
        </div>
      </div>

      <div id="panel-proactive" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">Proactive Outreach</div></div>
          <div class="placeholder-body" style="font-style:normal;line-height:1.7;">
            <div style="font-size:2rem;margin-bottom:0.5rem;">📣</div>
            <div style="font-weight:600;color:var(--ink);font-size:1rem;margin-bottom:0.5rem;">Coming soon</div>
            Andi reaches out before clients have to. Scheduled check ins, snowbird season checks, a tech on the way heads up, and follow up nudges that fire on their own. Built on the follow ups you are already capturing.
          </div>
        </div>
      </div>
      <div id="panel-analytics" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">Analytics</div></div>
          <div id="analytics-body" style="padding:1.1rem 1.25rem;"><div class="hh-empty">Loading...</div></div>
          <div class="placeholder-body" style="border-top:1px solid var(--border);font-size:0.8rem;">Resolution rate trends and brand and issue breakdowns are coming next.</div>
        </div>
      </div>
      <div id="panel-flagged" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header"><div class="panel-chrome-title">Flagged for Andi</div></div>
          <div class="placeholder-body" style="font-size:0.8rem;padding:0.6rem 1.25rem;border-bottom:1px solid var(--border);">Messages your team flagged for RestWerks review during beta. Flag from any conversation or ticket. Andy reviews every one.</div>
          <div id="flagged-body" style="padding:1.1rem 1.25rem;"><div class="hh-empty">Loading...</div></div>
        </div>
      </div>
      <div id="panel-settings" class="panel">
        <div class="panel-chrome">
          <div class="panel-chrome-header">
            <div class="panel-chrome-title">Company settings</div>
            <div class="panel-chrome-action" id="set-status-slot" style="border:none;cursor:default;background:none;padding:0;"></div>
          </div>
          <div id="settings-body">
            <div class="placeholder-body">Loading...</div>
          </div>
        </div>
      </div>

    </div>
  </main>
</div>
</div>

<!-- ── SETUP WIZARD (increment #3) ── -->
<div id="wiz-overlay" class="wiz-overlay" onclick="if(event.target===this)closeWizard()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-steps">
        <div class="wiz-pip on" id="wiz-pip-1"></div>
        <div class="wiz-pip" id="wiz-pip-2"></div>
        <div class="wiz-pip" id="wiz-pip-3"></div>
      </div>
      <div class="wiz-title" id="wiz-title">Set up your company</div>
      <div class="wiz-sub" id="wiz-sub">A few details so Andi can introduce your company correctly. All of this is optional and you can change it anytime in Settings.</div>
    </div>

    <!-- Step 1: company info -->
    <div class="wiz-step on" id="wiz-step-1">
      <div class="wiz-body">
        <div class="fld">
          <div class="fld-label">Company name</div>
          <input class="fld-input" type="text" id="wiz-name" placeholder="Your company" />
        </div>
        <div class="fld">
          <div class="fld-label">Address</div>
          <input class="fld-input" type="text" id="wiz-address" placeholder="Street, city, state" />
        </div>
        <div class="fld fld-row">
          <div>
            <div class="fld-label">Office phone</div>
            <input class="fld-input" type="tel" id="wiz-phone" placeholder="612 555 0100" />
          </div>
          <div>
            <div class="fld-label">Company email</div>
            <input class="fld-input" type="email" id="wiz-email" placeholder="office@yourcompany.com" />
          </div>
        </div>
        <div class="wiz-err" id="wiz-err-1"></div>
      </div>
      <div class="wiz-foot">
        <button class="btn-ghost" onclick="wizSkip(2)">Skip for now</button>
        <button class="btn-primary" id="wiz-next-1" onclick="wizSaveStep1()">Continue</button>
      </div>
    </div>

    <!-- Step 2: branding -->
    <div class="wiz-step" id="wiz-step-2">
      <div class="wiz-body">
        <div class="fld">
          <div class="fld-label">Logo</div>
          <input type="file" id="wiz-logo-file" accept="image/*" style="display:none;" onchange="wizLogoChosen(this)" />
          <div id="wiz-logo-zone" class="logo-drop" onclick="document.getElementById('wiz-logo-file').click()">Click to upload a logo. PNG or JPG.</div>
          <div id="wiz-logo-preview" class="logo-preview" style="display:none;">
            <img id="wiz-logo-img" src="" alt="logo" />
            <button class="btn-ghost" style="margin-left:auto;" onclick="wizRemoveLogo()">Remove</button>
          </div>
        </div>
        <div class="fld">
          <div class="fld-label">Brand colors</div>
          <div class="color-row">
            <div class="color-cell"><div class="color-pick"><input type="color" id="wiz-c1" value="#1D9E75" oninput="wizSyncColor(1,'pick')" /><input class="fld-input" type="text" id="wiz-c1-hex" value="#1D9E75" oninput="wizSyncColor(1,'hex')" /></div></div>
            <div class="color-cell"><div class="color-pick"><input type="color" id="wiz-c2" value="#3B5168" oninput="wizSyncColor(2,'pick')" /><input class="fld-input" type="text" id="wiz-c2-hex" placeholder="optional" oninput="wizSyncColor(2,'hex')" /></div></div>
            <div class="color-cell"><div class="color-pick"><input type="color" id="wiz-c3" value="#888780" oninput="wizSyncColor(3,'pick')" /><input class="fld-input" type="text" id="wiz-c3-hex" placeholder="optional" oninput="wizSyncColor(3,'hex')" /></div></div>
          </div>
          <div class="wiz-sub" style="margin-top:0.5rem;">The first color is your main accent. Leave the others blank if you only have one.</div>
        </div>
        <div class="wiz-err" id="wiz-err-2"></div>
      </div>
      <div class="wiz-foot">
        <button class="btn-ghost" onclick="wizSkip(3)">Skip for now</button>
        <button class="btn-primary" id="wiz-next-2" onclick="wizSaveStep2()">Continue</button>
      </div>
    </div>

    <!-- Step 3: route -->
    <div class="wiz-step" id="wiz-step-3">
      <div class="wiz-body" style="text-align:center;padding-top:1rem;padding-bottom:0.5rem;">
        <div style="font-size:2rem;margin-bottom:0.5rem;">✓</div>
        <div class="wiz-title" style="font-size:1.3rem;">You are set up</div>
        <div class="wiz-sub" style="margin-top:0.5rem;">Want to add your first household now? You can always do this later from the Households tab.</div>
        <div class="wiz-err" id="wiz-err-3"></div>
      </div>
      <div class="wiz-foot" style="justify-content:center;flex-direction:column;gap:0.5rem;">
        <button class="btn-primary" style="width:100%;" onclick="wizFinish('household')">Add a household</button>
        <button class="btn-ghost" onclick="wizFinish('later')">I will do this later</button>
      </div>
    </div>
  </div>
</div>

<!-- ── ADD HOUSEHOLD MODAL ── -->
<div id="hh-overlay" class="wiz-overlay" onclick="if(event.target===this)closeAddHousehold()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Add a household</div>
      <div class="wiz-sub">Files by last name. Equipment, ISP, and notes get added later from the household.</div>
    </div>
    <div class="wiz-body">
      <div class="fld-label" style="margin-bottom:0.4rem;">Primary contact</div>
      <div class="fld fld-row">
        <div><input class="fld-input" type="text" id="hh-first" placeholder="First name" oninput="updateLabelPreview()" /></div>
        <div><input class="fld-input" type="text" id="hh-last" placeholder="Last name" oninput="updateLabelPreview()" /></div>
      </div>
      <div class="fld"><input class="fld-input" type="tel" id="hh-phone" placeholder="Phone" /></div>
      <div class="fld"><div class="fld-label">Client type</div><select class="fld-input" id="hh-type"><option value="Owner">Owner</option><option value="Member">Member</option><option value="Caretaker">Caretaker</option><option value="House Manager">House Manager</option><option value="Special">Special</option></select></div>

      <div class="fld-label" style="margin:0.5rem 0 0.4rem;">Second person (optional)</div>
      <div class="fld fld-row">
        <div><input class="fld-input" type="text" id="hh-first2" placeholder="First name" oninput="updateLabelPreview()" /></div>
        <div><input class="fld-input" type="text" id="hh-last2" placeholder="Last name (same if blank)" oninput="updateLabelPreview()" /></div>
      </div>
      <div class="fld"><input class="fld-input" type="tel" id="hh-phone2" placeholder="Phone (optional)" /></div>
      <div class="fld"><div class="fld-label">Client type</div><select class="fld-input" id="hh-type2"><option value="Owner">Owner</option><option value="Member">Member</option><option value="Caretaker">Caretaker</option><option value="House Manager">House Manager</option><option value="Special">Special</option></select></div>

      <div class="fld"><div class="fld-label">Project name</div><input class="fld-input" type="text" id="hh-project" placeholder="Nickname, e.g. Black House (optional)" /></div>
      <div class="fld"><div class="fld-label">Address</div><input class="fld-input" type="text" id="hh-address" placeholder="Street, city, state (optional)" /></div>

      <div class="hh-label-preview" id="hh-label-preview" style="display:none;"></div>
      <div class="wiz-err" id="hh-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeAddHousehold()">Cancel</button>
      <button class="btn-primary" id="hh-save-btn" onclick="submitAddHousehold()">Add household</button>
    </div>
  </div>
</div>

<!-- ── ADD / EDIT PERSON MODAL (v1.9.0) ── -->
<div id="hp-overlay" class="wiz-overlay" onclick="if(event.target===this)closeHpModal()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title" id="hp-title">Add a person</div>
      <div class="wiz-sub" id="hp-sub">They become a contact on this household.</div>
    </div>
    <div class="wiz-body">
      <div class="fld fld-row">
        <div><div class="fld-label">First name</div><input class="fld-input" type="text" id="hp-first" placeholder="First" /></div>
        <div><div class="fld-label">Last name</div><input class="fld-input" type="text" id="hp-last" placeholder="Same as household if blank" /></div>
      </div>
      <div class="fld"><div class="fld-label">Phone (optional)</div><input class="fld-input" type="tel" id="hp-phone" placeholder="Phone" /></div>
      <div class="fld"><div class="fld-label">Email (optional)</div><input class="fld-input" type="email" id="hp-email" placeholder="Email" autocapitalize="off" autocorrect="off" spellcheck="false" /></div>
      <div class="fld"><div class="fld-label">Relationship (optional)</div><input class="fld-input" type="text" id="hp-rel" placeholder="e.g. Spouse, Property manager" /></div>
      <div class="fld"><div class="fld-label">Client type</div><select class="fld-input" id="hp-type" onchange="toggleCovWindow()"><option value="">Not set</option><option value="Owner">Owner</option><option value="Member">Member</option><option value="Caretaker">Caretaker</option><option value="House Manager">House Manager</option><option value="Special">Special</option></select></div>
      <div class="fld" id="hp-cov" style="display:none;">
        <div class="fld-label">Coverage window (a person covers this, Andi covers the rest)</div>
        <div class="fld-row">
          <div><select class="fld-input" id="hp-cov-start"></select></div>
          <div><select class="fld-input" id="hp-cov-end"></select></div>
        </div>
        <div class="hp-read-note" style="display:block;margin-top:0.3rem;">Andi stays silent inside this window and answers outside it. Example: 7:00 AM to 11:00 PM means a person covers the day and Andi covers overnight. Leave both blank and Andi answers any time.</div>
      </div>
      <div class="hp-read-head">Andi's read <span class="hp-read-note">capture only, correct it anytime</span></div>
      <div class="fld fld-row">
        <div><div class="fld-label">Capability (1 to 5)</div>
          <select class="fld-input" id="hp-suff"><option value="">Not set</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div>
        <div><div class="fld-label">Difficulty (1 to 5)</div>
          <select class="fld-input" id="hp-diff"><option value="">Not set</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div>
      </div>
      <div class="fld"><div class="fld-label">Voice (how they talk and how Andi answers)</div><input class="fld-input" type="text" id="hp-voice" placeholder="e.g. brief and technical, skip the hand holding" /></div>
      <div class="fld"><div class="fld-label">Notes</div><textarea class="fld-input" id="hp-pnotes" rows="2" placeholder="Anything worth remembering"></textarea></div>
      <div class="wiz-err" id="hp-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeHpModal()">Cancel</button>
      <button class="btn-primary" id="hp-save-btn" onclick="submitHpModal()">Save</button>
    </div>
  </div>
</div>

<!-- ── REMOVE HOUSEHOLD CONFIRM MODAL (v1.9.0) ── -->
<div id="hd-del-overlay" class="wiz-overlay" onclick="if(event.target===this)closeRemoveHousehold()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Remove this household?</div>
      <div class="wiz-sub" id="hd-del-sub">It moves to Removed. Nothing is deleted.</div>
    </div>
    <div class="wiz-body">
      <div class="wiz-sub" style="line-height:1.6;">The household and its people stop showing in the active list. Conversation history and photos are kept, and the phone numbers stay reserved, so you can bring them back any time from the Removed list.</div>
      <div class="wiz-field" style="margin-top:0.9rem;"><input class="fld-input" type="text" id="hd-del-confirm" placeholder="Type DELETE to confirm" oninput="hdDelGate()" autocomplete="off" /></div>
      <div class="wiz-err" id="hd-del-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeRemoveHousehold()">Cancel</button>
      <button class="hd-danger-btn" id="hd-del-btn" onclick="confirmRemoveHousehold()" disabled>Remove household</button>
    </div>
  </div>
</div>

<!-- ── ATTACH NUMBER TO HOUSEHOLD MODAL (v1.17.0) ── -->
<div id="at-overlay" class="wiz-overlay" onclick="if(event.target===this)closeAttach()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Add to a household</div>
      <div class="wiz-sub" id="at-sub">This number texted in before being entered. Connect it to a person and their conversation and opt in come along.</div>
    </div>
    <div class="wiz-body">
      <div class="hh-label-preview" id="at-phone-line"></div>
      <div class="cr-modes">
        <button class="cr-mode" id="at-mode-existing" onclick="atSetMode('existing')">Existing household</button>
        <button class="cr-mode" id="at-mode-new" onclick="atSetMode('new')">New household</button>
      </div>

      <div id="at-existing-block">
        <div class="fld-label" style="margin-bottom:0.3rem;">Household</div>
        <div id="at-selected" style="display:none;" class="hh-label-preview"></div>
        <div id="at-search-wrap">
          <input class="fld-input" type="text" id="at-search" placeholder="Search households..." oninput="atSearch(this.value)" autocomplete="off" />
          <div id="at-results"></div>
        </div>
        <div class="cr-newlink" id="at-clear-sel" style="display:none;" onclick="atClearSelection()">Pick a different household</div>
      </div>

      <div class="fld fld-row" style="margin-top:0.7rem;">
        <div><div class="fld-label">First name</div><input class="fld-input" type="text" id="at-first" placeholder="First" /></div>
        <div><div class="fld-label">Last name</div><input class="fld-input" type="text" id="at-last" placeholder="" /></div>
      </div>
      <div class="fld"><div class="fld-label">Relationship (optional)</div><input class="fld-input" type="text" id="at-rel" placeholder="e.g. Spouse, Property manager" /></div>

      <div id="at-new-block" style="display:none;">
        <div class="fld"><div class="fld-label">Project name (optional)</div><input class="fld-input" type="text" id="at-project" placeholder="Nickname, e.g. Black House" /></div>
        <div class="fld"><div class="fld-label">Address (optional)</div><input class="fld-input" type="text" id="at-address" placeholder="Street, city, state" /></div>
      </div>

      <div class="wiz-err" id="at-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeAttach()">Cancel</button>
      <button class="btn-primary" id="at-save-btn" onclick="submitAttach()">Add to household</button>
    </div>
  </div>
</div>

<!-- ── UNIFIED CREATE MODAL: ticket / follow up / both (v1.2.0) ── -->
<div id="cr-overlay" class="wiz-overlay" onclick="if(event.target===this)closeCreate()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title" id="cr-title">Create</div>
      <div class="wiz-sub" id="cr-sub">Open a ticket, a follow up, or both.</div>
    </div>
    <div class="wiz-body">
      <div class="cr-modes" id="cr-modes">
        <button class="cr-mode" id="cr-mode-ticket" onclick="crToggleMode('ticket')">Ticket</button>
        <button class="cr-mode" id="cr-mode-followup" onclick="crToggleMode('followup')">Follow up</button>
        <button class="cr-mode" id="cr-mode-note" onclick="crToggleMode('note')">Note</button>
      </div>

      <!-- client section: Household + Client rows, same everywhere, populated per entry point -->
      <div id="cr-client-block">
        <div class="fld-label" style="margin-bottom:0.3rem;">Household</div>
        <div id="cr-selected" style="display:none;" class="hh-label-preview"></div>
        <div id="cr-search-wrap">
          <input class="fld-input" type="text" id="cr-search" placeholder="Search households..." oninput="crSearch(this.value)" autocomplete="off" />
          <div id="cr-results"></div>
          <div class="cr-newlink" onclick="crShowNew()">Client not on file? Add a new one</div>
        </div>
        <div id="cr-person-row" style="display:none;">
          <div class="fld-label" style="margin:0.6rem 0 0.3rem;">Client</div>
          <select class="fld-input" id="cr-person" onchange="crPickPerson(this.value)"></select>
        </div>
        <div id="cr-new-fields" style="display:none;">
          <div class="fld"><input class="fld-input" type="text" id="cr-new-name" placeholder="Client name" /></div>
          <div class="fld fld-row">
            <div><input class="fld-input" type="tel" id="cr-new-phone" placeholder="Phone" /></div>
            <div><input class="fld-input" type="email" id="cr-new-email" placeholder="Email" /></div>
          </div>
          <div class="wiz-sub" style="margin-top:-0.2rem;">Phone or email required so they can be reached. Both is better.</div>
          <div class="cr-newlink" onclick="crHideNew()">Back to search</div>
        </div>
      </div>
      <div id="cr-about" style="display:none;" class="hh-label-preview"></div>

      <div id="cr-issue-block" class="fld">
        <div class="fld-label">Issue</div>
        <textarea class="fld-input" id="cr-issue" style="min-height:120px;resize:vertical;" placeholder="What is the issue"></textarea>
        <div class="cr-draft-note" id="cr-draft-note" style="display:none;">Drafting from the conversation...</div>
        <div class="fld" style="margin-top:0.5rem;"><div class="fld-label">Assign ticket to (optional)</div>
          <select class="fld-input cr-assignee" id="cr-assignee-ticket"><option value="">No one yet</option></select>
        </div>
      </div>

      <div id="cr-followup-block">
        <div class="fld"><div class="fld-label">Follow up</div><textarea class="fld-input" id="cr-note" style="min-height:120px;resize:vertical;" placeholder="What needs to happen"></textarea></div>
        <div class="fld fld-row">
          <div><div class="fld-label">Follow up type</div><select class="fld-input" id="cr-type"><option value="tech">Schedule a tech</option><option value="sales">Sales reach out</option><option value="other">Other</option></select></div>
          <div><div class="fld-label">Due date (optional)</div><input class="fld-input" type="date" id="cr-due" /></div>
        </div>
        <div class="fld"><div class="fld-label">Assign follow up to (optional)</div>
          <select class="fld-input cr-assignee" id="cr-assignee-followup"><option value="">No one yet</option></select>
        </div>
      </div>

      <div id="cr-note-block">
        <div class="fld"><div class="fld-label">Note</div><textarea class="fld-input" id="cr-hhnote" style="min-height:100px;resize:vertical;" placeholder="A note that stays on this household"></textarea></div>
      </div>

      <div class="wiz-err" id="cr-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeCreate()">Cancel</button>
      <button class="btn-primary" id="cr-save-btn" onclick="submitCreate()">Create</button>
    </div>
  </div>
</div>

<!-- ── CLOSE TICKET MODAL (v1.66.0) — the ending WITHOUT a fix ──
     Deliberately a separate modal from Resolve rather than a checkbox on it. The two endings ask
     for different sentences and only one of them is ever allowed to reach Andi's learning pool.
     If a duplicate or a cancelled job had to be filed as Resolved, somebody types "n/a" into the
     fix field and that becomes a resolution Andi can repeat back to a client one day. -->
<div id="tk-cancel-overlay" class="wiz-overlay" onclick="if(event.target===this)closeCancelModal()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Close ticket</div>
      <div class="wiz-sub">Ends the ticket without a fix. It will not count as resolved and Andi never learns from it.</div>
    </div>
    <div class="wiz-body">
      <div class="fld"><div class="fld-label">Reason</div>
        <select class="fld-input" id="tk-cancel-preset" onchange="cancelPresetPicked()">
          <option value="">Pick a reason...</option>
          <option value="Duplicate of another ticket">Duplicate of another ticket</option>
          <option value="Client resolved it themselves">Client resolved it themselves</option>
          <option value="Client never responded">Client never responded</option>
          <option value="Client cancelled">Client cancelled</option>
          <option value="Not our work">Not our work</option>
          <option value="Opened by mistake">Opened by mistake</option>
          <option value="__other">Something else...</option>
        </select>
      </div>
      <div class="fld" id="tk-cancel-otherwrap" style="display:none;"><div class="fld-label">Reason</div>
        <textarea class="fld-input" id="tk-cancel-reason" style="min-height:70px;resize:vertical;" placeholder="Why this ticket is ending without a fix"></textarea>
      </div>
      <div class="wiz-err" id="tk-cancel-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeCancelModal()">Cancel</button>
      <button class="btn-primary" id="tk-cancel-btn" onclick="submitCancelTicket()">Close ticket</button>
    </div>
  </div>
</div>

<!-- ── RESOLVE TICKET MODAL (v1.4.0) — human only ── -->
<div id="tk-close-overlay" class="wiz-overlay" onclick="if(event.target===this)closeResolveModal()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Resolve ticket</div>
      <div class="wiz-sub">Andi drafts the context. You add what fixed it and close.</div>
    </div>
    <div class="wiz-body">
      <div class="fld"><div class="fld-label">Context (drafted by Andi, editable)</div>
        <textarea class="fld-input" id="tk-close-context" style="min-height:90px;resize:vertical;" placeholder="What the issue was and how it went"></textarea>
        <div class="cr-draft-note" id="tk-close-draftnote" style="display:none;">Andi is drafting the context...</div>
      </div>
      <div class="fld"><div class="fld-label">What fixed it</div>
        <textarea class="fld-input" id="tk-close-fix" style="min-height:90px;resize:vertical;" placeholder="The actual resolution. What was done."></textarea>
      </div>
      <div class="wiz-err" id="tk-close-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeResolveModal()">Cancel</button>
      <button class="btn-primary" id="tk-close-btn" onclick="submitResolveTicket()">Resolve and close</button>
    </div>
  </div>
</div>

<!-- ── ADD TEAMMATE MODAL (increment #4) ── -->
<div id="au-overlay" class="wiz-overlay" onclick="if(event.target===this)closeAddUser()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title">Add a teammate</div>
      <div class="wiz-sub">They get an email with a link to set their own password and sign in.</div>
    </div>
    <div class="wiz-body">
      <div class="fld fld-row">
        <div><div class="fld-label">First name</div><input class="fld-input" type="text" id="au-first" placeholder="First" /></div>
        <div><div class="fld-label">Last name</div><input class="fld-input" type="text" id="au-last" placeholder="Last" /></div>
      </div>
      <div class="fld"><div class="fld-label">Email</div><input class="fld-input" type="email" id="au-email" placeholder="them@company.com" /></div>
      <div class="fld"><div class="fld-label">Cell phone <span style="font-weight:400;text-transform:none;letter-spacing:0;">(optional)</span></div><input class="fld-input" type="tel" id="au-cell" placeholder="555-123-4567" /><div class="login-pwhint" style="color:var(--ink-soft);">Used for the on call roster and My Andi by text.</div></div>
      <div class="fld"><div class="fld-label">Role</div><select class="fld-input" id="au-role"><option value="member">Member</option><option value="manager">Manager</option><option value="owner">Owner</option></select><div class="login-pwhint" style="color:var(--ink-soft);">Owner: everything. Manager: the team, on call, settings and My Andi for the whole team; everything but owners and billing. Member: their own work.</div></div>
      <div class="wiz-err" id="au-err"></div>
    </div>
    <div class="wiz-foot">
      <button class="btn-ghost" onclick="closeAddUser()">Cancel</button>
      <button class="btn-primary" id="au-save-btn" onclick="submitAddUser()">Send invite</button>
    </div>
  </div>
</div>

<!-- ── MEMBER DETAIL / EDIT MODAL (June 7) ── -->
<div id="me-overlay" class="wiz-overlay" onclick="if(event.target===this)closeMemberEdit()">
  <div class="wiz-card">
    <div class="wiz-head">
      <div class="wiz-title" id="me-title">Edit teammate</div>
      <div class="wiz-sub" id="me-sub"></div>
    </div>
    <div class="wiz-body">
      <div class="fld fld-row">
        <div><div class="fld-label">First name</div><input class="fld-input" type="text" id="me-first" /></div>
        <div><div class="fld-label">Last name</div><input class="fld-input" type="text" id="me-last" /></div>
      </div>
      <div class="fld">
        <div class="fld-label">Email</div>
        <input class="fld-input" type="email" id="me-email" oninput="meEmailTouched()" />
        <div class="login-pwhint" id="me-email-note" style="color:var(--ink-soft);display:none;">Changing the email sends a confirmation link to the new address. It must be confirmed before they can sign in there.</div>
      </div>
      <div class="fld"><div class="fld-label">Cell phone</div><input class="fld-input" type="tel" id="me-cell" placeholder="555-123-4567" /></div>
      <div class="fld"><div class="fld-label">Role</div><select class="fld-input" id="me-role"><option value="member">Member</option><option value="manager">Manager</option><option value="owner">Owner</option></select><div class="login-pwhint" style="color:var(--ink-soft);">Owner: everything. Manager: the team, on call, settings and My Andi for the whole team; everything but owners and billing. Member: their own work.</div><div class="login-pwhint" id="me-role-lock" style="color:var(--ink-soft);display:none;">Only an owner can change an owner.</div></div>
      <div class="fld"><div class="fld-label">Slack member ID</div><input class="fld-input" type="text" id="me-slack" placeholder="U01AB2CD3EF" autocomplete="off" /><div class="login-pwhint" style="color:var(--ink-soft);">So an on call page can tag them in Slack. In Slack: open their profile, the three dots, Copy member ID.</div></div>
      <div class="fld"><div class="fld-label">Bubble color</div>
        <div id="me-palette" class="me-palette" style="margin-bottom:0.6rem;"></div>
        <div class="color-pick"><input type="color" id="me-color-pick" oninput="meSyncCustom('pick')" /><input class="fld-input" type="text" id="me-color-hex" placeholder="#2D7DD2" oninput="meSyncCustom('hex')" /></div>
      </div>
      <div class="wiz-err" id="me-err"></div>
    </div>
    <div class="wiz-foot" style="flex-wrap:wrap;gap:0.5rem;">
      <div id="me-actions" style="display:flex;gap:0.4rem;flex-wrap:wrap;"></div>
      <div style="margin-left:auto;display:flex;gap:0.5rem;">
        <button class="btn-ghost" onclick="closeMemberEdit()">Cancel</button>
        <button class="btn-primary" id="me-save-btn" onclick="submitMemberEdit()">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- ── PERSONAL SETTINGS MODAL (increment #4) ── -->
<div id="us-overlay" class="wiz-overlay" onclick="if(event.target===this)closeUserSettings()">
  <div class="wiz-card">
    <div class="wiz-head"><div class="wiz-title">Your settings</div></div>
    <div class="wiz-body">
      <div class="set-section-title" style="margin-bottom:0.6rem;">Your profile</div>
      <div class="fld fld-row">
        <div><div class="fld-label">First name</div><input class="fld-input" type="text" id="us-first" /></div>
        <div><div class="fld-label">Last name</div><input class="fld-input" type="text" id="us-last" /></div>
      </div>
      <div class="fld"><div class="fld-label">Cell phone</div><input class="fld-input" type="tel" id="us-cell" placeholder="555-123-4567" /></div>
      <div class="set-saverow"><button class="btn-primary" onclick="saveMyName()">Save profile</button><span id="us-name-msg" class="us-ok"></span></div>

      <div class="set-section-title" style="margin:0.9rem 0 0.5rem;">Email</div>
      <div class="fld">
        <input class="fld-input" type="email" id="us-email" autocomplete="email" />
        <div class="login-pwhint" style="color:var(--ink-soft);">Changing your email sends a confirmation link to the new address. You will need to confirm it there before you can sign in with it.</div>
      </div>
      <div class="set-saverow"><button class="btn-primary" onclick="saveMyEmail()">Change email</button><span id="us-email-msg" class="us-ok"></span></div>

      <div class="set-section-title" style="margin:0.9rem 0 0.4rem;">Password</div>
      <div id="us-pw-trigger"><a class="set-link" onclick="showChangePw()">Change password</a></div>
      <div id="us-pw-block" style="display:none;">
        <div class="fld"><div class="fld-label">Current password</div><div class="pw-wrap"><input class="fld-input" type="password" id="us-cur" autocomplete="current-password" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div></div>
        <div class="fld"><div class="fld-label">New password</div><div class="pw-wrap"><input class="fld-input" type="password" id="us-new" autocomplete="new-password" oninput="checkUsMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div><div class="login-pwhint" style="color:var(--ink-soft);">At least 10 characters, with an uppercase, lowercase, number, and special character.</div></div>
        <div class="fld"><div class="fld-label">Confirm new password</div><div class="pw-wrap"><input class="fld-input" type="password" id="us-new2" autocomplete="new-password" oninput="checkUsMatch()" /><button type="button" class="pw-eye" onclick="togglePw(this)" aria-label="Show password"></button></div><div class="login-pwhint" id="us-matchhint" style="display:none;color:var(--ink-soft);">✓ Passwords match</div></div>
        <div class="set-saverow"><button class="btn-primary" onclick="saveMyPassword()">Save password</button><span id="us-pw-msg" class="us-ok"></span></div>
      </div>

      <div class="set-section-title" style="margin:0.9rem 0 0.4rem;">Your color</div>
      <div class="us-color-row"><span class="us-color-dot" id="us-color-dot"></span><span style="font-size:0.8rem;color:var(--ink-soft);">Set by your company for who answered which message.</span></div>

      <div class="set-section-title" style="margin:0.9rem 0 0.3rem;">Notifications</div>
      <div id="push-section">
        <div id="push-state" style="font-size:0.8rem;color:var(--ink-soft);margin-bottom:0.5rem;">Checking...</div>
        <div class="set-saverow" id="push-enable-row" style="display:none;">
          <button class="btn-primary" id="push-enable-btn" onclick="pushEnable()">Turn on notifications</button>
          <button class="btn-ghost" id="push-disable-btn" onclick="pushDisable()" style="display:none;">Turn off on this device</button>
        </div>
        <div id="push-prefs" style="display:none;">
          <div class="fld"><div class="fld-label">New client message</div>
            <select class="fld-input" id="pp-client_message" onchange="pushSavePrefs()"><option value="all">All messages</option><option value="off">Off</option></select></div>
          <div class="fld"><div class="fld-label">Unknown number texts in</div>
            <select class="fld-input" id="pp-unknown_number" onchange="pushSavePrefs()"><option value="on">On</option><option value="off">Off</option></select></div>
          <div class="fld"><div class="fld-label">Takeover and handback</div>
            <select class="fld-input" id="pp-takeover_handback" onchange="pushSavePrefs()"><option value="all">On</option><option value="off">Off</option></select></div>
          <div class="fld"><div class="fld-label">New ticket</div>
            <select class="fld-input" id="pp-new_ticket" onchange="pushSavePrefs()"><option value="all">Every ticket</option><option value="mine">Only assigned to me</option><option value="off">Off</option></select></div>
          <div class="fld"><div class="fld-label">Ticket assigned to me</div>
            <select class="fld-input" id="pp-ticket_assigned" onchange="pushSavePrefs()"><option value="on">On</option><option value="off">Off</option></select></div>
          <div class="fld"><div class="fld-label">Follow up assigned to me</div>
            <select class="fld-input" id="pp-followup_assigned" onchange="pushSavePrefs()"><option value="on">On</option><option value="off">Off</option></select></div>

          <div class="set-section-title" style="margin:0.9rem 0 0.4rem;font-size:0.78rem;">Quiet hours</div>
          <div class="fld"><label style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;cursor:pointer;">
            <input type="checkbox" id="pp-quiet_enabled" onchange="pushSavePrefs()" /> No notifications during quiet hours</label></div>
          <div class="fld fld-row" id="pp-quiet-times">
            <div><div class="fld-label">From</div><select class="fld-input" id="pp-quiet_start" onchange="pushSavePrefs()"></select></div>
            <div><div class="fld-label">Until</div><select class="fld-input" id="pp-quiet_end" onchange="pushSavePrefs()"></select></div>
          </div>

          <div class="set-section-title" style="margin:0.9rem 0 0.4rem;font-size:0.78rem;">Mute</div>
          <div id="push-mute-state" style="font-size:0.78rem;color:var(--ink-soft);margin-bottom:0.4rem;"></div>
          <div class="set-saverow" style="gap:0.4rem;">
            <button class="btn-ghost" onclick="pushMute(1)">Mute 1 hour</button>
            <button class="btn-ghost" onclick="pushMute('tomorrow')">Until tomorrow</button>
            <button class="btn-ghost" id="push-unmute-btn" onclick="pushMute(0)" style="display:none;">Unmute</button>
          </div>
          <div class="set-saverow"><span id="push-msg" class="us-ok"></span></div>
        </div>
      </div>
    </div>
    <div class="wiz-foot" style="justify-content:flex-end;"><button class="btn-ghost" onclick="closeUserSettings()">Close</button></div>
  </div>
</div>

<script>
const PORTAL_URL = 'https://restwerks-portal-production.up.railway.app';

// ─── Address autocomplete (v1.60.8, via the portal Places proxy) ────────────────
// The Google Places key USED to sit right here as a literal string. This file ships to a public
// GitHub Pages repo, so it was public no matter how it was referrer locked, and GitHub's secret
// scanner flagged it. There is no version of a browser side key that is not public, so the key
// moved to the GOOGLE_PLACES_KEY env var on the portal and we call two authed portal routes
// instead. The quota now sits behind the dashboard login. Everything else here is unchanged: our
// own dropdown so it matches the dashboard styling, and graceful fallback to plain typing (rural
// addresses Places cannot find still save as whatever the integrator types), which now also covers
// the portal answering 503 because the env var is not set yet.

// Map Places (New) addressComponents into our four parts.
// Build the formatted display string from the four parts (street, city, state zip). This is what
// the header line and every existing reader of `address` show; the parts are the source of truth.
function composeAddress(st, ci, sta, zp) {
  st = (st || '').trim(); ci = (ci || '').trim(); sta = (sta || '').trim(); zp = (zp || '').trim();
  var stateZip = [sta, zp].filter(Boolean).join(' ');
  return [st, ci, stateZip].filter(Boolean).join(', ');
}

function parseAddressParts(components) {
  components = components || [];
  function get(type) { return components.find(function(c) { return (c.types || []).indexOf(type) !== -1; }); }
  var num = get('street_number'), route = get('route');
  var street = [num && num.longText, route && route.longText].filter(Boolean).join(' ');
  var cityC = get('locality') || get('postal_town') || get('sublocality') || get('sublocality_level_1');
  var stateC = get('administrative_area_level_1');
  var zipC = get('postal_code');
  return {
    street: street || '',
    city: (cityC && cityC.longText) || '',
    state: (stateC && stateC.shortText) || '',
    zip: (zipC && zipC.longText) || ''
  };
}

// Wire one address <input> to a Places typeahead. onPick({street,city,state,zip,formatted}) fires
// on selection. Idempotent per input. A session token groups the keystrokes + the details fetch
// into one billed session.
function wireAddressAutocomplete(inputId, onPick, opts) {
  var input = document.getElementById(inputId);
  if (!input || input._addrWired) return;
  input._addrWired = true;
  var fillInput = !(opts && opts.fillInput === false); // default: write the formatted string into the input
  function newToken() { return (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : (String(Date.now()) + Math.random()); }
  var token = newToken(), timer = null, lastQ = '';
  var box = document.createElement('div');
  box.className = 'addr-ac';
  box.style.display = 'none';
  if (getComputedStyle(input.parentNode).position === 'static') input.parentNode.style.position = 'relative';
  input.insertAdjacentElement('afterend', box);
  function close() { box.style.display = 'none'; box.innerHTML = ''; }
  input.addEventListener('input', function() {
    var q = input.value.trim();
    if (timer) clearTimeout(timer);
    if (q.length < 4) { close(); return; }
    timer = setTimeout(function() { runQuery(q); }, 250);
  });
  input.addEventListener('blur', function() { setTimeout(close, 200); });
  input.addEventListener('keydown', function(e) { if (e.key === 'Escape') close(); });
  function runQuery(q) {
    if (q === lastQ) return; lastQ = q;
    // The portal holds the key and fixes the region and the field mask server side, so this sends
    // only the typed text and the session token. Suggestions come back already trimmed to the
    // three fields drawn below.
    fetch(PORTAL_URL + '/api/places/autocomplete', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ input: q, sessionToken: token })
    }).then(function(r) { return r.ok ? r.json() : null; }).then(function(data) {
      if (!data || !data.suggestions) { close(); return; }
      var sugg = data.suggestions;
      if (!sugg.length) { close(); return; }
      box.innerHTML = '';
      sugg.forEach(function(p) {
        var main = p.main || '';
        var sec = p.secondary || '';
        var row = document.createElement('div');
        row.className = 'addr-ac-row';
        row.innerHTML = '<span class="addr-ac-main">' + esc(main) + '</span>' + (sec ? '<span class="addr-ac-sec">' + esc(sec) + '</span>' : '');
        row.addEventListener('mousedown', function(ev) { ev.preventDefault(); choose(p.placeId, main + (sec ? ', ' + sec : '')); });
        box.appendChild(row);
      });
      box.style.display = 'block';
    }).catch(function() { close(); });
  }
  function choose(placeId, fallbackText) {
    // The portal answers with Google's own field names here (addressComponents, formattedAddress)
    // so parseAddressParts below is untouched by the move.
    fetch(PORTAL_URL + '/api/places/details/' + encodeURIComponent(placeId) + '?sessionToken=' + encodeURIComponent(token), {
      credentials: 'include'
    }).then(function(r) { return r.ok ? r.json() : null; }).then(function(place) {
      token = newToken(); // the details fetch ends the billed session
      var parts = place ? parseAddressParts(place.addressComponents) : { street: '', city: '', state: '', zip: '' };
      parts.formatted = (place && place.formattedAddress) || fallbackText || input.value;
      if (fillInput) input.value = parts.formatted;
      close();
      if (onPick) onPick(parts);
    }).catch(function() { close(); });
  }
}

// Inject the dropdown styling once (kept with the module so there is one place to read it).
(function injectAddrAcStyle() {
  if (document.getElementById('addr-ac-style')) return;
  var st = document.createElement('style');
  st.id = 'addr-ac-style';
  st.textContent =
    '.addr-ac{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--panel,#1b2030);' +
    'border:1px solid var(--line,#2a3146);border-radius:8px;margin-top:3px;overflow:hidden;' +
    'box-shadow:0 8px 24px rgba(0,0,0,0.35);max-height:240px;overflow-y:auto;}' +
    '.addr-ac-row{padding:8px 10px;cursor:pointer;font-size:0.82rem;border-bottom:1px solid var(--line,#2a3146);}' +
    '.addr-ac-row:last-child{border-bottom:none;}' +
    '.addr-ac-row:hover{background:var(--hover,#232a3d);}' +
    '.addr-ac-main{color:var(--ink,#e7ecf5);display:block;}' +
    '.addr-ac-sec{color:var(--ink-soft,#8a93a8);display:block;font-size:0.72rem;margin-top:1px;}' +
    '.addr-parts{display:grid;grid-template-columns:2fr 1.4fr 0.8fr 1fr;gap:6px;margin-top:6px;}' +
    '.addr-parts input{width:100%;}' +
    '@media(max-width:640px){.addr-parts{grid-template-columns:1fr 1fr;}}';
  (document.head || document.documentElement).appendChild(st);
})();

// Wire the four statically present address inputs once the DOM is ready. The create-modal inputs
// stash their parsed parts into holders the submit functions read; the household pencil fills the
// four editable part fields under it. (Settings is wired in renderSettings since it is rebuilt.)
window._hhAddr = null; window._atAddr = null; window._wizAddr = null;
function initAddressAutocomplete() {
  wireAddressAutocomplete('hh-address', function(p) { window._hhAddr = p; });
  wireAddressAutocomplete('at-address', function(p) { window._atAddr = p; });
  wireAddressAutocomplete('wiz-address', function(p) { window._wizAddr = p; });
  wireAddressAutocomplete('hd-edit-street', function(p) {
    setVal('hd-edit-street', p.street); setVal('hd-edit-city', p.city);
    setVal('hd-edit-state', p.state); setVal('hd-edit-zip', p.zip);
  }, { fillInput: false });
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAddressAutocomplete);
else initAddressAutocomplete();

function rwFetch(path, opts) {
  opts = opts || {};
  opts.headers = opts.headers || {};
  var token = localStorage.getItem('rw-token');
  if (token) opts.headers['Authorization'] = 'Bearer ' + token;
  opts.credentials = 'include';
  return fetch(PORTAL_URL + path, opts);
}

// ─── QUICK MESSAGES (v1.29.0, Cluster A slice) ───────────────────────────────
// Integrator-level reusable templates. In a thread, Quick opens a popover and clicking one drops
// its body into the reply box (click-to-compose, a human always sends). In Settings, owners add,
// edit, reorder, and delete them. This list is the one source of truth the deferred Andi triggers
// will read later. window._quickMsgs caches the last load so the popover opens instantly.
window._quickMsgs = null;

async function loadQuickMsgs(force) {
  if (window._quickMsgs && !force) return window._quickMsgs;
  try {
    var res = await rwFetch('/api/quick-messages');
    if (!res.ok) { window._quickMsgs = window._quickMsgs || []; return window._quickMsgs; }
    window._quickMsgs = await res.json();
  } catch (e) { window._quickMsgs = window._quickMsgs || []; }
  return window._quickMsgs;
}

async function toggleQuickPop(e) {
  if (e) e.stopPropagation();
  var pop = document.getElementById('qm-pop');
  if (!pop) return;
  if (pop.style.display !== 'none') { pop.style.display = 'none'; return; }
  pop.innerHTML = '<div class="qm-pop-empty">Loading...</div>';
  pop.style.display = 'block';
  var msgs = await loadQuickMsgs(false);
  if (!msgs.length) {
    pop.innerHTML = '<div class="qm-pop-empty">No quick messages yet. An owner can add them in Settings.</div>';
    return;
  }
  pop.innerHTML = msgs.map(function(m, i) {
    return '<div class="qm-pop-item" onclick="insertQuickMsg(' + i + ')">' +
      '<div class="qm-pop-item-label">' + esc(m.label) + '</div>' +
      '<div class="qm-pop-item-body">' + esc(m.body) + '</div>' +
    '</div>';
  }).join('');
}

function insertQuickMsg(i) {
  var msgs = window._quickMsgs || [];
  var m = msgs[i];
  if (!m) return;
  var input = document.getElementById('reply-input');
  if (input) {
    input.value = m.body;
    input.style.height = 'auto';
    input.style.height = Math.min(input.scrollHeight, 80) + 'px';
    input.focus();
    try { input.setSelectionRange(input.value.length, input.value.length); } catch (e) {}
  }
  var pop = document.getElementById('qm-pop');
  if (pop) pop.style.display = 'none';
}

// Close the popover on any outside click (not on the Quick button or inside the popover).
document.addEventListener('click', function(e) {
  var pop = document.getElementById('qm-pop');
  if (!pop || pop.style.display === 'none') return;
  if (e.target.closest && (e.target.closest('#qm-pop') || (e.target.classList && e.target.classList.contains('reply-quick')))) return;
  pop.style.display = 'none';
});

// ── Settings editor (owner only) ──
async function loadQuickSettings() {
  var box = document.getElementById('qm-settings-body');
  if (!box) return;
  box.innerHTML = '<div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div>';
  var msgs = await loadQuickMsgs(true);
  renderQuickSettings(msgs);
}

function renderQuickSettings(msgs) {
  var box = document.getElementById('qm-settings-body');
  if (!box) return;
  var rows = '';
  if (!msgs.length) {
    rows = '<div style="color:var(--ink-soft);font-size:0.8rem;font-style:italic;padding:0.4rem 0;">No quick messages yet.</div>';
  } else {
    rows = msgs.map(function(m, i) {
      var up = i > 0 ? '<button class="qm-mini" title="Move up" onclick="moveQuickMsg(' + m.id + ',-1)">&#8593;</button>' : '';
      var dn = i < msgs.length - 1 ? '<button class="qm-mini" title="Move down" onclick="moveQuickMsg(' + m.id + ',1)">&#8595;</button>' : '';
      var dflt = m.is_default ? '<span class="qm-default-pill">Default</span>' : '';
      return '<div class="qm-row" id="qm-row-' + m.id + '">' +
        '<div class="qm-row-main">' +
          '<div class="qm-row-label">' + esc(m.label) + dflt + '</div>' +
          '<div class="qm-row-body">' + esc(m.body) + '</div>' +
        '</div>' +
        '<div class="qm-row-acts">' +
          '<div style="display:flex;gap:0.2rem;">' + up + dn + '</div>' +
          '<button class="qm-mini" onclick="editQuickMsg(' + m.id + ')">Edit</button>' +
          '<button class="qm-mini danger" onclick="deleteQuickMsg(' + m.id + ')">Delete</button>' +
        '</div>' +
      '</div>';
    }).join('');
  }
  box.innerHTML = rows +
    '<div style="margin-top:0.85rem;border-top:1px solid var(--border);padding-top:0.85rem;">' +
      '<div class="fld-label">Add a quick message</div>' +
      '<input class="fld-input" type="text" id="qm-new-label" placeholder="Label (e.g. Welcome and capabilities)" maxlength="80" />' +
      '<textarea class="fld-input" id="qm-new-body" placeholder="The message text. A teammate can edit it before sending." rows="3" style="resize:vertical;margin-top:0.4rem;"></textarea>' +
      '<div class="set-saverow"><button class="btn-primary" onclick="addQuickMsg()">Add</button></div>' +
    '</div>';
}

async function addQuickMsg() {
  var label = (document.getElementById('qm-new-label').value || '').trim();
  var body = (document.getElementById('qm-new-body').value || '').trim();
  if (!label) { alert('A label is required.'); return; }
  if (!body) { alert('A message is required.'); return; }
  try {
    var res = await rwFetch('/api/quick-messages', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ label: label, body: body })
    });
    if (!res.ok) { var er = await res.json().catch(function(){ return {}; }); alert(er.error || 'Could not add.'); return; }
    await loadQuickSettings();
  } catch (e) { alert('Could not add.'); }
}

function editQuickMsg(id) {
  var msgs = window._quickMsgs || [];
  var m = null;
  for (var i = 0; i < msgs.length; i++) { if (msgs[i].id === id) { m = msgs[i]; break; } }
  if (!m) return;
  var row = document.getElementById('qm-row-' + id);
  if (!row) return;
  row.innerHTML =
    '<div class="qm-edit-fields">' +
      '<input class="fld-input" type="text" id="qm-edit-label-' + id + '" value="' + esc(m.label) + '" maxlength="80" />' +
      '<textarea class="fld-input" id="qm-edit-body-' + id + '" rows="3" style="resize:vertical;">' + esc(m.body) + '</textarea>' +
      '<div class="set-saverow"><button class="btn-primary" onclick="saveQuickMsg(' + id + ')">Save</button><button class="btn-ghost" onclick="loadQuickSettings()">Cancel</button></div>' +
    '</div>';
}

async function saveQuickMsg(id) {
  var label = (document.getElementById('qm-edit-label-' + id).value || '').trim();
  var body = (document.getElementById('qm-edit-body-' + id).value || '').trim();
  if (!label) { alert('A label is required.'); return; }
  if (!body) { alert('A message is required.'); return; }
  try {
    var res = await rwFetch('/api/quick-messages/' + id, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ label: label, body: body })
    });
    if (!res.ok) { var er = await res.json().catch(function(){ return {}; }); alert(er.error || 'Could not save.'); return; }
    await loadQuickSettings();
  } catch (e) { alert('Could not save.'); }
}

async function deleteQuickMsg(id) {
  if (!confirm('Delete this quick message?')) return;
  try {
    var res = await rwFetch('/api/quick-messages/' + id, { method: 'DELETE' });
    if (!res.ok) { alert('Could not delete.'); return; }
    await loadQuickSettings();
  } catch (e) { alert('Could not delete.'); }
}

async function moveQuickMsg(id, dir) {
  var msgs = (window._quickMsgs || []).slice();
  var idx = -1;
  for (var i = 0; i < msgs.length; i++) { if (msgs[i].id === id) { idx = i; break; } }
  if (idx === -1) return;
  var swap = idx + dir;
  if (swap < 0 || swap >= msgs.length) return;
  var tmp = msgs[idx]; msgs[idx] = msgs[swap]; msgs[swap] = tmp;
  var ids = msgs.map(function(m){ return m.id; });
  try {
    var res = await rwFetch('/api/quick-messages/reorder', {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ids: ids })
    });
    if (!res.ok) { alert('Could not reorder.'); return; }
    await loadQuickSettings();
  } catch (e) { alert('Could not reorder.'); }
}

// ── UNREAD (team-consistent, data-derived) ───────────────────────────────────
// One rule, identical for every user, no browser state:
//   client spoke last, ANDI was the last team voice  -> unread (action): a real open loop. Andi
//                         punted and a client is waiting on a human. Stays sticky; viewing does NOT
//                         clear it (only a human reply, or a manual mark-as-read later, does).
//   client spoke last, a HUMAN was the last team voice -> the client is just acknowledging the human
//                         (a thumbs up, a "you tell me"), not an open loop. Clears on view, same as the
//                         Andi-last review case. Signal = last_human_at vs last_assistant_at from the
//                         portal (most recent team voice wins). summary/handback/ticket_marker rows have
//                         their own roles and never count as a team voice, so a session-close summary
//                         written after the client's ack cannot make it look Andi-last.
//   Andi spoke last     -> unread (review) until anyone on the team has opened it since that
//                         message (server gives last_viewed_any, shared team-wide).
//   team (human) spoke last -> read.
function threadUnread(t) {
  // v1.89.0: "seen, needs nothing". A person stamped this thread and nothing newer has arrived, so it
  // is read for everyone. The rules below are untouched; the next message puts it straight back.
  if (t.marked_read_at && t.last_message_at && new Date(t.last_message_at) <= new Date(t.marked_read_at)) return false;
  var role = t.preview_role;
  if (role === 'user') {
    // Which team voice came most recently, a human or Andi?
    var lh = t.last_human_at ? new Date(t.last_human_at) : null;
    var la = t.last_assistant_at ? new Date(t.last_assistant_at) : null;
    var humanWasLastVoice = lh && (!la || lh > la);
    if (humanWasLastVoice) {
      // Acknowledgment to a human: clears once anyone opens it.
      if (!t.last_viewed_any) return true;
      return new Date(t.last_message_at) > new Date(t.last_viewed_any);
    }
    return true; // Andi was the last team voice (or there was none): a real open loop, stays sticky.
  }
  if (role === 'assistant') {
    if (!t.last_viewed_any) return true;
    return new Date(t.last_message_at) > new Date(t.last_viewed_any);
  }
  return false; // human spoke last, or nothing to show
}
// Record that this user opened the thread (shared, team-wide). Returns the promise so callers can
// await it before reading viewers, so the opener appears in their own Seen by line immediately.
function recordView(phone) {
  try { return rwFetch('/api/conversations/' + encodeURIComponent(phone) + '/view', { method: 'POST' }); } catch (e) { return Promise.resolve(); }
}

// ── BADGE HELPERS ────────────────────────────────────────────────────────────
// v1.71.0: ONE writer for the three ticket badges. Both loadTickets and loadCounts compute the
// numbers their own way, which is unavoidable since one has the rows and the other has the stats,
// but neither decides which badges exist or what they are called. That decision lived in two
// places and they drifted, which is exactly how a status change could turn the red badge off and
// navigating back could turn it on again.
function tkBadgeCounts() {
  setBadge('tickets', window._openTickets || 0);
  setBadge('tickets-sched', window._schedTickets || 0);
  setBadge('tickets-waiting', window._waitingTickets || 0);
}

function setBadge(id, count) {
  var el = document.getElementById('badge-' + id);
  if (!el) return;
  if (count > 0) { el.textContent = count; el.style.display = ''; }
  else { el.style.display = 'none'; }
}

// ── LOGIN ────────────────────────────────────────────────────────────────────
async function doLogin() {
  var email = document.getElementById('login-email').value.trim().toLowerCase();
  var pw = document.getElementById('login-pw').value;
  var errEl = document.getElementById('login-error');
  var btn = document.querySelector('.login-btn');
  if (!email || !pw) { errEl.textContent = 'Email and password required.'; return; }
  btn.textContent = 'Signing in...'; btn.disabled = true; errEl.textContent = '';
  try {
    var res = await fetch(PORTAL_URL + '/auth/login', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
      body: JSON.stringify({ email: email, password: pw, rememberMe: document.getElementById('remember-me').checked })
    });
    var data = await res.json();
    if (!res.ok) {
      errEl.textContent = data.error || 'Incorrect email or password.';
      document.getElementById('login-pw').value = ''; btn.textContent = 'Sign in'; btn.disabled = false; return;
    }
    if (data.auth_token) localStorage.setItem('rw-token', data.auth_token);
    applyIntegratorContext(data);
    document.getElementById('login-screen').style.display = 'none';
    document.getElementById('app').style.display = 'block';
    loadRealConversations();
    startSSE();
    stampLoadedScreen();
  } catch (err) {
    errEl.textContent = 'Connection error. Please try again.'; btn.textContent = 'Sign in'; btn.disabled = false;
  }
}

async function tryAutoLogin() {
  // A set-password link takes priority over any stored session.
  var sp = new URLSearchParams(window.location.search).get('setpw');
  if (sp) { showSetpw(sp); return; }
  var token = localStorage.getItem('rw-token');
  if (!token) return;
  try {
    var res = await fetch(PORTAL_URL + '/auth/me', {
      headers: { 'Authorization': 'Bearer ' + token }, credentials: 'include'
    });
    // v1.96.0: only a refused sign in clears the token; a portal blip (503, 500) leaves you signed in for the next try.
    if (!res.ok) { if (res.status === 401 || res.status === 403) localStorage.removeItem('rw-token'); return; }
    var data = await res.json();
    applyIntegratorContext(data);
    document.getElementById('login-screen').style.display = 'none';
    document.getElementById('app').style.display = 'block';
    loadRealConversations();
    startSSE();
    stampLoadedScreen();
  } catch (err) {}
}
// Declared here, ABOVE the tryAutoLogin() call, so the set-password token captured
// from the URL on page load is not wiped by a later in-place initializer.
var _setpwToken = null;
tryAutoLogin();

function applyIntegratorContext(user) {
  window._rwUserId = user.id || null; // v1.96.0: the history stamps carry it
  var accent = user.integrator_brand_color || user.bubble_color || '#1D9E75';
  var name = user.integrator_name || 'RestWerks';
  var number = user.telnyx_number ? user.telnyx_number.replace('+1','').replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3') : '';
  var firstName = user.first_name || ''; var lastName = user.last_name || '';
  var fullName = (firstName + ' ' + lastName).trim();
  var initials = (firstName.charAt(0) + lastName.charAt(0)).toUpperCase();
  document.documentElement.style.setProperty('--i-brand', accent);
  document.getElementById('sb-name').innerHTML = name.replace(/(\S+)$/, '<span class="integrator-accent">$1</span>');
  document.getElementById('sb-number').textContent = number;
  document.getElementById('sb-username').textContent = fullName;
  document.getElementById('sb-role').textContent = user.role ? user.role.charAt(0).toUpperCase() + user.role.slice(1) : 'Owner';
  document.getElementById('sb-avatar').textContent = initials;
  document.getElementById('sb-avatar').style.background = user.bubble_color || accent;
  window._rwUser = user;
  applyAccountState(user);
  loadCompanyContext();
  loadCounts();
  // First-login gate. Owner only (a member cannot complete account setup).
  if (user.setup_completed === false && user.role === 'owner') {
    setTimeout(function() { openWizard(); }, 200);
  }
}

// ── ACCOUNT STATE (preview / verify banners) ─────────────────────────────────
function applyAccountState(user) {
  var prev = document.getElementById('acct-banner-preview');
  var ver = document.getElementById('acct-banner-verify');
  if (prev) prev.classList.toggle('show', !!user && user.status === 'preview');
  if (ver) ver.classList.toggle('show', !!user && user.email_verified === false);
}

// ── COMPANY CONTEXT + BRANDING (increment #3) ────────────────────────────────
var _rwCompany = null;

async function loadCompanyContext() {
  try {
    var res = await rwFetch('/api/company');
    if (!res.ok) return;
    _rwCompany = await res.json();
    window._rwCompany = _rwCompany;
    applyCompanyBranding(_rwCompany);
  } catch (e) {}
}

function applyCompanyBranding(c) {
  if (!c) return;
  var accent = c.brand_color || '#1D9E75';
  document.documentElement.style.setProperty('--i-brand', accent);
  var avatar = document.getElementById('sb-avatar');
  if (avatar) avatar.style.background = (window._rwUser && window._rwUser.bubble_color) || accent;
  // Logo / name in the sidebar header, per the company's sidebar logo choice (v1.43.0).
  // logo_only shows just the logo, name_only shows just the name, logo_name shows both;
  // a missing logo always falls back to the company name regardless of the choice.
  // v1.94.0 (Andy): the logo owns the top of the bar, centered and large; the name goes UNDER it, centered, wrapping
  // instead of cut off ("Admit One Sys..."); the phone number is centered under all of it.
  var nameEl = document.getElementById('sb-name');
  if (nameEl) {
    var layout = c.sidebar_logo_layout || 'logo_name';
    var nameHtml = esc(c.name || '').replace(/(\S+)$/, '<span class="integrator-accent">$1</span>');
    if (c.logo_url && layout === 'logo_only') {
      nameEl.innerHTML = '<div class="sb-brand"><img class="sb-logo-big" src="' + c.logo_url + '" alt="logo" /></div>';
    } else if (c.logo_url && layout !== 'name_only') {
      nameEl.innerHTML = '<div class="sb-brand"><img class="sb-logo-big" src="' + c.logo_url + '" alt="logo" />' +
        '<div class="sb-brandname-under">' + nameHtml + '</div></div>';
    } else if (c.name) {
      nameEl.innerHTML = '<div class="sb-brand"><div class="sb-brandname-under">' + nameHtml + '</div></div>';
    }
  }
}

// ── MY ANDI (v1.94.0) ───────────────────────────────────────────────────────
// The teammate's own thread with My Andi: texts to the shop's My Andi number and questions asked here are one thread.
// The portal hands a question to the same Andi that answers a text; nothing here decides anything.
var _ma = { messages: [], hasMore: false, sending: false, info: null, pendingSince: 0 };
function maBubble(m, showWho) {
  var mine = m.direction === 'in';
  var meta = [m.channel === 'dashboard' ? 'Desktop' : 'Text', fmtConvTime(m.created_at)];
  if (m.household_name) meta.push(m.household_name);
  if (showWho && mine) meta.unshift(showWho);
  return '<div class="ma-row ' + (mine ? 'me' : 'andi') + '"><div class="ma-b">' + esc(m.body || '') + '</div>' +
    '<div class="ma-meta">' + esc(meta.filter(Boolean).join(' · ')) + '</div></div>';
}
function maEmpty(info) {
  var num = info && info.number ? fmtPhone(info.number) : null;
  return '<div class="ma-empty">Ask Andi about any client: a name, a street or a phone number finds the house. Then ask for codes, open tickets, equipment, or what was noted there. Tell him what you did and it goes on the house record for the team, never to the client.' +
    (num ? '<br><br>The same Andi answers when you text <span style="white-space:nowrap;">' + esc(num) + '</span>.' : '') + '</div>';
}
function maRender(stick) {
  var box = document.getElementById('ma-thread'); if (!box) return;
  var atBottom = box.scrollHeight - box.scrollTop - box.clientHeight < 60;
  var html = '';
  if (_ma.hasMore) html += '<div class="ma-older" onclick="maOlder()">Show earlier</div>';
  if (!_ma.messages.length && !_ma.sending) html += maEmpty(_ma.info);
  _ma.messages.forEach(function (m) { html += maBubble(m); });
  if (_ma.sending) html += '<div class="ma-row andi ma-typing"><div class="ma-b">Andi is looking...</div></div>';
  box.innerHTML = html;
  if (stick !== false || atBottom) box.scrollTop = box.scrollHeight;
}
async function loadMyAndi(keep) {
  var err = document.getElementById('ma-err'); if (err && !keep) err.textContent = '';
  if (!keep) maToggleFixes(false); // v1.97.0: coming back to My Andi opens on the chat, never a stale list
  try {
    var res = await rwFetch('/api/myandi');
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not load My Andi.'; return; }
    _ma.info = data; _ma.messages = data.messages || []; _ma.hasMore = !!data.has_more;
    // a question that timed out is answered when an answer newer than it shows up; until then Send stays locked
    if (_ma.pendingSince) {
      var lastM = _ma.messages[_ma.messages.length - 1];
      if ((lastM && lastM.direction === 'out' && new Date(lastM.created_at).getTime() >= _ma.pendingSince - 5000) || Date.now() - _ma.pendingSince > 120000) {
        _ma.pendingSince = 0; var sb = document.getElementById('ma-send'); if (sb) sb.disabled = false; if (err) err.textContent = '';
      }
    }
    var num = document.getElementById('ma-number'); if (num) num.textContent = data.number ? 'Text ' + fmtPhone(data.number) : '';
    var cb = document.getElementById('ma-text-desktop'), wrap = document.getElementById('ma-pref-wrap');
    var can = !!(data.has_cell && data.number);
    if (cb) { cb.checked = !!data.text_desktop; cb.disabled = !can; }
    if (wrap) { wrap.classList.toggle('off', !can); wrap.title = can ? '' : (data.has_cell ? 'Your shop has no My Andi number yet.' : 'Add your cell phone in your profile first.'); }
    if (!data.connected && err) err.textContent = 'My Andi on the desktop is not connected yet. Texting still works.';
    maRender(true);
  } catch (e) { if (err) err.textContent = 'Connection error.'; }
}
async function maOlder() {
  if (!_ma.messages.length) return;
  try {
    var res = await rwFetch('/api/myandi?before=' + _ma.messages[0].id);
    var data = await res.json(); if (!res.ok) return;
    _ma.messages = (data.messages || []).concat(_ma.messages); _ma.hasMore = !!data.has_more;
    var box = document.getElementById('ma-thread'); var h = box ? box.scrollHeight : 0;
    maRender(false); if (box) box.scrollTop = box.scrollHeight - h;
  } catch (e) { /* the next open tries again */ }
}
function maKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); maSend(); } }
async function maSend() {
  var input = document.getElementById('ma-input'), err = document.getElementById('ma-err'), btn = document.getElementById('ma-send');
  var text = (input.value || '').trim();
  if (!text || _ma.sending) return;
  err.textContent = '';
  _ma.sending = true; btn.disabled = true;
  _ma.messages.push({ id: 0, direction: 'in', body: text, channel: 'dashboard', created_at: new Date().toISOString() });
  input.value = '';
  maRender(true);
  try {
    var res = await rwFetch('/api/myandi', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: text }) });
    var data = await res.json().catch(function () { return {}; });
    if (res.status === 504 && data.pending) { err.textContent = data.error; _ma.pendingSince = Date.now(); setTimeout(function () { loadMyAndi(true); }, 15000); }
    else if (!res.ok) { err.textContent = data.error || 'Andi is not reachable right now.'; input.value = text; _ma.messages.pop(); }
  } catch (e) { err.textContent = 'Connection error.'; input.value = text; _ma.messages.pop(); }
  _ma.sending = false; btn.disabled = !!_ma.pendingSince;
  await loadMyAndi(true);
  // the question may have reached Andi even though no answer came back: if the thread already holds it, never offer it again
  var lastIn = null;
  for (var i = _ma.messages.length - 1; i >= 0; i--) { if (_ma.messages[i].direction === 'in') { lastIn = _ma.messages[i]; break; } }
  if (input.value === text && lastIn && lastIn.body === text && Date.now() - new Date(lastIn.created_at).getTime() < 120000) {
    input.value = ''; err.textContent = 'Andi got your question but could not answer it. Try asking another way.';
  }
  input.focus();
}
async function maSavePref(on) {
  var err = document.getElementById('ma-err'); err.textContent = '';
  try {
    var res = await rwFetch('/api/me/myandi', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text_desktop: !!on }) });
    if (!res.ok) { var d = await res.json().catch(function () { return {}; }); err.textContent = d.error || 'Could not save.'; document.getElementById('ma-text-desktop').checked = !on; }
  } catch (e) { err.textContent = 'Connection error.'; document.getElementById('ma-text-desktop').checked = !on; }
}

// Settings, My Andi (Owners and Managers): the team's threads, the code lookup log, strangers. Read only.
var _mat = { team: [], sel: null, number: null };
async function loadMyAndiTeam() {
  var body = document.getElementById('myandi-team-body'); if (!body) return;
  try {
    var res = await rwFetch('/api/myandi/team'); var data = await res.json();
    if (!res.ok) { body.innerHTML = '<div class="set-section"><div class="set-readonly">' + esc(data.error || 'Could not load.') + '</div></div>'; return; }
    _mat.team = data.team || []; _mat.number = data.number || null;
    // v1.97.0: Fixes learned lives on the My Andi page, for the whole team (Andy, Oct 17 night).
    var html = '<div class="set-section"><div class="set-section-title">Team threads</div>';
    html += '<div class="set-section-note">Everyone\'s conversations with My Andi, newest first, by text' + (_mat.number ? ' to ' + esc(fmtPhone(_mat.number)) : '') + ' and on the desktop. Read only.</div>';
    html += '<div class="mat-wrap"><div class="mat-list" id="mat-list">';
    _mat.team.forEach(function (u) {
      var nm = ((u.first_name || '') + ' ' + (u.last_name || '')).trim() || 'Teammate';
      var sub = u.count ? u.count + ' message' + (u.count === 1 ? '' : 's') + ' · ' + fmtConvTime(u.last_at) : 'No messages yet';
      if (!u.active) sub = 'Removed · ' + sub;
      html += '<div class="mat-person' + (_mat.sel === u.id ? ' sel' : '') + '" onclick="matPick(' + u.id + ')"><div><div>' + esc(nm) + '</div><div class="mat-sub">' + esc(sub) + '</div></div><div class="mat-sub">' + esc(u.role_label || '') + '</div></div>';
    });
    if (!_mat.team.length) html += '<div class="mat-sub">Nobody on the team yet.</div>';
    html += '</div><div class="mat-thread"><div class="ma-thread" id="mat-thread"><div class="ma-empty">Pick a teammate to read their thread.</div></div></div></div></div>';
    html += '<div class="set-section"><div class="set-section-title">Code lookups</div><div class="set-section-note">Who asked My Andi for which house\'s codes, and when. If a phone is lost, this is the list.</div><div id="mat-codes"><div class="mat-sub">Loading...</div></div></div>';
    html += '<div class="set-section"><div class="set-section-title">Strangers</div><div class="set-section-note">Numbers that are not on your team that texted My Andi in the last 60 days. Each got one standard reply a day, and nothing else.</div><div id="mat-strangers"><div class="mat-sub">Loading...</div></div></div>';
    body.innerHTML = html;
    if (_mat.sel) matPick(_mat.sel, true);
    matLoadCodes(); matLoadStrangers();
  } catch (e) { body.innerHTML = '<div class="set-section"><div class="set-readonly">Connection error.</div></div>'; }
}
async function matPick(id, keep) {
  _mat.sel = id;
  document.querySelectorAll('#mat-list .mat-person').forEach(function (el) { el.classList.toggle('sel', el.getAttribute('onclick') === 'matPick(' + id + ')'); });
  var box = document.getElementById('mat-thread'); if (!box) return;
  if (!keep) box.innerHTML = '<div class="ma-empty">Loading...</div>';
  try {
    var res = await rwFetch('/api/myandi/team/' + id); var data = await res.json();
    if (!res.ok) { box.innerHTML = '<div class="ma-empty">' + esc(data.error || 'Could not load.') + '</div>'; return; }
    var u = (_mat.team || []).filter(function (x) { return x.id === id; })[0] || {};
    var who = (u.first_name || '').trim();
    var msgs = data.messages || [];
    box.innerHTML = msgs.length ? msgs.map(function (m) { return maBubble(m, who); }).join('') : '<div class="ma-empty">No messages with My Andi yet.</div>';
    box.scrollTop = box.scrollHeight;
  } catch (e) { box.innerHTML = '<div class="ma-empty">Connection error.</div>'; }
}
// v1.97.0 FIXES LEARNED on the My Andi page. Nothing is ever deleted: Didn't hold (with a reason) or Hide.
function maToggleFixes(force) {
  var f = document.getElementById('ma-fixes'), b = document.getElementById('ma-fixes-btn'); if (!f || !b) return;
  var show = typeof force === 'boolean' ? force : f.style.display === 'none';
  f.style.display = show ? '' : 'none';
  ['ma-thread'].forEach(function (id) { var e = document.getElementById(id); if (e) e.style.display = show ? 'none' : ''; });
  document.querySelectorAll('#panel-myandi .ma-compose, #panel-myandi .ma-foot').forEach(function (e) { e.style.display = show ? 'none' : ''; });
  b.textContent = show ? 'Back to chat' : 'Learned Resolutions';
  if (show) matLoadFixes();
}
async function matLoadFixes() {
  var el = document.getElementById('mat-fixes'); if (!el) return;
  try {
    var res = await rwFetch('/api/myandi/fixes'); var data = await res.json();
    var rows = (data && data.fixes) || [];
    if (!res.ok) { el.innerHTML = '<div class="mat-sub">' + esc(data.error || 'Could not load.') + '</div>'; return; }
    if (!rows.length) { el.innerHTML = '<div class="mat-sub">No resolutions yet. A tech teaches one by texting My Andi, for example "remember: Sonos Arc drops after the update, a factory reset resolves it".</div>'; return; }
    el.innerHTML = '<table class="mat-table"><tr><th>When</th><th>Who</th><th>Problem</th><th>Resolution</th><th>Held?</th><th></th></tr>' + rows.map(function (r) {
      var held = r.didnt_hold_at ? '<span class="mat-held">Didn\'t hold' + (r.didnt_hold_by ? ' (' + esc(r.didnt_hold_by) + ', ' + esc(fmtTime(r.didnt_hold_at)) + ')' : '') + (r.didnt_hold_reason ? ': ' + esc(String(r.didnt_hold_reason).slice(0, 300)) : '') + '</span>' : '<span class="mat-held">Not proven yet</span>';
      return '<tr><td>' + esc(fmtTime(r.created_at)) + '</td><td>' + esc(r.taught_by || '') + '</td><td>' + esc(String(r.problem || '').slice(0, 300)) + '</td><td>' + esc(String(r.fix || '').slice(0, 400)) + '</td><td>' + held + '</td><td style="white-space:nowrap;">' +
        (r.can_mark ? '<button class="btn-ghost" style="font-size:0.75rem;padding:0.2rem 0.5rem;" onclick="matDidntHold(' + Number(r.id) + ')">Didn\'t hold</button> ' : '') +
        (r.can_hide ? '<button class="btn-ghost" style="font-size:0.75rem;padding:0.2rem 0.5rem;" onclick="matHideFix(' + Number(r.id) + ')">Hide</button>' : '') + '</td></tr>';
    }).join('') + '</table>';
  } catch (e) { el.innerHTML = '<div class="mat-sub">Connection error.</div>'; }
}
async function matDidntHold(id) {
  var reason = prompt('What happened? For example: came back a week later at the house.');
  if (reason === null) return;
  reason = String(reason).trim();
  if (!reason) { alert('Say what happened, so the next tech knows.'); return; }
  try {
    var res = await rwFetch('/api/myandi/fixes/' + Number(id) + '/didnt-hold', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ reason: reason }) });
    if (!res.ok) { var d = await res.json().catch(function () { return {}; }); alert(d.error || 'Could not mark it.'); }
  } catch (e) { alert('Connection error.'); }
  matLoadFixes();
}
async function matHideFix(id) {
  if (!confirm('Hide this resolution? Andi stops using it. It stays on record.')) return;
  try {
    var res = await rwFetch('/api/myandi/fixes/' + Number(id) + '/hide', { method: 'POST' });
    if (!res.ok) { var d = await res.json().catch(function () { return {}; }); alert(d.error || 'Could not hide it.'); }
  } catch (e) { alert('Connection error.'); }
  matLoadFixes();
}
async function matLoadCodes() {
  var el = document.getElementById('mat-codes'); if (!el) return;
  try {
    var res = await rwFetch('/api/myandi/codes'); var data = await res.json();
    var rows = (data && data.lookups) || [];
    if (!res.ok) { el.innerHTML = '<div class="mat-sub">' + esc(data.error || 'Could not load.') + '</div>'; return; }
    if (!rows.length) { el.innerHTML = '<div class="mat-sub">No code lookups yet.</div>'; return; }
    el.innerHTML = '<table class="mat-table"><tr><th>When</th><th>Who</th><th>House</th><th>Codes</th></tr>' + rows.map(function (r) {
      return '<tr><td>' + esc(fmtTime(r.created_at)) + '</td><td>' + esc(((r.first_name || '') + ' ' + (r.last_name || '')).trim()) + '</td><td>' + esc(r.household_name || '') + '</td><td>' + esc(String(r.fields || '').split(',').join(', ')) + '</td></tr>';
    }).join('') + '</table>';
  } catch (e) { el.innerHTML = '<div class="mat-sub">Connection error.</div>'; }
}
async function matLoadStrangers() {
  var el = document.getElementById('mat-strangers'); if (!el) return;
  try {
    var res = await rwFetch('/api/myandi/strangers'); var data = await res.json();
    var rows = (data && data.strangers) || [];
    if (!res.ok) { el.innerHTML = '<div class="mat-sub">' + esc(data.error || 'Could not load.') + '</div>'; return; }
    if (!rows.length) { el.innerHTML = '<div class="mat-sub">Nobody outside the team has texted My Andi.</div>'; return; }
    el.innerHTML = '<table class="mat-table"><tr><th>Number</th><th>Texts</th><th>Last</th><th>Last text</th></tr>' + rows.map(function (r) {
      return '<tr><td>' + esc(fmtPhone(r.from_number || '')) + '</td><td>' + esc(String(r.n)) + '</td><td>' + esc(fmtTime(r.last_at)) + '</td><td>' + esc(String(r.last_body || '').slice(0, 140)) + '</td></tr>';
    }).join('') + '</table>';
  } catch (e) { el.innerHTML = '<div class="mat-sub">Connection error.</div>'; }
}

// ── SETUP WIZARD ─────────────────────────────────────────────────────────────
var _wizStep = 1;
var _wizLogoFile = null;

async function openWizard() {
  // Pull the current record so re-running setup prefills correctly.
  if (!_rwCompany) { try { var r = await rwFetch('/api/company'); if (r.ok) { _rwCompany = await r.json(); window._rwCompany = _rwCompany; } } catch (e) {} }
  var c = _rwCompany || {};
  setVal('wiz-name', c.name || (window._rwUser && window._rwUser.integrator_name) || '');
  setVal('wiz-address', c.address || '');
  window._wizAddr = { street: c.address_street || '', city: c.address_city || '', state: c.address_state || '', zip: c.address_zip || '' };
  setVal('wiz-phone', c.office_phone || '');
  setVal('wiz-email', c.company_email || '');
  var c1 = c.brand_color || '#1D9E75';
  setColor(1, c1); setColor(2, c.brand_color_2 || ''); setColor(3, c.brand_color_3 || '');
  _wizLogoFile = null;
  renderWizLogo(c.logo_url || null);
  wizGoStep(1);
  document.getElementById('wiz-overlay').classList.add('show');
}
function closeWizard() { document.getElementById('wiz-overlay').classList.remove('show'); }

function wizGoStep(n) {
  _wizStep = n;
  for (var i = 1; i <= 3; i++) {
    document.getElementById('wiz-step-' + i).classList.toggle('on', i === n);
    document.getElementById('wiz-pip-' + i).classList.toggle('on', i <= n);
  }
  var titles = { 1:'Set up your company', 2:'Make it yours', 3:'You are set up' };
  var subs = {
    1:'A few details so Andi can introduce your company correctly. All of this is optional and you can change it anytime in Settings.',
    2:'Add your logo and brand colors. Optional, and easy to change later.'
  };
  document.getElementById('wiz-title').textContent = titles[n];
  if (subs[n]) document.getElementById('wiz-sub').textContent = subs[n];
  document.getElementById('wiz-sub').style.display = subs[n] ? '' : 'none';
}

function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v; }
function setColor(slot, hex) {
  var pick = document.getElementById('wiz-c' + slot);
  var text = document.getElementById('wiz-c' + slot + '-hex');
  if (hex) { if (/^#[0-9a-fA-F]{6}$/.test(hex)) pick.value = hex; text.value = hex; }
  else { text.value = ''; }
}
function wizSyncColor(slot, from) {
  var pick = document.getElementById('wiz-c' + slot);
  var text = document.getElementById('wiz-c' + slot + '-hex');
  if (from === 'pick') text.value = pick.value;
  else if (/^#[0-9a-fA-F]{6}$/.test(text.value)) pick.value = text.value;
}

function wizLogoChosen(input) {
  if (!input.files || !input.files[0]) return;
  _wizLogoFile = input.files[0];
  var reader = new FileReader();
  reader.onload = function(e) { renderWizLogo(e.target.result); };
  reader.readAsDataURL(_wizLogoFile);
}
function renderWizLogo(url) {
  var zone = document.getElementById('wiz-logo-zone');
  var prev = document.getElementById('wiz-logo-preview');
  if (url) { document.getElementById('wiz-logo-img').src = url; prev.style.display = 'flex'; zone.style.display = 'none'; }
  else { prev.style.display = 'none'; zone.style.display = 'block'; }
}
function wizRemoveLogo() {
  _wizLogoFile = null;
  renderWizLogo(null);
  // Clear any stored logo on the server too.
  rwFetch('/api/company/logo/remove', { method: 'POST' }).catch(function(){});
  if (_rwCompany) { _rwCompany.logo_url = null; _rwCompany.logo_r2_key = null; }
}

async function wizSaveStep1() {
  var btn = document.getElementById('wiz-next-1');
  var err = document.getElementById('wiz-err-1');
  err.textContent = '';
  var name = document.getElementById('wiz-name').value.trim();
  if (!name) { err.textContent = 'Company name is required.'; return; }
  btn.disabled = true; btn.textContent = 'Saving...';
  try {
    var res = await rwFetch('/api/company', {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: name,
        address: document.getElementById('wiz-address').value,
        address_street: (window._wizAddr || {}).street || '', address_city: (window._wizAddr || {}).city || '',
        address_state: (window._wizAddr || {}).state || '', address_zip: (window._wizAddr || {}).zip || '',
        office_phone: document.getElementById('wiz-phone').value,
        company_email: document.getElementById('wiz-email').value
      })
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not save.'; btn.disabled = false; btn.textContent = 'Continue'; return; }
    wizGoStep(2);
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Continue';
}

async function wizSaveStep2() {
  var btn = document.getElementById('wiz-next-2');
  var err = document.getElementById('wiz-err-2');
  err.textContent = '';
  btn.disabled = true; btn.textContent = 'Saving...';
  try {
    // Upload logo first if a new file was chosen.
    if (_wizLogoFile) {
      var fd = new FormData(); fd.append('logo', _wizLogoFile);
      var up = await rwFetch('/api/company/logo', { method: 'POST', body: fd });
      if (!up.ok) { var ue = await up.json(); err.textContent = ue.error || 'Logo upload failed.'; btn.disabled = false; btn.textContent = 'Continue'; return; }
      _wizLogoFile = null;
    }
    var colors = { brand_color: document.getElementById('wiz-c1-hex').value.trim() };
    var c2 = document.getElementById('wiz-c2-hex').value.trim();
    var c3 = document.getElementById('wiz-c3-hex').value.trim();
    colors.brand_color_2 = c2; colors.brand_color_3 = c3;
    var res = await rwFetch('/api/company', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(colors) });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not save.'; btn.disabled = false; btn.textContent = 'Continue'; return; }
    await loadCompanyContext();
    wizGoStep(3);
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Continue';
}

function wizSkip(toStep) { wizGoStep(toStep); }

async function wizFinish(route) {
  try { await rwFetch('/api/company/complete-setup', { method: 'POST' }); } catch (e) {}
  if (window._rwUser) window._rwUser.setup_completed = true;
  closeWizard();
  await loadCompanyContext();
  if (route === 'household') { nav('households', navItem('households')); setTimeout(openAddHousehold, 250); }
  else { nav('dashboard', navItem('dashboard')); }
}

// ── COMPANY SETTINGS PANEL ───────────────────────────────────────────────────
async function loadSettings() {
  var body = document.getElementById('settings-body');
  try {
    var res = await rwFetch('/api/company');
    if (!res.ok) { body.innerHTML = '<div class="placeholder-body">Could not load settings.</div>'; return; }
    _rwCompany = await res.json(); window._rwCompany = _rwCompany;
    renderSettings(_rwCompany);
  } catch (e) { body.innerHTML = '<div class="placeholder-body">Connection error.</div>'; }
}

function renderSettings(c) {
  // v1.94.0: by permission. isOwner keeps its name and now means may change the company settings (Owner or Manager).
  var isOwner = rwCan('company.settings'), canTeam = rwCan('team.manage'), canThreads = rwCan('threads.admin'), canMyAndiTeam = rwCan('myandi.team');
  var ro = isOwner ? '' : ' disabled';
  var status = (c.status || 'preview');
  var slot = document.getElementById('set-status-slot');
  if (slot) slot.innerHTML = '<span class="set-status-pill ' + status + '">' + status + '</span>';

  var num = c.telnyx_number ? c.telnyx_number.replace('+1','').replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3') : 'Not assigned yet';
  var logoBlock = c.logo_url
    ? '<div class="logo-preview"><img src="' + c.logo_url + '" alt="logo" />' + (isOwner ? '<button class="btn-ghost" style="margin-left:auto;" onclick="settingsRemoveLogo()">Remove</button>' : '') + '</div>'
    : '<div class="logo-drop" ' + (isOwner ? 'onclick="document.getElementById(\'set-logo-file\').click()"' : '') + '>' + (isOwner ? 'Click to upload a logo. PNG or JPG.' : 'No logo set.') + '</div>';

  var html = '';
  // Identity strip at the very top: the two "which account is this" values, read-only, copyable.
  html += '<div class="id-strip">';
  html += '<div class="id-cell"><div class="id-cell-label">Account ID</div>';
  html += '<div class="id-cell-row"><span class="id-cell-val" id="acct-id-val">' + esc(formatAccountId()) + '</span>';
  html += '<button class="id-cell-copy" id="acct-id-copy" onclick="copyAccountId()">Copy</button></div></div>';
  html += '<div class="id-cell"><div class="id-cell-label">SMS number</div>';
  if (c.telnyx_number) {
    html += '<div class="id-cell-row"><span class="id-cell-val" id="sms-num-val">' + esc(num) + '</span>';
    html += '<button class="id-cell-copy" id="sms-num-copy" onclick="copySmsNumber()">Copy</button></div>';
  } else {
    html += '<div class="id-cell-row"><span class="id-cell-empty">Not assigned yet</span></div>';
  }
  html += '</div></div>';

  // v1.43.0: tabs. The identity strip above stays pinned on every tab; everything below splits into panels.
  html += '<div class="set-tabs">';
  html += '<button class="hd-tab active" data-settab="info" onclick="setTab(\'info\')">Info</button>';
  html += '<button class="hd-tab" data-settab="team" onclick="setTab(\'team\')">Team</button>';
  html += '<button class="hd-tab" data-settab="branding" onclick="setTab(\'branding\')">Branding</button>';
  html += '<button class="hd-tab" data-settab="andi" onclick="setTab(\'andi\')">Andi</button>';
  html += '<button class="hd-tab" data-settab="tickets" onclick="setTab(\'tickets\')">Tickets</button>';
  html += '<button class="hd-tab" data-settab="oncall" onclick="setTab(\'oncall\');loadOnCall()">On call</button>';
  if (canMyAndiTeam) html += '<button class="hd-tab" data-settab="myandi" onclick="setTab(\'myandi\');loadMyAndiTeam()">My Andi</button>';
  if (canThreads) html += '<button class="hd-tab" data-settab="conversations" onclick="setTab(\'conversations\');loadThreadAdmin()">Conversations</button>';
  html += '</div>';

  // ── INFO ────────────────────────────────────────────────────────────────────
  html += '<div class="set-tabpanel active" id="settab-info">';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Company info</div>';
  html += '<div class="set-section-note">How Andi refers to your company.</div>';
  html += '<div class="fld"><div class="fld-label">Company name</div><input class="fld-input" type="text" id="set-name" value="' + esc(c.name || '') + '"' + ro + ' /></div>';
  html += '<div class="fld-label">Address</div>';
  html += '<div class="addr-parts">'
    + '<input class="fld-input" type="text" id="set-street" placeholder="Street" value="' + esc(c.address_street || '') + '"' + ro + ' />'
    + '<input class="fld-input" type="text" id="set-city" placeholder="City" value="' + esc(c.address_city || '') + '"' + ro + ' />'
    + '<input class="fld-input" type="text" id="set-state" placeholder="State" value="' + esc(c.address_state || '') + '"' + ro + ' />'
    + '<input class="fld-input" type="text" id="set-zip" placeholder="ZIP" value="' + esc(c.address_zip || '') + '"' + ro + ' /></div>';
  html += '<div class="fld fld-row"><div><div class="fld-label">Office phone</div><input class="fld-input" type="tel" id="set-phone" value="' + esc(c.office_phone || '') + '"' + ro + ' /></div>';
  html += '<div><div class="fld-label">Company email</div><input class="fld-input" type="email" id="set-email" value="' + esc(c.company_email || '') + '"' + ro + ' /></div></div>';
  html += '<div class="fld"><div class="fld-label">Company website</div><input class="fld-input" type="url" id="set-website" placeholder="https://yourcompany.com" value="' + esc(c.company_website || '') + '"' + ro + ' /></div>';
  html += '<div class="fld"><div class="fld-label">Timezone</div>' + tzSelect(c.timezone, isOwner) + '</div>';
  if (isOwner) html += '<div class="set-saverow"><button class="btn-primary" onclick="settingsSaveInfo()">Save</button><span class="set-saved" id="set-saved-info">Saved</span></div>';
  html += '</div>';
  if (isOwner) {
    html += '<div class="set-section">';
    html += '<div class="set-section-title">Setup</div>';
    html += '<div class="set-section-note">Walk through the setup steps again anytime.</div>';
    html += '<a class="set-link" onclick="openWizard()">Run setup wizard again</a>';
    html += '</div>';
  }
  html += '</div>';

  // ── BRANDING ────────────────────────────────────────────────────────────────
  html += '<div class="set-tabpanel" id="settab-branding">';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Branding</div>';
  html += '<div class="set-section-note">Logo and brand colors carry into your dashboard. The first color is your main accent.</div>';
  html += '<input type="file" id="set-logo-file" accept="image/*" style="display:none;" onchange="settingsLogoChosen(this)" />';
  html += '<div class="fld">' + logoBlock + '</div>';
  html += '<div class="fld"><div class="fld-label">Brand colors</div><div class="color-row">';
  html += colorCell('set', 1, c.brand_color || '#1D9E75', isOwner);
  html += colorCell('set', 2, c.brand_color_2 || '', isOwner);
  html += colorCell('set', 3, c.brand_color_3 || '', isOwner);
  html += '</div></div>';
  if (isOwner) html += '<div class="set-saverow"><button class="btn-primary" onclick="settingsSaveBranding()">Save</button><span class="set-saved" id="set-saved-brand">Saved</span></div>';
  html += '</div>';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Sidebar logo</div>';
  html += '<div class="set-section-note">Choose what shows at the top of the sidebar for your whole company. If no logo is set, your company name always shows.</div>';
  var _layout = c.sidebar_logo_layout || 'logo_name';
  html += logoLayoutRow('logo_name', 'Logo and name', _layout, isOwner);
  html += logoLayoutRow('logo_only', 'Logo only', _layout, isOwner);
  html += logoLayoutRow('name_only', 'Name only', _layout, isOwner);
  html += '</div>';
  html += '</div>';

  // ── ANDI (voice/tone + quick messages) ──────────────────────────────────────
  html += '<div class="set-tabpanel" id="settab-andi">';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Andi voice</div>';
  html += '<div class="set-section-note">How you want Andi to sound for your company. The personality and tone in his replies to your clients.</div>';
  html += '<textarea class="fld-input" id="set-andi-voice" rows="5" placeholder="Friendly and plain spoken. Warm but to the point. No slang." style="resize:vertical;min-height:96px;line-height:1.5;"' + ro + '>' + esc(c.andi_voice || '') + '</textarea>';
  if (isOwner) html += '<div class="set-saverow"><button class="btn-primary" onclick="settingsSaveAndi()">Save</button><span class="set-saved" id="set-saved-andi">Saved</span></div>';
  html += '</div>';
  if (isOwner) {
    html += '<div class="set-section">';
    html += '<div class="set-section-title">Quick messages</div>';
    html += '<div class="set-section-note">Reusable texts your team can drop into a reply with one tap. The Quick button sits next to Send in every conversation. A teammate can edit the text before sending; nothing is ever sent automatically.</div>';
    html += '<div id="qm-settings-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '</div>';
  }
  html += '</div>';

  // ── TEAM ────────────────────────────────────────────────────────────────────
  // ── TICKETS (v1.66.0) ───────────────────────────────────────────────────────
  html += '<div class="set-tabpanel" id="settab-tickets">';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Ticket statuses</div>';
  html += '<div class="set-section-note">Your board, your words. Rename any status and decide whether time spent in it counts toward the resolution clock. Open, Scheduled, Resolved and Closed cannot be removed and their meaning cannot change, because counts and the resolution rate are built on them. Open and Scheduled also keep their colours, so a screenshot from your board reads the same to anyone helping you.</div>';
  if (isOwner) {
    html += '<div id="vocab-status-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '<div class="vocab-add">';
    html += '<input class="fld-input" id="vocab-status-new" type="text" placeholder="Add a status, e.g. Waiting on a Ladder" style="flex:1;" />';
    html += '<button class="btn-primary" onclick="vocabAddStatus()">Add</button></div>';
    html += '<div class="hd-err" id="vocab-status-err" style="margin-top:0.4rem;"></div>';
  } else {
    html += '<div class="set-readonly">Only an owner or a manager can change the status list.</div>';
  }
  html += '</div>';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Urgency</div>';
  html += '<div class="set-section-note">A separate axis from status: a ticket can be waiting on parts and still be critical. One priority is the default and every new ticket starts there.</div>';
  if (isOwner) {
    html += '<div id="vocab-prio-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '<div class="vocab-add">';
    html += '<input class="fld-input" id="vocab-prio-new" type="text" placeholder="Add an urgency level" style="flex:1;" />';
    html += '<button class="btn-primary" onclick="vocabAddPriority()">Add</button></div>';
    html += '<div class="hd-err" id="vocab-prio-err" style="margin-top:0.4rem;"></div>';
  } else {
    html += '<div class="set-readonly">Only an owner or a manager can change the urgency list.</div>';
  }
  html += '</div>';
  // ── CATEGORIES (v1.76.0) ──────────────────────────────────────────────────
  // Narrower on purpose than the two editors above it. A shop can rename a parent, hide one it
  // does not service, and split a child finer. It cannot add or remove a parent, because every
  // number on the home panel is a ratio and a parent that appears in June makes every earlier
  // comparison dishonest.
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Categories</div>';
  html += '<div class="set-section-note">What kind of problem a ticket is. The eleven categories are fixed so your numbers stay comparable month to month, but you can rename one to your own words and hide anything you do not service. Inside each one you can add your own subcategories as you find you need them. Hiding never changes a count: tickets already filed under a category keep counting.</div>';
  if (isOwner) {
    html += '<div id="vocab-cat-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '<div class="hd-err" id="vocab-cat-err" style="margin-top:0.4rem;"></div>';
  } else {
    html += '<div class="set-readonly">Only an owner or a manager can change the category list.</div>';
  }
  html += '</div>';
  html += '</div>';

  html += '<div class="set-tabpanel" id="settab-team">';
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Team</div>';
  html += '<div class="set-section-note">People who can log in to this dashboard. The envelope is the morning summary, click it to toggle a teammate. Use Also send to for emails that are not logins, like a shared inbox.</div>';
  if (canTeam) {
    html += '<div id="team-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '<div style="margin-top:0.85rem;"><button class="btn-primary" onclick="openAddUser()">+ Add teammate</button></div>';
  } else {
    html += '<div class="set-readonly">Only an owner or a manager can manage the team.</div>';
  }
  html += '</div>';
  html += '</div>';

  // ── ON CALL (v1.91.0) ──────────────────────────────────────────────────────
  // Every teammate can see who is on call. What they may change comes back from the portal.
  html += '<div class="set-tabpanel" id="settab-oncall"><div id="oncall-body"><div class="set-section"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div></div></div>';

  // ── CONVERSATIONS (v1.78.0) ─────────────────────────────────────────────────
  // Named for what it governs, like every other tab in this strip. Settings > Tickets already
  // shares a name with the Tickets panel without confusing anybody. A Data or Privacy tab is
  // a different thing and belongs to the client-deletion workflow, which spans households,
  // threads and the learning pool rather than living in any one of them.
  // Owner only, and the tab is not rendered at all for a member rather than rendered
  // disabled: a control nobody may use should not be visible to them.
  // v1.94.0: SETTINGS, MY ANDI. Owners and Managers: the team's threads, the code lookup log, strangers. Read only.
  if (canMyAndiTeam) {
    html += '<div class="set-tabpanel" id="settab-myandi"><div id="myandi-team-body"><div class="set-section"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div></div></div>';
  }
  if (canThreads) {
    html += '<div class="set-tabpanel" id="settab-conversations">';
    html += '<div class="set-section">';
    html += '<div class="set-section-title">Conversations</div>';
    html += '<div class="set-section-note">Archive hides a thread from the Conversations list and changes nothing else: no message is lost and no number on the home panel moves. Restore puts it straight back. Delete permanently removes every message, summary and ticket marker on that number, cannot be undone, and will drop the home panel counts, because those are measured from these messages.</div>';
    html += '<div id="thread-admin-body"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading...</div></div>';
    html += '</div>';
    html += '</div>';
  }

  document.getElementById('settings-body').innerHTML = html;
  wireAddressAutocomplete('set-street', function(p) {
    setVal('set-street', p.street); setVal('set-city', p.city);
    setVal('set-state', p.state); setVal('set-zip', p.zip);
  }, { fillInput: false });
  if (canTeam) { loadTeam(); loadSummaryRecipients(c); }
  if (isOwner) { loadQuickSettings(); renderVocabEditors(); }
}

// ── THREAD ADMIN (v1.78.0) ───────────────────────────────────────────────────
// The LIST only. No message bodies are fetched or shown here: this screen exists to pick a
// thread to remove, not to read one. /api/conversations already carries everything the row
// needs, so there is no new route behind this.
async function loadThreadAdmin() {
  var body = document.getElementById('thread-admin-body');
  if (!body) return;
  try {
    var res = await rwFetch('/api/conversations');
    if (!res.ok) { body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.8rem;">Could not load conversations.</div>'; return; }
    window._threadAdminRows = await res.json();
    renderThreadAdmin();
  } catch (err) {
    body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.8rem;">Could not reach the server.</div>';
  }
}

function esc1(v) { return String(v == null ? '' : v).replace(/\\/g, '\\\\').replace(/'/g, "\\'"); }

function renderThreadAdmin() {
  var body = document.getElementById('thread-admin-body');
  if (!body) return;
  var rows = window._threadAdminRows || [];
  if (!rows.length) { body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.8rem;">No conversations.</div>'; return; }
  var html = '';
  rows.forEach(function(t) {
    // v1.89.0: THE KEY, NOT THE PHONE. An email only thread has phone_number null, so this row
    // printed null and its buttons asked the portal to archive a thread called null.
    var key = t.thread_key || t.phone_number || '';
    var full = t.first_name ? (t.first_name + ' ' + (t.last_name || '')).trim() : '';
    var name = full || key;
    var sub = [];
    if (full) sub.push(key);
    if (t.household_name) sub.push(t.household_name);
    sub.push((t.message_count || 0) + ' message' + (Number(t.message_count) === 1 ? '' : 's'));
    if (t.removed) sub.push('no household');
    else if (!t.attached) sub.push(t.phone_number ? 'unknown number' : 'unknown address');
    if (t.archived) sub.push('archived');
    html += '<div style="display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid var(--border);">'
      + '<div style="min-width:0;">'
      + '<div style="font-size:0.82rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(name) + '</div>'
      + '<div style="font-size:0.72rem;color:var(--ink-soft);">' + esc(sub.join(' \u00b7 ')) + '</div>'
      + '</div>'
      + '<div style="display:flex;gap:0.4rem;flex:none;">'
      + '<button class="btn-ghost" style="font-size:0.72rem;padding:0.25rem 0.6rem;" onclick="convArchive(\'' + esc1(key) + '\',' + (t.archived ? 'false' : 'true') + ')">' + (t.archived ? 'Restore' : 'Archive') + '</button>'
      + '<button class="btn-ghost" style="font-size:0.72rem;padding:0.25rem 0.6rem;opacity:0.65;" onclick="convDelete(\'' + esc1(key) + '\',\'' + esc1(name) + '\')">Delete</button>'
      + '</div>'
      + '</div>';
  });
  body.innerHTML = html;
}

// ── ON CALL (v1.91.0) ────────────────────────────────────────────────────────
// Setup only. The portal decides who may edit what and who is on call right now; this renders it and
// re-reads after every write, so the tab always shows what the server stored.
var OC_DAYS = [['mon','Monday'],['tue','Tuesday'],['wed','Wednesday'],['thu','Thursday'],['fri','Friday'],['sat','Saturday'],['sun','Sunday']];
var _oc = null;

async function loadOnCall() {
  var body = document.getElementById('oncall-body');
  if (!body) return;
  try {
    var res = await rwFetch('/api/oncall');
    if (!res.ok) { body.innerHTML = '<div class="set-section"><div class="set-readonly">Could not load on call.</div></div>'; return; }
    _oc = await res.json();
    renderOnCall();
  } catch (e) { body.innerHTML = '<div class="set-section"><div class="set-readonly">Connection error.</div></div>'; }
}

function ocName(id) {
  var u = ((_oc && _oc.team) || []).filter(function(x){ return x.id === id; })[0];
  return u ? ((u.first_name || '') + ' ' + (u.last_name || '')).trim() : 'Someone';
}
function ocDayLabel(ymd, withYear) {
  var d = new Date(ymd + 'T12:00:00Z');
  var opts = { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' };
  if (withYear) opts.year = 'numeric';
  return d.toLocaleDateString('en-US', opts);
}
function ocAddDays(ymd, n) { var d = new Date(ymd + 'T12:00:00Z'); d.setUTCDate(d.getUTCDate() + n); return d.toISOString().slice(0, 10); }
function ocFmt12(hhmm) {
  if (!hhmm) return '';
  var p = hhmm.split(':'), h = Number(p[0]), m = p[1];
  var ap = h >= 12 ? 'PM' : 'AM'; h = h % 12; if (h === 0) h = 12;
  return h + ':' + m + ' ' + ap;
}
function ocPicker(selected, onchange, disabled) {
  var eligible = (_oc.team || []).filter(function(u){ return u.eligible; });
  var h = '<select class="fld-input" onchange="' + onchange + '"' + (disabled ? ' disabled' : '') + '>';
  h += '<option value="">Nobody</option>';
  var found = false;
  eligible.forEach(function(u){
    var on = u.id === selected; if (on) found = true;
    h += '<option value="' + u.id + '"' + (on ? ' selected' : '') + '>' + esc(((u.first_name || '') + ' ' + (u.last_name || '')).trim()) + '</option>';
  });
  if (selected && !found) h += '<option value="' + selected + '" selected disabled>' + esc(ocName(selected)) + ' (not eligible)</option>';
  return h + '</select>';
}

function renderOnCall() {
  var body = document.getElementById('oncall-body');
  if (!body || !_oc) return;
  var c = _oc, edS = c.can_edit_settings, edR = c.can_edit_roster;
  var html = '';

  // Right now
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Right now</div>';
  var now = c.now || {};
  var line;
  if (!c.enabled) line = 'On call is <b>off</b>. Andi hands every after hours issue to the team the way he does today.';
  else if (now.after_hours_active) line = 'After hours. Only a critical problem would page ' + (now.user_id ? '<b>' + esc(ocName(now.user_id)) + '</b>' : (now.backup_user_id ? 'the backup, <b>' + esc(ocName(now.backup_user_id)) + '</b>' : 'nobody (no one scheduled, no backup)')) + ' right now.';
  else if (!now.in_hours) line = 'Outside on call hours. Nobody would be paged right now.';
  else if (now.user_id) line = '<b>' + esc(ocName(now.user_id)) + '</b> is on call' + (now.source === 'override' ? ' (swapped in for today).' : '.');
  else if (now.assigned_user_id) line = 'In on call hours, but <b>' + esc(ocName(now.assigned_user_id)) + '</b> is scheduled and is ' + (now.unavailable === 'no_cell' ? 'missing a cell phone' : 'no longer on the team') + (now.backup_user_id ? ', so pages go to the backup, <b>' + esc(ocName(now.backup_user_id)) + '</b>.' : ', so nobody would be paged.');
  else line = 'In on call hours, but nobody is scheduled.' + (now.backup_user_id ? ' Pages go to the backup, <b>' + esc(ocName(now.backup_user_id)) + '</b>.' : '');
  html += '<div class="oc-now">' + line + '</div>';
  html += '<div class="set-section-note" style="margin:0.6rem 0 0;">A handoff pages only when it needs help tonight: something critical or high, a client who asks for a call, or a client who answers tonight when Andi asks. A client who says it can wait is never paged. The on call tech gets a text from the tech line with a link to the ticket and a tag in the on call channel, and the client is told he was notified only after one of them went out. Slack gets every ticket at any hour.</div>';
  html += '</div>';

  // Switch and hours
  html += '<div class="set-section">';
  html += '<div class="set-section-title">On call hours</div>';
  html += '<div class="set-section-note">The hours a person can be paged, in your time zone (' + esc(c.timezone || '') + '). Andi answers clients at every hour either way. Outside these hours nobody is paged.</div>';
  html += '<div style="margin-bottom:0.9rem;"><button class="oc-switch' + (c.enabled ? ' on' : '') + '"' + (edS ? ' onclick="ocToggle()"' : ' disabled') + '><span class="oc-knob"></span>' + (c.enabled ? 'On call is on' : 'On call is off') + '</button></div>';
  var hours = c.hours || {};
  html += '<div class="oc-days">';
  OC_DAYS.forEach(function(d){
    var h = hours[d[0]];
    if (edS) {
      html += '<div class="oc-day' + (h ? '' : ' off') + '" id="oc-row-' + d[0] + '">'
        + '<label><input type="checkbox" id="oc-on-' + d[0] + '"' + (h ? ' checked' : '') + ' onchange="ocDayToggle(\'' + d[0] + '\')" />' + d[1] + '</label>'
        + '<input class="fld-input" type="time" id="oc-s-' + d[0] + '" value="' + (h ? h.start : '16:30') + '" />'
        + '<input class="fld-input" type="time" id="oc-e-' + d[0] + '" value="' + (h ? h.end : '22:00') + '" /></div>';
    } else {
      html += '<div class="oc-day"><div class="oc-ro">' + d[1] + '</div><div class="oc-ro" style="grid-column:span 2;">' + (h ? ocFmt12(h.start) + ' to ' + ocFmt12(h.end) : '<span style="color:var(--ink-soft);">Not on call</span>') + '</div></div>';
    }
  });
  html += '</div>';
  if (edS) html += '<div class="set-saverow"><button class="btn-primary" onclick="ocSaveHours()">Save hours</button><span class="set-saved" id="oc-saved-hours">Saved</span></div>';
  html += '<div class="oc-err" id="oc-err-hours"></div>';
  // v1.93.0: after hours and the backup
  var ah = c.after_hours || 'none', until = c.after_hours_until || '07:00';
  html += '<div class="oc-sub">After hours</div>';
  if (edS) {
    html += '<div class="oc-row"><select class="fld-input" id="oc-ah"><option value="none"' + (ah === 'none' ? ' selected' : '') + '>Nobody is paged</option><option value="critical"' + (ah === 'critical' ? ' selected' : '') + '>Only critical is paged</option></select>'
      + '<label class="oc-inline">until <input class="fld-input" type="time" min="00:00" max="12:00" id="oc-until" value="' + esc(until) + '" /></label>'
      + '<button class="btn-primary" onclick="ocSaveAfterHours()">Save</button><span class="set-saved" id="oc-saved-ah">Saved</span></div>';
  } else {
    html += '<div class="oc-ro">' + (ah === 'critical' ? 'Only critical is paged, from the end of the day until ' + esc(ocFmt12(until)) + ' the next morning.' : 'Nobody is paged after on call hours end.') + '</div>';
  }
  html += '<div class="set-section-note" style="margin:0.4rem 0 0;">Critical is water, smoke, a security system that will not arm, and the like. The tech for the evening covers the night it belongs to.</div>';
  html += '<div class="oc-err" id="oc-err-ah"></div>';
  html += '<div class="oc-sub">Backup</div>';
  html += '<div class="set-section-note" style="margin:0 0 0.5rem;">One manager who is paged when a page has no got it in 30 minutes, or straight away when nobody is on the schedule. Any hour.</div>';
  html += '<div>' + ocPicker(c.backup_user_id || null, 'ocSaveBackup(this.value)', !edS).replace('<option value="">Nobody</option>', '<option value="">No backup</option>') + '</div>';
  html += '<div class="oc-err" id="oc-err-backup"></div>';
  html += '</div>';

  // Schedule
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Schedule</div>';
  html += '<div class="set-section-note">One tech per week, Monday through Sunday. ' + (edR ? 'Pick who covers each week; it saves as you pick.' : 'Only an owner or a manager can change it.') + '</div>';
  var missing = (c.team || []).filter(function(u){ return u.active && !u.has_cell; });
  if (missing.length && edS) html += '<div class="oc-warn" style="margin:-0.4rem 0 0.7rem;">No cell phone on file, so they cannot be on call yet: ' + esc(missing.map(function(u){ return ((u.first_name || '') + ' ' + (u.last_name || '')).trim(); }).join(', ')) + '. Add one in Team.</div>';
  (c.schedule || []).forEach(function(w, i){
    var end = ocAddDays(w.week_start, 6);
    html += '<div class="oc-week"><div class="oc-wlabel">' + (i === 0 ? 'This week' : (i === 1 ? 'Next week' : 'Week of ' + ocDayLabel(w.week_start).replace(/^\w+, /, ''))) + '<small>' + ocDayLabel(w.week_start) + ' to ' + ocDayLabel(end) + '</small></div>';
    html += '<div>' + ocPicker(w.user_id, 'ocSetWeek(\'' + w.week_start + '\', this.value)', !edR);
    var wu = (c.team || []).filter(function(u){ return u.id === w.user_id; })[0];
    if (w.user_id && wu && !wu.eligible) html += '<div class="oc-warn">' + esc(ocName(w.user_id)) + (wu.active ? ' has no cell phone on file.' : ' is no longer on the team.') + ' Pick someone else.</div>';
    html += '</div></div>';
  });
  html += '<div class="oc-err" id="oc-err-week"></div>';
  html += '</div>';

  // Swaps
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Swaps</div>';
  html += '<div class="set-section-note">A single day covered by someone other than that week\'s tech. A swap wins over the week for that day only.</div>';
  var ovs = c.overrides || [];
  if (!ovs.length) html += '<div style="color:var(--ink-soft);font-size:0.8rem;margin-bottom:0.3rem;">No swaps coming up.</div>';
  ovs.forEach(function(o){
    html += '<div class="oc-week"><div class="oc-wlabel">' + ocDayLabel(o.day) + (o.day === c.today ? '<small>Today</small>' : '') + '</div>';
    html += '<div style="display:flex;gap:0.5rem;align-items:center;">' + ocPicker(o.user_id, 'ocSetOverride(\'' + o.day + '\', this.value)', !edR);
    if (edR) html += '<button class="btn-ghost" title="Remove this swap" onclick="ocSetOverride(\'' + o.day + '\', \'\')">&#10005;</button>';
    html += '</div></div>';
  });
  if (edR) {
    html += '<div class="oc-add"><input class="fld-input" type="date" id="oc-ov-day" min="' + esc(c.today || '') + '" />' + ocPicker(null, '', false).replace('<select ', '<select id="oc-ov-user" ') + '<button class="btn-primary" onclick="ocAddOverride()">Add swap</button></div>';
  }
  html += '<div class="oc-err" id="oc-err-ov"></div>';
  html += '</div>';

  // v1.92.0: Slack
  html += '<div class="set-section">';
  html += '<div class="set-section-title">Slack</div>';
  var sl = c.slack;
  if (!sl) {
    html += '<div class="set-section-note">Slack needs the latest portal update.</div>';
  } else if (sl.connected) {
    html += '<div class="oc-now">Connected' + (sl.team ? ' to <b>' + esc(sl.team) + '</b>' : '') + '. The catch all is <b>' + esc(sl.channel_id || '') + '</b>: every ticket posts there once, at any hour, and everything after it goes in its thread.</div>';
    // v1.93.0: the on call channel
    html += '<div class="oc-sub">On call channel</div>';
    html += '<div class="set-section-note" style="margin:0 0 0.5rem;">Real pages only, with the person tagged, so nobody mutes it. ' + (sl.oncall_channel_id ? 'Pages post in <b>' + esc(sl.oncall_channel_id) + '</b>.' : 'Not set: pages post in the catch all.') + ' Invite the app to the channel first.</div>';
    if (edS) {
      html += '<div class="oc-row"><input class="fld-input oc-grow" type="text" id="oc-slack-oncall" placeholder="Channel ID" value="' + esc(sl.oncall_channel_id || '') + '" autocomplete="off" /><button class="btn-primary" id="oc-slack-oc-go" onclick="ocSlackOnCallChannel()">Save</button>'
        + (sl.oncall_channel_id ? '<button class="btn-ghost" onclick="ocSlackOnCallChannel(true)">Clear</button>' : '') + '</div>';
      html += '<div class="oc-err" id="oc-err-slack-oc"></div>';
    }
    html += '<div class="set-section-note" style="margin:0.6rem 0 0;">A client with their own channel: pick it on the household, and that client\'s tickets post there with a one line pointer in the catch all.</div>';
    if (edS) html += '<div class="set-saverow" style="margin-top:0.6rem;"><button class="btn-ghost" onclick="ocSlackDisconnect()">Disconnect</button></div>';
  } else if (edS) {
    html += '<div class="set-section-note">Paste your Slack app\'s Bot User OAuth Token (it starts with xoxb) and the ID of the channel it should post in (channel details, at the bottom, starts with C). Invite the app to that channel first. RestWerks checks both with Slack and posts a hello before saving.</div>';
    html += '<div class="oc-slack"><input class="fld-input" type="password" id="oc-slack-token" placeholder="xoxb..." autocomplete="off" /><input class="fld-input" type="text" id="oc-slack-channel" placeholder="Channel ID" autocomplete="off" /><button class="btn-primary" id="oc-slack-go" onclick="ocSlackConnect()">Connect</button></div>';
  } else {
    html += '<div class="set-section-note">Slack is not connected. An owner connects it here.</div>';
  }
  html += '<div class="oc-err" id="oc-err-slack"></div>';
  html += '</div>';

  // v1.92.0: Recent pages
  if (Array.isArray(c.pages)) {
    html += '<div class="set-section">';
    html += '<div class="set-section-title">Recent pages</div>';
    if (!c.pages.length) html += '<div style="color:var(--ink-soft);font-size:0.8rem;">No handoffs yet.</div>';
    c.pages.forEach(function(pg){
      var what = pg.ticket_id ? 'Ticket ' + pg.ticket_id : (pg.kind === 'person' ? 'Asked for a person' : 'Follow up');
      var from = pg.source === 'web_form' ? 'Service page' : 'Text';
      var when = '';
      try { when = new Date(pg.paged_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); } catch (e) { when = ''; }
      var tags = '';
      if (pg.paged_user_id) tags += '<span class="oc-tag' + (pg.notified ? ' good' : ' warn') + '">' + (pg.notified ? 'Paged ' : 'Page failed ') + esc(ocName(pg.paged_user_id)) + (pg.target === 'backup' ? ' (backup)' : '') + '</span>';
      else if (pg.tier) tags += '<span class="oc-tag warn">Nobody to page</span>';
      else tags += '<span class="oc-tag">Slack only</span>';
      if (pg.backup_user_id) tags += '<span class="oc-tag warn">Backup paged ' + esc(ocName(pg.backup_user_id)) + '</span>';
      if (pg.with_client) tags += '<span class="oc-tag good">With the client</span>';
      else if (pg.acked) tags += '<span class="oc-tag good">Acknowledged</span>';
      else if (pg.no_response) tags += '<span class="oc-tag warn">No response</span>';
      if (pg.slack_ok === false) tags += '<span class="oc-tag warn">Slack failed</span>';
      html += '<div class="oc-page"><div>' + esc(when) + '<small>' + esc(from) + '</small></div><div>' + esc(what) + (pg.why ? '<small>' + esc(pg.why) + '</small>' : '') + '</div><div>' + tags + '</div></div>';
    });
    html += '</div>';
  }

  // My Andi (v1.94.0: the tech line's name wherever a person reads it)
  html += '<div class="set-section">';
  html += '<div class="set-section-title">My Andi</div>';
  html += '<div class="set-section-note">The number your team texts to reach Andi from the field, and the number pages come from. The same Andi answers in My Andi on the desktop. After a page, text "got it" to take it, and text what you did on the call; it goes on the house record and Slack, never to the client.</div>';
  html += '<div class="oc-ro">' + (c.tech_line_number ? esc(fmtPhone(c.tech_line_number)) : '<span style="color:var(--ink-soft);">Not assigned yet</span>') + '</div>';
  html += '</div>';

  body.innerHTML = html;
}

function ocDayToggle(k) {
  var row = document.getElementById('oc-row-' + k);
  if (row) row.classList.toggle('off', !document.getElementById('oc-on-' + k).checked);
}
function ocHoursFromForm() {
  var out = {};
  OC_DAYS.forEach(function(d){
    var on = document.getElementById('oc-on-' + d[0]);
    out[d[0]] = on && on.checked ? { start: document.getElementById('oc-s-' + d[0]).value, end: document.getElementById('oc-e-' + d[0]).value } : null;
  });
  return out;
}
async function ocPutSettings(payload, errId, savedId) {
  var err = document.getElementById(errId); if (err) err.textContent = '';
  try {
    var res = await rwFetch('/api/oncall/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not save.'; return false; }
    await loadOnCall();
    if (savedId) flashSaved(savedId);
    return true;
  } catch (e) { if (err) err.textContent = 'Connection error.'; return false; }
}
function ocSaveHours() { return ocPutSettings({ hours: ocHoursFromForm() }, 'oc-err-hours', 'oc-saved-hours'); }
// v1.93.0
function ocSaveAfterHours() {
  return ocPutSettings({ after_hours: (document.getElementById('oc-ah') || {}).value || 'none', after_hours_until: (document.getElementById('oc-until') || {}).value || '' }, 'oc-err-ah', 'oc-saved-ah');
}
function ocSaveBackup(v) { return ocPutSettings({ backup_user_id: v ? Number(v) : null }, 'oc-err-backup', null); }
async function ocSlackOnCallChannel(clear) {
  var err = document.getElementById('oc-err-slack-oc'); if (err) err.textContent = '';
  var ch = clear ? null : ((document.getElementById('oc-slack-oncall') || {}).value || '').trim();
  var btn = document.getElementById('oc-slack-oc-go'); if (btn && !clear) { btn.disabled = true; btn.textContent = 'Checking...'; }
  try {
    var res = await rwFetch('/api/oncall/slack', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ oncall_channel_id: ch }) });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not save.'; if (btn) { btn.disabled = false; btn.textContent = 'Save'; } return false; }
    await loadOnCall();
    return true;
  } catch (e) { if (err) err.textContent = 'Connection error.'; if (btn) { btn.disabled = false; btn.textContent = 'Save'; } return false; }
}
async function ocToggle() {
  if (!_oc) return;
  // Switching on saves whatever hours are on the form in the same call, so a shop that typed hours
  // and hit the switch without Save does not get told it has none.
  var payload = { enabled: !_oc.enabled };
  if (!_oc.enabled) payload.hours = ocHoursFromForm();
  return ocPutSettings(payload, 'oc-err-hours', null);
}
async function ocWrite(url, userId, errId) {
  var err = document.getElementById(errId); if (err) err.textContent = '';
  try {
    var res = await rwFetch(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: userId ? Number(userId) : null }) });
    var data = await res.json();
    await loadOnCall();
    if (!res.ok) { var e2 = document.getElementById(errId); if (e2) e2.textContent = data.error || 'Could not save.'; return false; }
    return true;
  } catch (e) { if (err) err.textContent = 'Connection error.'; return false; }
}
async function ocSlackConnect() {
  var err = document.getElementById('oc-err-slack'); if (err) err.textContent = '';
  var tok = (document.getElementById('oc-slack-token') || {}).value || '';
  var ch = (document.getElementById('oc-slack-channel') || {}).value || '';
  var btn = document.getElementById('oc-slack-go'); if (btn) { btn.disabled = true; btn.textContent = 'Checking...'; }
  try {
    var res = await rwFetch('/api/oncall/slack', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: tok.trim(), channel_id: ch.trim() }) });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not connect.'; if (btn) { btn.disabled = false; btn.textContent = 'Connect'; } return false; }
    await loadOnCall();
    return true;
  } catch (e) { if (err) err.textContent = 'Connection error.'; if (btn) { btn.disabled = false; btn.textContent = 'Connect'; } return false; }
}
async function ocSlackDisconnect() {
  var err = document.getElementById('oc-err-slack'); if (err) err.textContent = '';
  try {
    var res = await rwFetch('/api/oncall/slack', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ disconnect: true }) });
    if (!res.ok) { var d = await res.json(); if (err) err.textContent = d.error || 'Could not disconnect.'; return false; }
    await loadOnCall();
    return true;
  } catch (e) { if (err) err.textContent = 'Connection error.'; return false; }
}
function ocSetWeek(weekStart, userId) { return ocWrite('/api/oncall/weeks/' + weekStart, userId, 'oc-err-week'); }
function ocSetOverride(day, userId) { return ocWrite('/api/oncall/overrides/' + day, userId, 'oc-err-ov'); }
function ocAddOverride() {
  var day = (document.getElementById('oc-ov-day') || {}).value;
  var uid = (document.getElementById('oc-ov-user') || {}).value;
  var err = document.getElementById('oc-err-ov');
  if (!day) { if (err) err.textContent = 'Pick a date.'; return; }
  if (!uid) { if (err) err.textContent = 'Pick who covers it.'; return; }
  return ocSetOverride(day, uid);
}

// v1.43.0: settings tab switching (scoped to the settings panel so it never collides with the
// household/rail .hd-tab handlers). Panels all mount on render; this just flips which is visible.
function setTab(id) {
  document.querySelectorAll('#settings-body .set-tabs .hd-tab').forEach(function(b){ b.classList.toggle('active', b.getAttribute('data-settab') === id); });
  document.querySelectorAll('#settings-body .set-tabpanel').forEach(function(p){ p.classList.toggle('active', p.id === 'settab-' + id); });
}


// ── CATEGORY EDITOR (v1.76.0) ────────────────────────────────────────────────
// Same discipline as the status and urgency editors: every write goes through the portal and then
// the vocabulary is re-read, so what the editor shows is what the server actually stored rather
// than what this file hoped it stored.
//
// A parent renders with an eye rather than an X. There is no delete because there is no route, and
// the missing control is the message, the same way a locked status row leaves its action cell empty
// instead of printing the word LOCKED.
var _catOpen = {};
function catToggle(key) {
  _catOpen[key] = !_catOpen[key];
  renderCategoryEditor();
}

function renderCategoryEditor() {
  var body = document.getElementById('vocab-cat-body');
  if (!body) return;
  var cats = tkCategories();
  var subs = tkSubcategories();
  if (!cats.length) {
    body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.8rem;">No categories yet.</div>';
    return;
  }
  var h = '<div class="vocab-grid">' +
    '<div class="vocab-row-g vocab-headrow"><div class="vocab-head"></div><div class="vocab-head">Category</div>' +
    '<div class="vocab-head c">Shown</div><div class="vocab-head"></div></div>';

  cats.forEach(function(c) {
    var kids = subs.filter(function(x){ return x.category_key === c.key; });
    var open = !!_catOpen[c.key];
    var caret = kids.length
      ? '<span style="display:inline-block;width:0.75rem;font-size:0.6rem;color:var(--ink-soft);cursor:pointer;' +
        (open ? 'transform:rotate(90deg);' : '') + '" onclick="catToggle(\'' + c.key + '\')">&#9654;</span>'
      : '<span style="display:inline-block;width:0.75rem;"></span>';
    h += '<div class="vocab-row-g">' +
      '<div class="vocab-cell c">' + caret + '</div>' +
      '<div class="vocab-cell"><input class="vocab-name" value="' + esc(c.label) + '" onchange="catRename(' + c.id + ', this.value)" /></div>' +
      '<div class="vocab-cell c"><button class="vocab-tog' + (c.visible === false ? '' : ' on') + '" title="' +
        (c.visible === false ? 'Hidden from your board and your numbers panel' : 'Shown') +
        '" onclick="catSetVisible(' + c.id + ', ' + (c.visible === false ? 'true' : 'false') + ')">&#128065;</button></div>' +
      '<div class="vocab-cell c"></div></div>';

    if (open) {
      kids.forEach(function(k) {
        h += '<div class="vocab-row-g">' +
          '<div class="vocab-cell c"></div>' +
          '<div class="vocab-cell" style="padding-left:1.1rem;"><input class="vocab-name" style="font-size:0.78rem;" value="' + esc(k.label) + '" onchange="subRename(' + k.id + ', this.value)" /></div>' +
          '<div class="vocab-cell c"><button class="vocab-tog' + (k.visible === false ? '' : ' on') + '" title="' +
            (k.visible === false ? 'Hidden' : 'Shown') +
            '" onclick="subSetVisible(' + k.id + ', ' + (k.visible === false ? 'true' : 'false') + ')">&#128065;</button></div>' +
          // A seeded child hides, it never deletes: it is part of the shared vocabulary every
          // shop's numbers are compared against. Only a child this shop added can be removed.
          '<div class="vocab-cell c">' + (k.is_locked ? '' : '<button class="vocab-act" title="Remove" onclick="subDelete(' + k.id + ')">&#10005;</button>') + '</div></div>';
      });
      h += '<div class="vocab-row-g"><div class="vocab-cell c"></div>' +
        '<div class="vocab-cell" style="padding-left:1.1rem;"><input class="fld-input" id="subnew-' + c.key + '" type="text" placeholder="Add a subcategory" style="font-size:0.78rem;" /></div>' +
        '<div class="vocab-cell c"><button class="btn-primary" style="padding:0.25rem 0.6rem;font-size:0.72rem;" onclick="subAdd(\'' + c.key + '\')">Add</button></div>' +
        '<div class="vocab-cell c"></div></div>';
    }
  });
  body.innerHTML = h + '</div>';
}

function catErr(msg) {
  var e = document.getElementById('vocab-cat-err');
  if (e) e.textContent = msg || '';
}

async function catWrite(url, method, payload) {
  catErr('');
  try {
    var res = await rwFetch(url, {
      method: method,
      headers: { 'Content-Type': 'application/json' },
      body: payload ? JSON.stringify(payload) : undefined
    });
    if (!res.ok) {
      var d = {};
      try { d = await res.json(); } catch (e) {}
      catErr(d.error || 'That did not save.');
      return false;
    }
    return true;
  } catch (e) { catErr('That did not save.'); return false; }
}

async function catRename(id, label) {
  if (await catWrite('/api/ticket-categories/' + id, 'PUT', { label: label })) { await loadTicketVocab(true); renderCategoryEditor(); }
}
async function catSetVisible(id, visible) {
  if (await catWrite('/api/ticket-categories/' + id, 'PUT', { visible: visible })) { await loadTicketVocab(true); renderCategoryEditor(); }
}
async function subRename(id, label) {
  if (await catWrite('/api/ticket-subcategories/' + id, 'PUT', { label: label })) { await loadTicketVocab(true); renderCategoryEditor(); }
}
async function subSetVisible(id, visible) {
  if (await catWrite('/api/ticket-subcategories/' + id, 'PUT', { visible: visible })) { await loadTicketVocab(true); renderCategoryEditor(); }
}
async function subDelete(id) {
  if (!confirm('Remove this subcategory?')) return;
  if (await catWrite('/api/ticket-subcategories/' + id, 'DELETE', null)) { await loadTicketVocab(true); renderCategoryEditor(); }
}
async function subAdd(catKey) {
  var input = document.getElementById('subnew-' + catKey);
  if (!input) return;
  var label = (input.value || '').trim();
  if (!label) return;
  _catOpen[catKey] = true;
  if (await catWrite('/api/ticket-subcategories', 'POST', { category_key: catKey, label: label })) {
    await loadTicketVocab(true);
    renderCategoryEditor();
  }
}

// ── STATUS AND URGENCY EDITORS (v1.66.0) ─────────────────────────────────────
// Everything here writes through the portal and then re-reads the vocabulary, so what the editor
// shows is always what the server actually stored rather than what this file hoped it stored.
async function renderVocabEditors() {
  await loadTicketVocab(true);
  renderCategoryEditor();
  var sb = document.getElementById('vocab-status-body');
  if (sb) {
    var list = tkStatuses();
    var h = '<div class="vocab-grid">' +
      '<div class="vocab-row-g vocab-row-s vocab-headrow"><div class="vocab-head"></div><div class="vocab-head">Status</div>' +
      '<div class="vocab-head c">Clock</div><div class="vocab-head c" title="Text the client while the ticket sits in this status">Client</div>' +
      '<div class="vocab-head c" title="Remind your team while the ticket sits in this status">Team</div>' +
      '<div class="vocab-head c" title="How long the ticket sits here before the first nudge">After</div>' +
      '<div class="vocab-head"></div></div>';
    list.forEach(function(r){
      // The toggle is only real on Scheduled and on the middle statuses. Open always counts and
      // the two endings are over, so those get a quiet dash rather than a control that cannot move.
      var togglable = (r.kind === 'scheduled' || r.kind === 'waiting');
      var clockCell = togglable
        // v1.69.0: an HOURGLASS reads as waiting, which is exactly backwards for the toggle that
        // means this status is COUNTING. A clock face says the clock is running.
        ? '<button class="vocab-tog' + (r.counts_toward_clock ? ' on' : '') + '" title="' +
            (r.counts_toward_clock ? 'Time in this status counts toward the resolution clock' : 'The clock is stopped in this status') +
            '" onclick="vocabSetClock(' + r.id + ', ' + (r.counts_toward_clock ? 'false' : 'true') + ')">&#128339;</button>'
        : '<span class="vocab-na" title="' + (r.kind === 'open' ? 'Open always counts' : 'The ticket has ended') + '">&mdash;</span>';
      // v1.70.0: Open and Scheduled show the colour, they do not offer to change it. The portal
      // refuses the write as well, so this is the courtesy half of the rule rather than the rule.
      var frozen = (r.kind === 'open' || r.kind === 'scheduled');
      var dotCell = frozen
        ? '<span class="vocab-dot-static" style="background:' + esc(r.color || '#7a8290') + ';" title="' + esc(r.label) + ' keeps its colour so it reads the same on every screen"></span>'
        : '<input type="color" class="vocab-dot" value="' + esc(r.color || '#7a8290') + '" title="Colour" onchange="vocabRename(' + r.id + ', null, this.value)" />';
      // ── NUDGE CELLS (v1.77.0) ──────────────────────────────────────────────
      // A control that cannot move is worse than no control, so a refused toggle renders as a dash
      // with the REASON in its tooltip rather than as a dead button. The portal refuses these
      // writes as well; this is the courtesy half.
      var endState = (r.kind === 'resolved' || r.kind === 'closed');
      // THE TODD RULE. A client with a booked visit is waiting on US, so Scheduled can never nudge
      // a client no matter who ticks what.
      var clientAllowed = !endState && r.kind !== 'scheduled' && r.kind !== 'open';
      var teamAllowed = !endState;
      var clientWhy = endState ? 'The ticket has ended'
        : (r.kind === 'scheduled' ? 'A client with a booked visit is waiting on you, so they are never nudged'
        : 'Open does not mean the client owes you anything yet');
      var nClientCell = clientAllowed
        ? '<button class="vocab-tog' + (r.nudge_client ? ' on' : '') + '" title="' +
            (r.nudge_client ? 'The client is texted while a ticket sits here' : 'The client is not texted') +
            '" onclick="vocabSetNudge(' + r.id + ', \'nudge_client\', ' + (r.nudge_client ? 'false' : 'true') + ')">&#128172;</button>'
        : '<span class="vocab-na" title="' + esc(clientWhy) + '">&mdash;</span>';
      var nTeamCell = teamAllowed
        ? '<button class="vocab-tog' + (r.nudge_team ? ' on' : '') + '" title="' +
            (r.nudge_team ? 'Your team is reminded while a ticket sits here' : 'Your team is not reminded') +
            '" onclick="vocabSetNudge(' + r.id + ', \'nudge_team\', ' + (r.nudge_team ? 'false' : 'true') + ')">&#9673;</button>'
        : '<span class="vocab-na" title="The ticket has ended">&mdash;</span>';
      // One interval per row rather than one per direction. Two numbers on a row nobody has turned
      // on yet is a form, not a setting; if a shop ever needs them to differ that is a real ask and
      // it can have its own column then.
      var hrs = (r.nudge_client_hours || r.nudge_team_hours || 24);
      var hrsCell = (clientAllowed || teamAllowed)
        ? '<input class="vocab-name" style="text-align:center;font-size:0.76rem;" value="' + hrs + 'h" title="Hours in this status before the first nudge" onchange="vocabSetNudgeHours(' + r.id + ', this.value)" />'
        : '<span class="vocab-na">&mdash;</span>';

      h += '<div class="vocab-row-g vocab-row-s">' +
        '<div class="vocab-cell c">' + dotCell + '</div>' +
        '<div class="vocab-cell"><input class="vocab-name" value="' + esc(r.label) + '" onchange="vocabRename(' + r.id + ', this.value, null)" /></div>' +
        '<div class="vocab-cell c">' + clockCell + '</div>' +
        '<div class="vocab-cell c">' + nClientCell + '</div>' +
        '<div class="vocab-cell c">' + nTeamCell + '</div>' +
        '<div class="vocab-cell c">' + hrsCell + '</div>' +
        // A locked row leaves this cell EMPTY rather than filling it with the word LOCKED. The
        // missing action is the message, and it costs no column width to say it that way.
        '<div class="vocab-cell c">' + (r.is_locked ? '' : '<button class="vocab-act" title="Remove" onclick="vocabDeleteStatus(' + r.id + ')">&#10005;</button>') + '</div></div>';
    });
    sb.innerHTML = h + '</div>';
  }
  var pb = document.getElementById('vocab-prio-body');
  if (pb) {
    var pl = tkPriorities();
    var ph = '<div class="vocab-grid">' +
      '<div class="vocab-row-g vocab-headrow"><div class="vocab-head"></div><div class="vocab-head">Urgency</div>' +
      '<div class="vocab-head c">Default</div><div class="vocab-head"></div></div>';
    pl.forEach(function(r){
      // One of N is a radio. "Make default" on every row was a radio in disguise and it was the
      // widest thing in the list, which is part of why nothing lined up.
      // v1.70.0: urgency colours are not editable. Low to Critical is a scale and the four seeded
      // colours already read as one; nothing is keyed to them, so an editor here is a control that
      // exists only because the status list next to it has one.
      ph += '<div class="vocab-row-g">' +
        '<div class="vocab-cell c"><span class="vocab-dot-static" style="background:' + esc(r.color || '#7a8290') + ';"></span></div>' +
        '<div class="vocab-cell"><input class="vocab-name" value="' + esc(r.label) + '" onchange="vocabPrioSave(' + r.id + ', this.value, null, null)" /></div>' +
        '<div class="vocab-cell c"><input type="radio" name="vocab-prio-default" style="cursor:pointer;"' + (r.is_default ? ' checked' : '') +
          ' title="New tickets start here" onchange="vocabPrioSave(' + r.id + ', null, null, true)" /></div>' +
        '<div class="vocab-cell c">' + (r.is_default ? '' : '<button class="vocab-act" title="Remove" onclick="vocabDeletePriority(' + r.id + ')">&#10005;</button>') + '</div></div>';
    });
    pb.innerHTML = ph + '</div>';
  }
}

function vocabErr(which, msg) {
  var el = document.getElementById('vocab-' + which + '-err');
  if (el) el.textContent = msg || '';
}
async function vocabCall(url, method, body, which) {
  vocabErr(which, '');
  try {
    var opt = { method: method };
    if (body) { opt.headers = { 'Content-Type': 'application/json' }; opt.body = JSON.stringify(body); }
    var res = await rwFetch(url, opt);
    if (!res.ok) {
      var msg = 'Could not save.';
      try { var d = await res.json(); if (d && d.error) msg = d.error; } catch (e) {}
      vocabErr(which, msg);
      await renderVocabEditors();
      return false;
    }
    await renderVocabEditors();
    // The board and every open ticket read these, so refresh them rather than leaving a rename
    // visible only in Settings until the next navigation.
    if (typeof renderTickets === 'function' && _ticketRows && _ticketRows.length) renderTickets();
    if (window._openTicketId && typeof openTicket === 'function') openTicket(window._openTicketId);
    return true;
  } catch (e) { vocabErr(which, 'Connection error.'); return false; }
}
function vocabRename(id, label, color) {
  var body = {};
  if (label !== null && label !== undefined) body.label = label;
  if (color !== null && color !== undefined) body.color = color;
  return vocabCall('/api/ticket-statuses/' + id, 'PUT', body, 'status');
}
function vocabSetClock(id, on) { return vocabCall('/api/ticket-statuses/' + id, 'PUT', { counts_toward_clock: !!on }, 'status'); }
// v1.77.0. The field name is passed in rather than having two near-identical functions, because
// the only difference between them is one string and a duplicated pair drifts.
function vocabSetNudge(id, field, on) {
  var body = {}; body[field] = !!on;
  return vocabCall('/api/ticket-statuses/' + id, 'PUT', body, 'status');
}
// Accepts 24, 24h or 24 hours. Somebody typing the unit they just read in the column header is
// not a validation error, and the portal clamps the number anyway.
function vocabSetNudgeHours(id, raw) {
  var n = parseInt(String(raw || '').replace(/[^0-9]/g, ''), 10);
  if (!Number.isInteger(n) || n < 1) { renderVocabEditors(); return; }
  return vocabCall('/api/ticket-statuses/' + id, 'PUT', { nudge_client_hours: n, nudge_team_hours: n }, 'status');
}
// v1.68.0: vocabMove DELETED. The arrows came off in this build and nothing called it any more.
// Standing lesson from webhook 9.24.0, where a second reply generator was maintained through
// three versions while being called by nothing: a function with no caller is not harmless, it is
// a thing future readers assume is live. The portal reorder route stays and is the only thing
// that needs to survive; a control gets rebuilt against it the day someone actually wants one.
async function vocabAddStatus() {
  var el = document.getElementById('vocab-status-new');
  var label = (el && el.value || '').trim();
  if (!label) { vocabErr('status', 'Give the status a name.'); return; }
  var ok = await vocabCall('/api/ticket-statuses', 'POST', { label: label }, 'status');
  if (ok && el) el.value = '';
}
function vocabDeleteStatus(id) {
  if (!confirm('Remove this status?')) return;
  return vocabCall('/api/ticket-statuses/' + id, 'DELETE', null, 'status');
}
function vocabPrioSave(id, label, color, makeDefault) {
  var body = {};
  if (label !== null && label !== undefined) body.label = label;
  if (color !== null && color !== undefined) body.color = color;
  if (makeDefault) body.is_default = true;
  return vocabCall('/api/ticket-priorities/' + id, 'PUT', body, 'prio');
}
async function vocabAddPriority() {
  var el = document.getElementById('vocab-prio-new');
  var label = (el && el.value || '').trim();
  if (!label) { vocabErr('prio', 'Give the urgency level a name.'); return; }
  var ok = await vocabCall('/api/ticket-priorities', 'POST', { label: label }, 'prio');
  if (ok && el) el.value = '';
}
function vocabDeletePriority(id) {
  if (!confirm('Remove this urgency level?')) return;
  return vocabCall('/api/ticket-priorities/' + id, 'DELETE', null, 'prio');
}

// v1.44.0: sidebar logo layout radio row. Company-level branding choice, so non-owners see it disabled.
function logoLayoutRow(val, label, cur, isOwner) {
  var dis = isOwner ? '' : ' disabled';
  return '<label style="display:flex;align-items:center;gap:0.55rem;font-size:0.85rem;cursor:' + (isOwner ? 'pointer' : 'default') + ';padding:0.35rem 0;">'
    + '<input type="radio" name="sb-logo-layout" value="' + val + '"' + (cur === val ? ' checked' : '') + dis + ' onchange="saveLogoLayout(\'' + val + '\')" /> ' + label + '</label>';
}
// v1.44.0: save the company logo choice through PUT /api/company (owner only) and refresh the sidebar live.
async function saveLogoLayout(v) {
  if (['logo_name', 'logo_only', 'name_only'].indexOf(v) === -1) return;
  try {
    var res = await rwFetch('/api/company', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sidebar_logo_layout: v }) });
    if (!res.ok) { var d = await res.json(); alert(d.error || 'Could not save.'); return; }
    if (_rwCompany) _rwCompany.sidebar_logo_layout = v;
    applyCompanyBranding(_rwCompany);
  } catch (e) {}
}

// v1.43.0: Andi voice/tone. Stored only this build; the webhook does not read andi_voice yet
// (prompt wiring is the next slice). Owner only, same PUT /api/company path as the other settings.
async function settingsSaveAndi() {
  var body = { andi_voice: (document.getElementById('set-andi-voice') || {}).value || '' };
  var res = await rwFetch('/api/company', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
  var data = await res.json();
  if (!res.ok) { alert(data.error || 'Could not save.'); return; }
  await loadCompanyContext();
  flashSaved('set-saved-andi');
}

// v1.22.0: recipients live as envelope toggles on the Team rows. This stashes the saved list
// (lowercased) so renderTeam can light the right envelopes; outside-address entry UI removed,
// addresses already saved in the database are preserved untouched on every toggle.
function loadSummaryRecipients(c) {
  window._sumRecips = (c.summary_recipients || []).map(function(e){ return String(e).toLowerCase(); });
  if (window._team && window._team.length) renderTeam(window._team);
}
// Click the envelope: flip that one address in the list and save immediately.
async function toggleSumRecip(e, em) {
  if (e) e.stopPropagation();
  var list = window._sumRecips || [];
  var i = list.indexOf(em);
  if (i === -1) list.push(em); else list.splice(i, 1);
  window._sumRecips = list;
  renderTeam(window._team || []);
  await settingsSaveSummary();
}
// ── FLAG FOR REVIEW (v1.21.0, built disposable) ─────────────────────────────
// Any team member flags Andi messages for RestWerks review. Modal lists the thread's Andi
// messages with checkboxes (click multiple, confirm), optional why note. The snapshot sent is
// the selected messages plus up to two surrounding messages each side, exactly as displayed.
// v1.21.1: flag selection happens IN the chat. Flag for review puts the open thread into flag
// mode: Andi bubbles become tappable (amber outline on select, multiple allowed), a slim bar
// replaces the reply box with the optional why note and Send to RestWerks. Modal retired.
var _flagMode = null;
// v1.22.0: the pinned icon toggles flag mode; lit amber while picking messages.
function toggleFlagFab() { if (_flagMode) { exitFlagMode(); } else { openFlagModal(); } }
function setFlagFab(on) { var f = document.getElementById('flag-fab'); if (f) f.classList.toggle('on', !!on); }
function openFlagModal() {
  var threadEl = document.getElementById('live-thread') || document.getElementById('tk-thread');
  if (!threadEl) return;
  var msgs = window._threadMsgs || [];
  if (!msgs.some(function(m){ return m.role === 'assistant'; })) { alert('No Andi messages in this thread to flag.'); return; }
  if (_flagMode) return;
  _flagMode = { selected: {}, threadEl: threadEl };
  threadEl.classList.add('flag-mode');
  threadEl.addEventListener('click', flagModeClick);
  document.querySelectorAll('.reply-box').forEach(function(rb){ rb.style.display = 'none'; });
  var bar = document.createElement('div');
  bar.id = 'flag-bar';
  bar.style.cssText = 'display:flex;gap:0.5rem;align-items:center;padding:0.6rem 1rem;border-top:2px solid #cc7a00;background:rgba(204,122,0,0.07);';
  bar.innerHTML =
    '<span id="flag-count" style="font-size:0.78rem;color:#cc7a00;font-weight:700;white-space:nowrap;">Tap Andi messages · 0 selected</span>' +
    '<input class="fld-input" id="flag-note" type="text" placeholder="Why? (optional)" style="flex:1;" />' +
    '<span id="flag-err" style="font-size:0.72rem;color:#c0392b;"></span>' +
    '<button class="btn-ghost" onclick="exitFlagMode()">Cancel</button>' +
    '<button class="btn-primary" id="flag-send" onclick="submitFlag()">Send to RestWerks</button>';
  threadEl.parentNode.insertBefore(bar, threadEl.nextSibling);
  setFlagFab(true);
}
function flagModeClick(e) {
  if (!_flagMode) return;
  var bubble = e.target.closest('.sms-msg.sms-andi');
  if (!bubble || !bubble.hasAttribute('data-mi')) return;
  var mi = bubble.getAttribute('data-mi');
  if (_flagMode.selected[mi]) { delete _flagMode.selected[mi]; bubble.classList.remove('flag-sel'); }
  else { _flagMode.selected[mi] = true; bubble.classList.add('flag-sel'); }
  var n = Object.keys(_flagMode.selected).length;
  var fc = document.getElementById('flag-count');
  if (fc) fc.textContent = 'Tap Andi messages · ' + n + ' selected';
}
function exitFlagMode() {
  if (!_flagMode) return;
  _flagMode.threadEl.classList.remove('flag-mode');
  _flagMode.threadEl.removeEventListener('click', flagModeClick);
  _flagMode.threadEl.querySelectorAll('.flag-sel').forEach(function(b){ b.classList.remove('flag-sel'); });
  var bar = document.getElementById('flag-bar'); if (bar) bar.remove();
  document.querySelectorAll('.reply-box').forEach(function(rb){ rb.style.display = ''; });
  _flagMode = null;
  setFlagFab(false);
}
function closeFlagModal() { exitFlagMode(); }
async function submitFlag() {
  if (!_flagMode) return;
  var all = window._threadMsgs || [];
  var picked = Object.keys(_flagMode.selected).map(Number);
  var err = document.getElementById('flag-err');
  if (!picked.length) { if (err) err.textContent = 'Tap at least one message.'; return; }
  // Map full-array indexes to the displayable-rows view so context is real messages only.
  var disp = [], dispIdxByAll = {};
  all.forEach(function(m, ai){ if (['user','assistant','human'].indexOf(m.role) !== -1) { dispIdxByAll[ai] = disp.length; disp.push(m); } });
  var msgs = disp;
  picked = picked.map(function(ai){ return dispIdxByAll[ai]; }).filter(function(v){ return v !== undefined; });
  if (!picked.length) { if (err) err.textContent = 'Tap at least one message.'; return; }
  var include = {};
  picked.forEach(function(i){ for (var j = Math.max(0, i - 2); j <= Math.min(msgs.length - 1, i + 2); j++) include[j] = include[j] || false; include[i] = true; });
  var snapshot = Object.keys(include).map(Number).sort(function(a,b){ return a - b; }).map(function(i){
    var m = msgs[i];
    return { role: m.role, message: m.message, created_at: m.created_at || null, flagged: include[i] };
  });
  var phone = window._currentPhone || window._openTicketPhone || null;
  var btn = document.getElementById('flag-send');
  if (btn) { btn.disabled = true; btn.textContent = 'Sending...'; }
  try {
    var res = await rwFetch('/api/flags', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({
      phone_number: phone ? decodeURIComponent(phone) : null,
      note: (document.getElementById('flag-note') || {}).value || '',
      snapshot: snapshot
    })});
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not send.'; if (btn) { btn.disabled = false; btn.textContent = 'Send to RestWerks'; } return; }
    exitFlagMode();
  } catch (e) { if (err) err.textContent = 'Connection error.'; if (btn) { btn.disabled = false; btn.textContent = 'Send to RestWerks'; } }
}
async function loadFlags() {
  var el = document.getElementById('flagged-body'); if (!el) return;
  el.innerHTML = '<div class="hh-empty">Loading...</div>';
  try {
    var res = await rwFetch('/api/flags');
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load flags.</div>'; return; }
    var rows = await res.json();
    if (!rows.length) { el.innerHTML = '<div class="hh-empty">Nothing flagged yet. Open any conversation and use Flag for review when Andi gets something wrong.</div>'; return; }
    var html = '';
    rows.forEach(function(f) {
      var snap = Array.isArray(f.snapshot) ? f.snapshot : [];
      var cancelled = f.status === 'cancelled';
      var resolvedF = f.status === 'resolved';
      // v1.21.1: render exactly like the thread: same bubble classes, alignment, and time rows.
      var bubbles = snap.map(function(m) {
        var isClient = m.role === 'user';
        var isHuman = m.role === 'human';
        var cls = isClient ? 'sms-client' : isHuman ? 'sms-human' : 'sms-andi';
        var hl = m.flagged ? 'box-shadow:0 0 0 2px #cc7a00;' : 'opacity:0.7;';
        var time = m.created_at ? new Date(m.created_at).toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'}) : '';
        return '<div class="sms-msg ' + cls + '" style="' + hl + '">' + esc(m.message) + '</div>' +
               (time ? '<div class="sms-time' + (isClient ? ' right' : '') + '">' + time + '</div>' : '');
      }).join('');
      var statusChip = resolvedF
        ? '<span style="font-size:0.7rem;font-weight:700;color:#1D9E75;text-transform:uppercase;letter-spacing:0.05em;">Reviewed</span>'
        : cancelled
          ? '<span style="font-size:0.7rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;">Cancelled</span>'
          : '<span style="font-size:0.7rem;font-weight:700;color:#cc7a00;text-transform:uppercase;letter-spacing:0.05em;">Sent</span>';
      var actions = (!resolvedF && !cancelled)
        ? '<div style="display:flex;gap:0.7rem;margin-top:0.5rem;">' +
            '<a class="tk-house-link" onclick="editFlagNote(' + f.id + ')">Edit note</a>' +
            '<a class="tk-house-link" style="color:#c0392b;" onclick="cancelFlag(' + f.id + ')">Cancel flag</a>' +
          '</div>'
        : (resolvedF && f.resolution_note ? '<div style="font-size:0.85rem;margin-top:0.5rem;color:#1D9E75;"><strong>Andy:</strong> ' + esc(f.resolution_note) + '</div>' : '');
      // v1.22.0: compact list. One slim row per flag (who, when, why, message count); click
      // expands the full bubble snapshot inline, click again collapses. Expanded state survives
      // re-renders within the visit.
      var flaggedCount = snap.filter(function(m){ return m.flagged; }).length;
      var isOpen = !!((window._flagOpen || {})[f.id]);
      html += '<div style="border:1px solid var(--border);border-radius:10px;margin-bottom:0.55rem;' + (cancelled ? 'opacity:0.55;' : '') + '">' +
        '<div style="display:flex;align-items:center;gap:0.7rem;padding:0.55rem 0.9rem;cursor:pointer;" onclick="toggleFlagRow(' + f.id + ')">' +
          '<span style="color:#cc7a00;flex:none;">⚑</span>' +
          '<div style="flex:1;min-width:0;">' +
            '<div style="font-size:0.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + (f.note ? esc(f.note) : '<span style="color:var(--ink-soft);font-weight:400;">No note</span>') + '</div>' +
            '<div style="font-size:0.72rem;color:var(--ink-soft);">' + esc(f.flagged_by || 'Unknown') + ' · ' + esc(fmtTime(f.created_at)) + ' · ' + flaggedCount + ' message' + (flaggedCount === 1 ? '' : 's') + ' flagged</div>' +
          '</div>' +
          statusChip +
          '<span class="user-caret" id="flag-caret-' + f.id + '" style="color:var(--ink-soft);transition:transform 0.12s;' + (isOpen ? 'transform:rotate(90deg);' : '') + '">›</span>' +
        '</div>' +
        '<div id="flag-detail-' + f.id + '" style="display:' + (isOpen ? 'block' : 'none') + ';padding:0 0.9rem 0.8rem;border-top:1px solid var(--border);">' +
          '<div id="flag-note-row-' + f.id + '" style="margin-top:0.6rem;">' + (f.note ? '<div style="font-size:0.85rem;margin-bottom:0.5rem;"><strong>Why:</strong> ' + esc(f.note) + '</div>' : '') + '</div>' +
          '<div class="sms-thread" style="max-width:620px;max-height:none;overflow:visible;padding:0.4rem 0;background:transparent;border:none;">' + bubbles + '</div>' +
          actions +
        '</div>' +
      '</div>';
      window._flagNotes = window._flagNotes || {}; window._flagNotes[f.id] = f.note || '';
    });
    el.innerHTML = html;
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
function toggleFlagRow(id) {
  window._flagOpen = window._flagOpen || {};
  var d = document.getElementById('flag-detail-' + id); if (!d) return;
  var open = d.style.display !== 'none';
  d.style.display = open ? 'none' : 'block';
  window._flagOpen[id] = !open;
  var c = document.getElementById('flag-caret-' + id);
  if (c) c.style.transform = open ? '' : 'rotate(90deg)';
}
function editFlagNote(id) {
  var row = document.getElementById('flag-note-row-' + id); if (!row) return;
  var cur = (window._flagNotes || {})[id] || '';
  row.innerHTML = '<div style="display:flex;gap:0.5rem;margin-bottom:0.5rem;">' +
    '<input class="fld-input" id="flag-note-edit-' + id + '" type="text" value="' + esc(cur) + '" placeholder="Why? (optional)" style="flex:1;" />' +
    '<button class="btn-primary" onclick="saveFlagNote(' + id + ')">Save</button></div>';
  var inp = document.getElementById('flag-note-edit-' + id); if (inp) inp.focus();
}
async function saveFlagNote(id) {
  var inp = document.getElementById('flag-note-edit-' + id); if (!inp) return;
  try {
    var res = await rwFetch('/api/flags/' + id, { method:'PATCH', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ note: inp.value }) });
    var d = await res.json();
    if (!res.ok) { alert(d.error || 'Could not save.'); return; }
    loadFlags();
  } catch (e) { alert('Connection error.'); }
}
async function cancelFlag(id) {
  if (!confirm('Cancel this flag? It stays in the list as cancelled so RestWerks knows it was withdrawn.')) return;
  try {
    var res = await rwFetch('/api/flags/' + id, { method:'PATCH', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ cancel: true }) });
    var d = await res.json();
    if (!res.ok) { alert(d.error || 'Could not cancel.'); return; }
    loadFlags();
  } catch (e) { alert('Connection error.'); }
}
async function settingsSaveSummary() {
  var list = (window._sumRecips || []).slice();
  var res = await rwFetch('/api/company', { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ summary_enabled: list.length > 0, summary_recipients: list }) });
  var data = await res.json();
  if (!res.ok) { alert(data.error || 'Could not save.'); return; }
  await loadCompanyContext();
  flashSaved('set-saved-summary');
}

function colorCell(prefix, slot, hex, isOwner) {
  var dis = isOwner ? '' : ' disabled';
  var pickVal = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : '#cccccc';
  return '<div class="color-cell"><div class="color-pick">' +
    '<input type="color" id="' + prefix + '-c' + slot + '" value="' + pickVal + '" oninput="settingsSyncColor(' + slot + ',\'pick\')"' + dis + ' />' +
    '<input class="fld-input" type="text" id="' + prefix + '-c' + slot + '-hex" value="' + esc(hex) + '" placeholder="' + (slot === 1 ? '#1D9E75' : 'optional') + '" oninput="settingsSyncColor(' + slot + ',\'hex\')"' + dis + ' />' +
    '</div></div>';
}
function settingsSyncColor(slot, from) {
  var pick = document.getElementById('set-c' + slot);
  var text = document.getElementById('set-c' + slot + '-hex');
  if (from === 'pick') text.value = pick.value;
  else if (/^#[0-9a-fA-F]{6}$/.test(text.value)) pick.value = text.value;
}
function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
// v1.18.0: timezone select for Settings. One authoritative zone per integrator; schedule texts
// and future renderings read it from the portal. Stored as an IANA zone name.
function tzSelect(current, isOwner) {
  var zones = [
    ['America/New_York', 'Eastern'],
    ['America/Chicago', 'Central'],
    ['America/Denver', 'Mountain'],
    ['America/Phoenix', 'Arizona'],
    ['America/Los_Angeles', 'Pacific'],
    ['America/Anchorage', 'Alaska'],
    ['Pacific/Honolulu', 'Hawaii']
  ];
  var cur = current || 'America/Chicago';
  var dis = isOwner ? '' : ' disabled';
  var html = '<select class="fld-input" id="set-timezone"' + dis + '>';
  var found = false;
  zones.forEach(function(z) {
    var sel = z[0] === cur ? ' selected' : '';
    if (sel) found = true;
    html += '<option value="' + z[0] + '"' + sel + '>' + z[1] + ' (' + z[0] + ')</option>';
  });
  if (!found) html += '<option value="' + esc(cur) + '" selected>' + esc(cur) + '</option>';
  html += '</select>';
  return html;
}
function flashSaved(id) { var el = document.getElementById(id); if (!el) return; el.classList.add('show'); setTimeout(function(){ el.classList.remove('show'); }, 1800); }

async function settingsSaveInfo() {
  var st = (document.getElementById('set-street') || {}).value || '';
  var ci = (document.getElementById('set-city') || {}).value || '';
  var sta = (document.getElementById('set-state') || {}).value || '';
  var zp = (document.getElementById('set-zip') || {}).value || '';
  var payload = {
    name: document.getElementById('set-name').value,
    office_phone: document.getElementById('set-phone').value,
    company_email: document.getElementById('set-email').value,
    company_website: (document.getElementById('set-website') || {}).value || '',
    timezone: (document.getElementById('set-timezone') || {}).value || 'America/Chicago'
  };
  if (st.trim() || ci.trim() || sta.trim() || zp.trim()) {
    payload.address = composeAddress(st, ci, sta, zp);
    payload.address_street = st; payload.address_city = ci; payload.address_state = sta; payload.address_zip = zp;
  }
  var res = await rwFetch('/api/company', {
    method: 'PUT', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  var data = await res.json();
  if (!res.ok) { alert(data.error || 'Could not save.'); return; }
  await loadCompanyContext();
  flashSaved('set-saved-info');
}
async function settingsSaveBranding() {
  var body = {
    brand_color: document.getElementById('set-c1-hex').value.trim(),
    brand_color_2: document.getElementById('set-c2-hex').value.trim(),
    brand_color_3: document.getElementById('set-c3-hex').value.trim()
  };
  var res = await rwFetch('/api/company', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
  var data = await res.json();
  if (!res.ok) { alert(data.error || 'Could not save.'); return; }
  await loadCompanyContext();
  flashSaved('set-saved-brand');
}
function settingsLogoChosen(input) {
  if (!input.files || !input.files[0]) return;
  var fd = new FormData(); fd.append('logo', input.files[0]);
  rwFetch('/api/company/logo', { method: 'POST', body: fd }).then(async function(res) {
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Logo upload failed.'); return; }
    await loadCompanyContext();
    loadSettings();
  });
}
async function settingsRemoveLogo() {
  await rwFetch('/api/company/logo/remove', { method: 'POST' });
  await loadCompanyContext();
  loadSettings();
}

// ── TEAM MANAGEMENT (increment #4) ───────────────────────────────────────────
async function loadTeam() {
  var body = document.getElementById('team-body');
  if (!body) return;
  try {
    var res = await rwFetch('/api/users');
    if (!res.ok) { body.innerHTML = '<div class="set-readonly">Could not load the team.</div>'; return; }
    var users = await res.json();
    renderTeam(users);
  } catch (e) { body.innerHTML = '<div class="set-readonly">Connection error.</div>'; }
}

var _team = [];
var _showRemoved = false;
function renderTeam(users) {
  _team = users || [];
  window._team = _team;
  var body = document.getElementById('team-body');
  if (!body) return;
  var active = _team.filter(function(u){ return u.active; });
  var removed = _team.filter(function(u){ return !u.active; });

  function rowHtml(u) {
    var name = esc(((u.first_name || '') + ' ' + (u.last_name || '')).trim());
    var roleLabel = rwRoleLabel(u);
    var statusPill = u.pending
      ? '<span class="team-pill pending">Pending</span>'
      : (u.active ? '' : '<span class="team-pill off">Removed</span>');
    // v1.22.0: morning email toggle per row. Recipients stay password_set logins only, so a
    // pending invite never shows the envelope.
    var em = String(u.email || '').toLowerCase();
    var mailHtml = '';
    if (u.active && !u.pending && em && Array.isArray(window._sumRecips)) {
      var on = window._sumRecips.indexOf(em) !== -1;
      mailHtml = '<span class="team-mail' + (on ? ' on' : '') + '" title="' + (on ? 'Gets the morning summary' : 'Not getting the morning summary') + '" onclick="toggleSumRecip(event,\'' + esc(em) + '\')">✉</span>';
    }
    return '<div class="team-row" onclick="openMemberEdit(' + u.id + ')" style="padding-left:0.4rem;padding-right:0.4rem;">' +
      '<div class="team-dot" style="background:' + (u.bubble_color || 'var(--ink-soft)') + ';"></div>' +
      '<div class="team-main"><div class="team-name">' + name + (u.is_self ? ' <span class="team-you">you</span>' : '') + ' ' + statusPill + '</div>' +
      '<div class="team-email">' + esc(u.email || '') + '</div></div>' +
      '<div class="team-role">' + roleLabel + '</div>' +
      mailHtml +
      '<div class="user-caret" style="color:var(--ink-soft);">›</div></div>';
  }

  var html = '';
  // v1.45.0: column header for the envelope (replaces the removed master checkbox). The Saved
  // flash lives here now so envelope toggles and outside add/remove still show feedback.
  html += '<div class="team-head"><span class="set-saved" id="set-saved-summary" style="margin-right:auto;">Saved</span><span class="team-head-label">Summary</span></div>';
  if (_showRemoved && removed.length) {
    // Two labeled sections so active and removed never blur together.
    html += '<div class="eq-section-title" style="margin:0.2rem 0 0.3rem;">Active</div><div class="team-list">';
    active.forEach(function(u){ html += rowHtml(u); });
    html += '</div>';
    html += '<div class="eq-section-title" style="margin:0.9rem 0 0.3rem;">Removed</div><div class="team-list">';
    removed.forEach(function(u){ html += rowHtml(u); });
    html += '</div>';
  } else {
    html += '<div class="team-list">';
    active.forEach(function(u){ html += rowHtml(u); });
    html += '</div>';
  }
  if (removed.length) {
    html += '<span class="team-toggle" onclick="toggleRemoved()">' +
      (_showRemoved ? 'Hide removed' : 'Show removed (' + removed.length + ')') + '</span>';
  }
  // v1.45.0: outside addresses (the summary recipients that are not team logins) as their own rows.
  html += renderOutsideGroup(active);
  body.innerHTML = html;
  if (window._addingOutside) { var ai = document.getElementById('team-add-email'); if (ai) ai.focus(); }
}

// v1.45.0: "Also send to" group. Outside addresses = lit summary recipients that do not match an
// active team login, so there is no separate store and no portal change. Added = lit, ✕ = removed.
function renderOutsideGroup(active) {
  var recips = Array.isArray(window._sumRecips) ? window._sumRecips : [];
  var teamEmails = (active || []).map(function(u){ return String(u.email || '').toLowerCase(); });
  var outside = recips.filter(function(em){ return teamEmails.indexOf(em) === -1; });
  var h = '<div class="team-outside-label">Also send to</div>';
  if (outside.length) {
    h += '<div class="team-list">';
    outside.forEach(function(em){
      h += '<div class="team-outrow"><div class="team-outaddr">' + esc(em) + '</div>' +
        '<span class="team-outmail" title="Gets the morning summary">✉</span>' +
        '<span class="team-outx" title="Remove" onclick="removeOutsideRecip(\'' + esc(em) + '\')">✕</span></div>';
    });
    h += '</div>';
  } else {
    h += '<div class="team-outnote">No outside addresses yet. Add an email to send the summary to someone who is not a login, like a shared inbox.</div>';
  }
  if (window._addingOutside) {
    h += '<div class="team-addrow"><input class="fld-input" id="team-add-email" type="email" placeholder="name@company.com" style="flex:1;" onkeydown="if(event.key===\'Enter\'){event.preventDefault();addOutsideCommit();}else if(event.key===\'Escape\'){addOutsideCancel();}" />' +
      '<button class="btn-primary" onclick="addOutsideCommit()">Add</button>' +
      '<button class="btn-ghost" onclick="addOutsideCancel()">Cancel</button></div>';
  } else {
    h += '<span class="team-addlink" onclick="addOutsideStart()">+ Add email</span>';
  }
  return h;
}
function addOutsideStart() { window._addingOutside = true; renderTeam(window._team || []); }
function addOutsideCancel() { window._addingOutside = false; renderTeam(window._team || []); }
async function addOutsideCommit() {
  var inp = document.getElementById('team-add-email');
  if (!inp) return;
  var em = String(inp.value || '').trim().toLowerCase();
  if (!em) { window._addingOutside = false; renderTeam(window._team || []); return; }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)) { inp.style.borderColor = '#c0392b'; return; }
  var list = window._sumRecips || [];
  if (list.indexOf(em) === -1) list.push(em);
  window._sumRecips = list;
  window._addingOutside = false;
  renderTeam(window._team || []);
  await settingsSaveSummary();
}
async function removeOutsideRecip(em) {
  var list = window._sumRecips || [];
  var i = list.indexOf(em);
  if (i !== -1) list.splice(i, 1);
  window._sumRecips = list;
  renderTeam(window._team || []);
  await settingsSaveSummary();
}
function toggleRemoved() { _showRemoved = !_showRemoved; renderTeam(_team); }

// ── ACCOUNT ID ───────────────────────────────────────────────────────────────
function formatAccountId() {
  var id = (window._rwUser && window._rwUser.integrator_id) || 0;
  return 'RW-' + String(id).padStart(5, '0');
}
function copyAccountId() {
  var val = formatAccountId();
  var btn = document.getElementById('acct-id-copy');
  var done = function(){ if (btn) { btn.textContent = 'Copied'; setTimeout(function(){ btn.textContent = 'Copy'; }, 1500); } };
  if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(val).then(done, done); }
  else { done(); }
}
function copySmsNumber() {
  var el = document.getElementById('sms-num-val');
  if (!el) return;
  var val = el.textContent; // dashed form, stays tappable when pasted into a message
  var btn = document.getElementById('sms-num-copy');
  var done = function(){ if (btn) { btn.textContent = 'Copied'; setTimeout(function(){ btn.textContent = 'Copy'; }, 1500); } };
  if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(val).then(done, done); }
  else { done(); }
}

// ── MEMBER DETAIL / EDIT (June 7) ────────────────────────────────────────────
var ME_PALETTE = ['#2D7DD2','#7B5EA7','#1D9E75','#E08600','#C0392B','#0E8A8A','#D6336C','#5C7CFA'];
var _meUser = null;
var _meColor = null;
var _meOrigEmail = '';

function openMemberEdit(id) {
  var u = (_team || []).filter(function(x){ return x.id === id; })[0];
  if (!u) return;
  _meUser = u;
  _meColor = u.bubble_color || null;
  _meOrigEmail = (u.email || '').toLowerCase();
  document.getElementById('me-title').textContent = ((u.first_name || '') + ' ' + (u.last_name || '')).trim() || 'Teammate';
  var sub = u.pending ? 'Invited, has not set a password yet.' : (u.active ? '' : 'Removed. No access until reactivated.');
  document.getElementById('me-sub').textContent = sub;
  document.getElementById('me-first').value = u.first_name || '';
  document.getElementById('me-last').value = u.last_name || '';
  document.getElementById('me-email').value = u.email || '';
  document.getElementById('me-cell').value = fmtPhone(u.cell_phone || '');
  document.getElementById('me-role').value = ['owner', 'manager', 'member'].indexOf(u.role) >= 0 ? u.role : 'member';
  // v1.94.0: a Manager runs the team but not the owners: an owner cannot be changed, and nobody can be made one.
  var ownLock = !rwCan('team.owners');
  var meRole = document.getElementById('me-role');
  meRole.querySelector('option[value="owner"]').disabled = ownLock && u.role !== 'owner';
  meRole.disabled = ownLock && u.role === 'owner';
  document.getElementById('me-role-lock').style.display = ownLock && u.role === 'owner' ? '' : 'none';
  document.getElementById('me-save-btn').disabled = ownLock && u.role === 'owner';
  document.getElementById('me-slack').value = u.slack_member_id || '';
  document.getElementById('me-email-note').style.display = 'none';
  document.getElementById('me-err').textContent = '';
  renderMePalette();
  syncMeCustomInputs();
  renderMeActions();
  document.getElementById('me-overlay').classList.add('show');
}
function closeMemberEdit() { document.getElementById('me-overlay').classList.remove('show'); }

// Build exactly 8 selectable quick colors: the free curated colors first, then backfill with
// generated distinct hues so a reserved color is replaced rather than leaving a gap. Mirrors the
// server's generate-when-exhausted approach; the server still validates the final choice.
function hexFromHsl(h, s, l) {
  s /= 100; l /= 100;
  var k = function(n){ return (n + h / 30) % 12; };
  var a = s * Math.min(l, 1 - l);
  var f = function(n){ return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
  var to = function(x){ return Math.round(255 * x).toString(16).padStart(2, '0'); };
  return '#' + to(f(0)) + to(f(8)) + to(f(4));
}
function buildQuickColors(takenLower) {
  var out = [], seen = {};
  ME_PALETTE.forEach(function(c){
    var lc = c.toLowerCase();
    if (takenLower.indexOf(lc) === -1 && !seen[lc]) { out.push(c); seen[lc] = 1; }
  });
  var i = 0;
  while (out.length < 8 && i < 3000) {
    var hex = hexFromHsl((i * 47) % 360, 55, 45);
    var lc = hex.toLowerCase();
    if (takenLower.indexOf(lc) === -1 && !seen[lc]) { out.push(hex); seen[lc] = 1; }
    i++;
  }
  return out;
}
function renderMePalette() {
  var wrap = document.getElementById('me-palette');
  if (!wrap) return;
  // Colors held by OTHER users (active or removed) are reserved to that person and excluded.
  var takenByOthers = (_team || [])
    .filter(function(x){ return x.id !== (_meUser && _meUser.id) && x.bubble_color; })
    .map(function(x){ return x.bubble_color.toLowerCase(); });
  var quicks = buildQuickColors(takenByOthers);
  var html = '';
  var inQuicks = false;
  quicks.forEach(function(c) {
    var sel = _meColor && _meColor.toLowerCase() === c.toLowerCase();
    if (sel) inQuicks = true;
    html += '<div class="me-swatch' + (sel ? ' sel' : '') + '" style="background:' + c + ';" ' +
      'onclick="meSelectColor(\'' + c + '\')" title="' + c + '"></div>';
  });
  // If the current color is outside the 8 quicks (custom or auto-generated), show it selected too.
  if (_meColor && !inQuicks) {
    html += '<div class="me-swatch sel" style="background:' + _meColor + ';" title="' + _meColor + ' (current)"></div>';
  }
  wrap.innerHTML = html;
}
function meSelectColor(c) { _meColor = c; syncMeCustomInputs(); renderMePalette(); }
function syncMeCustomInputs() {
  var cp = document.getElementById('me-color-pick');
  var ch = document.getElementById('me-color-hex');
  if (!cp || !ch) return;
  if (_meColor && /^#[0-9a-fA-F]{6}$/.test(_meColor)) { cp.value = _meColor; ch.value = _meColor; }
  else { ch.value = _meColor || ''; }
}
// Wheel and hex box drive the same _meColor as the palette swatches.
function meSyncCustom(from) {
  var cp = document.getElementById('me-color-pick');
  var ch = document.getElementById('me-color-hex');
  if (from === 'pick') { _meColor = cp.value; ch.value = cp.value; }
  else {
    var v = ch.value.trim();
    if (!/^#[0-9a-fA-F]{6}$/.test(v)) return; // wait for a full valid hex
    _meColor = v; cp.value = v;
  }
  renderMePalette();
  meColorCollisionNote();
}
function meColorCollisionNote() {
  var err = document.getElementById('me-err');
  if (!err || !_meColor) return;
  var clash = (_team || []).some(function(x){ return x.id !== (_meUser && _meUser.id) && x.bubble_color && x.bubble_color.toLowerCase() === _meColor.toLowerCase(); });
  err.textContent = clash ? 'Another teammate already uses that color.' : '';
}
function meEmailTouched() {
  var v = document.getElementById('me-email').value.toLowerCase().trim();
  document.getElementById('me-email-note').style.display = (v && v !== _meOrigEmail) ? 'block' : 'none';
}

function renderMeActions() {
  var wrap = document.getElementById('me-actions');
  var u = _meUser;
  var html = '';
  if (u.role === 'owner' && !rwCan('team.owners')) { wrap.innerHTML = ''; return; }
  if (u.pending) {
    html += '<button class="team-action" onclick="resendMember(' + u.id + ',this)">Resend invite</button>';
    if (!u.is_self) html += '<button class="team-action danger" onclick="revokeMember(' + u.id + ')">Revoke invite</button>';
  } else if (!u.active) {
    html += '<button class="team-action" onclick="reactivateMember(' + u.id + ",'fresh')\">Reactivate (set new password)</button>";
    html += '<button class="team-action" onclick="reactivateMember(' + u.id + ",'restore')\">Restore prior access</button>";
  } else if (!u.is_self) {
    html += '<button class="team-action danger" onclick="removeMember(' + u.id + ')">Remove</button>';
  }
  wrap.innerHTML = html;
}

async function submitMemberEdit() {
  var btn = document.getElementById('me-save-btn');
  var err = document.getElementById('me-err');
  err.textContent = '';
  var first = hhVal('me-first'), last = hhVal('me-last'), email = hhVal('me-email').toLowerCase(), role = document.getElementById('me-role').value;
  var cell = hhVal('me-cell');
  if (!first || !last) { err.textContent = 'First and last name are required.'; return; }
  if (!email) { err.textContent = 'Email is required.'; return; }
  btn.disabled = true; btn.textContent = 'Saving...';
  try {
    var res = await rwFetch('/api/users/' + _meUser.id, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ first_name: first, last_name: last, email: email, role: role, bubble_color: _meColor, cell_phone: cell,
        slack_member_id: hhVal('me-slack') })
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not save.'; btn.disabled = false; btn.textContent = 'Save'; return; }
    // If the owner edited their own name/color, refresh the sidebar.
    if (_meUser.is_self) {
      if (window._rwUser) { window._rwUser.first_name = first; window._rwUser.last_name = last; window._rwUser.bubble_color = _meColor; window._rwUser.role = role; }
      document.getElementById('sb-username').textContent = (first + ' ' + last).trim();
      document.getElementById('sb-avatar').textContent = ((first.charAt(0) || '') + (last.charAt(0) || '')).toUpperCase();
    }
    closeMemberEdit();
    loadTeam();
    if (data.email_changed) alert('Saved. A confirmation link was sent to ' + email + '. They must confirm it before signing in with the new address.');
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Save';
}

async function resendMember(id, el) {
  if (el) { el.textContent = 'Sending...'; el.disabled = true; }
  try {
    var res = await rwFetch('/api/users/' + id + '/resend', { method: 'POST' });
    if (el) el.textContent = res.ok ? 'Sent' : 'Try again';
  } catch (e) { if (el) el.textContent = 'Try again'; }
}
async function revokeMember(id) {
  if (!confirm('Revoke this invite? The pending teammate is deleted and the email frees up for a new invite.')) return;
  try {
    var res = await rwFetch('/api/users/' + id + '/revoke', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not revoke.'); return; }
    closeMemberEdit(); loadTeam();
  } catch (e) { alert('Connection error.'); }
}
async function reactivateMember(id, mode) {
  var msg = mode === 'restore'
    ? 'Restore this teammate with their previous password?'
    : 'Reactivate this teammate? Their old password is cleared and they get an email to set a new one before any access.';
  if (!confirm(msg)) return;
  try {
    var res = await rwFetch('/api/users/' + id + '/reactivate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ mode: mode }) });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not reactivate.'); return; }
    closeMemberEdit(); loadTeam();
  } catch (e) { alert('Connection error.'); }
}
async function removeMember(id) {
  if (!confirm('Remove this teammate? They lose access. Their history and color stay, and you can reactivate them later.')) return;
  try {
    var res = await rwFetch('/api/users/' + id + '/deactivate', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not remove.'); return; }
    closeMemberEdit(); loadTeam();
  } catch (e) { alert('Connection error.'); }
}

function openAddUser() {
  ['au-first','au-last','au-email','au-cell'].forEach(function(id){ var e=document.getElementById(id); if(e) e.value=''; });
  document.getElementById('au-role').value = 'member';
  document.getElementById('au-role').querySelector('option[value="owner"]').disabled = !rwCan('team.owners');
  document.getElementById('au-err').textContent = '';
  document.getElementById('au-overlay').classList.add('show');
  setTimeout(function(){ var n=document.getElementById('au-first'); if(n) n.focus(); }, 50);
}
function closeAddUser() { document.getElementById('au-overlay').classList.remove('show'); }

async function submitAddUser() {
  var btn = document.getElementById('au-save-btn');
  var err = document.getElementById('au-err');
  err.textContent = '';
  var first = hhVal('au-first'), last = hhVal('au-last'), email = hhVal('au-email').toLowerCase(), role = document.getElementById('au-role').value;
  if (!first || !last) { err.textContent = 'First and last name are required.'; return; }
  if (!email) { err.textContent = 'Email is required.'; return; }
  btn.disabled = true; btn.textContent = 'Sending invite...';
  try {
    var res = await rwFetch('/api/users', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ first_name: first, last_name: last, email: email, role: role, cell_phone: hhVal('au-cell') })
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not add teammate.'; btn.disabled = false; btn.textContent = 'Send invite'; return; }
    closeAddUser();
    loadTeam();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Send invite';
}

async function resendUser(id, el) {
  if (el) { el.textContent = 'Sending...'; el.disabled = true; }
  try {
    var res = await rwFetch('/api/users/' + id + '/resend', { method: 'POST' });
    if (el) el.textContent = res.ok ? 'Sent' : 'Try again';
  } catch (e) { if (el) el.textContent = 'Try again'; }
}

async function removeUser(id, name) {
  if (!confirm('Remove ' + name + ' from the team? They will lose access. Their history stays.')) return;
  try {
    var res = await rwFetch('/api/users/' + id + '/deactivate', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not remove.'); return; }
    loadTeam();
  } catch (e) { alert('Connection error.'); }
}

// ── PERSONAL ACCOUNT SETTINGS (user menu) ────────────────────────────────────
function openUserSettings(e) {
  if (e) e.stopPropagation();
  document.getElementById('sidebar-user').classList.remove('open');
  var u = window._rwUser || {};
  document.getElementById('us-first').value = u.first_name || '';
  document.getElementById('us-last').value = u.last_name || '';
  document.getElementById('us-cell').value = fmtPhone(u.cell_phone || '');
  document.getElementById('us-email').value = u.email || '';
  document.getElementById('us-cur').value = '';
  document.getElementById('us-new').value = '';
  document.getElementById('us-name-msg').textContent = '';
  document.getElementById('us-email-msg').textContent = '';
  document.getElementById('us-pw-msg').textContent = '';
  document.getElementById('us-pw-block').style.display = 'none';
  document.getElementById('us-pw-trigger').style.display = 'block';
  var dot = document.getElementById('us-color-dot');
  if (dot) dot.style.background = u.bubble_color || 'var(--ink-soft)';
  document.getElementById('us-overlay').classList.add('show');
  loadPushSettings();
}
function closeUserSettings() { document.getElementById('us-overlay').classList.remove('show'); }

// ── Push notifications (v1.60.0, PWA Slice B) ────────────────────────────────
// Full per event matrix + quiet hours + mute, per Andy's July 20 decisions. Everything here is
// per user per device; the portal (v1.56.0) does the fan-out and holds the prefs.
var _pushPrefsData = null;

function urlB64ToUint8(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  var raw = window.atob(base64);
  var arr = new Uint8Array(raw.length);
  for (var i = 0; i < raw.length; ++i) arr[i] = raw.charCodeAt(i);
  return arr;
}

async function loadPushSettings() {
  var state = document.getElementById('push-state');
  var enableRow = document.getElementById('push-enable-row');
  var prefsBox = document.getElementById('push-prefs');
  if (!state) return;
  // quiet hour selects reuse the coverage-window half-hour options
  var qs = document.getElementById('pp-quiet_start'), qe = document.getElementById('pp-quiet_end');
  if (qs && !qs.options.length) { qs.innerHTML = timeOptions('22:00'); qe.innerHTML = timeOptions('07:00'); }
  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    state.textContent = 'This browser does not support push notifications. On iPhone, add the app to your Home Screen first (Share, then Add to Home Screen), then turn notifications on from inside the installed app.';
    enableRow.style.display = 'none'; prefsBox.style.display = 'none';
    return;
  }
  try {
    var res = await rwFetch('/api/push/prefs');
    if (!res.ok) { state.textContent = 'Could not load notification settings.'; return; }
    _pushPrefsData = await res.json();
    if (!_pushPrefsData.configured) {
      state.textContent = 'Push is not configured on the server yet.';
      enableRow.style.display = 'none'; prefsBox.style.display = 'none';
      return;
    }
    var reg = await navigator.serviceWorker.getRegistration();
    var sub = reg ? await reg.pushManager.getSubscription() : null;
    enableRow.style.display = 'flex';
    document.getElementById('push-enable-btn').style.display = sub ? 'none' : 'inline-block';
    document.getElementById('push-disable-btn').style.display = sub ? 'inline-block' : 'none';
    state.textContent = sub ? 'Notifications are on for this device.' : 'Notifications are off on this device.';
    prefsBox.style.display = 'block';
    pushFillPrefs(_pushPrefsData);
  } catch (e) { state.textContent = 'Could not load notification settings.'; }
}

function pushFillPrefs(d) {
  var p = d.prefs || {};
  ['client_message','unknown_number','takeover_handback','new_ticket','ticket_assigned','followup_assigned'].forEach(function(k){
    var el = document.getElementById('pp-' + k);
    if (el && p[k]) el.value = p[k];
  });
  var qeCb = document.getElementById('pp-quiet_enabled');
  if (qeCb) qeCb.checked = !!d.quiet_enabled;
  if (d.quiet_start) document.getElementById('pp-quiet_start').value = d.quiet_start;
  if (d.quiet_end) document.getElementById('pp-quiet_end').value = d.quiet_end;
  document.getElementById('pp-quiet-times').style.opacity = d.quiet_enabled ? '1' : '0.45';
  pushRenderMute(d.mute_until);
}

function pushRenderMute(muteUntil) {
  var el = document.getElementById('push-mute-state');
  var un = document.getElementById('push-unmute-btn');
  var active = muteUntil && new Date(muteUntil) > new Date();
  if (el) {
    el.textContent = active
      ? ('Muted until ' + new Date(muteUntil).toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }))
      : 'Not muted.';
  }
  if (un) un.style.display = active ? 'inline-block' : 'none';
}

async function pushEnable() {
  var msg = document.getElementById('push-msg');
  try {
    var perm = await Notification.requestPermission();
    if (perm !== 'granted') { msg.textContent = 'Permission was not granted.'; msg.className = 'wiz-err'; return; }
    var keyRes = await rwFetch('/api/push/vapid-key');
    if (!keyRes.ok) { msg.textContent = 'Push is not configured on the server yet.'; msg.className = 'wiz-err'; return; }
    var kd = await keyRes.json();
    var reg = await navigator.serviceWorker.ready;
    var sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlB64ToUint8(kd.key) });
    var label = (navigator.userAgent.indexOf('iPhone') !== -1 ? 'iPhone' : navigator.userAgent.indexOf('Android') !== -1 ? 'Android' : 'Desktop');
    var res = await rwFetch('/api/push/subscribe', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ subscription: sub.toJSON(), device_label: label })
    });
    if (!res.ok) { msg.textContent = 'Could not save the subscription.'; msg.className = 'wiz-err'; return; }
    msg.textContent = 'Notifications are on.'; msg.className = 'us-ok';
    loadPushSettings();
  } catch (e) { msg.textContent = 'Could not turn on notifications.'; msg.className = 'wiz-err'; }
}

async function pushDisable() {
  var msg = document.getElementById('push-msg');
  try {
    var reg = await navigator.serviceWorker.getRegistration();
    var sub = reg ? await reg.pushManager.getSubscription() : null;
    if (sub) {
      try { await rwFetch('/api/push/unsubscribe', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ endpoint: sub.endpoint }) }); } catch(e) {}
      await sub.unsubscribe();
    }
    msg.textContent = 'Notifications are off on this device.'; msg.className = 'us-ok';
    loadPushSettings();
  } catch (e) { msg.textContent = 'Could not turn off notifications.'; msg.className = 'wiz-err'; }
}

async function pushSavePrefs() {
  var msg = document.getElementById('push-msg');
  var prefs = {};
  ['client_message','unknown_number','takeover_handback','new_ticket','ticket_assigned','followup_assigned'].forEach(function(k){
    var el = document.getElementById('pp-' + k);
    if (el) prefs[k] = el.value;
  });
  var quietOn = document.getElementById('pp-quiet_enabled').checked;
  document.getElementById('pp-quiet-times').style.opacity = quietOn ? '1' : '0.45';
  try {
    var res = await rwFetch('/api/push/prefs', {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prefs: prefs,
        quiet_enabled: quietOn,
        quiet_start: document.getElementById('pp-quiet_start').value,
        quiet_end: document.getElementById('pp-quiet_end').value
      })
    });
    msg.textContent = res.ok ? 'Saved' : 'Could not save.';
    msg.className = res.ok ? 'us-ok' : 'wiz-err';
  } catch (e) { msg.textContent = 'Connection error.'; msg.className = 'wiz-err'; }
}

async function pushMute(mode) {
  var msg = document.getElementById('push-msg');
  var until = null;
  if (mode === 1) until = new Date(Date.now() + 60 * 60 * 1000).toISOString();
  else if (mode === 'tomorrow') {
    var t = new Date(); t.setDate(t.getDate() + 1); t.setHours(7, 0, 0, 0);
    until = t.toISOString();
  }
  try {
    var res = await rwFetch('/api/push/prefs', {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mute_until: until })
    });
    if (res.ok) { pushRenderMute(until); msg.textContent = 'Saved'; msg.className = 'us-ok'; }
    else { msg.textContent = 'Could not save.'; msg.className = 'wiz-err'; }
  } catch (e) { msg.textContent = 'Connection error.'; msg.className = 'wiz-err'; }
}

// A tapped notification lands here: the service worker either posts open_thread to a live
// dashboard or cold starts it with #thread=. Both roads end at the same open.
function pushOpenThread(phone) {
  if (!phone) return;
  try {
    // v1.96.0: a push tap or a link records where you were, so Back returns there.
    var dest = { kind:'conversation', phone: encodeURIComponent(phone), name: '' };
    if (typeof currentViewOrList === 'function') { var cur = currentViewOrList(); if (!sameNav(cur, dest)) recordStep(cur, dest); }
    if (typeof nav === 'function' && typeof navItem === 'function') nav('conversations', navItem('conversations'));
    openRealConv(encodeURIComponent(phone), '');
  } catch (e) {}
}
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'open_thread') pushOpenThread(e.data.phone);
  });
}
// Clear the app icon badge whenever the app comes to the front.
function pushClearBadge() { try { if (navigator.clearAppBadge) navigator.clearAppBadge(); } catch (e) {} }
window.addEventListener('focus', pushClearBadge);
document.addEventListener('visibilitychange', function(){ if (!document.hidden) pushClearBadge(); });
function showChangePw() {
  document.getElementById('us-pw-trigger').style.display = 'none';
  document.getElementById('us-pw-block').style.display = 'block';
}

async function saveMyName() {
  var msg = document.getElementById('us-name-msg');
  var first = hhVal('us-first'), last = hhVal('us-last'), cell = hhVal('us-cell');
  if (!first || !last) { msg.textContent = 'First and last name are required.'; msg.className = 'wiz-err'; return; }
  try {
    var res = await rwFetch('/api/me', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ first_name: first, last_name: last, cell_phone: cell }) });
    var data = await res.json();
    if (!res.ok) { msg.textContent = data.error || 'Could not save.'; msg.className = 'wiz-err'; return; }
    if (window._rwUser) { window._rwUser.first_name = first; window._rwUser.last_name = last; if (data.cell_phone !== undefined) window._rwUser.cell_phone = data.cell_phone; }
    document.getElementById('sb-username').textContent = (first + ' ' + last).trim();
    document.getElementById('sb-avatar').textContent = ((first.charAt(0) || '') + (last.charAt(0) || '')).toUpperCase();
    if (data.cell_phone !== undefined) document.getElementById('us-cell').value = fmtPhone(data.cell_phone || '');
    msg.textContent = 'Saved'; msg.className = 'us-ok';
  } catch (e) { msg.textContent = 'Connection error.'; msg.className = 'wiz-err'; }
}

async function saveMyEmail() {
  var msg = document.getElementById('us-email-msg');
  var email = hhVal('us-email').toLowerCase();
  if (!email) { msg.textContent = 'Enter an email.'; msg.className = 'wiz-err'; return; }
  try {
    var res = await rwFetch('/api/me/email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }) });
    var data = await res.json();
    if (!res.ok) { msg.textContent = data.error || 'Could not change email.'; msg.className = 'wiz-err'; return; }
    if (window._rwUser) { window._rwUser.email = email; window._rwUser.email_verified = false; }
    applyAccountState(window._rwUser);
    msg.textContent = 'Confirmation sent'; msg.className = 'us-ok';
  } catch (e) { msg.textContent = 'Connection error.'; msg.className = 'wiz-err'; }
}

async function saveMyPassword() {
  var msg = document.getElementById('us-pw-msg');
  var cur = document.getElementById('us-cur').value, nw = document.getElementById('us-new').value;
  var nw2 = document.getElementById('us-new2').value;
  if (!cur || !nw) { msg.textContent = 'Fill in both fields.'; msg.className = 'wiz-err'; return; }
  if (nw !== nw2) { msg.textContent = 'New passwords do not match.'; msg.className = 'wiz-err'; return; }
  try {
    var res = await rwFetch('/api/me/password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current_password: cur, new_password: nw }) });
    var data = await res.json();
    if (!res.ok) { msg.textContent = data.error || 'Could not change password.'; msg.className = 'wiz-err'; return; }
    document.getElementById('us-cur').value = ''; document.getElementById('us-new').value = ''; document.getElementById('us-new2').value = '';
    var mh = document.getElementById('us-matchhint'); if (mh) mh.style.display = 'none';
    msg.textContent = 'Password changed'; msg.className = 'us-ok';
  } catch (e) { msg.textContent = 'Connection error.'; msg.className = 'wiz-err'; }
}


// ── HOUSEHOLDS (list + create) ───────────────────────────────────────────────
var _households = [];

async function loadHouseholds() {
  backToHouseholds();
  var list = document.getElementById('hh-list');
  if (list) list.innerHTML = '<div class="hh-empty">Loading...</div>';
  try {
    var res = await rwFetch('/api/households');
    if (!res.ok) { if (list) list.innerHTML = '<div class="hh-empty">Could not load households.</div>'; return; }
    _households = await res.json();
    var s = document.getElementById('hh-search');
    filterHouseholds(s ? s.value : '');
  } catch (e) { if (list) list.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}

function fmtPhone(p) { return p ? p.replace('+1','').replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3') : ''; }

function householdSub(h) {
  // #11: card shows names (in the label above) + project + address only. Numbers live in detail.
  return h.address || '';
}

var _hhShowRemoved = false;

function householdRowHtml(h, removed) {
  var proj = h.project_name ? ' <span class="hh-project">' + esc(h.project_name) + '</span>' : '';
  var tc = parseInt(h.open_ticket_count || 0, 10);
  var sc = parseInt(h.scheduled_ticket_count || 0, 10);
  var fc = parseInt(h.open_followup_count || 0, 10);
  var badges = '';
  if (!removed && tc > 0) badges += '<div class="hh-count-col"><span class="hh-count-label">Tickets Open</span><span class="hh-count tickets" title="Open tickets">' + tc + '</span></div>';
  if (!removed && sc > 0) badges += '<div class="hh-count-col"><span class="hh-count-label">Tickets Scheduled</span><span class="hh-count scheduled" title="Scheduled tickets">' + sc + '</span></div>';
  if (!removed && fc > 0) badges += '<div class="hh-count-col"><span class="hh-count-label">Follow ups</span><span class="hh-count followups" title="Open follow ups">' + fc + '</span></div>';
  return '<div class="hh-row clickable' + (removed ? ' removed' : '') + '" onclick="enterHousehold(' + h.id + ')">' +
    '<div class="hh-main">' +
      '<div class="hh-name">' + esc(h.name || '') + proj + '</div>' +
      '<div class="hh-sub">' + esc(householdSub(h)) + '</div>' +
    '</div>' +
    (badges ? '<div class="hh-counts">' + badges + '</div>' : '') +
    '<div class="hh-chev">›</div></div>';
}

function renderHouseholds(list) {
  var el = document.getElementById('hh-list');
  if (!el) return;
  var active = list.filter(function(h) { return h.active !== false; });
  var removed = list.filter(function(h) { return h.active === false; });
  if (!active.length && !removed.length) {
    el.innerHTML = '<div class="hh-empty">No households yet.<br><br><button class="hh-add-btn" onclick="openAddHousehold()">+ Add your first household</button></div>';
    return;
  }
  var html = '';
  if (!active.length) html += '<div class="hh-empty" style="padding:2rem 1.5rem;">No active households.</div>';
  active.forEach(function(h) { html += householdRowHtml(h, false); });
  if (removed.length) {
    html += '<div class="hh-show-removed" onclick="toggleShowRemoved(event)">' +
      (_hhShowRemoved ? 'Hide' : 'Show') + ' removed (' + removed.length + ')</div>';
    if (_hhShowRemoved) {
      html += '<div class="hh-section-head">Removed</div>';
      removed.forEach(function(h) { html += householdRowHtml(h, true); });
    }
  }
  el.innerHTML = html;
}

function toggleShowRemoved(e) {
  if (e) e.stopPropagation();
  _hhShowRemoved = !_hhShowRemoved;
  var s = document.getElementById('hh-search');
  filterHouseholds(s ? s.value : '');
}

function filterHouseholds(q) {
  q = (q || '').toLowerCase().trim();
  if (!q) { renderHouseholds(_households); return; }
  var f = _households.filter(function(h) {
    var hay = (h.name || '') + ' ' + (h.project_name || '') + ' ' + (h.address || '') + ' ' +
      (h.people || []).map(function(p) { return (p.first_name || '') + ' ' + (p.last_name || '') + ' ' + (p.phone || ''); }).join(' ');
    return hay.toLowerCase().indexOf(q) !== -1;
  });
  renderHouseholds(f);
}

function hhVal(id) { var e = document.getElementById(id); return e ? e.value.trim() : ''; }

// Mirrors the server label assembly so the integrator sees how it will file as they type.
function buildLabelPreview() {
  var f1 = hhVal('hh-first'), l1 = hhVal('hh-last'), f2 = hhVal('hh-first2'), l2 = hhVal('hh-last2') || l1;
  if (!f1 || !l1) return '';
  var base = l1 + ', ' + f1;
  if (!f2) return base;
  if (l2.toLowerCase() === l1.toLowerCase()) return base + ' & ' + f2;
  return base + ' & ' + l2 + ', ' + f2;
}
function updateLabelPreview() {
  var el = document.getElementById('hh-label-preview');
  var lbl = buildLabelPreview();
  if (lbl) { el.textContent = 'Files as: ' + lbl; el.style.display = 'block'; }
  else { el.style.display = 'none'; }
}

function openAddHousehold() {
  ['hh-first','hh-last','hh-phone','hh-first2','hh-last2','hh-phone2','hh-project','hh-address'].forEach(function(id) { var e = document.getElementById(id); if (e) e.value = ''; });
  window._hhAddr = null;
  document.getElementById('hh-type').value = 'Owner';
  document.getElementById('hh-type2').value = 'Owner';
  document.getElementById('hh-err').textContent = '';
  updateLabelPreview();
  document.getElementById('hh-overlay').classList.add('show');
  setTimeout(function() { var n = document.getElementById('hh-first'); if (n) n.focus(); }, 50);
}
function closeAddHousehold() { document.getElementById('hh-overlay').classList.remove('show'); }

async function submitAddHousehold() {
  var btn = document.getElementById('hh-save-btn');
  var err = document.getElementById('hh-err');
  err.textContent = '';
  var first = hhVal('hh-first'), last = hhVal('hh-last'), phone = hhVal('hh-phone');
  if (!first) { err.textContent = 'First name is required.'; return; }
  if (!last) { err.textContent = 'Last name is required.'; return; }
  if (!phone) { err.textContent = 'A phone number is required.'; return; }
  btn.disabled = true; btn.textContent = 'Adding...';
  try {
    var res = await rwFetch('/api/households', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        first_name: first, last_name: last, phone: phone,
        client_type: hhVal('hh-type'),
        first_name_2: hhVal('hh-first2'), last_name_2: hhVal('hh-last2'), phone_2: hhVal('hh-phone2'),
        client_type_2: hhVal('hh-type2'),
        project_name: hhVal('hh-project'), address: hhVal('hh-address'),
        address_street: (window._hhAddr || {}).street || '', address_city: (window._hhAddr || {}).city || '',
        address_state: (window._hhAddr || {}).state || '', address_zip: (window._hhAddr || {}).zip || ''
      })
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not add household.'; btn.disabled = false; btn.textContent = 'Add household'; return; }
    closeAddHousehold();
    await loadHouseholds();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Add household';
}

// ── HOUSEHOLD DETAIL / EDIT (v1.9.0) ───────────────────────────────────────────
var _hd = null;          // the loaded household record
var _hdTab = 'system'; // active household detail tab (#7); v1.22.0 System leads
var _hdTabOrder = ['system','people','activity','photos','files','andi']; // session-only drag order
var _hdDragTab = null;
function hdTabDragStart(e){ _hdDragTab = e.target.getAttribute('data-tab'); e.target.classList.add('dragging'); try{ e.dataTransfer.effectAllowed='move'; }catch(x){} }
function hdTabDragOver(e){ e.preventDefault(); try{ e.dataTransfer.dropEffect='move'; }catch(x){} }
function hdTabDragEnd(e){ e.target.classList.remove('dragging'); _hdDragTab=null; }
function hdTabDrop(e){
  e.preventDefault();
  var target = e.target.closest ? e.target.closest('.hd-tab') : e.target;
  var onto = target && target.getAttribute('data-tab');
  if(!_hdDragTab || !onto || _hdDragTab===onto) return;
  var ord = _hdTabOrder.slice();
  ord.splice(ord.indexOf(_hdDragTab),1);
  ord.splice(ord.indexOf(onto),0,_hdDragTab);
  _hdTabOrder = ord;
  renderHouseholdDetail();
}
var _hpClientId = null;  // person being edited in the person modal, null = adding

function backToHouseholds() {
  window._hdOpening = null; // v1.96.0: a house still loading is abandoned
  var lv = document.getElementById('hh-list-view');
  var dv = document.getElementById('hh-detail-view');
  if (lv) lv.style.display = '';
  if (dv) dv.style.display = 'none';
  _hd = null;
}

async function openHouseholdDetail(id) {
  document.getElementById('hh-list-view').style.display = 'none';
  document.getElementById('hh-detail-view').style.display = '';
  document.getElementById('hd-title').textContent = 'Household';
  document.getElementById('hd-removed-tag').style.display = 'none';
  document.getElementById('hd-body').innerHTML = '<div class="hh-empty">Loading...</div>';
  try {
    window._hdOpening = id;
    var res = await rwFetch('/api/households/' + id);
    if (window._hdOpening !== id) return; // v1.96.0: another house was opened (or Back pressed) while this one loaded
    if (!res.ok) { document.getElementById('hd-body').innerHTML = '<div class="hh-empty">Could not load this household.</div>'; return; }
    var hdData = await res.json();
    if (window._hdOpening !== id) return;
    _hd = hdData;
    renderHouseholdDetail();
  } catch (e) { document.getElementById('hd-body').innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}

// v1.93.0
function hdSlackHtml(h) {
  var cur = h.slack_channel_id ? '<b>#' + esc(h.slack_channel_name || h.slack_channel_id) + '</b>' : 'None. This client\'s tickets post in the catch all.';
  return '<div style="color:var(--ink-soft);font-size:0.76rem;margin-bottom:0.5rem;">Tickets for this client post in their own channel, with a one line pointer in the catch all. A private channel needs /invite of the app once.</div>' +
    '<div class="hh-slack" id="hd-slack-row"><span style="font-size:0.84rem;">' + cur + '</span>' +
    '<button class="btn-ghost" onclick="hdSlackPick()">' + (h.slack_channel_id ? 'Change' : 'Pick a channel') + '</button>' +
    (h.slack_channel_id ? '<button class="btn-ghost" onclick="hdSlackSave(null, null)">Clear</button>' : '') + '</div><div class="hd-err" id="hd-slack-err"></div>';
}
async function hdSlackPick() {
  var row = document.getElementById('hd-slack-row'), err = document.getElementById('hd-slack-err');
  if (err) err.textContent = '';
  if (row) row.innerHTML = '<span style="font-size:0.82rem;color:var(--ink-soft);">Loading channels...</span>';
  try {
    var res = await rwFetch('/api/slack/channels');
    var data = await res.json();
    if (!res.ok) { if (row) row.innerHTML = ''; if (err) err.textContent = data.error || 'Could not load channels.'; return; }
    if (!data.connected) { if (row) row.innerHTML = '<span style="font-size:0.82rem;color:var(--ink-soft);">Slack is not connected. An owner connects it in Settings, On call.</span>'; return; }
    var want = String((_hd && _hd.name) || '').toLowerCase().split(/[^a-z0-9]+/).filter(function(w){ return w.length > 2; });
    var chans = data.channels || [];
    // A likely match first (a word of the household name in the channel name), the rest after. Never picked for you.
    var guess = chans.filter(function(c){ return want.some(function(w){ return c.name.indexOf(w) >= 0; }); });
    var rest = chans.filter(function(c){ return guess.indexOf(c) < 0; });
    var opt = function(c){ return '<option value="' + esc(c.id) + '" data-name="' + esc(c.name) + '">#' + esc(c.name) + (c.is_private ? ' (private)' : '') + (c.is_member ? '' : ' (app not in it yet)') + '</option>'; };
    var h = '<select class="fld-input" id="hd-slack-sel"><option value="">Pick a channel</option>';
    if (guess.length) h += '<optgroup label="Looks like this client">' + guess.map(opt).join('') + '</optgroup>';
    h += '<optgroup label="All channels">' + rest.map(opt).join('') + '</optgroup></select>';
    h += '<button class="btn-primary" onclick="hdSlackSave()">Save</button><button class="btn-ghost" onclick="renderHdSlack()">Cancel</button>';
    if (row) row.innerHTML = h;
  } catch (e) { if (row) row.innerHTML = ''; if (err) err.textContent = 'Connection error.'; }
}
function renderHdSlack() { var el = document.getElementById('hd-slack'); if (el && _hd) el.innerHTML = hdSlackHtml(_hd); }
async function hdSlackSave(id, name) {
  var err = document.getElementById('hd-slack-err'); if (err) err.textContent = '';
  if (id === undefined) {
    var sel = document.getElementById('hd-slack-sel');
    if (!sel || !sel.value) { if (err) err.textContent = 'Pick a channel first.'; return; }
    id = sel.value; name = sel.options[sel.selectedIndex].getAttribute('data-name');
  }
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/slack-channel', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ channel_id: id, channel_name: name }) });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not save.'; return; }
    _hd.slack_channel_id = data.slack_channel_id; _hd.slack_channel_name = data.slack_channel_name;
    renderHdSlack();
  } catch (e) { if (err) err.textContent = 'Connection error.'; }
}

function hdField(label, id, val) {
  return '<div class="hd-fld"><label>' + label + '</label><input class="hd-input" id="' + id + '" type="text" value="' + esc(val || '') + '" /></div>';
}

function renderHouseholdDetail() {
  var h = _hd;
  var removed = h.active === false;
  document.getElementById('hd-title').textContent = h.name || 'Household';
  document.getElementById('hd-removed-tag').style.display = removed ? '' : 'none';

  // Header mirrors the list preview: project tag next to the name, address as the sub line,
  // pencil opens the inline edit. + Create (orange, same as the conversation one) on the right.
  var projTag = document.getElementById('hd-project-tag');
  projTag.textContent = h.project_name || '';
  projTag.style.display = h.project_name ? '' : 'none';
  var addr = document.getElementById('hd-address-line');
  addr.textContent = h.address || 'No address on file';
  addr.style.display = '';
  document.getElementById('hd-pencil').style.display = removed ? 'none' : '';
  document.getElementById('hd-head-edit').style.display = 'none';
  document.getElementById('hd-create-btn').style.display = removed ? 'none' : '';

  var people = h.people || [];
  var activePeople = people.filter(function(p) { return p.active !== false; });
  var removedPeople = people.filter(function(p) { return p.active === false; });

  // ── People panel (remove/restore zone lives here now) ──
  var peopleHtml = '';
  if (!activePeople.length) peopleHtml += '<div class="hd-person-sub" style="padding:0.4rem 0;">No active contacts.</div>';
  activePeople.forEach(function(p) { peopleHtml += personRowHtml(p, false); });
  peopleHtml += '<button class="hd-add-person" onclick="openHpAdd()">+ Add a person</button>';
  // v1.93.0: the household's own Slack channel. Picked from the channels the shop's app can see; never matched by
  // itself. This client's tickets then post there, with a one line pointer in the catch all.
  if (!removed) peopleHtml += '<div class="hd-block-title" style="margin-top:1.3rem;">Slack channel</div><div id="hd-slack">' + hdSlackHtml(h) + '</div>';
  if (removedPeople.length) {
    peopleHtml += '<div style="margin-top:0.6rem;">';
    removedPeople.forEach(function(p) { peopleHtml += personRowHtml(p, true); });
    peopleHtml += '</div>';
  }
  if (removed) {
    peopleHtml += '<div class="hd-danger-zone" style="margin-top:1.2rem;border-color:var(--border);background:var(--canvas-warm);">' +
      '<div class="dz-text">This household is removed. Bring it back with its history and reserved numbers intact.</div>' +
      '<button class="hd-restore-btn" onclick="reactivateHousehold()">Restore household</button></div>';
  }

  // ── System panel: System Types (auto-populated from the sales order) lead, then the full
  //    Equipment record, then household settings. Andi remembers is its own tab now.
  var systemHtml =
    '<div class="hd-block-title">System types</div>' +
    '<div class="sys-types hd-grid-4">' +
    hdField('Internet provider', 'hd-isp', h.isp_name) +
    hdField('Network', 'hd-network', h.network_tier) +
    '<div class="hd-fld"><label>WiFi network</label><input class="hd-input" id="hd-wifi-net" value="' + esc(h.wifi_network || '') + '" oninput="eqMirror(\'hd-wifi-net\',\'hd-wifi-net-andi\')" /></div>' +
    '<div class="hd-fld"><label>WiFi password</label><input class="hd-input" id="hd-wifi-pw" value="' + esc(h.wifi_password || '') + '" oninput="eqMirror(\'hd-wifi-pw\',\'hd-wifi-pw-andi\')" /></div>' +
    hdField('Control', 'hd-control', h.control_system_type) +
    hdField('Lighting', 'hd-lighting', h.lighting_system_type) +
    hdField('Surveillance', 'hd-cameras', h.camera_system_type) +
    hdField('Security', 'hd-locks', h.lock_system_type) +
    '</div>' +
    '<div class="eq-divider"></div>' +
    equipmentSectionHtml(h) +
    '<div class="hd-block-title" style="margin-top:1.3rem;">Household settings</div><div class="hd-grid">' +
    hdField('Priority tier', 'hd-priority', h.priority_tier) +
    '<div class="hd-fld full"><label>System notes</label><textarea class="hd-input" id="hd-notes">' + esc(h.household_notes || '') + '</textarea></div>' +
    '</div>' +
    '<div class="hd-toggle-row"><input type="checkbox" id="hd-reboot"' + (h.remote_reboot_enabled ? ' checked' : '') + ' /> <label for="hd-reboot" style="cursor:pointer;">Remote reboot enabled for this household</label></div>' +
    '<div class="hd-save-bar" style="margin-top:0.9rem;"><button class="hd-save" id="hd-save-btn" onclick="saveHouseholdFields()">Save changes</button><span class="hd-saved-note" id="hd-saved-note">Saved</span><span class="hd-err" id="hd-fields-err"></span></div>';

  // ── Andi remembers (its own tab): the facts Andi serves to clients. WiFi mirrors the System tab.
  var andiHtml =
    '<div class="hd-block-title">Andi remembers</div>' +
    '<div style="color:var(--ink-soft);font-size:0.76rem;margin-bottom:0.7rem;">The facts Andi gives opted-in household members. WiFi mirrors the System tab.</div>' +
    '<div class="hd-grid">' +
    '<div class="hd-fld"><label>WiFi network</label><input class="hd-input" id="hd-wifi-net-andi" value="' + esc(h.wifi_network || '') + '" oninput="eqMirror(\'hd-wifi-net-andi\',\'hd-wifi-net\')" /></div>' +
    '<div class="hd-fld"><label>WiFi password</label><input class="hd-input" id="hd-wifi-pw-andi" value="' + esc(h.wifi_password || '') + '" oninput="eqMirror(\'hd-wifi-pw-andi\',\'hd-wifi-pw\')" /></div>' +
    hdField('Garage code', 'hd-garage', h.garage_code) +
    hdField('Security manager', 'hd-security', h.security_manager_name) +
    '</div>' +
    '<div class="hd-save-bar" style="margin-top:0.9rem;"><button class="hd-save" onclick="saveHouseholdFields()">Save changes</button><span class="hd-saved-note">Saved</span><span class="hd-err"></span></div>';

  // ── Activity panel (#6, chronological stream with filters) ──
  var activityHtml = householdActivityHtml(h);

  // ── Photos panel (with delete) ──
  var photosHtml = '<div id="hd-photo-container"><div class="hd-person-sub">Loading photos...</div></div>' +
    '<button class="hd-photo-add" id="hd-photo-add" onclick="document.getElementById(\'hd-photo-input\').click()">+ Add photo</button>' +
    '<input type="file" id="hd-photo-input" accept="image/*" style="display:none;" onchange="uploadDetailPhoto(this)" />';

  // #7 tab set is data-driven, so reordering or renaming is a one-line change here.
  // v1.22.0: System leads (Andy: the integrator's first question is what's in the house;
  // Activity is often empty). Arrangeable-per-user order is parked with the preference cluster.
  var filesHtml =
    '<div class="hd-block-title">Files</div>' +
    '<div style="color:var(--ink-soft);font-size:0.8rem;margin-bottom:0.8rem;">Documents stored with this household. The sales order is saved here when you import it; add change orders, scopes, or anything else.</div>' +
    '<div id="hd-docs-list"><div style="color:var(--ink-soft);font-size:0.8rem;">Loading documents...</div></div>' +
    '<label class="doc-add-btn">+ Add document<input type="file" style="display:none;" onchange="pickDocument(this,' + (_hd && _hd.id ? _hd.id : 'null') + ',\'hd-docs-list\')"></label>';
  var tabs = [
    { id: 'system',   label: 'System',   html: systemHtml },
    { id: 'people',   label: 'People',   html: peopleHtml },
    { id: 'activity', label: 'Activity', html: activityHtml },
    { id: 'photos',   label: 'Photos',   html: photosHtml },
    { id: 'files',    label: 'Files',    html: filesHtml },
    { id: 'andi',     label: 'Andi remembers', html: andiHtml }
  ];
  // session-only drag order (persistence parked with the preferences cluster)
  tabs.sort(function(a,b){ return _hdTabOrder.indexOf(a.id) - _hdTabOrder.indexOf(b.id); });
  var active = tabs.some(function(t){ return t.id === _hdTab; }) ? _hdTab : 'system';

  var strip = '<div class="hd-tabs">' + tabs.map(function(t){
    return '<button class="hd-tab' + (t.id === active ? ' active' : '') + '" data-tab="' + t.id + '" draggable="true"' +
      ' ondragstart="hdTabDragStart(event)" ondragover="hdTabDragOver(event)" ondrop="hdTabDrop(event)" ondragend="hdTabDragEnd(event)"' +
      ' onclick="hdTab(\'' + t.id + '\')">' + t.label + '</button>';
  }).join('') + '</div>';
  var panels = '<div class="hd-tabbody">' + tabs.map(function(t){
    return '<div class="hd-tabpanel' + (t.id === active ? ' active' : '') + '" id="hdtab-' + t.id + '">' + t.html + '</div>';
  }).join('') + '</div>';

  document.getElementById('hd-body').innerHTML = strip + panels;
  _hdTab = active;
  loadDetailPhotos();
  if (_hd) loadDocs(_hd.id, 'hd-docs-list');
}

// Header inline edit (pencil): project name + address together, saved through the existing PUT.
function hdEditHead() {
  if (!_hd) return;
  document.getElementById('hd-edit-project').value = _hd.project_name || '';
  setVal('hd-edit-street', _hd.address_street || ''); setVal('hd-edit-city', _hd.address_city || '');
  setVal('hd-edit-state', _hd.address_state || ''); setVal('hd-edit-zip', _hd.address_zip || '');
  document.getElementById('hd-head-err').textContent = '';
  document.getElementById('hd-head-edit').style.display = '';
}
function hdCancelHead() { document.getElementById('hd-head-edit').style.display = 'none'; }
async function hdSaveHead() {
  var err = document.getElementById('hd-head-err');
  err.textContent = '';
  try {
    var st = hhVal('hd-edit-street'), ci = hhVal('hd-edit-city'), sta = hhVal('hd-edit-state'), zp = hhVal('hd-edit-zip');
    var payload = { project_name: hhVal('hd-edit-project') };
    // Only touch the address when a part is filled, so saving a legacy household (formatted on
    // file, no parts yet) without retyping the address can never blank it out.
    if (st || ci || sta || zp) {
      payload.address = composeAddress(st, ci, sta, zp);
      payload.address_street = st; payload.address_city = ci; payload.address_state = sta; payload.address_zip = zp;
    }
    var res = await rwFetch('/api/households/' + _hd.id, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    var d = await res.json();
    if (!res.ok) { err.textContent = d.error || 'Could not save.'; return; }
    openHouseholdDetail(_hd.id); // refresh in place; entering via the wrapper here was self-pushing the back stack
  } catch (e) { err.textContent = 'Connection error.'; }
}

// #7 switch tabs without re-rendering the whole panel (keeps unsaved field edits in System).
function hdTab(id) {
  _hdTab = id;
  document.querySelectorAll('#hd-body .hd-tab').forEach(function(b){ b.classList.toggle('active', b.getAttribute('data-tab') === id); });
  document.querySelectorAll('#hd-body .hd-tabpanel').forEach(function(p){ p.classList.toggle('active', p.id === 'hdtab-' + id); });
}

// #17 the household + Create: same popup as the conversation one, pre-scoped to this home,
// all three toggles live (Note included, household known).
function openHouseholdCreate(mode) {
  if (!_hd) return;
  openCreate(mode || 'ticket');
  _cr.modes = new Set([mode || 'ticket']);
  _cr.noteAllowed = true;
  _cr.noteHouseholdId = _hd.id;
  document.getElementById('cr-sub').textContent = 'For this household. Pick who it is about.';
  document.getElementById('cr-modes').style.display = '';
  document.getElementById('cr-mode-note').style.display = '';
  crSetHousehold(_hd.id, _hd.name, _hd.people || []);
  crApplyModes();
}

function optInBadge(s) {
  if (s === 'opted_in') return '<span class="optin-badge ok">Opted in</span>';
  if (s === 'invited') return '<span class="optin-badge wait">Invite sent</span>';
  if (s === 'opted_out') return '<span class="optin-badge off">Opted out</span>';
  return '<span class="optin-badge none">Not invited</span>';
}

function personRowHtml(p, removed) {
  var name = ((p.first_name || '') + ' ' + (p.last_name || '')).trim();
  var rel = p.relationship ? '<span class="hd-person-rel">' + esc(p.relationship) + '</span>' : '';
  var ctype = p.client_type ? '<span class="hd-person-type">' + esc(p.client_type) + '</span>' : '';
  var hasPhone = !!p.phone_number;
  var phoneFmt = hasPhone ? fmtPhone(p.phone_number) : 'No phone on file';
  var status = p.opt_in_status || 'pending';

  // The number is a tel link with a copy control. The opt-in badge now rides in the pill group with
  // the type and relationship, not under the number (it was wrapping into a stacked clump).
  var phoneLine = hasPhone
    ? '<a class="hd-tel" href="tel:' + esc(p.phone_number) + '" onclick="event.stopPropagation();">' + esc(phoneFmt) + '</a>' +
      '<button class="hd-copy" title="Copy number" onclick="event.stopPropagation();copyToClip(\'' + phoneFmt + '\',this)">&#10697;</button>'
    : esc(phoneFmt);
  var optPill = hasPhone ? optInBadge(status) : '';
  var pills = '<div class="hd-person-pills">' + ctype + rel + optPill + '</div>';

  // v1.61.0: the address rides under the number as a mail link with a copy control, mirroring the
  // phone line. Rendered ONLY when there is one, so a household with no addresses on file looks
  // exactly as it did before this build.
  var emailLine = p.email
    ? '<div class="hd-person-sub hd-person-email">' +
        '<a class="hd-tel" href="mailto:' + esc(p.email) + '" onclick="event.stopPropagation();">' + esc(p.email) + '</a>' +
        '<button class="hd-copy" title="Copy email" onclick="event.stopPropagation();copyToClip(\'' + esc(p.email) + '\',this)">&#10697;</button>' +
      '</div>'
    : '';

  // Row click opens Edit; Remove (and Text) stay explicit buttons and stop the row click. No Edit
  // button: the whole row is the edit target.
  var actions = '';
  if (removed) {
    actions = '<button class="hd-mini" onclick="event.stopPropagation();reactivatePerson(' + p.client_id + ')">Restore</button>';
  } else {
    if (hasPhone) {
      if (status === 'opted_in') {
        actions += '<button class="hd-mini" onclick="event.stopPropagation();textPerson(\'' + encodeURIComponent(p.phone_number) + '\',\'' + phoneFmt + '\')">Text</button>';
      } else {
        actions += '<button class="hd-mini" disabled title="This number has not opted in yet">Text</button>';
        actions += '<button class="hd-mini" onclick="event.stopPropagation();sendOptInText(\'' + p.phone_number + '\',this)">' +
          (status === 'invited' ? 'Resend opt-in' : 'Send opt-in') + '</button>';
      }
    }
    actions += '<button class="hd-mini danger" onclick="event.stopPropagation();removePerson(' + p.client_id + ')">Remove</button>';
  }
  var clickAttr = removed ? '' : ' onclick="openHpEdit(' + p.client_id + ')" style="cursor:pointer;" title="Edit person"';
  return '<div class="hd-person' + (removed ? ' removed' : '') + '"' + clickAttr + '>' +
    '<div class="hd-person-main">' +
      '<div class="hd-person-name">' + esc(name) + '</div>' +
      '<div class="hd-person-sub">' + phoneLine + '</div>' +
      emailLine +
    '</div>' +
    pills +
    '<div class="hd-person-actions">' + actions + '</div></div>';
}

function textPerson(enc, fallbackName) {
  var name = fallbackName || decodeURIComponent(enc);
  var cur = currentViewOrList(), dest = { kind:'conversation', phone: enc, name: name };
  if (!sameNav(cur, dest)) recordStep(cur, dest);
  var ce = document.querySelector('.nav-item[onclick*="conversations"]');
  nav('conversations', ce);
  openRealConv(enc, name);
}

function copyToClip(text, btn) {
  function done() { var o = btn.innerHTML; btn.innerHTML = '&#10003;'; setTimeout(function(){ btn.innerHTML = o; }, 900); }
  if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, done);
}

// #16: send the opt-in text to this number, then reload the household so the badge + buttons update.
async function sendOptInText(phone, btn) {
  var old = btn.textContent; btn.disabled = true; btn.textContent = 'Sending...';
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/optin-text', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ phone: phone })
    });
    var d = await res.json();
    if (!res.ok) { btn.disabled = false; btn.textContent = old; alert(d.error || 'Could not send the opt-in text.'); return; }
    openHouseholdDetail(_hd.id); // refresh in place, no back-stack push
  } catch (e) { btn.disabled = false; btn.textContent = old; alert('Connection error.'); }
}

// Andi's behavioral read, shown lightly. It is his read, not gospel, until you trust it. Nothing
// shows if he has not formed one yet. Capability and difficulty are 1 to 5.
function personReadHtml(p) {
  var bits = [];
  if (p.self_sufficiency) bits.push('capability ' + p.self_sufficiency + '/5');
  if (p.difficulty) bits.push('difficulty ' + p.difficulty + '/5');
  var line = bits.join(' · ');
  var voice = p.comm_voice ? '"' + p.comm_voice + '"' : '';
  if (!line && !voice && !p.profile_notes) return '';
  var who = p.profile_updated_by && p.profile_updated_by !== 'Andi' ? p.profile_updated_by + "'s read" : "Andi's read";
  var inner = '';
  if (line) inner += '<span class="hd-read-scores">' + esc(line) + '</span>';
  if (voice) inner += '<span class="hd-read-voice">' + esc(voice) + '</span>';
  if (p.profile_notes) inner += '<span class="hd-read-notes">' + esc(p.profile_notes) + '</span>';
  return '<div class="hd-read"><span class="hd-read-tag">' + esc(who) + '</span>' + inner + '</div>';
}

// #6 one shared row builder so tickets and follow ups read consistently: the date leads and is
// fixed in place, then type, then the status date (scheduled/due), then assignee.
function histMetaLine(parts) {
  return '<div class="hd-hist-meta">' + parts.filter(Boolean).map(esc).join(' · ') + '</div>';
}
function pillFor(st) {
  var cls = st === 'resolved' ? 't-resolved' : (st === 'scheduled' ? 't-scheduled' : 't-open');
  return '<span class="t-pill ' + cls + '">' + (st.charAt(0).toUpperCase() + st.slice(1)) + '</span>';
}

// Activity (Phase C2): tickets, follow ups, and notes interleaved in one chronological stream,
// newest first, with filter chips. System issues stay with the home (item 5).
var _hdActFilter = 'all';
function hdActFilter(f) { _hdActFilter = f; var p = document.getElementById('hdtab-activity'); if (p && _hd) p.innerHTML = householdActivityHtml(_hd); }
function householdActivityHtml(h) {
  var items = [];
  (h.tickets || []).forEach(function(t) { items.push({ kind: 'ticket', at: t.opened_at, d: t }); });
  (h.follow_ups || []).forEach(function(f) { items.push({ kind: 'followup', at: f.created_at, d: f }); });
  (h.notes || []).forEach(function(n) { items.push({ kind: 'note', at: n.created_at, d: n }); });
  items.sort(function(a, b) { return new Date(b.at || 0) - new Date(a.at || 0); });

  var f = _hdActFilter;
  var chips = [['all','All'],['ticket','Tickets'],['followup','Follow ups'],['note','Notes']].map(function(c){
    return '<button class="hd-chip' + (f === c[0] ? ' on' : '') + '" onclick="hdActFilter(\'' + c[0] + '\')">' + c[1] + '</button>';
  }).join('');
  var out = '<div class="hd-chiprow">' + chips + '</div>';

  var shown = items.filter(function(it){ return f === 'all' || it.kind === f; });
  if (!shown.length) {
    out += '<div class="hd-person-sub" style="padding:0.4rem 0;">Nothing here yet.</div>';
    return out;
  }
  shown.forEach(function(it) {
    if (it.kind === 'ticket') {
      var t = it.d, st = t.status || 'open';
      var meta = ['Ticket ' + t.id, 'Opened ' + fmtTime(t.opened_at)];  // v1.60.9: the number, not the bare word
      var histLabel = fmtTicketLabel(t);
      if (histLabel) meta.push(histLabel);
      if (t.scheduled_at) meta.push('scheduled ' + fmtTime(t.scheduled_at));
      if (t.assignee_name) meta.push(t.assignee_name);
      out += '<div class="hd-hist-row" onclick="goToTicket(' + t.id + ')">' +
        '<div class="hd-hist-main"><div class="hd-hist-title">' + esc(t.summary || 'Open issue') + '</div>' +
        histMetaLine(meta) + '</div>' + pillFor(st) + '</div>';
    } else if (it.kind === 'followup') {
      var fu = it.d, fst = fu.status || 'pending';
      var fmeta = ['Follow up', 'Created ' + fmtTime(fu.created_at)];
      if (fu.type) fmeta.push(fu.type);
      if (fu.due_date) fmeta.push('due ' + fmtDueDate(fu.due_date));
      if (fu.assignee_name) fmeta.push(fu.assignee_name);
      out += '<div class="hd-hist-row static">' +
        '<div class="hd-hist-main"><div class="hd-hist-title">' + esc(fu.note || 'Follow up') + '</div>' +
        histMetaLine(fmeta) + '</div>' + pillFor(fst === 'resolved' ? 'resolved' : 'open') + '</div>';
    } else {
      var n = it.d;
      var nmeta = ['Note', 'Created ' + fmtTime(n.created_at)];
      if (n.created_by) nmeta.push(n.created_by);
      out += '<div class="hd-hist-row static">' +
        '<div class="hd-hist-main"><div class="hd-hist-title">' + esc(n.note || '') + '</div>' +
        histMetaLine(nmeta) + '</div></div>';
    }
  });
  return out;
}

// One-click round trip. From a ticket or the conversation rail, jump to the household; from the
// household history or conversation rail, jump to the ticket. These record the origin for Back.
function goToHousehold(id) { if (!id) return; enterHousehold(id); }
function goToTicket(id) { if (!id) return; enterTicket(id); }

async function saveHouseholdFields() {
  var panel = document.querySelector('#hd-body .hd-tabpanel.active') || document;
  var btns = document.querySelectorAll('#hd-body .hd-save');
  var err = panel.querySelector('.hd-err');
  var note = panel.querySelector('.hd-saved-note');
  if (err) err.textContent = '';
  var body = {
    control_system_type: hhVal('hd-control'), isp_name: hhVal('hd-isp'),
    network_tier: hhVal('hd-network'), priority_tier: hhVal('hd-priority'),
    lighting_system_type: hhVal('hd-lighting'), camera_system_type: hhVal('hd-cameras'),
    lock_system_type: hhVal('hd-locks'), security_manager_name: hhVal('hd-security'),
    wifi_network: hhVal('hd-wifi-net'), wifi_password: hhVal('hd-wifi-pw'), garage_code: hhVal('hd-garage'),
    household_notes: hhVal('hd-notes'),
    remote_reboot_enabled: document.getElementById('hd-reboot').checked
  };
  btns.forEach(function(b){ b.disabled = true; b.textContent = 'Saving...'; });
  try {
    var res = await rwFetch('/api/households/' + _hd.id, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
    });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not save.'; btns.forEach(function(b){ b.disabled=false; b.textContent='Save changes'; }); return; }
    Object.keys(body).forEach(function(k) { _hd[k] = body[k]; });
    if (note) { note.classList.add('show'); setTimeout(function() { note.classList.remove('show'); }, 1800); }
  } catch (e) { if (err) err.textContent = 'Connection error.'; }
  btns.forEach(function(b){ b.disabled=false; b.textContent='Save changes'; });
}
// WiFi mirror: System and Andi remembers show one shared value, edit either, both reflect.
function eqMirror(fromId, toId){ var a=document.getElementById(fromId), b=document.getElementById(toId); if(a&&b) b.value=a.value; }

// ── people add / edit / remove ──
function openHpAdd() {
  _hpClientId = null;
  document.getElementById('hp-title').textContent = 'Add a person';
  document.getElementById('hp-sub').textContent = 'They become a contact on this household.';
  document.getElementById('hp-first').value = '';
  document.getElementById('hp-last').value = '';
  document.getElementById('hp-phone').value = '';
  document.getElementById('hp-email').value = '';
  document.getElementById('hp-rel').value = '';
  document.getElementById('hp-type').value = 'Member';
  document.getElementById('hp-cov-start').innerHTML = covTimeOptions('', 'Start time');
  document.getElementById('hp-cov-end').innerHTML = covTimeOptions('', 'End time');
  toggleCovWindow();
  document.getElementById('hp-suff').value = '';
  document.getElementById('hp-diff').value = '';
  document.getElementById('hp-voice').value = '';
  document.getElementById('hp-pnotes').value = '';
  document.getElementById('hp-err').textContent = '';
  document.getElementById('hp-overlay').classList.add('show');
  setTimeout(function() { document.getElementById('hp-first').focus(); }, 50);
}
function openHpEdit(clientId) {
  var p = (_hd.people || []).filter(function(x) { return x.client_id === clientId; })[0];
  if (!p) return;
  _hpClientId = clientId;
  document.getElementById('hp-title').textContent = 'Edit person';
  document.getElementById('hp-sub').textContent = 'Update their name, phone, email, or relationship.';
  document.getElementById('hp-first').value = p.first_name || '';
  document.getElementById('hp-last').value = p.last_name || '';
  document.getElementById('hp-phone').value = fmtPhone(p.phone_number || '');
  // v1.61.0: p.email is the primary ACTIVE address the portal composes; a person whose only address
  // was cleared reads blank here, which is correct, and the inactive row stays on file underneath.
  document.getElementById('hp-email').value = p.email || '';
  document.getElementById('hp-rel').value = p.relationship || '';
  document.getElementById('hp-type').value = p.client_type || '';
  document.getElementById('hp-cov-start').innerHTML = covTimeOptions(p.coverage_start || '', 'Start time');
  document.getElementById('hp-cov-end').innerHTML = covTimeOptions(p.coverage_end || '', 'End time');
  toggleCovWindow();
  document.getElementById('hp-suff').value = p.self_sufficiency || '';
  document.getElementById('hp-diff').value = p.difficulty || '';
  document.getElementById('hp-voice').value = p.comm_voice || '';
  document.getElementById('hp-pnotes').value = p.profile_notes || '';
  document.getElementById('hp-err').textContent = '';
  document.getElementById('hp-overlay').classList.add('show');
}
function closeHpModal() { document.getElementById('hp-overlay').classList.remove('show'); }
function toggleCovWindow() {
  var isSpecial = document.getElementById('hp-type').value === 'Special';
  document.getElementById('hp-cov').style.display = isSpecial ? '' : 'none';
}

async function submitHpModal() {
  var btn = document.getElementById('hp-save-btn');
  var err = document.getElementById('hp-err');
  err.textContent = '';
  var first = hhVal('hp-first');
  if (!first) { err.textContent = 'First name is required.'; return; }
  var ctype = hhVal('hp-type');
  var covStart = ctype === 'Special' ? hhVal('hp-cov-start') : '';
  var covEnd = ctype === 'Special' ? hhVal('hp-cov-end') : '';
  if (ctype === 'Special' && (!!covStart !== !!covEnd)) {
    err.textContent = 'Set both a start and end time for the coverage window, or leave both blank.'; return;
  }
  // v1.61.0: an obvious typo is caught here so it never costs a round trip. The portal still
  // validates and still owns the duplicate answer; this is a courtesy check, not the authority.
  var email = hhVal('hp-email');
  if (email && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { err.textContent = 'Enter a valid email address.'; return; }
  // Always sent, including empty: an empty string CLEARS the address (the row goes inactive and can
  // be restored), which is the same rule the phone field follows.
  var body = { first_name: first, last_name: hhVal('hp-last'), phone: hhVal('hp-phone'), email: email, relationship: hhVal('hp-rel'), client_type: ctype, coverage_start: covStart, coverage_end: covEnd,
    self_sufficiency: hhVal('hp-suff'), difficulty: hhVal('hp-diff'), comm_voice: hhVal('hp-voice'), profile_notes: hhVal('hp-pnotes') };
  btn.disabled = true; btn.textContent = 'Saving...';
  try {
    var url = '/api/households/' + _hd.id + '/clients' + (_hpClientId ? '/' + _hpClientId : '');
    var res = await rwFetch(url, {
      method: _hpClientId ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not save.'; btn.disabled = false; btn.textContent = 'Save'; return; }
    closeHpModal();
    await refreshDetail();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Save';
}

// v1.95.0 (Andy, Oct 15): REMOVE ASKS ONCE ABOUT FORGETTING. Removing always cuts the person off from the house (no
// equipment, notes, codes, WiFi or tickets). Forget also makes Andi stop reading their past messages from this house.
// Nothing is deleted and Restore undoes both. The removed person is never told.
function removePerson(clientId) {
  var p = (_hd.people || []).filter(function(x) { return x.client_id === clientId; })[0] || {};
  var who = ((p.first_name || '') + ' ' + (p.last_name || '')).trim() || 'this person';
  var old = document.getElementById('rm-overlay'); if (old) old.remove();
  var ov = document.createElement('div');
  ov.id = 'rm-overlay'; ov.className = 'wiz-overlay show';
  ov.onclick = function(ev) { if (ev.target === ov) ov.remove(); };
  ov.innerHTML =
    '<div class="wiz-card">' +
      '<div class="wiz-head"><div class="wiz-title">Remove ' + esc(who) + '?</div>' +
        '<div class="wiz-sub">They lose access to this house right away: Andi will not share its equipment, notes, codes, WiFi or tickets with them. Their conversation stays for your team, and you can restore them later.</div></div>' +
      '<div class="wiz-body">' +
        '<label class="rm-forget"><input type="checkbox" id="rm-forget" />' +
          '<span>Forget their household info<span class="rm-forget-note">Andi also stops reading their past messages from this house. Nothing is deleted, and Restore brings it back.</span></span></label>' +
        '<div class="wiz-err" id="rm-err"></div>' +
      '</div>' +
      '<div class="wiz-foot">' +
        '<button class="btn-ghost" onclick="document.getElementById(\'rm-overlay\').remove()">Cancel</button>' +
        '<button class="btn-primary" id="rm-go" style="background:#b42318;border-color:#b42318;" onclick="confirmRemovePerson(' + clientId + ')">Remove</button>' +
      '</div>' +
    '</div>';
  document.body.appendChild(ov);
}
async function confirmRemovePerson(clientId) {
  var btn = document.getElementById('rm-go'), err = document.getElementById('rm-err');
  var forget = !!(document.getElementById('rm-forget') || {}).checked;
  if (btn) { btn.disabled = true; btn.textContent = 'Removing'; }
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/clients/' + clientId + '/deactivate', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ forget: forget })
    });
    var data = await res.json();
    if (!res.ok) { if (err) err.textContent = data.error || 'Could not remove.'; if (btn) { btn.disabled = false; btn.textContent = 'Remove'; } return; }
    var ov = document.getElementById('rm-overlay'); if (ov) ov.remove();
    await refreshDetail();
  } catch (e) { if (err) err.textContent = 'Connection error.'; if (btn) { btn.disabled = false; btn.textContent = 'Remove'; } }
}
async function reactivatePerson(clientId) {
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/clients/' + clientId + '/reactivate', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not restore.'); return; }
    // v1.95.0: a number that moved to someone else after the removal stays with them.
    if (data.phones_not_restored && data.phones_not_restored.length) {
      alert('Restored. ' + data.phones_not_restored.map(fmtPhone).join(', ') + (data.phones_not_restored.length === 1 ? ' is' : ' are') + ' now on someone else, so it stayed with them.');
    }
    await refreshDetail();
  } catch (e) { alert('Connection error.'); }
}

// Reload the detail record in place (after a people change) without leaving the panel.
async function refreshDetail() {
  if (!_hd) return;
  try {
    var res = await rwFetch('/api/households/' + _hd.id);
    if (res.ok) { _hd = await res.json(); renderHouseholdDetail(); }
  } catch (e) {}
}

// ── household remove / restore ──
function openRemoveHousehold() { document.getElementById('hd-del-err').textContent = ''; var i=document.getElementById('hd-del-confirm'); if(i) i.value=''; var b=document.getElementById('hd-del-btn'); if(b) b.disabled=true; document.getElementById('hd-del-overlay').classList.add('show'); }
function hdDelGate() { var i=document.getElementById('hd-del-confirm'); var b=document.getElementById('hd-del-btn'); if(!i||!b) return; b.disabled = (i.value.trim().toLowerCase() !== 'delete'); }
function closeRemoveHousehold() { document.getElementById('hd-del-overlay').classList.remove('show'); }
async function confirmRemoveHousehold() {
  var i = document.getElementById('hd-del-confirm');
  if (!i || i.value.trim().toLowerCase() !== 'delete') return;
  if (!confirm('Remove this household? It moves to Removed and can be brought back later.')) return;
  var btn = document.getElementById('hd-del-btn');
  var err = document.getElementById('hd-del-err');
  btn.disabled = true; btn.textContent = 'Removing...';
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/deactivate', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not remove.'; btn.disabled = false; btn.textContent = 'Remove household'; return; }
    closeRemoveHousehold();
    backToHouseholds();
    await loadHouseholds();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Remove household';
}
async function reactivateHousehold() {
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/reactivate', { method: 'POST' });
    var data = await res.json();
    if (!res.ok) { alert(data.error || 'Could not restore.'); return; }
    await refreshDetail();
  } catch (e) { alert('Connection error.'); }
}

// ── detail photos (keyed by household id) ──
async function loadDetailPhotos() {
  var c = document.getElementById('hd-photo-container');
  if (!c || !_hd) return;
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/photos');
    if (!res.ok) { c.innerHTML = '<div class="hd-person-sub">No photos yet.</div>'; return; }
    var photos = await res.json();
    if (!photos.length) { c.innerHTML = '<div class="hd-person-sub">No photos yet.</div>'; return; }
    c.innerHTML = '';
    var grid = document.createElement('div');
    grid.className = 'photo-grid';
    photos.forEach(function(p) {
      var thumb = document.createElement('div');
      thumb.className = 'photo-thumb';
      var img = document.createElement('img');
      img.src = p.url; img.alt = p.filename || ''; img.loading = 'lazy';
      thumb.appendChild(img);
      thumb.addEventListener('click', function() { openLightbox(p.url); });
      // Phase C2: delete with a confirm step so a misclick cannot nuke a rack photo.
      var del = document.createElement('button');
      del.className = 'photo-del'; del.title = 'Delete photo'; del.innerHTML = '&#10005;';
      del.addEventListener('click', function(ev) {
        ev.stopPropagation();
        if (!confirm('Delete this photo? This cannot be undone.')) return;
        deleteDetailPhoto(p.id, thumb);
      });
      thumb.appendChild(del);
      grid.appendChild(thumb);
    });
    c.appendChild(grid);
  } catch (e) { c.innerHTML = '<div class="hd-person-sub">Could not load photos.</div>'; }
}

// Phase C2: delete a photo (R2 + record on the portal), then drop the thumb in place.
async function deleteDetailPhoto(photoId, thumbEl) {
  if (!_hd) return;
  try {
    var res = await rwFetch('/api/households/' + _hd.id + '/photos/' + photoId, { method: 'DELETE' });
    var d = await res.json();
    if (!res.ok) { alert(d.error || 'Could not delete the photo.'); return; }
    if (thumbEl && thumbEl.parentNode) thumbEl.parentNode.removeChild(thumbEl);
  } catch (e) { alert('Connection error.'); }
}

async function uploadDetailPhoto(input) {
  var file = input.files[0];
  if (!file || !_hd) return;
  var btn = document.getElementById('hd-photo-add');
  btn.textContent = 'Uploading...';
  var formData = new FormData();
  formData.append('photo', file);
  try {
    var token = localStorage.getItem('rw-token');
    var headers = {};
    if (token) headers['Authorization'] = 'Bearer ' + token;
    var res = await fetch(PORTAL_URL + '/api/households/' + _hd.id + '/photos', {
      method: 'POST', headers: headers, credentials: 'include', body: formData
    });
    input.value = '';
    if (res.ok) { btn.textContent = '+ Add photo'; loadDetailPhotos(); }
    else { btn.textContent = 'Upload failed. Try again.'; }
  } catch (e) { btn.textContent = 'Upload failed. Try again.'; }
}

// ── SIGN UP ──────────────────────────────────────────────────────────────────
function hideAllLoginViews() {
  ['login-form','signup-form','forgot-form','setpw-form'].forEach(function(id){ var e=document.getElementById(id); if(e) e.style.display='none'; });
}
function showSignup() {
  hideAllLoginViews();
  document.getElementById('signup-form').style.display = 'block';
  document.getElementById('login-note').textContent = '';
}
function showLogin() {
  hideAllLoginViews();
  document.getElementById('login-form').style.display = 'block';
}
function showForgot() {
  hideAllLoginViews();
  document.getElementById('forgot-form').style.display = 'block';
  document.getElementById('fp-note').textContent = '';
  document.getElementById('login-note').textContent = '';
}
var PW_EYE = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>';
var PW_EYE_OFF = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10 10 0 0 1 12 19c-7 0-11-7-11-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c7 0 11 7 11 7a18 18 0 0 1-2.16 3.19"/><path d="M1 1l22 22"/></svg>';
function togglePw(btn) {
  var i = btn.parentNode.querySelector('input');
  if (!i) return;
  if (i.type === 'password') { i.type = 'text'; btn.innerHTML = PW_EYE_OFF; btn.setAttribute('aria-label','Hide password'); }
  else { i.type = 'password'; btn.innerHTML = PW_EYE; btn.setAttribute('aria-label','Show password'); }
}
function initPwEyes() { document.querySelectorAll('.pw-eye').forEach(function(b){ if (!b.innerHTML.trim()) b.innerHTML = PW_EYE; }); }

function checkPw() {
  var pw = document.getElementById('su-pw').value;
  var ok = pw.length >= 10 && /[a-z]/.test(pw) && /[A-Z]/.test(pw) && /[0-9]/.test(pw) && /[^A-Za-z0-9]/.test(pw);
  document.getElementById('su-pwhint').classList.toggle('ok', ok);
}
// Signup confirm: green check only when the second field is non-empty and equals the first.
function checkSuMatch() {
  var pw = document.getElementById('su-pw').value;
  var pw2 = document.getElementById('su-pw2').value;
  var hint = document.getElementById('su-matchhint');
  if (!hint) return;
  var match = pw2.length > 0 && pw === pw2;
  hint.style.display = match ? 'block' : 'none';
  hint.classList.toggle('ok', match);
}
// Settings change-password confirm.
function checkUsMatch() {
  var pw = document.getElementById('us-new').value;
  var pw2 = document.getElementById('us-new2').value;
  var hint = document.getElementById('us-matchhint');
  if (!hint) return;
  var match = pw2.length > 0 && pw === pw2;
  hint.style.display = match ? 'block' : 'none';
  hint.classList.toggle('ok', match);
}
function checkSpPw() {
  var pw = document.getElementById('sp-pw').value;
  var ok = pw.length >= 10 && /[a-z]/.test(pw) && /[A-Z]/.test(pw) && /[0-9]/.test(pw) && /[^A-Za-z0-9]/.test(pw);
  document.getElementById('sp-pwhint').classList.toggle('ok', ok);
}
// Green check appears only when the confirm field is non-empty and equals the first.
function checkSpMatch() {
  var pw = document.getElementById('sp-pw').value;
  var pw2 = document.getElementById('sp-pw2').value;
  var hint = document.getElementById('sp-matchhint');
  if (!hint) return;
  var match = pw2.length > 0 && pw === pw2;
  hint.style.display = match ? 'block' : 'none';
  hint.classList.toggle('ok', match);
}

async function submitForgot() {
  var email = document.getElementById('fp-email').value.trim().toLowerCase();
  var note = document.getElementById('fp-note');
  if (!email) { note.textContent = 'Enter your email.'; note.className = 'login-note bad'; return; }
  try {
    await fetch(PORTAL_URL + '/auth/request-reset', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email })
    });
  } catch (e) {}
  // Always the same message, no matter whether the email exists.
  note.textContent = 'If that email has an account, a reset link is on its way.';
  note.className = 'login-note ok';
}

function showSetpw(token) {
  _setpwToken = token;
  document.getElementById('login-screen').style.display = 'flex';
  document.getElementById('app').style.display = 'none';
  hideAllLoginViews();
  document.getElementById('setpw-form').style.display = 'block';
}
async function submitSetpw() {
  var pw = document.getElementById('sp-pw').value;
  var pw2 = document.getElementById('sp-pw2').value;
  var err = document.getElementById('sp-error');
  err.textContent = '';
  if (pw !== pw2) { err.textContent = 'Passwords do not match.'; return; }
  // Read from the variable first, then fall back to the URL. The token stays in
  // the URL until a set succeeds, so this survives anything that clears the var.
  var token = _setpwToken || new URLSearchParams(window.location.search).get('setpw');
  var btn = document.querySelector('#setpw-form .login-btn');
  btn.textContent = 'Setting password...'; btn.disabled = true;
  try {
    var res = await fetch(PORTAL_URL + '/auth/set-password', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
      body: JSON.stringify({ token: token, password: pw })
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not set password.'; btn.textContent = 'Set password and sign in'; btn.disabled = false; return; }
    history.replaceState({}, '', window.location.pathname);
    enterDashboard(data);
  } catch (e) {
    err.textContent = 'Connection error. Please try again.'; btn.textContent = 'Set password and sign in'; btn.disabled = false;
  }
}

function enterDashboard(data) {
  if (data.auth_token) localStorage.setItem('rw-token', data.auth_token);
  applyIntegratorContext(data);
  document.getElementById('login-screen').style.display = 'none';
  document.getElementById('app').style.display = 'block';
  loadRealConversations();
  startSSE();
  stampLoadedScreen();
}

async function doSignup() {
  var company = document.getElementById('su-company').value.trim();
  var first = document.getElementById('su-first').value.trim();
  var last = document.getElementById('su-last').value.trim();
  var email = document.getElementById('su-email').value.trim().toLowerCase();
  var pw = document.getElementById('su-pw').value;
  var pw2 = document.getElementById('su-pw2').value;
  var errEl = document.getElementById('signup-error');
  var btn = document.querySelector('#signup-form .login-btn');
  errEl.textContent = '';
  if (!company || !first || !last || !email || !pw) { errEl.textContent = 'All fields are required.'; return; }
  if (pw !== pw2) { errEl.textContent = 'Passwords do not match.'; return; }
  btn.textContent = 'Creating account...'; btn.disabled = true;
  try {
    var res = await fetch(PORTAL_URL + '/auth/signup', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
      body: JSON.stringify({ company_name: company, first_name: first, last_name: last, email: email, password: pw })
    });
    var data = await res.json();
    if (!res.ok) {
      errEl.textContent = data.error || 'Could not create account.';
      btn.textContent = 'Create account'; btn.disabled = false; return;
    }
    enterDashboard(data);
  } catch (err) {
    errEl.textContent = 'Connection error. Please try again.';
    btn.textContent = 'Create account'; btn.disabled = false;
  }
}

async function resendVerification() {
  var b = document.getElementById('resend-btn');
  if (b) { b.textContent = 'Sending...'; b.disabled = true; }
  try {
    var res = await rwFetch('/auth/resend-verification', { method: 'POST' });
    var data = await res.json();
    if (b) b.textContent = data.already_verified ? 'Already verified' : 'Email sent';
  } catch (e) { if (b) { b.textContent = 'Try again'; b.disabled = false; } }
}

// ── EMAIL VERIFICATION REDIRECT NOTICE ───────────────────────────────────────
(function handleVerifiedParam() {
  var p = new URLSearchParams(window.location.search);
  if (!p.has('verified')) return;
  var note = document.getElementById('login-note');
  if (note) {
    if (p.get('verified') === '1') { note.textContent = 'Email confirmed.'; note.className = 'login-note ok'; }
    else { note.textContent = 'That confirmation link was invalid or expired.'; note.className = 'login-note bad'; }
  }
  history.replaceState({}, '', window.location.pathname);
})();

// ── USER MENU ────────────────────────────────────────────────────────────────
function toggleUserMenu(e) {
  if (e) e.stopPropagation();
  document.getElementById('sidebar-user').classList.toggle('open');
}
async function doLogout(e) {
  if (e) e.stopPropagation();
  try { await rwFetch('/auth/logout', { method: 'POST' }); } catch (err) {}
  localStorage.removeItem('rw-token');
  location.reload();
}
document.addEventListener('click', function() {
  var su = document.getElementById('sidebar-user');
  if (su) su.classList.remove('open');
});

// ── SSE REAL-TIME ────────────────────────────────────────────────────────────
// ── SSE (#24 hardened) ──
// Reconnect with backoff, a full state resync on every reconnect (replay-by-refresh: anything
// missed while the pipe was down is picked up), a ping watchdog that catches silently dead
// connections (the cause of "auto-reclaim didn't flip live"), and a tab-focus staleness check.
var _sseSource = null;
var _sseEverConnected = false;
var _sseRetryMs = 5000;
var _sseLastBeat = 0;
function _sseBeat() { _sseLastBeat = Date.now(); }
// v1.16.0: SSE-driven list reloads are debounced. A rapid exchange (Andi mid-conversation,
// teammates opening threads) fires events back to back, and every event used to trigger an
// immediate full conversations + counts reload on EVERY open dashboard. Events inside a
// 300ms window now collapse into one trailing refresh, so a burst costs one round trip per
// dashboard instead of one per event. Direct user actions (Refresh button, tab switches,
// sends) still call the loaders directly and refresh immediately.
var _listRefreshTimer = null;
function scheduleListRefresh() {
  if (_listRefreshTimer) clearTimeout(_listRefreshTimer);
  _listRefreshTimer = setTimeout(function() {
    _listRefreshTimer = null;
    loadRealConversations();
    loadCounts();
  }, 300);
}
function sseResync() {
  // Catch up on everything that could have changed while the pipe was down.
  loadRealConversations();
  loadCounts();
  var actPanel = document.querySelector('.panel.active');
  if (actPanel && actPanel.id === 'panel-tickets') {
    var dv = document.getElementById('ticket-detail-view');
    var detailOpen = dv && dv.style.display === 'block';
    if (detailOpen) { if (window._openTicketPhone) loadTicketThread(window._openTicketPhone, window._openTicketId); }
    else loadTickets();
  }
  if (actPanel && actPanel.id === 'panel-followups') loadFollowups();
  // An open conversation re-pulls its full thread (openRealConv is the loader).
  if (window._currentPhone) openRealConv(window._currentPhone, window._currentName);
}
function startSSE() {
  if (_sseSource) return;
  var token = localStorage.getItem('rw-token');
  if (!token) return;
  _sseSource = new EventSource(PORTAL_URL + '/api/events?token=' + encodeURIComponent(token));
  _sseSource.addEventListener('connected', function() {
    _sseBeat();
    _sseRetryMs = 5000; // healthy again, reset the backoff
    if (_sseEverConnected) sseResync(); // a RE-connect: pull whatever was missed
    _sseEverConnected = true;
  });
  _sseSource.addEventListener('ping', _sseBeat);
  // v1.94.0: a My Andi text arrived. The event carries nothing; an open view redraws from its own read.
  _sseSource.addEventListener('myandi', function() {
    _sseBeat();
    var act = document.querySelector('.panel.active');
    if (act && act.id === 'panel-myandi' && !_ma.sending) loadMyAndi(true);
    var tp = document.getElementById('settab-myandi');
    if (tp && tp.classList.contains('active') && _mat.sel) matPick(_mat.sel, true);
  });
  _sseSource.addEventListener('new_message', function(e) {
    _sseBeat();
    var data = JSON.parse(e.data);
    // Refresh the list on every message, including our own human reply. The
    // unread rule already skips the dot when the team spoke last, so a human
    // reply updates the preview without lighting up a false unread.
    // v1.16.0: debounced — bursts collapse into one refresh.
    scheduleListRefresh();
    // If the tickets or follow ups tab is open, refresh it so an item Andi just created appears.
    var actPanel = document.querySelector('.panel.active');
    if (actPanel && actPanel.id === 'panel-tickets') {
      var dv = document.getElementById('ticket-detail-view');
      var detailOpen = dv && dv.style.display === 'block';
      if (detailOpen) {
        // A ticket is open. Do NOT reload the list (that would close the detail). Refresh the
        // in-ticket conversation if this message belongs to it.
        if (window._openTicketPhone && decodeURIComponent(window._openTicketPhone) === data.phone_number) loadTicketThread(window._openTicketPhone, window._openTicketId);
      } else {
        loadTickets();
      }
    }
    if (actPanel && actPanel.id === 'panel-followups') loadFollowups();
    // Also update open thread if it matches
    if (window._currentPhone && decodeURIComponent(window._currentPhone) === data.phone_number) {
      if (data.role === 'summary') {
        appendSummaryCard(data.message);
      } else {
        appendLiveMessage(data);
      }
    }
  });
  _sseSource.addEventListener('handback', function(e) {
    _sseBeat();
    var data = JSON.parse(e.data);
    if (window._currentPhone && decodeURIComponent(window._currentPhone) === data.phone_number) {
      var slot = document.getElementById('handback-slot');
      if (slot) slot.innerHTML = '';
      var statusEl = document.getElementById('thread-status');
      if (statusEl) statusEl.innerHTML = statusForOpenConv();
      var thread = document.getElementById('live-thread');
      if (thread) {
        var sys = document.createElement('div');
        sys.className = 'sms-system';
        sys.textContent = 'Handed back to Andi';
        thread.appendChild(sys);
        thread.scrollTop = thread.scrollHeight;
      }
    }
    // Refresh the list so the Andi pill and handling state update even when
    // the handback came from a client wake or the resume sweep.
    // v1.16.0: debounced — bursts collapse into one refresh.
    scheduleListRefresh();
  });
  // v1.89.0: a teammate marked a thread read or archived one; the badge and list follow.
  _sseSource.addEventListener('thread-state', function() { _sseBeat(); scheduleListRefresh(); });
  _sseSource.addEventListener('thread-archived', function() { _sseBeat(); scheduleListRefresh(); });
  _sseSource.addEventListener('viewed', function(e) {
    _sseBeat();
    try {
      var data = JSON.parse(e.data);
      applyViewedEvent(data);
      // A teammate opening a thread can clear a review-type unread, so keep the list honest.
      // v1.16.0: debounced — bursts collapse into one refresh.
      scheduleListRefresh();
    } catch (err) {}
  });
  _sseSource.onerror = function() {
    _sseSource.close(); _sseSource = null;
    var wait = _sseRetryMs;
    _sseRetryMs = Math.min(_sseRetryMs * 2, 30000); // 5s -> 10 -> 20 -> 30 cap
    // v1.96.0: ask once whether this sign in still stands. A 401 (removed, or signed out elsewhere) stops the retries
    // and shows the sign in; anything else (a blip) retries as before.
    rwFetch('/auth/me').then(function(r) {
      if (r.status === 401) { try { localStorage.removeItem('rw-token'); } catch (e) {} location.reload(); return; }
      setTimeout(startSSE, wait);
    }).catch(function() { setTimeout(startSSE, wait); });
  };
}
// Watchdog: the server pings every 25s. No beat for 65s means the pipe died without firing
// onerror (proxy drop, sleep). Kill it and reconnect; the connected handler resyncs.
setInterval(function() {
  if (!_sseSource || !_sseLastBeat) return;
  if (Date.now() - _sseLastBeat > 65000) {
    try { _sseSource.close(); } catch (e) {}
    _sseSource = null;
    startSSE();
  }
}, 30000);
// Waking a backgrounded tab: if the last beat is stale, force a fresh pipe right now.
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState !== 'visible') return;
  if (_sseLastBeat && Date.now() - _sseLastBeat > 65000) {
    try { if (_sseSource) _sseSource.close(); } catch (e) {}
    _sseSource = null;
    startSSE();
  }
});

function appendLiveMessage(data) {
  var thread = document.getElementById('live-thread');
  if (!thread) return;
  // A new message arrives, so the prior "seen by" no longer applies to the newest line. Drop it and
  // reset; it repopulates when someone opens the thread again (via the 'viewed' event).
  var oldSeen = document.getElementById('seen-by-line');
  if (oldSeen && oldSeen.parentNode) oldSeen.parentNode.removeChild(oldSeen);
  window._seenViewers = [];
  // v1.84.0: AN EMAIL CANNOT BE DRAWN ONE ROW AT A TIME. The blue section band and the EMAIL and
  // TEXT markers are both computed by walking the WHOLE thread (a band opens on a session, and a
  // marker appears only when the thread carries both channels), so appending a lone bubble here
  // would draw an email as a plain grey text and, worse, leave a mixed thread unmarked until
  // something else forced a redraw. Same soft reload the captioned photo path has used since
  // v1.76.0, and the same reason: ask for the thread rather than guess at it.
  if (data.channel === 'email') {
    setTimeout(refreshLiveThread, 150);
    return;
  }
  if (data.role === 'send_marker' || data.role === 'ticket_marker') {
    // v1.19.0/v1.20.0: marker rows are never SMS bubbles, live or loaded.
    thread.innerHTML += '<div class="sms-system">' + esc(data.message) + '</div>' + '<div id="seen-by-line"></div>';
    thread.scrollTop = thread.scrollHeight;
    return;
  }
  var isClient = data.role === 'user';
  var isHuman = data.role === 'human';
  var cls = isClient ? 'sms-client' : isHuman ? 'sms-human' : 'sms-andi';
  var user = window._rwUser;
  var bubbleColor = isHuman ? (data.bubble_color || (user ? user.bubble_color : '#2D7DD2')) : '';
  var inlineStyle = isHuman ? ' style="background:' + bubbleColor + '"' : '';
  var time = new Date(data.created_at || Date.now()).toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});
  var sender = isHuman && data.sender_name ? '<div class="sms-sender">' + data.sender_name + '</div>' : '';
  thread.innerHTML += '<div class="sms-msg ' + cls + '"' + inlineStyle + '>' + data.message + '</div>' + sender +
                      '<div class="sms-time' + (isClient ? ' right' : '') + '">' + time + '</div>' +
                      '<div id="seen-by-line"></div>';
  thread.scrollTop = thread.scrollHeight;
  // v1.76.0: THE TRIGGER IS THE MEDIA, NOT THE TEXT.
  // v1.59.0 decided whether a photo had arrived by testing the message text against the exact
  // string [photo]. The webhook writes that string ONLY when the picture came with no caption:
  // a captioned photo logs the CAPTION as its text, so the test never matched, no reload fired,
  // and the image was invisible until some later message forced a redraw. That is the half of
  // Lance's August photo report that was never fixed, and it is a guess read off the text
  // standing in for a fact about the message.
  //
  // The event now carries the media refs (portal v1.70.0 puts them on new_message). We still
  // soft reload rather than drawing straight from the event, because the refs are R2 keys and
  // the signed URL is minted by the portal thread read; asking for the thread is what turns a
  // ref into something a browser can display.
  //
  // The old bare-string test stays underneath as a belt, so an uncaptioned photo keeps working
  // through the window before the webhook half ships and starts sending media.
  var hasMedia = Array.isArray(data.media) && data.media.length > 0;
  if (data.role === 'user' && (hasMedia || data.message === '[photo]')) {
    setTimeout(refreshLiveThread, 1200);
  }
}

// v1.59.0: re fetch the open conversation thread and redraw the message list in place.
// Used when a live [photo] lands so the stored image appears without a manual refresh.
async function refreshLiveThread() {
  var thread = document.getElementById('live-thread');
  if (!thread || !window._currentPhone) return;
  try {
    var res = await rwFetch('/api/thread?phone=' + window._currentPhone);
    if (!res.ok) return;
    var data = await res.json();
    var messages = Array.isArray(data) ? data : (data.messages || []);
    window._threadMsgs = messages;
    window._seenViewers = data.viewers || [];
    thread.innerHTML = buildThreadHTML(messages, data.clientName || window._currentName || '') + seenByHtml(data.viewers || []);
    thread.scrollTop = thread.scrollHeight;
  } catch (e) {}
}

function appendSummaryCard(messageJson) {
  var thread = document.getElementById('live-thread');
  if (!thread) return;
  try {
    var s = typeof messageJson === 'string' ? JSON.parse(messageJson) : messageJson;
    var card = document.createElement('div');
    card.className = 'session-summary-card';
    card.innerHTML =
      (s.issue ? '<div class="ss-row"><strong class="ss-issue">Issue:</strong> ' + s.issue + '</div>' : '') +
      (s.andi_action ? '<div class="ss-row"><strong class="ss-andi">Andi:</strong> ' + s.andi_action + '</div>' : '') +
      (s.client_mindset ? '<div class="ss-row ss-mind">' + s.client_mindset + '</div>' : '') +
      '<div class="ss-row"><strong class="ss-fu">Follow up:</strong> ' + (s.follow_up_note || 'None') + '</div>';
    var closeLine = document.createElement('div');
    closeLine.className = 'sms-system-line';
    closeLine.innerHTML = '<div class="sline"></div>';
    thread.appendChild(card);
    thread.appendChild(closeLine);
    thread.scrollTop = thread.scrollHeight;
  } catch(e) { console.error('Summary card error:', e); }
}

// ── CONVERSATIONS ────────────────────────────────────────────────────────────
var _allThreads = [];

async function loadRealConversations() {
  var body = document.getElementById('real-convs-body');
  if (!body) return;
  try {
    var res = await rwFetch('/api/conversations');
    if (!res.ok) { body.innerHTML = '<div class="loading-row">No live conversations yet.</div>'; return; }
    var threads = await res.json();
    _allThreads = threads;
    // v1.97.2: a list that loads keeps the search typed in (Back brings a list back as you left it)
    var csq = document.getElementById('conv-search');
    filterConvs(csq ? csq.value : '');
    updateConvBadge(threads);
    syncMarkReadBtn();
  } catch (err) {
    body.innerHTML = '<div class="loading-row">Could not load conversations.</div>';
  }
}

function renderConvList(threads) {
  var body = document.getElementById('real-convs-body');
  if (!threads.length) {
    body.innerHTML = '<div class="loading-row">' + (_convView === 'archived'
      ? 'No archived conversations.'
      : 'No conversations yet. Text 952-997-0100 to start one.') + '</div>';
    return;
  }
  body.innerHTML = '';
  threads.forEach(function(t) {
    // v1.85.0: THE KEY IS NOT ALWAYS A PHONE. An email only thread carries phone_number null,
    // and the old chain ended there, so this slot printed the literal word null.
    var emailOnly = !t.phone_number && !!t.thread_key;
    var threadKey = t.phone_number || t.thread_key || '';
    var fullName = t.first_name ? (t.first_name + ' ' + (t.last_name || '')).trim() : null;
    var name = fullName || threadKey;
    var household = t.household_name || null;
    var householdHtml = household ? '<span class="conv-household">' + household + '</span>' : '';
    // v1.17.0: an unattached number (client-texts-first, no person on file yet) gets an Unknown
    // chip so these threads read as a worklist. Falls back to name absence when the portal has
    // not shipped the attached flag yet.
    var unattached = (t.attached === false) || (t.attached === undefined && !t.first_name && !t.household_name);
    // v1.95.0: a REMOVED person is not a stranger: the name stays and the tag says No household.
    if (t.removed) householdHtml += '<span class="conv-nohouse">No household</span>';
    else if (unattached) householdHtml += '<span class="conv-unknown">Unknown</span>';
    // v1.85.0: the KEY opens the thread, not the phone. No portal change needed for this:
    // /api/thread has compared its parameter against thread_key since portal 1.75.0.
    var ep = encodeURIComponent(threadKey);
    var time = fmtConvTime(t.last_message_at);
    // Handling state from the human and handback markers, same math the thread
    // detail view uses, so the list and the open thread always agree.
    var humanHandling = t.last_human_at && (!t.last_handback_at || new Date(t.last_human_at) > new Date(t.last_handback_at));
    var andiActive = !humanHandling;
    // preview_role is always the role of the message actually shown, so the
    // label can never describe a different row than the text (Bug B fix).
    var previewRole = t.preview_role;
    // Team-consistent unread, derived from the data so every user sees the same.
    var unread = threadUnread(t);
    var fullPreview = t.last_message ? t.last_message : '';
    var rawPreview = fullPreview.length > 70 ? fullPreview.slice(0, 70).trim() + '...' : fullPreview;
    var senderPrefix = '';
    if (previewRole === 'assistant') {
      senderPrefix = '<span style="font-weight:600;color:var(--green);">Andi:</span> ';
    } else if (previewRole === 'human') {
      var senderName = t.last_sender_name ? t.last_sender_name.split(' ')[0] : 'You';
      var senderColor = t.last_sender_color || 'var(--blue)';
      senderPrefix = '<span style="font-weight:600;color:' + senderColor + ';">' + senderName + ':</span> ';
    } else {
      senderPrefix = '<span style="font-weight:600;color:var(--ink-soft);">' + (t.first_name || 'Client') + ':</span> ';
    }
    var count = t.message_count || '';
    var mutedSpecial = isMutedSpecial(t);
    // v1.85.0: NO PILL ON AN EMAIL ONLY THREAD. andiActive is the absence of a human takeover,
    // so without this the green Andi pill shows by default and claims cover that does not exist:
    // Andi does not answer email and cannot text a client with no phone. Empty rather than a word
    // like Email, because this pill answers who is covering the thread.
    var andiLabelHtml = emailOnly
      ? ''
      : (mutedSpecial
        ? '<span class="conv-notandi-label">Not Andi</span>'
        : (andiActive
            ? '<span class="conv-andi-label">Andi</span>'
            : (humanHandling ? resumeCountdownSpan(t.last_human_at) : '')));
    var card = document.createElement('div');
    card.className = 'conv-card' + (unread ? ' unread' : '') + (emailOnly ? ' email-only' : '');
    card.innerHTML =
      '<div class="conv-unread-indicator"><div class="conv-unread-dot"></div></div>' +
      '<div class="conv-card-body">' +
        '<div class="conv-card-top"><div class="conv-name">' + name + (householdHtml ? householdHtml : '') + '</div><div class="conv-time">' + time + '</div></div>' +
        '<div class="conv-card-bottom">' +
          '<div class="conv-preview">' + senderPrefix + rawPreview + '</div>' +
          '<div class="conv-card-meta">' + andiLabelHtml + '<span class="conv-msg-count">' + count + ' messages</span></div>' +
        '</div>' +
      '</div>';
    card.addEventListener('click', function() {
      card.classList.remove('unread');
      enterConversation(ep, name);
    });
    body.appendChild(card);
  });
}

// ─── ANDI RESUME COUNTDOWN ──────────────────────────────────────────────────
// Shows how long until Andi unpauses on a thread a human holds. Anchored to the
// human's last message and resets whenever they send. One ticker keeps every
// countdown on screen fresh, in the list and in the open thread.
var RESUME_WAIT_MIN = 60;

function resumeCountdownText(anchorIso) {
  var end = new Date(anchorIso).getTime() + RESUME_WAIT_MIN * 60000;
  var remMs = end - Date.now();
  if (remMs > 0) return 'Andi resumes in ' + Math.ceil(remMs / 60000) + 'm';
  return 'Andi resuming shortly';
}

function resumeCountdownSpan(anchorIso) {
  if (!anchorIso) return '';
  var urgent = (new Date(anchorIso).getTime() + RESUME_WAIT_MIN * 60000 - Date.now()) <= 10 * 60000;
  return '<span class="resume-countdown' + (urgent ? ' resume-urgent' : '') + '" data-anchor="' + anchorIso + '">' + resumeCountdownText(anchorIso) + '</span>';
}

function tickResumeCountdowns() {
  var els = document.querySelectorAll('.resume-countdown[data-anchor]');
  for (var i = 0; i < els.length; i++) {
    var anchor = els[i].getAttribute('data-anchor');
    els[i].textContent = resumeCountdownText(anchor);
    var rem = new Date(anchor).getTime() + RESUME_WAIT_MIN * 60000 - Date.now();
    if (rem <= 10 * 60000) els[i].classList.add('resume-urgent');
    else els[i].classList.remove('resume-urgent');
  }
}
setInterval(tickResumeCountdowns, 15000);

function humanStatusHtml(anchorIso) {
  return '<span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#2D7DD2;margin-right:5px;vertical-align:middle;"></span>You are handling this <span class="status-sep">·</span> ' + resumeCountdownSpan(anchorIso || new Date().toISOString());
}

function andiStatusHtml() {
  return '<span class="status-dot" style="display:inline-block;margin-right:4px;"></span>Andi is handling this';
}
// build #4 surface: a Special client inside its coverage window is covered by a person, not Andi.
// Mirrors the webhook's gate (now in the integrator timezone). Updates on the normal list/thread
// refresh, not to the second, which is fine for this signal.
function isWithinCoverage(start, end, tz) {
  if (!start || !end) return false;
  var z = tz || 'America/Chicago';
  var parts;
  try { parts = new Intl.DateTimeFormat('en-US', { timeZone: z, hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).formatToParts(new Date()); }
  catch (e) { parts = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Chicago', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).formatToParts(new Date()); }
  var hh = NaN, mm = NaN;
  parts.forEach(function(p) { if (p.type === 'hour') hh = parseInt(p.value, 10); if (p.type === 'minute') mm = parseInt(p.value, 10); });
  if (isNaN(hh) || isNaN(mm)) return false;
  var now = hh * 60 + mm;
  function toMin(s) { var m = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(String(s || '')); return m ? parseInt(m[1], 10) * 60 + parseInt(m[2], 10) : NaN; }
  var s = toMin(start), e = toMin(end);
  if (isNaN(s) || isNaN(e) || s === e) return false;
  return s < e ? (now >= s && now < e) : (now >= s || now < e);
}
function isMutedSpecial(o) {
  return !!(o && o.client_type === 'Special' && isWithinCoverage(o.coverage_start, o.coverage_end, o.integrator_timezone));
}
function notAndiStatusHtml() {
  return '<span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#2D7DD2;margin-right:5px;vertical-align:middle;"></span>Not Andi';
}
// The SSE handlers reset the open thread's status on certain events; this keeps a muted Special
// reading Not Andi instead of snapping back to the green Andi line.
function statusForOpenConv() {
  // v1.86.0: the SSE resets run through here, so without this an inbound event would put
  // "Andi is handling this" back onto an email only thread after the render removed it.
  if ((window._openConvMeta || {}).email_only) return '';
  return isMutedSpecial(window._openConvMeta || {}) ? notAndiStatusHtml() : andiStatusHtml();
}

// v1.89.0: what lights the badge. An archived thread never does: archive says you are done with it.
// One function so the header button, the right click menu and the badge cannot disagree.
function convBadgeLit(t) { return !!t && !t.archived && threadUnread(t); }
function updateConvBadge(threads) {
  var unreadCount = threads.filter(convBadgeLit).length;
  setBadge('conversations', unreadCount);
  tkBadgeCounts();
  setBadge('followups', window._openFollowups || 0);
}

// ── THREAD ARCHIVE VIEW (v1.78.0) ────────────────────────────────────────────
// 'active' hides archived threads, 'archived' shows only those, 'all' shows everything.
// Purely a list filter: the badge count and every home-panel statistic are untouched by it,
// which is the whole point of archive being separate from delete.
var _convView = 'active';

function convViewFilter(list) {
  if (_convView === 'all') return list;
  if (_convView === 'archived') return list.filter(function(t) { return !!t.archived; });
  return list.filter(function(t) { return !t.archived; });
}

function convSetView(v) {
  _convView = v;
  ['active','archived','all'].forEach(function(k) {
    var el = document.getElementById('conv-seg-' + k);
    if (el) el.className = 'seg' + (k === v ? ' on' : '');
  });
  var q = document.getElementById('conv-search');
  filterConvs(q ? q.value : '');
}

function filterConvs(query) {
  if (!query) { renderConvList(convViewFilter(_allThreads)); return; }
  var q = query.toLowerCase();
  var filtered = convViewFilter(_allThreads).filter(function(t) {
    var fullName = t.first_name ? (t.first_name + ' ' + (t.last_name || '')).trim() : '';
    var household = t.household_name || '';
    var preview = (t.last_message || '').toLowerCase();
    // v1.85.0: phone_number is null on an email only thread, and .includes on null throws, so
    // the first search typed after one existed would have taken the whole list down. Searching
    // the key also means typing part of an address finds the thread.
    var key = t.phone_number || t.thread_key || '';
    return fullName.toLowerCase().includes(q) || household.toLowerCase().includes(q) || preview.includes(q) || key.toLowerCase().includes(q);
  });
  renderConvList(filtered);
}

// ── ARCHIVE / DELETE ACTIONS (v1.78.0) ───────────────────────────────────────
// Both controls live in Settings > Conversations now, so this refreshes that list rather than the
// conversation panel it used to be launched from. loadRealConversations still runs so the
// Conversations tab and its badge are correct the moment you switch back to them.
async function convArchive(phone, archived) {
  try {
    var res = await rwFetch('/api/conversations/' + encodeURIComponent(phone) + '/archive', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ archived: !!archived })
    });
    if (res.status === 403) { alert('Only the account owner can archive a conversation.'); return; }
    if (!res.ok) { alert('Could not ' + (archived ? 'archive' : 'restore') + ' that thread.'); return; }
    await loadRealConversations();
    if (document.getElementById('thread-admin-body')) await loadThreadAdmin();
  } catch (err) { alert('Could not reach the server.'); }
}

// Permanent, so the gate is typing the word rather than clicking OK. An accidental Return on a
// plain confirm deletes a thread; nobody types DELETE by accident. The prompt names who is going
// and warns that the home panel counts move, because the after-hours numbers, the category chart
// and the resolution rate are all measured off these very rows.
async function convDelete(phone, label) {
  var who = label || phone;
  var typed = prompt('Delete the conversation with ' + who + ' permanently?\n\n'
    + 'This removes every message, summary and ticket marker on this number. It cannot be undone.\n'
    + 'The home panel counts are measured from these messages, so those numbers will drop.\n\n'
    + 'Type DELETE to confirm.');
  if (typed === null) return;
  if (typed.trim().toUpperCase() !== 'DELETE') { alert('Not deleted. You have to type DELETE exactly.'); return; }
  try {
    var res = await rwFetch('/api/conversations/' + encodeURIComponent(phone), { method: 'DELETE' });
    if (!res.ok) {
      alert(res.status === 403 ? 'Only the account owner can delete a conversation.' : 'Could not delete that thread.');
      return;
    }
    var out = await res.json();
    await loadRealConversations();
    if (document.getElementById('thread-admin-body')) await loadThreadAdmin();
    if (window._currentPhone && decodeURIComponent(window._currentPhone) === phone) goBack();
    if (out && out.stop_record_kept) {
      alert('Messages deleted. This number had sent STOP, so its opt-out record is kept and Andi stays silent for it.');
    }
  } catch (err) { alert('Could not reach the server.'); }
}

async function openRealConv(encodedPhone, name) {
  document.getElementById('conv-list-view').style.display = 'none';
  document.getElementById('conv-detail-view').style.display = 'block';
  document.getElementById('conv-detail-content').innerHTML = '<div class="loading-row">Loading thread...</div>';
  window._currentPhone = encodedPhone;
  window._currentName = name;
  // Stamp my view first (await) so I show in my own Seen by line, then refresh the list so the
  // team-consistent badge clears for a review item the moment anyone looks.
  try { await recordView(decodeURIComponent(encodedPhone)); } catch (e) {}
  loadRealConversations();
  try {
    var res = await rwFetch('/api/thread?phone=' + encodedPhone);
    if (window._currentPhone !== encodedPhone) return; // v1.96.0: another thread was opened (or Back pressed) while this one loaded
    if (!res.ok) throw new Error('Status ' + res.status);
    var data = await res.json();
    if (window._currentPhone !== encodedPhone) return;
    var messages = Array.isArray(data) ? data : (data.messages || []);
    window._threadMsgs = messages; // v1.21.0: flag modal builds its snapshot from this
    // v1.84.0: whether THIS PORTAL can send an email at all. Offered by portal 1.74.0 off its own
    // credential check, so the menu never offers a reply the server would refuse.
    window._emailSendReady = !!data.email_send_ready;
    // Opening a thread always starts with no reply target. Carrying one across threads would aim
    // a reply at a message in a conversation nobody is looking at any more.
    window._emailReplyTo = null;
    var displayName = data.clientName || name;
    var householdName = data.householdName || null;
    window._seenViewers = data.viewers || [];
    var html = buildThreadHTML(messages, displayName) + seenByHtml(data.viewers || []);
    // v1.84.0: AN EMAIL REPLY IS NOT A TAKEOVER OF THE TEXT THREAD. These three reads decide
    // what the header says and whether Hand back appears, and webhook v9.32.0 scopes the same
    // question to channel 'sms' in getHandlingState. If this surface counted email human rows it
    // would tell a tech that a human is handling a thread the webhook has Andi still covering,
    // and two surfaces disagreeing about one thread is worse than either answer on its own.
    var isSmsHuman = function(m) { return m.role === 'human' && m.channel !== 'email'; };
    var hasHuman = messages.some(isSmsHuman);
    var lastHandback = messages.filter(function(m) { return m.role === 'handback'; }).pop();
    var lastHuman = messages.filter(isSmsHuman).pop();
    var andiActive = !hasHuman || (lastHandback && lastHuman && new Date(lastHandback.created_at) > new Date(lastHuman.created_at));
    // build #4: cache this thread's type + window so the header and SSE resets can read "muted".
    // v1.86.0: THE THREAD ASKS THE PORTAL WHETHER IT HAS A PHONE. Not the row that was clicked:
    // a thread opened from a push notification or a deep link has no row behind it.
    var threadEmailOnly = !!data.thread_key && !data.phone_number;
    window._openConvEmailOnly = threadEmailOnly;
    window._openConvMeta = { client_type: data.client_type || null, coverage_start: data.coverage_start || null, coverage_end: data.coverage_end || null, integrator_timezone: data.integrator_timezone || null, email_only: threadEmailOnly };
    var mutedSpecial = isMutedSpecial(window._openConvMeta);
    // No hand back on a coverage mute: Andi never had it, the window does, and he resumes on his own.
    var handbackBtnHtml = (!andiActive && !mutedSpecial) ?
      '<button class="handback-btn" id="handback-btn">Hand back to Andi</button>' : '';
    window._andiActive = andiActive;
    document.getElementById('conv-detail-content').innerHTML =
    '<div class="thread-shell">' +
      '<div class="thread-main">' +
        '<div class="detail-header" style="padding:0.75rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;height:53px;box-sizing:border-box;">' +
          '<div class="detail-name">' + displayName + '</div>' +
          '<div style="display:flex;align-items:center;gap:0.85rem;">' +
            '<div class="detail-meta" id="thread-status">' + (threadEmailOnly ? '' : '<span class="status-dot" style="display:inline-block;margin-right:4px;"></span>Andi is handling this') + '</div>' +
            '<div id="attach-slot"></div>' +
            '<div id="markread-slot"></div>' +
            '<div id="handback-slot">' + handbackBtnHtml + '</div>' +
          '</div>' +
        '</div>' +
        '<div class="sms-thread" id="live-thread">' + html + '</div>' +
        '<div class="reply-target" id="reply-target" style="display:none;"></div>' +
        '<div class="reply-box">' +
          '<textarea id="reply-input" class="reply-textarea" placeholder="Type a reply..." rows="1"></textarea>' +
          '<button id="send-btn" class="reply-send">Send</button>' +
          '<button class="reply-quick" onclick="toggleQuickPop(event)">Quick</button>' +
        '</div>' +
        '<div id="qm-pop" class="qm-pop" style="display:none;"></div>' +
        '<button class="flag-fab" id="flag-fab" title="Flag for review" onclick="toggleFlagFab()">⚑</button>' +
      '</div>' +
      '<div class="equipment-panel" id="equipment-panel">' +
        '<div class="equipment-panel-header"><span>Household</span><button class="rail-create" onclick="openThreadCreate()">+ Create</button></div>' +
        '<div class="equipment-panel-body" id="equipment-panel-body"><div style="color:var(--ink-soft);font-size:0.78rem;font-style:italic;">Loading...</div></div>' +
      '</div>' +
    '</div>';
    var hbBtn = document.getElementById('handback-btn');
    if (hbBtn) {
      hbBtn.addEventListener('click', function() {
        doHandback(decodeURIComponent(encodedPhone));
      });
    }
    loadEquipmentPanel(decodeURIComponent(encodedPhone));
    syncMarkReadBtn();
    var statusEl = document.getElementById('thread-status');
    if (statusEl) {
      // v1.86.0: an email only thread gets NO status line. Andi is not covering it and no person
      // has taken it; the honest answer is to say nothing rather than pick one of the three
      // sentences this slot knows, all of which are about a text thread.
      if (threadEmailOnly) {
        statusEl.innerHTML = '';
      } else if (mutedSpecial) {
        statusEl.innerHTML = notAndiStatusHtml();
      } else if (!andiActive) {
        statusEl.innerHTML = humanStatusHtml(lastHuman ? lastHuman.created_at : new Date().toISOString());
      } else {
        statusEl.innerHTML = andiStatusHtml();
      }
    }
    document.getElementById('send-btn').addEventListener('click', sendReply);
    document.getElementById('reply-input').addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendReply(); }
    });
    // v1.84.0: right click on the desktop, long press on the phone. Delegated on the thread so it
    // survives every innerHTML rebuild, the same pattern the photo lightbox has used since 1.59.0.
    var emlThreadEl = document.getElementById('live-thread');
    if (emlThreadEl) {
      emlThreadEl.addEventListener('contextmenu', emlThreadContext);
      emlThreadEl.addEventListener('touchstart', emlTouchStart, { passive: true });
      emlThreadEl.addEventListener('touchend', emlTouchCancel);
      emlThreadEl.addEventListener('touchmove', emlTouchCancel, { passive: true });
    }
    // v1.88.0: the auto arm used to live here. It lives in emlApplyReplyMode now, so opening,
    // sending and cancelling all resolve to the same state instead of three callers each
    // remembering to do it.
    emlApplyReplyMode();
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        var threadEl = document.getElementById('live-thread');
        if (threadEl) threadEl.scrollTop = threadEl.scrollHeight;
      });
    });
  } catch (err) {
    document.getElementById('conv-detail-content').innerHTML = '<div class="loading-row">Could not load thread: ' + err.message + '</div>';
  }
}

function buildThreadHTML(messages, clientName) {
  if (!messages.length) return '';
  // v1.79.0: is this thread MIXED? The per bubble channel marker is drawn only when the answer
  // is yes. Marking every bubble on a thread that has only ever been texts would add noise to
  // every conversation in the account to solve a problem exactly one of them has.
  var EML_MARKER_ROLES = { summary:1, handback:1, send_marker:1, ticket_marker:1, removal_marker:1 };
  var sawSms = false, sawEmail = false;
  for (var ci = 0; ci < messages.length; ci++) {
    if (EML_MARKER_ROLES[messages[ci].role]) continue;
    if (messages[ci].channel === 'email') sawEmail = true; else sawSms = true;
  }
  var threadMixed = sawSms && sawEmail;
  // v1.84.1: THE BAND FOLLOWS THE CHANNEL AND MARKERS INHERIT IT. Found live on a real thread:
  // Andy answered an email at 3:17, the client replied by email at 3:18, then he TEXTED a photo
  // at 3:21 and the blue ran straight through it and kept running.
  //
  // WHY IT RAN. v1.83.0 scoped the band to the SESSION, and a session closes on a SUMMARY row.
  // A live thread has no summary until one gets written, so an email that arrives in an open
  // session paints every text after it, for as long as the session stays open, which on a quiet
  // thread is days. That is the 1.79.0 pane tint back in a smaller box and by the same
  // mechanism: a colour only one specific later event can retire.
  //
  // WHY IT WAS SCOPED THAT WAY IS STILL RIGHT, and the fix keeps it. v1.82.0 banded a contiguous
  // RUN of email rows and came out striped, because the summary card that CLOSES an email
  // exchange is written with channel sms and fell onto the plain floor underneath the very
  // exchange it was summarising.
  //
  // THE TWO CASES WERE NEVER THE SAME THING, and that is the whole correction. A MARKER (summary,
  // handback, send marker, ticket marker) is not a message on a channel at all; it is a note
  // ABOUT the conversation, so it INHERITS and never closes the band. A REAL MESSAGE on another
  // channel is a genuine channel change and closes it. So a summary stays inside its own email
  // exchange, and Andy's photo lands on the plain floor where it belongs.
  //
  // A marker between two email rows inherits from both and stays blue. A marker that CLOSES an
  // email exchange, with texts after it, takes the channel BEHIND it rather than ahead, because
  // a summary belongs to the exchange it is summarising and not to whatever happens next.
  var want = [], lastReal = false;
  for (var si = 0; si < messages.length; si++) {
    if (EML_MARKER_ROLES[messages[si].role]) { want[si] = lastReal; continue; }
    lastReal = messages[si].channel === 'email';
    want[si] = lastReal;
  }
  // The channel of the next REAL message at or after i, for the date line that opens a session:
  // it introduces what comes next rather than closing what came before.
  function wantAhead(i) {
    for (var k = i; k < messages.length; k++) {
      if (!EML_MARKER_ROLES[messages[k].role]) return messages[k].channel === 'email';
    }
    return false;
  }
  var bandOpen = false;
  function bandTo(want) {
    if (want === bandOpen) return '';
    bandOpen = want;
    return want ? '<div class="eml-band">' : '</div>';
  }
  var html = '';
  var firstTime = new Date(messages[0].created_at);
  var sessionLabel = firstTime.toLocaleDateString('en-US', {month:'short', day:'numeric'}) + ' ' +
                     firstTime.toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});
  // The opening date line is part of session 0, so the band has to be open BEFORE it is drawn
  // or the section starts a line lower than the session it is colouring.
  html += bandTo(wantAhead(0));
  html += '<div class="sms-system-line green"><div class="sline"></div><span>' + sessionLabel + '</span><div class="sline"></div></div>';

  for (var i = 0; i < messages.length; i++) {
    var m = messages[i];
    // One decision, at the top, for every row regardless of which branch handles it. The old
    // version decided per branch, which is what let the summary card fall outside its own
    // session's band.
    html += bandTo(!!want[i]);
    if (m.role === 'summary') {
      try {
        var s = typeof m.message === 'string' ? JSON.parse(m.message) : m.message;
        html += '<div class="session-summary-card">' +
          (s.issue ? '<div class="ss-row"><strong class="ss-issue">Issue:</strong> ' + s.issue + '</div>' : '') +
          (s.andi_action ? '<div class="ss-row"><strong class="ss-andi">Andi:</strong> ' + s.andi_action + '</div>' : '') +
          (s.client_mindset ? '<div class="ss-row ss-mind">' + s.client_mindset + '</div>' : '') +
          '<div class="ss-row"><strong class="ss-fu">Follow up:</strong> ' + (s.follow_up_note || 'None') + '</div>' +
        '</div>';
        html += '<div class="sms-system-line"><div class="sline"></div></div>';
        if (i < messages.length - 1) {
          var nextTime = new Date(messages[i+1].created_at);
          var nextLabel = nextTime.toLocaleDateString('en-US', {month:'short', day:'numeric'}) + ' ' +
                          nextTime.toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});
          html += bandTo(wantAhead(i + 1));
          html += '<div class="sms-system-line green"><div class="sline"></div><span>' + nextLabel + '</span><div class="sline"></div></div>';
        }
      } catch(e) {}
      continue;
    }
    if (m.role === 'handback') {
      // v1.60.9: SHOW THE STORED MESSAGE. This branch hardcoded "Handed back to Andi" and threw
      // the row's own text away, so three different events read as one sentence: a person hitting
      // Hand back in the portal, the resume sweep reclaiming a dangling thread ("Resumed by Andi"),
      // and a client saying the word Andi to wake him ("Client texted Andi"). Reading a thread you
      // could not tell which had happened, which cost a whole session of diagnosis on the Cowden
      // thread. Same quiet system line as send_marker two branches down, which already did this.
      html += '<div class="sms-system">' + esc(m.message || 'Handed back to Andi') + '</div>';
      continue;
    }
    if (m.role === 'send_marker') {
      // v1.19.0: a member-send completion marker. History only, never an SMS to this client,
      // so it must never read as a bubble the client received. Same quiet treatment as handback.
      html += '<div class="sms-system">' + esc(m.message) + '</div>';
      continue;
    }
    if (m.role === 'removal_marker') {
      // v1.95.0: where a person was removed from (or restored to) a house. Drawn from client_removals by the portal,
      // never stored as a message.
      html += '<div class="sms-removal">' + esc(m.message) + '</div>';
      continue;
    }
    if (m.role === 'ticket_marker') {
      // v1.20.0: ticket boundary in the thread. Clickable into the ticket; the opened marker
      // doubles as the scroll anchor when the ticket view shows this conversation.
      var tkm = String(m.message || '').match(/^Ticket (\d+) (opened|resolved)/);
      var anchorId = tkm ? ' id="tkmark-' + tkm[1] + '-' + tkm[2] + '"' : '';
      var clickAttr = tkm ? ' style="cursor:pointer;" onclick="goToTicket(' + tkm[1] + ')"' : '';
      html += '<div class="sms-system"' + anchorId + clickAttr + '>' + esc(m.message) + '</div>';
      continue;
    }
    var isClient = m.role === 'user';
    var isHuman = m.role === 'human';
    var cls = isClient ? 'sms-client' : isHuman ? 'sms-human' : 'sms-andi';
    var user = window._rwUser;
    var bubbleColor = isHuman ? (m.bubble_color || (user ? user.bubble_color : '#2D7DD2')) : '';
    var inlineStyle = isHuman ? ' style="background:' + bubbleColor + '"' : '';
    var time = new Date(m.created_at).toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'});
    var sender = isHuman && m.sender_name ? '<div class="sms-sender">' + m.sender_name + '</div>' : '';
    // v1.59.0: inbound MMS photos ride the message row as media_urls (signed by the portal).
    // A bare [photo] row with photos shows the images only; text plus photos shows both.
    var photos = '';
    if (m.media_urls && m.media_urls.length) {
      photos = '<div class="sms-photos' + (isClient ? ' right' : '') + '">' +
        m.media_urls.map(function(mu) { return '<img class="sms-photo" src="' + esc(mu.url) + '" loading="lazy" />'; }).join('') +
      '</div>';
    }
    var hideBubble = photos && m.message === '[photo]';

    // v1.79.0: THE EMAIL BUBBLE. Subject and sender ride ABOVE the body because a text has no
    // subject and an email's usually carries the real complaint, and because the sender address
    // is the only thing on a phone keyed thread that says WHICH person in a two person household
    // actually wrote it. Both columns have been stored on every email row since Sept 8 and
    // nothing has ever read them.
    var isEmail = m.channel === 'email';
    var bubbleHtml;
    if (isEmail) {
      // THE BODY IS ESCAPED HERE AND THE SMS PATH IS LEFT EXACTLY AS IT WAS. This renderer has
      // interpolated m.message raw since the thread was built, which was survivable while every
      // message came through a carrier. An email body does not: emailDoor only runs htmlToText
      // when there is no plain text part, so a text/plain email arrives with no tag stripping at
      // all. That is a new door and it is closed on the branch that opens it. The SMS hole is
      // real, older, and belongs to its own pass rather than riding along in a rendering build.
      var emlBody = esc(m.message == null ? '' : m.message);
      var emlLong = emlBody.length > 520 || (emlBody.match(/\n/g) || []).length > 9;
      var emlHead = '';
      if (m.email_subject || m.email_from) {
        emlHead = '<div class="eml-head">' +
          (m.email_subject ? '<div class="eml-subj">' + esc(m.email_subject) + '</div>' : '') +
          (m.email_from ? '<div class="eml-from">' + esc(m.email_from) + '</div>' : '') +
        '</div>';
      }
      // v1.84.0: data-eml is the REPLY TARGET, and it is on client emails only. The portal
      // refuses to reply to anything that is not an inbound email on this thread anyway, so
      // marking our own outbound bubbles here would only offer a menu item that fails on click.
      // The row id comes from /api/thread (portal 1.74.0); an older payload has none and the
      // attribute simply does not appear, which degrades to today's behaviour.
      var emlTarget = (isClient && m.id) ? ' data-eml="' + m.id + '"' : '';
      bubbleHtml = '<div class="sms-msg ' + cls + ' sms-email" data-mi="' + i + '"' + emlTarget + '>' + emlHead +
        '<div class="eml-body' + (emlLong ? ' eml-clamp' : '') + '">' + emlBody + '</div>' +
        (emlLong ? '<button class="eml-more" onclick="emlToggle(this)">Show more</button>' : '') +
      '</div>';
    } else {
      bubbleHtml = '<div class="sms-msg ' + cls + '" data-mi="' + i + '"' + inlineStyle + '>' + m.message + '</div>';
    }
    var chanTag = '';
    if (threadMixed) {
      chanTag = isEmail
        ? '<span class="sms-chan ch-e">Email</span> &middot; '
        : '<span class="sms-chan ch-s">Text</span> &middot; ';
    }

    html += (hideBubble ? '' : bubbleHtml) +
            photos + sender +
            '<div class="sms-time' + (isClient ? ' right' : '') + '">' + chanTag + time + '</div>';
  }
  // An unclosed band would swallow the rest of the thread into a blue box, so it closes here
  // unconditionally rather than relying on the loop having ended on a text.
  html += bandTo(false);
  return html;
}

// v1.79.0: a long email collapses to about eight lines behind a soft fade rather than making
// the reader scroll a screen of somebody's signature block to reach the next message. The quoted
// chain is already gone before this ever runs (emailDoor strips it at the door), so what is
// clamped is genuinely the person's own text, which is why the default is collapsed rather than
// hidden. classList.toggle returns whether the class is now PRESENT, and present means clamped.
function emlToggle(btn) {
  var body = btn.previousElementSibling;
  if (!body) return;
  btn.textContent = body.classList.toggle('eml-clamp') ? 'Show more' : 'Show less';
}

// Centered "Seen by" line at the bottom of the thread, same quiet treatment as "Handed back to
// Andi". Shows a small colored initial dot per teammate in their own bubble color. Hover a dot for
// the name and the time they read it. Renders nothing if no one has opened it since the last message.
function seenByHtml(viewers) {
  if (!viewers || !viewers.length) return '<div id="seen-by-line"></div>';
  return '<div id="seen-by-line" class="sms-system seen-by">' + seenByInner(viewers) + '</div>';
}
function seenByInner(viewers) {
  var dots = viewers.map(function(v) {
    var t = '';
    try { t = new Date(v.viewed_at).toLocaleTimeString('en-US', {hour:'numeric', minute:'2-digit'}); } catch(e) {}
    var title = (v.name || 'Teammate') + (t ? ' · read ' + t : '');
    return '<span class="seen-dot" style="background:' + (v.bubble_color || '#2D7DD2') + ';" title="' + esc(title) + '">' + esc(v.initials || '?') + '</span>';
  }).join('');
  return '<span class="seen-label">Seen by</span>' + dots;
}
// Live update from the 'viewed' SSE event: add or move the viewer's dot on the open thread.
function applyViewedEvent(d) {
  if (!window._currentPhone || decodeURIComponent(window._currentPhone) !== d.phone_number) return;
  var line = document.getElementById('seen-by-line');
  if (!line) return;
  window._seenViewers = (window._seenViewers || []).filter(function(v){ return v.user_id !== d.user_id; });
  window._seenViewers.push({ user_id: d.user_id, name: d.name, initials: d.initials, bubble_color: d.bubble_color, viewed_at: d.viewed_at });
  line.className = 'sms-system seen-by';
  line.innerHTML = seenByInner(window._seenViewers);
}

// ─── v1.84.0: REPLY BY EMAIL ─────────────────────────────────────────────────
//
// WHY A MENU ON A BUBBLE RATHER THAN A TOGGLE ON THE REPLY BOX. A reply that goes out without
// In-Reply-To and References pointing at the inbound Message-ID starts a NEW thread in the
// client's mail app, so the answer arrives looking unrelated to the question they asked. That
// makes "respond to THIS email" the mechanically correct way to send and a generic channel
// toggle the degraded version, which is why the target is picked on the message itself.
//
// The whole feature is three pieces of state: which row is being answered, what the reply
// control says because of it, and what sendReply posts. Nothing else on the thread changes.

var _emlMenu = null;
var _emlTouch = null;

function emlMenuClose() {
  if (_emlMenu && _emlMenu.parentNode) _emlMenu.parentNode.removeChild(_emlMenu);
  _emlMenu = null;
  document.removeEventListener('click', emlMenuClose);
}

// v1.89.0: the bubble menu carries up to two items. id is the email row to reply to (or null);
// canMark offers Mark as read on the client's last message while the thread is lighting the badge.
function emlMenuOpen(x, y, id, canMark) {
  emlMenuClose();
  var m = document.createElement('div');
  m.className = 'eml-menu';
  var items = '';
  // A portal with no Graph credentials SAYS SO rather than offering a menu item that fails on
  // click. Silence would read as a broken right click, which is the worse of the two.
  if (id) items += window._emailSendReady
    ? '<div class="eml-menu-item" data-act="reply">Reply by email</div>'
    : '<div class="eml-menu-item eml-menu-dead">Email sending is not set up</div>';
  if (canMark) items += '<div class="eml-menu-item" data-act="markread">Mark as read</div>';
  m.innerHTML = items;
  m.style.left = Math.max(4, Math.min(x, window.innerWidth - 190)) + 'px';
  m.style.top = Math.max(4, Math.min(y, window.innerHeight - 70)) + 'px';
  document.body.appendChild(m);
  _emlMenu = m;
  m.addEventListener('click', function(ev) {
    var it = ev.target.closest ? ev.target.closest('.eml-menu-item') : null;
    var act = it ? it.getAttribute('data-act') : null;
    if (act === 'reply') { emlStartReply(id); emlMenuClose(); }
    else if (act === 'markread') { emlMenuClose(); markThreadRead(); }
  });
  // Deferred by a tick, or the very click that opened this menu closes it again.
  setTimeout(function() { document.addEventListener('click', emlMenuClose); }, 0);
}

// v1.89.0: what a bubble offers. Reply by email on a client email; Mark as read on the client's LAST
// message, only while this thread is lighting the badge. Neither: null, and the browser's own menu
// stands untouched.
function threadMenuFor(target) {
  var b = target && target.closest ? target.closest('.sms-msg.sms-client') : null;
  if (!b) return null;
  var emlId = b.getAttribute('data-eml') || null;
  var canMark = false;
  var mi = parseInt(b.getAttribute('data-mi'), 10);
  var msgs = window._threadMsgs || [];
  var lastUser = -1;
  for (var i = msgs.length - 1; i >= 0; i--) { if (msgs[i].role === 'user') { lastUser = i; break; } }
  if (mi === lastUser && lastUser >= 0) canMark = currentThreadLit();
  if (!emlId && !canMark) return null;
  return { emlId: emlId, canMark: canMark };
}

function emlThreadContext(e) {
  // Flag mode owns every bubble in the thread while it is on, and two selection models fighting
  // over the same element is how a surface starts doing something nobody asked for.
  if (_flagMode) return;
  var t = threadMenuFor(e.target);
  if (!t) return;
  e.preventDefault();
  emlMenuOpen(e.clientX, e.clientY, t.emlId, t.canMark);
}

function emlTouchStart(e) {
  if (_flagMode) return;
  var t = threadMenuFor(e.target);
  if (!t) return;
  var pt = e.touches && e.touches[0];
  var x = pt ? pt.clientX : 40, y = pt ? pt.clientY : 120;
  emlTouchCancel();
  _emlTouch = setTimeout(function() { _emlTouch = null; emlMenuOpen(x, y, t.emlId, t.canMark); }, 550);
}

// ─── v1.89.0: SEEN, NEEDS NOTHING ────────────────────────────────────────────
function currentThreadRow() {
  if (!window._currentPhone) return null;
  var key = decodeURIComponent(window._currentPhone);
  var rows = window._allThreads || _allThreads || [];
  for (var i = 0; i < rows.length; i++) { if ((rows[i].thread_key || rows[i].phone_number) === key) return rows[i]; }
  return null;
}
function currentThreadLit() { return convBadgeLit(currentThreadRow()); }
function syncMarkReadBtn() {
  var slot = document.getElementById('markread-slot');
  if (!slot) return;
  slot.innerHTML = currentThreadLit()
    ? '<button class="markread-btn" onclick="markThreadRead()" title="Seen, needs nothing. Clears the dot for the whole team until the client writes again.">Mark as read</button>'
    : '';
}
async function markThreadRead() {
  if (!window._currentPhone) return;
  var key = decodeURIComponent(window._currentPhone);
  try {
    var res = await rwFetch('/api/conversations/' + encodeURIComponent(key) + '/mark-read', { method: 'POST' });
    if (!res.ok) { alert('Could not mark this thread as read.'); return; }
    var out = await res.json();
    var row = currentThreadRow();
    if (row) row.marked_read_at = out.marked_read_at;
    renderConvList(convViewFilter(_allThreads));
    updateConvBadge(_allThreads);
    syncMarkReadBtn();
  } catch (err) { alert('Could not reach the server.'); }
}
function emlTouchCancel() { if (_emlTouch) { clearTimeout(_emlTouch); _emlTouch = null; } }

function emlStartReply(id) {
  var rowId = parseInt(id, 10);
  if (!rowId) return;
  var msgs = window._threadMsgs || [];
  var row = null;
  for (var i = 0; i < msgs.length; i++) { if (msgs[i].id === rowId) { row = msgs[i]; break; } }
  if (!row) return;
  window._emailReplyTo = { id: rowId, subject: row.email_subject || '', from: row.email_from || '' };
  emlApplyReplyMode();
  var input = document.getElementById('reply-input');
  if (input) input.focus();
}

function emlCancelReply() {
  window._emailReplyTo = null;
  emlApplyReplyMode();
}

// THE CONTROL IS REPAINTED FROM THE STATE THAT DECIDES WHERE THE MESSAGE GOES, every time, which
// is the entire reason the signal lives here instead of on a pane. There is no path that changes
// the target without calling this, so the button cannot say Send Email while sendReply is about
// to post a text.
function emlApplyReplyMode() {
  var box = document.querySelector('#conv-detail-content .reply-box');
  var btn = document.getElementById('send-btn');
  var strip = document.getElementById('reply-target');
  if (!box || !btn) return;
  var t = window._emailReplyTo;
  // v1.88.0: ONE CHANNEL, SO IT IS THE DEFAULT, AND IT RE-ARMS ITSELF. A thread with no phone has
  // exactly one way to answer, so this function arms it rather than waiting to be told: on open,
  // after a send clears the target, and after anything else that disarms. Newest client email
  // rather than first, because a thread with several should answer the live one.
  if (!t && window._openConvEmailOnly) {
    var tmsgs = window._threadMsgs || [];
    for (var ti = tmsgs.length - 1; ti >= 0; ti--) {
      var tm = tmsgs[ti];
      if (tm.role === 'user' && tm.channel === 'email' && tm.id) {
        t = { id: tm.id, subject: tm.email_subject || '', from: tm.email_from || '' };
        window._emailReplyTo = t;
        break;
      }
    }
  }
  // v1.86.0: THE TEXT COMPOSE IS OFF ON A THREAD WITH NO PHONE, and this is the one function that
  // knows whether an email reply is armed, so it is the only place the two states can be decided
  // together. Disabled rather than removed: six places read these two ids without a null guard.
  var input = document.getElementById('reply-input');
  var noPhone = !!window._openConvEmailOnly && !t;
  if (input) {
    input.disabled = noPhone;
    input.placeholder = noPhone
      ? 'No phone here. Right click a message to reply by email.'
      : 'Type a reply...';
  }
  btn.disabled = noPhone;
  // add/remove rather than toggle(name, force): every other classList call in this function uses
  // the same two, and the render harness stubs exactly those. A lone toggle here took the whole
  // suite down with a TypeError, which is a loud way to learn that a helper is the odd one out.
  if (noPhone) box.classList.add('reply-nophone'); else box.classList.remove('reply-nophone');
  if (t) {
    box.classList.add('eml-mode');
    btn.classList.add('eml-send');
    btn.textContent = 'Send Email';
    if (strip) {
      strip.style.display = '';
      strip.innerHTML = '<span class="reply-target-label">Replying by email</span>' +
        '<div class="reply-target-main">' + esc(t.subject || '(no subject)') +
        (t.from ? ' &middot; ' + esc(t.from) : '') + '</div>' +
        (window._openConvEmailOnly ? '' : '<button class="reply-target-x" onclick="emlCancelReply()" title="Cancel">&times;</button>');
    }
  } else {
    box.classList.remove('eml-mode');
    btn.classList.remove('eml-send');
    btn.textContent = 'Send';
    if (strip) { strip.style.display = 'none'; strip.innerHTML = ''; }
  }
}

async function sendReply() {
  var input = document.getElementById('reply-input');
  var message = input.value.trim();
  if (!message) return;
  var phone = decodeURIComponent(window._currentPhone);
  // Read the target BEFORE the await. A tech who cancels mid flight must not change where the
  // message that is already leaving is going.
  var target = window._emailReplyTo;
  input.value = ''; input.disabled = true;
  try {
    // `to` is the PHONE on both channels, because phone_number is still the thread key. The
    // email ADDRESS is never sent from here: the portal reads it off the row named by
    // reply_to_id, so this browser cannot aim a message at an address of its own choosing.
    var payload = target
      ? { to: phone, message: message, channel: 'email', reply_to_id: target.id }
      : { to: phone, message: message };
    var res = await rwFetch('/api/send', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (!res.ok) {
      // v1.84.0: SAY WHAT WENT WRONG AND GIVE THE WORDS BACK. The old path cleared the box and
      // said "Failed to send", so a tech lost a paragraph to a server error. That was survivable
      // when Telnyx was the only thing that could refuse; an email send has real refusals (no
      // credentials, the original gone from the mailbox, a row that will not match) and each one
      // has a sentence behind it worth reading.
      var why = 'Failed to send. Please try again.';
      try { var e1 = await res.json(); if (e1 && e1.error) why = e1.error; } catch (e2) {}
      input.value = message;
      alert(why);
    }
    else if (target) {
      // AN EMAIL REPLY IS NOT A TAKEOVER. No Hand back button, no status flip, no summary card:
      // Andi keeps the text thread, which is the lane split Andy called on Sept 13 and which
      // webhook v9.32.0 enforces on the server. The redraw is what turns the new row into a
      // properly banded email bubble, since bands are computed across the whole thread.
      var out = null;
      try { out = await res.json(); } catch (e3) {}
      if (out && out.warning) alert(out.warning);
      emlCancelReply();
      refreshLiveThread();
      loadRealConversations();
    }
    else {
      var slot = document.getElementById('handback-slot');
      if (slot && !slot.querySelector('.handback-btn')) {
        var btn = document.createElement('button');
        btn.className = 'handback-btn';
        btn.id = 'handback-btn';
        btn.textContent = 'Hand back to Andi';
        btn.addEventListener('click', function() { doHandback(phone); });
        slot.appendChild(btn);
      }
      // You just sent, so you are handling and the hour restarts from now.
      var statusEl = document.getElementById('thread-status');
      if (statusEl) statusEl.innerHTML = humanStatusHtml(new Date().toISOString());
      // Refresh the list right away so the preview shows this message without
      // waiting on the SSE event to come back to our own browser. Messages from
      // other team members and clients still update the list through the event.
      loadRealConversations();
    }
  } catch (err) { alert('Connection error. Please try again.'); }
  input.disabled = false; input.focus();
}

async function doHandback(phone) {
  try {
    var res = await rwFetch('/api/handback', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone: phone })
    });
    if (res.ok) {
      var slot = document.getElementById('handback-slot');
      if (slot) slot.innerHTML = '';
      var statusEl = document.getElementById('thread-status');
      if (statusEl) statusEl.innerHTML = statusForOpenConv();
    }
  } catch(err) { console.error('Handback failed:', err); }
}

// ── EQUIPMENT PANEL ──────────────────────────────────────────────────────────
// Phase C2: the rail is tabbed like the household detail, slimmer for the narrow column.
// Household name/address and Andi's read stay pinned above the tabs; Activity / System / Photos.
var _cvTab = 'system'; // v1.22.0: rail mirrors the household order, System leads
function cvTab(id) {
  _cvTab = id;
  document.querySelectorAll('#equipment-panel-body .hd-tab').forEach(function(b){ b.classList.toggle('active', b.getAttribute('data-tab') === id); });
  document.querySelectorAll('#equipment-panel-body .hd-tabpanel').forEach(function(p){ p.classList.toggle('active', p.id === 'cvtab-' + id); });
}
async function loadEquipmentPanel(phone) {
  var body = document.getElementById('equipment-panel-body');
  if (!body) return;
  try {
    var res = await rwFetch('/api/household-by-phone?phone=' + encodeURIComponent(phone));
    if (!res.ok) { body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.78rem;font-style:italic;margin-bottom:0.6rem;">No household record found.</div>' +
      '<button class="attach-btn" onclick="openAttach()">+ Add to household</button>'; return; }
    var h = await res.json();
    var sysFields = [
      { label: 'Control', value: h.control_system_type },
      { label: 'ISP', value: h.isp_name },
      { label: 'Network', value: h.network_tier },
      { label: 'Priority', value: h.priority_tier },
      { label: 'Lighting', value: h.lighting_system_type },
      { label: 'Surveillance', value: h.camera_system_type },
      { label: 'Security', value: h.lock_system_type }
    ].filter(function(f) { return f.value && f.value !== 'Unknown'; });

    body.innerHTML = '';

    // Pinned: household identity.
    var clientSection = document.createElement('div');
    clientSection.className = 'eq-section';
    clientSection.innerHTML = '<div class="eq-section-title">Household</div>';
    if (h.name) {
      var nameRow = document.createElement('div');
      nameRow.className = 'eq-row';
      nameRow.innerHTML = '<span class="eq-label">Name</span><span class="eq-value">' + (h.id ? '<a class="tk-house-inline" style="color:inherit;" onclick="goToHousehold(' + h.id + ')">' + esc(h.name) + '</a>' : esc(h.name)) + '</span>';
      clientSection.appendChild(nameRow);
    }
    if (h.address) {
      var addrRow = document.createElement('div');
      addrRow.className = 'eq-row';
      addrRow.innerHTML = '<span class="eq-label">Address</span><span class="eq-value" style="font-size:0.72rem;">' + h.address + '</span>';
      clientSection.appendChild(addrRow);
    }
    body.appendChild(clientSection);

    // Pinned: Andi's read (filled async by loadConvContext).
    var readSection = document.createElement('div');
    readSection.id = 'conv-read';
    body.appendChild(readSection);

    // System tab content, built now.
    var sysHtml = '';
    if (sysFields.length) {
      sysHtml += '<div class="eq-section"><div class="eq-section-title">System</div>' + sysFields.map(function(f) {
        return '<div class="eq-row"><span class="eq-label">' + f.label + '</span><span class="eq-value">' + f.value + '</span></div>';
      }).join('') + '</div>';
    }
    if (h.household_notes && h.household_notes !== 'None') {
      sysHtml += '<div class="eq-section"><div class="eq-section-title">Notes</div><div class="eq-notes">' + h.household_notes + '</div></div>';
    }
    if (h.equipment && h.equipment.length) {
      sysHtml += '<div class="eq-section"><div class="eq-section-title">Equipment</div><div id="cv-eq-rooms"></div></div>';
    }
    if (!sysHtml) sysHtml = '<div class="eq-notes" style="font-style:italic;">No system info on file yet.</div>';

    // Andi remembers is its own rail tab now (mirrors the household detail split).
    var factFields = [
      { label: 'WiFi network', value: h.wifi_network },
      { label: 'WiFi password', value: h.wifi_password },
      { label: 'Garage code', value: h.garage_code },
      { label: 'Security manager', value: h.security_manager_name }
    ].filter(function(f) { return f.value && f.value !== 'Unknown'; });
    var andiHtml = factFields.length
      ? '<div class="eq-section"><div class="eq-section-title">Andi remembers</div>' + factFields.map(function(f) {
          return '<div class="eq-row"><span class="eq-label">' + f.label + '</span><span class="eq-value">' + esc(f.value) + '</span></div>';
        }).join('') + '</div>'
      : '<div class="eq-notes" style="font-style:italic;">No Andi facts on file yet.</div>';

    var photosHtml = '<div class="eq-section"><div class="eq-section-title">Photos</div><div id="photo-grid-container"><div style="color:var(--ink-soft);font-size:0.75rem;">Loading photos...</div></div></div>';

    // Files tab (rail): per-household document list (sales order + uploads), not Photos.
    var filesHtml = '<div class="eq-section"><div class="eq-section-title">Files</div>' +
      '<div id="cv-docs-list"><div style="color:var(--ink-soft);font-size:0.75rem;">Loading documents...</div></div>' +
      '<label class="doc-add-btn">+ Add document<input type="file" style="display:none;" onchange="pickDocument(this,' + (h.id || 'null') + ',\'cv-docs-list\')"></label>' +
      '</div>';

    // People tab (rail): read-only roster, name + role + number (copy) + text. No editing.
    var peopleHtml;
    if (h.people && h.people.length) {
      peopleHtml = '<div class="eq-section"><div class="eq-section-title">People</div>' +
        h.people.map(function(p) {
          var nm = ((p.first_name || '') + ' ' + (p.last_name || '')).trim() || 'Unnamed';
          var role = p.client_type ? '<span class="cv-person-role">' + esc(p.client_type) + '</span>' : '';
          var hasPhone = !!p.phone_number;
          var pf = hasPhone ? fmtPhone(p.phone_number) : '';
          var status = p.opt_in_status || 'pending';
          var num = hasPhone
            ? '<a class="hd-tel" href="tel:' + esc(p.phone_number) + '">' + esc(pf) + '</a>' +
              '<button class="hd-copy" title="Copy number" onclick="copyToClip(\'' + pf + '\',this)">&#10697;</button>'
            : '<span style="color:var(--ink-soft);font-size:0.74rem;">No phone on file</span>';
          var textBtn = (hasPhone && status === 'opted_in')
            ? '<button class="hd-mini" onclick="textPerson(\'' + encodeURIComponent(p.phone_number) + '\',\'' + pf + '\')">Text</button>'
            : (hasPhone ? '<button class="hd-mini" disabled title="This number has not opted in yet">Text</button>' : '');
          // v1.61.0: the address under the number, quiet, and only when there is one. A person with
          // an email and no phone now reads as reachable instead of only No phone on file.
          var em = p.email
            ? '<div class="cv-person-bot cv-person-email"><a class="hd-tel" href="mailto:' + esc(p.email) + '">' + esc(p.email) + '</a>' +
              '<button class="hd-copy" title="Copy email" onclick="copyToClip(\'' + esc(p.email) + '\',this)">&#10697;</button></div>'
            : '';
          return '<div class="cv-person">' +
            '<div class="cv-person-top"><span class="cv-person-name">' + esc(nm) + '</span>' + role + '</div>' +
            '<div class="cv-person-bot">' + num + textBtn + '</div>' +
            em +
          '</div>';
        }).join('') + '</div>';
    } else {
      peopleHtml = '<div class="eq-section"><div class="eq-section-title">People</div><div class="eq-notes" style="font-style:italic;">No people on file yet.</div></div>';
    }

    var active = ['system','people','activity','photos','files','andi'].indexOf(_cvTab) !== -1 ? _cvTab : 'system';
    var tabsEl = document.createElement('div');
    tabsEl.innerHTML =
      '<div class="hd-tabs cv-tabs">' +
        '<button class="hd-tab' + (active==='system'?' active':'') + '" data-tab="system" onclick="cvTab(\'system\')">System</button>' +
        '<button class="hd-tab' + (active==='people'?' active':'') + '" data-tab="people" onclick="cvTab(\'people\')">People</button>' +
        '<button class="hd-tab' + (active==='activity'?' active':'') + '" data-tab="activity" onclick="cvTab(\'activity\')">Activity</button>' +
        '<button class="hd-tab' + (active==='photos'?' active':'') + '" data-tab="photos" onclick="cvTab(\'photos\')">Photos</button>' +
        '<button class="hd-tab' + (active==='files'?' active':'') + '" data-tab="files" onclick="cvTab(\'files\')">Files</button>' +
        '<button class="hd-tab' + (active==='andi'?' active':'') + '" data-tab="andi" onclick="cvTab(\'andi\')">Andi</button>' +
      '</div>' +
      '<div class="hd-tabpanel' + (active==='system'?' active':'') + '" id="cvtab-system">' + sysHtml + '</div>' +
      '<div class="hd-tabpanel' + (active==='people'?' active':'') + '" id="cvtab-people">' + peopleHtml + '</div>' +
      '<div class="hd-tabpanel' + (active==='activity'?' active':'') + '" id="cvtab-activity"><div class="eq-notes" style="font-style:italic;">Loading...</div></div>' +
      '<div class="hd-tabpanel' + (active==='photos'?' active':'') + '" id="cvtab-photos">' + photosHtml + '</div>' +
      '<div class="hd-tabpanel' + (active==='files'?' active':'') + '" id="cvtab-files">' + filesHtml + '</div>' +
      '<div class="hd-tabpanel' + (active==='andi'?' active':'') + '" id="cvtab-andi">' + andiHtml + '</div>';
    while (tabsEl.firstChild) body.appendChild(tabsEl.firstChild);
    _cvTab = active;

    // Photo upload control inside the Photos tab.
    var photoSection = document.querySelector('#cvtab-photos .eq-section');
    var uploadLabel = document.createElement('label');
    uploadLabel.className = 'photo-upload-btn';
    uploadLabel.textContent = '+ Add Photo';
    var uploadInput = document.createElement('input');
    uploadInput.type = 'file';
    uploadInput.accept = 'image/*';
    uploadInput.style.display = 'none';
    uploadInput.addEventListener('change', function() { uploadPhoto(this, phone); });
    uploadLabel.insertBefore(uploadInput, uploadLabel.firstChild);
    photoSection.appendChild(uploadLabel);

    loadConvContext(phone, document.getElementById('cvtab-activity'));
    loadPhotos(phone);
    if (h.equipment && h.equipment.length) cvEqRender(h.equipment, 'cv-eq-rooms');
    loadDocs(h.id, 'cv-docs-list');
  } catch (err) {
    body.innerHTML = '<div style="color:var(--ink-soft);font-size:0.78rem;">Could not load system info.</div>';
  }
}

// Conversation rail context (item 6): Andi's read pins above the tabs; tickets and follow ups
// fill the Activity tab. Tickets jump to the ticket. Capture-only data, shown lightly.
async function loadConvContext(phone, container) {
  if (!container) return;
  try {
    var res = await rwFetch('/api/conversations/' + encodeURIComponent(phone) + '/context');
    if (!res.ok) { container.innerHTML = ''; return; }
    var ctx = await res.json();
    window._ctxHouseholdId = ctx.household_id || (ctx.household && ctx.household.id) || null;
    window._ctxHouseholdName = (ctx.household && ctx.household.name) || null;
    var c = ctx.client || null;
    // v1.17.0: no person owns this number yet (client-texts-first). Offer the one-shot attach.
    // If the orphan phone row already points at a household, the modal preselects it.
    // v1.21.1: the attach button lives in the Household rail section now (natural home per
    // Andy), not the thread header. The header slot stays for layout but renders nothing.
    var atSlot = document.getElementById('attach-slot');
    if (atSlot) atSlot.innerHTML = '';
    window._attachPreselect = (!c && ctx.household) ? ctx.household : null;
    var tickets = ctx.tickets || [];
    var fus = ctx.follow_ups || [];

    // Pinned read.
    var readEl = document.getElementById('conv-read');
    if (readEl) {
      var readHtml = '';
      // v1.21.1: an unattached number (no person owns it) gets the attach button here in the
      // Household rail, covering the orphan-with-household case the empty state cannot.
      if (!c) {
        readHtml += '<div class="eq-section"><div class="eq-section-title">Not on file</div>' +
          '<div style="font-size:0.78rem;color:var(--ink-soft);margin-bottom:0.5rem;">No person owns this number yet.</div>' +
          '<button class="attach-btn" onclick="openAttach()">+ Add to household</button></div>';
      }
      if (c && (c.self_sufficiency || c.difficulty || c.comm_voice || c.profile_notes)) {
        var bits = [];
        if (c.self_sufficiency) bits.push('capability ' + c.self_sufficiency + '/5');
        if (c.difficulty) bits.push('difficulty ' + c.difficulty + '/5');
        var who = c.profile_updated_by && c.profile_updated_by !== 'Andi' ? esc(c.profile_updated_by) + "'s read" : "Andi's read";
        readHtml += '<div class="eq-section"><div class="eq-section-title">' + who + '</div>';
        if (bits.length) readHtml += '<div class="conv-read-scores">' + bits.join(' · ') + '</div>';
        if (c.comm_voice) readHtml += '<div class="conv-read-voice">"' + esc(c.comm_voice) + '"</div>';
        if (c.profile_notes) readHtml += '<div class="eq-notes">' + esc(c.profile_notes) + '</div>';
        readHtml += '</div>';
      }
      readEl.innerHTML = readHtml;
    }

    // Activity tab.
    var html = '<div class="eq-section"><div class="eq-section-title">Tickets</div>';
    if (!tickets.length) {
      html += '<div class="eq-notes" style="font-style:italic;">No tickets on this home yet.</div>';
    } else {
      tickets.forEach(function(t) {
        var label = fmtTicketLabel(t) || (t.summary || 'Ticket');
        if (label.length > 38) label = label.slice(0, 38).trim() + '...';
        var date = '';
        try { date = new Date(t.opened_at).toLocaleDateString('en-US', {month:'short', day:'numeric'}); } catch(e) {}
        var st = t.status || 'open';
        var dot = st === 'resolved' ? 'ow-resolved' : (st === 'scheduled' ? 'ow-scheduled' : 'ow-open');
        html += '<div class="conv-ticket-wrap">' +
          '<div class="conv-ticket-line" onclick="cvToggleTicket(this)">' +
            '<span class="ctl-status ' + dot + '"></span>' +
            // v1.74.0: the ticket NUMBER, in the household rail list. Andy, Sept 5: "in picture
            // we should have ticket number in the tickets." It is the same reasoning as v1.60.9
            // putting the number on the ticket LIST: this house has two Master Bed Shade rows
            // and three shade tickets, so the label alone cannot name one out loud. Quiet and
            // tabular so the labels still line up down the column, and it is what Andi now
            // speaks to the client too, so the rail and the text agree.
            '<span class="ctl-num">' + t.id + '</span>' +
            '<span class="ctl-label">' + esc(label) + '</span>' +
            (date ? '<span class="ctl-date">' + esc(date) + '</span>' : '') +
            '<span class="ctl-caret">▸</span>' +
          '</div>' +
          '<div class="conv-ticket-detail" style="display:none;">' + ticketGlanceHtml(t) + '</div>' +
          '</div>';
      });
    }
    html += '</div>';

    if (fus.length) {
      html += '<div class="eq-section"><div class="eq-section-title">Open follow ups</div>';
      fus.forEach(function(f) {
        html += '<div class="conv-ow static">' +
          '<span class="ow-pill ow-followup">Follow up</span>' +
          (f.type ? '<span class="ow-type">' + esc(f.type) + '</span>' : '') +
          '<div class="ow-title">' + esc(f.note || 'Follow up') + '</div>' +
          (f.due_date ? '<div class="ow-sub">Due ' + esc(fmtDueDate(f.due_date)) + '</div>' : '') +
          '</div>';
      });
      html += '</div>';
    }
    container.innerHTML = html;
  } catch (e) {}
}

async function loadPhotos(phone) {
  var container = document.getElementById('photo-grid-container');
  if (!container) return;
  try {
    var res = await rwFetch('/api/household-by-phone/photos?phone=' + encodeURIComponent(phone));
    if (!res.ok) { container.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;font-style:italic;">No photos yet.</div>'; return; }
    var photos = await res.json();
    if (!photos.length) { container.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;font-style:italic;">No photos yet.</div>'; return; }
    container.innerHTML = '';
    var grid = document.createElement('div');
    grid.className = 'photo-grid';
    photos.forEach(function(p) {
      var thumb = document.createElement('div');
      thumb.className = 'photo-thumb';
      var img = document.createElement('img');
      img.src = p.url;
      img.alt = p.filename;
      img.loading = 'lazy';
      thumb.appendChild(img);
      thumb.addEventListener('click', function() { openLightbox(p.url); });
      grid.appendChild(thumb);
    });
    container.appendChild(grid);
  } catch(err) {
    container.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;">Could not load photos.</div>';
  }
}

// v1.42.0 ── Documents (Files tab, shared by the rail and household detail) ──
function openDocUrl(el){ var u = el.getAttribute('data-url'); if (u) window.open(u, '_blank'); }
function docRowHtml(d, hid, listId){
  var lbl = d.label || d.filename || 'Document';
  var fn = d.filename || '';
  var dt = ''; try { dt = new Date(d.uploaded_at).toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'}); } catch(e) {}
  var isPdf = (d.mime_type === 'application/pdf') || /\.pdf$/i.test(fn);
  var safeUrl = String(d.url || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;');
  var sub = esc(fn) + (dt ? ' · ' + dt : '');
  return '<div class="doc-row">' +
    '<span class="doc-icon' + (isPdf ? ' pdf' : '') + '">' + (isPdf ? 'PDF' : 'FILE') + '</span>' +
    '<div class="doc-meta" data-url="' + safeUrl + '" onclick="openDocUrl(this)">' +
      '<div class="doc-label">' + esc(lbl) + '</div>' +
      '<div class="doc-file">' + sub + '</div>' +
    '</div>' +
    '<button class="doc-del" title="Delete document" onclick="deleteDoc(' + hid + ',' + d.id + ',\'' + listId + '\')">&#10005;</button>' +
  '</div>';
}
async function loadDocs(hid, listId){
  var c = document.getElementById(listId); if (!c) return;
  if (!hid) { c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;font-style:italic;">No household on file yet.</div>'; return; }
  try {
    var res = await rwFetch('/api/households/' + hid + '/files');
    if (!res.ok) { c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;">Could not load documents.</div>'; return; }
    var docs = await res.json();
    if (!docs.length) { c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;font-style:italic;">No documents yet.</div>'; return; }
    c.innerHTML = docs.map(function(d){ return docRowHtml(d, hid, listId); }).join('');
  } catch(e) { c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;">Could not load documents.</div>'; }
}
async function pickDocument(input, hid, listId){
  var file = input.files && input.files[0]; input.value = '';
  if (!file) return;
  if (!hid) { alert('No household is on file for this number yet.'); return; }
  var label = prompt('Label for this document', file.name.replace(/\.[^.]+$/, ''));
  if (label === null) return;
  label = (label || '').trim();
  var c = document.getElementById(listId);
  if (c) c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;">Uploading...</div>';
  var fileId = null;
  try {
    var fd = new FormData(); fd.append('file', file, file.name); fd.append('label', label);
    var res = await rwFetch('/api/households/' + hid + '/files', { method: 'POST', body: fd });
    if (!res.ok) { alert('Upload failed.'); loadDocs(hid, listId); return; }
    try { var jr = await res.json(); fileId = (jr && jr.id) ? jr.id : null; } catch(e){}
  } catch(e) { alert('Upload error.'); loadDocs(hid, listId); return; }
  loadDocs(hid, listId);
  // v1.46.0 (slice 3b): let Andi classify the just-uploaded document and, if it is an equipment
  // list, offer to build the room-by-room record from it. Best effort: any failure leaves the
  // document simply filed, exactly as before.
  try { await docClassifyAndMaybeBuild(file, hid, fileId, label, listId); } catch(e){ console.error('[doc classify]', e); }
}
function docIsPdf(file){ return !!file && ( /pdf$/i.test(file.type || '') || /\.pdf$/i.test(file.name || '') ); }
// v1.46.0 (slice 3b): classify an uploaded document via Andi; if it is an equipment list, offer to
// build from it and import with provenance to THIS file. Drawings/designs ("show") and anything else
// ("file") are left filed as reference. Reuses the existing in-browser parser (eqExtractLayout/eqParse/
// eqToRows). One extract pass feeds both the classifier (as text) and, on a yes, the parser.
async function docClassifyAndMaybeBuild(file, hid, fileId, label, listId){
  if (!docIsPdf(file)) return; // only PDFs are classified/parsed for now; everything else is just filed
  var c = document.getElementById(listId);
  var lines;
  try { lines = await eqExtractLayout(file); }
  catch(e){ return; } // unreadable PDF: leave it filed
  var text = lines.map(function(l){ return l.text; }).join('\n');
  if (!text.trim()) return;
  var cls;
  try {
    var r = await rwFetch('/api/households/' + hid + '/classify-document', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ text:text, filename:file.name })
    });
    cls = await r.json();
  } catch(e){ return; } // classify failed: leave it filed
  if (!cls || cls.role !== 'parse') return; // "show"/"file": reference or other, nothing to build

  // It looks like an equipment list. Offer to build, and flag a wrong-house drop first.
  var hhName = (typeof _hd !== 'undefined' && _hd && _hd.id === hid && _hd.name) ? _hd.name : '';
  var warn = '';
  if (cls.name_match === 'mismatch' || cls.address_match === 'mismatch'){
    warn = 'Heads up: this document looks like it is for ' +
      (cls.detected_client || 'another client') +
      (cls.detected_address ? ' at ' + cls.detected_address : '') +
      (hhName ? ', not ' + hhName : ', not this household') + '.\n\n';
  }
  var msg = warn + 'Andi sees this looks like an equipment list' +
    (cls.doc_type ? ' (' + cls.doc_type + ')' : '') +
    '. Build the room by room equipment record for this household from it?';
  if (!confirm(msg)) return;

  if (c) c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;">Building equipment record...</div>';
  try {
    var parsed = eqParse(lines);
    var rows = eqToRows(parsed);
    if (!rows.length){ alert('Andi could not find equipment lines to build from.'); loadDocs(hid, listId); return; }
    var ir = await rwFetch('/api/households/' + hid + '/equipment/import', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ rows:rows, systems:parsed.systems, source:'sales_order',
                             source_doc_id:fileId, source_label:(label || file.name) })
    });
    if (!ir.ok){ alert('Build failed.'); loadDocs(hid, listId); return; }
    // Overwrite the System Types fields from the parse (same as the System-tab import path).
    var named = eqNamedSystems(parsed); var fields = {};
    if(named.control!==undefined) fields.control_system_type=named.control;
    if(named.lighting!==undefined) fields.lighting_system_type=named.lighting;
    if(named.network!==undefined) fields.network_tier=named.network;
    if(named.security!==undefined) fields.lock_system_type=named.security;
    if(named.cameras!==undefined) fields.camera_system_type=named.cameras;
    if(Object.keys(fields).length){ try{ await rwFetch('/api/households/'+hid,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(fields)}); }catch(e){} }
    // NOTE: no separate sales_order_source copy is stored here. The document already lives in Files and
    // the equipment is linked to it by source_doc_id, so we avoid the duplicate-document listing.
    loadDocs(hid, listId);
    if (typeof _hd !== 'undefined' && _hd && _hd.id === hid && typeof openHouseholdDetail === 'function') {
      openHouseholdDetail(hid);
    } else {
      alert(rows.length + ' equipment lines built from ' + (label || file.name) + '.');
    }
  } catch(e){ console.error('[doc build]', e); alert('Build failed: ' + (e.message || 'error')); loadDocs(hid, listId); }
}
async function deleteDoc(hid, fileId, listId){
  // v1.47.0: count what this document built so the confirm tells the user exactly what goes.
  var rooms = 0, devices = 0;
  try {
    var br = await rwFetch('/api/households/' + hid + '/files/' + fileId + '/built');
    if (br.ok) { var bj = await br.json(); rooms = bj.rooms || 0; devices = bj.devices || 0; }
  } catch(e){}
  var msg = (rooms || devices)
    ? 'This document built ' + rooms + ' room' + (rooms===1?'':'s') + ' and ' + devices + ' device' + (devices===1?'':'s') +
      '. Delete the document and everything it built? This cannot be undone.'
    : 'Delete this document? This cannot be undone.';
  if (!confirm(msg)) return;
  try {
    var res = await rwFetch('/api/households/' + hid + '/files/' + fileId, { method: 'DELETE' });
    if (!res.ok) alert('Delete failed.');
  } catch(e) { alert('Delete error.'); }
  loadDocs(hid, listId);
  if (typeof _hd !== 'undefined' && _hd && _hd.id === hid && typeof openHouseholdDetail === 'function') openHouseholdDetail(hid);
}

// v1.42.0 ── Equipment in the conversation rail (item 6, read only, slim) ──
function cvEqDevLineRO(r){
  var nm = ((r.manufacturer || '') + ' ' + (r.product_type || '')).trim() || esc((r.description || '').slice(0, 28));
  var md = r.model ? '<span class="cv-eq-md">' + esc(r.model) + '</span>' : '';
  var pos = r.position_label ? '<span class="cv-eq-pos">· ' + esc(r.position_label) + '</span>' : '';
  return '<div class="cv-eq-dev"><span class="cv-eq-q">' + (r.qty || 1) + '×</span><span class="cv-eq-nm">' + esc(nm) + '</span>' + md + pos + '</div>';
}
function cvEqRender(equipment, containerId){
  var c = document.getElementById(containerId); if (!c) return;
  var g = eqGroup(equipment);
  var all = (g.rooms || []).concat(g.house || []);
  if (!all.length) { c.innerHTML = '<div style="color:var(--ink-soft);font-size:0.75rem;font-style:italic;">No equipment on file yet.</div>'; return; }
  c.innerHTML = all.map(function(room){
    var devs = (room.devices || []).filter(function(r){ return r.category === 'equipment'; });
    var devHtml = devs.map(cvEqDevLineRO).join('') || '<div style="color:var(--ink-soft);font-size:0.72rem;">No detail.</div>';
    return '<div class="cv-eq-room">' +
      '<div class="cv-eq-roomhead" onclick="cvEqToggle(this)">' +
        '<span class="cv-eq-caret">▸</span>' +
        '<span class="cv-eq-rname">' + esc(room.label) + '</span>' +
        '<span class="cv-eq-rn">' + (eqRoomChips(room) || devs.length) + '</span>' +
      '</div>' +
      '<div class="cv-eq-devs" style="display:none;">' + devHtml + '</div>' +
    '</div>';
  }).join('');
}
function cvEqToggle(el){
  var devs = el.parentNode.querySelector('.cv-eq-devs');
  var car = el.querySelector('.cv-eq-caret');
  if (!devs) return;
  var open = devs.style.display !== 'none';
  devs.style.display = open ? 'none' : 'block';
  if (car) car.textContent = open ? '▸' : '▾';
}

// v1.42.0 ── Ticket read-only glance in the rail (item 4) ──
// Current facts only. There is no ticket-history table, so scheduled-history and reopen-history
// timelines are not shown; editing stays in the ticket workspace via the Open link.
function cvFmtSched(s){
  if (!s) return '';
  var parts = String(s).split('T');
  var d = parts[0] || ''; var t = (parts[1] || '').slice(0, 5);
  try { var dt = new Date(d + 'T00:00'); return dt.toLocaleDateString('en-US', {month:'short', day:'numeric'}) + (t ? ' ' + t : ''); }
  catch(e) { return s; }
}
function ticketGlanceHtml(t){
  function fmtD(v){ if (!v) return ''; try { return new Date(v).toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'}); } catch(e) { return ''; } }
  var rows = '';
  function row(lbl, val){ if (!val) return; rows += '<div class="cv-tk-row"><span class="cv-tk-k">' + lbl + '</span><span class="cv-tk-v">' + val + '</span></div>'; }
  var st = t.status || 'open';
  // v1.60.9: the number leads, so the ticket the rail header and the team talk in is nameable
  // from the conversation without opening the workspace.
  row('Ticket', t.id);
  row('Status', st.charAt(0).toUpperCase() + st.slice(1));
  row('Label', esc(fmtTicketLabel(t)));
  if (t.summary && t.summary !== t.ticket_type) row('Issue', esc(t.summary));
  if (Array.isArray(t.issues) && t.issues.length) {
    t.issues.forEach(function(iss){ row('Added', esc(iss.body) + (iss.source ? ' <span style="color:var(--ink-soft);font-size:0.7rem;">(' + esc(iss.source) + ')</span>' : '')); });
  }
  if (t.opened_at) row('Opened', fmtD(t.opened_at));
  if (t.scheduled_at) row('Scheduled', esc(cvFmtSched(t.scheduled_at)));
  if (t.assignee_name) row('Assigned', esc(t.assignee_name));
  if (st === 'resolved') {
    if (t.resolved_by) row('Resolved by', esc(t.resolved_by));
    if (t.closed_at) row('Resolved', fmtD(t.closed_at));
    if (t.resolution_note) rows += '<div class="cv-tk-res"><span class="cv-tk-k">What fixed it</span><div class="cv-tk-resnote">' + esc(t.resolution_note) + '</div></div>';
  }
  rows += '<a class="cv-tk-open" onclick="goToTicket(' + t.id + ')">Open in workspace to edit</a>';
  return rows;
}
function cvToggleTicket(el){
  var detail = el.parentNode.querySelector('.conv-ticket-detail');
  var car = el.querySelector('.ctl-caret');
  if (!detail) return;
  var open = detail.style.display !== 'none';
  detail.style.display = open ? 'none' : 'block';
  if (car) car.textContent = open ? '▸' : '▾';
}

async function uploadPhoto(input, phone) {
  var file = input.files[0];
  if (!file) return;
  var label = input.parentElement;
  label.textContent = 'Uploading...';
  var formData = new FormData();
  formData.append('photo', file);
  try {
    var token = localStorage.getItem('rw-token');
    var headers = {};
    if (token) headers['Authorization'] = 'Bearer ' + token;
    var res = await fetch(PORTAL_URL + '/api/household-by-phone/photos?phone=' + encodeURIComponent(phone), {
      method: 'POST', headers: headers, credentials: 'include', body: formData
    });
    if (res.ok) {
      label.textContent = '+ Add Photo';
      var newInp = document.createElement('input');
      newInp.type = 'file'; newInp.accept = 'image/*'; newInp.style.display = 'none';
      newInp.addEventListener('change', function() { uploadPhoto(this, phone); });
      label.insertBefore(newInp, label.firstChild);
      loadPhotos(phone);
    } else {
      label.textContent = 'Upload failed. Try again.';
    }
  } catch(err) {
    label.textContent = 'Upload failed. Try again.';
  }
}

function openLightbox(url) {
  var lb = document.createElement('div');
  lb.className = 'photo-lightbox';
  lb.innerHTML = '<img src="' + url + '" />';
  lb.addEventListener('click', function() { lb.remove(); });
  document.body.appendChild(lb);
}
// v1.59.0: one delegated listener opens any thread MMS photo in the lightbox. Delegation
// survives every innerHTML rebuild (thread reloads, SSE soft reloads, ticket threads).
document.addEventListener('click', function(e) {
  if (e.target && e.target.classList && e.target.classList.contains('sms-photo')) {
    openLightbox(e.target.src);
  }
});

// ── NAV ──────────────────────────────────────────────────────────────────────
var panelTitles = { dashboard:'Dashboard',myandi:'My Andi',conversations:'Conversations',resolved:'Resolved',tickets:'Tickets',followups:'Follow Ups',households:'Households',proactive:'Proactive Outreach',analytics:'Analytics',settings:'Settings',flagged:'Flagged for Andi' };
// v1.94.0: ROLES. What the signed in teammate may change comes from the portal: the permissions on their role (Owner,
// Manager, Member). An older portal sends none, and then only an owner may, exactly as before.
function rwCan(p) { var u = window._rwUser; if (!u) return false; if (Array.isArray(u.permissions)) return u.permissions.indexOf(p) >= 0; return u.role === 'owner'; }
function rwSeesAll() { var u = window._rwUser; return !!u && (u.role === 'owner' || u.role === 'manager'); }
function rwRoleLabel(u) { return (u && u.role_label) || (u && u.role === 'owner' ? 'Owner' : (u && u.role === 'manager' ? 'Manager' : 'Member')); }
function navItem(name) { return document.querySelector('[onclick="nav(\'' + name + '\',this)"]'); }
// ── UNIVERSAL BACK ───────────────────────────────────────────────────────────
// One back stack for the whole app. Entering any detail (from a list or via a cross jump) records
// where you were; goBack returns there. Back is only ever shown inside a detail view, so the stack
// always has the origin that opened it. Empty stack falls back to the active panel's list.
var _backStack = [];
function isShown(id) { var e = document.getElementById(id); return e && e.style.display !== 'none'; }
function panelIsActive(name) { var p = document.getElementById('panel-' + name); return !!(p && p.classList.contains('active')); }
function currentViewOrList() {
  // A detail view only counts as the current view when its OWNING panel is active. A household
  // detail left display:block under an inactive panel was poisoning this (Back from a conversation
  // landed on the stale household People view); the panel guard fixes it.
  if (panelIsActive('conversations') && window._currentPhone && isShown('conv-detail-view')) return { kind:'conversation', phone: window._currentPhone, name: window._currentName };
  if (panelIsActive('tickets') && window._openTicketId != null && isShown('ticket-detail-view')) return { kind:'ticket', id: window._openTicketId };
  if (panelIsActive('households') && typeof _hd !== 'undefined' && _hd && _hd.id && isShown('hh-detail-view')) return { kind:'household', id: _hd.id };
  var active = document.querySelector('.panel.active');
  var panel = active ? active.id.replace('panel-', '') : 'conversations';
  return { kind:'list', panel: panel };
}
// v1.20.0: the stack never accepts a consecutive duplicate, and a wrapper never records an
// origin equal to its own destination (a self-refresh). Three household refresh paths were
// pushing the household onto its own stack, so Back popped you right back where you stood,
// once per save (the "back goes to household instead of the list" report).
function sameNav(a, b) {
  if (!a || !b || a.kind !== b.kind) return false;
  if (a.kind === 'list') return a.panel === b.panel;
  if (a.kind === 'conversation') return a.phone === b.phone;
  return a.id === b.id;
}
function pushBack(d) {
  if (!d) return;
  var top = _backStack[_backStack.length - 1];
  if (top && sameNav(top, d)) return;
  _backStack.push(d);
}
// v1.96.0 (Andy, Oct 17): THE MOUSE BACK BUTTON. The browser's history holds the Back arrow's steps. Every entry this
// dashboard writes carries the screen it shows (view) and the arrow's stack as it stood on that screen (rwStack). A step
// first stamps the entry you are leaving with the screen you were on, then adds an entry for where you went. Browser
// Back or Forward lands on an entry, and that entry alone decides what you see and what the arrow holds, so a reload, a
// long press jump or a quick double press can never leave the two out of step. The arrow goes through history.back()
// whenever this entry's stack is the arrow's stack, so arrow and mouse use up the same step. An entry with no stamp
// (written before 1.96.0 or by a page load that never took a step) closes to the list, like the arrow with nothing
// recorded. Review pass: the first build kept only a depth, and after a reload Back opened screens out of order.
var _histOn = !!(window.history && typeof history.pushState === 'function' && typeof history.replaceState === 'function');
var _navSeq = 0;
function navCopy(d) {
  if (!d) return null;
  var c = { kind: d.kind, panel: d.panel, phone: d.phone, name: d.name, id: d.id };
  // v1.97.2: what the screen looked like (tab, Learned Resolutions open, scroll, searches and list filters)
  ['tab', 'mf', 'y', 'cq', 'hq', 'cv'].forEach(function(k) { if (d[k] !== undefined) c[k] = d[k]; });
  if (d.tk) c.tk = { status: d.tk.status, mine: d.tk.mine, group: d.tk.group };
  return c;
}
function stackCopy(s) { return (s || []).map(navCopy); }
// Review pass 2: every stamp names the signed in teammate, so after a sign out and a sign in as someone else, Back
// never opens the last person's tickets or houses. The screen a fresh load shows is stamped once the app is up.
function histUser() { return window._rwUserId || null; }
// Each entry also carries its own position (i), so a popup closed on Back moves the browser exactly back to the entry
// it sat on (review gate: two entries can hold stacks of the same length).
function histPos() { var s = history.state; return (s && typeof s.i === 'number') ? s.i : history.length - 1; }
function histStamped() { var s = history.state; return !!(s && Array.isArray(s.rwStack) && s.u === histUser()); }
// Review pass 3: Chrome skips, on Back, any entry a page adds when nobody just clicked or tapped. So a step only becomes
// a browser history entry when a person made it (navigator.userActivation.isActive). A step nobody tapped (a ticket
// link opening, a push tap arriving) lives on the entry already showing, marked soft: the arrow still steps back
// through it, and the mouse Back leaves it the way Chrome would anyway. Browsers without userActivation push as before.
function recordStep(origin, dest) {
  var before = _backStack.length, prior = stackCopy(_backStack);
  pushBack(origin);
  if (!_histOn || _backStack.length === before) return;
  var ua = window.navigator.userActivation;
  try {
    var at = histPos();
    if (!ua || ua.isActive) {
      history.replaceState({ rwStack: prior, view: fullView(origin), u: histUser(), i: at }, '', location.href);
      history.pushState({ rwStack: stackCopy(_backStack), view: navCopy(dest), u: histUser(), i: at + 1 }, '', location.href);
    } else {
      history.replaceState({ rwStack: stackCopy(_backStack), view: navCopy(dest), u: histUser(), soft: true, i: at }, '', location.href);
    }
    _shownState = history.state;
  } catch (e) {}
}
function stampLoadedScreen() {
  if (!_histOn) return;
  try { history.replaceState({ rwStack: stackCopy(_backStack), view: fullView(currentViewOrList()), u: histUser(), i: histPos() }, '', location.href); _shownState = history.state; } catch (e) {}
}
// Review pass 2: Back with a popup or a drawer open closes it and stays put, the way a phone's Back does. Each popup
// closes through its own close handler. The browser has already moved one entry, so the dashboard moves it straight
// back with history.go (never a new entry, which Chrome could skip) and ignores the popstate that brings.
function closeOpenPopups() {
  var closed = false;
  // The setup wizard is never dismissed by Back (review pass 3): it is the owner's first sign in.
  document.querySelectorAll('.wiz-overlay.show').forEach(function(o) { if (o.id === 'wiz-overlay') return; try { o.click(); } catch (e) {} if (!o.classList.contains('show') || !document.body.contains(o)) closed = true; });
  // The equipment popups close through their own handlers, so a changed match list reloads as it does on Done.
  var eqClose = { 'eq-edit-modal': 'eqCloseModal', 'eq-room-modal': 'eqCloseRoomModal', 'eq-roomedit-modal': 'eqCloseRoomEdit', 'eq-match-modal': 'eqCloseMatches' };
  document.querySelectorAll('.eq-modal-bg.show').forEach(function(o) { var f = window[eqClose[o.id]]; try { if (typeof f === 'function') f(); else o.classList.remove('show'); } catch (e) { o.classList.remove('show'); } closed = true; });
  document.querySelectorAll('.photo-lightbox').forEach(function(o) { o.remove(); closed = true; });
  ['m-nav-open', 'm-rail-open'].forEach(function(c) { if (document.body.classList.contains(c)) { document.body.classList.remove(c); closed = true; } });
  return closed;
}
var _shownState = null, _ignorePops = 0;
function applyNav(d) {
  _navSeq++;
  if (!d) { closeConv(); closeTicket(); backToHouseholds(); return; }
  // v1.97.2: a step that only changed a tab, Learned Resolutions or the scroll stays on the screen it is on
  var same = sameNav(currentViewOrList(), d);
  if (same) {}
  else if (d.kind === 'list') { var el = document.querySelector('.nav-item[onclick*="' + d.panel + '"]'); nav(d.panel, el); }
  else if (d.kind === 'conversation') { var ce = document.querySelector('.nav-item[onclick*="conversations"]'); nav('conversations', ce); openRealConv(d.phone, d.name); }
  else if (d.kind === 'ticket') { navToTicket(d.id); }
  else if (d.kind === 'household') { navToHousehold(d.id); }
  restoreExtras(d, _navSeq);
}
// ── v1.97.2 GLOBAL BACK (Andy, Oct 18) ──
// The mouse and browser Back walk back through every move. A move the Back arrow never counted (a sidebar section, a
// tab inside a page, Learned Resolutions) becomes a browser entry of its own, marked mo (mouse only), carrying the
// arrow's stack unchanged, so the arrow keeps exactly its old job. Each entry is restamped with how its screen looked
// (tab, scroll, searches, filters) at the moment you leave it, and Back puts all of that back. Steps are only ever
// recorded from a person's own click (Chrome skips entries nobody tapped), never while Back itself is putting a screen
// back (_rwApplying).
var _rwApplying = false;
// The dashboard puts the scroll back itself, once the list has loaded; the browser's own restore fires too early.
try { if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; } catch (e) {}
function viewExtras(base) {
  var x = { y: Math.round(window.scrollY || window.pageYOffset || 0) };
  if (base && base.kind === 'list' && base.panel === 'settings') { var st = document.querySelector('#settings-body .set-tabs .hd-tab.active'); if (st) x.tab = st.getAttribute('data-settab'); }
  if (base && base.kind === 'household' && typeof _hdTab !== 'undefined') x.tab = _hdTab;
  if (base && base.kind === 'conversation' && typeof _cvTab !== 'undefined') x.tab = _cvTab;
  if (base && base.kind === 'list' && base.panel === 'myandi') { var f = document.getElementById('ma-fixes'); x.mf = !!(f && f.style.display !== 'none'); }
  var cs = document.getElementById('conv-search'); if (cs) x.cq = cs.value || '';
  var hs = document.getElementById('hh-search'); if (hs) x.hq = hs.value || '';
  if (typeof _convView !== 'undefined') x.cv = _convView;
  if (typeof _tkFilter !== 'undefined' && _tkFilter) x.tk = _tkFilter;
  return x;
}
function fullView(base) { var v = navCopy(base); if (!v) return v; var x = viewExtras(base); for (var k in x) v[k] = x[k]; return navCopy(v); }
function mouseStep(dest) {
  if (!_histOn || _rwApplying) return;
  var ua = window.navigator.userActivation;
  if (ua && !ua.isActive) return;
  try {
    var s = history.state || {}, at = histPos();
    var here = Object.assign({}, s, { rwStack: (Array.isArray(s.rwStack) && s.u === histUser()) ? s.rwStack : stackCopy(_backStack), view: fullView(currentViewOrList()), u: histUser(), i: at });
    history.replaceState(here, '', location.href);
    history.pushState({ rwStack: stackCopy(_backStack), view: navCopy(dest), u: histUser(), i: at + 1, mo: true }, '', location.href);
    _shownState = history.state;
  } catch (e) {}
}
function whenReady(test, act, seq, ms, always) {
  var t0 = Date.now();
  (function tick() {
    if (seq !== _navSeq) return;
    var ok = false; try { ok = !!test(); } catch (e) {}
    if (ok || Date.now() - t0 > (ms || 3000)) {
      if (ok || always) { _rwApplying = true; try { act(); } catch (e) {} _rwApplying = false; }
      return;
    }
    setTimeout(tick, 60);
  })();
}
function restoreExtras(d, seq) {
  if (!d) return;
  _rwApplying = true;
  try {
    if (d.cv && typeof _convView !== 'undefined' && d.cv !== _convView) { _convView = d.cv; ['active','archived','all'].forEach(function(k) { var el = document.getElementById('conv-seg-' + k); if (el) el.className = 'seg' + (k === d.cv ? ' on' : ''); }); }
    var cs = document.getElementById('conv-search'); if (cs && typeof d.cq === 'string') cs.value = d.cq;
    var hs = document.getElementById('hh-search'); if (hs && typeof d.hq === 'string') hs.value = d.hq;
    if (typeof _allThreads !== 'undefined' && _allThreads && d.kind === 'list' && d.panel === 'conversations') filterConvs(cs ? cs.value : '');
    if (typeof _households !== 'undefined' && _households && d.kind === 'list' && d.panel === 'households' && isShown('hh-list-view')) filterHouseholds(hs ? hs.value : '');
    if (d.tk && typeof _tkFilter !== 'undefined') { var tkChanged = !_tkFilter || _tkFilter.status !== d.tk.status || _tkFilter.mine !== d.tk.mine || _tkFilter.group !== d.tk.group; _tkFilter = { status: d.tk.status, mine: d.tk.mine, group: d.tk.group }; if (tkChanged && d.kind === 'list' && d.panel === 'tickets' && typeof _ticketRows !== 'undefined' && _ticketRows) renderTickets(); }
    if (d.kind === 'list' && d.panel === 'myandi') maToggleFixes(!!d.mf);
  } catch (e) {} finally { _rwApplying = false; }
  if (d.tab) {
    if (d.kind === 'list' && d.panel === 'settings') whenReady(function() { return document.querySelector('#settings-body .set-tabs .hd-tab[data-settab="' + d.tab + '"]'); }, function() { var b = document.querySelector('#settings-body .set-tabs .hd-tab[data-settab="' + d.tab + '"]'); if (b && !b.classList.contains('active')) b.click(); }, seq);
    if (d.kind === 'household') whenReady(function() { return typeof _hd !== 'undefined' && _hd && _hd.id === d.id && document.querySelector('#hd-body .hd-tab[data-tab="' + d.tab + '"]'); }, function() { hdTab(d.tab); }, seq);
    if (d.kind === 'conversation') whenReady(function() { return document.querySelector('#equipment-panel-body .hd-tab[data-tab="' + d.tab + '"]'); }, function() { cvTab(d.tab); }, seq);
  }
  var y = typeof d.y === 'number' ? d.y : 0;
  whenReady(function() { return y === 0 || document.documentElement.scrollHeight >= y + window.innerHeight - 4; }, function() { window.scrollTo(0, y); }, seq, 2500, true);
}
// The clicks that are steps for the mouse Back only. Capture phase: this runs before the click's own handler, so the
// screen is recorded as it was. A click on the screen you are already on is not a step.
document.addEventListener('click', function(e) {
  if (_rwApplying || !e.isTrusted || !e.target || !e.target.closest) return;
  var t = e.target;
  var ni = t.closest('.nav-item');
  if (ni) {
    var m = /nav\('([a-z]+)'/.exec(ni.getAttribute('onclick') || '');
    if (m) { var cur = currentViewOrList(); if (!(cur.kind === 'list' && cur.panel === m[1])) mouseStep({ kind: 'list', panel: m[1] }); }
    return;
  }
  var sb = t.closest('#settings-body .set-tabs .hd-tab');
  if (sb) { var sid = sb.getAttribute('data-settab'); if (!sb.classList.contains('active')) mouseStep({ kind: 'list', panel: 'settings', tab: sid }); return; }
  var hb = t.closest('#hd-body .hd-tab');
  if (hb) { var hid = hb.getAttribute('data-tab'); if (typeof _hdTab !== 'undefined' && hid !== _hdTab && typeof _hd !== 'undefined' && _hd) mouseStep({ kind: 'household', id: _hd.id, tab: hid }); return; }
  var cb = t.closest('#equipment-panel-body .hd-tab');
  if (cb) { var cid = cb.getAttribute('data-tab'); var cc = currentViewOrList(); if (typeof _cvTab !== 'undefined' && cid !== _cvTab && cc.kind === 'conversation') mouseStep({ kind: 'conversation', phone: cc.phone, name: cc.name, tab: cid }); return; }
  if (t.closest('#ma-fixes-btn')) { var f = document.getElementById('ma-fixes'); var open = !!(f && f.style.display !== 'none'); mouseStep({ kind: 'list', panel: 'myandi', mf: !open }); }
}, true);
if (_histOn) {
  window.addEventListener('popstate', function(e) {
    if (_ignorePops > 0) { _ignorePops--; return; }
    var s = e.state;
    if (closeOpenPopups()) {
      // stay on the screen the popup sat on: move the browser back to the entry that was showing
      var from = _shownState;
      if (from && typeof from.i === 'number') {
        // an entry the dashboard never stamped sits before its first one, so the browser stepped back once
        var delta = from.i - ((s && typeof s.i === 'number') ? s.i : from.i - 1);
        if (delta !== 0) {
          _ignorePops = 1;
          setTimeout(function() { _ignorePops = 0; }, 1500);
          history.go(delta);
          return;
        }
      }
    }
    if (s && Array.isArray(s.rwStack) && s.u === histUser()) { _backStack = stackCopy(s.rwStack); _shownState = s; applyNav(s.view); }
    else { _backStack = []; _shownState = s; applyNav(null); }
  });
}
// Entry wrappers: record origin, then open. Used by list rows and cross jumps.
function enterConversation(ep, name) { var cur = currentViewOrList(), dest = { kind:'conversation', phone: ep, name: name }; if (!sameNav(cur, dest)) recordStep(cur, dest); openRealConv(ep, name); }
function enterTicket(id) { var cur = currentViewOrList(), dest = { kind:'ticket', id: id }; if (!sameNav(cur, dest)) recordStep(cur, dest); navToTicket(id); }
function enterHousehold(id) { var cur = currentViewOrList(), dest = { kind:'household', id: id }; if (!sameNav(cur, dest)) recordStep(cur, dest); navToHousehold(id); }
function navToTicket(id) {
  var el = document.querySelector('.nav-item[onclick*="tickets"]'); nav('tickets', el);
  // v1.96.0: a Back pressed while the list loads wins; the ticket does not pop open over where Back took you.
  var seq = ++_navSeq;
  loadTickets().then(function() { if (seq === _navSeq) openTicket(id); });
}
function navToHousehold(id) {
  var el = document.querySelector('.nav-item[onclick*="households"]'); nav('households', el);
  openHouseholdDetail(id);
}
function goBack() {
  // v1.96.0: when this browser entry holds the arrow's own stack, go through the browser so both use up the same step.
  // A soft step (nobody tapped it) has no entry of its own, so the arrow steps back in place and restamps this entry.
  if (_histOn && _backStack.length > 0 && histStamped() && !history.state.soft && !history.state.mo && history.state.rwStack.length === _backStack.length) { history.back(); return; }
  var d = _backStack.pop();
  applyNav(d);
  if (_histOn && histStamped()) {
    try { history.replaceState({ rwStack: stackCopy(_backStack), view: navCopy(d || currentViewOrList()), u: histUser(), soft: !!history.state.soft, mo: !!history.state.mo, i: histPos() }, '', location.href); _shownState = history.state; } catch (e) {}
  }
}

function nav(name, el) {
  document.querySelectorAll('.panel').forEach(function(p) { p.classList.remove('active'); });
  document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
  document.getElementById('panel-' + name).classList.add('active');
  if (el) el.classList.add('active');
  document.getElementById('page-title').textContent = panelTitles[name] || name;
  closeConv(); closeTicket();
  if (name === 'conversations') loadRealConversations();
  if (name === 'resolved') loadResolved();
  if (name === 'tickets') loadTickets();
  if (name === 'followups') loadFollowups();
  if (name === 'households') loadHouseholds();
  if (name === 'analytics') loadAnalytics();
  if (name === 'settings') loadSettings();
  if (name === 'flagged') loadFlags();
  if (name === 'myandi') loadMyAndi();
}

// ── DEMO CONV DATA ───────────────────────────────────────────────────────────
var convData = {
  calloway: { name:'Dave Calloway', time:'7:14 PM', status:'resolved', issue:'ELAN control and audio down after a power flicker.', andi_action:'Rebooted ELAN processor and AVR in sequence. Both systems restored.', mindset:'Client was surprised it was that simple.', thread:[
    {from:'client',text:'Hey everything went out during that storm. TV and music are both dead',time:'7:14 PM'},
    {from:'andi',text:'Got it. Can you head to your rack and find the ELAN processor?',time:'7:14 PM'},
    {from:'client',text:'Ok found it',time:'7:16 PM'},
    {from:'andi',text:'Unplug it from the wall, wait 10 seconds, plug it back in.',time:'7:16 PM'},
    {from:'client',text:'Done. TV just came on',time:'7:18 PM'},
    {from:'andi',text:'Good. Now find the black box below it for the audio. Same thing.',time:'7:18 PM'},
    {from:'client',text:'Music is back too. That was easy',time:'7:21 PM'},
    {from:'andi',text:'Good timing. Let me know if anything else comes up.',time:'7:21 PM'}
  ]},
  hartley: { name:'Marcus Hartley', time:'9:51 PM', status:'resolved', issue:'Pro Control remote not responding.', andi_action:'Confirmed dead batteries. Client replaced AAs and remote came back immediately.', mindset:'Quick fix. Client was happy.', thread:[
    {from:'client',text:'Remote stopped working',time:'9:51 PM'},
    {from:'andi',text:'Which remote? The Pro Control one on the coffee table?',time:'9:51 PM'},
    {from:'client',text:'Yes the big one',time:'9:52 PM'},
    {from:'andi',text:'Try replacing the batteries. It takes AAs.',time:'9:52 PM'},
    {from:'client',text:'That did it. Thanks',time:'9:54 PM'},
    {from:'andi',text:'Good. Let me know if it keeps happening.',time:'9:54 PM'}
  ]},
  brennan: { name:'Paula Brennan', time:'10:09 PM', status:'resolved', issue:'Smoke detector beeping.', andi_action:'Identified as high voltage ceiling detector. Client replaced battery.', mindset:'Client was relieved.', thread:[
    {from:'client',text:'Our smoke detector is going off. Is something wrong with the security system?',time:'10:09 PM'},
    {from:'andi',text:'First things first. Is everyone safe and still in the house?',time:'10:09 PM'},
    {from:'client',text:'Yes everyone is fine. It just started beeping',time:'10:10 PM'},
    {from:'andi',text:'That one is a high voltage smoke detector your electrician installed. We did not install it.',time:'10:11 PM'},
    {from:'andi',text:'A slow chirp is almost always a low battery.',time:'10:12 PM'},
    {from:'client',text:'Perfect that makes so much more sense. Thank you!',time:'10:14 PM'},
    {from:'andi',text:'Glad we got that sorted. Hope the rest of your night is quiet.',time:'10:15 PM'}
  ]},
  whitfield: { name:'Glen Whitfield', time:'8:33 PM', status:'resolved', issue:'ELAN controller offline.', andi_action:'Guided client through processor reboot. System back online in 3 minutes.', mindset:'Client was straightforward. In and out fast.', thread:[
    {from:'client',text:'Nothing is working. Remotes dead and the app is not connecting',time:'8:33 PM'},
    {from:'andi',text:'Sounds like the ELAN processor needs a reboot. Head to your equipment rack.',time:'8:33 PM'},
    {from:'client',text:'Got it',time:'8:35 PM'},
    {from:'andi',text:'Unplug it, wait 10 seconds, plug it back in.',time:'8:35 PM'},
    {from:'client',text:'All good. Everything came back',time:'8:37 PM'},
    {from:'andi',text:'Good. Let me know if it happens again.',time:'8:37 PM'}
  ]},
  ashby: { name:'Nadia Ashby', time:'11:42 PM', status:'resolved', issue:'Internet outage.', andi_action:'Walked client through modem reboot. Connectivity restored in under 4 minutes.', mindset:'Client was calm and thanked us.', thread:[
    {from:'client',text:'Hey our wifi is completely out. Nothing is working',time:'11:42 PM'},
    {from:'andi',text:'Can you head to your rack and tell me if anything looks dark?',time:'11:42 PM'},
    {from:'client',text:'Yeah the WattBox at the top has no lights at all',time:'11:44 PM'},
    {from:'andi',text:'Unplug it from the wall, wait about 10 seconds, then plug it back in.',time:'11:44 PM'},
    {from:'client',text:'Ok lights are back and wifi is working. Thank you!',time:'11:46 PM'},
    {from:'andi',text:'Good. Hope the rest of the night goes smooth.',time:'11:46 PM'}
  ]}
};

function buildConvDetail(id) {
  var d = convData[id]; if (!d) return '';
  var thread = d.thread.map(function(m) {
    var isHuman = m.from === 'human';
    var cls = m.from === 'client' ? 'sms-client' : isHuman ? 'sms-human' : 'sms-andi';
    var sender = isHuman && m.sender ? '<div class="sms-sender">' + m.sender + '</div>' : '';
    return '<div class="sms-msg ' + cls + '">' + m.text + '</div>' + sender + '<div class="sms-time' + (m.from==='client'?' right':'') + '">' + m.time + '</div>';
  }).join('');
  var resolved = d.status === 'resolved' ? '<div class="sms-resolved">&#10003; Resolved without a tech</div>' : '';
  var followup = d.follow_up ? '<div class="detail-followup"><strong>Follow up:</strong> ' + d.follow_up + '</div>' : '';
  return '<div class="detail-card"><div class="detail-header"><div><div class="detail-name">' + d.name + '</div><div class="detail-meta">' + d.time + ' &middot; ' + (d.status==='resolved'?'Resolved':'Unresolved') + '</div></div><span class="status-pill ' + (d.status==='resolved'?'pill-resolved':'pill-open') + '"><span class="pill-dot"></span>' + (d.status==='resolved'?'Resolved':'Unresolved') + '</span></div><div class="sms-thread">' + thread + resolved + '</div><div class="detail-summary"><div class="detail-row"><strong>Issue:</strong> ' + d.issue + '</div><div class="detail-row"><strong>Andi:</strong> ' + d.andi_action + '</div>' + followup + '<div class="detail-mindset">' + d.mindset + '</div></div></div>';
}

function openConv(id) {
  nav('conversations', navItem('conversations'));
  document.getElementById('conv-list-view').style.display = 'none';
  document.getElementById('conv-detail-view').style.display = 'block';
  document.getElementById('conv-detail-content').innerHTML = buildConvDetail(id);
}
function closeConv() {
  var lv = document.getElementById('conv-list-view');
  var dv = document.getElementById('conv-detail-view');
  if (lv) lv.style.display = 'block';
  if (dv) dv.style.display = 'none';
  window._currentPhone = null;
}

// ── TICKETS ──────────────────────────────────────────────────────────────────
// ── RESOLVED ─────────────────────────────────────────────────────────────────
function fmtTime(ts) {
  if (!ts) return '';
  return new Date(ts).toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' });
}
// Conversation-list stamp: today shows the time, yesterday says Yesterday, earlier this
// week shows the weekday, older shows the date (with year if it is a prior year).
function fmtConvTime(ts) {
  if (!ts) return '';
  var d = new Date(ts), now = new Date();
  if (isNaN(d)) return '';
  if (d.toDateString() === now.toDateString())
    return d.toLocaleTimeString('en-US', { hour:'numeric', minute:'2-digit' });
  var y = new Date(now); y.setDate(now.getDate() - 1);
  if (d.toDateString() === y.toDateString()) return 'Yesterday';
  var days = (now - d) / 86400000;
  if (days < 7) return d.toLocaleDateString('en-US', { weekday:'short' });
  if (d.getFullYear() === now.getFullYear())
    return d.toLocaleDateString('en-US', { month:'short', day:'numeric' });
  return d.toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' });
}
function fmtDueDate(d) {
  // Date-only formatter for due dates. Parses the YYYY-MM-DD part directly so a
  // midnight-UTC timestamp can never shift back a day in Central time.
  if (!d) return '';
  var m = String(d).match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (!m) return String(d);
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  return months[parseInt(m[2],10)-1] + ' ' + parseInt(m[3],10);
}
var _resolvedByPhone = {};
async function loadResolved() {
  var el = document.getElementById('resolved-list');
  if (el) el.innerHTML = '<div class="hh-empty">Loading...</div>';
  try {
    var res = await rwFetch('/api/resolved');
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load resolved conversations.</div>'; return; }
    var rows = await res.json();
    if (!rows.length) { el.innerHTML = '<div class="hh-empty">Nothing resolved yet. When Andi wraps up a conversation it shows here.</div>'; return; }
    _resolvedByPhone = {};
    var html = '';
    rows.forEach(function(r) {
      _resolvedByPhone[r.phone_number] = r.name;
      var enc = encodeURIComponent(r.phone_number);
      html += '<div class="res-card" onclick="openResolved(\'' + enc + '\')">' +
        '<div class="res-top"><div><div class="res-name">' + esc(r.name) + '</div>' +
        '<span class="status-pill pill-resolved" style="margin-top:0.35rem;"><span class="pill-dot"></span>Resolved</span></div>' +
        '<div class="res-time">' + esc(fmtTime(r.created_at)) + '</div></div>' +
        (r.issue ? '<div class="res-row"><strong class="ss-issue">Issue:</strong> ' + esc(r.issue) + '</div>' : '') +
        (r.andi_action ? '<div class="res-row"><strong class="ss-andi">Andi:</strong> ' + esc(r.andi_action) + '</div>' : '') +
        (r.client_mindset ? '<div class="res-mindset ss-mind">' + esc(r.client_mindset) + '</div>' : '') +
        (r.follow_up_note ? '<div class="res-row" style="margin-top:5px;"><strong class="ss-fu">Follow up:</strong> ' + esc(r.follow_up_note) + '</div>' : '') +
        '</div>';
    });
    el.innerHTML = html;
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
function openResolved(enc) {
  var phone = decodeURIComponent(enc);
  enterConversation(enc, _resolvedByPhone[phone] || phone);
}

// ── TICKETS ──────────────────────────────────────────────────────────────────
var _tickets = {};
function ticketClientName(t) {
  return (t.first_name || t.last_name) ? ((t.first_name||'')+' '+(t.last_name||'')).trim() : (t.household_name || t.client_name || fmtPhone(t.phone_number) || 'Unknown');
}

// Filter/group state. Owner defaults to the whole board grouped by assignee; a member defaults
// to just their own open work. Each can change it.
var _ticketRows = [];
var _tkFilter = null;
function tkDefaultFilter() {
  var owner = rwSeesAll();
  return { status: 'active', mine: !owner, group: false };
}
async function loadTickets() {
  closeTicket();
  var el = document.getElementById('ticket-list');
  if (el) el.innerHTML = '<div class="hh-empty">Loading...</div>';
  if (!_tkFilter) _tkFilter = tkDefaultFilter();
  try {
    // v1.66.0: the vocabulary before the rows, so the first paint already knows the shop's own
    // labels, colours and order and the board never flashes derived words at the user.
    await loadTicketVocab();
    var res = await rwFetch('/api/tickets');
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load tickets.</div>'; return; }
    _ticketRows = await res.json();
    _tickets = {};
    _ticketRows.forEach(function(t){ _tickets[t.id] = t; });
    // v1.71.0: three badges, counted by KIND, and STRICTLY the same three fields loadCounts sets.
    // v1.66.0 folded waiting into open here and not there, so the badge changed depending on which
    // function ran last. If either of these two ever grows a field the other does not have, the
    // bug is back, so tkBadgeCounts is the only thing that writes them.
    window._openTickets = _ticketRows.filter(function(t){ return tkStatusOf(t).kind === 'open'; }).length;
    window._schedTickets = _ticketRows.filter(function(t){ return tkStatusOf(t).kind === 'scheduled'; }).length;
    window._waitingTickets = _ticketRows.filter(function(t){ return tkStatusOf(t).kind === 'waiting'; }).length;
    tkBadgeCounts();
    ensureCrTeam();
    renderTickets();
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
function tkSet(key,val){ _tkFilter[key] = val; renderTickets(); }
function listToolbar(f, statuses, prefix) {
  var seg = statuses.map(function(s){ return '<button class="seg' + (f.status===s.v?' on':'') + '" onclick="' + prefix + 'Set(\'status\',\'' + s.v + '\')">' + s.label + '</button>'; }).join('');
  return '<div class="list-toolbar">' +
    '<div class="seg-group">' + seg + '</div>' +
    '<div class="toolbar-toggles">' +
      '<label class="tg"><input type="checkbox" ' + (f.mine?'checked':'') + ' onchange="' + prefix + 'Set(\'mine\',this.checked)"> Mine</label>' +
      '<label class="tg"><input type="checkbox" ' + (f.group?'checked':'') + ' onchange="' + prefix + 'Set(\'group\',this.checked)"> Group by assignee</label>' +
    '</div></div>';
}
// ── TICKET VOCABULARY (v1.66.0) ──────────────────────────────────────────────
// Statuses and priorities are the integrator's own rows now, so this file cannot hold a list of
// them. Loaded once per session and refreshed whenever the editor changes something.
//
// _tkVocab null means not loaded yet, NOT empty. Every reader falls back to the row's own fields
// and then to a derived label, so a board still renders correctly on the first paint before the
// fetch lands, and a status the vocabulary has never heard of still shows a readable word rather
// than a blank pill.
var _tkVocab = null;
async function loadTicketVocab(force) {
  if (_tkVocab && !force) return _tkVocab;
  try {
    var res = await rwFetch('/api/ticket-vocab');
    if (res.ok) _tkVocab = await res.json();
  } catch (e) {}
  return _tkVocab;
}
function tkStatuses() { return (_tkVocab && _tkVocab.statuses) || []; }
function tkPriorities() { return (_tkVocab && _tkVocab.priorities) || []; }
// v1.76.0: the taxonomy arrives on the same read. Same null-means-not-loaded rule as above, so a
// caller that runs before the vocab lands gets an empty list and falls back to the raw key rather
// than rendering the word undefined.
function tkCategories() { return (_tkVocab && _tkVocab.categories) || []; }
function tkSubcategories() { return (_tkVocab && _tkVocab.subcategories) || []; }
function tkCatLabel(key) {
  var row = tkCategories().filter(function(c){ return c.key === key; })[0];
  return row ? row.label : fmtCategory(key);
}
function tkSubLabel(catKey, subKey) {
  var row = tkSubcategories().filter(function(x){ return x.category_key === catKey && x.key === subKey; })[0];
  return row ? row.label : fmtCategory(subKey);
}
function tkStatusRow(key) {
  var list = tkStatuses();
  for (var i = 0; i < list.length; i++) if (list[i].key === key) return list[i];
  return null;
}
// One place decides what a ticket's status IS for display. The portal already sends label, colour
// and kind on every ticket read, so that wins; the vocabulary is the fallback for rows that came
// from somewhere else (an SSE patch, an optimistic local update).
function tkStatusOf(t) {
  var key = t.status || 'open';
  var row = tkStatusRow(key);
  var kind = t.status_kind || (row && row.kind) || (key === 'resolved' ? 'resolved' : key === 'closed' ? 'closed' : key === 'scheduled' ? 'scheduled' : 'open');
  var label = t.status_label || (row && row.label) || tkTitleize(key);
  var color = t.status_color || (row && row.color) || (kind === 'resolved' ? '#1D9E75' : kind === 'closed' ? '#7a8290' : kind === 'scheduled' ? '#7c3aed' : kind === 'waiting' ? '#2D7DD2' : '#cc4400');
  return { key: key, kind: kind, label: label, color: color };
}
function tkTitleize(k) {
  return String(k || '').replace(/_/g, ' ').replace(/\b\w/g, function(c){ return c.toUpperCase(); });
}
function tkIsEnded(t) { var k = tkStatusOf(t).kind; return k === 'resolved' || k === 'closed'; }
function tkPill(t) {
  var st = tkStatusOf(t);
  return '<div class="t-pill-dyn" style="background:' + dimHex(st.color, 0.82) + ';color:' + darkHex(st.color, 0.25) + ';">' + esc(st.label) + '</div>';
}
// Priority renders only when it is NOT the default. A board where every row shouts Normal is a
// board where nobody reads the chip, which defeats the point of having one.
function tkPriorityChip(t) {
  if (!t.priority) return '';
  var list = tkPriorities();
  var row = null, def = null;
  for (var i = 0; i < list.length; i++) { if (list[i].key === t.priority) row = list[i]; if (list[i].is_default) def = list[i]; }
  if (def && t.priority === def.key) return '';
  var label = t.priority_label || (row && row.label) || tkTitleize(t.priority);
  var color = t.priority_color || (row && row.color) || '#cc4400';
  return '<span class="t-prio" style="background:' + dimHex(color, 0.8) + ';color:' + darkHex(color, 0.3) + ';">' + esc(label) + '</span>';
}
// Elapsed reads as a duration a person would say out loud. Under a minute is "just now" rather
// than "0m", since a ticket opened this second having a number attached looks like a bug.
// v1.73.0: "just now" is gone. It was honest on a LIVE clock and a lie on a frozen history row,
// which keeps its number forever; a forty second stretch from September would still have been
// reading "just now" next year. <1m is true in both states, so there is one rule instead of a
// phrase that depends on which surface is asking.
function fmtDur(sec) {
  var n = Math.max(0, parseInt(sec, 10) || 0);
  if (n < 60) return '<1m';
  var m = Math.floor(n / 60), h = Math.floor(m / 60), d = Math.floor(h / 24);
  if (d >= 1) return d + 'd ' + (h % 24) + 'h';
  if (h >= 1) return h + 'h ' + (m % 60) + 'm';
  return m + 'm';
}

// v1.67.0: ONE place decides whether a ticket's clock is running, because three surfaces show it
// and three copies of the rule is how they drift apart. The portal already sends clock_running
// state implicitly through the status, so this reads the status kind and the shop's own
// counts_toward_clock flag rather than inventing a second source of truth.
//   running  the clock is accruing right now
//   paused   live work, but this status stops the clock
//   ended    resolved or closed; the number is final and cannot resume
function tkClockState(t) {
  var st = tkStatusOf(t);
  if (st.kind === 'resolved' || st.kind === 'closed') return 'ended';
  if (st.kind === 'open') return 'running';           // Open always counts, by definition
  var row = tkStatusRow(st.key);
  // status_counts_clock rides on every ticket read, so a row fetched before the vocabulary
  // landed still answers correctly. Unknown defaults to running: over-counting is visible and
  // gets corrected, silently stopping a clock nobody knows is stopped is not.
  var counts = (t.status_counts_clock !== undefined && t.status_counts_clock !== null)
    ? !!t.status_counts_clock
    : (row ? row.counts_toward_clock !== false : true);
  return counts ? 'running' : 'paused';
}
var TK_CLOCK_ICON = '<span class="tk-clock-ico" title="the resolution clock is running">&#128339;</span>';

function ticketRowHtml(t) {
  var household = t.household_name || 'No household';
  var person = (t.first_name || t.last_name) ? ((t.first_name||'')+' '+(t.last_name||'')).trim() : (t.client_name || fmtPhone(t.phone_number) || '');
  // v1.67.0: the row told the truth about the NUMBER and lied about the STATE. A ticket parked in
  // Waiting on Parts read "1m on the clock" while its clock was stopped.
  var clock = '';
  if (t.clock_seconds !== undefined && t.clock_seconds !== null) {
    var cs = tkClockState(t);
    if (cs === 'running')      clock = '<div class="tk-clock">' + TK_CLOCK_ICON + esc(fmtDur(t.clock_seconds)) + ' on the clock</div>';
    else if (cs === 'paused')  clock = '<div class="tk-clock tk-clock-off">' + esc(fmtDur(t.clock_seconds)) + ', paused</div>';
    else                       clock = '<div class="tk-clock tk-clock-off">' + esc(fmtDur(t.clock_seconds)) + '</div>';
  }
  return '<div class="ticket-row" onclick="enterTicket(' + t.id + ')">' +
    '<div class="ticket-body"><div class="ticket-client">' + esc(household) + (person ? ' <span class="ticket-person">· ' + esc(person) + '</span>' : '') + tkPriorityChip(t) + '</div>' +
    '<div class="ticket-issue">' + esc(t.summary || fmtCategory(t.issue_category) || 'No detail') + '</div>' +
    '<div class="ticket-meta">Ticket ' + t.id + ' · Opened ' + esc(fmtTime(t.opened_at)) + (t.created_by ? ' · by ' + esc(t.created_by) : '') + '</div></div>' +
    '<div class="ticket-right">' + tkPill(t) + clock + '</div></div>';
}
function hexToRgb(h) {
  h = (h || '').replace('#', '');
  if (h.length === 3) h = h.split('').map(function(x){ return x + x; }).join('');
  if (h.length !== 6) return null;
  return { r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16) };
}
function dimHex(hex, amt) { // amt 0..1 toward white (lighter)
  var c = hexToRgb(hex); if (!c) return null;
  return 'rgb(' + Math.round(c.r+(255-c.r)*amt) + ',' + Math.round(c.g+(255-c.g)*amt) + ',' + Math.round(c.b+(255-c.b)*amt) + ')';
}
function darkHex(hex, amt) { // amt 0..1 toward black (darker, for readable text)
  var c = hexToRgb(hex); if (!c) return null;
  return 'rgb(' + Math.round(c.r*(1-amt)) + ',' + Math.round(c.g*(1-amt)) + ',' + Math.round(c.b*(1-amt)) + ')';
}
function bubbleColorFor(row) {
  if (!row || row.assigned_to == null || !_crTeam) return null;
  var u = _crTeam.find(function(x){ return x.id === row.assigned_to; });
  return u && u.bubble_color ? u.bubble_color : null;
}
function groupByAssignee(rows, rowFn) {
  var groups = {};
  rows.forEach(function(t){ var k = t.assigned_name || 'Unassigned'; (groups[k] = groups[k] || []).push(t); });
  return Object.keys(groups).sort(function(a,b){ if(a==='Unassigned')return 1; if(b==='Unassigned')return -1; return a.localeCompare(b); }).map(function(k){
    var g = groups[k];
    var color = bubbleColorFor(g[0]);
    // Dim, fully filled bar in the person's bubble color with a darkened-shade text for contrast.
    var style = color ? ' style="background:' + dimHex(color,0.8) + ';color:' + darkHex(color,0.4) + ';border-bottom-color:' + dimHex(color,0.62) + ';"' : '';
    return '<div class="group-head"' + style + '>' + esc(k) + ' <span class="group-count">' + g.length + '</span></div>' + g.map(rowFn).join('');
  }).join('');
}
function renderTickets() {
  var el = document.getElementById('ticket-list');
  if (!el) return;
  var f = _tkFilter;
  // v1.66.0: ACTIVE is every kind that is not an ending. Before this it was the literal words
  // open and scheduled, so the first custom status a shop added would have vanished off the
  // board with no error, which is the same failure the portal counts had.
  var rows = _ticketRows.filter(function(t){
    var k = tkStatusOf(t).kind;
    if (f.status === 'active' && (k === 'resolved' || k === 'closed')) return false;
    if (f.status === 'resolved' && k !== 'resolved' && k !== 'closed') return false;
    // 'all' shows everything
    if (f.mine && !(window._rwUser && t.assigned_to === window._rwUser.id)) return false;
    return true;
  });
  // In Active, sort by the shop's own status order, so the board reads top to bottom the way the
  // owner arranged the list rather than in an order this file decided.
  if (f.status === 'active') {
    var order = {};
    tkStatuses().forEach(function(r, i){ order[r.key] = r.sort_order != null ? r.sort_order : i; });
    rows.sort(function(a,b){
      var ra = order[a.status] != null ? order[a.status] : 999;
      var rb = order[b.status] != null ? order[b.status] : 999;
      return ra - rb;
    });
  }
  var tb = listToolbar(f, [{v:'active',label:'Active'},{v:'resolved',label:'Closed out'},{v:'all',label:'All'}], 'tk');
  var empty = f.status === 'resolved' ? 'Nothing has been resolved or closed yet.'
    : f.status === 'all' ? 'No tickets yet.'
    : 'No active tickets. Nothing open, scheduled or waiting right now.';
  var body;
  if (!rows.length) {
    body = '<div class="hh-empty">' + empty + '</div>';
  } else if (f.group) {
    body = groupByAssignee(rows, ticketRowHtml);
  } else if (f.status === 'active') {
    // One section per status the shop actually has work in, in their order. A status with no
    // tickets draws nothing, so a long list never turns the board into a wall of empty headers.
    body = '';
    var seen = {};
    var ordered = tkStatuses().filter(function(r){ return r.kind !== 'resolved' && r.kind !== 'closed'; });
    ordered.forEach(function(sr){
      var group = rows.filter(function(r){ return (r.status || 'open') === sr.key; });
      if (!group.length) return;
      group.forEach(function(r){ seen[r.id] = 1; });
      body += '<div class="group-head" style="background:' + dimHex(sr.color || '#cc4400', 0.82) + ';color:' + darkHex(sr.color || '#cc4400', 0.35) + ';border-bottom-color:' + dimHex(sr.color || '#cc4400', 0.64) + ';">' +
        esc(sr.label) + ' <span class="group-count">' + group.length + '</span></div>' + group.map(ticketRowHtml).join('');
    });
    // Anything the vocabulary did not cover still renders, never silently dropped.
    var leftover = rows.filter(function(r){ return !seen[r.id]; });
    if (leftover.length) {
      body += '<div class="group-head gh-open">Other <span class="group-count">' + leftover.length + '</span></div>' + leftover.map(ticketRowHtml).join('');
    }
  } else {
    body = rows.map(ticketRowHtml).join('');
  }
  el.innerHTML = tb + body;
}
// v1.60.2: scroll the ticket thread to its opened marker (or the bottom). #tk-thread is not
// always the element that scrolls, so walk up to the first ancestor with real overflow and
// scroll THAT, with rect math so ancestry and positioning never matter. Recomputes from live
// geometry, so repeated passes are harmless.
// v1.60.5: THE TIMERS WERE THE BUG. While the ticket detail view is still hidden, every
// scrollHeight and clientHeight is zero, so the walk up below finds nothing scrollable and setting
// scrollTop does nothing. 1.60.2 answered that by scheduling four fixed passes inside the first
// second, which means if the view was still hidden at 1000ms there was no fifth chance and the
// thread rendered at its natural position, the top. Now this returns whether it actually scrolled
// and tkAnchorThread waits for the condition instead of guessing at time.
function tkScrollBox(el){
  var n = el;
  while (n && n !== document.body) {
    if (n.scrollHeight > n.clientHeight + 4) return n;
    n = n.parentElement;
  }
  return null;
}
function tkThreadScroll(el, ticketId){
  // v1.60.6: readiness is the THREAD being laid out, not an ancestor being scrollable. While the
  // detail view is hidden, offsetParent is null and every rect reads zero; measuring then lands
  // the thread at the top while reporting success (the 1.60.5 miss: the walk up found the ticket
  // LIST scroller, which is always scrollable, and anchored against zeroed geometry).
  if (!el.offsetParent || !el.clientHeight) return false;   // hidden or not laid out: wait
  var box = tkScrollBox(el);
  if (!box) return false;              // nothing scrollable yet: the caller keeps waiting
  // v1.60.7: scope the lookup to THIS thread. buildThreadHTML renders the same marker ids in
  // the Conversations panel, whose DOM survives hidden when you switch tabs, and
  // document.getElementById returns the FIRST copy in DOM order, which is the hidden one
  // whenever that conversation was viewed this session. Measuring (1.60.5) or gating (1.60.6)
  // against the hidden copy is what kept landing this thread at the top. querySelector on el
  // can only ever return the marker inside the ticket thread itself.
  var mk = null;
  if (ticketId) {
    mk = el.querySelector('[id="tkmark-' + ticketId + '-opened"]') ||
         el.querySelector('[id="tkmark-' + ticketId + '-resolved"]');
  }
  if (mk && !mk.offsetParent) return false;                 // marker exists but has no layout yet
  if (mk) {
    var delta = mk.getBoundingClientRect().top - box.getBoundingClientRect().top;
    box.scrollTop = Math.max(0, box.scrollTop + delta - 60);
  } else {
    box.scrollTop = box.scrollHeight;
  }
  return true;
}
// Poll until the thread is genuinely scrollable, anchor once, then keep re anchoring as late
// loading photos change the height. Bails after 6 seconds so an empty thread never spins.
function tkAnchorThread(el, ticketId){
  var start = Date.now(), settled = false;
  (function attempt(){
    if (settled) return;
    if (tkThreadScroll(el, ticketId)) {
      settled = true;
      tkAnchorOnLoad(el, ticketId);
      // One verify pass after layout settles: if a late render moved the thread or reset the
      // scroll, re-anchor. Reads live geometry, so a repeat is harmless.
      setTimeout(function(){ tkThreadScroll(el, ticketId); }, 400);
      return;
    }
    if (Date.now() - start > 6000) return;
    requestAnimationFrame(attempt);
  })();
}
function tkAnchorOnLoad(el, ticketId){
  var imgs = el.querySelectorAll('img');
  for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].complete) continue;
    imgs[i].addEventListener('load', function(){ tkThreadScroll(el, ticketId); });
    imgs[i].addEventListener('error', function(){ tkThreadScroll(el, ticketId); });
  }
}
// v1.60.1: ticket_issues created_at arrives as a zoneless UTC string; parsed as local it showed
// five hours in the future (Jul 28, 1:15 AM against an 8:15 PM message). Append Z so the browser
// parses it as the UTC it is, then format exactly as before.
function fmtIssueTime(v){
  var str = String(v || '');
  if (/T\d{2}:\d{2}/.test(str) && !/([zZ]|[+-]\d{2}:?\d{2})$/.test(str)) str += 'Z';
  return fmtTime(str);
}
// v1.60.5: THE TICKET LABEL COMES FROM THE ISSUE. A dispatch word tells you nothing when you are
// scanning a home's tickets for the one about the shade, which is exactly what the conversation rail
// list looked like: truck roll, remote, truck roll. Andi writes a real label going forward
// (systemPrompt 9.14). Rows written before that hold a dispatch word, so those and empty ones derive
// one from the issue text here. DISPLAY ONLY, the stored value is never rewritten.
var TK_DISPATCH_WORDS = ['truck roll','truckroll','truck-roll','remote','firmware','other','service','repair','onsite','tbd'];
var TK_SHORTEN = [[/\bbedrooms?\b/gi,'Bed'],[/\bbathrooms?\b/gi,'Bath']];
function tkDeriveLabel(summary){
  var s = String(summary || '').trim();
  if (!s) return '';
  // Keep the naming half of the sentence, drop the symptom half.
  s = s.split(/[,.;:]|\s+(?:not working|not responding|is not|isn't|will not|won't|wont|does not|doesn't|needs|stopped|has no|no longer|broken|dead|is)\b/i)[0];
  TK_SHORTEN.forEach(function(pair){ s = s.replace(pair[0], pair[1]); });
  var words = s.replace(/\s+/g, ' ').trim().split(' ').filter(Boolean).slice(0, 4);
  // A four word cut can end on a dangling filler word (Theater Projector Shooting Too). Drop those.
  var TAIL = ['too','the','a','an','and','or','is','not','with','for','in','on','at','to','of','my','their'];
  while (words.length > 1 && TAIL.indexOf(words[words.length - 1].toLowerCase()) !== -1) words.pop();
  return words.map(function(w){ return w.charAt(0).toUpperCase() + w.slice(1); }).join(' ');
}
function fmtTicketLabel(t){
  if (!t) return '';
  var stored = String(t.ticket_type || '').trim();
  if (stored && TK_DISPATCH_WORDS.indexOf(stored.toLowerCase()) === -1) return stored;
  return tkDeriveLabel(t.summary) || stored || 'Ticket';
}
// v1.60.4: categories are stored as machine tokens (control_system); show them human.
function fmtCategory(c){
  var str = String(c || '').replace(/_/g, ' ').trim();
  return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
}
function fmtIssueMeta(iss){
  var bits = [];
  if (iss.source) bits.push('by ' + esc(iss.source));
  if (iss.created_at) bits.push(esc(fmtIssueTime(iss.created_at)));
  return bits.join(' · ');
}
// A ticket is one visit to a home and can hold several separate issues. The summary is the
// headline issue (issue one, not removable here); t.issues carries the ones added afterward, by a
// human in this box or by Andi over text. Each added issue can be removed; issues stay separate.
function ticketIssuesBlock(t, resolved){
  var extra = Array.isArray(t.issues) ? t.issues : [];
  var html = '<div class="eq-section"><div class="eq-section-title">Issues</div>';
  html += '<div class="tk-issue"><div class="tk-issue-body">' + esc(t.summary || fmtCategory(t.issue_category) || 'No detail') + '</div>' +
          (t.created_by ? '<div class="tk-issue-meta">by ' + esc(t.created_by) + '</div>' : '') + '</div>';
  extra.forEach(function(iss){
    html += '<div class="tk-issue"><div class="tk-issue-body">' + esc(iss.body) + '</div>' +
            '<div class="tk-issue-meta">' + fmtIssueMeta(iss) +
            (resolved ? '' : '<a class="tk-issue-x" onclick="ticketIssueRemove(' + t.id + ',' + iss.id + ')">remove</a>') +
            '</div></div>';
  });
  if (!resolved) {
    html += '<div class="tk-issue-add">' +
      '<textarea class="fld-input" id="tk-issue-input" placeholder="Add another issue to this ticket"></textarea>' +
      '<div class="tk-issue-add-row"><button class="tk-issue-add-btn" id="tk-issue-add-btn" onclick="ticketIssueAdd(' + t.id + ')">Add issue</button></div>' +
      '<div class="detail-meta" id="tk-issue-err" style="color:#c0392b;margin-top:0.3rem;"></div></div>';
  }
  html += '</div>';
  return html;
}
async function ticketIssueAdd(id){
  var inp = document.getElementById('tk-issue-input');
  var errEl = document.getElementById('tk-issue-err');
  var btn = document.getElementById('tk-issue-add-btn');
  if (errEl) errEl.textContent = '';
  var body = inp ? inp.value.trim() : '';
  if (!body) { if (errEl) errEl.textContent = 'Type an issue first.'; return; }
  if (btn) btn.disabled = true;
  try {
    var res = await rwFetch('/api/tickets/' + id + '/issues', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ body: body }) });
    if (!res.ok) { var e = await res.json().catch(function(){return {};}); if (errEl) errEl.textContent = (e && e.error) || 'Could not add that.'; if (btn) btn.disabled = false; return; }
    var d = await res.json();
    var t = _tickets[id];
    if (t) { if (!Array.isArray(t.issues)) t.issues = []; if (d && d.issue) t.issues.push(d.issue); }
    openTicket(id);
  } catch (e) { if (errEl) errEl.textContent = 'Could not add that.'; if (btn) btn.disabled = false; }
}
async function ticketIssueRemove(id, issueId){
  if (!confirm('Remove this issue from the ticket?')) return;
  try {
    var res = await rwFetch('/api/tickets/' + id + '/issues/' + issueId, { method:'DELETE' });
    if (!res.ok) return;
    var t = _tickets[id];
    if (t && Array.isArray(t.issues)) t.issues = t.issues.filter(function(x){ return x.id !== issueId; });
    openTicket(id);
  } catch (e) {}
}
function openTicket(id) {
  var t = _tickets[id];
  var el = document.getElementById('ticket-detail-content');
  window._openTicketId = id;
  document.getElementById('ticket-list-view').style.display = 'none';
  document.getElementById('ticket-detail-view').style.display = 'block';
  if (!t) { el.innerHTML = '<div class="hh-empty">Ticket not found. Go back and refresh.</div>'; return; }
  try {
    var stObj = tkStatusOf(t);
    var teamOpts = '<option value="">Unassigned</option>' + (_crTeam||[]).map(function(u){ return '<option value="' + u.id + '"' + (t.assigned_to===u.id?' selected':'') + '>' + esc((u.first_name||'')+' '+(u.last_name||'')) + '</option>'; }).join('');
    var contactBits = [];
    if (t.phone_number) contactBits.push(fmtPhone(t.phone_number));
    if (t.contact_email) contactBits.push(t.contact_email);

    // v1.66.0: "resolved" here means ENDED. A closed ticket is read only in exactly the same way
    // a resolved one is; what differs is which sentence the rail shows and whether it counted.
    var ended = stObj.kind === 'resolved' || stObj.kind === 'closed';
    var resolved = ended;
    var isClosed = stObj.kind === 'closed';

    // Top of rail: an editable status on live work, the ending's own sentence once it is over.
    var statusTop;
    if (ended) {
      statusTop = '<div class="eq-section"><div class="eq-section-title">' + (isClosed ? 'Closed' : 'Resolution') + '</div>' +
        '<div class="ticket-detail-value" style="white-space:pre-wrap;">' + esc((isClosed ? t.closed_reason : t.resolution_note) || 'No note recorded.') + '</div>' +
        '<div class="detail-meta" style="margin-top:0.4rem;">' + (t.resolved_by ? (isClosed ? 'Closed by ' : 'Resolved by ') + esc(t.resolved_by) : '') + (t.closed_at ? ' · ' + esc(fmtTime(t.closed_at)) : '') + '</div></div>';
    } else {
      // Only live statuses are offered. Resolved and Closed have their own buttons at the bottom
      // of the rail because each one needs a sentence typed first, and a select cannot ask for one.
      var liveOpts = tkStatuses().filter(function(r){ return r.kind !== 'resolved' && r.kind !== 'closed'; });
      if (!liveOpts.length) liveOpts = [{ key: stObj.key, label: stObj.label, kind: stObj.kind, counts_toward_clock: true }];
      statusTop = '<div class="eq-section"><div class="eq-section-title">Status</div>' +
        '<select class="fld-input" id="tk-status-sel" onchange="setTicketStatus(' + t.id + ', this.value)">' +
        liveOpts.map(function(r){ return '<option value="' + esc(r.key) + '"' + (r.key === stObj.key ? ' selected' : '') + '>' + esc(r.label) + '</option>'; }).join('') +
        '</select>' +
        // v1.67.0: the stopped-clock note moved OUT of here and into the clock block itself, which
        // is where a person looks for the number. Saying it in two places invites them to disagree.
        '' +
        '<div class="hd-err" id="tk-status-err" style="margin-top:0.4rem;"></div></div>';
    }

    // THE CLOCK. Time actually worked, which is the accumulated sum across statuses that count,
    // not closed minus opened. Shown on every ticket including ended ones, since the number on a
    // finished ticket is the one that feeds the average.
    var clkState = tkClockState(t);
    var clockSection = (t.clock_seconds === undefined || t.clock_seconds === null) ? '' :
      '<div class="eq-section"><div class="eq-section-title">Time on this ticket</div>' +
      '<div class="ticket-detail-value' + (clkState === 'running' ? '' : ' tk-clock-off') + '">' +
        (clkState === 'running' ? TK_CLOCK_ICON : '') + esc(fmtDur(t.clock_seconds)) +
        (clkState === 'paused' ? ', paused' : '') + '</div>' +
      '<div class="detail-meta" style="margin-top:0.3rem;">' +
        (clkState === 'running' ? 'Counting. Time in a status that stops the clock is excluded.'
         : clkState === 'paused' ? 'Stopped while this ticket sits in ' + esc(tkStatusOf(t).label) + '.'
         : 'Final. Working time only.') + '</div></div>';

    // URGENCY, the second axis. A ticket can be Waiting on Parts and critical at the same time.
    var prios = tkPriorities();
    var prioSection = !prios.length ? '' : (ended
      ? '<div class="eq-section"><div class="eq-section-title">Urgency</div><div class="ticket-detail-value">' + esc(t.priority_label || tkTitleize(t.priority) || 'Not set') + '</div></div>'
      : '<div class="eq-section"><div class="eq-section-title">Urgency</div>' +
        '<select class="fld-input" onchange="saveTicketField(' + t.id + ',\'priority\',this.value)">' +
        prios.map(function(r){ return '<option value="' + esc(r.key) + '"' + (r.key === t.priority ? ' selected' : '') + '>' + esc(r.label) + '</option>'; }).join('') +
        '</select></div>');

    // Bottom of rail: the two endings, or the way back.
    var statusAction = ended
      ? '<div class="eq-section"><button class="btn-ghost" style="width:100%;" onclick="reopenTicket(' + t.id + ')">Reopen ticket</button></div>'
      : '<div class="eq-section"><button class="btn-primary" style="width:100%;" onclick="openResolveTicket(' + t.id + ')">Resolve ticket</button>' +
        '<button class="btn-ghost" style="width:100%;margin-top:0.45rem;" onclick="openCancelTicket(' + t.id + ')">Close without a fix</button>' +
        '<div class="hd-err" id="ticket-err" style="margin-top:0.5rem;"></div></div>';

    // Type / Scheduled / Assigned: editable on an active ticket, read-only once resolved.
    // v1.60.5: the label IS the ticket's name, so it leads the rail instead of sitting at the
    // bottom under Contact where it had to be hunted for. The input shows the derived label on a
    // legacy row; nothing is stored unless it is actually edited (onchange only fires on a change).
    var tkLabelVal = fmtTicketLabel(t);
    var typeSection = resolved
      ? '<div class="eq-section"><div class="eq-section-title">Label</div><div class="ticket-detail-value">' + esc(tkLabelVal || 'Not set') + '</div></div>'
      : '<div class="eq-section"><div class="eq-section-title">Label</div>' +
          '<input class="fld-input" id="tk-type" type="text" placeholder="e.g. Master Bed Shade" value="' + esc(tkLabelVal) + '" onchange="saveTicketField(' + t.id + ',\'ticket_type\',this.value)" />' +
          '<div class="detail-meta" style="margin-top:0.3rem;">From the issue. Edit if it is off.</div></div>';
    var schedSection = resolved
      ? '<div class="eq-section"><div class="eq-section-title">Scheduled</div><div class="ticket-detail-value">' + (t.scheduled_at ? esc(fmtTime(t.scheduled_at)) : 'Not scheduled') + '</div></div>'
      : '<div class="eq-section"><div class="eq-section-title">Scheduled</div>' +
          (function(){ var v = toLocalInput(t.scheduled_at); var dp = v ? v.slice(0,10) : ''; var tp = v ? v.slice(11,16) : '';
            return '<div class="tk-sched-row"><input class="fld-input" id="tk-sched-date" type="date" value="' + esc(dp) + '" style="flex:1.15;" />' +
              '<select class="fld-input" id="tk-sched-time" style="flex:1;">' + timeOptions(tp) + '</select></div>'; })() +
          '<div class="tk-sched-row" style="margin-top:0.4rem;justify-content:flex-end;">' +
          '<button class="tk-sched-save" id="tk-sched-save" onclick="saveSchedule(' + t.id + ')">Save</button>' +
          '<button class="tk-sched-clear" id="tk-sched-clear" onclick="clearSchedule(' + t.id + ')">Clear</button></div>' +
          '<div class="detail-meta" id="tk-sched-err" style="margin-top:0.3rem;color:#c0392b;"></div>' +
          '<div class="detail-meta" style="margin-top:0.15rem;">Setting a date moves the ticket to Scheduled. Clearing it returns a Scheduled ticket to Open and leaves any other status alone.</div></div>';
    var assignSection = resolved
      ? '<div class="eq-section"><div class="eq-section-title">Assigned to</div><div class="ticket-detail-value">' + esc(t.assigned_name || 'Unassigned') + '</div></div>'
      : '<div class="eq-section"><div class="eq-section-title">Assigned to</div><select class="fld-input" onchange="reassignTicket(' + t.id + ',this.value)">' + teamOpts + '</select></div>';

    // v1.31.0: Household block at the top of the rail (above Status), matching the conversation
    // rail. Name is clickable to the full household. Address rides from household_address (portal
    // v1.31.0 adds it to the tickets payload). Hidden when a cold ticket has no household.
    var householdSection = t.household_name ?
      '<div class="eq-section"><div class="eq-section-title">Household</div>' +
        '<div class="eq-row"><span class="eq-label">Name</span><span class="eq-value">' + (t.household_id ? '<a class="tk-house-inline" style="color:inherit;" onclick="goToHousehold(' + t.household_id + ')">' + esc(t.household_name) + '</a>' : esc(t.household_name)) + '</span></div>' +
        (t.household_address ? '<div class="eq-row"><span class="eq-label">Address</span><span class="eq-value" style="font-size:0.72rem;">' + esc(t.household_address) + '</span></div>' : '') +
      '</div>' : '';

    var railBody =
      typeSection +
      householdSection +
      statusTop +
      ticketIssuesBlock(t, resolved) +
      (t.issue_category ? '<div class="eq-section"><div class="eq-section-title">Category</div><div class="ticket-detail-value">' + esc(fmtCategory(t.issue_category)) + '</div></div>' : '') +
      (contactBits.length ? '<div class="eq-section"><div class="eq-section-title">Contact</div><div class="ticket-detail-value">' + esc(contactBits.join(' · ')) + '</div></div>' : '') +
      prioSection +
      schedSection +
      assignSection +
      clockSection +
      '<div class="eq-section"><div class="eq-section-title">Opened</div><div class="ticket-detail-value">' + esc(fmtTime(t.opened_at)) + (t.created_by ? ' · by ' + esc(t.created_by) : '') + '</div></div>' +
      '<div class="eq-section"><div class="eq-section-title">History</div><div id="tk-history">' +
        '<div class="detail-meta">Loading...</div></div></div>' +
      statusAction;

    var centerMain = t.phone_number
      ? '<div class="sms-thread" id="tk-thread"><div class="hh-empty">Loading...</div></div>' +
        (resolved
          ? '<div class="reply-box" style="justify-content:center;"><div style="font-size:0.78rem;color:var(--ink-soft);padding:0.35rem 0;">This ticket is resolved, so the chat here is read only. Reopen the ticket to reply.</div></div>'
          : '<div class="reply-box">' +
              '<textarea id="tk-reply" class="reply-textarea" placeholder="Reply to the client..." rows="1"></textarea>' +
              '<button id="tk-send" class="reply-send">Send</button>' +
            '</div>')
      : '<div class="sms-thread"><div class="hh-empty">This client has no text thread. Email replies inside the ticket are coming soon.</div></div>';

    el.innerHTML =
      '<div class="thread-shell">' +
        '<div class="thread-main">' +
          '<div class="detail-header" style="padding:0.75rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;height:53px;box-sizing:border-box;">' +
            '<div class="detail-name">' + esc(ticketClientName(t)) + '</div>' +
          '</div>' +
          centerMain +
          (t.phone_number ? '<button class="flag-fab" id="flag-fab" title="Flag for review" onclick="toggleFlagFab()">⚑</button>' : '') +
        '</div>' +
        '<div class="equipment-panel ticket-rail">' +
          '<div class="equipment-panel-header ticket-rail-header"><span>' + (clkState === 'running' ? TK_CLOCK_ICON : '') + 'Ticket ' + t.id + (tkLabelVal ? ' &middot; ' + esc(tkLabelVal.length > 26 ? tkLabelVal.slice(0, 26).trim() + '...' : tkLabelVal) : '') + '</span></div>' +
          '<div class="equipment-panel-body">' + railBody + '</div>' +
        '</div>' +
      '</div>';

    loadTicketHistory(t.id);

    window._openTicketPhone = t.phone_number ? encodeURIComponent(t.phone_number) : null;
    if (t.phone_number) {
      loadTicketThread(window._openTicketPhone, t.id);
      var sendBtn = document.getElementById('tk-send');
      if (sendBtn) sendBtn.addEventListener('click', function(){ sendTicketReply(id, window._openTicketPhone); });
      var ta = document.getElementById('tk-reply');
      if (ta) ta.addEventListener('keydown', function(e){ if (e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendTicketReply(id, window._openTicketPhone); } });
    }
  } catch (e) {
    el.innerHTML = '<div class="hh-empty">Could not open this ticket.</div>';
  }
}
// The ticket is a window into the same SMS conversation that lives in the chat. Reading reuses
// /api/thread; replying reuses /api/send, which logs a human turn and hands the thread to the
// team exactly like a chat reply, so Andi steps back. (Email channel is a later build.)
async function loadTicketThread(encPhone, ticketId) {
  var el = document.getElementById('tk-thread'); if (!el) return;
  try {
    var res = await rwFetch('/api/thread?phone=' + encPhone);
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load the conversation.</div>'; return; }
    var data = await res.json();
    var messages = Array.isArray(data) ? data : (data.messages || []);
    if (!messages.length) { el.innerHTML = '<div class="hh-empty">No messages yet.</div>'; return; }
    window._threadMsgs = messages; // v1.21.0: flag modal builds its snapshot from this
    el.innerHTML = buildThreadHTML(messages, data.clientName || '');
    // v1.20.0: when this ticket's open marker is in the thread, land on it so the relevant
    // exchange is in view instead of the bottom of an unrelated later conversation.
    // v1.60.2: scroll the container that actually scrolls, and keep re-applying across the
    // first second so visibility timing and late loading photos cannot beat it.
    tkAnchorThread(el, ticketId);
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
async function sendTicketReply(id, encPhone) {
  var input = document.getElementById('tk-reply'); if (!input) return;
  var message = input.value.trim(); if (!message) return;
  var btn = document.getElementById('tk-send');
  input.disabled = true; if (btn) btn.disabled = true;
  try {
    var res = await rwFetch('/api/send', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ to: decodeURIComponent(encPhone), message: message }) });
    if (!res.ok) { alert('Failed to send. Please try again.'); }
    else { input.value = ''; await loadTicketThread(encPhone); loadRealConversations(); }
  } catch (e) { alert('Connection error. Please try again.'); }
  input.disabled = false; if (btn) btn.disabled = false;
  input.focus();
}

// Format a timestamp into the value a datetime-local input expects (YYYY-MM-DDTHH:MM), in local time.
function toLocalInput(ts) {
  if (!ts) return '';
  var d = new Date(ts);
  if (isNaN(d.getTime())) return '';
  var pad = function(n){ return (n < 10 ? '0' : '') + n; };
  return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}

// Save the scheduled date on demand (no auto-save). Setting a date flips an unresolved ticket to
// Scheduled automatically; clearing it drops it back to Open. The picker hands us a local value like
// "2026-06-18T11:00"; Postgres wants "2026-06-18 11:00:00", so normalize before sending.
function normalizeSched(val) {
  if (!val) return '';
  var v = val.replace('T', ' ');
  if (v.length === 16) v += ':00'; // add seconds when the picker omits them
  return v;
}
function schedErr(msg) { var e = document.getElementById('tk-sched-err'); if (e) e.textContent = msg || ''; }
// v1.25.0: coverage window time select, half-hour steps across the full 24 hours (12:00 AM to
// 11:30 PM), since Andi's overnight cover needs late and early bounds. Mirrors the ticket picker;
// a saved off-grid value round-trips as its own selected option. Stored as 24h HH:MM.
function covTimeOptions(selected, placeholder) {
  var html = '<option value="">' + (placeholder || 'Time') + '</option>';
  var found = !selected;
  for (var mins = 0; mins < 24 * 60; mins += 30) {
    var h24 = Math.floor(mins / 60), m = mins % 60;
    var v = (h24 < 10 ? '0' : '') + h24 + ':' + (m < 10 ? '0' : '') + m;
    var h12 = h24 % 12 || 12;
    var label = h12 + ':' + (m < 10 ? '0' : '') + m + ' ' + (h24 < 12 ? 'AM' : 'PM');
    var sel = v === selected ? ' selected' : '';
    if (sel) found = true;
    html += '<option value="' + v + '"' + sel + '>' + label + '</option>';
  }
  if (!found && selected) {
    var p = selected.split(':'); var hh = parseInt(p[0], 10); var h12b = hh % 12 || 12;
    html += '<option value="' + esc(selected) + '" selected>' + h12b + ':' + (p[1] || '00') + ' ' + (hh < 12 ? 'AM' : 'PM') + '</option>';
  }
  return html;
}
// v1.20.0: 15 minute time select, 6:00 AM to 9:00 PM. Nobody schedules a truck at 2:07.
// A legacy odd-minute value on an existing ticket round-trips as its own selected option.
function timeOptions(selected) {
  var html = '<option value="">Time</option>';
  var found = !selected;
  for (var mins = 6 * 60; mins <= 21 * 60; mins += 15) {
    var h24 = Math.floor(mins / 60), m = mins % 60;
    var v = (h24 < 10 ? '0' : '') + h24 + ':' + (m < 10 ? '0' : '') + m;
    var h12 = h24 % 12 || 12;
    var label = h12 + ':' + (m < 10 ? '0' : '') + m + ' ' + (h24 < 12 ? 'AM' : 'PM');
    var sel = v === selected ? ' selected' : '';
    if (sel) found = true;
    html += '<option value="' + v + '"' + sel + '>' + label + '</option>';
  }
  if (!found && selected) {
    var p = selected.split(':'); var hh = parseInt(p[0], 10); var h12b = hh % 12 || 12;
    html += '<option value="' + esc(selected) + '" selected>' + h12b + ':' + p[1] + ' ' + (hh < 12 ? 'AM' : 'PM') + '</option>';
  }
  return html;
}
async function saveSchedule(id) {
  var dEl = document.getElementById('tk-sched-date'), tEl = document.getElementById('tk-sched-time');
  if (!dEl || !tEl) return;
  var dv = dEl.value || '', tv = tEl.value || '';
  if (!dv || !tv) { schedErr('Pick a date and a time first, or use Clear.'); return; }
  var val = normalizeSched(dv + 'T' + tv);
  var body = { scheduled_at: val };
  if ((_tickets[id] || {}).status !== 'resolved') body.status = 'scheduled';
  await putSchedule(id, body, 'tk-sched-save', 'Save');
}
async function clearSchedule(id) {
  var body = { scheduled_at: '' };
  if ((_tickets[id] || {}).status === 'scheduled') body.status = 'open';
  await putSchedule(id, body, 'tk-sched-clear', 'Clear');
}
async function putSchedule(id, body, btnId, label) {
  schedErr('');
  var btn = document.getElementById(btnId);
  if (btn) { btn.disabled = true; btn.textContent = 'Saving...'; }
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
    if (res.ok) {
      var d = await res.json();
      _tickets[id] = Object.assign(_tickets[id] || {}, d);
      var i = _ticketRows.findIndex(function(r){ return r.id === id; });
      if (i !== -1) _ticketRows[i] = _tickets[id];
      openTicket(id);
      if (typeof renderTickets === 'function') renderTickets();
      if (typeof loadCounts === 'function') loadCounts();
    } else {
      if (btn) { btn.disabled = false; btn.textContent = label; }
      schedErr('Could not save. Try again.');
    }
  } catch (e) {
    if (btn) { btn.disabled = false; btn.textContent = label; }
    schedErr('Could not save. Try again.');
  }
}

// Save a single ticket field inline (used by the Type field). An empty value clears it.
async function saveTicketField(id, field, value) {
  var body = {}; body[field] = value || '';
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
    if (!res.ok) return;
    var d = await res.json();
    _tickets[id] = Object.assign(_tickets[id] || {}, d);
    var i = _ticketRows.findIndex(function(r){ return r.id === id; });
    if (i !== -1) _ticketRows[i] = _tickets[id];
  } catch (e) {}
}
// v1.66.0: driven by the rail select rather than the old quick-status buttons. The portal owns
// every rule (Scheduled needs a date, an ending needs its sentence), so a rejection is SHOWN
// rather than pre-empted here: two copies of the same rule is how they drift apart.
async function setTicketStatus(id, status, btn) {
  var errEl = document.getElementById('tk-status-err') || document.getElementById('ticket-err');
  if (errEl) errEl.textContent = '';
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: status }) });
    if (!res.ok) {
      var msg = 'Could not save status.';
      try { var e0 = await res.json(); if (e0 && e0.error) msg = e0.error; } catch (e1) {}
      if (errEl) errEl.textContent = msg;
      // Put the select back where it was, so the board never shows a status the server refused.
      var sel = document.getElementById('tk-status-sel');
      if (sel && _tickets[id]) sel.value = _tickets[id].status || 'open';
      return;
    }
    var d = await res.json();
    _tickets[id] = Object.assign(_tickets[id] || {}, d);
    var i = _ticketRows.findIndex(function(r){ return r.id === id; });
    if (i !== -1) _ticketRows[i] = _tickets[id];
    openTicket(id);
    renderTickets();
    loadCounts();
  } catch (e) { var er = document.getElementById('ticket-err'); if (er) er.textContent = 'Could not save status.'; }
}
// ── TICKET HISTORY (v1.66.0) ─────────────────────────────────────────────────
// Every transition with how long it sat there. A stretch that did NOT count toward the clock is
// struck through, so the answer to "why does this three week ticket say four hours" is visible on
// the ticket itself rather than being something a person has to be told.
async function loadTicketHistory(id) {
  var el = document.getElementById('tk-history');
  if (!el) return;
  try {
    var res = await rwFetch('/api/tickets/' + id + '/status-events');
    if (!res.ok) { el.innerHTML = '<div class="detail-meta">Could not load history.</div>'; return; }
    var rows = await res.json();
    if (!rows.length) { el.innerHTML = '<div class="detail-meta">No history recorded.</div>'; return; }
    window._tkHistRows = rows;
    window._tkHistOpen = false;
    tkRenderHistory();
  } catch (e) { el.innerHTML = '<div class="detail-meta">Could not load history.</div>'; }
}

// The portal returns events oldest first and each row's duration is the gap to the NEXT one, so
// the arithmetic is forward in time no matter which way this is displayed. Reversing changes what
// you read first and never what a row means.
function tkHistRowHtml(r, isCurrent) {
  var color = r.color || (tkStatusRow(r.status) && tkStatusRow(r.status).color) || '#7a8290';
  var who = r.entered_by === 'backfill' ? 'before the clock existed' : (r.entered_by || '');
  // The current status is the only row still growing, and that number already lives in Time on
  // this ticket. Showing it twice invites someone to add it to the total.
  var dur = isCurrent ? ''
    : '<span class="tk-hist-dur' + (r.counts_toward_clock ? '' : ' nocount') + '" title="' +
      (r.counts_toward_clock ? 'counts toward the resolution clock' : 'the clock was stopped') + '">' +
      esc(fmtDur(r.seconds_in_status)) + '</span>';
  return '<div class="tk-hist-row">' +
    '<span class="tk-hist-dot" style="background:' + esc(color) + ';"></span>' +
    '<span>' + esc(r.label || tkTitleize(r.status)) + '</span>' +
    '<span class="detail-meta" style="font-size:0.66rem;">' + esc(fmtIssueTime(r.entered_at)) + (who ? ' · ' + esc(who) : '') + '</span>' +
    dur + '</div>';
}

function tkRenderHistory() {
  var el = document.getElementById('tk-history');
  var rows = window._tkHistRows || [];
  if (!el || !rows.length) return;
  var currentId = rows[rows.length - 1].id;
  var view = rows.slice().reverse();          // newest first, per Andy
  var oldest = view[view.length - 1];         // the open row, pinned as the anchor
  var html;
  // Under six there is nothing worth hiding, so the band never appears on a short ticket.
  if (view.length <= 5 || window._tkHistOpen) {
    html = view.map(function(r){ return tkHistRowHtml(r, r.id === currentId); }).join('');
    if (view.length > 5 && window._tkHistOpen) {
      html += '<div class="tk-hist-more" onclick="tkToggleHistory()">Show less</div>';
    }
  } else {
    var recent = view.slice(0, 4);
    var hidden = view.length - 5;
    html = recent.map(function(r){ return tkHistRowHtml(r, r.id === currentId); }).join('') +
      '<div class="tk-hist-more" onclick="tkToggleHistory()">' + hidden + ' more change' + (hidden === 1 ? '' : 's') + '</div>' +
      tkHistRowHtml(oldest, oldest.id === currentId);
  }
  el.innerHTML = html;
}
function tkToggleHistory() {
  window._tkHistOpen = !window._tkHistOpen;
  tkRenderHistory();
}

// ── CLOSE WITHOUT A FIX (v1.66.0) ────────────────────────────────────────────
var _cancelTicketId = null;
function openCancelTicket(id) {
  _cancelTicketId = id;
  var pre = document.getElementById('tk-cancel-preset'); if (pre) pre.value = '';
  var oth = document.getElementById('tk-cancel-reason'); if (oth) oth.value = '';
  document.getElementById('tk-cancel-otherwrap').style.display = 'none';
  document.getElementById('tk-cancel-err').textContent = '';
  document.getElementById('tk-cancel-overlay').classList.add('show');
}
function closeCancelModal() { document.getElementById('tk-cancel-overlay').classList.remove('show'); }
function cancelPresetPicked() {
  var v = document.getElementById('tk-cancel-preset').value;
  document.getElementById('tk-cancel-otherwrap').style.display = (v === '__other') ? '' : 'none';
}
async function submitCancelTicket() {
  var id = _cancelTicketId; if (!id) return;
  var err = document.getElementById('tk-cancel-err');
  var btn = document.getElementById('tk-cancel-btn');
  var pre = document.getElementById('tk-cancel-preset').value;
  var reason = (pre === '__other') ? hhVal('tk-cancel-reason') : pre;
  if (!reason) { err.textContent = 'Pick a reason, or describe one.'; return; }
  btn.disabled = true; btn.textContent = 'Closing...';
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: 'closed', closed_reason: reason }) });
    var d = await res.json();
    if (!res.ok) { err.textContent = d.error || 'Could not close.'; btn.disabled = false; btn.textContent = 'Close ticket'; return; }
    _tickets[id] = Object.assign(_tickets[id]||{}, d);
    var i = _ticketRows.findIndex(function(r){ return r.id === id; });
    if (i !== -1) _ticketRows[i] = _tickets[id];
    closeCancelModal();
    openTicket(id);
    renderTickets();
    loadCounts();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Close ticket';
}

async function reassignTicket(id, val) {
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ assigned_to: val }) });
    if (res.ok && _tickets[id]) { _tickets[id].assigned_to = val ? parseInt(val,10) : null; _tickets[id].assigned_name = val && _crTeam ? (function(){ var u=_crTeam.find(function(x){return String(x.id)===String(val);}); return u?((u.first_name||'')+' '+(u.last_name||'')).trim():null; })() : null; var i=_ticketRows.findIndex(function(r){return r.id===id;}); if(i!==-1)_ticketRows[i]=_tickets[id]; }
  } catch (e) {}
}
async function reopenTicket(id) {
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: 'open' }) });
    if (res.ok) { var d = await res.json(); _tickets[id] = Object.assign(_tickets[id]||{}, d); var i=_ticketRows.findIndex(function(r){return r.id===id;}); if(i!==-1)_ticketRows[i]=_tickets[id]; openTicket(id); renderTickets(); loadCounts(); }
  } catch (e) {}
}
// ── Resolve (close) modal ── humans only ever close a ticket; Andi drafts the context.
var _resolveTicketId = null;
async function openResolveTicket(id) {
  var t = _tickets[id]; if (!t) return;
  _resolveTicketId = id;
  document.getElementById('tk-close-context').value = '';
  document.getElementById('tk-close-fix').value = '';
  document.getElementById('tk-close-err').textContent = '';
  document.getElementById('tk-close-overlay').classList.add('show');
  var note = document.getElementById('tk-close-draftnote');
  if (t.phone_number) {
    note.style.display = ''; note.textContent = 'Andi is drafting the context...';
    try {
      var res = await rwFetch('/api/draft-synopsis', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ phone: encodeURIComponent(t.phone_number), issue: t.summary || '' }) });
      var data = await res.json();
      if (data && data.synopsis) document.getElementById('tk-close-context').value = data.synopsis;
      note.style.display = 'none';
    } catch (e) { note.style.display = 'none'; }
  } else { note.style.display = 'none'; }
}
function closeResolveModal() { document.getElementById('tk-close-overlay').classList.remove('show'); }
async function submitResolveTicket() {
  var id = _resolveTicketId; if (!id) return;
  var err = document.getElementById('tk-close-err');
  var btn = document.getElementById('tk-close-btn');
  var fix = hhVal('tk-close-fix');
  var context = hhVal('tk-close-context');
  if (!fix) { err.textContent = 'Add what fixed it before closing.'; return; }
  var note = (context ? context + '\n\nFix: ' + fix : 'Fix: ' + fix);
  btn.disabled = true; btn.textContent = 'Closing...';
  try {
    var res = await rwFetch('/api/tickets/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ status: 'resolved', resolution_note: note }) });
    var d = await res.json();
    if (!res.ok) { err.textContent = d.error || 'Could not close.'; btn.disabled=false; btn.textContent='Resolve and close'; return; }
    _tickets[id] = Object.assign(_tickets[id]||{}, d);
    var i = _ticketRows.findIndex(function(r){ return r.id === id; });
    if (i !== -1) _ticketRows[i] = _tickets[id];
    closeResolveModal();
    openTicket(id);
    renderTickets();
    loadCounts();
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Resolve and close';
}
function closeTicket() {
  window._openTicketPhone = null;
  window._openTicketId = null;
  var lv = document.getElementById('ticket-list-view'); var dv = document.getElementById('ticket-detail-view');
  if (lv) lv.style.display = 'block';
  if (dv) dv.style.display = 'none';
  var c = document.getElementById('ticket-detail-content'); if (c) c.innerHTML = '';
}

// ── FOLLOW UPS ───────────────────────────────────────────────────────────────
var _followups = [];
function fuTypeLabel(t){ return t==='sales'?'Sales reach out':(t==='other'?'Other':'Schedule a tech'); }
var _fuFilter = null;
function fuDefaultFilter() {
  var owner = rwSeesAll();
  return { status: 'active', mine: !owner, group: !!owner };
}
async function loadFollowups() {
  var el = document.getElementById('followup-list');
  if (el) el.innerHTML = '<div class="hh-empty">Loading...</div>';
  if (!_fuFilter) _fuFilter = fuDefaultFilter();
  try {
    var res = await rwFetch('/api/follow-ups');
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load follow ups.</div>'; return; }
    _followups = await res.json();
    ensureCrTeam();
    renderFollowups();
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
function fuSet(key,val){ _fuFilter[key] = val; renderFollowups(); }
function renderFollowups() {
  var el = document.getElementById('followup-list');
  if (!el) return;
  var f = _fuFilter;
  window._openFollowups = _followups.filter(function(x){ return x.status === 'pending'; }).length;
  setBadge('followups', window._openFollowups);
  var rows = _followups.filter(function(x){
    var pend = x.status === 'pending';
    if (f.status === 'active' && !pend) return false;
    if (f.status === 'resolved' && pend) return false;
    // 'all' shows everything
    if (f.mine && !(window._rwUser && x.assigned_to === window._rwUser.id)) return false;
    return true;
  });
  var tb = listToolbar(f, [{v:'active',label:'Active'},{v:'resolved',label:'Resolved'},{v:'all',label:'All'}], 'fu');
  var rowFn = function(x){ return followupRowHtml(x, x.status !== 'pending'); };
  var empty = f.status === 'resolved' ? 'No resolved follow ups yet.'
    : f.status === 'all' ? 'No follow ups yet.'
    : 'No active follow ups. Nothing pending right now.';
  var body = !rows.length ? '<div class="hh-empty">' + empty + '</div>'
    : (f.group ? groupByAssignee(rows, rowFn) : rows.map(rowFn).join(''));
  el.innerHTML = tb + body;
}
function followupRowHtml(f, done) {
  var who = f.display_name || f.client_name || fmtPhone(f.phone_number) || 'Client';
  var typeChip = '<span class="hh-project">' + esc(fuTypeLabel(f.type)) + '</span>';
  var meta = 'Flagged by ' + esc(f.flagged_by || 'Andi') + (f.assigned_name ? ' · for ' + esc(f.assigned_name) : '') + (f.created_at ? ' · ' + esc(fmtTime(f.created_at)) : '') + (f.due_date ? ' · due ' + esc(fmtDueDate(f.due_date)) : '');
  var check = done ? '<div class="followup-check checked"></div>' : '<div class="followup-check" onclick="doResolveFollowup(' + f.id + ')"></div>';
  var rnote = (done && f.resolved_by) ? '<div class="followup-resolved-note">Resolved by ' + esc(f.resolved_by) + (f.resolved_at ? ' · ' + esc(fmtTime(f.resolved_at)) : '') + '</div>' : '';
  return '<div class="followup-row' + (done?' done':'') + '">' + check +
    '<div class="followup-body"><div class="followup-client">' + esc(who) + ' ' + typeChip + '</div>' +
    '<div class="followup-note">' + esc(f.note) + '</div>' +
    '<div class="followup-meta">' + meta + '</div>' + rnote + '</div></div>';
}
async function doResolveFollowup(id) {
  try { var res = await rwFetch('/api/follow-ups/' + id + '/resolve', { method:'POST' }); if (res.ok) await loadFollowups(); } catch (e) {}
}
// ── ATTACH NUMBER TO HOUSEHOLD (v1.17.0) ────────────────────────────────────
// Turns an unknown texting number into a person. Existing mode adds them to a home (last name
// defaults to that home's primary); New mode builds a household around them. The portal adopts
// the orphan phone row so opt in and the thread history come along.
var _at = { mode: 'existing', hh: null, matches: [] };

async function openAttach() {
  if (!window._currentPhone) return;
  _at = { mode: 'existing', hh: null, matches: [] };
  // Preselect the household when the orphan phone row already resolves to one.
  if (window._attachPreselect) _at.hh = { id: window._attachPreselect.id, name: window._attachPreselect.name };
  ['at-search','at-first','at-last','at-rel','at-project','at-address'].forEach(function(id){ var e=document.getElementById(id); if(e) e.value=''; });
  window._atAddr = null;
  document.getElementById('at-err').textContent = '';
  document.getElementById('at-results').innerHTML = '';
  document.getElementById('at-phone-line').textContent = 'Number: ' + fmtPhone(decodeURIComponent(window._currentPhone));
  atSetMode('existing');
  atRenderSelection();
  document.getElementById('at-overlay').classList.add('show');
  setTimeout(function(){ var n=document.getElementById(_at.hh ? 'at-first' : 'at-search'); if(n) n.focus(); }, 50);
  // Households power the search; load them if this session has not yet.
  if (!_households.length) { try { var r = await rwFetch('/api/households'); if (r.ok) _households = await r.json(); } catch (e) {} }
}
function closeAttach() { document.getElementById('at-overlay').classList.remove('show'); }

function atSetMode(m) {
  _at.mode = m;
  document.getElementById('at-mode-existing').classList.toggle('sel', m === 'existing');
  document.getElementById('at-mode-new').classList.toggle('sel', m === 'new');
  document.getElementById('at-existing-block').style.display = m === 'existing' ? '' : 'none';
  document.getElementById('at-new-block').style.display = m === 'new' ? '' : 'none';
  document.getElementById('at-last').placeholder = m === 'existing' ? 'Same as household if blank' : 'Last';
  document.getElementById('at-save-btn').textContent = m === 'existing' ? 'Add to household' : 'Create household';
}

function atSearch(q) {
  var box = document.getElementById('at-results');
  q = (q||'').toLowerCase().trim();
  if (!q) { box.innerHTML = ''; return; }
  var matches = (_households || []).filter(function(h){
    if (h.active === false) return false;
    var hay = (h.name||'') + ' ' + (h.project_name||'') + ' ' + (h.address||'') + ' ' +
      (h.people || []).map(function(p){ return (p.first_name||'')+' '+(p.last_name||''); }).join(' ');
    return hay.toLowerCase().indexOf(q) !== -1;
  }).slice(0, 8);
  _at.matches = matches;
  if (!matches.length) { box.innerHTML = '<div class="cr-result" style="cursor:default;color:var(--ink-soft);">No match. Switch to New household above.</div>'; return; }
  box.innerHTML = matches.map(function(h, i){
    var who = (h.people || []).map(function(p){ return ((p.first_name||'')+' '+(p.last_name||'')).trim(); }).filter(Boolean).join(', ');
    return '<div class="cr-result" onclick="atPick(' + i + ')">' + esc(h.name) +
      '<div class="cr-r-sub">' + esc(who || 'No people on file') + (h.project_name ? ' · ' + esc(h.project_name) : '') + '</div></div>';
  }).join('');
}
function atPick(i) {
  var h = _at.matches[i]; if (!h) return;
  _at.hh = { id: h.id, name: h.name };
  atRenderSelection();
}
function atClearSelection() { _at.hh = null; atRenderSelection(); var s = document.getElementById('at-search'); if (s) { s.value = ''; s.focus(); } document.getElementById('at-results').innerHTML = ''; }
function atRenderSelection() {
  var sel = document.getElementById('at-selected');
  var wrap = document.getElementById('at-search-wrap');
  var clr = document.getElementById('at-clear-sel');
  if (_at.hh) { sel.textContent = _at.hh.name; sel.style.display = ''; wrap.style.display = 'none'; clr.style.display = ''; }
  else { sel.style.display = 'none'; wrap.style.display = ''; clr.style.display = 'none'; }
}

async function submitAttach() {
  var btn = document.getElementById('at-save-btn');
  var err = document.getElementById('at-err');
  err.textContent = '';
  var first = hhVal('at-first'), last = hhVal('at-last');
  if (!first) { err.textContent = 'First name is required.'; return; }
  var body = { first_name: first, last_name: last, relationship: hhVal('at-rel') };
  if (_at.mode === 'existing') {
    if (!_at.hh) { err.textContent = 'Pick a household first.'; return; }
    body.household_id = _at.hh.id;
  } else {
    if (!last) { err.textContent = 'Last name is required for a new household.'; return; }
    body.project_name = hhVal('at-project');
    body.address = hhVal('at-address');
    body.address_street = (window._atAddr || {}).street || '';
    body.address_city = (window._atAddr || {}).city || '';
    body.address_state = (window._atAddr || {}).state || '';
    body.address_zip = (window._atAddr || {}).zip || '';
  }
  btn.disabled = true; btn.textContent = 'Saving...';
  try {
    var res = await rwFetch('/api/conversations/' + window._currentPhone + '/attach', {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
    });
    var data = await res.json();
    if (!res.ok) { err.textContent = data.error || 'Could not add them.'; btn.disabled = false; atSetMode(_at.mode); return; }
    closeAttach();
    _households = []; // stale now; reload on next use
    // Re-open the thread so the name, rail, and attach state all reflect the new person.
    openRealConv(window._currentPhone, (first + ' ' + (last || '')).trim());
    loadRealConversations();
  } catch (e) { err.textContent = 'Connection error.'; btn.disabled = false; atSetMode(_at.mode); }
}

// ── UNIFIED CREATE: ticket / follow up / both ────────────────────────────────
var _cr = { mode:'ticket', locked:false, phone:null, name:null, sel:null, isNew:false };
var _crTeam = null;
var _crPeople = [];

async function ensureCrTeam() {
  if (_crTeam) return;
  try { var r = await rwFetch('/api/team'); _crTeam = r.ok ? await r.json() : []; }
  catch (e) { _crTeam = []; }
  var opts = '<option value="">No one yet</option>' + _crTeam.map(function(u){
    return '<option value="' + u.id + '">' + esc((u.first_name||'') + ' ' + (u.last_name||'')) + '</option>';
  }).join('');
  document.querySelectorAll('.cr-assignee').forEach(function(sel){ sel.innerHTML = opts; });
}
async function ensureCrPeople() {
  try {
    if (!_households.length) { var r = await rwFetch('/api/households'); if (r.ok) _households = await r.json(); }
  } catch (e) {}
  _crPeople = [];
  (_households || []).forEach(function(h){
    (h.people || []).forEach(function(p){
      _crPeople.push({ household_id:h.id, household:h.name, phone:p.phone, name:((p.first_name||'')+' '+(p.last_name||'')).trim() || h.name });
    });
  });
}

// Phase C2: modes are independent toggles (any combo of ticket / followup / note). _cr.modes is a
// Set. crSetMode keeps old single-mode callers working by selecting exactly that one.
function crApplyModes() {
  var m = _cr.modes;
  ['ticket','followup','note'].forEach(function(x){
    var b = document.getElementById('cr-mode-'+x);
    if (b) b.classList.toggle('sel', m.has(x));
  });
  document.getElementById('cr-issue-block').style.display = m.has('ticket') ? '' : 'none';
  document.getElementById('cr-followup-block').style.display = m.has('followup') ? '' : 'none';
  var nb = document.getElementById('cr-note-block');
  if (nb) nb.style.display = (m.has('note') && _cr.noteAllowed) ? '' : 'none';
  var names = [];
  if (m.has('ticket')) names.push('ticket');
  if (m.has('followup')) names.push('follow up');
  if (m.has('note') && _cr.noteAllowed) names.push('note');
  document.getElementById('cr-title').textContent = names.length
    ? 'New ' + names.join(' + ')
    : 'Create';
}
function crToggleMode(x) {
  if (x === 'note' && !_cr.noteAllowed) return;
  if (_cr.modes.has(x)) _cr.modes.delete(x); else _cr.modes.add(x);
  crApplyModes();
}
function crSetMode(m) {
  _cr.modes = new Set(m === 'both' ? ['ticket','followup'] : [m]);
  crApplyModes();
}

function crResetClient() {
  _cr.sel = null; _cr.hh = null; _cr.person = null; _cr.isNew = false;
  var s = document.getElementById('cr-search'); if (s) s.value = '';
  document.getElementById('cr-results').innerHTML = '';
  document.getElementById('cr-selected').style.display = 'none';
  document.getElementById('cr-person-row').style.display = 'none';
  document.getElementById('cr-search-wrap').style.display = '';
  document.getElementById('cr-new-fields').style.display = 'none';
  ['cr-new-name','cr-new-phone','cr-new-email'].forEach(function(i){ var e=document.getElementById(i); if(e) e.value=''; });
}

// Dedicated-page create (Tickets page, Follow Ups page): single fixed mode, no toggles, no Note.
async function openCreate(mode) {
  _cr = { modes: new Set([mode||'ticket']), noteAllowed:false, noteHouseholdId:null, locked:false, phone:null, name:null, sel:null, hh:null, person:null, isNew:false };
  document.getElementById('cr-sub').textContent = mode==='followup' ? 'Add a follow up.' : 'Open a ticket.';
  document.getElementById('cr-modes').style.display = 'none';
  document.getElementById('cr-client-block').style.display = '';
  document.getElementById('cr-about').style.display = 'none';
  ['cr-issue','cr-note','cr-due','cr-hhnote'].forEach(function(i){ var e=document.getElementById(i); if(e) e.value=''; });
  document.getElementById('cr-type').value = 'tech';
  document.getElementById('cr-draft-note').style.display = 'none';
  document.getElementById('cr-err').textContent = '';
  crResetClient();
  crApplyModes();
  document.getElementById('cr-overlay').classList.add('show');
  ensureCrTeam();
  ensureCrPeople();
}

// Launched from inside a thread: client is known and locked, issue auto-drafts. All three
// toggles; Note is allowed when the thread resolves to a household.
async function openThreadCreate() {
  if (!window._currentPhone) return;
  _cr = { modes: new Set(['ticket']), noteAllowed: !!window._ctxHouseholdId, noteHouseholdId: window._ctxHouseholdId || null, locked:true, phone: window._currentPhone, name: window._currentName || 'this client', sel:null, hh:null, person:null, isNew:false };
  document.getElementById('cr-sub').textContent = 'For the client you are messaging.';
  document.getElementById('cr-modes').style.display = '';
  document.getElementById('cr-mode-note').style.display = _cr.noteAllowed ? '' : 'none';
  document.getElementById('cr-client-block').style.display = 'none';
  var about = document.getElementById('cr-about');
  about.innerHTML = (window._ctxHouseholdName ? esc(window._ctxHouseholdName) + '<br>' : '') + 'About: ' + esc(window._currentName || 'this client');
  about.style.display = '';
  ['cr-issue','cr-note','cr-due','cr-hhnote'].forEach(function(i){ var e=document.getElementById(i); if(e) e.value=''; });
  document.getElementById('cr-type').value = 'tech';
  document.getElementById('cr-err').textContent = '';
  crApplyModes();
  document.getElementById('cr-overlay').classList.add('show');
  ensureCrTeam();
  // auto-draft the issue from the conversation
  var note = document.getElementById('cr-draft-note');
  note.style.display = ''; note.textContent = 'Drafting from the conversation...';
  try {
    var res = await rwFetch('/api/draft-issue', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ phone: window._currentPhone }) });
    var data = await res.json();
    if (data && data.issue) { document.getElementById('cr-issue').value = data.issue; document.getElementById('cr-note').value = data.issue; }
    note.style.display = 'none';
  } catch (e) { note.style.display = 'none'; }
}

function closeCreate() { document.getElementById('cr-overlay').classList.remove('show'); }
function openAddFollowup() { openCreate('followup'); }

function crSearch(q) {
  var box = document.getElementById('cr-results');
  q = (q||'').toLowerCase().trim();
  if (!q) { box.innerHTML = ''; return; }
  var matches = (_households || []).filter(function(h){
    var hay = (h.name||'') + ' ' + (h.project_name||'') + ' ' +
      (h.people || []).map(function(p){ return (p.first_name||'')+' '+(p.last_name||'')+' '+(p.phone||''); }).join(' ');
    return hay.toLowerCase().indexOf(q) !== -1;
  }).slice(0, 8);
  if (!matches.length) { box.innerHTML = '<div class="cr-result" style="cursor:default;color:var(--ink-soft);">No match. Use the new client link below.</div>'; return; }
  box.innerHTML = matches.map(function(h, i){
    var who = (h.people || []).map(function(p){ return ((p.first_name||'')+' '+(p.last_name||'')).trim(); }).filter(Boolean).join(', ');
    return '<div class="cr-result" onclick="crPick(' + i + ')">' + esc(h.name) +
      '<div class="cr-r-sub">' + esc(who || 'No people on file') + (h.project_name ? ' · ' + esc(h.project_name) : '') + '</div></div>';
  }).join('');
  _cr._matches = matches;
}
function crPick(i) {
  var h = _cr._matches[i]; if (!h) return;
  crSetHousehold(h.id, h.name, h.people || []);
}
// Sets the chosen household, shows its pill, and fills the Client select with its people.
// Defaults to the first person with a number so notifications have someone to text.
function crSetHousehold(id, name, people) {
  var ppl = (people || []).filter(function(p){ return p.active !== false; }).map(function(p){
    return { name: ((p.first_name||'')+' '+(p.last_name||'')).trim() || name, phone: p.phone || p.phone_number || '' };
  });
  _cr.hh = { id: id, name: name, people: ppl };
  _cr.isNew = false;
  document.getElementById('cr-search-wrap').style.display = 'none';
  var s = document.getElementById('cr-selected');
  s.textContent = name;
  s.style.display = '';
  var sel = document.getElementById('cr-person');
  var def = -1;
  for (var i = 0; i < ppl.length; i++) { if (ppl[i].phone) { def = i; break; } }
  sel.innerHTML = '<option value="">Whole household</option>' + ppl.map(function(p, i){
    return '<option value="' + i + '">' + esc(p.name) + (p.phone ? '' : ' (no number)') + '</option>';
  }).join('');
  sel.value = def >= 0 ? String(def) : '';
  crPickPerson(sel.value);
  document.getElementById('cr-person-row').style.display = '';
}
function crPickPerson(v) {
  if (!_cr.hh) { _cr.person = null; return; }
  _cr.person = (v === '' || v == null) ? null : _cr.hh.people[parseInt(v,10)] || null;
}
function crShowNew() {
  _cr.isNew = true;
  document.getElementById('cr-search-wrap').style.display = 'none';
  document.getElementById('cr-new-fields').style.display = '';
  var typed = document.getElementById('cr-search').value.trim();
  if (typed) document.getElementById('cr-new-name').value = typed;
}
function crHideNew() { crResetClient(); }

function crClientPayload() {
  // Returns {client_name, household_id, phone_number, contact_email} or an {error}.
  if (_cr.locked) return { phone_number: decodeURIComponent(_cr.phone), client_name: _cr.name };
  if (_cr.hh) {
    var p = _cr.person;
    return { household_id: _cr.hh.id, phone_number: (p && p.phone) || '', client_name: p ? p.name : _cr.hh.name };
  }
  if (_cr.isNew) {
    var name = hhVal('cr-new-name'), ph = hhVal('cr-new-phone'), em = hhVal('cr-new-email');
    if (!name) return { error: 'Enter the client name.' };
    if (!ph && !em) return { error: 'Add a phone or email so they can be reached.' };
    return { client_name: name, phone_number: ph, contact_email: em };
  }
  return { error: 'Pick a household or add a new client.' };
}

async function submitCreate() {
  var btn = document.getElementById('cr-save-btn');
  var err = document.getElementById('cr-err');
  err.textContent = '';
  var m = _cr.modes;
  var wantNote = m.has('note') && _cr.noteAllowed;
  if (!m.has('ticket') && !m.has('followup') && !wantNote) { err.textContent = 'Pick what to create.'; return; }
  var client = (m.has('ticket') || m.has('followup')) ? crClientPayload() : {};
  if (client.error) { err.textContent = client.error; return; }
  var assigneeTicket = document.getElementById('cr-assignee-ticket').value || '';
  var assigneeFollowup = document.getElementById('cr-assignee-followup').value || '';
  var issue = hhVal('cr-issue'), note = hhVal('cr-note'), hhnote = hhVal('cr-hhnote');
  if (m.has('ticket') && !issue) { err.textContent = 'Describe the issue.'; return; }
  if (m.has('followup') && !note) { err.textContent = 'Add the follow up.'; return; }
  if (wantNote && !hhnote) { err.textContent = 'Write the note.'; return; }
  var noteHousehold = _cr.noteHouseholdId || (_cr.hh && _cr.hh.id) || null;
  if (wantNote && !noteHousehold) { err.textContent = 'A note needs a household.'; return; }
  btn.disabled = true; btn.textContent = 'Creating...';
  try {
    if (m.has('ticket')) {
      var tb = Object.assign({}, client, { summary: issue, assigned_to: assigneeTicket });
      var tr = await rwFetch('/api/tickets', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(tb) });
      var td = await tr.json();
      if (!tr.ok) { err.textContent = td.error || 'Could not create ticket.'; btn.disabled=false; btn.textContent='Create'; return; }
    }
    if (m.has('followup')) {
      var fb = Object.assign({}, client, { note: note, type: document.getElementById('cr-type').value, due_date: hhVal('cr-due'), assigned_to: assigneeFollowup });
      var fr = await rwFetch('/api/follow-ups', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(fb) });
      var fd = await fr.json();
      if (!fr.ok) { err.textContent = fd.error || 'Could not create follow up.'; btn.disabled=false; btn.textContent='Create'; return; }
    }
    if (wantNote) {
      var nr = await rwFetch('/api/households/' + noteHousehold + '/notes', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ note: hhnote }) });
      var nd = await nr.json();
      if (!nr.ok) { err.textContent = nd.error || 'Could not save the note.'; btn.disabled=false; btn.textContent='Create'; return; }
    }
    closeCreate();
    loadCounts();
    var active = document.querySelector('.panel.active');
    if (active && active.id === 'panel-tickets') loadTickets();
    if (active && active.id === 'panel-followups') loadFollowups();
    // Refresh an open household so the Activity stream shows the new entries. In place, no push.
    if (typeof _hd !== 'undefined' && _hd && isShown('hh-detail-view')) openHouseholdDetail(_hd.id);
  } catch (e) { err.textContent = 'Connection error.'; }
  btn.disabled = false; btn.textContent = 'Create';
}

// ── ANALYTICS + COUNTS ───────────────────────────────────────────────────────
function statCardHtml(label, val) {
  return '<div class="analytics-card"><div class="analytics-title">' + label + '</div><div style="font-size:1.8rem;font-weight:700;color:var(--ink);">' + (val||0) + '</div></div>';
}
async function loadAnalytics() {
  var el = document.getElementById('analytics-body');
  if (el) el.innerHTML = '<div class="hh-empty">Loading...</div>';
  try {
    var res = await rwFetch('/api/stats');
    if (!res.ok) { el.innerHTML = '<div class="hh-empty">Could not load analytics.</div>'; return; }
    var s = await res.json();
    el.innerHTML = '<div class="analytics-grid">' +
      statCardHtml('Conversations', s.total_conversations) +
      statCardHtml('Open tickets', s.open_tickets) +
      statCardHtml('Resolved tickets', s.resolved_tickets) +
      statCardHtml('Follow ups pending', s.follow_ups) +
      '</div>';
  } catch (e) { el.innerHTML = '<div class="hh-empty">Connection error.</div>'; }
}
async function loadCounts() {
  try {
    var res = await rwFetch('/api/stats');
    if (!res.ok) return;
    var s = await res.json();
    window._openTickets = s.open_tickets || 0;
    window._schedTickets = s.scheduled_tickets || 0;
    window._waitingTickets = s.waiting_tickets || 0;
    window._openFollowups = s.follow_ups || 0;
    tkBadgeCounts();
    setBadge('followups', window._openFollowups);
  } catch (e) {}
  // v1.62.0: the home panel refreshes on the same beat as the badges, so a new ticket
  // or a closed session moves the first screen without a manual reload.
  loadHomeStats();
}

// ── HOME STATS (v1.62.0) ─────────────────────────────────────────────────────
// The home panel was hardcoded HTML with no element ids, so nothing could ever bind
// to it. It is now driven entirely by GET /api/home-stats.
//
// THE ONE RULE HERE: null renders as an em space, never as a zero and never as a
// placeholder. A new integrator with no traffic yet must see a blank, because a
// fabricated first impression is exactly what this build exists to remove. hsNum and
// hsPct are the only two writers, so that rule cannot be broken in one spot and kept
// in another.
// v1.63.0: the window toggle came off the topbar with the count tiles, so the panel
// states its own window. 30 days is the default because a shop texting a few times a
// week has an empty 24 hour view, and an empty first screen is the wrong first
// impression when the data is real and simply young.
var _hsWindow = '30d';

function hsSet(id, text) { var el = document.getElementById(id); if (el) el.textContent = text; }
function hsNum(id, v, suffix) {
  hsSet(id, (v === null || v === undefined) ? '\u2003' : (v + (suffix || '')));
}
function hsPct(id, v) { hsSet(id, (v === null || v === undefined) ? '\u2003' : v + '%'); }
// Minutes read badly past an hour and badly under one, so they are rendered in the unit
// a person would actually say out loud.
function hsMinutes(id, m) {
  if (m === null || m === undefined) { hsSet(id, '\u2003'); return; }
  if (m < 1) { hsSet(id, Math.round(m * 60) + ' sec'); return; }
  if (m < 90) { hsSet(id, Math.round(m) + ' min'); return; }
  var h = m / 60;
  if (h < 48) { hsSet(id, (Math.round(h * 10) / 10) + ' hrs'); return; }
  hsSet(id, (Math.round(h / 24 * 10) / 10) + ' days');
}
function hsWindowLabel(w) { return w === '24h' ? 'Last 24 hours' : (w === '7d' ? 'Last 7 days' : 'Last 30 days'); }

// World is a real planned scope, not a stub. It is rendered disabled rather than hidden
// so the integrator can see it is coming, and it turns on when the shared resolution
// pool carries an integrator id. Clicking the enabled one is a no-op today.
function hsScope(which) { if (which !== 'integrator') return; loadHomeStats(); }

var HS_CAT_COLORS = ['var(--green)', '#2D7DD2', '#b45309', '#cc4400', '#7c3aed', '#888780'];

// v1.76.0: A PARENT ROW THAT OPENS.
// The panel used to render one flat list off the old symptom vocabulary, where reboot_required sat
// beside network_internet as though they were the same kind of thing. One is an OUTCOME and the
// other is a place in the house. Now the row is the PARENT and its subcategories live underneath it,
// revealed on click.
//
// THE PARENT BAR IS THE SUM OF ITS CHILDREN, always, so opening a row can never show numbers that
// do not add up to the row that opened. The child bars are drawn against the PARENT total rather
// than against the largest child, because the question a child bar answers is what share of this
// category it is, not how it ranks against its siblings.
//
// UNCATEGORISED IS ITS OWN ROW and is never dropped. That rule is why the v1.64.0 hero could say 11
// conversations while the categories summed to 9, and it costs one row to keep honest.
//
// A HIDDEN PARENT IS NOT RENDERED BUT STILL COUNTS in the total. A number that changes when somebody
// toggles a visibility checkbox is not a number anybody can trust.
var _hsOpenCat = {};
function hsToggleCat(elId, key) {
  var k = elId + ':' + key;
  _hsOpenCat[k] = !_hsOpenCat[k];
  var kid = document.getElementById('hskids-' + elId + '-' + key);
  var car = document.getElementById('hscar-' + elId + '-' + key);
  if (kid) kid.style.display = _hsOpenCat[k] ? '' : 'none';
  if (car) car.style.transform = _hsOpenCat[k] ? 'rotate(90deg)' : '';
}

function hsBars(elId, rows, emptyMsg) {
  var el = document.getElementById(elId);
  if (!el) return;
  if (!rows || !rows.length) {
    el.innerHTML = '<div class="eq-notes" style="font-style:italic;">' + emptyMsg + '</div>';
    return;
  }
  // Hidden parents are dropped from the DISPLAY only. Their counts are already inside whatever
  // total the portal computed the percentages against, which is the point.
  var hidden = {};
  tkCategories().forEach(function(c){ if (c.visible === false) hidden[c.key] = true; });

  var html = rows.filter(function(c){ return !hidden[c.category]; }).map(function(c, i) {
    var color = HS_CAT_COLORS[i % HS_CAT_COLORS.length];
    var kids = Array.isArray(c.subcategories) ? c.subcategories : [];
    var key = String(c.category || 'uncategorized');
    var open = _hsOpenCat[elId + ':' + key];
    var caret = kids.length
      ? '<span id="hscar-' + elId + '-' + esc(key) + '" style="display:inline-block;width:0.7rem;' +
        'font-size:0.6rem;color:var(--ink-soft);transition:transform 0.12s;' +
        (open ? 'transform:rotate(90deg);' : '') + '">&#9654;</span>'
      : '<span style="display:inline-block;width:0.7rem;"></span>';
    var clickable = kids.length ? ' style="cursor:pointer;" onclick="hsToggleCat(\'' + elId + '\',\'' + key + '\')"' : '';

    var row = '<div class="issue-row"' + clickable + '>' +
      '<div class="issue-label">' + caret + ' ' + esc(hsCatLabel(c.category)) + '</div>' +
      '<div class="issue-bar-wrap"><div class="issue-bar" style="width:' + c.pct + '%;background:' + color + ';"></div></div>' +
      '<div class="issue-pct">' + c.count + '</div></div>';

    if (kids.length) {
      var parentTotal = c.count || 0;
      row += '<div id="hskids-' + elId + '-' + esc(key) + '"' + (open ? '' : ' style="display:none;"') + '>' +
        kids.map(function(k) {
          // Share OF THE PARENT, not of the biggest sibling. Guarded against a zero parent so a
          // count that arrives before its total cannot produce a NaN width.
          var w = parentTotal > 0 ? Math.round((k.count / parentTotal) * 100) : 0;
          return '<div class="issue-row" style="padding-left:1.15rem;opacity:0.85;">' +
            '<div class="issue-label" style="font-size:0.74rem;">' + esc(tkSubLabel(c.category, k.subcategory)) + '</div>' +
            '<div class="issue-bar-wrap"><div class="issue-bar" style="width:' + w + '%;background:' + color + ';opacity:0.55;"></div></div>' +
            '<div class="issue-pct" style="font-size:0.74rem;">' + k.count + '</div></div>';
        }).join('') + '</div>';
    }
    return row;
  }).join('');
  el.innerHTML = html;
}

// Uncategorised arrives as a null or empty key and has to read as a real row rather than a blank
// label, because a blank label looks like a rendering fault and this row is a monitoring signal.
function hsCatLabel(key) {
  if (!key || key === 'uncategorized' || key === 'uncategorised') return 'Uncategorized';
  return tkCatLabel(key);
}

async function loadHomeStats() {
  try {
    // v1.76.0: the taxonomy labels come off the vocab read, so it has to be in hand before the
    // bars render or every parent would draw its raw key for one frame. Cached after the first
    // call, so this is one round trip per session and not one per panel load.
    await loadTicketVocab();
    var res = await rwFetch('/api/home-stats?window=' + encodeURIComponent(_hsWindow));
    if (!res.ok) return;
    var s = await res.json();

    hsNum('hs-convs', s.conversations_handled);
    hsNum('hs-msgs', s.messages_handled);
    hsPct('hs-rate', s.resolution_rate);
    hsSet('hs-window', hsWindowLabel(s.window || _hsWindow));

    var t = s.resolution_trend || {};
    hsPct('hs-t7', t.d7); hsPct('hs-t30', t.d30); hsPct('hs-tall', t.all);

    // The count is the felt number ("seven conversations while you were closed") and the
    // share gives it scale, so both are shown rather than one standing in for the other.
    hsNum('hs-ah', s.after_hours_conversations);
    hsPct('hs-ahpct', s.after_hours_pct);
    hsNum('hs-overnight', s.overnight_conversations);
    hsNum('hs-weekend', s.weekend_conversations);
    hsNum('hs-hh', s.households);
    hsNum('hs-hh7', s.households_active_7d);

    // v1.66.0: the resolution row FILLS IN. It has been deliberately blank since v1.64.0 waiting
    // for a clock that could stop. The note now carries the sample size instead of a promise,
    // because this average only counts tickets resolved since the clock existed and an owner
    // reading one number off two tickets should be able to see that it is two tickets.
    hsMinutes('hs-tkresp', s.ticket_response_minutes);
    // v1.90.0: an empty response time says why, the same way the resolution row does.
    var respNote = document.getElementById('hs-tkresp-note');
    if (respNote) respNote.style.display = (s.ticket_response_minutes === null || s.ticket_response_minutes === undefined) ? '' : 'none';
    hsMinutes('hs-tkres', s.ticket_resolution_minutes);
    var note = document.getElementById('hs-tkres-note');
    if (note) {
      var n = s.ticket_resolution_n;
      if (s.ticket_resolution_minutes === null || s.ticket_resolution_minutes === undefined) {
        note.textContent = 'fills in as tickets resolve';
        note.style.display = '';
      } else {
        note.textContent = 'working time only, from ' + n + ' ticket' + (n === 1 ? '' : 's');
        note.style.display = '';
      }
    }

    hsNum('hs-open', s.open_tickets);
    hsNum('hs-sched', s.scheduled_tickets);
    hsNum('hs-fu', s.follow_ups);

    hsBars('hs-issues', s.andi_issues, 'Nothing yet. This fills as Andi closes conversations.');
    // v1.90.0: the card's total is every ticket opened in the window (portal 1.82.0), never the sum
    // of the bars. An older portal sends no tickets_opened, and then the line stays hidden.
    var catTotal = document.getElementById('hs-cats-total');
    var tOpened = (typeof s.tickets_opened === 'number') ? s.tickets_opened : null;
    if (catTotal) {
      if (tOpened === null) { catTotal.style.display = 'none'; }
      else {
        catTotal.textContent = tOpened + ' ticket' + (tOpened === 1 ? '' : 's') + ', ' + hsWindowLabel(s.window || _hsWindow).toLowerCase();
        catTotal.style.display = '';
      }
    }
    hsBars('hs-cats', s.categories, tOpened === 0 ? 'No tickets in this window.' : 'No tickets categorized yet.');
  } catch (e) {}
}

// ── MODE ─────────────────────────────────────────────────────────────────────
// v1.63.0: the topbar time toggle came off with the count tiles (windowing belongs in
// Analytics). setTime is kept as a no-op shim rather than deleted because nothing else
// references it today and a stray onclick in a cached page should not throw.
function setTime(btn) {
  if (!btn) return;
  document.querySelectorAll('.time-btn').forEach(function(b){b.classList.remove('active');});
  btn.classList.add('active');
  var t = (btn.textContent || '').trim().toLowerCase();
  _hsWindow = (t === '24h' || t === '7d') ? t : '30d';
  loadHomeStats();
}
// v1.89.0: the installed app's title bar is painted from theme-color, so it follows the topbar
// colour in both themes instead of the navy the manifest shipped with in June.
function syncThemeColor() {
  var meta = document.querySelector('meta[name="theme-color"]');
  if (!meta) return;
  var c = getComputedStyle(document.body).getPropertyValue('--white').trim();
  meta.setAttribute('content', c || (document.body.classList.contains('dark') ? '#1e1e1c' : '#ffffff'));
}
function toggleMode() {
  var dark = document.body.classList.toggle('dark');
  document.getElementById('mode-btn').textContent = dark ? '☀️' : '🌙';
  localStorage.setItem('rw-mode', dark ? 'dark' : 'light');
  syncThemeColor();
}
if (localStorage.getItem('rw-mode')==='dark') { document.body.classList.add('dark'); document.getElementById('mode-btn').textContent='☀️'; }
syncThemeColor();
document.getElementById('login-pw').addEventListener('keydown', function(e) { if (e.key==='Enter') doLogin(); });
document.getElementById('su-pw').addEventListener('keydown', function(e) { if (e.key==='Enter') doSignup(); });
document.getElementById('su-pw2').addEventListener('keydown', function(e) { if (e.key==='Enter') doSignup(); });
initPwEyes();
/* ============================================================
   PWA Slice A — mobile behavior + service worker (v1.32.0).
   No-op on desktop: every action is guarded by the phone media
   query, and the body classes it sets only have CSS effect there.
   ============================================================ */
(function(){
  var mq = window.matchMedia('(max-width: 768px)');
  function isMobile(){ return mq.matches; }

  // shared scrim + floating rail-close, created once and appended to body
  var scrim = document.createElement('div');
  scrim.className = 'm-scrim';
  scrim.addEventListener('click', function(){ closeNav(); closeRail(); });
  document.body.appendChild(scrim);

  function closeNav(){ document.body.classList.remove('m-nav-open'); }
  function openRail(){ if(isMobile()) document.body.classList.add('m-rail-open'); }
  function closeRail(){ document.body.classList.remove('m-rail-open'); }
  window.mToggleNav = function(){ document.body.classList.toggle('m-nav-open'); };

  document.addEventListener('click', function(e){
    if(!isMobile()) return;
    // tapping a nav destination or an avatar-menu item closes the drawer
    if(e.target.closest('.sidebar .nav-item') || e.target.closest('.sidebar .user-menu-item')){
      setTimeout(closeNav, 0);
    }
    // tap the contact name in a thread header to slide the household rail in,
    // but only when the active view actually has a rail
    if(e.target.closest('.detail-name') && document.querySelector('.panel.active .equipment-panel')){
      openRail();
    }
  });

  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){ closeNav(); closeRail(); }
  });

  // swipe to dismiss the overlays: swipe right closes the right-slide rail,
  // swipe left closes the left-slide menu drawer. Threshold + mostly-horizontal
  // so a vertical scroll inside either panel never triggers a close.
  var swStartX = 0, swStartY = 0, swTarget = null;
  document.addEventListener('touchstart', function(e){
    if(!isMobile() || !e.touches.length){ swTarget = null; return; }
    var t = e.touches[0]; swStartX = t.clientX; swStartY = t.clientY;
    var navOpen = document.body.classList.contains('m-nav-open');
    var railOpen = document.body.classList.contains('m-rail-open');
    if(railOpen && e.target.closest('.equipment-panel')) swTarget = 'rail';
    else if(navOpen && e.target.closest('.sidebar')) swTarget = 'nav';
    else if(!railOpen && !navOpen && document.body.classList.contains('m-thread') && swStartX <= 24) swTarget = 'back';
    else swTarget = null;
  }, { passive:true });
  document.addEventListener('touchend', function(e){
    if(!isMobile() || !swTarget || !e.changedTouches.length) return;
    var t = e.changedTouches[0];
    var dx = t.clientX - swStartX, dy = t.clientY - swStartY;
    if(Math.abs(dx) > 55 && Math.abs(dx) > Math.abs(dy) * 1.4){
      if(swTarget === 'rail' && dx > 0) closeRail();
      if(swTarget === 'nav'  && dx < 0) closeNav();
      // v1.96.0: a browser tab and Android already step back natively through the same history; doing it here too went back twice.
      if(swTarget === 'back' && dx > 0 && typeof goBack === 'function' && window.navigator.standalone === true) goBack();
    }
    swTarget = null;
  }, { passive:true });

  // keyboard-aware thread height: size the thread to the visible viewport so the
  // docked compose bar sits above the keyboard. Update on RESIZE only (not scroll)
  // and never force-scroll here, or it fights the user's finger (scratchy scroll).
  function syncVH(){
    if(window.visualViewport){
      document.documentElement.style.setProperty('--m-vh', window.visualViewport.height + 'px');
      document.documentElement.style.setProperty('--m-top', window.visualViewport.offsetTop + 'px');
    }
  }
  if(window.visualViewport){
    window.visualViewport.addEventListener('resize', syncVH);
    window.visualViewport.addEventListener('scroll', syncVH);
  }
  window.addEventListener('resize', syncVH);
  syncVH();
  // land on the newest message once, just after the keyboard opens
  document.addEventListener('focusin', function(e){
    if(isMobile() && e.target && e.target.id === 'reply-input'){
      document.body.classList.add('m-kb');
      setTimeout(function(){
        var t = document.querySelector('.panel.active #live-thread') ||
                document.querySelector('.panel.active .sms-thread');
        if(t) t.scrollTop = t.scrollHeight;
      }, 320);
    }
  });
  document.addEventListener('focusout', function(e){
    if(e.target && e.target.id === 'reply-input') document.body.classList.remove('m-kb');
  });

  // drive body.m-in-detail off the three detail views; close the rail on Back
  // visibility check that works even when the element is position:fixed
  // (offsetParent is null for fixed elements, so we use client rects instead)
  function shown(el){ return !!(el && el.style.display !== 'none' && el.getClientRects().length); }
  var detailIds = ['conv-detail-view','ticket-detail-view','hh-detail-view'];
  function anyDetailShown(){
    return detailIds.some(function(id){ return shown(document.getElementById(id)); });
  }
  function syncDetail(){
    var inDetail = anyDetailShown();
    document.body.classList.toggle('m-in-detail', inDetail);
    // thread-only lock: conversation or ticket detail (these have a compose bar)
    var inThread = shown(document.getElementById('conv-detail-view')) ||
                   shown(document.getElementById('ticket-detail-view'));
    document.body.classList.toggle('m-thread', !!inThread);
    if(!inDetail) closeRail();
  }
  var mo = new MutationObserver(syncDetail);
  detailIds.forEach(function(id){
    var el = document.getElementById(id);
    if(el) mo.observe(el, { attributes:true, attributeFilter:['style'] });
  });
  document.querySelectorAll('.panel').forEach(function(p){
    mo.observe(p, { attributes:true, attributeFilter:['class'] });
  });
  mq.addEventListener('change', function(){
    if(!isMobile()){ closeNav(); closeRail(); document.body.classList.remove('m-in-detail','m-thread'); }
    else { syncDetail(); }
  });
  syncDetail();

  // on phone the Dashboard overview is hidden from the menu, so when the app
  // opens, flip the default landing from Dashboard to Conversations (the worklist).
  function mobileLanding(){
    if(!isMobile()) return;
    var dash = document.getElementById('panel-dashboard');
    if(dash && dash.classList.contains('active') && typeof nav === 'function' && typeof navItem === 'function'){
      var ci = navItem('conversations');
      if(ci) nav('conversations', ci);
    }
  }
  // v1.60.0: a push tap on a cold start arrives as #thread=PHONE. Consume it once the app is
  // actually visible (post login), open the conversation, and clear the hash so a refresh does
  // not re open it. Runs on phone AND desktop.
  function consumeThreadHash(){
    var m = (location.hash || '').match(/^#thread=(.+)$/);
    if(!m) return;
    history.replaceState(null, '', location.pathname);
    setTimeout(function(){ if (typeof pushOpenThread === 'function') pushOpenThread(decodeURIComponent(m[1])); }, 250);
  }
  // v1.93.0: A PAGE LINK. The on call text and the Slack posts link ?ticket=N, or ?page=N when the handoff had no
  // ticket. Never a phone in the link. Kept through the login (the app only reads it once it is visible), consumed
  // once, then cleared so a refresh does not reopen it.
  function consumePageLink(){
    var q = new URLSearchParams(location.search);
    var tk = q.get('ticket'), pg = q.get('page');
    if(!tk && !pg) return;
    q.delete('ticket'); q.delete('page');
    var rest = q.toString();
    history.replaceState(null, '', location.pathname + (rest ? '?' + rest : '') + location.hash);
    setTimeout(async function(){
      try {
        if (tk && /^\d+$/.test(tk) && typeof enterTicket === 'function') { enterTicket(Number(tk)); return; }
        if (pg && /^\d+$/.test(pg)) {
          var res = await rwFetch('/api/oncall/pages/' + pg);
          if (!res.ok) return;
          var d = await res.json();
          if (d.ticket_id && typeof enterTicket === 'function') enterTicket(Number(d.ticket_id));
          else if (d.thread_key && typeof pushOpenThread === 'function') pushOpenThread(d.thread_key);
        }
      } catch (e) {}
    }, 250);
  }
  var appEl = document.getElementById('app');
  if(appEl){
    var appObs = new MutationObserver(function(){
      if(appEl.style.display !== 'none'){ setTimeout(mobileLanding, 0); consumeThreadHash(); consumePageLink(); }
    });
    appObs.observe(appEl, { attributes:true, attributeFilter:['style'] });
    if(appEl.style.display !== 'none'){ mobileLanding(); consumeThreadHash(); consumePageLink(); }
  }

  // installable app + offline shell
  if('serviceWorker' in navigator){
    window.addEventListener('load', function(){
      navigator.serviceWorker.register('/sw.js').catch(function(err){
        console.warn('SW registration failed:', err);
      });
    });
  }
})();
</script>
<script>
/* ── Equipment section (dashboard half of the sales-order parser). The PDF is parsed in the
   browser with pdf.js; rows are POSTed to the portal equipment routes. Layout A: collapsible
   room rows, integrator/client lens, inline edit, gap flags. Reads _hd.equipment + _hd.systems. */
var _eqLens = 'int';
var _pdfjsLoading = null;

function eqEsc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

/* ---------- display grouping ---------- */
// 1.56.0: a display requires category equipment, a real display word, and no lift/mount/module noise;
// the tv token gets a leading boundary so AppleTV never counts as a television.
function eqIsDisplay(r){
  if(r.category&&r.category!=='equipment') return false;
  var d=((r.description||'')+' '+(r.product_type||'')).toLowerCase();
  if(/lift|mount|module|enclosure|bracket|apple ?tv/.test(d)) return false;
  return /\btv\b|television|\bframe\b|\bqled\b|\boled\b|mini led|terrace|outdoor rated/.test(d);
}
// 1.56.0: sources (streamers, servers, receivers feeding the video system) are their own kind.
function eqIsSource(d){ return /apple ?tv|appletv|\broku\b|kaleidescape|\bdirectv\b|cable box|satellite receiver|music server|streaming stick/.test(d); }
function eqGroup(equipment){
  var rooms=[], house=[], idx={};
  (equipment||[]).forEach(function(r){
    var inHouse = r.section_kind==='house';
    var key=(inHouse?'H:':'R:')+(r.room||'Unfiled');
    if(!idx[key]){ idx[key]={ key:key, room:r.room||'Unfiled', label:(r.room_label||r.room||'Unfiled'), devices:[] }; (inHouse?house:rooms).push(idx[key]); }
    idx[key].devices.push(r);
  });
  return { rooms:rooms, house:house };
}
// 1.50.0 (slice 4): group from the real room model (h.rooms + h.buildings) instead of the flat as-sold
// room string. Devices hang off their room via room_id; house/property-wide gear (room_id null) stays in
// its own bucket. A device whose room_id is not in the model (should not happen post-backfill) falls back
// to a string-keyed group so nothing ever vanishes. Each room keeps its as-sold name as the rename anchor.
function eqGroupModel(h){
  var rooms=h.rooms||[], devs=h.equipment||[];
  var byId={}, roomGroups=[], houseGroups=[], hIdx={}, orphans=[], oIdx={};
  rooms.forEach(function(rm){
    var g={ room_id:rm.id, room:rm.as_sold_name||rm.name||'', label:rm.name||rm.as_sold_name||'Room',
            room_number:rm.room_number||null, building_id:rm.building_id||null, level:rm.level||null, devices:[] };
    byId[rm.id]=g; roomGroups.push(g);
  });
  devs.forEach(function(r){
    if(r.section_kind==='house'){ var hk=(r.building_id||'')+'|'+(r.room||'House'); if(!hIdx[hk]){ hIdx[hk]={ room_id:null, room:r.room||'House', label:r.room_label||r.room||'House', building_id:r.building_id||null, devices:[] }; houseGroups.push(hIdx[hk]); } hIdx[hk].devices.push(r); return; }
    if(r.room_id!=null && byId[r.room_id]){ byId[r.room_id].devices.push(r); return; }
    var ok=r.room||'Unfiled'; if(!oIdx[ok]){ oIdx[ok]={ room_id:null, room:r.room||'Unfiled', label:r.room_label||r.room||'Unfiled', room_number:null, building_id:null, level:null, devices:[] }; orphans.push(oIdx[ok]); } oIdx[ok].devices.push(r);
  });
  return { rooms:roomGroups.concat(orphans), house:houseGroups, buildings:h.buildings||[] };
}
// Render rooms as Building > Level > Room. Buildings and levels are progressive: until the integrator
// assigns them every room is unassigned, so this reads as a flat room list (today's look) but driven by the
// model and showing the numbers. Building headers appear once buildings exist; level headers once a room in
// that group carries a level. Null building collects into an "Unassigned" group, shown last.
function eqRoomsHierarchyHtml(grp){
  var rooms=grp.rooms||[], buildings=grp.buildings||[];
  if(_eqChipFilter) rooms=rooms.filter(function(g){ return eqGroupHasCat(g,_eqChipFilter); });
  if(_eqChipFilter && !rooms.length) return '<div class="eq-busy">No rooms with '+eqEsc(eqChipLabel(_eqChipFilter))+'.</div>';
  function roomList(list){ return list.map(eqRoomRowHtml).join(''); }
  function levelWrap(list){
    if(!list.some(function(g){ return g.level; })) return roomList(list);
    var order=[], byLvl={};
    list.forEach(function(g){ var L=g.level||'__nolevel__'; if(!byLvl[L]){ byLvl[L]=[]; order.push(L); } byLvl[L].push(g); });
    return order.map(function(L){ var head=(L==='__nolevel__')?'':'<div class="eq-level">'+eqEsc(L)+'</div>'; return head+roomList(byLvl[L]); }).join('');
  }
  if(!buildings.length) return levelWrap(rooms);
  var html='';
  buildings.forEach(function(b){
    var inB=rooms.filter(function(g){ return g.building_id===b.id; });
    if(inB.length) html+='<div class="eq-building">'+eqEsc(b.name)+
      '<span class="eq-bld-tools"><span title="Rename building" onclick="eqRenameBuilding('+b.id+')">✎</span>'+
      '<span title="Delete building" onclick="eqDeleteBuilding('+b.id+')">✕</span></span></div>'+levelWrap(inB);
  });
  var un=rooms.filter(function(g){ return !g.building_id; });
  if(un.length) html+='<div class="eq-building unassigned">Unassigned</div>'+levelWrap(un);
  return html;
}
function eqRoomChips(g){
  var tv=0, sh=0, has={};
  g.devices.forEach(function(r){
    var c=eqChipCat(r); if(!c) return;
    if(c==='tv') tv+=(r.qty||1);
    else if(c==='shade') sh+=1;
    else has[c]=true;
  });
  var out='';
  if(tv===1) out+='<span class="eq-chip tv">TV</span>';
  else if(tv>1) out+='<span class="eq-chip tv"><span class="n">'+tv+'</span>TVs</span>';
  if(has.audio) out+='<span class="eq-chip au">audio</span>';
  if(sh===1) out+='<span class="eq-chip sh">shade</span>';
  else if(sh>1) out+='<span class="eq-chip sh"><span class="n">'+sh+'</span>shades</span>';
  if(has.lighting) out+='<span class="eq-chip li">lighting</span>';
  if(has.control) out+='<span class="eq-chip co">control</span>';
  if(has.security) out+='<span class="eq-chip se">security</span>';
  if(has.camera) out+='<span class="eq-chip ca">cameras</span>';
  if(has.network) out+='<span class="eq-chip nw">network</span>';
  return out;
}
// 1.54.0 (slice 4 piece 4): a DISPLAY-ONLY chip classifier. Device kind only distinguishes video/audio/
// shade/control/other, so lighting fixtures and the camera/network/security gear buried in control/other are
// teased apart here by keyword for the chips and the filter. This never touches stored data, so a mis-fire is
// only a cosmetic chip, not a record change. Most specific categories win first.
function eqChipCat(r){
  if(!r||r.category!=='equipment') return null;
  // 1.58.0: kind video includes NVX decoders and TV lifts; the TV chip counts DISPLAYS only
  if(r.kind==='video') return eqIsDisplay(r)?'tv':null;
  if(r.kind==='audio') return 'audio';
  if(r.kind==='shade') return 'shade';
  if(r.kind==='source') return null;
  if(r.kind==='security') return 'security';
  if(r.kind==='surveillance') return 'camera';
  if(r.kind==='network') return 'network';
  if(r.kind==='lighting_control'||r.kind==='lighting_fixture') return 'lighting';
  var d=((r.description||'')+' '+(r.product_type||'')+' '+(r.manufacturer||'')+' '+(r.model||'')).toLowerCase();
  if(/camera|doorbell|\bnvr\b|surveillance/.test(d)) return 'camera';
  if(/access point|\bunifi\b|\brouter\b|network switch|poe switch|\bgateway\b|wireless ap\b/.test(d)) return 'network';
  if(/\bdsc\b|qolsys|alarm panel|\balarm\b|door sensor|motion sensor|smart lock|\bdeadbolt\b/.test(d)) return 'security';
  if(/light|fixture|downlight|recessed|\bled\b|\blamp\b|sconce|\bcove\b|\btrim\b|housing|\bdmf\b|\bwac\b|lucifer/.test(d)) return 'lighting';
  if(r.kind==='control') return 'control';
  return null;
}
function eqChipLabel(c){ return {tv:'TV',audio:'audio',shade:'shades',lighting:'lighting',control:'control',security:'security',camera:'cameras',network:'network'}[c]||c; }
function eqGroupHasCat(g,cat){ return (g.devices||[]).some(function(r){ return eqChipCat(r)===cat; }); }
// Non-room buckets (expenses, freight, building-to-building wiring) get backfilled as rooms but are not
// real places, so they are excluded from the merge target list and from Andi's match suggestions.
function eqIsNonRoom(name){ return /expense|wiring|\blabor\b|freight|\btax\b|discount|misc|out of area|travel|building to building|adjustment/i.test(name||''); }
var _eqChipFilter=null;
function eqChipFilterBar(grp){
  var present={};
  (grp.rooms||[]).concat(grp.house||[]).forEach(function(g){ (g.devices||[]).forEach(function(r){ var c=eqChipCat(r); if(c) present[c]=true; }); });
  var cats=['tv','audio','shade','lighting','control','security','camera','network'].filter(function(c){return present[c];});
  if(cats.length<2) return '';
  var all='<span class="eq-fchip all'+(_eqChipFilter?'':' on')+'" onclick="eqSetChipFilter(null)">All</span>';
  var chips=cats.map(function(c){ return '<span class="eq-fchip '+c+(_eqChipFilter===c?' on':'')+'" onclick="eqSetChipFilter(\''+c+'\')">'+eqChipLabel(c)+'</span>'; }).join('');
  return '<div class="eq-fbar">'+all+chips+'</div>';
}
function eqSetChipFilter(c){ _eqChipFilter=(_eqChipFilter===c)?null:c; eqRebuild(); }
function eqRoomGapped(g){
  // 1.58.0: gap dot counts actual displays, not everything kind video
  var tv=g.devices.filter(function(r){return r.category==='equipment'&&eqIsDisplay(r);});
  var n=tv.reduce(function(a,r){return a+(r.qty||1);},0);
  if(n<2) return false;
  return !tv.some(function(r){return r.position_label;});
}
function eqDevLine(r){
  var nm=((r.manufacturer||'')+' '+(r.product_type||'')).trim()||eqEsc((r.description||'').slice(0,28));
  var ty=r.product_type?'<span class="ty">'+eqEsc(r.product_type)+'</span>':'';
  var md=r.model?'<span class="md">'+eqEsc(r.model)+'</span>':'';
  var pos=r.position_label?'<span class="pos">· '+eqEsc(r.position_label)+'</span>':'';
  var acc=(Array.isArray(r.accessories)?r.accessories:[]).map(function(a){
    return '<div class="eq-acc">'+(a.q||1)+'× '+eqEsc(a.mk||'')+' '+eqEsc(a.md||'')+' '+eqEsc((a.d||'').slice(0,38))+'</div>';
  }).join('');
  return '<div class="eq-dev" onclick="eqEditDevice('+r.id+')"><span class="q">'+(r.qty||1)+'×</span>'+
         '<span class="nm">'+eqEsc(nm)+'</span>'+ty+md+pos+'</div>'+acc;
}
function eqDevicesHtml(g){
  var v=[],a=[],s=[],c=[],so=[],nw=[],se=[],sv=[],lc=[],lf=[],oe=[],nq=[];
  g.devices.forEach(function(r){
    if(r.category!=='equipment'){ nq.push(r); return; }
    if(r.kind==='video') v.push(r);
    else if(r.kind==='audio') a.push(r);
    else if(r.kind==='shade') s.push(r);
    else if(r.kind==='source') so.push(r);
    else if(r.kind==='network') nw.push(r);
    else if(r.kind==='security') se.push(r);
    else if(r.kind==='surveillance') sv.push(r);
    else if(r.kind==='lighting_control') lc.push(r);
    else if(r.kind==='lighting_fixture') lf.push(r);
    else if(r.kind==='control') c.push(r);
    else oe.push(r);
  });
  var h='';
  if(v.length){ h+='<div class="eq-grp v">Video</div>'+v.map(eqDevLine).join(''); }
  if(a.length){ h+='<div class="eq-grp a">Audio</div>'+a.map(eqDevLine).join(''); }
  if(s.length){ h+='<div class="eq-grp s">Shades</div>'+s.map(eqDevLine).join(''); }
  if(so.length){ h+='<div class="eq-grp src">Sources</div>'+so.map(eqDevLine).join(''); }
  if(nw.length){ h+='<div class="eq-grp nw">Network</div>'+nw.map(eqDevLine).join(''); }
  if(se.length){ h+='<div class="eq-grp se">Security</div>'+se.map(eqDevLine).join(''); }
  if(sv.length){ h+='<div class="eq-grp ca">Surveillance</div>'+sv.map(eqDevLine).join(''); }
  if(lc.length){ h+='<div class="eq-grp lc">Lighting control</div>'+lc.map(eqDevLine).join(''); }
  if(lf.length){ h+='<div class="eq-grp lf">Fixtures</div>'+lf.map(eqDevLine).join(''); }
  if(c.length){ h+='<div class="eq-grp co">Control</div>'+c.map(eqDevLine).join(''); }
  if(oe.length){ h+='<div class="eq-grp o">Other</div>'+oe.map(eqDevLine).join(''); }
  if(nq.length){ h+='<div class="eq-grp o">Prewire &amp; labor</div>'+nq.map(function(r){
    return '<div class="eq-nonq"><span class="tag">'+eqEsc(r.category||'')+'</span>'+eqEsc((r.description||'').slice(0,54))+'</div>';
  }).join(''); }
  return h||'<div class="eq-busy">No detail.</div>';
}
function eqClientHtml(g){
  var tv=0,au=false,sh=0,brand='';
  g.devices.forEach(function(r){
    if(r.category!=='equipment') return;
    if(eqIsDisplay(r)){ tv+=(r.qty||1); if(!brand) brand=r.manufacturer||''; }
    else if(r.kind==='audio') au=true; else if(r.kind==='shade') sh+=1;
  });
  var parts=[]; if(tv===1)parts.push('TV'); else if(tv>1)parts.push(tv+' TVs'); if(au)parts.push('audio'); if(sh)parts.push(sh>1?'shades':'shade');
  return '<div class="eq-client">In <b>'+eqEsc(g.label)+'</b> the client has: <b>'+(parts.join(', ')||'—')+'</b>.<br>'+
         '<span style="color:var(--ink-soft)">Andi speaks only these words'+(brand?'; brand only as a pointer, e.g. "grab the '+eqEsc(brand)+' remote."':'.')+'</span></div>';
}
function eqRoomRowHtml(g){
  var gap=eqRoomGapped(g)?'<span class="eq-gapdot" title="More than one TV, no position labels set"></span>':'';
  var body= _eqLens==='cli' ? eqClientHtml(g) : eqDevicesHtml(g);
  // 1.51.0 (slice 4 piece 2): model rooms (room_id set) get the pencil back, opening the proper room
  // editor (building, level, name, number). Legacy flat/house fallback groups keep the old label rename.
  var pencil=(g.room_id!=null)
    ? '<span class="eq-room-pencil" title="Edit room" onclick="event.stopPropagation();eqOpenRoomEdit('+g.room_id+')">✎</span>'
    : '<span class="eq-room-pencil" title="Rename room" data-room="'+eqEsc(g.room)+'" data-label="'+eqEsc(g.label)+'" onclick="event.stopPropagation();eqRenameRoom(this)">✎</span>';
  return '<div class="eq-room"><div class="eq-rhead" onclick="eqToggleRoom(this)">'+
    '<span class="eq-car">▸</span><span class="eq-rname">'+eqEsc(g.label)+gap+'</span>'+pencil+
    '<span class="eq-chips">'+eqRoomChips(g)+'</span></div>'+
    '<div class="eq-body">'+body+'</div></div>';
}

/* ---------- section shell ---------- */
function eqSectionInner(h){
  var eq=h.equipment||[];
  var sys=h.systems||null;
  var head='<div class="eq-head"><div class="hd-block-title">Equipment</div>'+
    '<span class="eq-spacer"></span>'+
    '<div class="eq-lens"><button class="'+(_eqLens==='int'?'on':'')+'" onclick="eqSetLens(\'int\')">Integrator</button>'+
    '<button class="'+(_eqLens==='cli'?'on':'')+'" onclick="eqSetLens(\'cli\')">Client</button></div>'+
    '<button class="eq-btn" onclick="eqAddDevice()">+ Add device</button>'+
    (eq.length?'<button class="eq-btn" onclick="eqToggleAll()">Expand all</button>':'')+
    '<input type="file" id="eq-file" accept="application/pdf" style="display:none;" onchange="eqOnFile(this)"></div>';
  var sysHtml='';
  if(sys && sys.length){ sysHtml='<div class="eq-systems">'+sys.map(function(s){
    return '<span class="eq-sys"><span class="d"></span><b>'+eqEsc(s.value)+'</b></span>'; }).join('')+'</div>'; }
  var sticky='<div class="eq-sticky">'+head+sysHtml+'</div>';
  if(!eq.length){
    return sticky+'<div class="eq-empty">No equipment yet. Upload a document in the Files tab and Andi builds the room-by-room record from it.</div>'+
      '<div class="eq-busy" id="eq-status"></div>';
  }
  // 1.50.0 (slice 4): render from the real room model when it is present; fall back to the old flat
  // as-sold grouping for any household whose rooms have not been built yet, so nothing ever blanks.
  var useModel = Array.isArray(h.rooms) && h.rooms.length>0;
  var grp = useModel ? eqGroupModel(h) : eqGroup(eq);
  var rooms = useModel ? eqRoomsHierarchyHtml(grp) : grp.rooms.map(eqRoomRowHtml).join('');
  var tools = useModel ? '<div class="eq-tools"><button class="eq-tool" onclick="eqOpenAddRoom()">+ Add room</button><button class="eq-tool" onclick="eqAddBuilding()">+ Add building</button><button class="eq-tool eq-tool-match" onclick="eqFindMatches()">Combine duplicates</button></div>' : '';
  var fbar = useModel ? eqChipFilterBar(grp) : '';
  var houseList = (useModel && _eqChipFilter) ? grp.house.filter(function(g){ return eqGroupHasCat(g,_eqChipFilter); }) : grp.house;
  // 1.58.0: house systems group under building headers like rooms, so each structure
  // shows its own Security / Surveillance / Network / AV Distribution
  var house='';
  if(houseList.length){
    house='<div class="hd-block-title" style="margin-top:0.9rem;font-size:0.78rem;color:var(--ink-soft);">House systems</div>';
    var bldgs=(useModel&&grp.buildings)||[];
    if(bldgs.length&&houseList.some(function(g){return g.building_id;})){
      bldgs.forEach(function(b){
        var inB=houseList.filter(function(g){ return g.building_id===b.id; });
        if(inB.length) house+='<div class="eq-building">'+eqEsc(b.name)+'</div>'+inB.map(eqRoomRowHtml).join('');
      });
      var noB=houseList.filter(function(g){ return !g.building_id; });
      if(noB.length) house+='<div class="eq-building unassigned">Unassigned</div>'+noB.map(eqRoomRowHtml).join('');
    } else {
      house+=houseList.map(eqRoomRowHtml).join('');
    }
  }
  var clearLink=eq.length?'<div style="text-align:center;margin-top:1.4rem;padding-top:0.4rem;"><button onclick="eqClearImport()" style="background:none;border:none;color:var(--ink-soft);font-size:0.72rem;cursor:pointer;text-decoration:underline;opacity:0.65;">Clear all equipment</button></div>':'';
  return sticky+'<div class="eq-busy" id="eq-status"></div>'+tools+fbar+rooms+house+clearLink;
}
function equipmentSectionHtml(h){ return '<div id="eq-section">'+eqSectionInner(h)+'</div>'; }
function eqRebuild(){
  var s=document.getElementById('eq-section'); if(!s||!_hd) return;
  // preserve which rooms are open so the lens switch reveals the difference in place
  var open={}; s.querySelectorAll('.eq-room.open').forEach(function(r){ var n=r.querySelector('.eq-rname'); if(n) open[n.textContent]=1; });
  s.innerHTML=eqSectionInner(_hd);
  s.querySelectorAll('.eq-room').forEach(function(r){ var n=r.querySelector('.eq-rname'); if(n&&open[n.textContent]) r.classList.add('open'); });
  eqSyncToggleBtn();
}
function eqSetLens(v){ _eqLens=v; eqRebuild(); }
function eqAllRoomsOpen(s){ var rooms=s.querySelectorAll('.eq-room'); return rooms.length>0 && Array.prototype.every.call(rooms,function(r){return r.classList.contains('open');}); }
// 1.54.0: the toggle now reads true all-open state (was "any open", so one manually opened room made the
// button offer Expand when it should offer Collapse), and the label re-syncs whenever a single room toggles.
function eqSyncToggleBtn(){ var s=document.getElementById('eq-section'); if(!s) return; var bs=s.querySelectorAll('.eq-head .eq-btn'); var b=null; bs.forEach(function(x){ if(/Expand all|Collapse all/.test(x.textContent)) b=x; }); if(b) b.textContent=eqAllRoomsOpen(s)?'Collapse all':'Expand all'; }
function eqToggleRoom(el){ var r=el.closest('.eq-room'); if(r) r.classList.toggle('open'); eqSyncToggleBtn(); }
function eqExpandAll(open){ var s=document.getElementById('eq-section'); if(!s) return; s.querySelectorAll('.eq-room').forEach(function(r){ r.classList.toggle('open',!!open); }); }
function eqToggleAll(){ var s=document.getElementById('eq-section'); if(!s) return; eqExpandAll(!eqAllRoomsOpen(s)); eqSyncToggleBtn(); }
async function eqViewSource(){
  if(!_hd) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/equipment/source');
    if(res.status===404){ eqStatus('No sales order stored yet. Re-import to save the PDF with the record.'); return; }
    if(!res.ok){ eqStatus('Could not open the sales order.'); return; }
    var d=await res.json();
    if(d.url) window.open(d.url,'_blank');
  }catch(e){ eqStatus('Connection error opening the sales order.'); }
}
async function eqClearImport(){
  if(!_hd) return;
  if(!confirm('Clear ALL equipment and rooms for this household? This wipes the entire record. The documents in Files are kept, so you can rebuild by re-uploading them. This cannot be undone.')) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/equipment/all',{method:'DELETE'});
    if(!res.ok){ eqStatus('Clear failed.'); return; }
    openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error on clear.'); }
}
function eqStatus(msg){ ['eq-status','eq-files-msg'].forEach(function(idd){ var s=document.getElementById(idd); if(s) s.textContent=msg||''; }); }

/* ---------- edit modal ---------- */
function eqEnsureModal(){
  if(document.getElementById('eq-edit-modal')) return;
  var d=document.createElement('div'); d.className='eq-modal-bg'; d.id='eq-edit-modal';
  d.innerHTML='<div class="eq-modal"><h3 id="eq-m-title">Edit device</h3>'+
    '<label>Position (when a room has more than one)</label><input id="eq-m-pos" placeholder="e.g. left, fireplace, top">'+
    '<div id="eq-m-room-wrap" style="display:none"><label>Room</label><select id="eq-m-room"></select></div>'+
    '<label>Kind</label><select id="eq-m-kind"><option value="video">video</option><option value="audio">audio</option><option value="shade">shade</option><option value="lighting_control">lighting control</option><option value="lighting_fixture">lighting fixture</option><option value="network">network</option><option value="security">security</option><option value="surveillance">surveillance</option><option value="source">source</option><option value="control">control</option><option value="other">other</option></select>'+
    '<label>Manufacturer</label><input id="eq-m-mk">'+
    '<label>Model</label><input id="eq-m-md">'+
    '<label>Type</label><input id="eq-m-ty" placeholder="Frame, QLED, In-ceiling speaker...">'+
    '<label>Quantity</label><input id="eq-m-qty" type="number" min="0">'+
    '<label>Category</label><select id="eq-m-cat"><option>equipment</option><option>prewire</option><option>labor</option><option>client_provided</option><option>material</option><option>discount</option><option>adjustment</option></select>'+
    '<div class="eq-modal-actions"><button class="save" onclick="eqSaveEdit()">Save</button><button class="cancel" onclick="eqCloseModal()">Cancel</button><button class="del" onclick="eqDeleteDevice()">Delete</button></div></div>';
  document.body.appendChild(d);
  d.addEventListener('click',function(e){ if(e.target===d) eqCloseModal(); });
}
var _eqEditId=null; var _eqEditRoomId=null; var _eqCreateMode=false;
// 1.57.0: + Add device opens the same modal empty in create mode; saves POST to the new
// portal manual-device route (source 'manual', survives every document re-import)
function eqAddDevice(){
  if(!_hd) return;
  eqEnsureModal();
  _eqCreateMode=true; _eqEditId=null; _eqEditRoomId=null;
  document.getElementById('eq-m-title').textContent='Add device';
  document.getElementById('eq-m-pos').value='';
  document.getElementById('eq-m-kind').value='other';
  document.getElementById('eq-m-mk').value='';
  document.getElementById('eq-m-md').value='';
  document.getElementById('eq-m-ty').value='';
  document.getElementById('eq-m-qty').value=1;
  document.getElementById('eq-m-cat').value='equipment';
  var wrap=document.getElementById('eq-m-room-wrap'), sel=document.getElementById('eq-m-room');
  var rooms=(_hd&&_hd.rooms)||[];
  if(rooms.length){
    var bldg={}; ((_hd&&_hd.buildings)||[]).forEach(function(b){ bldg[b.id]=b.name; });
    sel.innerHTML='<option value="" selected>(unassigned)</option>'+rooms.map(function(rm){
      var nm=(rm.name||rm.as_sold_name||('Room '+rm.id));
      var lbl=(rm.building_id&&bldg[rm.building_id]?bldg[rm.building_id]+' / ':'')+nm;
      return '<option value="'+rm.id+'">'+eqEsc(lbl)+'</option>';
    }).join('');
    wrap.style.display='';
  } else { wrap.style.display='none'; sel.innerHTML=''; }
  var del=document.querySelector('#eq-edit-modal .del'); if(del) del.style.display='none';
  document.getElementById('eq-edit-modal').classList.add('show');
}
function eqEditDevice(id){
  eqEnsureModal();
  var r=(_hd.equipment||[]).filter(function(x){return x.id===id;})[0]; if(!r) return;
  _eqCreateMode=false; _eqEditId=id;
  document.getElementById('eq-m-title').textContent='Edit device';
  var delBtn=document.querySelector('#eq-edit-modal .del'); if(delBtn) delBtn.style.display='';
  document.getElementById('eq-m-pos').value=r.position_label||'';
  // 1.56.0: move-to-room select, model households only (rooms exist)
  _eqEditRoomId=(r.room_id!=null?r.room_id:null);
  (function(){
    var wrap=document.getElementById('eq-m-room-wrap'), sel=document.getElementById('eq-m-room');
    var rooms=(_hd&&_hd.rooms)||[];
    if(!rooms.length){ wrap.style.display='none'; sel.innerHTML=''; return; }
    var bldg={}; ((_hd&&_hd.buildings)||[]).forEach(function(b){ bldg[b.id]=b.name; });
    sel.innerHTML=rooms.map(function(rm){
      var nm=(rm.name||rm.as_sold_name||('Room '+rm.id));
      var lbl=(rm.building_id&&bldg[rm.building_id]?bldg[rm.building_id]+' / ':'')+nm;
      return '<option value="'+rm.id+'"'+(r.room_id===rm.id?' selected':'')+'>'+eqEsc(lbl)+'</option>';
    }).join('');
    if(r.room_id==null){ sel.insertAdjacentHTML('afterbegin','<option value="" selected>(unassigned)</option>'); }
    wrap.style.display='';
  })();
  document.getElementById('eq-m-kind').value=r.kind||'other';
  document.getElementById('eq-m-mk').value=r.manufacturer||'';
  document.getElementById('eq-m-md').value=r.model||'';
  document.getElementById('eq-m-ty').value=r.product_type||'';
  document.getElementById('eq-m-qty').value=(r.qty==null?1:r.qty);
  document.getElementById('eq-m-cat').value=r.category||'equipment';
  document.getElementById('eq-edit-modal').classList.add('show');
}
function eqCloseModal(){ var m=document.getElementById('eq-edit-modal'); if(m) m.classList.remove('show'); _eqEditId=null; _eqCreateMode=false; }
// Room rename: sets room_label across every device in the room in one call.
var _eqRenameRoom=null;
function eqEnsureRoomModal(){
  if(document.getElementById('eq-room-modal')) return;
  var d=document.createElement('div'); d.className='eq-modal-bg'; d.id='eq-room-modal';
  d.innerHTML='<div class="eq-modal"><h3>Rename room</h3>'+
    '<div style="color:var(--ink-soft);font-size:0.76rem;margin-bottom:0.4rem;">This is the name Andi speaks to the client. The original as-sold room name is kept.</div>'+
    '<label>Room name</label><input id="eq-rm-label">'+
    '<div class="eq-modal-actions"><button class="save" onclick="eqSaveRoomName()">Save</button><button class="cancel" onclick="eqCloseRoomModal()">Cancel</button></div></div>';
  document.body.appendChild(d);
  d.addEventListener('click',function(e){ if(e.target===d) eqCloseRoomModal(); });
}
function eqRenameRoom(el){
  eqEnsureRoomModal();
  _eqRenameRoom = el.getAttribute('data-room');
  document.getElementById('eq-rm-label').value = el.getAttribute('data-label')||'';
  document.getElementById('eq-room-modal').classList.add('show');
}
function eqCloseRoomModal(){ var m=document.getElementById('eq-room-modal'); if(m) m.classList.remove('show'); _eqRenameRoom=null; }
async function eqSaveRoomName(){
  if(_eqRenameRoom==null||!_hd) return;
  var label=document.getElementById('eq-rm-label').value.trim();
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/equipment/room-label',{method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({room:_eqRenameRoom, room_label:label})});
    if(!res.ok){ eqStatus('Could not rename the room.'); return; }
    eqCloseRoomModal(); openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error on rename.'); }
}

/* ---------- slice 4 piece 2: room editor + building management ---------- */
var EQ_LEVELS=['Lower','Main','Upper','Basement','Garage','Outdoor'];
function eqBuildingOptions(selId){
  var o='<option value="">Unassigned</option>';
  (_hd&&_hd.buildings?_hd.buildings:[]).forEach(function(b){
    o+='<option value="'+b.id+'"'+(String(selId)===String(b.id)?' selected':'')+'>'+eqEsc(b.name)+'</option>';
  });
  o+='<option value="__new__">+ New building…</option>';
  return o;
}
function eqLevelOptions(sel){
  var inList=EQ_LEVELS.indexOf(sel||'')>=0;
  var o='<option value="">Unassigned</option>';
  EQ_LEVELS.forEach(function(L){ o+='<option value="'+L+'"'+(sel===L?' selected':'')+'>'+L+'</option>'; });
  o+='<option value="__other__"'+(sel&&!inList?' selected':'')+'>Other…</option>';
  return o;
}
var _eqRoomEdit=null; // { id } for edit, { id:null } for add
function eqEnsureRoomEditModal(){
  if(document.getElementById('eq-roomedit-modal')) return;
  var d=document.createElement('div'); d.className='eq-modal-bg'; d.id='eq-roomedit-modal';
  d.innerHTML='<div class="eq-modal"><h3 id="eq-re-title">Edit room</h3>'+
    '<label>Room name</label><input id="eq-re-name">'+
    '<label>Room number <span style="color:var(--ink-soft);font-weight:400;">(optional)</span></label><input id="eq-re-num" placeholder="e.g. 301">'+
    '<label>Building</label><select id="eq-re-bldg" onchange="eqReBuildingChange()"></select>'+
    '<label>Floor / level</label><select id="eq-re-level" onchange="eqReLevelChange()"></select>'+
    '<input id="eq-re-level-other" placeholder="Name this level" style="display:none;margin-top:0.4rem;">'+
    '<div id="eq-re-combine" style="display:none;border-top:1px solid var(--border);margin-top:0.95rem;padding-top:0.8rem;">'+
      '<label>Combine this room into another</label>'+
      '<div style="color:var(--ink-soft);font-size:0.72rem;margin:-0.15rem 0 0.45rem;line-height:1.4;">This room is removed. Its gear and name move to the room you pick, which keeps its own name.</div>'+
      '<div style="display:flex;gap:0.5rem;align-items:center;"><select id="eq-re-merge" style="flex:1;"></select>'+
        '<button class="eq-tool eq-tool-match" style="white-space:nowrap;" onclick="eqMergeFromEditor()">Combine</button></div>'+
    '</div>'+
    '<div class="eq-modal-actions"><button class="save" onclick="eqSaveRoomEdit()">Save</button><button class="cancel" onclick="eqCloseRoomEdit()">Cancel</button></div></div>';
  document.body.appendChild(d);
  d.addEventListener('click',function(e){ if(e.target===d) eqCloseRoomEdit(); });
}
function eqReLevelChange(){
  var sel=document.getElementById('eq-re-level').value;
  var other=document.getElementById('eq-re-level-other');
  other.style.display=(sel==='__other__')?'':'none';
  if(sel!=='__other__') other.value='';
}
var _eqReBldgPrev='';
async function eqReBuildingChange(){
  var sel=document.getElementById('eq-re-bldg');
  if(sel.value!=='__new__'){ _eqReBldgPrev=sel.value; return; }
  var name=(prompt('New building name:')||'').trim();
  if(!name){ sel.value=_eqReBldgPrev; return; }
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/buildings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name})});
    if(!res.ok){ sel.value=_eqReBldgPrev; eqStatus('Could not add the building.'); return; }
    var b=await res.json();
    _hd.buildings=(_hd.buildings||[]).concat([b]);
    sel.innerHTML=eqBuildingOptions(b.id); _eqReBldgPrev=String(b.id);
  }catch(e){ sel.value=_eqReBldgPrev; eqStatus('Connection error adding building.'); }
}
function eqOpenRoomEdit(roomId){
  eqEnsureRoomEditModal();
  var rm=(_hd&&_hd.rooms?_hd.rooms:[]).filter(function(x){return x.id===roomId;})[0]; if(!rm) return;
  _eqRoomEdit={ id:roomId };
  document.getElementById('eq-re-title').textContent='Edit room';
  document.getElementById('eq-re-name').value=rm.name||rm.as_sold_name||'';
  document.getElementById('eq-re-num').value=rm.room_number||'';
  document.getElementById('eq-re-bldg').innerHTML=eqBuildingOptions(rm.building_id||''); _eqReBldgPrev=String(rm.building_id||'');
  document.getElementById('eq-re-level').innerHTML=eqLevelOptions(rm.level||'');
  var other=document.getElementById('eq-re-level-other');
  if(rm.level && EQ_LEVELS.indexOf(rm.level)<0){ other.style.display=''; other.value=rm.level; } else { other.style.display='none'; other.value=''; }
  var cb=document.getElementById('eq-re-combine'), msel=document.getElementById('eq-re-merge');
  msel.innerHTML=eqMergeOptions(roomId); cb.style.display=(_hd.rooms&&_hd.rooms.length>1)?'':'none';
  document.getElementById('eq-roomedit-modal').classList.add('show');
}
function eqOpenAddRoom(){
  eqEnsureRoomEditModal();
  _eqRoomEdit={ id:null };
  document.getElementById('eq-re-title').textContent='Add room';
  document.getElementById('eq-re-name').value='';
  document.getElementById('eq-re-num').value='';
  document.getElementById('eq-re-bldg').innerHTML=eqBuildingOptions(''); _eqReBldgPrev='';
  document.getElementById('eq-re-level').innerHTML=eqLevelOptions('');
  var other=document.getElementById('eq-re-level-other'); other.style.display='none'; other.value='';
  var cb=document.getElementById('eq-re-combine'); if(cb) cb.style.display='none';
  document.getElementById('eq-roomedit-modal').classList.add('show');
}
function eqMergeOptions(excludeId){
  var o='<option value="">Choose a room…</option>';
  (_hd&&_hd.rooms?_hd.rooms:[]).forEach(function(rm){
    if(rm.id===excludeId) return;
    var lab=(rm.name||rm.as_sold_name||'Room');
    if(eqIsNonRoom(lab)) return; // skip expense/wiring/labor buckets
    o+='<option value="'+rm.id+'">'+eqEsc(lab)+'</option>';
  });
  return o;
}
async function eqMergeFromEditor(){
  if(!_eqRoomEdit||_eqRoomEdit.id==null||!_hd) return;
  var targetId=parseInt(document.getElementById('eq-re-merge').value,10);
  if(!targetId){ eqStatus('Pick a room to combine into.'); return; }
  var fromId=_eqRoomEdit.id;
  var from=(_hd.rooms||[]).filter(function(x){return x.id===fromId;})[0];
  var target=(_hd.rooms||[]).filter(function(x){return x.id===targetId;})[0];
  var fn=from?(from.name||from.as_sold_name||'this room'):'this room';
  var tn=target?(target.name||target.as_sold_name||'that room'):'that room';
  if(!confirm('Combine "'+fn+'" into "'+tn+'"? '+fn+'\'s gear moves to '+tn+', '+fn+' is removed, and its name is kept as an alias.')) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/rooms/'+targetId+'/merge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({from_room_id:fromId})});
    if(!res.ok){ eqStatus('Could not combine the rooms.'); return; }
    eqCloseRoomEdit(); openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error combining rooms.'); }
}
function eqCloseRoomEdit(){ var m=document.getElementById('eq-roomedit-modal'); if(m) m.classList.remove('show'); _eqRoomEdit=null; }
function eqReLevelValue(){
  var sel=document.getElementById('eq-re-level').value;
  if(sel==='__other__') return document.getElementById('eq-re-level-other').value.trim()||null;
  return sel||null;
}
async function eqSaveRoomEdit(){
  if(!_eqRoomEdit||!_hd) return;
  var name=document.getElementById('eq-re-name').value.trim();
  if(!name){ eqStatus('Room name is required.'); return; }
  var bsel=document.getElementById('eq-re-bldg').value;
  var building_id = (bsel==='' || bsel==='__new__') ? null : parseInt(bsel,10);
  var body={ name:name, room_number:document.getElementById('eq-re-num').value.trim()||null, building_id:building_id, level:eqReLevelValue() };
  var url='/api/households/'+_hd.id+'/rooms'+(_eqRoomEdit.id!=null?('/'+_eqRoomEdit.id):'');
  var method=_eqRoomEdit.id!=null?'PUT':'POST';
  try{
    var res=await rwFetch(url,{method:method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
    if(!res.ok){ eqStatus('Could not save the room.'); return; }
    eqCloseRoomEdit(); openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error saving room.'); }
}
async function eqAddBuilding(){
  if(!_hd) return;
  var name=(prompt('New building name:')||'').trim(); if(!name) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/buildings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name})});
    if(!res.ok){ eqStatus('Could not add the building.'); return; }
    openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error adding building.'); }
}
async function eqRenameBuilding(id){
  if(!_hd) return;
  var b=(_hd.buildings||[]).filter(function(x){return x.id===id;})[0]; if(!b) return;
  var name=(prompt('Rename building:',b.name)||'').trim(); if(!name||name===b.name) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/buildings/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name})});
    if(!res.ok){ eqStatus('Could not rename the building.'); return; }
    openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error renaming building.'); }
}
async function eqDeleteBuilding(id){
  if(!_hd) return;
  var b=(_hd.buildings||[]).filter(function(x){return x.id===id;})[0]; if(!b) return;
  if(!confirm('Delete the building "'+b.name+'"? Its rooms become Unassigned. The gear in them is untouched.')) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/buildings/'+id,{method:'DELETE'});
    if(!res.ok){ eqStatus('Could not delete the building.'); return; }
    openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error deleting building.'); }
}

/* ---------- slice 4 piece 3: reconcile (Andi's suggested matches + combine confirm) ---------- */
var _eqMatches=[]; var _eqMatchDirty=false;
function eqEnsureMatchModal(){
  if(document.getElementById('eq-match-modal')) return;
  var d=document.createElement('div'); d.className='eq-modal-bg'; d.id='eq-match-modal';
  d.innerHTML='<div class="eq-modal eq-match-modal"><h3>Combine duplicate rooms</h3>'+
    '<div class="eq-match-sub">Andi looked for rooms that are the same place across your documents. Pick which name to keep, then combine. Nothing changes until you do.</div>'+
    '<div id="eq-match-body"></div>'+
    '<div class="eq-modal-actions"><button class="cancel" onclick="eqCloseMatches()">Done</button></div></div>';
  document.body.appendChild(d);
  d.addEventListener('click',function(e){ if(e.target===d) eqCloseMatches(); });
}
async function eqFindMatches(){
  if(!_hd) return;
  eqEnsureMatchModal();
  _eqMatchDirty=false; _eqMatches=[];
  document.getElementById('eq-match-body').innerHTML='<div class="eq-busy">Andi is looking for rooms that match…</div>';
  document.getElementById('eq-match-modal').classList.add('show');
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/rooms/suggest-matches',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});
    if(!res.ok){ document.getElementById('eq-match-body').innerHTML='<div class="eq-busy">Could not check for matches right now.</div>'; return; }
    var d=await res.json();
    _eqMatches=(d.suggestions||[]).filter(function(m){ return !eqIsNonRoom(m.a_label) && !eqIsNonRoom(m.b_label); });
    eqRenderMatches();
  }catch(e){ document.getElementById('eq-match-body').innerHTML='<div class="eq-busy">Connection error checking for matches.</div>'; }
}
function eqRenderMatches(){
  var body=document.getElementById('eq-match-body'); if(!body) return;
  if(!_eqMatches.length){ body.innerHTML='<div class="eq-busy">No likely duplicate rooms found.</div>'; return; }
  body.innerHTML=_eqMatches.map(function(m,i){
    // default the survivor to the numbered room (the canonical lighting-doc room carrying the stable key)
    var aNum=/\d/.test(m.a_label||''), bNum=/\d/.test(m.b_label||''); var keepB=bNum&&!aNum;
    var tag=(m.basis==='number')?'<span class="eq-match-basis num">number</span>':'<span class="eq-match-basis">name</span>';
    return '<div class="eq-match-card">'+
      '<div class="eq-match-pair">'+
        '<label class="eq-keep"><input type="radio" name="eqkeep'+i+'" value="a"'+(keepB?'':' checked')+'> <b>'+eqEsc(m.a_label)+'</b></label>'+
        '<span class="eq-match-plus">＋</span>'+
        '<label class="eq-keep"><input type="radio" name="eqkeep'+i+'" value="b"'+(keepB?' checked':'')+'> <b>'+eqEsc(m.b_label)+'</b></label>'+
      '</div>'+
      '<div class="eq-match-reason">'+tag+eqEsc(m.reason||'These look like the same room.')+'</div>'+
      '<div class="eq-match-actions"><button class="save" onclick="eqDoMerge('+i+')">Combine</button><button class="cancel" onclick="eqSkipMatch('+i+')">Skip</button></div>'+
    '</div>';
  }).join('')+'<div class="eq-match-hint">The kept room takes the other room\'s gear and keeps both names as aliases. Skip leaves them separate.</div>';
}
async function eqDoMerge(i){
  var m=_eqMatches[i]; if(!m||!_hd) return;
  var keepEl=document.querySelector('input[name="eqkeep'+i+'"]:checked');
  var keepVal=keepEl?keepEl.value:'a';
  var keepId=keepVal==='a'?m.a_id:m.b_id;
  var fromId=keepVal==='a'?m.b_id:m.a_id;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/rooms/'+keepId+'/merge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({from_room_id:fromId})});
    if(!res.ok){ alert('Could not combine these rooms.'); return; }
    _eqMatchDirty=true;
    // drop this pair and any other pair that referenced the now-deleted room, so a stale suggestion
    // (e.g. a bare "Loft" suggested against two numbered lofts) cannot point at a room that is gone.
    _eqMatches=_eqMatches.filter(function(x,j){ return j!==i && x.a_id!==fromId && x.b_id!==fromId; });
    eqRenderMatches();
  }catch(e){ alert('Connection error combining rooms.'); }
}
function eqSkipMatch(i){ _eqMatches.splice(i,1); eqRenderMatches(); }
function eqCloseMatches(){
  var m=document.getElementById('eq-match-modal'); if(m) m.classList.remove('show');
  if(_eqMatchDirty){ _eqMatchDirty=false; openHouseholdDetail(_hd.id); }
}
async function eqSaveEdit(){
  if(!_hd) return;
  if(!_eqCreateMode&&_eqEditId==null) return;
  var body={
    position_label: document.getElementById('eq-m-pos').value.trim()||null,
    kind: document.getElementById('eq-m-kind').value,
    manufacturer: document.getElementById('eq-m-mk').value.trim()||null,
    model: document.getElementById('eq-m-md').value.trim()||null,
    product_type: document.getElementById('eq-m-ty').value.trim()||null,
    qty: parseInt(document.getElementById('eq-m-qty').value,10)||1,
    category: document.getElementById('eq-m-cat').value
  };
  // 1.56.0: include room_id only when the select is shown and the room actually changed
  var roomSel=document.getElementById('eq-m-room');
  if(roomSel&&document.getElementById('eq-m-room-wrap').style.display!=='none'&&roomSel.value!==''){
    var newRoom=parseInt(roomSel.value,10);
    if(Number.isInteger(newRoom)&&newRoom!==_eqEditRoomId) body.room_id=newRoom;
  }
  try{
    var res;
    if(_eqCreateMode){
      res=await rwFetch('/api/households/'+_hd.id+'/equipment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
    } else {
      res=await rwFetch('/api/households/'+_hd.id+'/equipment/'+_eqEditId,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
    }
    if(!res.ok){ eqStatus(_eqCreateMode?'Could not add device.':'Could not save edit.'); return; }
    _eqCreateMode=false;
    eqCloseModal(); openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error on save.'); }
}
async function eqDeleteDevice(){
  if(_eqEditId==null||!_hd) return;
  if(!confirm('Delete this device from the record?')) return;
  try{
    var res=await rwFetch('/api/households/'+_hd.id+'/equipment/'+_eqEditId,{method:'DELETE'});
    if(!res.ok){ eqStatus('Could not delete.'); return; }
    eqCloseModal(); openHouseholdDetail(_hd.id);
  }catch(e){ eqStatus('Connection error on delete.'); }
}

/* ---------- import: pdf.js parse in browser ---------- */
function eqLoadPdfjs(){
  if(window.pdfjsLib) return Promise.resolve(window.pdfjsLib);
  if(_pdfjsLoading) return _pdfjsLoading;
  _pdfjsLoading=new Promise(function(resolve,reject){
    var s=document.createElement('script');
    s.src='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
    s.onload=function(){ try{ window.pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; }catch(e){} resolve(window.pdfjsLib); };
    s.onerror=function(){ reject(new Error('pdf.js failed to load')); };
    document.head.appendChild(s);
  });
  return _pdfjsLoading;
}
async function eqExtractLayout(file){
  var pdfjsLib=await eqLoadPdfjs();
  var buf=await file.arrayBuffer();
  var pdf=await pdfjsLib.getDocument({data:buf}).promise;
  var pages=[];
  for(var p=1;p<=pdf.numPages;p++){
    var page=await pdf.getPage(p);
    var tc=await page.getTextContent();
    var byY={};
    tc.items.forEach(function(it){
      if(!it.str||!it.str.trim()) return;
      var x=it.transform[4], y=Math.round(it.transform[5]);
      if(!byY[y]) byY[y]={y:y,items:[]};
      byY[y].items.push({x:x,str:it.str});
    });
    var lines=Object.keys(byY).map(function(k){return byY[k];});
    lines.sort(function(a,b){return b.y-a.y;}); // top first
    // 1.56.0: strip pure price tokens ($X,XXX.XX) so column prices never pollute item
    // text (they were garbling descriptions and killing keyword classification)
    var priceTok=/^\$[\d,]+(\.\d{2})?$/;
    var pageLines=[];
    lines.forEach(function(L){
      L.items.sort(function(a,b){return a.x-b.x;});
      var kept=[];
      L.items.forEach(function(i){
        var toks=i.str.split(/\s+/).filter(function(t){return t&&!priceTok.test(t);});
        if(toks.length) kept.push({x:i.x,str:toks.join(' ')});
      });
      if(!kept.length) return; // price-only line
      var indent=kept[0].x;
      var text=kept.map(function(i){return i.str;}).join(' ').replace(/\s+/g,' ').trim();
      if(!text) return;
      pageLines.push({indent:indent,y:L.y,text:text});
    });
    // 1.57.0 building capture: the page header carries "Client:Address - Building";
    // read it BEFORE the dedupe strips the header, tag every line on the page
    var bld=null;
    pageLines.slice(0,6).forEach(function(l){
      if(bld) return;
      var ci=l.text.indexOf(':'), di=l.text.lastIndexOf(' - ');
      if(ci>0 && di>ci && di<l.text.length-3){ var b=l.text.slice(di+3).trim(); if(b && b.length<=40 && !/\d{5}/.test(b)) bld=b; }
    });
    pageLines.forEach(function(l){ l.b=bld; });
    pages.push(pageLines);
  }
  // 1.56.0 dedupe rework. The old rule (identical text on >=3 pages) ate REAL gear in
  // cookie-cutter proposals (the same speaker/remote lines repeat in many rooms), importing
  // Bedroom Four/Five empty. Headers repeat at the SAME y; equipment repeats at varying y,
  // so the key is now text+y. A second top-zone pass (text in the top 6 lines of >=3 pages)
  // still strips division headers whose y drifts, so they never become fake rooms.
  var seen={};
  pages.forEach(function(pl){ var u={}; pl.forEach(function(l){ var k=l.text+'@'+l.y; if(!u[k]){u[k]=1; seen[k]=(seen[k]||0)+1;} }); });
  var topSeen={};
  pages.forEach(function(pl){ var u={}; pl.slice(0,6).forEach(function(l){ if(!u[l.text]){u[l.text]=1; topSeen[l.text]=(topSeen[l.text]||0)+1;} }); });
  var out=[];
  pages.forEach(function(pl){ pl.forEach(function(l,idx){
    if((seen[l.text+'@'+l.y]||0)>=3) return;
    if(idx<6 && (topSeen[l.text]||0)>=3) return;
    out.push({indent:l.indent,text:l.text,b:l.b||null});
  }); });
  return out;
}

/* parser core (consumes {indent,text}) — mirrors the proven soParser */
var EQ_HOUSE=['Audio/Video Distribution','Power and Conditioning','Lighting Control','Shading','Security','Surveillance','Network','Infrastructure and Mechanical Room','Building to Building Wiring'];
var EQ_MAKERS=['AVPro Edge','Access Networks','Middle Atlantic','Xtreme Power','System Sensor','Origin Acoustics','Coastal Source','Admit One','Alarm.com','Anthem','Autonomics','Cleerline','Focal','Intrinsic','Macurco','Strong','Winland','Samsung','Sony','Sonos','Sonance','Nice','ELAN','Elan','Kordz','Sanus','BackBoxx','Wirepath','Araknis','LightSpeed','Apple','WattBox','Wattbox','Panamax','Lutron','DSC','Elk','ATW','GRI','Bosch','Honeywell','Winland','StarTech','Luma','Deco','Ruckus','Pakedge','Episode','Triad','Leviton','Crestron','Savant','URC','RTI'];
function eqCategory(qty,rest){ var r=rest.toLowerCase();
  if(qty<0) return 'adjustment';
  if(/^prewire\b/.test(r)) return 'prewire';
  if(/^client provided\b|^isp provided\b|^existing product\b/.test(r)) return 'client_provided';
  if(/^admit one discount\b/.test(r)) return 'discount';
  if(/^shipping/.test(r)) return 'shipping';
  if(/integration\b|\bsetup\b|software license\b|viewer software\b|finish labor/.test(r)) return 'labor';
  if(/laser printed grill|flex bracket|back box|backboxx|ground stake|stake install cap|rack kit|mount kit|centering kit|wire harness|landing board|cabling package|patch cord|fiber connector|fan out kit|adapter plate|media enclosure|hdmi cable|tilting mount|mounting plate|gang mount|wall plate|power cord/.test(r)) return 'material';
  if(/^package part\b|\bpackage\b|^conduit parts\b|^custom part\b|^36-45u cabling\b/.test(r)) return 'material';
  return 'equipment';
}
function eqType(desc){ var d=(desc||'').toLowerCase();
  if(/frame pro|frame television|frame tv/.test(d)||(/\bframe\b/.test(d)&&/tele|tv|pro/.test(d))) return 'Frame';
  if(/\bqled\b/.test(d)) return 'QLED';
  if(/mini led/.test(d)) return 'Mini LED';
  if(/\boled\b/.test(d)) return 'OLED';
  if(/outdoor rated|terrace/.test(d)) return 'Outdoor/Terrace';
  if(/invisible speaker/.test(d)) return 'Invisible speaker';
  if(/in-ceiling speaker/.test(d)) return 'In-ceiling speaker';
  if(/in-wall speaker/.test(d)) return 'In-wall speaker';
  if(/landscape/.test(d)) return 'Landscape speaker';
  if(/soundbar/.test(d)) return 'Soundbar';
  if(/subwoofer/.test(d)) return 'Subwoofer';
  if(/apple ?tv|appletv/.test(d)) return 'Apple TV';
  if(/music server/.test(d)) return 'Music server';
  if(/touch screen remote/.test(d)) return 'Remote';
  if(/touch panel|touch screen/.test(d)) return 'Touch panel';
  if(/turret camera|\bcamera\b/.test(d)) return 'Camera';
  if(/video doorbell|doorbell/.test(d)) return 'Doorbell';
  if(/\bnvr\b/.test(d)) return 'NVR';
  if(/surveillance controller/.test(d)) return 'Surveillance controller';
  if(/\bdecoder\b/.test(d)) return 'Video-over-IP decoder';
  if(/\bencoder\b/.test(d)) return 'Video-over-IP encoder';
  if(/remote control|handheld remote/.test(d)) return 'Remote';
  if(/a\/v receiver/.test(d)) return 'A/V receiver';
  if(/amplifier\b/.test(d)) return 'Amplifier';
  if(/\brouter\b/.test(d)) return 'Router';
  if(/switch\b/.test(d)) return 'Network switch';
  if(/access point/.test(d)) return 'Wireless access point';
  if(/keypad\b/.test(d)) return 'Keypad';
  if(/motorized.*shade|palladiom|roller shade/.test(d)) return 'Motorized shade';
  return null;
}
// 1.57.0 KNOWN_MODELS: seed of SKU knowledge, checked before all keywords. The forerunner
// of the equipment intelligence database; grows one line per correction Andy makes.
var EQ_KNOWN=[
  {re:/\bCP4\b|\bCP4-R\b/i, kind:'control', type:'Control processor'},
  {re:/DM-NAX/i, kind:'audio', type:'Audio amplifier'},
  {re:/DMF-CI/i, kind:'control', type:'Video-over-IP chassis'},
  {re:/DM-NVX/i, kind:'video', type:null},
  {re:/NG-SW/i, kind:'network', type:'Network switch'},
  {re:/Intrinsic|\(DEV\)/i, kind:'control', type:'Control driver'},
  {re:/\bDM-60\b/i, kind:'video', type:'TV lift', mfr:'Auton', model:'DM-60'}
];
function eqKnown(item){
  var s=((item.manufacturer||'')+' '+(item.model||'')+' '+(item.raw||''));
  for(var i=0;i<EQ_KNOWN.length;i++){ if(EQ_KNOWN[i].re.test(s)) return EQ_KNOWN[i]; }
  return null;
}
// ELAN and Nice are one brand; canonical label is ELAN/Nice everywhere.
function eqNorm(b){ return /^(nice|elan)$/i.test((b||'').trim()) ? 'ELAN/Nice' : b; }
function eqSplit(rest){
  if(/^(prewire|client provided|isp provided|existing product|admit one discount|shipping|package part|conduit parts|custom part|36-45u|room note|finish labor|travel time|lodging|per diem|out of area|monitoring and|cloud recording)/i.test(rest)) return {manufacturer:null,model:null,description:rest};
  var manufacturer=null,remainder=rest;
  for(var i=0;i<EQ_MAKERS.length;i++){ var m=EQ_MAKERS[i]; if(rest.toLowerCase().indexOf(m.toLowerCase()+' ')===0){ manufacturer=m; remainder=rest.slice(m.length).trim(); break; } }
  if(!manufacturer){ var p=rest.split(/\s+/); manufacturer=p.shift()||null; remainder=p.join(' '); }
  var toks=remainder.split(/\s+/), modelToks=[];
  for(var j=0;j<toks.length;j++){ var t=toks[j];
    if(/^\d+U$/.test(t)) break;
    if(/^\d+(MP|K|W|TB|GB|CH)$/i.test(t)) break;
    var isSku=/^[A-Z0-9][A-Z0-9.\-\/]*(\([A-Za-z0-9]+\)[A-Z0-9.\-\/]*)*$/.test(t);
    if(isSku && /[0-9A-Z-]/.test(t) && t.length>=2 && !/^(the|and|for|with)$/i.test(t)) modelToks.push(t); else break;
  }
  var model=modelToks.join(' ')||null;
  var description=toks.slice(modelToks.length).join(' ').trim().replace(/^-\s*/,'');
  return {manufacturer:eqNorm(manufacturer),model:model,description:description||remainder};
}
function eqKind(item,sectionName){
  if(sectionName==='Shading'||item._shadeRoom) return 'shade';
  // non-equipment (prewire, material, labor...) never classes video/audio/control
  if(item.category&&item.category!=='equipment') return 'other';
  var d=((item.description||'')+' '+(item.product_type||'')).toLowerCase();
  // 1.57.0: SKU knowledge beats keywords
  var known=eqKnown(item);
  if(known){
    // KNOWN beats every keyword guess: type always wins, and an entry can repair a
    // model-first line ("DM-60 Auton under-bed...") into the right make/model
    if(known.type) item.product_type=known.type;
    if(known.mfr) item.manufacturer=known.mfr;
    if(known.model) item.model=known.model;
    return known.kind;
  }
  if(/module for|driver/.test(d)&&/control|crestron|elan|savant/.test(d)) return 'control';
  if(eqIsSource(d)) return 'source';
  if(eqIsDisplay(item)) return 'video';
  if(/speaker|soundbar|subwoofer|sound bar|a\/v receiver/.test(d)) return 'audio';
  // 1.57.0 section signal first: a keypad inherits its section
  if(sectionName==='Security') return 'security';
  if(sectionName==='Surveillance') return 'surveillance';
  if(sectionName==='Network') return 'network';
  if(sectionName==='Lighting Control') return 'lighting_control';
  // keyword fallbacks anywhere
  if(/turret camera|bullet camera|\bcamera\b|video doorbell|doorbell|\bnvr\b|surveillance/.test(d)) return 'surveillance';
  if(/alarm panel|zone expander|door contact|motion detector|glassbreak|smoke detector|heat detector|\bsiren\b|water probe|waterbug|low temp|carbon monoxide|alarm\.com radio|security control board|wireless transceiver/.test(d)) return 'security';
  if(/\brouter\b|network switch|poe switch|access point|\bsfp\b|direct attach cable|\bgateway\b/.test(d)) return 'network';
  if(/dimming module|switching module|\bdimmer\b|homeworks|lighting processor|alisse|lighting keypad|rf system repeater/.test(d)) return 'lighting_control';
  if(!/crestron|digitalmedia/.test(d)&&/downlight|recessed|sconce|light fixture|\bfixture\b|tape light|\btrim\b|housing|lucifer|\bwac\b|\bdmf\b/.test(d)) return 'lighting_fixture';
  if(/touch panel|touch screen|controller|processor|keypad|amplifier|matrix|switch\b|decoder|encoder|system controller|remote control|handheld remote/.test(d)) return 'control';
  return 'other';
}
function eqDetectSystems(models){ var M=models.toLowerCase(),s=[];
  // Capability layer only — the things that shape a support call. The NAMED systems
  // (control/lighting/network/security) live in the System Types fields, not here.
  if(/mxnet/i.test(models)) s.push({domain:'Video distribution',value:'MXNET (video over IP)'});
  if(/appletv|apple tv/.test(M)) s.push({domain:'Sources',value:'Apple TV'});
  if(/\bsonos\b/.test(M)) s.push({domain:'Streaming',value:'Sonos'});
  if(/xtreme power|\bups\b|uninterruptible/.test(M)) s.push({domain:'Power',value:'Xtreme UPS'});
  if(/wattbox/.test(M)) s.push({domain:'Power',value:'WattBox'});
  return s;
}
// Named systems for the System Types fields (auto-populate, overwrite-always on import).
function eqNamedSystems(parsed){
  var corpus=[]; parsed.sections.forEach(function(sec){ sec.items.forEach(function(i){ corpus.push(((i.manufacturer||'')+' '+(i.model||'')+' '+(i.description||''))); }); });
  var M=corpus.join(' | ').toLowerCase();
  var out={};
  if(/el-sc-350|el-sc-150|\bnice\b|\belan\b/.test(M)) out.control='ELAN/Nice';
  else if(/control4/.test(M)) out.control='Control4'; else if(/savant/.test(M)) out.control='Savant';
  else if(/crestron/.test(M)) out.control='Crestron'; else if(/\burc\b/.test(M)) out.control='URC';
  if(/lutron/.test(M)&&/(hqp7|homeworks|palladiom)/.test(M)) out.lighting='Lutron HomeWorks';
  else if(/lutron/.test(M)) out.lighting='Lutron';
  if(/araknis/.test(M)) out.network='Araknis'; else if(/access networks/.test(M)) out.network='Access Networks';
  else if(/ruckus/.test(M)) out.network='Ruckus'; else if(/pakedge/.test(M)) out.network='Pakedge';
  if(/\bdsc\b/.test(M)&&/neo/.test(M)) out.security='DSC'; else if(/qolsys/.test(M)) out.security='Qolsys'; else if(/\bdsc\b/.test(M)) out.security='DSC';
  // surveillance: the brand of the NVR / cameras / doorbell, NOT an internal drive (e.g. Luma WD-43PURZ)
  var surv=null;
  parsed.sections.forEach(function(sec){ sec.items.forEach(function(i){
    var dd=(i.description||'').toLowerCase();
    if(/turret camera|\bcamera\b|video doorbell|\bnvr\b|surveillance controller/.test(dd) && i.manufacturer && !surv) surv=i.manufacturer;
  });});
  if(surv) out.cameras=eqNorm(surv);
  return out;
}
function eqParse(lines){
  // 1.56.0: unit-aware qty (ea or ft) so per-foot wiring lines parse as real lines
  var qtyRe=/^(-?\d+)(\s+(?:ea|ft))?\s+(\S.*)$/;
  function qline(t){ var m=t.match(qtyRe); if(!m) return null; if(/^-?\d+["'.]/.test(t)) return null;
    // 1.57.0: a bare number followed by a spec word is a continuation ("15 Ampere, 1000 watt"), not a qty line
    if(/^(ampere|amp|amps|watt|watts|volt|volts|va|degree|degrees|ohm|ohms|channel|channels|zone|zones|port|ports|outlet|outlets)\b/i.test(m[3])) return null;
    return {qty:parseInt(m[1],10),ea:!!m[2],rest:m[3].trim()}; }
  var qi=[]; lines.forEach(function(l){ if(qline(l.text)) qi.push(l.indent); });
  var uniq=qi.filter(function(v,i,a){return a.indexOf(v)===i;}).sort(function(a,b){return a-b;});
  var splitAt=uniq.length?uniq[uniq.length-1]+1:0, maxGap=-1;
  for(var i=1;i<uniq.length;i++){ var g=uniq[i]-uniq[i-1]; if(g>maxGap){maxGap=g;splitAt=uniq[i];} }
  var primaryMax=(maxGap>=8)?splitAt-1:Infinity;
  var minQty=uniq.length?uniq[0]:0;
  var sections=[],cur=null,lastPrimary=null,lastItem=null;
  function pushItem(it,isP){ cur.items.push(it); lastItem=it; if(isP) lastPrimary=it; else if(lastPrimary) lastPrimary.accessories.push(it); }
  lines.forEach(function(l){
    var q=qline(l.text);
    if(q && l.indent>=minQty-2){
      var isP=l.indent<=primaryMax; var sm=eqSplit(q.rest);
      var it={qty:q.qty,manufacturer:sm.manufacturer,model:sm.model,description:sm.description,
        product_type:eqType(sm.description),category:eqCategory(q.qty,q.rest),tier:isP?'primary':'accessory',accessories:[],raw:q.rest};
      if(!cur){ cur={name:'Unfiled',kind:'room',items:[]}; sections.push(cur); }
      pushItem(it,isP); return;
    }
    if(l.indent<minQty-2){
      var nm=l.text; var kind=EQ_HOUSE.indexOf(nm)>=0?'house':'room';
      cur={name:nm,kind:kind,building:l.b||null,items:[]}; sections.push(cur); lastPrimary=null; lastItem=null; return;
    }
    if(lastItem){ if(/^notes:/i.test(l.text)){ /* drop note marker */ } else {
      lastItem.description=(lastItem.description+' '+l.text).trim(); lastItem.product_type=eqType(lastItem.description);
      // 1.57.0: the category-deciding words often arrive on the continuation line ("flex
      // bracket", "back box", "media enclosure"); recompute, equipment upgrades to
      // material/labor only, never the reverse
      if(lastItem.category==='equipment'){
        var up=eqCategory(lastItem.qty,(lastItem.raw+' '+lastItem.description));
        if(up==='material'||up==='labor') lastItem.category=up;
      }
    } }
  });
  var allModels=[]; sections.forEach(function(s){ s.items.forEach(function(i){ allModels.push((i.manufacturer||'')+' '+(i.model||'')+' '+(i.description||'')); }); });
  // banner is the whole snapshot: named systems (also fill the System Types fields) + capabilities
  var named=eqNamedSystems({sections:sections});
  var pills=[];
  if(named.control) pills.push({domain:'Control',value:named.control});
  if(named.lighting) pills.push({domain:'Lighting',value:named.lighting});
  if(named.network) pills.push({domain:'Network',value:named.network});
  if(named.security) pills.push({domain:'Security',value:named.security});
  if(named.cameras) pills.push({domain:'Surveillance',value:named.cameras});
  return {sections:sections,systems:pills.concat(eqDetectSystems(allModels.join(' | ')))};
}
// 1.50.0 (slice 4): pull a trailing room number off the as-sold room name ("Loft 301" -> "301") so the
// stable cross-document key is populated going forward. The as-sold room string is left untouched (it stays
// the verbatim anchor find-or-create keys on and that the room header shows); the number rides alongside.
function eqRoomNumber(room){ var m=String(room==null?'':room).match(/\s+(\d{1,4})\s*$/); return m?m[1]:null; }
// ---- 1.56.0 shade room extraction v2 ----
var EQ_NUMWORD={one:'1',two:'2',three:'3',four:'4',five:'5',six:'6',seven:'7',eight:'8',nine:'9',ten:'10'};
function eqRoomNormKey(name){
  return String(name||'').toLowerCase().replace(/#/g,'').replace(/\bnumber\b/g,'')
    .split(/\s+/).map(function(t){ return EQ_NUMWORD[t]||t; }).join(' ').replace(/\s+/g,' ').trim();
}
var EQ_WIN_WORDS=['left','right','center','centre','big','small','large','upper','lower','east','west','north','south','window','windows','and','&'];
// "Kitchen Center & Right Window" -> { room:"Kitchen", descriptor:"Center & Right Window" }
function eqShadeSplitName(raw){
  var toks=String(raw||'').trim().split(/\s+/);
  var cut=toks.length;
  while(cut>0 && EQ_WIN_WORDS.indexOf(toks[cut-1].toLowerCase())>=0) cut--;
  if(cut===toks.length||cut===0) return null;
  return { room: toks.slice(0,cut).join(' '), descriptor: toks.slice(cut).join(' ') };
}
// descriptor + qty -> one position label per physical shade (the defective-able unit)
function eqShadePositions(descriptor,qty){
  var d=(descriptor||'').trim();
  var suffix=/windows?$/i.test(d)?' Window':'';
  var body=d.replace(/\s*windows?$/i,'');
  var parts=body.split(/\s*(?:&|and)\s*/i).map(function(s){return s.trim();}).filter(Boolean);
  var out=[];
  if(parts.length===qty && qty>1){ parts.forEach(function(p){ out.push((p+suffix).trim()); }); return out; }
  if(qty===1){ out.push(d||'Window'); return out; }
  for(var i=1;i<=qty;i++){ out.push(((d||'Window')+' '+i).trim()); }
  return out;
}
// a real shade line only: never power supplies, panels, prewire, repeaters, keypads, labor
function eqIsShadeItem(it){
  var d=((it.description||'')+' '+(it.raw||'')).toLowerCase();
  if(it.category!=='equipment') return false;
  if(/power supply|panel to panel|landing board|wire harness|repeater|processor|keypad|dimmer|labor|shipping/.test(d)) return false;
  return /shade|palladiom/.test(d);
}
function eqToRows(parsed){
  var rows=[];
  // rooms known from this parse, normalized (#1 == One), keyed per building ('' = none)
  var roomKeys={};
  parsed.sections.forEach(function(s){ if(s.kind==='room'){ var bk=s.building||''; (roomKeys[bk]=roomKeys[bk]||{})[eqRoomNormKey(s.name)]=s.name; } });
  function matchRoom(name,building){
    var key=eqRoomNormKey(name), bk=building||'';
    if(roomKeys[bk]&&roomKeys[bk][key]) return roomKeys[bk][key];
    for(var b in roomKeys){ if(roomKeys[b][key]) return roomKeys[b][key]; }
    return null;
  }
  parsed.sections.forEach(function(s){
    s.items.forEach(function(it){
      if(it.tier!=='primary') return;
      var room=s.name, section_kind=s.kind;
      // 1.56.0: expense buckets and note rows never become equipment
      if(/out of area|travel expense/i.test(s.name)) return;
      if(/^(room note|out of area|travel time|lodging|per diem|monitoring and|cloud recording)/i.test(it.raw||'')) return;
      // shades live in the house Shading section but carry a room in the text
      if(s.name==='Shading'){
        var m=(it.description||'').match(/^([A-Za-z0-9 \/]+?),\s*W\d/);
        if(m){ room=m[1].trim(); section_kind='room'; it._shadeRoom=true; }
        else if(eqIsShadeItem(it)){
          // v2: the window-name format ("Kitchen Left Window" as the line, shade text in the description)
          var sp=eqShadeSplitName(it.raw);
          if(sp){
            room=matchRoom(sp.room,s.building)||sp.room; section_kind='room'; it._shadeRoom=true;
            var qn=Math.max(1,it.qty||1);
            eqShadePositions(sp.descriptor,qn).forEach(function(pos){
              rows.push({ room:room, room_label:null, room_number:eqRoomNumber(room), kind:'shade',
                manufacturer:it.manufacturer, model:it.model, product_type:it.product_type||'Motorized shade',
                qty:1, description:it.description, category:it.category,
                position_label:pos, section_kind:'room', building:s.building||null, accessories:[] });
            });
            return; // one row per physical shade emitted
          }
        }
      }
      var kind=eqKind(it,s.name);
      // 1.57.0 distributed devices split per physical unit: APs stay in Network, cameras in
      // Surveillance, each individually labelable and defect-trackable, never room-moved by default
      var d2=((it.description||'')+' '+(it.product_type||'')).toLowerCase();
      var splitAs=null;
      if(it.category==='equipment'&&(it.qty||1)>1){
        if(kind==='network'&&/access point/.test(d2)) splitAs='AP';
        else if(kind==='surveillance'&&/camera/.test(d2)&&!/\bnvr\b/.test(d2)) splitAs='Camera';
      }
      if(splitAs){
        for(var u=1;u<=it.qty;u++){
          rows.push({ room:room, room_label:null, room_number:eqRoomNumber(room), kind:kind,
            manufacturer:it.manufacturer, model:it.model, product_type:it.product_type,
            qty:1, description:it.description, category:it.category,
            position_label:splitAs+' '+u, section_kind:section_kind, building:s.building||null,
            accessories:(it.accessories||[]).map(function(a){return {q:a.qty,mk:a.manufacturer,md:a.model,d:a.description};}) });
        }
        return;
      }
      rows.push({
        room:room, room_label:null, room_number:eqRoomNumber(room), kind:kind,
        manufacturer:it.manufacturer, model:it.model, product_type:it.product_type,
        qty:it.qty, description:it.description, category:it.category,
        position_label:null, section_kind:section_kind, building:s.building||null,
        accessories:(it.accessories||[]).map(function(a){return {q:a.qty,mk:a.manufacturer,md:a.model,d:a.description};})
      });
    });
  });
  return rows;
}
function eqImportClick(){ var f=document.getElementById('eq-file'); if(f) f.click(); }
async function eqOnFile(input){
  if(!input.files||!input.files[0]||!_hd) return;
  var file=input.files[0]; input.value='';
  eqStatus('Reading '+file.name+'…');
  try{
    var lines=await eqExtractLayout(file);
    eqStatus('Parsing equipment…');
    var parsed=eqParse(lines);
    var rows=eqToRows(parsed);
    if(!rows.length){ eqStatus('No equipment lines found in that PDF. Is it the sales order?'); return; }
    eqStatus('Saving '+rows.length+' lines…');
    var res=await rwFetch('/api/households/'+_hd.id+'/equipment/import',{method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({rows:rows,systems:parsed.systems,source:'sales_order'})});
    if(!res.ok){ eqStatus('Save failed.'); return; }
    // auto-populate the System Types fields from the parse (SO is the word of truth: overwrite always)
    var named=eqNamedSystems(parsed);
    var fields={};
    if(named.control!==undefined) fields.control_system_type=named.control;
    if(named.lighting!==undefined) fields.lighting_system_type=named.lighting;
    if(named.network!==undefined) fields.network_tier=named.network;
    if(named.security!==undefined) fields.lock_system_type=named.security;
    if(named.cameras!==undefined) fields.camera_system_type=named.cameras;
    if(Object.keys(fields).length){ try{ await rwFetch('/api/households/'+_hd.id,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(fields)}); }catch(e){} }
    // store the source PDF so the parsed record and the original live together
    try{ var fd=new FormData(); fd.append('file',file,file.name); await rwFetch('/api/households/'+_hd.id+'/equipment/source',{method:'POST',body:fd}); }catch(e){}
    eqStatus(''); openHouseholdDetail(_hd.id);
  }catch(e){ console.error('[equipment import]',e); eqStatus('Import failed: '+(e.message||'error')); }
}
</script>

</body>
</html>