/* proto/sidebar.css -- t9-sidebar-types and t9-sidebar-width. Scoped to html.t9-types / html.t9-sbw / .nav-* / .sb-resize / .pr-filter. */

/* ---- t9-sidebar-types ---- */
.nav-types{display:block}
.nav-grp{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 2px}
.nav-grp-n{font:500 12px var(--mono);letter-spacing:0;color:var(--side-ink-2)}
.nav-type{min-height:34px;padding-left:22px;font-size:14.5px;gap:8px}
.nav-type .navlabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-type .ct{min-width:24px;font-size:13px}
.navdiv{height:1px;margin:12px 10px 6px;background:var(--side-line)}
.nav-sec{min-height:38px;font-size:14.5px;color:var(--side-ink-2)}
.nav-sec:hover,.nav-sec[aria-current="page"]{color:var(--side-ink)}
html.rail .nav-types,html.rail .navdiv{display:none}
html.rail .navdiv+.nav-sec{margin-top:0}

/* the filter chip on the Needs you page */
.pr-filter{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;color:var(--ink-2)}
.pr-filter b{color:var(--ink);font-weight:600}
.pr-filter-x{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--ink-2);text-decoration:none;font-size:20px;line-height:1}
.pr-filter-x:hover{background:var(--sunk);color:var(--ink)}
.pr-filter-x:focus-visible{outline:2px solid var(--accent)}

/* ---- t9-sidebar-width: one variable for the nav sidebar and the chat panel ---- */
html.t9-sbw{--sbw:248px}
@media (min-width:761px){
  html.t9-sbw:not(.rail) .app{grid-template-columns:var(--sbw) minmax(0,1fr)}
  html.t9-sbw.t9-chat .chatpanel{width:var(--sbw);max-width:100vw}
}
@media (min-width:761px) and (max-width:1179px){html.t9-sbw.rail .app{grid-template-columns:var(--sbw) minmax(0,1fr)}}
.sb-resize{display:none}
@media (min-width:761px){
  /* z-index 39: below the request drawer (40) so it never steals clicks from it; the 7 px outside the sidebar / chat edge stay grabbable */
  html.t9-sbw .sb-resize{display:block;position:fixed;top:0;bottom:0;left:calc(var(--sbw) - 3px);width:10px;z-index:39;cursor:col-resize;touch-action:none}
  html.t9-sbw.rail:not(.chat-open) .sb-resize{display:none}
  .sb-resize::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s}
  .sb-resize:hover::after,.sb-resize.dragging::after,.sb-resize:focus-visible::after{background:#7D95FF}
  .sb-resize:focus-visible{outline:none}
  html.sb-dragging,html.sb-dragging *{cursor:col-resize!important;user-select:none!important}
  html.t9-sbw.t9-chat.chat-open #drawer-host:not(:empty){padding-left:calc(var(--sbw) + 12px)}
  html.t9-sbw.t9-chat.chat-open #drawer-host .drawer{width:min(1040px,calc(100vw - var(--sbw) - 36px))}
}

/* a narrow chat (the shared width can be as small as 220 px): the title line and the input row wrap instead of squeezing */
@media (min-width:761px){
  html.t9-sbw.t9-chat .chatpanel{container:chatp / inline-size}
  @container chatp (max-width:330px){
    .cp-title small{display:none}
    .cp-form{flex-wrap:wrap;gap:4px}
    .cp-input{order:-1;flex:1 1 100%}
    .cp-send{margin-left:auto}
    .cp-m{max-width:100%}
  }
}

/* ---- t9-account-dots: six account buttons, red dot per unread, owner tints, channel colours ---- */
html.t9-acctdots .acct{gap:8px;min-width:0}
html.t9-acctdots .acct-own{min-width:0}
html.t9-acctdots .acct-own{border-radius:10px;padding:6px 6px 6px 8px;border-left:3px solid transparent}
html.t9-acctdots .acct-own-sandy{border-left-color:#7D95FF;background:rgba(125,149,255,.12)}
html.t9-acctdots .acct-own-enoch{border-left-color:#2DD4BF;background:rgba(45,212,191,.10)}
html.t9-acctdots .acct-own-sandy .acct-h{color:#B4C2FF;padding:0 2px 4px}
html.t9-acctdots .acct-own-enoch .acct-h{color:#8DEBDD;padding:0}
html.t9-acctdots .acct-enoch{padding:0}
html.t9-acctdots .acct-enoch>.acct-h{flex:1;min-width:0}
html.t9-acctdots .acct-btn,html.t9-acctdots .acct-mini{position:relative}
html.t9-acctdots .acct-btn{font-size:12.5px;padding:6px 0;min-width:0}
html.t9-acctdots .acct-btn .i,html.t9-acctdots .acct-mini .i{width:18px;height:18px}
html.t9-acctdots .acct-ch-email .i{color:#6CA6FF}
html.t9-acctdots .acct-ch-whatsapp .i{color:#4ADE80}
html.t9-acctdots .acct-ch-teams .i{color:#B79DFF}
html.t9-acctdots .acct-dot{position:absolute;top:1px;right:3px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#D92D20;color:#fff;font:700 11px/18px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--side,#121A15);pointer-events:none}
html.t9-acctdots .acct-dot[hidden]{display:none}
html.t9-acctdots .acct-mini .acct-dot{top:0;right:0}
html.t9-acctdots.rail .acct{display:grid}
/* collapsed rail (>= 1180 px): the six icons stack, labels gone, the dots stay */
@media (min-width:1180px){
  html.t9-acctdots.rail .side .foot{grid-template-columns:minmax(0,1fr)}
  html.t9-acctdots.rail .acct{display:grid;gap:6px}
  html.t9-acctdots.rail .acct-own{padding:3px 2px;border-left-width:2px;display:grid;justify-items:center;gap:2px}
  html.t9-acctdots.rail .acct-h{display:none}
  html.t9-acctdots.rail .acct-row,html.t9-acctdots.rail .acct-enoch{display:grid;grid-template-columns:1fr;gap:2px;width:100%;justify-items:center}
  html.t9-acctdots.rail .acct-btn{font-size:0;gap:0;width:44px;min-height:40px;padding:0}
  html.t9-acctdots.rail .acct-mini{width:44px;height:40px}
  html.t9-acctdots.rail .acct-dot{top:0;right:0;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
}

/* ---- t9-sidebar-tidy: Sandy's three buttons are icon-only and laid out exactly like Enoch's (label left, three 44 px icons right) ---- */
.acct-line{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--side-ink-2);padding:0 4px}
.acct-line>.acct-h{flex:1;min-width:0;padding:0}
html.t9-tidy .acct-btn.acct-ic{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;min-height:0;min-width:0;padding:0;font-size:0;gap:0}
html.t9-tidy .acct-btn.acct-ic .i{width:18px;height:18px}
html.t9-acctdots .acct-line{padding:0}
html.t9-acctdots .acct-own-sandy .acct-line>.acct-h{color:#B4C2FF;padding:0}
html.t9-tidy:not(.t9-acctdots) .acct-line{padding:0 4px 4px}
@media (min-width:1180px){
  html.t9-acctdots.rail .acct-line{display:grid;grid-template-columns:1fr;gap:2px;width:100%;justify-items:center;padding:0}
  html.t9-tidy.rail .acct-btn.acct-ic{height:40px}
}
html.t9-tidy.t9-acctdots .acct{gap:6px}
html.t9-tidy.t9-acctdots .acct-own{padding:2px 6px 2px 8px}
html.t9-tidy.t9-acctdots .acct-own-enoch .acct-enoch{min-height:44px}
@media (min-width:1180px){html.t9-tidy.t9-acctdots.rail .acct-own{padding:3px 2px}}