/* MIA component layer. Values mirror EquipeAI/mia-ui (shadcn "base-nova" over Base UI). */

/* ---------------- Button ---------------- */
.mia-btn{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:var(--space-1-5);height:var(--control-h-md);padding:0 var(--space-2-5);border:1px solid transparent;border-radius:var(--radius-lg);background-clip:padding-box;font:var(--weight-medium) var(--text-md)/1 var(--font-sans);white-space:nowrap;cursor:pointer;user-select:none;transition:all var(--duration-base) var(--ease-standard);outline:none}
.mia-btn:focus-visible{border-color:var(--ring);box-shadow:var(--focus-ring)}
.mia-btn:active:not([aria-haspopup]){transform:translateY(1px)}
.mia-btn[disabled],.mia-btn:disabled{pointer-events:none;opacity:.5}
.mia-btn svg{flex-shrink:0;width:16px;height:16px;pointer-events:none}
.mia-btn--default{background:var(--primary);color:var(--primary-foreground)}
.mia-btn--default:hover{background:color-mix(in oklab,var(--primary) 90%,var(--background))}
.mia-btn--outline{border-color:var(--border);background:var(--background);color:var(--foreground)}
.mia-btn--outline:hover{background:var(--muted)}
.mia-btn--secondary{background:var(--secondary);color:var(--secondary-foreground)}
.mia-btn--secondary:hover{background:color-mix(in oklab,var(--secondary) 80%,var(--background))}
.mia-btn--ghost{background:transparent;color:var(--foreground)}
.mia-btn--ghost:hover{background:var(--muted)}
.mia-btn--destructive{background:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}
.mia-btn--destructive:hover{background:color-mix(in oklab,var(--destructive) 20%,transparent)}
.mia-btn--link{background:transparent;color:var(--primary);text-decoration:none;text-underline-offset:4px}
.mia-btn--link:hover{text-decoration:underline}
.mia-btn--xs{height:var(--control-h-xs);gap:var(--space-1);padding:0 var(--space-2);border-radius:min(var(--radius-md),10px);font-size:var(--text-sm)}
.mia-btn--xs svg{width:12px;height:12px}
.mia-btn--sm{height:var(--control-h-sm);gap:var(--space-1);padding:0 var(--space-2-5);border-radius:min(var(--radius-md),12px);font-size:12.8px}
.mia-btn--sm svg{width:14px;height:14px}
.mia-btn--lg{height:var(--control-h-lg)}
.mia-btn--icon{width:var(--control-h-md);padding:0}
.mia-btn--icon-xs{width:var(--control-h-xs);height:var(--control-h-xs);padding:0;border-radius:min(var(--radius-md),10px)}
.mia-btn--icon-sm{width:var(--control-h-sm);height:var(--control-h-sm);padding:0;border-radius:min(var(--radius-md),12px)}
.mia-btn--icon-lg{width:var(--control-h-lg);height:var(--control-h-lg);padding:0}
.mia-btn--round{border-radius:var(--radius-full)}

.mia-btn-group{display:inline-flex;align-items:center}
.mia-btn-group>.mia-btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}
.mia-btn-group>.mia-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.mia-btn-group-text{display:inline-flex;align-items:center;height:var(--control-h-md);padding:0 var(--space-2-5);border:1px solid var(--border);font-size:var(--text-md);color:var(--muted-foreground)}

/* ---------------- Badge ---------------- */
.mia-badge{display:inline-flex;height:20px;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:var(--space-1);overflow:hidden;border:1px solid transparent;border-radius:var(--radius-4xl);padding:2px var(--space-2);font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);white-space:nowrap}
.mia-badge svg{width:12px;height:12px}
.mia-badge--default{background:var(--primary);color:var(--primary-foreground)}
.mia-badge--secondary{background:var(--secondary);color:var(--secondary-foreground)}
.mia-badge--outline{border-color:var(--border);color:var(--foreground)}
.mia-badge--destructive{background:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}
.mia-badge--ghost{background:transparent;color:var(--muted-foreground)}
.mia-badge--ok{background:var(--tone-ok-surface);color:var(--tone-ok-text);border-color:transparent}
.mia-badge--waiting{background:var(--tone-waiting-surface);color:var(--tone-waiting-text);border-color:transparent}
.mia-badge--blocked{background:var(--tone-blocked-surface);color:var(--tone-blocked-text);border-color:transparent}
.mia-badge--info{background:var(--tone-info-surface);color:var(--tone-info-text);border-color:transparent}
.mia-badge--neutral{background:var(--tone-neutral-surface);color:var(--tone-neutral-text);border-color:transparent}

/* ---------------- Card ---------------- */
.mia-card{display:flex;flex-direction:column;gap:var(--space-4);overflow:hidden;border-radius:var(--radius-xl);background:var(--card);padding:var(--space-4) 0;font-size:var(--text-md);color:var(--card-foreground);box-shadow:var(--ring-hairline)}
.mia-card--sm{gap:var(--space-3);padding:var(--space-3) 0}
.mia-card--flat{box-shadow:none}
.mia-card-header{display:grid;align-items:start;gap:var(--space-1);padding:0 var(--space-4)}
.mia-card--sm .mia-card-header,.mia-card--sm .mia-card-content{padding:0 var(--space-3)}
.mia-card-title{font:var(--type-card-title)}
.mia-card-description{font-size:var(--text-md);color:var(--muted-foreground)}
.mia-card-content{padding:0 var(--space-4)}
.mia-card-footer{display:flex;align-items:center;border-top:1px solid var(--border);background:color-mix(in oklab,var(--muted) 50%,transparent);padding:var(--space-4);margin-bottom:calc(var(--space-4) * -1)}

/* ---------------- Alert ---------------- */
.mia-alert{position:relative;display:grid;width:100%;gap:2px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-2-5);text-align:left;font-size:var(--text-md);background:var(--card);color:var(--card-foreground)}
.mia-alert--with-icon{grid-template-columns:auto 1fr;column-gap:var(--space-2)}
.mia-alert--with-icon>svg{grid-row:span 2;translate:0 2px;width:16px;height:16px}
.mia-alert--destructive{color:var(--destructive)}
.mia-alert-title{font-weight:var(--weight-medium)}
.mia-alert-description{font-size:var(--text-md);color:var(--muted-foreground);text-wrap:pretty}
.mia-alert--destructive .mia-alert-description{color:color-mix(in oklab,var(--destructive) 90%,transparent)}

/* ---------------- Inputs ---------------- */
.mia-input{height:var(--control-h-md);width:100%;min-width:0;border:1px solid var(--input);border-radius:var(--radius-lg);background:transparent;padding:4px var(--space-2-5);font:var(--weight-regular) var(--text-md)/1.4 var(--font-sans);color:var(--foreground);transition:var(--transition-colors);outline:none}
.mia-input::placeholder,.mia-textarea::placeholder{color:var(--muted-foreground)}
.mia-input:focus-visible,.mia-textarea:focus-visible,.mia-select:focus-visible{border-color:var(--ring);box-shadow:var(--focus-ring)}
.mia-input:disabled,.mia-textarea:disabled{cursor:not-allowed;opacity:.5;background:color-mix(in oklab,var(--input) 50%,transparent)}
.mia-input[aria-invalid="true"]{border-color:var(--destructive);box-shadow:var(--focus-ring-destructive)}
.mia-textarea{display:flex;min-height:64px;width:100%;border:1px solid var(--input);border-radius:var(--radius-lg);background:transparent;padding:var(--space-2) var(--space-2-5);font:var(--weight-regular) var(--text-md)/1.5 var(--font-sans);color:var(--foreground);resize:none;transition:var(--transition-colors);outline:none}
.mia-input-group{display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--input);border-radius:var(--radius-lg);background:var(--background);padding:0 var(--space-2-5);transition:var(--transition-colors)}
.mia-input-group:focus-within{border-color:var(--ring);box-shadow:var(--focus-ring)}
.mia-input-group .mia-input{border:0;box-shadow:none;padding-left:0;padding-right:0}
.mia-input-group-addon{display:inline-flex;align-items:center;color:var(--muted-foreground);font-size:var(--text-md)}
.mia-select{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1-5);height:var(--control-h-md);width:fit-content;border:1px solid var(--input);border-radius:var(--radius-lg);background:transparent;padding:0 var(--space-2) 0 var(--space-2-5);font-size:var(--text-md);color:var(--foreground);white-space:nowrap;cursor:pointer;transition:var(--transition-colors);outline:none}
.mia-select--sm{height:var(--control-h-sm);border-radius:min(var(--radius-md),10px)}
.mia-select-popup{min-width:144px;border-radius:var(--radius-lg);background:var(--popover);color:var(--popover-foreground);box-shadow:var(--shadow-md),var(--ring-hairline);padding:var(--space-1);overflow:auto}
.mia-select-item{position:relative;display:flex;width:100%;align-items:center;gap:var(--space-1-5);border-radius:var(--radius-sm);padding:4px 32px 4px 6px;font-size:var(--text-md);cursor:default;user-select:none}
.mia-select-item[data-active="true"],.mia-select-item:hover{background:var(--accent);color:var(--accent-foreground)}
.mia-select-label{padding:4px 6px;font-size:var(--text-sm);color:var(--muted-foreground)}

/* ---------------- Switch ---------------- */
.mia-switch{position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:32px;height:18.4px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--input);cursor:pointer;transition:all var(--duration-base) var(--ease-standard);outline:none;padding:0}
.mia-switch--sm{width:24px;height:14px}
.mia-switch[data-checked="true"]{background:var(--primary)}
.mia-switch:focus-visible{border-color:var(--ring);box-shadow:var(--focus-ring)}
.mia-switch-thumb{display:block;width:16px;height:16px;border-radius:var(--radius-full);background:var(--background);transition:transform var(--duration-base) var(--ease-standard);transform:translateX(0)}
.mia-switch--sm .mia-switch-thumb{width:12px;height:12px}
.mia-switch[data-checked="true"] .mia-switch-thumb{transform:translateX(calc(100% - 2px))}

/* ---------------- Separator / Spinner / Progress ---------------- */
.mia-separator{flex-shrink:0;background:var(--border)}
.mia-separator--horizontal{height:1px;width:100%}
.mia-separator--vertical{width:1px;align-self:stretch}
.mia-spinner{width:16px;height:16px;animation:mia-spin 1s linear infinite;color:currentColor}
.mia-progress{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.mia-progress-head{display:flex;width:100%;align-items:center;gap:var(--space-2)}
.mia-progress-label{font-size:var(--text-md);font-weight:var(--weight-medium)}
.mia-progress-value{margin-left:auto;font-size:var(--text-md);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.mia-progress-track{position:relative;display:flex;height:4px;width:100%;align-items:center;overflow:hidden;border-radius:var(--radius-full);background:var(--muted)}
.mia-progress-indicator{height:100%;background:var(--primary);transition:width var(--duration-base) var(--ease-standard)}

/* ---------------- Tabs ---------------- */
.mia-tabs{display:flex;flex-direction:column;gap:var(--space-2)}
.mia-tabs-list{display:inline-flex;width:fit-content;height:var(--control-h-md);align-items:center;justify-content:center;border-radius:var(--radius-lg);padding:3px;background:var(--muted);color:var(--muted-foreground)}
.mia-tabs-list--line{background:transparent;border-radius:0;gap:var(--space-1);border-bottom:1px solid var(--border)}
.mia-tab{position:relative;display:inline-flex;height:calc(100% - 1px);flex:1;align-items:center;justify-content:center;gap:var(--space-1-5);border:1px solid transparent;border-radius:var(--radius-sm);padding:2px var(--space-1-5);font:var(--weight-medium) var(--text-md)/1 var(--font-sans);white-space:nowrap;color:color-mix(in oklab,var(--foreground) 60%,transparent);background:transparent;cursor:pointer;transition:all var(--duration-base) var(--ease-standard)}
.mia-tab:hover{color:var(--foreground)}
.mia-tab[data-active="true"]{background:var(--background);color:var(--foreground);box-shadow:var(--shadow-xs)}
.mia-tabs-list--line .mia-tab[data-active="true"]{background:transparent;box-shadow:none}
.mia-tabs-list--line .mia-tab[data-active="true"]::after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:2px;background:var(--foreground)}

/* ---------------- Overlays ---------------- */
.mia-tooltip{display:inline-flex;width:fit-content;max-width:20rem;align-items:center;gap:var(--space-1-5);border-radius:var(--radius-md);background:var(--foreground);padding:6px var(--space-3);font-size:var(--text-sm);color:var(--background)}
.mia-popover{border-radius:var(--radius-lg);background:var(--popover);color:var(--popover-foreground);padding:var(--space-3);font-size:var(--text-md);box-shadow:var(--shadow-md),var(--ring-hairline)}
.mia-dialog-backdrop{position:absolute;inset:0;background:rgb(0 0 0 / .1);backdrop-filter:blur(2px)}
.mia-dialog{position:relative;display:grid;width:100%;max-width:24rem;gap:var(--space-4);border-radius:var(--radius-xl);background:var(--popover);padding:var(--space-4);font-size:var(--text-md);color:var(--popover-foreground);box-shadow:var(--ring-hairline),var(--shadow-md)}
.mia-dialog-title{font:var(--weight-medium) var(--text-lg)/1 var(--font-heading)}
.mia-dialog-description{font-size:var(--text-md);color:var(--muted-foreground)}
.mia-dialog-footer{display:flex;justify-content:flex-end;gap:var(--space-2);border-top:1px solid var(--border);background:color-mix(in oklab,var(--muted) 50%,transparent);padding:var(--space-4);margin:0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.mia-menu{min-width:14rem;border-radius:var(--radius-lg);background:var(--popover);color:var(--popover-foreground);padding:var(--space-1);box-shadow:var(--shadow-md),var(--ring-hairline)}
.mia-menu-item{display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);padding:6px var(--space-2);font-size:var(--text-md);cursor:default;user-select:none}
.mia-menu-item:hover{background:var(--accent);color:var(--accent-foreground)}
.mia-menu-item--destructive{color:var(--destructive)}
.mia-menu-item--destructive:hover{background:color-mix(in oklab,var(--destructive) 10%,transparent)}
.mia-menu-separator{height:1px;margin:var(--space-1) calc(var(--space-1) * -1);background:var(--border)}
.mia-hovercard{width:16rem;border-radius:var(--radius-lg);background:var(--popover);padding:var(--space-4);font-size:var(--text-md);box-shadow:var(--shadow-md),var(--ring-hairline)}

/* ---------------- Disclosure ---------------- */
.mia-accordion{border-top:1px solid var(--border)}
.mia-accordion-item{border-bottom:1px solid var(--border)}
.mia-accordion-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-4);background:transparent;border:0;padding:var(--space-4) 0;font:var(--weight-medium) var(--text-md)/1.4 var(--font-sans);color:var(--foreground);text-align:left;cursor:pointer}
.mia-accordion-trigger svg{transition:transform var(--duration-base) var(--ease-standard)}
.mia-accordion-item[data-open="true"] .mia-accordion-trigger svg{transform:rotate(180deg)}
.mia-accordion-panel{padding:0 0 var(--space-4);font-size:var(--text-md);color:var(--muted-foreground)}
.mia-scroll-area{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}

.mia-command{border-radius:var(--radius-lg);background:var(--popover);box-shadow:var(--shadow-md),var(--ring-hairline);overflow:hidden}
.mia-command-input-row{display:flex;align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border);padding:0 var(--space-3)}
.mia-command-input{height:var(--control-h-lg);width:100%;border:0;background:transparent;font-size:var(--text-md);color:var(--foreground);outline:none}
.mia-command-group-label{padding:var(--space-2) var(--space-2) 4px;font-size:var(--text-sm);color:var(--muted-foreground)}
.mia-command-item{display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);margin:0 var(--space-1);padding:6px var(--space-2);font-size:var(--text-md);cursor:default}
.mia-command-item[data-active="true"]{background:var(--accent)}

/* ---------------- Avatar ---------------- */
.mia-avatar{position:relative;display:inline-flex;width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-full);user-select:none;overflow:visible}
.mia-avatar--sm{width:24px;height:24px}
.mia-avatar--lg{width:40px;height:40px}
.mia-avatar::after{content:"";position:absolute;inset:0;border-radius:var(--radius-full);border:1px solid var(--border);mix-blend-mode:darken}
.mia-avatar-image{width:100%;height:100%;border-radius:var(--radius-full);object-fit:cover}
.mia-avatar-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--muted);font-size:var(--text-md);color:var(--muted-foreground)}
.mia-avatar-group{display:flex}
.mia-avatar-group>.mia-avatar{margin-left:-8px;box-shadow:0 0 0 2px var(--background)}
.mia-avatar-group>.mia-avatar:first-child{margin-left:0}

/* ---------------- MIA-specific ---------------- */
.mia-status-dot{display:inline-block;width:10px;height:10px;border-radius:var(--radius-full)}
.mia-status-dot--ok{background:var(--tone-ok)}
.mia-status-dot--waiting{background:var(--tone-waiting)}
.mia-status-dot--blocked{background:var(--tone-blocked)}
.mia-status-dot--info{background:var(--tone-info)}
.mia-status-dot--neutral{background:var(--tone-neutral)}

/* Anything the agent produced carries the orange left edge. */
.mia-artifact{width:100%;border:1px solid var(--border);border-left:var(--accent-edge) solid var(--accent-orange-300);border-radius:var(--radius-lg);background:var(--background);padding:var(--space-3);box-shadow:var(--shadow-sm)}
.mia-artifact-icon{display:flex;width:32px;height:32px;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--accent-orange-50);color:var(--accent-orange-700)}
.mia-artifact-title{margin-top:var(--space-2);font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--leading-snug)}
.mia-artifact-summary{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mia-provenance{display:flex;flex-direction:column;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--muted) 20%,transparent);padding:var(--space-3);font-size:var(--text-sm);color:var(--muted-foreground)}
.mia-provenance-warn{display:flex;flex-direction:column;gap:4px;border:1px solid var(--accent-orange-200);border-radius:var(--radius-md);background:color-mix(in oklab,var(--tone-waiting-surface) 70%,transparent);padding:var(--space-2);color:var(--accent-orange-900)}
.mia-provenance-warn ul{margin:0;padding-left:var(--space-4)}

.mia-thinking{display:flex;width:fit-content;align-items:center;gap:var(--space-3);border:1px solid var(--accent-orange-200);border-radius:var(--radius-2xl);background:color-mix(in oklab,var(--accent-orange-50) 80%,transparent);padding:var(--space-3) var(--space-4);font-size:var(--text-md);color:var(--accent-orange-900)}
.mia-thinking-dot{display:block;width:6px;height:6px;border-radius:var(--radius-full);background:color-mix(in oklab,var(--accent-orange-500) 80%,transparent);animation:mia-thinking-dot 1.2s ease-in-out infinite}
.mia-thinking-elapsed{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:color-mix(in oklab,var(--accent-orange-700) 70%,transparent)}

.mia-starter{display:flex;min-height:64px;height:auto;width:100%;align-items:flex-start;justify-content:flex-start;gap:var(--space-3);padding:var(--space-3);text-align:left;white-space:normal}
.mia-starter-label{display:block;font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.mia-starter-hint{display:block;margin-top:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mia-bubble{display:flex;width:100%;flex-direction:column;gap:var(--space-2);max-width:95%}
.mia-bubble--user{margin-left:auto;align-items:flex-end}
.mia-bubble-content{display:flex;width:fit-content;max-width:100%;flex-direction:column;gap:var(--space-2);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.mia-bubble--user .mia-bubble-content{border-radius:var(--radius-lg);background:var(--secondary);padding:var(--space-3) var(--space-4);color:var(--foreground);white-space:pre-wrap}
.mia-bubble--assistant .mia-bubble-content{max-width:42rem;color:var(--foreground)}

.mia-composer{display:flex;align-items:flex-end;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--background);padding:var(--space-2);box-shadow:var(--shadow-sm)}
.mia-composer:focus-within{box-shadow:var(--shadow-sm),0 0 0 2px color-mix(in oklab,var(--ring) 40%,transparent)}
.mia-composer .mia-textarea{min-height:36px;max-height:200px;overflow-y:auto;field-sizing:content;border:0;background:transparent;box-shadow:none;padding:var(--space-2) var(--space-3)}

.mia-metric-tile{border-radius:var(--radius-lg);background:color-mix(in oklab,var(--muted) 40%,transparent);padding:var(--space-3)}
.mia-metric-label{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground)}
.mia-metric-value{margin-top:var(--space-1);font:var(--type-metric)}
.mia-metric-note{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--muted-foreground)}

.mia-row{display:flex;align-items:center;gap:var(--space-3);width:100%;border:0;border-radius:var(--radius-lg);background:color-mix(in oklab,var(--muted) 40%,transparent);padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-md);cursor:pointer;transition:var(--transition-colors)}
.mia-row:hover{background:var(--muted)}
.mia-row-title{font-size:var(--text-md);font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mia-row-subtitle{font-size:var(--text-sm);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mia-row-avatar{display:flex;width:36px;height:36px;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--background)}

.mia-eyebrow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-foreground)}
.mia-empty{border:1px dashed var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--muted) 20%,transparent);padding:var(--space-5);font-size:var(--text-md);color:var(--muted-foreground)}