/* Secbra UI Kit semantic contract.
 * Source: generated @secbra/design package output.
 * Feature CSS consumes these governed names directly; local token aliases are forbidden.
 */
@import url('/uikit-tokens.css');
@import url('/uikit-themes.css');
/* Ngăn kéo và bốn điều khiển nữa lấy nguyên của kit từ 17/08/2026. Trước đó Agent Hub
   giữ bản `.drawer*` riêng, và bản ấy đã trôi khỏi kit: thiếu chốt `hidden` lúc tải,
   thiếu hai chế độ nội dung, và dùng nền đặc thay vì bảng kính. Hai bản của cùng một
   luật thì luôn có một bản lạc hậu. */
@import url('/uikit-drawer.css');
@import url('/uikit-tabs.css');
@import url('/uikit-checkbox.css');
@import url('/uikit-radio.css');
@import url('/uikit-slider.css');
@import url('/uikit-variants.css');
@import url('/uikit-confirm-danger.css');
@import url('/uikit-toast.css');
/* Bề mặt Main thuộc component dùng chung; app chỉ lắp instance, không sở hữu vật liệu. */
@import url('/uikit-glass-panel.css');
@import url('/uikit-main-recess.css');
@import url('/uikit-layouts.css');
@import url('/uikit-timeline.css');
@import url('/uikit-card.css');
@import url('/uikit-list.css');
@import url('/uikit-badge.css');
@import url('/uikit-tag.css');
@import url('/uikit-callout.css');
@import url('/uikit-progress-bar.css');
@import url('/uikit-empty-state.css');
@import url('/uikit-avatar.css');
@import url('/uikit-app-rail.css');
@import url('/uikit-split-view.css');
@import url('/uikit-toolbar.css');
@import url('/uikit-segmented-control.css');
@import url('/uikit-button.css');
@import url('/uikit-text-field.css');
@import url('/uikit-search-field.css');
@import url('/uikit-select.css');
@font-face{font-family:"Inter Local";src:url("./InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
.form-field{display:grid;gap:var(--sp-2);min-width:0;color:var(--text-2);font-size:var(--t-footnote);font-weight:650}.form-field input,.form-field select{width:100%;min-height:var(--row-h);padding:0 var(--sp-3);border:1px solid var(--separator);border-radius:var(--r-field);background:var(--bg-1);color:var(--text-1);font:inherit}.form-field input:focus,.form-field select:focus{border-color:var(--focus-ring);outline:2px solid var(--accent-soft);outline-offset:1px}.icon-button{display:grid;place-items:center;width:var(--row-h);height:var(--row-h);padding:0;border:0;border-radius:var(--r-pill);background:var(--fill-3);color:var(--text-1)}.icon-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.status-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--fill-3);color:var(--text-2);font-size:var(--t-footnote);font-weight:700}.status-badge[data-state=positive]{background:var(--positive-soft);color:var(--positive-ink)}.status-badge[data-state=warning]{background:var(--warning-soft);color:var(--warning-ink)}.dialog{color:var(--text-1);font-family:var(--font-text)}.drawer-controls .icon-button{border:1px solid var(--separator-soft);background:var(--bg-1);box-shadow:var(--shadow-float)}/* Hai luật này ở lại vì chúng tạo kiểu cho NỘI DUNG của sản phẩm nằm trong thân ngăn
   kéo, không phải cho ngăn kéo. Kit không biết `hub-network-form` là gì. */
.drawer-form .hub-network-form-fields{padding:0}

/* Hai luật này ở lại vì chúng tạo kiểu cho NỘI DUNG của sản phẩm nằm trong thân ngăn
   kéo, không phải cho ngăn kéo. Kit không biết `hub-network-form` là gì. */
.drawer-form .hub-network-form-fields{align-content:start;overflow:auto;padding:var(--sp-5)}
.drawer-form .hub-network-form-error{align-self:start}

.form-field input{height:var(--row-h);min-height:var(--row-h);appearance:none}
/* GỠ 2026-08-16 · `.select-field .select-control{width:100%}`. Ghi đè này không làm gì:
 * `.select-control` của bộ kit là `display:block`, và cha `.form-field` là `display:grid`
 * với `justify-items` mặc định `stretch` — nên nó đã rộng đúng bằng ô lưới rồi. Một dòng
 * không đổi hình mà lại đứng tên một thành phần là thứ khiến người sau tin bộ kit sai. */

/* Edge tabs follow the Drawer reference: labelled close pill + compact minimize pill. */

.agent-hub [data-availability=unavailable]{cursor:not-allowed;color:var(--text-3);background:var(--fill-3)}


/* PresenceIndicator: calm heartbeat plus a bounded radar ring for live entities.
 *
 * `--_presence-tone` mang tiền tố `--_` vì nó là biến RIÊNG của khối này: chỉ ba luật
 * `[data-state=…]` ngay dưới đây ghi nó, và chỉ `.presence-indicator` cùng `::after` của
 * nó đọc nó. Nó KHÔNG lên hệ thống — bộ kit đã có vai này ở `avatar/.avatar-presence`,
 * nơi màu trạng thái gắn thẳng vào `[data-state]` chứ không đi qua một biến phơi ra.
 * Đưa một cái tên trần như `--presence-tone` lên `:root` là hứa một hợp đồng toàn cục
 * mà đúng một khối dùng. */
.presence-indicator{--_presence-tone:var(--positive);position:relative;display:inline-block;flex:none;border-radius:var(--r-pill);background:var(--_presence-tone);isolation:isolate;animation:presence-breathe calc(var(--dur-fast) * 12) var(--ease-out) infinite}
.presence-indicator::after{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--sp-1));border:1px solid var(--_presence-tone);border-radius:inherit;opacity:0;pointer-events:none;animation:presence-radar calc(var(--dur-fast) * 12) var(--ease-out) infinite}
.presence-indicator[data-state=away],.presence-indicator[data-state=warning]{--_presence-tone:var(--warning);animation-duration:calc(var(--dur-fast) * 16)}
.presence-indicator[data-state=away]::after,.presence-indicator[data-state=warning]::after{animation-duration:calc(var(--dur-fast) * 16)}
.presence-indicator[data-state=offline]{--_presence-tone:var(--identity-neutral);animation:none}
.presence-indicator[data-state=offline]::after{display:none}
.presence-indicator--static,.presence-indicator[data-motion=static]{animation:none}
.presence-indicator--static::after,.presence-indicator[data-motion=static]::after{display:none;animation:none}
@keyframes presence-breathe{0%,100%{filter:brightness(1);transform:scale(1)}45%{filter:brightness(1.08);transform:scale(.88)}60%{filter:brightness(1.03);transform:scale(1.06)}}
@keyframes presence-radar{0%,28%{opacity:0;transform:scale(.45)}42%{opacity:.45}75%,100%{opacity:0;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.presence-indicator,.presence-indicator::after{animation:none}}

/* Brand mark is sourced from the governed Secbra identity asset. */
.rail-cap.brand{color:var(--accent-ink);font-size:0}
.rail-cap.brand img{display:block;width:calc(var(--sp-6) + var(--sp-1));height:calc(var(--sp-6) + var(--sp-1))}
.action-menu{position:relative;display:inline-grid;justify-items:center}.action-menu-trigger{display:grid;place-items:center;width:var(--row-h);height:var(--row-h);padding:0;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--t-title-1);line-height:1;box-shadow:var(--shadow-float)}.action-menu-trigger:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.action-menu-popover{position:absolute;z-index:20;top:calc(var(--row-h) + var(--sp-2));left:50%;width:max-content;max-width:calc(100vw - (2 * var(--sp-4)));padding:var(--sp-2);border:1px solid var(--separator-soft);border-radius:var(--r-field);background:var(--bg-1);box-shadow:var(--shadow-popover);transform:translateX(-50%)}.action-menu-item{display:grid;gap:var(--sp-1);width:100%;padding:var(--sp-3);text-align:left;border:0;border-radius:var(--r-field);background:transparent;color:var(--text-1)}.action-menu-item:hover,.action-menu-item:focus-visible{background:var(--accent-soft)}.action-menu-item strong,.action-menu-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-menu-item strong{font-size:var(--t-subhead)}.action-menu-item small{color:var(--text-2);font-size:var(--t-footnote)}
.action-menu--label .action-menu-trigger{display:inline-flex;width:auto;min-width:0;height:var(--row-h);gap:var(--sp-2);padding:0 var(--sp-4);font-size:var(--t-body);font-weight:700;white-space:nowrap}.action-menu--label .action-menu-trigger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.action-menu--label .action-menu-popover{top:calc(100% + var(--sp-2))}