/* ─────────────────────────────────────────────────────────────────────────
 * comms-skin.css — the comm centre, dressed in this dashboard's clothes.
 *
 * comms.js is the clinic's file and stays a verbatim copy, so nothing here
 * edits it. It ships ~1,200 lines of its own CSS built for a physiotherapy
 * dashboard: a cool blue canvas, Google-blue tabs, iMessage blue, pink for
 * unread. This sheet sits on top and re-points that at Yam Shel Shiurim —
 * the same calm ocean the rest of the dashboard is painted in.
 *
 * TWO RULES FOR EDITING THIS FILE:
 *
 * 1. Beat the original by SPECIFICITY, not by load order. comms.js appends its
 *    styles in four separate bursts at four different moments (mount, first
 *    conversation, first attachment, the call popup), so "mine loads last" is
 *    only true until it isn't. Prefixing with #view-comms is one id against
 *    their one class and wins whenever it lands. Media queries add no
 *    specificity at all.
 *
 * 2. Custom properties are the exception — they cannot be won on specificity
 *    from a different element, so the :root block here has to ARRIVE after
 *    theirs. comms-host.js re-appends this <link> once the shell is mounted
 *    (__yssSkinLast) for exactly that reason.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── the tokens comms.js uses but never defines ───────────────────────────
   Twenty of them. In the clinic they come from its index.html; here they are
   answered from this dashboard's own palette, so the comm centre is the same
   colour as the Work tab rather than a second app bolted on. Nothing competes
   for these names, so load order does not matter for this block. */
:root{
  --text:#1c2b33;          /* --ink   */
  --text2:#6b7d87;         /* --muted */
  --white:#ffffff;
  --border:#e3e9ec;        /* --line  */
  --g50:#fbfcfc;
  --g100:#f1f5f6;
  --g400:#a8b6bd;
  --blue:#0e6e8c;          /* --accent */
  --green-dk:#2e7d5b;
  --green-chk:#2e7d5b;
  --orange:#8a6d2f;        /* --warn */
  /* The clinic tints "needs you" pink and edges it red. Never red for a normal
     state here: it becomes the same warm sand the rest of the dashboard uses
     for "waiting on you", which is what the colour actually means. */
  --pink-bg:#f7efe0;
  --pink-dk:#8a6d2f;
  --pink-x:#7a5e28;
  --red-dk:#9a5b4a;        /* genuine errors only, and still not a siren */
  --topbar-h:78px;
  --sp-dock-h:0px;
  --pop-dx:0px;
  --pop-dy:0px;
}

/* ── the tokens comms.js DOES define, re-pointed ──────────────────────────
   One blue for send/primary, one green for call, one selected tint. */
:root{
  --cc-blue:#0e6e8c; --cc-blue-dk:#0a5570; --cc-blue-soft:#e3f0f5;
  --cc-blue-soft-bd:#cfe3ea; --cc-blue-ink:#0a5570;
  --cc-green:#2e7d5b; --cc-green-dk:#276a4d;
  --cc-green-soft:#e4f2ec; --cc-green-soft-bd:#cde4d9;
  --cc-tint:#e3f0f5; --cc-tint-ink:#0a5570;
}

/* ── the mount ────────────────────────────────────────────────────────────
   comms.js owns the screen below the masthead. #view-comms is a sibling of
   #view, not a child, because this dashboard's router calls replaceChildren on
   #view on every route — a shell mounted inside it would be destroyed and
   rebuilt on every tab switch, losing the open conversation and the scroll. */
#view-comms{display:none;}
#view-comms.on{display:flex;}

/* ── typography ───────────────────────────────────────────────────────────
   The comm centre inherited the system stack with its own sizes; the rest of
   the dashboard is one 14px/1.5 system stack. Matching the family is what
   stops it reading as a different product. */
#view-comms, #view-comms input, #view-comms textarea, #view-comms button,
#view-comms select, .patient-picker, .contact-editor, .comms-compose-modal{
  font-family:-apple-system, "Segoe UI", Roboto, sans-serif;
}
#view-comms .inbox-name{font-weight:600;}

/* ── surfaces ─────────────────────────────────────────────────────────────
   Paper underneath, white cards on top — the same two-surface idea as the
   Stores board, so switching tabs does not feel like switching apps. */
#view-comms .comms-shell{background:var(--bg);}
#view-comms .pane-inbox{background:var(--card); border-right:1px solid var(--line);}
#view-comms .pane-thread{background:var(--bg);}
#view-comms .pane-context{background:var(--card); border-left:1px solid var(--line);}
#view-comms .inbox-chips{background:var(--card); border-bottom:1px solid var(--line);}
#view-comms .inbox-searchrow{background:var(--card);}

@media (min-width:768px){
  #view-comms .comms-shell{
    border-radius:14px; overflow:hidden;
    border:1px solid var(--line); box-shadow:0 1px 2px rgba(28,43,51,.06);
  }
  #view-comms .pane-inbox{flex:0 0 352px;}
  #view-comms .pane-context{flex:0 0 320px;}
}
@media (min-width:1500px){
  #view-comms .pane-inbox{flex:0 0 380px;}
  #view-comms .pane-context{flex:0 0 352px;}
}

/* ── the channel tabs ─────────────────────────────────────────────────────
   Google-blue underline out, the dashboard's accent in. */
#view-comms .chip{padding:12px 11px 9px; font-size:12.5px; color:var(--muted); font-weight:500;}
#view-comms .chip:hover{color:var(--accent-deep); background:var(--g50);}
#view-comms .chip.on{color:var(--accent-deep); border-bottom-color:var(--accent); font-weight:600;}
#view-comms .chip.on .chip-n{color:var(--accent);}
#view-comms .chip-n{color:var(--faint);}
#view-comms .chip-icon{color:var(--muted); background:var(--card); border-left:1px solid var(--line);}
#view-comms .chip-icon.on{color:var(--accent-deep); background:var(--accent-soft); border-bottom-color:var(--accent);}
#view-comms .chip-sep{background:var(--line);}
#view-comms .inbox-searchrow .chip-icon{color:var(--muted); background:transparent; border-left:0;}
#view-comms .inbox-searchrow .chip-icon:hover,
#view-comms .inbox-searchrow .chip-icon.on{color:var(--accent-deep); background:var(--accent-soft);}

/* ── search ─────────────────────────────────────────────────────────────
   The clinic fills this field with a grey slab, and so did this sheet —
   which put a block of grey across the top of a white panel, on a dashboard
   whose every other input is a white box with a hairline round it. It sits
   flush now: paper-white fill, one --line border, the accent ring kept for
   focus. (The placeholder is set in comms-host.js and is kept short enough
   to FIT — the pane is 352px wide and leaves the text about 179px, which
   the clinic's wording ran off the end of mid-word.) */
#view-comms .inbox-search{background:var(--g50); color:var(--ink); border-color:var(--line);}
#view-comms .inbox-search::placeholder{color:var(--faint);}
#view-comms .inbox-search:focus{
  background:var(--card); border-color:transparent;
  box-shadow:0 0 0 2px var(--accent), 0 1px 3px rgba(28,43,51,.10);
}
#view-comms .inbox-search-ico, #view-comms .inbox-allbtn{color:var(--muted);}
#view-comms .inbox-allbtn:hover{color:var(--accent-deep); background:var(--accent-soft);}

/* ── the channel chips on a row ───────────────────────────────────────────
   comms.js hardcodes these five, and one of them is red. A missed call is a
   normal state on this system — Google Voice notifies, nobody is waiting on a
   line — and red is for something being wrong. Warm sand says "yours to deal
   with" without shouting; the rest come into the dashboard's own greys, ocean
   and green. */
#view-comms .cr-chip-missed{background:var(--warn-soft); color:var(--warn);}
#view-comms .cr-chip-voicemail{background:var(--accent-soft); color:var(--accent-deep);}
#view-comms .cr-chip-sms, #view-comms .cr-chip-email,
#view-comms .cr-chip-fax{background:var(--g100); color:var(--muted);}
#view-comms .cr-chip-call{background:var(--good-soft); color:var(--good);}
#view-comms .cr-chip-note{background:var(--g100); color:var(--ink);}

/* ── the conversation list ────────────────────────────────────────────────
   Hairlines instead of boxed rows. NO hover lift: running the mouse down the
   list made every row rise and drop, which reads as the page twitching at
   nothing. The row you are on is marked by .selected; the pointer does not
   need its own opinion. */
#view-comms .inbox-row{border-bottom:1px solid var(--line);}
#view-comms .comms-row:hover:not(.selected),
#view-comms .inbox-scroll.is-scrolling .comms-row:hover{box-shadow:none;}
#view-comms .inbox-row.selected{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent);}
#view-comms .inbox-row.selected .inbox-name{color:var(--accent-deep);}

/* READ vs UNREAD, the way round he wants it: what he has already dealt with
   fades into a wash, and anything he has NOT looked at stays clean white and
   stands out of the column. The list empties visually as he works down it. */
#view-comms .inbox-row.cr-unread:not(.selected){background:var(--card);}
#view-comms .inbox-row:not(.cr-unread):not(.selected){background:var(--g100);}
#view-comms .inbox-row.cr-unread .cr-name{font-weight:600; color:var(--ink);}
#view-comms .inbox-row:not(.cr-unread) .cr-name{color:var(--muted);}
#view-comms .inbox-row:not(.cr-unread) .cr-summary{color:var(--muted);}
#view-comms .inbox-time, #view-comms .inbox-preview{color:var(--muted);}
#view-comms .inbox-name{color:var(--ink);}

/* ── message bubbles ──────────────────────────────────────────────────────
   The tails are pseudo-elements: ::before is a wedge in the BUBBLE's colour
   and ::after is a cutout that has to match the THREAD's background exactly,
   or the curl shows as a notch of the wrong colour. Changing a bubble colour
   without changing both is what leaves a stray blue horn on screen. */
#view-comms .cv-out{background:var(--accent); color:#f4fafc;}
#view-comms .cv-out::before{border-right-color:var(--accent);}
#view-comms .cv-out::after{background:var(--bg);}
#view-comms .cv-in{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(28,43,51,.06);}
#view-comms .cv-in::before{border-left-color:var(--card);}
#view-comms .cv-in::after{background:var(--bg);}
#view-comms .cv-in .cv-ch{color:var(--faint);}
#view-comms .cv-out .cv-ch{color:rgba(244,250,252,.78);}
#view-comms .cv-sep-d{color:var(--ink);}
#view-comms .cv-sep-t{color:var(--faint);}
#view-comms .cv-thread:empty::before{color:var(--faint);}

/* The conversation's measure. Bubbles capped at 75% of a wide middle column
   fling the two sides of a conversation to opposite edges of the screen — you
   read a reply, then track your eye 500px back for the answer. */
@media (min-width:900px){
  #view-comms .thread-body > .cv-thread,
  #view-comms .thread-composer > *{width:100%; max-width:720px; margin-inline:auto;}
  #view-comms .thread-body > .cv-thread{margin-top:auto;}
}

/* ── the composer ─────────────────────────────────────────────────────── */
#view-comms .thread-composer{background:transparent; border-top:0; padding-top:0;}
#view-comms .dock-email{background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; box-shadow:0 1px 2px rgba(28,43,51,.06);}
#view-comms #dock-email-body{background:transparent; color:var(--ink);}
#view-comms #dock-email-body::placeholder{color:var(--faint);}
#view-comms .comms-send-btn, #view-comms .cc-send{background:var(--accent); color:#fff; border-color:var(--accent);}
#view-comms .comms-send-btn:hover, #view-comms .cc-send:hover{background:var(--accent-deep);}

/* ── the context card ─────────────────────────────────────────────────── */
#view-comms .context-head{background:var(--card); border-bottom:1px solid var(--line);}
#view-comms .context-title, #view-comms .bc-name{color:var(--ink);}
#view-comms .context-empty, #view-comms .thread-empty{color:var(--faint);}
#view-comms .bc-meta, #view-comms .bc-line{color:var(--muted);}

/* ── THE THINGS THIS SYSTEM DOES NOT HAVE ─────────────────────────────────
   Hidden here rather than cut out of comms.js, so the file stays a verbatim
   copy and the day any of this becomes real the fix is deleting a line.

   THE PHONE. No Telnyx, no softphone, no SMS — so no dial pad, no status
   select, no Call button and no text box. This is belt AND braces: no row the
   mirror writes carries a phone-shaped address either, which is what makes
   comms.js itself open every conversation on the email composer. These rules
   catch the fixed furniture that is drawn whether or not a conversation has a
   number. */
#view-comms .comms-softphone, #view-comms #comms-softphone{display:none !important;}
#view-comms #dock-modes{display:none !important;}
#view-comms .dock-pane.dock-sms{display:none !important;}
#view-comms #dock-callback, #view-comms #dock-callback-btn,
#view-comms .dock-call-inline, #view-comms #dock-email-call,
#view-comms .dock-back-btn{display:none !important;}
/* The per-row buttons that mean the same thing. data-act="reply" is the CALL
   button (comms.js's own naming); "text-back" is the text; "play" is a call
   recording, and nothing here records anything. */
#view-comms [data-act="reply"], #view-comms [data-act="text-back"],
#view-comms [data-act="play"], #view-comms [data-act="call"],
.cxc-menu [data-act="reply"], .cxc-menu [data-act="text-back"],
.cxc-menu [data-act="play"]{display:none !important;}
/* A dock with its email pane hidden is the text composer, and there is nothing
   to compose a text with. Hide the whole strip rather than leave an empty bar
   under the conversation. */
#view-comms #comms-dock:has(> .dock-pane.dock-email[hidden]){display:none !important;}

/* AI. Nothing in this project drafts or polishes email, and aiOn() says so —
   which removes the compose modal's ✨ Polish on its own. These two are the
   ones that check sits behind. */
#view-comms #dock-polish, #view-comms .dock-polish,
#view-comms #cc-polish-wrap, #view-comms .cc-polish-revert,
#view-comms #dock-quick{display:none !important;}

/* ATTACHMENTS. The send path here is send-reply, which sends text and HTML and
   has nothing to carry a file with — and email-send refuses an attachment out
   loud rather than dropping it. A 📎 that cannot attach is the same lie one
   step earlier, so it goes too. */
#view-comms .att-btn, #view-comms #cc-att, #view-comms #dock-email-att,
.comms-compose-modal .att-btn{display:none !important;}

/* THE CHART. The context pane is built around a physiotherapy record: a
   therapist line, an appointment grid, a Call and a Text button. What is left
   is the part that means something here — the store's name, its card, and
   Email — and /briefing fills the card. */
#view-comms .bc-meta, #view-comms .bc-sched,
#view-comms .bc-action[data-act="call"],
#view-comms .bc-action[data-act="text"]{display:none !important;}
#view-comms .bc-action[data-act="email"]{background:var(--accent); color:#fff; border-color:var(--accent);}

/* Take-a-message is "leave yourself a note" here; there is no Meyer, Ajay or
   Moshe to route it to. */
#view-comms .tm-note-to, .tm-modal .tm-note-to{display:none !important;}

/* ── overlays ─────────────────────────────────────────────────────────────
   The contacts panel, the contact editor and compose. These sit OUTSIDE
   #view-comms in the DOM when open, so they are styled without the id prefix. */
.patient-picker, .contact-editor, .comms-compose-modal{
  border-radius:14px; border:1px solid var(--line);
  box-shadow:0 24px 60px -20px rgba(28,43,51,.42);
}
.patient-picker-backdrop, .contact-editor-backdrop, .comms-compose-backdrop{
  background:rgba(28,43,51,.36); backdrop-filter:saturate(1.1) blur(2px);
}
.pp-head{border-bottom:1px solid var(--line);}
.pp-head input{border:1px solid var(--line); border-radius:9px; font-size:14px;}
.pp-head input:focus{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.pp-list-letter{background:var(--g50); color:var(--faint);}
.pp-item{border-bottom:1px solid var(--line);}
.pp-item:hover{background:var(--accent-soft);}
.pp-item-tag, .pp-item-tag.tag-contact{background:var(--g100); color:var(--muted);}
.pp-edit:hover{background:var(--g100); color:var(--ink);}
.tm-modal .dock-staff{display:none;}

/* ── settings pane ────────────────────────────────────────────────────── */
#view-comms .callset-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 1px 2px rgba(28,43,51,.06);
}
#view-comms .callset-h{color:var(--ink);}
#view-comms .callset-hint, #view-comms .callset-note, #view-comms .callset-empty{color:var(--muted);}
#view-comms .callset-hint:empty{display:none;}