/* 990 Scout docked inbox — bottom-right, site-wide (Telegram-simple). Scoped under
   #scout-dock so it can't collide with page styles. Launcher pill → two-pane panel. */
#scout-dock, #scout-dock *{box-sizing:border-box}
#scout-dock{
  --green:#1f6b4a;--green-2:#175937;--green-soft:#eaf3ee;--ink:#16181a;--muted:#8b908c;
  --line:rgba(18,24,20,.08);--paper:#fff;--bg:#f5f4f0;--sel:#eef4f0;--online:#2bd07a;--them:#f1f2ef;
  --accent-purple:#7c5cdb;--bg-light:#f0f0f0;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  /* --dock-safe-bottom: clearance a page reserves for its OWN sticky bottom bar. The dock sits
     above everything (z-index 2147483000), so without it the launcher pill lands ON a page's
     bottom-pinned CTA -- measured on the org hub at 390px, where the pill covered the sticky
     Donate button outright. Pages with a bottom bar set the var on :root; everyone else keeps 0. */
  position:fixed;right:22px;bottom:calc(22px + var(--dock-safe-bottom, 0px));z-index:2147483000;
  font-family:var(--sans);color:var(--ink);line-height:1.5;
}
/* ---- launcher pill ---- */
#scout-dock .dock-launch{
  display:flex;align-items:center;gap:9px;border:none;cursor:pointer;
  background:var(--green);color:#fff;border-radius:26px;padding:11px 18px 11px 15px;
  box-shadow:0 6px 20px -4px rgba(18,60,36,.4),0 2px 6px rgba(0,0,0,.12);font:600 14px var(--sans);
  transition:transform .16s,box-shadow .16s,background .16s;position:relative;
}
#scout-dock .dock-launch:hover{transform:translateY(-2px);background:var(--green-2);box-shadow:0 12px 28px -6px rgba(18,60,36,.46)}
#scout-dock .dock-launch svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
#scout-dock .dock-badge{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 6px;background:#e0533f;color:#fff;
  border:2px solid #fff;border-radius:999px;font:700 11px var(--sans);line-height:17px;text-align:center;transform:scale(0);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
#scout-dock .dock-badge.on{transform:scale(1)}
#scout-dock.open .dock-launch{display:none}

/* ---- docked panel ---- */
#scout-dock .dock-panel{
  position:absolute;right:0;bottom:0;width:720px;max-width:calc(100vw - 44px);height:min(580px,calc(100vh - 120px));
  background:var(--paper);border-radius:18px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 1px 3px rgba(18,24,20,.06),0 24px 60px -18px rgba(18,40,26,.4);border:1px solid var(--line);
  transform-origin:bottom right;
}
#scout-dock.open .dock-panel{display:flex;animation:dockin .2s cubic-bezier(.22,1,.36,1)}
@keyframes dockin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
#scout-dock .dock-body{flex:1;min-height:0;display:flex}

/* ---- left pane ---- */
#scout-dock .pane-list{width:290px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);position:relative}
#scout-dock .lh{height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;border-bottom:1px solid var(--line)}
#scout-dock .lh .t{font:700 18px/1 var(--sans);letter-spacing:-.02em}
#scout-dock .lh .on{display:none;align-items:center;gap:5px;font:500 11.5px var(--sans);color:var(--muted);margin-left:9px}
#scout-dock .lh .on.live{display:inline-flex} #scout-dock .lh .on .d{width:6px;height:6px;border-radius:50%;background:var(--online)}
#scout-dock .lh .l{display:flex;align-items:baseline}
#scout-dock .lh-buttons{display:flex;gap:3px;flex:none;align-items:center}
#scout-dock .iconbtn{width:32px;height:32px;border:none;border-radius:9px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:3px;transition:background .12s,color .12s}
#scout-dock .iconbtn:hover{background:var(--green-soft);color:var(--green)} #scout-dock .iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
#scout-dock .lsearch{padding:9px 10px;flex:none}
#scout-dock .lsearch input{width:100%;border:1px solid transparent;background:var(--bg);border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;transition:background .12s,border-color .12s}
#scout-dock .lsearch input:focus{outline:none;border-color:rgba(28,107,67,.45);background:#fff}
#scout-dock .convs{flex:1;overflow-y:auto;min-height:0;padding:3px 7px}
#scout-dock .conv{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;border-radius:11px}
#scout-dock .conv:hover{background:var(--bg)} #scout-dock .conv.sel{background:var(--sel)}
#scout-dock .av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px;position:relative}
#scout-dock .av .pd{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--online);border:2.5px solid #fff;display:none}
#scout-dock .av.online .pd{display:block}
#scout-dock .conv .m{min-width:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
#scout-dock .conv .row1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
#scout-dock .conv .nm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
#scout-dock .conv .tm{font:11px var(--sans);color:var(--muted);flex:none}
#scout-dock .conv .pv{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#scout-dock .conv.unread .nm{font-weight:700} #scout-dock .conv.unread .pv{color:var(--ink);font-weight:500}
/* Verified badge -- a MIRROR of _verified_badge.html's inline styling (gh#5150 VP review),
   carried here once for the whole stylesheet rather than per row: dock-inbox.js renders
   the mark into .conv/.th/.prow names from JSON (verified/verified_entity_type), so there is
   no Jinja include here to carry the partial's own <style>. Nothing here may set a
   background or shape on the mark -- gh#3908 ruled one mark, one meaning, same blue rosette
   for person and org; the SVG carries its own colour. */
#scout-dock .vbadge{display:inline-flex;align-items:center;vertical-align:middle;line-height:1}
#scout-dock .vbadge-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#scout-dock .vbadge-icon svg{width:100%;height:100%;display:block}
#scout-dock .vbadge-inline .vbadge-icon{width:12px;height:12px;margin-left:3px}
#scout-dock .badge{background:var(--green);color:#fff;font:700 11px var(--sans);border-radius:20px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex:none;align-self:center}
#scout-dock .lempty{padding:26px 16px;color:var(--muted);text-align:center;font-size:12.5px;line-height:1.6}

/* ---- right pane ---- */
#scout-dock .pane-thread{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
#scout-dock .tempty{margin:auto;text-align:center;color:var(--muted);padding:26px}
#scout-dock .tempty .big{font:600 16px var(--sans);color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
/* gh#3235 finding 5 -- zero-message thread must not be a blank white box, shown INSIDE .tmsgs */
#scout-dock .mempty{margin:auto;text-align:center;color:var(--muted);padding:20px}
#scout-dock .mempty .big{font:600 14px var(--sans);color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
#scout-dock .th{height:58px;flex:none;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 16px}
#scout-dock .th>span:last-child{min-width:0;flex:1}
#scout-dock .th .av{width:36px;height:36px;font-size:13px}
#scout-dock .th .nm{font-weight:650;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
#scout-dock .th .sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scout-dock .th .back{display:none;border:none;background:none;cursor:pointer;color:var(--muted);padding:6px;margin-left:-6px}
#scout-dock .dk-status{flex:none;text-align:center;font:600 11px var(--sans);color:#fff;background:var(--green-2,#1f6b4a);padding:5px 10px;letter-spacing:.02em}
#scout-dock .dk-status[hidden]{display:none}
/* gh#3235 -- a short (non-overflowing) thread has no scroll to bottom-anchor it with, so the
   currently-first .group gets pushed down against the composer instead of sitting at the top
   with a dead gap; see the longer comment on messages.html's .tmsgs for why. */
#scout-dock .tmsgs{flex:1;overflow-y:auto;min-height:0;padding:14px 16px 6px;display:flex;flex-direction:column;gap:2px}
#scout-dock .tmsgs>*:first-child{margin-top:auto}
#scout-dock .bub{max-width:76%;padding:8px 12px;border-radius:17px;font-size:13.5px;line-height:1.45;position:relative;animation:dbubin .2s cubic-bezier(.22,1,.36,1) both}
@keyframes dbubin{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#scout-dock .bub{animation:none}}
#scout-dock .bub .mbody{white-space:pre-wrap;overflow-wrap:anywhere}
#scout-dock .bub .mbody a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#scout-dock .bub.them{align-self:flex-start;background:var(--bg-light);color:var(--ink);border-bottom-left-radius:17px}
#scout-dock .bub.me{align-self:flex-end;background:var(--accent-purple);color:#fff;border-bottom-right-radius:17px}
/* message grouping */
#scout-dock .group{display:flex;gap:8px;align-items:flex-end}
#scout-dock .group.them{justify-content:flex-start}
#scout-dock .group.me{justify-content:flex-end}
#scout-dock .group .bubcol{display:flex;flex-direction:column;gap:2px}
#scout-dock .group .av-wrapper{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:10px;position:relative}
#scout-dock .group .av-wrapper .pd{position:absolute;right:-1px;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--online);border:2px solid #fff;display:none}
#scout-dock .group .av-wrapper.online .pd{display:block}
#scout-dock .group.them .bub{border-bottom-left-radius:6px}
#scout-dock .group.me .bub{border-bottom-right-radius:6px}
#scout-dock .group.them .av-wrapper{order:-1}
#scout-dock .bub.them.tail{border-bottom-left-radius:6px} #scout-dock .bub.me.tail{border-bottom-right-radius:6px}
#scout-dock .bub .at{font:400 10px var(--sans);opacity:0;margin-top:2px;height:0;overflow:hidden}
#scout-dock .bub.tail .at{opacity:.5;height:auto}
#scout-dock .bub:hover .at{opacity:.6;height:auto}
#scout-dock .bub .at a{color:inherit;text-decoration:underline}
/* edit UI (gh#3247): pencil on hover of own bubble; others' bubbles only reveal the
   timestamp on hover, via the .bub:hover .at rule above. */
#scout-dock .bub .edit-btn{display:none;position:absolute;top:-8px;right:-8px;width:20px;height:20px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);cursor:pointer;
  align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}
#scout-dock .bub.me:hover .edit-btn{display:flex}
#scout-dock .bub .edit-btn:hover{background:var(--green-soft);color:var(--green)}
#scout-dock .bub .edit-wrap{display:flex;flex-direction:column;gap:6px}
#scout-dock .bub .edit-ta{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;
  padding:5px 7px;font:inherit;font-size:13px;color:var(--ink);background:#fff;resize:vertical;min-height:34px}
#scout-dock .bub .edit-actions{display:flex;gap:6px;justify-content:flex-end}
#scout-dock .bub .edit-actions button{border:none;border-radius:8px;padding:3px 9px;font:600 11px var(--sans);cursor:pointer}
#scout-dock .bub .edit-save{background:var(--green);color:#fff}
#scout-dock .bub .edit-save:hover{background:var(--green-2)}
#scout-dock .bub .edit-cancel{background:rgba(0,0,0,.08);color:var(--ink)}
#scout-dock .bub.optimistic{opacity:.6}
#scout-dock .bub.errored{opacity:1}
#scout-dock .bub .mstat{display:inline-flex;align-items:center;gap:4px}
#scout-dock .bub .mstat .tick{font-size:10px;letter-spacing:-2px;color:rgba(255,255,255,.65)}
#scout-dock .bub .mstat.seen .tick{color:var(--seen-tick,#7dd3fc)}
#scout-dock .bub .retry-btn{border:none;background:none;color:inherit;text-decoration:underline;font:inherit;font-size:10px;cursor:pointer;padding:0}
#scout-dock .ttype{align-self:flex-start;background:var(--them);border-radius:17px;padding:10px 13px;display:none;margin-top:2px}
#scout-dock .ttype.on{display:flex;gap:4px}
#scout-dock .ttype i{width:6px;height:6px;border-radius:50%;background:#9aa39c;animation:dblink 1.3s infinite}
#scout-dock .ttype i:nth-child(2){animation-delay:.2s} #scout-dock .ttype i:nth-child(3){animation-delay:.4s}
@keyframes dblink{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
#scout-dock .comp{flex:none;background:var(--paper);padding:9px 12px 12px;display:flex;gap:8px;align-items:flex-end}
#scout-dock .comp textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:10px 15px;font:inherit;font-size:13.5px;max-height:110px;min-height:42px;background:var(--bg);transition:border-color .12s,background .12s}
#scout-dock .comp textarea:focus{outline:none;border-color:rgba(28,107,67,.45);background:#fff}
#scout-dock .send{width:42px;height:42px;border-radius:50%;border:none;flex:none;cursor:pointer;background:var(--green);display:flex;align-items:center;justify-content:center;transition:transform .12s,opacity .12s}
#scout-dock .send:hover{background:var(--green-2)} #scout-dock .send:active{transform:scale(.9)} #scout-dock .send:disabled{background:var(--green);opacity:.32;cursor:default}
#scout-dock .send svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

/* ---- people picker overlay ---- */
#scout-dock .picker{position:absolute;inset:0;background:var(--paper);display:none;flex-direction:column;z-index:5}
#scout-dock .picker.on{display:flex;animation:dslidein .18s ease}
@keyframes dslidein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
#scout-dock .ph{height:58px;flex:none;display:flex;align-items:center;gap:8px;padding:0 11px;border-bottom:1px solid var(--line)}
#scout-dock .ph .t{font:700 15px var(--sans);letter-spacing:-.01em}
#scout-dock .plist{flex:1;overflow-y:auto;padding:3px 7px}
#scout-dock .prow{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;border-radius:11px}
#scout-dock .prow:hover{background:var(--bg)}
#scout-dock .prow .nm{font-weight:600;font-size:13.5px} #scout-dock .prow .sub{font-size:11.5px;color:var(--muted)}
#scout-dock .prow.team-row{background:var(--bg);margin-bottom:5px;border-bottom:1px solid var(--line)}

/* ---- anonymous "talk to a human" card (single column, narrower) ---- */
#scout-dock.anon .dock-panel{width:384px;height:auto;max-height:calc(100vh - 120px)}
#scout-dock.anon .av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
#scout-dock .ask-body{padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
/* Board #6984158: clarify BEFORE submit that this widget reaches the 990 Scout team, not the
   nonprofit shown on the page -- reuses the panel's existing token set (no new colors). */
#scout-dock .ask-notice{font-size:12px;line-height:1.5;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px;padding:9px 12px}
#scout-dock .ask-notice b{color:var(--ink)}
#scout-dock .ask-intro{display:flex;gap:11px;align-items:flex-start}
#scout-dock .ask-intro .av{width:40px;height:40px;flex:none;font-size:15px}
#scout-dock .ask-greet{font-size:14px;color:var(--ink);line-height:1.5;background:var(--them);border-radius:16px;border-top-left-radius:5px;padding:11px 14px}
#scout-dock .ask-form{display:flex;flex-direction:column;gap:9px}
#scout-dock .ask-form textarea,#scout-dock .ask-form input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 13px;font:inherit;font-size:14px;resize:none;transition:border-color .12s,background .12s}
#scout-dock .ask-form textarea:focus,#scout-dock .ask-form input:focus{outline:none;border-color:rgba(28,107,67,.45);background:#fff}
#scout-dock .ask-send{border:none;cursor:pointer;background:var(--green);color:#fff;border-radius:12px;padding:12px;font:600 14.5px var(--sans);transition:background .15s}
#scout-dock .ask-send:hover{background:var(--green-2)} #scout-dock .ask-send:disabled{background:#c8ccc7;cursor:default}
#scout-dock .ask-err{color:#c0392b;font-size:12.5px}
#scout-dock .ask-done{text-align:center;padding:18px 8px;display:flex;flex-direction:column;align-items:center;gap:11px}
#scout-dock .ask-done .av{width:48px;height:48px;font-size:18px}
#scout-dock .ask-done .big{font:700 18px var(--sans);color:var(--ink);letter-spacing:-.01em}
#scout-dock .ask-done .sub{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:34ch}

@media(max-width:720px){
  #scout-dock{right:14px;bottom:calc(14px + var(--dock-safe-bottom, 0px))}
  #scout-dock .dock-panel{position:fixed;right:8px;left:8px;bottom:8px;width:auto;max-width:none;height:calc(100vh - 78px)}
  /* gh#5107: width:auto too. This selector (ID + 2 classes) outranks the plain
     #scout-dock .dock-panel rule above, so without it the desktop width:384px won at
     every viewport and the panel's right edge clipped off-screen below ~392px. */
  #scout-dock.anon .dock-panel{width:auto;height:auto;max-height:calc(100vh - 90px)}
  #scout-dock .pane-list{width:100%}
  #scout-dock .dock-body.show-thread .pane-list{display:none}
  #scout-dock .dock-body:not(.show-thread) .pane-thread{display:none}
  #scout-dock .th .back{display:block}
}

/* ---- attachments ---- */
#scout-dock .comp .clip{width:36px;height:36px;border:none;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;align-self:center;transition:background .12s,color .12s}
#scout-dock .comp .clip:hover{background:var(--green-soft);color:var(--green)}
#scout-dock .comp .clip svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
#scout-dock .attchip{margin:0 12px;padding:7px 11px;background:var(--green-soft);border:1px solid rgba(28,107,67,.2);border-radius:11px;font-size:12.5px;color:var(--green);display:flex;align-items:center;gap:8px}
#scout-dock .attchip[hidden]{display:none}
#scout-dock .attchip .ax{border:none;background:rgba(28,107,67,.14);color:var(--green);width:17px;height:17px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;padding:0;margin-left:auto}
#scout-dock .bub .batt-img img{max-width:230px;max-height:190px;border-radius:12px;display:block}
#scout-dock .bub .batt-img{display:block;margin-bottom:4px}
#scout-dock .bub .batt-file{display:inline-block;background:rgba(0,0,0,.06);border-radius:10px;padding:7px 11px;font-size:12.5px;color:inherit;text-decoration:none;margin-bottom:4px}
#scout-dock .bub.me .batt-file{background:rgba(255,255,255,.16)}