/* Support thread and suggested reply · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: Textarea, Avatar, Badge. */
/* families/data-display/family.css */
.dd-rate{display:flex;align-items:center;gap:var(--s-1);font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid hsl(var(--border))}
/* families/data-display/family.css */
.dd-ticket{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:640px}
/* families/data-display/family.css */
.dd-ticket-main{display:flex;flex-direction:column;min-width:0;border-right:1px solid hsl(var(--border))}
/* families/data-display/family.css */
.dd-ticket-h{padding:var(--s-4) var(--s-5);border-bottom:1px solid hsl(var(--border))}
/* families/data-display/family.css */
.dd-ticket-h .top{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-2)}
/* families/data-display/family.css */
.dd-ticket-h .top a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
/* families/data-display/family.css */
.dd-ticket-h .top a:hover{color:hsl(var(--foreground))}
/* families/data-display/family.css */
.dd-ticket-h h3{font:var(--w-semibold) var(--text-20)/1.2 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:-.01em}
/* families/data-display/family.css */
.dd-ticket-h .meta{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));flex-wrap:wrap}
/* families/data-display/family.css */
.dd-thread{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);flex:1}
/* families/data-display/family.css */
.dd-msg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-3);max-width:680px}
/* families/data-display/family.css */
.dd-msg.me{margin-left:auto;grid-template-columns:minmax(0,1fr) 28px}
/* families/data-display/family.css */
.dd-msg.me .avatar{order:2}
/* families/data-display/family.css */
.dd-msg-h{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
/* families/data-display/family.css */
.dd-msg.me .dd-msg-h{justify-content:flex-end}
/* families/data-display/family.css */
.dd-msg-h b{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
/* families/data-display/family.css */
.dd-bub{padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:hsl(var(--muted));font-size:var(--text-body);line-height:var(--lh-body)}
/* families/data-display/family.css */
.dd-bub p+p{margin-top:var(--s-2)}
/* families/data-display/family.css */
.dd-msg.me .dd-bub{background:hsl(var(--accent));border:1px solid hsl(var(--ring)/.18)}
/* families/data-display/family.css */
.dd-ai{border:1px solid hsl(var(--info)/.35);border-radius:var(--r-card);background:hsl(var(--card));box-shadow:var(--e-1);overflow:hidden}
/* families/data-display/family.css */
.dd-ai-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:hsl(var(--info)/.06);border-bottom:1px solid hsl(var(--info)/.2);font-size:var(--text-small)}
/* families/data-display/family.css */
.dd-ai-h .who{display:inline-flex;align-items:center;gap:6px;font:var(--w-semibold) var(--text-small)/1 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--info))}
/* families/data-display/family.css */
.dd-ai-h .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
/* families/data-display/family.css */
.dd-ai-b{padding:var(--s-3) var(--s-4);font-size:var(--text-body);line-height:var(--lh-body)}
/* families/data-display/family.css */
.dd-ai-b p+p{margin-top:var(--s-2)}
/* families/data-display/family.css */
.dd-ai-b .lock svg{margin-top:2px}
/* families/data-display/family.css */
.dd-ai-b .lock{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border-left:2px solid hsl(var(--locked));background:hsl(var(--muted));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
/* families/data-display/family.css */
.dd-ai-f{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3) var(--s-3);flex-wrap:wrap}
/* families/data-display/family.css */
.dd-ai-f .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
/* families/data-display/family.css */
.dd-conf{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-conf .m{width:44px;height:4px;border-radius:2px;background:hsl(var(--info)/.18);overflow:hidden}
/* families/data-display/family.css */
.dd-conf .m i{display:block;height:100%;background:hsl(var(--info))}
/* families/data-display/family.css */
.dd-conf.low .m{background:hsl(var(--warning)/.18)}
/* families/data-display/family.css */
.dd-conf.low .m i{background:hsl(var(--warning))}
/* families/data-display/family.css */
.dd-ai.breach{border-color:hsl(var(--destructive)/.4)}
/* families/data-display/family.css */
.dd-ai.breach .dd-ai-h{background:hsl(var(--destructive)/.05);border-bottom-color:hsl(var(--destructive)/.2)}
/* families/data-display/family.css */
.dd-ai.inserted .dd-ai-b{color:hsl(var(--muted-foreground))}
/* families/data-display/family.css */
.dd-ai-ack{display:none;align-items:center;gap:6px;font-size:var(--text-small);color:hsl(var(--success));font-weight:var(--w-medium)}
/* families/data-display/family.css */
.dd-ai.inserted .dd-ai-ack{display:inline-flex}
/* families/data-display/family.css */
.dd-ai.inserted .dd-ai-ins{display:none}
/* families/data-display/family.css */
.dd-compose{border-top:1px solid hsl(var(--border));padding:var(--s-3) var(--s-5) var(--s-4);background:hsl(var(--background))}
/* families/data-display/family.css */
.dd-compose-box{border:1px solid hsl(var(--input));border-radius:var(--r-card);background:hsl(var(--background));transition:border-color var(--motion-hover),box-shadow var(--motion-focus)}
/* families/data-display/family.css */
.dd-compose-box:focus-within{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
/* families/data-display/family.css */
.dd-compose textarea{display:block;width:100%;min-height:84px;border:0;outline:0;resize:vertical;padding:var(--s-3);background:transparent;font-size:var(--text-body);line-height:var(--lh-body)}
/* families/data-display/family.css */
.dd-compose textarea::placeholder{color:hsl(var(--muted-foreground))}
/* families/data-display/family.css */
.dd-compose-f{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2)}
/* families/data-display/family.css */
.dd-compose-f .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
/* families/data-display/family.css */
.dd-rail{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-5);background:hsl(var(--muted)/.35)}
/* families/data-display/family.css */
.dd-rail h4{font:var(--w-semibold) var(--text-small)/1 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--muted-foreground));margin-bottom:var(--s-2)}
/* families/data-display/family.css */
.dd-ai-states{display:grid;gap:var(--s-4)}
/* families/data-display/family.css */
.dd-ai-load{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4)}
/* families/data-display/family.css */
.dd-mcase{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border));scrollbar-width:none}
/* families/data-display/family.css */
.dd-mcase::-webkit-scrollbar{display:none}
/* families/data-display/family.css */
.dd-mcase .chip{flex:none}