/* ==========================================================================
   MVP prototype — base styles of the AI-native layer (ASM.ngui kit).
   Only existing design tokens (tokens.css) are used; no new colours or fonts, no px font sizes.
   Page areas add their own ng-<area>.css on top of this file.
   ========================================================================== */

/* ---------- confidence meter ---------- */
.ng-conf { gap: 6px; flex: none; }
.ng-conf__track {
  width: 72px; height: 6px; border-radius: var(--radius-pill);
  background: var(--sunken); border: 1px solid var(--border-subtle);
  overflow: hidden; display: inline-block; flex: none;
}
.ng-conf__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.ng-conf b { font: 650 var(--text-xs)/1 var(--font-mono); color: var(--text); }
.ng-aiv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ng-aiv .ng-conf { gap: 5px; }
.ng-aiv .ng-conf__track { width: 46px; }

/* ---------- provenance / citation / system chip ---------- */
.ng-prov { color: var(--purple); background: var(--purple-soft); }
.ng-prov--ai { color: var(--text-muted); background: var(--sunken); }
.ng-cite { gap: 5px; }
.ng-cite:hover { text-decoration: none; background: var(--accent-soft); color: var(--accent-soft-fg); }
.ng-sys { gap: 6px; }
.ng-sys i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.ng-sys:hover { text-decoration: none; background: var(--accent-soft); color: var(--accent-soft-fg); }

/* ---------- request / response viewer ---------- */
.ng-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--raised); }
.ng-ex__pane { min-width: 0; }
.ng-ex__pane + .ng-ex__pane { border-left: 1px solid var(--border-subtle); }
.ng-ex__head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--sunken); border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.ng-ex__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.ng-ex__pre { margin: 0; border: 0; border-radius: 0; max-height: 260px; overflow: auto; font-size: var(--text-xs); line-height: 1.55; }
.ng-step + .ng-step { margin-top: 12px; }
.ng-step__n { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-fg); font: 650 var(--text-xs)/1 var(--font-mono); }
.ng-step__why { margin-top: 10px; }
.ng-step__why p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-body); }
.ng-step__meta { margin-top: 10px; }

/* ---------- timeline (task activity, change history) ---------- */
.ng-tl { display: flex; flex-direction: column; position: relative; }
.ng-tl::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 12px; width: 1px; background: var(--border); }
.ng-tl__item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; position: relative; border-radius: var(--radius-xs); }
.ng-tl__item:hover { background: var(--hover); }
.ng-tl__dot { width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--border); color: var(--text-muted); position: relative; z-index: 1; }
.ng-tl__item--failed .ng-tl__dot, .ng-tl__item--blocked .ng-tl__dot { color: var(--negative); border-color: color-mix(in oklab, var(--negative) 45%, transparent); }
.ng-tl__item--awaiting .ng-tl__dot { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 45%, transparent); }
.ng-tl__item--ok .ng-tl__dot { color: var(--positive); border-color: color-mix(in oklab, var(--positive) 40%, transparent); }
.ng-tl__main { flex: 1; min-width: 0; font-size: var(--text-sm); }
.ng-tl__main b { color: var(--text); font-weight: 600; }
.ng-tl__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: var(--text-2xs); }

/* ---------- mini lists (drawer cards) ---------- */
.ng-mini-list { display: flex; flex-direction: column; }
.ng-mini-list__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); min-width: 0; }
.ng-mini-list__row:last-child { border-bottom: 0; }
.ng-mini-list__row .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-mini-list__row .faint { margin-left: auto; flex: none; font-size: var(--text-xs); }

/* ---------- quick filter chips over a list (Issues) ---------- */
.ng-quickchips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--sunken); }
.ng-quickchips .label { text-transform: none; letter-spacing: 0; font-size: var(--text-xs); }
.ng-quickchip { cursor: pointer; border: 1px solid transparent; background: var(--raised); color: var(--text-body); transition: border-color var(--dur), background var(--dur); }
.ng-quickchip:hover { border-color: var(--accent); }
.ng-quickchip.is-active { background: var(--accent-soft); color: var(--accent-soft-fg); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.ng-quickchip em { font: 650 var(--text-2xs)/1 var(--font-mono); font-style: normal; padding: 1px 4px; margin-left: 2px; border-radius: var(--radius-xs); background: var(--neutral-soft); color: var(--neutral-fg); }
.ng-quickchip.is-active em { background: color-mix(in oklab, var(--accent) 16%, transparent); color: inherit; }

/* ---------- header: system selector, bell, assistant button ---------- */
.sys-scope { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); color: var(--text); font: 550 var(--text-sm)/1 var(--font-sans); cursor: pointer; }
.sys-scope:hover { border-color: var(--text-faint); }
.sys-scope i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-faint); }
.sys-scope__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-scope__lab { color: var(--text-faint); font-weight: 500; }
.hdr-btn { position: relative; }
.hdr-btn .pa-badge { position: absolute; top: -3px; right: -4px; z-index: 1; box-shadow: 0 0 0 2px var(--raised); }
.hdr-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-soft-fg); }
.bell-dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--negative-solid); color: #fff; font: 650 var(--text-2xs)/16px var(--font-mono); text-align: center; box-shadow: 0 0 0 2px var(--raised); }
.notif-pop { width: 380px; max-height: 70vh; overflow: auto; }
.notif-item { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); text-decoration: none; color: var(--text-body); }
.notif-item:hover { background: var(--hover); text-decoration: none; }
.notif-item.is-unread { background: var(--accent-soft); }
.notif-item__ic { flex: none; width: 24px; height: 24px; border-radius: var(--radius-control); display: grid; place-items: center; background: var(--sunken); color: var(--text-muted); }
.notif-item b { color: var(--text); font-weight: 600; }
.notif-item small { display: block; color: var(--text-faint); font-size: var(--text-2xs); margin-top: 2px; }

/* ---------- "Waiting for you" (Dashboard) ---------- */
.wait-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.wait-col + .wait-col { border-left: 1px solid var(--border-subtle); }
.wait-col .card__body { padding-top: 6px; }
.wait-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.wait-row:last-child { border-bottom: 0; }
.wait-row .cell-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-row .faint { margin-left: auto; flex: none; font-size: var(--text-xs); }

/* ---------- Activity Feed: @AI replies, trace, proposed actions (B4.F7) ---------- */
.feed__ai { background: var(--purple); color: #fff; display: inline-grid; place-items: center; flex: none; }
.feed__item--ai .feed__text--comment { background: var(--purple-soft); border-color: transparent; }
.feed__mention { padding: 0 5px; }
.feed__trace { margin-top: 6px; font-size: var(--text-xs); }
.feed__trace summary { cursor: pointer; color: var(--link); display: inline-flex; align-items: center; gap: 5px; }
.feed__trace ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.feed__trace li { display: flex; gap: 6px; align-items: center; min-width: 0; }
.feed__trace .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.feed__actions-note { font-size: var(--text-2xs); }
.feed__hints { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.feed__hint { cursor: pointer; border: 1px solid var(--border-subtle); background: var(--raised); }
.feed__hint:hover { border-color: var(--accent); color: var(--accent-soft-fg); }
.feed__caret { display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--purple); animation: ng-blink 1s steps(2) infinite; }
@keyframes ng-blink { 50% { opacity: 0; } }

/* ---------- Issue drawer: Reproduction + AI verify ---------- */
.ng-how + .ng-how { margin-top: 10px; }
.ng-how p { margin: 0 0 6px; font-size: var(--text-sm); color: var(--text-body); }
.ng-how pre { margin: 0; }
.ng-ol { margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--text-body); display: flex; flex-direction: column; gap: 6px; }
.ng-verhead { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--sunken); padding: 10px 12px; }
.ng-verhead .badge { flex: none; }