.agent-console { margin-top: 18px; }
.agent-console-header { min-height: 88px; align-items: center; }
.panel-subcopy { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.agent-console-meta { display: flex; align-items: center; gap: 18px; color: var(--faint); font: 9px var(--mono); white-space: nowrap; }
.active-indicator { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 5px; box-shadow: 0 0 0 3px rgba(123,197,156,.1); }
.agent-console-grid { display: grid; grid-template-columns: 278px minmax(0, 1fr); min-height: 455px; }
.agent-list { border-right: 1px solid var(--line); padding: 8px 0; max-height: 455px; overflow: auto; }
.agent-list::-webkit-scrollbar { width: 4px; }.agent-list::-webkit-scrollbar-thumb { background: #373b34; }
.agent-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer; border-left: 2px solid transparent; transition: background .2s ease, border-color .2s ease; }
.agent-row:hover { background: rgba(255,255,255,.025); }.agent-row.selected { background: var(--surface-2); border-left-color: var(--amber); }
.agent-mini-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 9px var(--mono); color: #dbddd3; background: #3c4c40; }
.agent-mini-avatar.amber { background: #5b4830; color: #f2ce8f; }.agent-mini-avatar.blue { background: #34495d; color: #a9c7ec; }.agent-mini-avatar.purple { background: #51405e; color: #dbc1e8; }.agent-mini-avatar.coral { background: #5b4039; color: #eab6a5; }.agent-mini-avatar.teal { background: #31514d; color: #a7ddd3; }
.agent-row strong { display: block; font-size: 10px; }.agent-row small { display: block; margin-top: 3px; color: var(--faint); font-size: 9px; }
.agent-row-status { text-align: right; color: var(--faint); font: 8px var(--mono); white-space: nowrap; }.agent-row-status .status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; background: var(--faint); }.agent-row-status.working { color: var(--green); }.agent-row-status.working .status-dot { background: var(--green); }.agent-row-status.ready { color: var(--green); }.agent-row-status.ready .status-dot { background: var(--green); }.agent-row-status.attention { color: var(--amber); }.agent-row-status.attention .status-dot { background: var(--amber); }.agent-row-status.waiting { color: var(--amber); }.agent-row-status.waiting .status-dot { background: var(--amber); }
.agent-detail { min-width: 0; }.agent-detail-head { display: flex; justify-content: space-between; align-items: start; padding: 22px 25px 18px; border-bottom: 1px solid var(--line); }.agent-identity { display: flex; gap: 11px; align-items: center; }.agent-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #efd39d; background: #5b4830; font: 10px var(--mono); }.agent-detail h3 { margin: 5px 0 4px; font-size: 16px; letter-spacing: -.025em; }.agent-detail-head span:not(.agent-avatar) { color: var(--faint); font-size: 10px; }
.current-work { padding: 19px 25px 18px; border-bottom: 1px solid var(--line); }.work-label, .timeline-heading { color: var(--faint); font: 9px var(--mono); letter-spacing: .1em; }.live-ring { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 0 3px rgba(123,197,156,.12); }.current-work strong { display: block; color: var(--ink); font-size: 12px; margin: 10px 0 15px; font-weight: 600; }.work-progress { height: 4px; background: #2b302a; overflow: hidden; }.work-progress span { display: block; height: 100%; width: 68%; background: var(--amber); transition: width .3s ease; }.work-progress-meta { display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); margin-top: 8px; }
.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }.agent-stats > div { padding: 15px 25px 17px; border-right: 1px solid var(--line); }.agent-stats > div:last-child { border-right: 0; }.agent-stats span { display: block; color: var(--faint); font: 8px var(--mono); letter-spacing: .08em; }.agent-stats strong { display: block; font: 500 20px var(--mono); margin-top: 7px; }.agent-stats small { color: var(--faint); font-size: 10px; }
.agent-timeline-wrap { padding: 17px 25px 9px; }.timeline-heading { display: flex; justify-content: space-between; margin-bottom: 9px; }.timeline-heading span:last-child { color: var(--green); }.agent-timeline { min-height: 100px; }.timeline-event { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: start; gap: 9px; padding: 7px 0; }.timeline-line { position: relative; display: block; width: 7px; height: 7px; background: var(--amber); border-radius: 50%; margin-top: 4px; }.timeline-event:not(:last-child) .timeline-line::after { content: ""; position: absolute; width: 1px; height: 19px; background: var(--line); left: 3px; top: 8px; }.timeline-event p { margin: 0; font-size: 10px; line-height: 1.45; }.timeline-event p span { color: var(--muted); }.timeline-event time { color: var(--faint); font: 8px var(--mono); white-space: nowrap; }
.agent-chat { display: flex; gap: 8px; margin: 8px 25px 0; border-top: 1px solid var(--line); padding-top: 14px; }.agent-chat input { min-width: 0; flex: 1; background: #151814; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); padding: 10px 11px; font-size: 10px; outline: none; }.agent-chat input:focus { border-color: rgba(239,179,105,.6); }.agent-chat input::placeholder { color: var(--faint); }.agent-chat button { border: 0; border-radius: 3px; background: var(--amber); color: #211a11; font-size: 10px; font-weight: 800; padding: 0 13px; }.agent-chat button:hover { background: #f7c27a; }.agent-chat button span { margin-left: 5px; }
.timeline-line.attention { background: var(--amber); }
@media (max-width: 1100px) { .agent-console-grid { grid-template-columns: 235px minmax(0,1fr); } }
@media (max-width: 720px) { .agent-console-header { align-items: start; }.agent-console-meta { flex-wrap: wrap; gap: 10px; }.agent-console-grid { grid-template-columns: 1fr; }.agent-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 260px; display: grid; grid-template-columns: repeat(2, 1fr); }.agent-row { padding: 10px 12px; }.agent-row-status { display: none; }.agent-detail-head, .current-work, .agent-timeline-wrap { padding-left: 15px; padding-right: 15px; }.agent-stats > div { padding-left: 15px; padding-right: 15px; }.agent-chat { margin-left: 15px; margin-right: 15px; } }