/* Hachi UI components (hy-*). Requires tokens/tokens.css loaded first. */

/* ---------- base ---------- */
body { margin: 0; font-family: var(--font-text); font-size: 17px; line-height: 26px; letter-spacing: .01em; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.hy-pad { padding: var(--space-6); }
.hy-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hy-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hy-label { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.hy-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: transform .12s ease, background-color .2s ease; }
.hy-btn:hover { background: var(--surface-sunken); }
.hy-btn:active { transform: scale(.97); }
.hy-btn--primary { background: var(--hachi); border-color: var(--hachi); color: var(--on-hachi); }
.hy-btn--primary:hover { background: var(--hachi); filter: brightness(.96); }
.hy-btn--plain { background: transparent; border-color: transparent; color: var(--hachi-ink); padding: 0 var(--space-2); }
.hy-btn--plain:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.hy-btn--danger { color: var(--danger); }
.hy-btn--sm { height: 32px; font-size: 14px; padding: 0 var(--space-3); }
.hy-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.hy-btn svg { width: 18px; height: 18px; }

/* ---------- Status pill ---------- */
.hy-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-text); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-muted); background: var(--surface-sunken); }
.hy-status svg { width: 15px; height: 15px; }
.hy-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hachi); animation: hy-pulse 1.4s ease-in-out infinite; }
.hy-status--needs-you { background: var(--hachi-soft); color: var(--hachi-ink); }
.hy-status--done { color: var(--success); }
.hy-status--stuck { color: var(--danger); }
@keyframes hy-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* ---------- Pack row ---------- */
.hy-pack { width: 300px; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-2); }
.hy-hrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; }
.hy-hrow:hover { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); }
.hy-hrow[aria-selected="true"] { background: var(--surface-raised); box-shadow: var(--shadow-lift); }
.hy-hrow__text { flex: 1; min-width: 0; }
.hy-hrow__name { font-size: 15px; line-height: 20px; font-weight: 600; }
.hy-hrow__status { font-size: 14px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hy-hrow__status--needs-you { color: var(--hachi-ink); font-weight: 600; }
.hy-hrow__badge { width: 10px; height: 10px; border-radius: 50%; background: var(--hachi); flex: none; }

/* ---------- Messages ---------- */
.hy-thread { display: flex; flex-direction: column; gap: var(--space-6); max-width: 640px; }
.hy-msg-hachi { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.hy-msg-hachi__body { font-size: 17px; line-height: 26px; }
.hy-msg-hachi__body p { margin: 0 0 var(--space-2); }
.hy-msg-user { align-self: flex-end; max-width: 75%; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: 17px; line-height: 26px; }
.hy-msg-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }

/* ---------- Composer ---------- */
.hy-composer { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 6px 6px 6px var(--space-4); border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); max-width: 640px; }
.hy-composer:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.hy-composer input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 26px; letter-spacing: .01em; }
.hy-composer input::placeholder { color: var(--ink-muted); }
.hy-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--hachi); color: var(--on-hachi); display: grid; place-items: center; cursor: pointer; flex: none; }
.hy-send svg { width: 20px; height: 20px; }
.hy-send[disabled] { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Approval card ---------- */
.hy-approve { max-width: 520px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-lift); }
.hy-approve__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hy-approve__title { font-size: 19px; line-height: 26px; font-weight: 700; margin: 0; }
.hy-approve__list { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); list-style: none; background: var(--surface-sunken); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.hy-approve__list li + li { margin-top: 6px; }
.hy-approve__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ---------- App icon tiles ---------- */
.hy-icons { display: flex; align-items: flex-end; gap: var(--space-6); }
.hy-icons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.hy-icons figcaption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.hy-tray { display: inline-flex; align-items: center; gap: var(--space-3); height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); }