/* Macaron Agent Platform — Design System Components
 * Shared atomic & molecule components for all templates.
 * Included after main.css — extends (never duplicates) base tokens & classes.
 */

/* ═══════════════════════════════════════════════════════
   ATOMS — Small reusable primitives
   ═══════════════════════════════════════════════════════ */

/* Avatar — circle with img, svg icon, or initial letter */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);flex-shrink:0;overflow:hidden;border:2px solid var(--border);background:var(--bg-tertiary)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-full)}
.avatar svg{width:50%;height:50%}
.avatar--xs{width:24px;height:24px;font-size:0.6rem}
.avatar--sm{width:28px;height:28px;font-size:0.68rem}
.avatar--md{width:36px;height:36px;font-size:0.78rem}
.avatar--lg{width:44px;height:44px;font-size:0.88rem}
.avatar--xl{width:56px;height:56px;font-size:1rem}

/* Status indicator — glowing dot for agent/mission/task state */
.dot{width:8px;height:8px;border-radius:var(--radius-full);display:inline-block;flex-shrink:0}
.dot--active{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot--idle{background:var(--gray)}
.dot--thinking{background:var(--yellow);animation:ds-pulse 1.5s infinite}
.dot--error{background:var(--red);box-shadow:0 0 6px var(--red)}
.dot--planning{background:var(--yellow)}
.dot--completed{background:var(--blue)}
.dot--blocked{background:var(--red)}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Tag / Pill — inline labels for skills, tools, domains, types */
.pill{display:inline-block;padding:0.1rem 0.4rem;border-radius:4px;font-size:0.68rem;background:var(--bg-secondary);border:1px solid var(--border);line-height:1.4}
.pill--skill{border-color:rgba(124,58,237,.35);color:var(--purple)}
.pill--tool{border-color:rgba(16,185,129,.3);color:var(--green)}
.pill--mcp{border-color:rgba(245,158,11,.3);color:var(--yellow)}
.pill--domain{border-color:rgba(124,138,255,.3);color:var(--blue)}
.pill--feature{background:rgba(168,85,247,.15);color:var(--purple);border-color:transparent}
.pill--fix{background:rgba(248,113,113,.15);color:var(--red-light);border-color:transparent}
.pill--refactor{background:rgba(96,165,250,.15);color:var(--blue-light);border-color:transparent}
.pill--test{background:rgba(52,211,153,.15);color:var(--green-light);border-color:transparent}
.pill--security{background:rgba(251,191,36,.15);color:var(--yellow-light);border-color:transparent}

/* Progress bar — thin horizontal fill */
.progress{height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}
.progress__fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-light));border-radius:var(--radius-xs);transition:width .3s}

/* Metric card — big number + label */
.metric{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}
.metric__value{font-size:var(--text-3xl);font-weight:700;color:var(--purple-light);line-height:1}
.metric__label{font-size:0.72rem;color:var(--text-secondary);margin-top:0.3rem;text-transform:uppercase;letter-spacing:0.5px}
.metric--sm .metric__value{font-size:1.2rem}
.metric--sm{padding:0.65rem}

/* Section title — reusable header with icon */
.section-title{font-size:var(--text-md);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.section-title svg{width:16px;height:16px}

/* Button extensions */
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple-light)}
.btn-purple{background:var(--purple);color:var(--text-on-accent);border-color:var(--purple)}
.btn-purple:hover{opacity:.85}
.btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}

/* ═══════════════════════════════════════════════════════
   MOLECULES — Composite components
   ═══════════════════════════════════════════════════════ */

/* Card — generic container (bg-secondary, border, radius) */
.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;transition:border-color .15s}
.card:hover{border-color:var(--purple)}
.card--clickable{cursor:pointer;text-decoration:none;color:inherit;display:block}
.card--clickable:hover{background:var(--bg-tertiary)}
.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.card__title{font-size:1rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:0.5rem}
.card__subtitle{font-size:0.78rem;color:var(--text-secondary);margin-top:0.2rem}
.card__body{font-size:0.85rem}
.card__footer{display:flex;align-items:center;gap:0.5rem;margin-top:0.65rem}

/* Popover — fixed-position detail panel (for agent cards, etc.) */
.popover{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;padding:0.75rem 0.85rem;font-size:0.78rem;color:var(--text-primary);width:320px;max-height:70vh;overflow-y:auto;box-shadow:0 6px 24px rgba(0,0,0,.55);pointer-events:auto;z-index:1000;display:none;word-break:break-word}
.popover.visible{display:block}
.popover__close{position:absolute;top:0.35rem;right:0.5rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:0.85rem;padding:0.2rem}
.popover__close:hover{color:var(--text-primary)}
.popover__header{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0.45rem;border-bottom:1px solid var(--border)}
.popover__name{font-weight:700;font-size:0.88rem}
.popover__role{font-size:0.72rem;color:var(--text-secondary)}
.popover__tagline{font-size:0.72rem;color:var(--text-secondary);font-style:italic;line-height:1.3;margin-bottom:0.35rem}
.popover__desc{font-size:0.72rem;color:var(--text-secondary);line-height:1.35;margin-top:0.35rem}
.popover__section{margin-top:0.45rem}
.popover__section-title{font-size:0.68rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.2rem;font-weight:600}
.popover__tags{display:flex;flex-wrap:wrap;gap:0.25rem}

/* Kanban — column-based board */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;min-height:300px}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
.kanban__col{background:var(--bg-secondary);border-radius:var(--radius);padding:0.75rem;border:1px solid var(--border)}
.kanban__col-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary);margin-bottom:0.65rem;display:flex;align-items:center;justify-content:space-between}
.kanban__count{background:var(--bg-tertiary);padding:0.1rem 0.4rem;border-radius:4px;font-size:0.65rem}
.kanban__item{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;padding:0.6rem;margin-bottom:0.5rem;transition:border-color .15s}
.kanban__item:hover{border-color:var(--purple)}
.kanban__item-title{font-size:0.8rem;font-weight:600;color:var(--text-primary);margin-bottom:0.25rem}
.kanban__item-meta{display:flex;align-items:center;gap:0.4rem;font-size:0.68rem;color:var(--text-secondary)}
.kanban__empty{font-size:0.75rem;color:var(--text-secondary);font-style:italic;text-align:center;padding:1rem 0}

/* Inline form — compact single-line form (add task, add sprint, etc.) */
.inline-form{display:flex;gap:0.4rem;padding:0.4rem;border-top:1px solid var(--border);margin-top:0.4rem}
.inline-form__input{flex:1;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:0.35rem 0.55rem;color:var(--text-primary);font-size:0.78rem;outline:none}
.inline-form__input:focus{border-color:var(--purple)}
.inline-form__btn{padding:0.35rem 0.55rem;border-radius:6px;border:none;background:var(--purple);color:white;cursor:pointer;font-size:0.72rem;display:flex;align-items:center;gap:0.25rem;white-space:nowrap}
.inline-form__btn:hover{opacity:.85}
.inline-form__btn:disabled{opacity:.4;cursor:not-allowed}

/* Tabs — horizontal tab bar */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}
.tab{padding:0.5rem 1rem;font-size:0.82rem;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* Split layout — main + sidebar */
.split{display:grid;gap:1.25rem;height:calc(100vh - 56px);overflow:hidden}
.split--sidebar-right{grid-template-columns:1fr 320px}
.split--sidebar-left{grid-template-columns:320px 1fr}
@media(max-width:900px){.split{grid-template-columns:1fr!important;height:auto;overflow:auto}}
.split__main{overflow-y:auto;padding:0.5rem 0}
.split__aside{overflow-y:auto;border-left:1px solid var(--border);padding:0.75rem}

/* Metrics grid — responsive grid of metric cards */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-bottom:1.5rem}

/* Cards grid — responsive grid of card components */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.cards-grid--compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem}

/* Empty state — centered placeholder */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);gap:0.75rem;text-align:center;padding:2rem}
.empty svg{width:48px;height:48px;opacity:.25}
.empty__title{font-size:1rem;font-weight:600;color:var(--text-primary)}
.empty__subtitle{font-size:0.82rem;max-width:400px;line-height:1.5}

/* ═══════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════ */
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-xs{gap:0.25rem}.gap-sm{gap:0.5rem}.gap-md{gap:0.75rem}.gap-lg{gap:1rem}
.mt-sm{margin-top:0.5rem}.mt-md{margin-top:0.75rem}.mt-lg{margin-top:1.25rem}
.mb-sm{margin-bottom:0.5rem}.mb-md{margin-bottom:0.75rem}.mb-lg{margin-bottom:1.25rem}
.text-xs{font-size:0.68rem}.text-sm{font-size:0.78rem}.text-md{font-size:0.85rem}
.text-muted{color:var(--text-secondary)}.text-purple{color:var(--purple)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-bold{font-weight:700}.font-mono{font-family:var(--font-mono)}

/* ═══════════════════════════════════════════════════════
   UNIFIED MESSAGE COMPONENT — .mu (msg-unified)
   3 modes: thread (default), compact, chat
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */
.mu{position:relative}
.mu[data-msg-id]{scroll-margin-top:1rem}

/* ── System message ── */
.mu--system{text-align:center;padding:.25rem .75rem}
.mu__sys-text{font-size:.72rem;color:var(--text-secondary);font-style:italic}

/* ── Avatar ── */
.mu__avatar{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid;font-size:.82rem;font-weight:600;color:var(--text-on-accent)}
.mu__avatar--sm{width:28px;height:28px}
.mu__avatar--user{background:var(--user-bubble);border-color:var(--user-bubble-border);font-size:.65rem}
.mu__avatar img{width:100%;height:100%;border-radius:var(--radius-full);object-fit:cover}

/* ── Sender meta row ── */
.mu__meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.2rem}
.mu__sender{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.2rem}
.mu__name{font-size:.8rem;font-weight:600}
.mu__name--sm{font-size:.7rem}
.mu__role{font-size:.65rem;color:var(--text-secondary);font-style:italic;opacity:.7}
.mu__role--sm{font-size:.58rem}
.mu__arrow{font-size:.7rem;color:var(--text-secondary)}
.mu__target{font-size:.75rem;font-weight:500}
.mu__target--sm{font-size:.68rem}
.mu__target-photo{width:18px;height:18px;border-radius:var(--radius-full);object-fit:cover;vertical-align:middle;margin-right:-2px}
.mu__target-photo--sm{width:14px;height:14px}
.mu__target-role{font-size:.6rem;color:var(--text-secondary);font-style:italic;opacity:.6}
.mu__target-role--sm{font-size:.55rem}
.mu__pattern{font-size:.6rem;color:var(--purple);opacity:.7;font-style:italic}
.mu__pattern--sm{font-size:.55rem}

/* ── Badge ── */
.mu__badge{display:inline-block;padding:.1rem .4rem;border-radius:4px;font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--bg-tertiary);color:var(--text-secondary)}
.mu__badge--sm{font-size:.55rem;padding:.05rem .3rem}

/* ── Content ── */
.mu__content{font-size:.84rem;color:var(--text-primary);line-height:1.55;word-break:break-word}
.mu__content:not(.md-rendered){white-space:pre-wrap}
.mu__content pre{background:var(--bg-primary);padding:.6rem .75rem;border-radius:6px;overflow-x:auto;margin:.4rem 0;font-size:.78rem}
.mu__content code{font-family:var(--font-mono);font-size:.82em}
.mu__content p{margin:.3rem 0}
.mu__content ul,.mu__content ol{padding-left:1.2rem;margin:.3rem 0}
.mu__content table{border-collapse:collapse;width:100%;margin:.4rem 0;font-size:.78rem}
.mu__content th,.mu__content td{border:1px solid var(--border);padding:.3rem .5rem;text-align:left}
.mu__content th{background:var(--bg-tertiary)}
.mu__content h1,.mu__content h2,.mu__content h3{font-size:.9rem;margin:.5rem 0 .2rem;color:var(--purple)}
.mu__content blockquote{border-left:3px solid var(--purple);padding-left:.75rem;margin:.3rem 0;color:var(--text-secondary)}

/* ── Collapsible text (compact mode) ── */
.mu__text{font-size:.75rem;color:var(--text-secondary);line-height:1.45;cursor:pointer;word-break:break-word}
.mu__text.mu__text--collapse{max-height:3.6em;overflow:hidden}
.mu__text pre{background:var(--bg-primary);padding:.5rem;border-radius:4px;font-size:.72rem}
.mu__text p{margin:.2rem 0}

/* ── Tools ── */
.mu__tools{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem;padding-top:.3rem;border-top:1px solid rgba(255,255,255,.04)}
.mu__tool{display:flex;align-items:center;gap:.25rem;font-size:.68rem;color:var(--text-secondary);background:var(--bg-primary);padding:.15rem .4rem;border-radius:4px}
.mu__tool-name{font-weight:600;color:var(--blue)}
.mu__tool-result{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}

/* ── Footer / time ── */
.mu__footer{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;margin-top:.15rem}
.mu__time{font-size:.65rem;color:var(--text-secondary);white-space:nowrap}
.mu__time--right{margin-left:auto}
.mu__model{font-size:.6rem;padding:.05rem .3rem;background:var(--bg-primary);color:var(--text-secondary);border-radius:3px}
.mu__checks{opacity:.7}

/* ── Bubble (chat mode) ── */
.mu__bubble{padding:.5rem .75rem;border-radius:12px;min-width:80px}
.mu__bubble--agent{background:var(--bg-secondary);border:1px solid var(--border);border-top-left-radius:4px}
.mu__bubble--user{background:var(--user-bubble);border:1px solid var(--user-bubble-border);border-top-right-radius:4px}

/* ═══════ THREAD MODE ═══════ */
.mu--thread{display:flex;gap:.75rem;padding:.55rem 0;padding-left:.75rem;border-left:3px solid transparent;transition:background .1s}
.mu--thread:hover{background:rgba(255,255,255,.02)}

/* ═══════ COMPACT MODE ═══════ */
.mu--compact{display:flex;gap:.5rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mu--compact:last-child{border-bottom:none}

/* ═══════ CHAT MODE ═══════ */
.mu--chat{display:flex;gap:.5rem;max-width:80%;align-self:flex-start}
.mu--user{align-self:flex-end;flex-direction:row-reverse}

/* ── Streaming cursor ── */
.mu__content.mu--streaming::after{content:'▌';animation:mu-blink .8s infinite;color:var(--purple)}
@keyframes mu-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Agent Dropdown (photo + name + role) ── */
.agent-dropdown{position:relative;display:inline-block}
.agent-dropdown__trigger{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.78rem;color:var(--text-primary);min-width:200px;transition:border-color .15s}
.agent-dropdown__trigger:hover{border-color:var(--purple)}
.agent-dropdown__trigger--compact{min-width:140px;padding:4px 8px;font-size:.72rem}
.agent-dropdown__chevron{margin-left:auto;opacity:.5;transition:transform .2s}
.agent-dropdown.open .agent-dropdown__chevron{transform:rotate(180deg)}
.agent-dropdown__menu{display:none;position:absolute;top:100%;left:0;z-index:50;margin-top:4px;min-width:260px;max-height:320px;overflow-y:auto;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);padding:4px}
.agent-dropdown__menu--up{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}
.agent-dropdown.open .agent-dropdown__menu{display:block}
.agent-dropdown__item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .12s;font-size:.76rem}
.agent-dropdown__item:hover{background:var(--bg-tertiary)}
.agent-dropdown__item.active{background:var(--purple);background:rgba(124,58,237,.15)}
.agent-dropdown__photo{width:28px;height:28px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.agent-dropdown__trigger .agent-dropdown__photo{width:22px;height:22px}
.agent-dropdown__initials{width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}
.agent-dropdown__trigger .agent-dropdown__initials{width:22px;height:22px;font-size:.55rem}
.agent-dropdown__name{font-weight:600;color:var(--text-primary);white-space:nowrap}
.agent-dropdown__role{font-size:.65rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}