/* 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}
/* 2026-11-01, Albert: rows in the sidebar instead of the three boxes — icon and name, one under another, like a list */
html[data-look="chats"] .chfeat-tiles{flex:none;display:flex;flex-direction:column;gap:2px;margin:0 8px 8px}
html[data-look="chats"] .chfeat-tiles[hidden]{display:none}

html[data-look="chats"] .chfeat-tile{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;
  min-width:0;height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#e8e8ea;
  font-family:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background .12s ease}
html[data-look="chats"] .chfeat-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chfeat-tile[hidden]{display:none}
html[data-look="chats"] .chfeat-tile:hover{background:#323336}
html[data-look="chats"] .chfeat-tile:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
html[data-look="chats"] .chfeat-tile[aria-current="page"]{background:#3a3b3e}

/* the icon (Albert, 2026-09-25): solid bolt, outlined nodes, solid bubbles, each in its colour with a soft glow */
html[data-look="chats"] .chfeat-gloss{--ic:#d6d6d6;flex:none;display:grid;place-items:center;width:22px;height:22px;background:none;color:var(--ic);
  transition:transform .14s ease,filter .14s ease}
html[data-look="chats"] .chfeat-gloss>svg{display:block;overflow:visible;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ic) 55%,transparent))}
html[data-look="chats"] .chfeat-tile[data-key="automations"] .chfeat-gloss{--ic:#f5b82e}
html[data-look="chats"] .chfeat-tile[data-key="workflows"] .chfeat-gloss{--ic:#ff6d3f}
html[data-look="chats"] .chfeat-tile[data-key="chat"] .chfeat-gloss{--ic:#9a6bff}
html[data-look="chats"] .chfeat-tile[data-place="memory"] .chfeat-gloss{--ic:#3cc98f}
html[data-look="chats"] .chfeat-tile[data-place="train"] .chfeat-gloss{--ic:#4b9dff}
/* all three a bit bigger (Albert, 2026-09-25): 28 px, the bubbles 31 px */
html[data-look="chats"] .chfeat-gloss>svg{width:20px;height:20px}
/* the bubbles read smaller than the bolt at the same box: 12 % bigger (Albert, 2026-09-25) */
html[data-look="chats"] .chfeat-tile[data-key="chat"] .chfeat-gloss,html[data-look="chats"] .chfeat-tile[data-key="chat"] .chfeat-gloss>svg{width:22px;height:22px}
html[data-look="chats"] .chfeat-tile:hover .chfeat-gloss{transform:translateY(-1px);filter:brightness(1.08)}
html[data-look="chats"] .chfeat-tile[aria-current="page"] .chfeat-gloss>svg{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ic) 70%,transparent))}

/* 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:50%;right:12px;margin-top:-4px;z-index:2;width:8px;height:8px;border-radius:50%;
  background:#f5b544;box-shadow:0 0 0 2px #2e2f32;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 #323336}
html[data-look="chats"] .chfeat-tile[aria-current="page"] .chfeat-badge{box-shadow:0 0 0 2px #3c3d40}

/* 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:#26272a}
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:#2e2f32;
  border:1px solid #36373a;color:#cfcfcf}

@media (max-width:800px){
  /* in the drawer, in the same place */
  html[data-look="chats"] .chfeat-tile{height:44px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .chfeat-tile,html[data-look="chats"] .chfeat-gloss{transition:none}
  html[data-look="chats"] .chfeat-tile:hover .chfeat-gloss{transform:none}
}