/* Original 2.5D vector identities. No React Bits source, external media or WebGL. */
.awi-avatar { --awi-a: #487dc0; --awi-b: #c2dcf7; --awi-deep: #294c7b; --awi-ink: #153251; --awi-sheen: #f8fcff; position: relative; display: inline-grid; place-items: center; width: var(--awi-size, 32px); height: var(--awi-size, 32px); flex: 0 0 var(--awi-size, 32px); perspective: 360px; isolation: isolate; vertical-align: middle; }
.awi-size-28 { --awi-size: 28px; } .awi-size-32 { --awi-size: 32px; } .awi-size-36 { --awi-size: 36px; } .awi-size-48 { --awi-size: 48px; } .awi-size-64 { --awi-size: 64px; } .awi-size-80 { --awi-size: 80px; }
.awi-tone-teal { --awi-a: #318d8e; --awi-b: #baece3; --awi-deep: #246269; --awi-ink: #133f49; }
.awi-tone-violet { --awi-a: #8a70b8; --awi-b: #e2d6f6; --awi-deep: #5c4785; --awi-ink: #382953; }
.awi-tone-amber { --awi-a: #b18847; --awi-b: #f4dfb5; --awi-deep: #7b5a2e; --awi-ink: #543c23; }
.awi-avatar-svg { display: block; position: relative; width: 100%; height: 100%; overflow: visible; transform: rotateX(8deg) rotateY(-9deg); transform-style: preserve-3d; transition: transform 180ms cubic-bezier(.23,1,.32,1); }
.awi-avatar-shadow { position: absolute; bottom: 3%; left: 22%; width: 56%; height: 13%; background: var(--awi-deep); border-radius: 50%; opacity: .13; transform: skewX(-12deg); filter: blur(1px); }
.awi-motif { transform-origin: 32px 36px; animation: awi-float 6.2s ease-in-out infinite; }
.awi-side { fill: var(--awi-deep); }
.awi-face { fill: var(--awi-b); stroke: var(--awi-a); stroke-width: .8; }
.awi-light { fill: none; stroke: var(--awi-sheen); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.awi-visor { fill: var(--awi-ink); }
.awi-eye { fill: var(--awi-sheen); }
.awi-orbit-back { fill: none; stroke: var(--awi-a); stroke-width: 2.6; opacity: .45; }
.awi-orbit-front { fill: none; stroke: var(--awi-a); stroke-width: 3.2; stroke-linecap: round; }
.awi-satellite { fill: var(--awi-sheen); stroke: var(--awi-deep); stroke-width: 2; }
.awi-back-sheet { fill: var(--awi-a); stroke: var(--awi-sheen); stroke-width: .8; }
.awi-fold { fill: var(--awi-sheen); stroke: var(--awi-a); stroke-width: .8; }
.awi-paper-line { fill: none; stroke: var(--awi-a); stroke-width: 1.8; stroke-linecap: round; }
.awi-prism-left { fill: var(--awi-a); }
.awi-prism-right { fill: var(--awi-deep); }
.awi-prism-edge { stroke: var(--awi-sheen); stroke-width: .8; opacity: .7; }
.awi-compass-ring { fill: none; stroke: var(--awi-a); stroke-width: 1.6; }
.awi-needle { fill: var(--awi-sheen); stroke: var(--awi-a); stroke-width: .8; }
.awi-needle-bottom { fill: var(--awi-a); }
.awi-avatar[data-state="running"] .awi-motif { animation: awi-working 2.6s cubic-bezier(.45,0,.55,1) infinite; }
.awi-avatar[data-state="running"] .awi-light { animation: awi-light 2.6s ease-in-out infinite; }
.awi-avatar[data-state="waiting"] .awi-motif { animation: awi-waiting 4.8s ease-in-out infinite; }
.awi-avatar[data-state="error"] .awi-motif { animation: awi-attention 220ms ease-in-out 2; }
.awi-avatar[data-state="attention"] .awi-motif { animation: awi-waiting 5.5s ease-in-out infinite; }
.awi-avatar[data-state="complete"] .awi-motif { animation: awi-float 7.8s ease-in-out infinite; }
.awi-avatar[data-state="cancelled"] .awi-motif { animation: none; }
.awi-avatar[data-motion="paused"] .awi-motif, .awi-avatar[data-motion="paused"] .awi-light { animation-play-state: paused; }
@keyframes awi-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes awi-working { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2.6px) rotate(1.3deg); } }
@keyframes awi-waiting { 0%,100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg) translateY(-.8px); } }
@keyframes awi-attention { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-1.1px); } 67% { transform: translateX(1.1px); } }
@keyframes awi-light { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* User preference: system reduced-motion does not silently disable these feedback animations. */
@media (hover: hover) and (pointer: fine) { button:hover > .awi-identity .awi-avatar-svg, .awi-preview-choice:hover .awi-avatar-svg { transform: rotateX(14deg) rotateY(-14deg) translateY(-1px); } }
.awi-identity { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink, #20364e); }
.awi-identity-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.awi-identity-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; line-height: 1.4; }
.awi-status { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-tertiary, #53667a); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.awi-status svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.awi-status-running { color: #285c95; }
.awi-status-waiting { color: #53667a; }
.awi-status-error { color: #9b3c3c; }
.awi-status-attention { color: #86560a; }
.awi-status-complete { color: #266b5d; }
@media (max-width: 540px) { .awi-identity { gap: 6px; } .awi-identity-copy strong { font-size: 11px; } .awi-status { font-size: 10px; } }

/* Workbench integration: identity supplements the real task and observation. */
.task-owner { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11px; color: var(--ink-secondary, #435772); }
.task-owner > span:last-child { display: grid; gap: 1px; }
.task-owner small { color: var(--ink-tertiary, #53667a); font-size: 9px; }
.team-observations { margin-bottom: 20px; }
.team-observation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.team-observation { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 44px; border: 1px solid var(--line, #d8e1eb); border-radius: 13px; padding: 12px; color: var(--ink, #20364e); background: rgba(255,255,255,.45); text-align: left; font: inherit; cursor: pointer; }
.team-observation-identity { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-observation-identity > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.team-observation-identity strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-observation-identity small, .team-observation-meta { font-size: 9px; line-height: 1.5; color: var(--ink-tertiary, #53667a); }
.team-observation-identity .badge { font-size: 9px; white-space: nowrap; }
.team-observation-role { font-size: 11px; color: var(--ink-secondary, #435772); }
.team-observation-stage { font-size: 10px; line-height: 1.6; color: var(--ink-tertiary, #53667a); overflow-wrap: anywhere; }
.team-detail-identity { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.team-detail-identity p { margin: 3px 0 0; }
.identity-provenance summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.identity-provenance p { overflow-wrap: anywhere; }
@media (max-width: 1180px) { .team-observation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .team-observation-grid { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; } }