/* Hub Chats (hub-chat.js): the organization's chat rooms in the Agents Hub's Chats tab. Every colour is a Studio token from
   index.html; nothing here defines its own. The room scrolls inside itself, so the page never scrolls sideways. */
.hc{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%}
.hc-box{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-compact);background:var(--glass-clear);-webkit-backdrop-filter:var(--blur-chat);backdrop-filter:var(--blur-chat)}
.hc-feed{display:flex;flex-direction:column;gap:8px;height:clamp(220px,calc(100dvh - 340px),560px);padding:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.hc-feed:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:calc(var(--ring-width) * -1)}
.hc-empty{margin:auto 0;font-size:13.5px;line-height:1.45;color:var(--text-2);text-align:center}

/* ---- A message: the author, the AI mark on an agent's, whom an agent answered, the time, then the words. ---- */
.hc-msg{flex:none;align-self:flex-start;max-width:86%;min-width:0;padding:8px 12px;border:1px solid var(--hairline);border-radius:var(--r-avatar);border-bottom-left-radius:6px;background:var(--fill-1)}
.hc-msg.mine{align-self:flex-end;border-radius:var(--r-avatar);border-bottom-right-radius:6px;border-color:var(--user-edge);background:var(--pressed)}
.hc-msg.agent{border-color:color-mix(in srgb,var(--b) 35%,transparent);background:var(--agent-fill)}
.hc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0}
.hc-name{min-width:0;font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.hc-msg.agent .hc-name{color:var(--b)}
/* The AI mark, as on posts (hub.css .hub-ai): on everything an agent wrote, in the agent's colour. */
.hc-ai{flex:none;display:inline-block;padding:1px 6px;border:1px solid color-mix(in srgb,var(--b) 55%,transparent);border-radius:var(--r-pill);color:var(--b);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;line-height:1.35}
.hc-to,.hc-when{min-width:0;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--text-2);overflow-wrap:anywhere}
.hc-when:empty{display:none}
.hc-text{margin:3px 0 0;font-family:var(--mono);font-size:14.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.hc-why{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}

/* ---- Waiting for the agents, and what the server said about who did not answer. ---- */
.hc-msg.pending{opacity:.86}
.hc-status{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.hc-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--b);vertical-align:1px;animation:hc-wait 1s ease-in-out infinite}
@keyframes hc-wait{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.hc-status::before{animation:none}}
.hc-notice{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--hairline);font-size:12.5px;line-height:1.4;color:var(--warn);overflow-wrap:anywhere}
.hc-notice.status-error{color:var(--bad)}
.hc-note{margin:0;font-size:13px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.hc-note:empty{display:none}

/* ---- Writing: the box, Send, and the agents offered after @ (above the box, inside the pane's width). ---- */
.hc-compose{position:relative;display:flex;gap:8px;min-width:0}
.hc-input{flex:1;min-width:0}
/* The floating agent button (56px, bottom-left above the nav) sits in the box's row: the box starts after it, 8px clear. */
body.agent-fab-on:not(.sheet-open) .hc-compose{padding-left:64px}
.hc-send{flex:none;min-height:52px;padding:0 18px}
.hc-send:disabled,.hc-send[aria-disabled="true"]{opacity:.5;cursor:default}
.hc-picker{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:5;max-height:min(264px,42dvh);padding:6px;overflow-x:hidden;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-row);background:var(--glass-solid);box-shadow:var(--shadow)}
.hc-pick{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:48px;padding:6px 8px;border:0;border-radius:var(--r-inner);background:none;color:var(--text);font:inherit;text-align:left;transition:opacity .12s ease}
.hc-pick:active{opacity:.72}
.hc-pick[aria-selected="true"]{background:var(--pressed);box-shadow:inset 0 0 0 1px var(--ring)}
.hc-av{display:flex;align-items:center;justify-content:center;width:36px;height:36px;overflow:hidden;border-radius:50%;background:var(--agent-fill);box-shadow:inset 0 0 0 1.5px var(--b);color:var(--text);font-size:12px;font-weight:700}
.hc-av img{width:100%;height:100%;object-fit:cover}
.hc-pick-who{display:block;min-width:0}
.hc-pick-who b{display:block;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-pick-who small{display:block;margin-top:1px;font-size:12px;line-height:1.35;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-pick-who small:empty{display:none}

/* ---- Rooms: a bar across the top of the chat box with the room's name; it drops the room list down over the feed. ---- */
.hc-head{display:flex;min-width:0;border-bottom:1px solid var(--hairline)}
.hc-switch{display:flex;align-items:center;gap:10px;width:100%;min-width:0;height:54px;padding:0 12px 0 10px;border:0;background:none;color:var(--text);font:inherit;font-size:15.5px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;transition:background-color .15s ease}
.hc-switch:hover,.hc-switch[aria-expanded="true"]{background:var(--fill-1)}
.hc-switch:active{background:var(--pressed)}
.hc-switch:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:calc(var(--ring-width) * -1)}
/* # for a channel, the person's initials for a direct message. */
.hc-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-inner);background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-family:var(--mono);font-size:16px;font-weight:600}
.hc-mark.person{border-radius:50%;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text)}
.hc-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 25%,transparent)}
.hc-chev{flex:none;display:grid;place-items:center;width:28px;height:28px;color:var(--text-2)}
.hc-chev .icon{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s var(--ease-out)}
.hc-switch[aria-expanded="true"] .hc-chev .icon{transform:rotate(-90deg)}

/* ---- The room list, over the feed and the box's full width: the search pinned on top, then the rows, scrolling. ---- */
.hc-drop{position:absolute;left:0;right:0;top:55px;bottom:0;z-index:4;display:flex;flex-direction:column;min-width:0;background:var(--glass-solid);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
@starting-style{.hc-drop{opacity:0;transform:translateY(-6px)}}
.hc-drop.hidden.leaving{display:flex!important;opacity:0;transform:translateY(-6px);pointer-events:none;transition-duration:140ms}
@media (prefers-reduced-motion:reduce){.hc-drop{transition-property:opacity}.hc-chev .icon{transition:none}}
.hc-drop-top{flex:none;padding:10px 10px 8px;border-bottom:1px solid var(--hairline)}
.hc-find-wrap{position:relative;display:block}
.hc-find-wrap .icon{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--text-2);pointer-events:none}
.hc-find{width:100%;min-height:46px;padding-left:40px}
.hc-drop-note{flex:none;margin:8px 12px 0}
.hc-drop-note:empty{display:none}
.hc-lists{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;padding:8px 6px 12px;overflow-y:auto;overscroll-behavior:contain}
.hc-section{display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-section>.k{margin:2px 10px 4px}
.hc-none{margin:0 10px;font-size:13px}
.hc-room{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:var(--r-inner);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s ease}
.hc-room:hover{background:var(--fill-1)}
.hc-room:active{background:var(--pressed)}
.hc-room:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:calc(var(--ring-width) * -1)}
.hc-room[aria-current="true"]{background:var(--pressed);box-shadow:inset 3px 0 0 var(--a)}
.hc-room-av{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-size:13px}
.hc-count{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--a);color:var(--on-a);font-family:var(--mono);font-size:11.5px;font-weight:600;line-height:22px;text-align:center}
/* On Chat the room is sized to end above the nav (fit() in hub-chat.js), so the page keeps only the nav's space under it. */
.phone:has(#hubScreen.active[data-pane="chat"]){padding-bottom:var(--hc-tail,calc(var(--nav-bottom) + 94px))}