/* chats-feat.css — the three boxes on top of the employees (chats-feat.js, p21/features T1). Every rule is under
   html[data-look="chats"]; the classic look never draws the row. Tokens: the list's own (css/chats.css) — a tile is
   the same family as the Projects and Connect tools cards at the list's foot, and lit like a chosen chat row. */

.chfeat-tiles{display:none}
html[data-look="chats"] .chfeat-tiles{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:0 8px 10px}
html[data-look="chats"] .chfeat-tiles[hidden]{display:none}

html[data-look="chats"] .chfeat-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  min-width:0;height:68px;padding:13px 3px 0;border:1px solid #222;border-radius:12px;background:#161616;color:#cfcfcf;
  font-family:inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:background .12s ease,border-color .12s ease,color .12s ease}
html[data-look="chats"] .chfeat-tile[hidden]{display:none}
html[data-look="chats"] .chfeat-tile:hover{background:#1c1c1c}
html[data-look="chats"] .chfeat-tile:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
html[data-look="chats"] .chfeat-tile>svg{flex:none;display:block}
html[data-look="chats"] .chfeat-tilename{display:block;max-width:100%;font-size:12px;line-height:16px;font-weight:500;color:#a8a8a8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chfeat-tile[aria-current="page"]{background:#292929;border-color:#383838;color:#fff}
html[data-look="chats"] .chfeat-tile[aria-current="page"] .chfeat-tilename{color:#fff}

/* the Automations dot: amber = a run waits for him; red = a run failed since he last looked (chauto_badge) */
html[data-look="chats"] .chfeat-badge{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#f5b544;box-shadow:0 0 0 2px #161616;pointer-events:none}
html[data-look="chats"] .chfeat-badge[hidden]{display:none}
html[data-look="chats"] .chfeat-badge[data-kind="fail"]{background:#ff5f57}
html[data-look="chats"] .chfeat-tile:hover .chfeat-badge{box-shadow:0 0 0 2px #1c1c1c}
html[data-look="chats"] .chfeat-tile[aria-current="page"] .chfeat-badge{box-shadow:0 0 0 2px #292929}

/* the head on the three pages: the title ends in an ellipsis before the tabs (chfeat_fitTitle, D22) */
html[data-look="chats"] #view-title.chfeat-fit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-look="chats"] #view-caption[data-chfeat-hide]{display:none}

/* the probe's stand-in for a page not built yet (featstubs=1 only; D23) */
html[data-look="chats"] .chfeat-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;
  min-height:240px;padding:32px 16px;color:#9a9a9a;font-size:14px;line-height:20px;background:#070707}
html[data-look="chats"] .chfeat-stub p{margin:0}
html[data-look="chats"] .chfeat-stubic{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:#161616;
  border:1px solid #222;color:#cfcfcf}

@media (max-width:800px){
  /* in the drawer, in the same place */
  html[data-look="chats"] .chfeat-tile{height:64px;padding-top:11px}
}
@media (max-width:420px){
  html[data-look="chats"] .chfeat-tilename{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .chfeat-tile{transition:none}
}