/* SPHERE Agent tab · Figma UI-DESIGN-ARCHIVE 6175:7171 ("추론 과정") port.
   Values are the design's: root padding 16/20, message gap 32, user bubble 12×16 r20 5%, rows 20px icon + 8px gap,
   Inter 14/20 Medium 50% labels · 30% args, thinking body indented 36px, Source Serif 4 16/24 answers,
   footer line 12/16 #898a8b without a box (2026-09-13), answer card r24 stroke 5% padding 16, next-step buttons 8/16/8/6 r10, artifacts 180×180 r12 #131315.
   Chrome stays neutral; amber only marks a failed tool row. */
#sphere-view[data-sphere-shell] .sph-agent-thread{display:flex;flex-direction:column;gap:32px;padding:16px 16px 24px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:left;font-family:'Inter',Pretendard,system-ui,sans-serif;color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-thread:empty{display:none}
/* once the thread has a run the intro (suggestion chips) steps aside; it comes back when the thread is cleared */
#sphere-view[data-sphere-shell] #sph-left-agent:has(.sph-agent-thread:not(:empty)) .sph-shell-agent-intro{display:none}
#sphere-view[data-sphere-shell] .sph-agent-thread *{box-sizing:border-box}
/* The shell's global p/span rules (Spline Sans, dark paragraph color) must not leak into the thread: inherit from the component. */
#sphere-view[data-sphere-shell] .sph-agent-thread :is(p,span,b,i,small,strong,summary,td,th,li,figcaption,button){font-family:inherit;color:inherit}
#sphere-view[data-sphere-shell] .sph-agent-thread :is(p,li){margin:0}
#sphere-view[data-sphere-shell] .sph-agent-ico{display:inline-flex;width:20px;height:20px;flex:0 0 20px;align-items:center;justify-content:center;color:rgb(255 255 255 / 50%);font-style:normal}
#sphere-view[data-sphere-shell] .sph-agent-ico svg{width:20px;height:20px;display:block}
#sphere-view[data-sphere-shell] .sph-agent-ico.is-spinning{animation:sph-agent-spin 1s linear infinite}
@keyframes sph-agent-spin{to{transform:rotate(360deg)}}
/* user bubble */
#sphere-view[data-sphere-shell] .sph-agent-msg-user{align-self:flex-end;max-width:361px;padding:12px 16px;border:0;border-radius:20px;background:rgb(255 255 255 / 5%);color:#fff;font-size:14px;line-height:20px;font-weight:500;white-space:pre-wrap}
/* assistant block */
#sphere-view[data-sphere-shell] .sph-agent-plan{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;background:none;color:#fff;font-size:14px;line-height:20px;text-align:left}
#sphere-view[data-sphere-shell] .sph-agent-plan-past{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;color:rgb(255 255 255 / 60%);font-size:14px;line-height:20px;text-align:left}
#sphere-view[data-sphere-shell] .sph-agent-plan-past .sph-agent-group-body,#sphere-view[data-sphere-shell] .sph-agent-plan-past .sph-agent-review,#sphere-view[data-sphere-shell] .sph-agent-plan-past .sph-agent-next,#sphere-view[data-sphere-shell] .sph-agent-plan-past .sph-agent-time,#sphere-view[data-sphere-shell] .sph-agent-plan-past .sph-agent-copy{display:none}
/* status row: bolt · label 50% · skill ids 30% */
#sphere-view[data-sphere-shell] .sph-agent-status{display:flex;flex-wrap:wrap;align-items:center;min-height:28px;gap:0 8px;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-status-label{padding-left:0}
#sphere-view[data-sphere-shell] .sph-agent-skills{display:flex;flex-wrap:wrap;gap:0 8px}
#sphere-view[data-sphere-shell] .sph-agent-skill{color:rgb(255 255 255 / 30%);font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-skill[data-verified=false]{text-decoration:line-through;text-decoration-color:rgb(255 255 255 / 25%)}
/* action group: header row with collapse glyph; rows are siblings at the same indent */
#sphere-view[data-sphere-shell] .sph-agent-group{display:flex;flex-direction:column;gap:12px}
#sphere-view[data-sphere-shell] .sph-agent-group-head{display:flex;align-items:center;gap:0;width:100%;padding:0;border:0;background:none;color:rgb(255 255 255 / 50%);font:inherit;font-size:14px;line-height:20px;font-weight:500;text-align:left;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-group-label{padding-left:8px}
#sphere-view[data-sphere-shell] .sph-agent-collapse{width:18px;flex-basis:18px;margin-left:4px}
#sphere-view[data-sphere-shell] .sph-agent-collapse svg{width:11px;height:11px}
#sphere-view[data-sphere-shell] .sph-agent-group-body{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0}
#sphere-view[data-sphere-shell] .sph-agent-group-bodywrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1)}
#sphere-view[data-sphere-shell] .sph-agent-group-bodywrap>.sph-agent-group-body{min-height:0;overflow:hidden}
#sphere-view[data-sphere-shell] .sph-agent-group[data-collapsed=true] .sph-agent-group-bodywrap{grid-template-rows:0fr}
#sphere-view[data-sphere-shell] .sph-agent-group-body{transition:opacity .24s ease,transform .34s cubic-bezier(.2,.7,.2,1)}
#sphere-view[data-sphere-shell] .sph-agent-group[data-collapsed=true] .sph-agent-group-body{opacity:0;transform:translateY(-4px)}
#sphere-view[data-sphere-shell] .sph-agent-group[data-collapsed=true]{gap:0}
/* tree: children hang off one continuous guide under the group head (reference: Krea agent trace). Director 2026-09-12: the old
   version drew a 12%-alpha segment per child that overlapped its neighbours (brighter joints) and met the branch at a hard right
   angle, so it read as glued pieces. Now: an OPAQUE guide colour (no alpha stacking), segments that abut exactly (half the 12px
   gap each side), and a rounded elbow ╰ per child; the rail stops where the last elbow begins so the corner is the line's end. */
#sphere-view[data-sphere-shell]{--sph-agent-guide:#3a3c40}
#sphere-view[data-sphere-shell] .sph-agent-group-body{position:relative;margin-left:9px;padding-left:19px}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*{position:relative}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*::before{content:"";position:absolute;left:-19px;top:-6px;bottom:-6px;width:1px;background:var(--sph-agent-guide)}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*:first-child::before{top:-12px}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*:last-child::before{bottom:auto;height:6px;top:-6px}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*:first-child:last-child::before{top:-12px;height:12px}
#sphere-view[data-sphere-shell] .sph-agent-group-body>*::after{content:"";position:absolute;left:-19px;top:0;width:12px;height:11px;box-sizing:border-box;border-left:1px solid var(--sph-agent-guide);border-bottom:1px solid var(--sph-agent-guide);border-bottom-left-radius:9px}
#sphere-view[data-sphere-shell] .sph-agent-group-count{margin-left:6px;color:rgb(255 255 255 / 30%);font-size:12px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-tool=skill] .sph-agent-tool-arg{color:rgb(255 255 255 / 30%)}
#sphere-view[data-sphere-shell] .sph-agent-think-body{margin:4px 0 0 9px;border-left:1px solid var(--sph-agent-guide);border-bottom-left-radius:9px}
#sphere-view[data-sphere-shell] .sph-agent-think[open] .sph-agent-think-body{animation:sph-agent-in .24s ease both}
#sphere-view[data-sphere-shell] .sph-agent-group[data-collapsed=true] .sph-agent-collapse{transform:rotate(180deg)}
/* tool row: icon 20 · label 50% · arg 30% · elapsed right */
#sphere-view[data-sphere-shell] .sph-agent-tool{display:flex;flex-wrap:wrap;align-items:center;min-height:20px;gap:0 8px;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-tool-label{padding-left:0}
#sphere-view[data-sphere-shell] .sph-agent-tool-arg{color:rgb(255 255 255 / 30%);font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-tool-ms{margin-left:auto;color:rgb(255 255 255 / 30%);font-size:12px;line-height:18px}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=error] .sph-agent-ico{color:#d9a441}
#sphere-view[data-sphere-shell] .sph-agent-tool-note{flex-basis:100%;padding-left:28px;color:rgb(255 255 255 / 50%);font-size:12px;line-height:18px;font-weight:400}
/* thinking: summary row (bubble · title · chevron 18) + body indented 36px */
#sphere-view[data-sphere-shell] .sph-agent-think{margin:0}
#sphere-view[data-sphere-shell] .sph-agent-think summary{display:flex;align-items:center;cursor:pointer;list-style:none;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-think summary::-webkit-details-marker{display:none}
#sphere-view[data-sphere-shell] .sph-agent-think summary>span:not(.sph-agent-ico){padding-left:8px}
#sphere-view[data-sphere-shell] .sph-agent-think summary .sph-agent-chevron{width:18px;flex-basis:18px;margin-left:4px;transition:transform .15s}
#sphere-view[data-sphere-shell] .sph-agent-think summary .sph-agent-chevron svg{width:18px;height:18px}
#sphere-view[data-sphere-shell] .sph-agent-think[open] summary .sph-agent-chevron{transform:rotate(180deg)}
#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] summary .sph-agent-ico:first-child{animation:sph-agent-pulse 1.2s ease-in-out infinite}
@keyframes sph-agent-pulse{0%,100%{opacity:.4}50%{opacity:1}}
#sphere-view[data-sphere-shell] .sph-agent-think-body{padding:8px 0 4px 20px;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;font-weight:400;white-space:pre-wrap}   /* text sits 20px off the guide line (director 2026-09-12: 선이 텍스트에 붙어 보임) */
#sphere-view[data-sphere-shell] .sph-agent-think-title{display:block;margin-bottom:16px;font-weight:600}
#sphere-view[data-sphere-shell] .sph-agent-think-body p{margin:0 0 16px;color:inherit;font-family:inherit}
#sphere-view[data-sphere-shell] .sph-agent-think-less{display:block;margin:0 0 0 36px;padding:0;border:0;background:none;color:rgb(255 255 255 / 60%);font:inherit;font-size:12px;line-height:18px;font-weight:500;cursor:pointer}
/* answer: Source Serif 4 16/24 white + copy icon */
#sphere-view[data-sphere-shell] .sph-agent-answer{margin-top:4px;color:#fff;font-family:'Source Serif 4',Georgia,'Noto Serif KR',serif;font-size:16px;line-height:24px;font-weight:400}
#sphere-view[data-sphere-shell] .sph-agent-answer p{margin:0 0 8px;color:#fff;opacity:1;font-family:inherit}
#sphere-view[data-sphere-shell] .sph-agent-copy{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px 4px 8px;border:1px solid rgb(255 255 255 / 10%);border-radius:8px;background:rgb(255 255 255 / 3%);transition:background .15s ease,border-color .15s ease;color:rgb(255 255 255 / 50%);font-family:'Inter',Pretendard,system-ui,sans-serif;font-size:12px;line-height:16px;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-copy .sph-agent-ico{width:16px;height:16px;flex-basis:16px}
#sphere-view[data-sphere-shell] .sph-agent-copy .sph-agent-ico svg{width:16px;height:16px}
#sphere-view[data-sphere-shell] .sph-agent-copy:hover,#sphere-view[data-sphere-shell] .sph-agent-copy[data-done=true]{color:#fff;background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 22%)}
/* review (product-specific, flat): 50% labels, findings rows, diff table */
#sphere-view[data-sphere-shell] .sph-agent-review{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;background:none;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px}
#sphere-view[data-sphere-shell] .sph-agent-review-head{display:block;color:#fff;font-size:14px;line-height:20px;font-weight:600}
#sphere-view[data-sphere-shell] .sph-agent-review-line,#sphere-view[data-sphere-shell] .sph-agent-meta{display:block;color:rgb(255 255 255 / 50%);font-size:12px;line-height:18px}
#sphere-view[data-sphere-shell] .sph-agent-findings{margin:0;padding:0;list-style:none}
#sphere-view[data-sphere-shell] .sph-agent-findings li{padding:6px 0;border-top:1px solid rgb(255 255 255 / 5%);color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px}
#sphere-view[data-sphere-shell] .sph-agent-findings b{color:#fff;font-weight:600}
#sphere-view[data-sphere-shell] .sph-agent-findings li[data-severity=high] b,#sphere-view[data-sphere-shell] .sph-agent-findings li[data-severity=critical] b{color:#d9a441}
#sphere-view[data-sphere-shell] .sph-agent-findings i{display:block;color:rgb(255 255 255 / 30%);font-style:normal;font-size:12px;line-height:18px}
#sphere-view[data-sphere-shell] .sph-agent-diff{width:100%;border-collapse:collapse;background:transparent;color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;text-align:left;table-layout:fixed}
#sphere-view[data-sphere-shell] .sph-agent-diff tr,#sphere-view[data-sphere-shell] .sph-agent-diff tbody,#sphere-view[data-sphere-shell] .sph-agent-diff thead{background:transparent}
#sphere-view[data-sphere-shell] .sph-agent-diff th,#sphere-view[data-sphere-shell] .sph-agent-diff td{padding:4px 0;border:0;border-top:1px solid rgb(255 255 255 / 5%);background:transparent;color:rgb(255 255 255 / 50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sphere-view[data-sphere-shell] .sph-agent-diff th{color:rgb(255 255 255 / 30%);font-weight:500;font-size:12px;line-height:18px}
#sphere-view[data-sphere-shell] .sph-agent-diff td:nth-child(4){color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-errors{display:block;color:#d9a441;font-size:12px;line-height:18px}
/* approval = Figma answer card: r24, stroke 5%, padding 16, question icon 16 + gap 6, divider, question 14/20 50%, chosen answer 12/18 30% */
#sphere-view[data-sphere-shell] .sph-agent-answercard{display:flex;flex-direction:column;gap:0;margin-top:4px;padding:16px;border:1px solid rgb(255 255 255 / 5%);border-radius:24px;background:none}
#sphere-view[data-sphere-shell] .sph-agent-answercard-head{display:flex;align-items:center;gap:6px;color:rgb(255 255 255 / 50%);font-size:12px;line-height:18px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-answercard-head .sph-agent-ico{width:16px;height:16px;flex-basis:16px}
#sphere-view[data-sphere-shell] .sph-agent-answercard-head .sph-agent-ico svg{width:16px;height:16px}
#sphere-view[data-sphere-shell] .sph-agent-answercard-divider{height:1px;margin:16px 0;background:rgb(255 255 255 / 5%)}
#sphere-view[data-sphere-shell] .sph-agent-answercard-q{color:rgb(255 255 255 / 50%);font-size:14px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-answercard-choices{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#sphere-view[data-sphere-shell] .sph-agent-apply-button,#sphere-view[data-sphere-shell] .sph-agent-skip-button{display:inline-flex;align-items:center;height:32px;padding:0 8px;border:0;border-radius:8px;background:rgb(255 255 255 / 5%);color:#fff;font:inherit;font-size:12px;line-height:18px;font-weight:600;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-skip-button{color:rgb(255 255 255 / 60%);font-weight:500}
/* 승인 후 적용: the one action in the card, so it carries the brand lime like the send button (Figma Page 17 승인 button:
   lime fill, dark text). Disabled keeps its shape but reads as inactive. Director 2026-09-12: "더 밝은 색깔로". */
#sphere-view[data-sphere-shell] .sph-agent-apply-button{background:#d6ff66;color:#141414;padding:0 12px;box-shadow:inset 0 1px 0 rgb(255 255 255 / 45%)}
#sphere-view[data-sphere-shell] .sph-agent-apply-button:hover:not(:disabled){background:#e4ff8f}
#sphere-view[data-sphere-shell] .sph-agent-apply-button:disabled{background:rgb(255 255 255 / 8%);color:rgb(255 255 255 / 40%);box-shadow:none;cursor:not-allowed}
#sphere-view[data-sphere-shell] .sph-agent-skip-button:disabled{opacity:.4;cursor:not-allowed}
#sphere-view[data-sphere-shell] .sph-agent-answercard-a{display:block;min-height:0;margin-top:6px;color:rgb(255 255 255 / 30%);font-size:12px;line-height:18px}
#sphere-view[data-sphere-shell] .sph-agent-answercard-a:empty{display:none}
/* artifacts: 180×180, #131315, r12, caption over the bottom, blurred chips */
#sphere-view[data-sphere-shell] .sph-agent-artifacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,180px));gap:8px;margin-top:4px}
#sphere-view[data-sphere-shell] .sph-agent-artifact{position:relative;margin:0;padding:0;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#131315;color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-artifact img,#sphere-view[data-sphere-shell] .sph-agent-artifact-blank{display:block;width:100%;height:100%;object-fit:cover;background:#1a1a1c}
#sphere-view[data-sphere-shell] .sph-agent-artifact figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:4px;padding:0 12px 12px}
#sphere-view[data-sphere-shell] .sph-agent-artifact b{font-family:'Inter',Pretendard,system-ui,sans-serif;font-size:16px;line-height:24px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgb(0 0 0 / 30%)}
#sphere-view[data-sphere-shell] .sph-agent-artifact-chips{display:flex;gap:4px}
#sphere-view[data-sphere-shell] .sph-agent-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;background:rgb(0 0 0 / 35%);backdrop-filter:blur(8px);color:#fff;font-size:10px;line-height:14px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-chip .sph-agent-ico{width:12px;height:12px;flex-basis:12px;color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-chip .sph-agent-ico svg{width:12px;height:12px}
/* footer line (director 2026-09-13: the #202326 bar behind "검토 전용 · 작업 시간" read as a stray box): plain 12/16 #898a8b text
   like the time row below it, no background, a 14px chevron that still folds the trace */
#sphere-view[data-sphere-shell] .sph-agent-footer{display:flex;align-items:center;gap:6px;width:100%;min-height:20px;margin-top:6px;padding:0;border:0;border-radius:0;background:none;color:#898a8b;font:inherit;font-size:12px;line-height:16px;font-weight:500;text-align:left;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-footer .sph-agent-ico{width:14px;height:14px;flex-basis:14px;color:#898a8b}
#sphere-view[data-sphere-shell] .sph-agent-footer .sph-agent-ico svg{width:14px;height:14px}
#sphere-view[data-sphere-shell] .sph-agent-footer[aria-expanded=false] .sph-agent-chevron{transform:rotate(-90deg)}
#sphere-view[data-sphere-shell] .sph-agent-footer[data-state=blocked],#sphere-view[data-sphere-shell] .sph-agent-footer[data-state=error]{color:#898a8b}
/* time + next steps */
#sphere-view[data-sphere-shell] .sph-agent-time{display:flex;align-items:center;gap:8px;margin-top:4px;color:#898a8b;font-size:12px;line-height:16px}
#sphere-view[data-sphere-shell] .sph-agent-time .sph-agent-ico{width:16px;height:16px;flex-basis:16px;color:#898a8b}
#sphere-view[data-sphere-shell] .sph-agent-time .sph-agent-ico svg{width:16px;height:16px}
#sphere-view[data-sphere-shell] .sph-agent-next{display:flex;flex-direction:column;gap:8px;padding-top:12px}
#sphere-view[data-sphere-shell] .sph-agent-next-title{color:#898a8b;font-size:14px;line-height:20px;font-weight:500}
#sphere-view[data-sphere-shell] .sph-agent-next-list{display:flex;flex-direction:column;gap:2px}
#sphere-view[data-sphere-shell] .sph-agent-next-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px 8px 10px;border:1px solid rgb(255 255 255 / 10%);border-radius:10px;background:rgb(255 255 255 / 3%);color:#fff;font:inherit;font-size:14px;line-height:20px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
#sphere-view[data-sphere-shell] .sph-agent-next-item .sph-agent-ico{width:16px;height:16px;flex-basis:16px;color:rgb(255 255 255 / 50%)}
#sphere-view[data-sphere-shell] .sph-agent-next-item .sph-agent-ico svg{width:16px;height:16px}
#sphere-view[data-sphere-shell] .sph-agent-next-item:hover{background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 22%)}
#sphere-view[data-sphere-shell] .sph-agent-next-item:active{transform:scale(.99)}
#sphere-view[data-sphere-shell] .sph-agent-next-item:focus-visible,#sphere-view[data-sphere-shell] .sph-agent-copy:focus-visible,#sphere-view[data-sphere-shell] .sph-agent-trace:focus-visible{outline:2px solid #d6ff66;outline-offset:2px}
/* Figma settings chips (Seedance 2.5 · 16:9 · 5s): h32, r8, 5% white, Semi 12/18 white, icon 16, padding 0 8, gap 4 */
#sphere-view[data-sphere-shell] .sph-agent-chips{display:flex;flex-wrap:wrap;gap:4px}
#sphere-view[data-sphere-shell] .sph-agent-chip-setting{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;border-radius:8px;background:rgb(255 255 255 / 5%);color:#fff;font-size:12px;line-height:18px;font-weight:600}
#sphere-view[data-sphere-shell] .sph-agent-chip-setting .sph-agent-ico{width:16px;height:16px;flex-basis:16px;color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-chip-setting .sph-agent-ico svg{width:16px;height:16px}
#sphere-view[data-sphere-shell] .sph-agent-plan-past[data-restored=true] .sph-agent-footer{cursor:default}

/* run items enter in sequence as they arrive (renderRun sets animation-delay per fresh node) */
#sphere-view[data-sphere-shell] .sph-agent-plan .sph-agent-enter{animation:sph-agent-in .32s ease both}
@keyframes sph-agent-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){#sphere-view[data-sphere-shell] .sph-agent-plan .sph-agent-enter{animation:none}}

/* The chat is readable text: drag to select and copy (the left dock is user-select:none for its tool rows). Buttons and
   collapse handles keep their pointer behaviour. Director 2026-09-11: "채팅 부분으로 드래그가능하게해. 텍스트복사가능하게" */
#sphere-view[data-sphere-shell] .sph-agent-thread,#sphere-view[data-sphere-shell] .sph-agent-thread *{user-select:text;-webkit-user-select:text}
#sphere-view[data-sphere-shell] .sph-agent-thread :is(p,li,td,th,span,b,strong,small,figcaption,.sph-agent-msg-user,.sph-agent-answer,.sph-agent-think-body,.sph-agent-finding,.sph-agent-diff){cursor:text}
#sphere-view[data-sphere-shell] .sph-agent-thread :is(button,summary,[role=button],.sph-agent-ico,.sph-agent-ico *){user-select:none;-webkit-user-select:none;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-thread :is(button,summary,[role=button]) *{user-select:none;-webkit-user-select:none;cursor:pointer}   /* director 2026-09-12: 메시지 복사·다음 단계 제안은 버튼이다, 드래그가 아니라 클릭 */
#sphere-view[data-sphere-shell] .sph-agent-thread :is(button,summary,[role=button]){-webkit-user-drag:none;touch-action:manipulation}
#sphere-view[data-sphere-shell] .sph-agent-thread ::selection{background:rgba(214,255,102,.35);color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-compose textarea{user-select:text;-webkit-user-select:text}

/* Every row in a run shares one grid: 20px icon column, 8px gap, text at 28px — bolt, magnifier, bubble or dot alike. */
#sphere-view[data-sphere-shell] .sph-agent-status,#sphere-view[data-sphere-shell] .sph-agent-group-head,#sphere-view[data-sphere-shell] .sph-agent-tool,#sphere-view[data-sphere-shell] .sph-agent-think summary{column-gap:8px}
#sphere-view[data-sphere-shell] .sph-agent-group-label,#sphere-view[data-sphere-shell] .sph-agent-think summary>span:not(.sph-agent-ico){padding-left:0}
#sphere-view[data-sphere-shell] .sph-agent-status .sph-agent-skills{padding-left:28px;flex-basis:100%}
#sphere-view[data-sphere-shell] .sph-agent-tool-note{padding-left:28px}
/* a pending tool row breathes until its result lands; the icon swaps with a small pop */
#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=pending] .sph-agent-tool-label{animation:sph-agent-breathe 1.1s ease-in-out infinite}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=done] .sph-agent-ico,#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=error] .sph-agent-ico{animation:sph-agent-pop .28s ease-out both}
@keyframes sph-agent-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sph-agent-pop{from{transform:scale(.6);opacity:.2}to{transform:none;opacity:1}}
/* streamed thinking: a caret blinks at the end of the growing text */
#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] .sph-agent-think-body p:last-of-type::after{content:"▍";margin-left:2px;color:#d6ff66;animation:sph-agent-caret 1s steps(2,start) infinite}
@keyframes sph-agent-caret{to{visibility:hidden}}
@media (prefers-reduced-motion: reduce){#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=pending] .sph-agent-tool-label,#sphere-view[data-sphere-shell] .sph-agent-tool[data-state=done] .sph-agent-ico,#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] .sph-agent-think-body p:last-of-type::after{animation:none}}

/* streaming reasoning title: a light sweep runs across the label while the model is still writing */
#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] summary .sph-agent-think-label{background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 35%,#fff 50%,rgba(255,255,255,.5) 65%,rgba(255,255,255,.5) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sph-agent-shimmer 1.6s linear infinite}
@keyframes sph-agent-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] summary .sph-agent-ico{color:#d6ff66}
@media (prefers-reduced-motion: reduce){#sphere-view[data-sphere-shell] .sph-agent-think[data-streaming=true] summary .sph-agent-think-label{animation:none;background:none;color:inherit}}

/* code window (Figma Page 17 · HTML Box Output): #131416 header bar, mono body */
#sphere-view[data-sphere-shell] .sph-agent-code{margin:8px 0 0;border:1px solid rgb(255 255 255 / 8%);border-radius:10px;overflow:hidden;background:#0f1012}
#sphere-view[data-sphere-shell] .sph-agent-code summary{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;background:#131416;color:rgb(255 255 255 / 70%);font-size:12px;line-height:16px;font-weight:500;cursor:pointer;list-style:none}
#sphere-view[data-sphere-shell] .sph-agent-code summary::-webkit-details-marker{display:none}
#sphere-view[data-sphere-shell] .sph-agent-code summary .sph-agent-chevron{width:16px;flex:0 0 16px;transition:transform .15s}
#sphere-view[data-sphere-shell] .sph-agent-code[open] summary .sph-agent-chevron{transform:rotate(180deg)}
#sphere-view[data-sphere-shell] .sph-agent-code-copy{margin-left:auto;height:20px;padding:0 8px;border:1px solid rgb(255 255 255 / 10%);border-radius:6px;background:rgb(255 255 255 / 6%);color:#e6e6e6;font:500 11px/18px Inter,Pretendard,sans-serif;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-code-body{margin:0;padding:10px 12px;max-height:260px;overflow:auto;color:#d6ff66;font:400 12px/18px "JetBrains Mono",Consolas,"Cascadia Mono",monospace;white-space:pre;user-select:text}
/* skill connector panel (Figma Page 17 · 슬래시 명령어 제안): #23262A r20, 64px rows, sections 공식/내 스킬 */
#sphere-view[data-sphere-shell] .sph-agent-skillpanel{margin:0 0 8px;padding:12px;border-radius:16px;background:rgba(35,38,42,.96);border:1px solid rgb(255 255 255 / 6%);box-shadow:0 12px 24px rgb(0 0 0 / 35%);max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:2px}
#sphere-view[data-sphere-shell] .sph-agent-skillpanel-head{display:flex;align-items:center;gap:6px;height:28px;padding:0 4px;color:#fff;font:500 13px/16px Inter,Pretendard,sans-serif}
#sphere-view[data-sphere-shell] .sph-agent-skillpanel-head span:first-child{color:#d6ff66}
#sphere-view[data-sphere-shell] .sph-agent-skillrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px;border:0;border-radius:12px;background:transparent;color:#fff;text-align:left;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-skillrow:hover,#sphere-view[data-sphere-shell] .sph-agent-skillrow:focus-visible{background:rgb(255 255 255 / 6%)}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-tile{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:rgb(255 255 255 / 6%);color:#d6ff66;font-size:16px}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-text{display:flex;flex-direction:column;gap:2px;min-width:0}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-title{font:500 13px/18px Inter,Pretendard,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-title em{font-style:normal;color:#bfc2c6;font-weight:400}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-desc{color:#898a8b;font:400 12px/16px Inter,Pretendard,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sphere-view[data-sphere-shell] .sph-agent-skillpanel-empty,#sphere-view[data-sphere-shell] .sph-agent-skillpanel-more{padding:6px 10px;color:#898a8b;font:400 12px/16px Inter,Pretendard,sans-serif}
#sphere-view[data-sphere-shell] .sph-agent-skillpanel-add{align-self:flex-start;margin:6px 4px 0;height:28px;padding:0 12px;border:1px solid rgb(255 255 255 / 10%);border-radius:14px;background:rgb(255 255 255 / 5%);color:#fff;font:500 12px/16px Inter,Pretendard,sans-serif;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-skillform{display:flex;flex-direction:column;gap:8px}
#sphere-view[data-sphere-shell] .sph-agent-skillform label{display:flex;flex-direction:column;gap:4px;color:#bfc2c6;font:500 12px/16px Inter,Pretendard,sans-serif}
#sphere-view[data-sphere-shell] .sph-agent-skillform input,#sphere-view[data-sphere-shell] .sph-agent-skillform textarea{padding:6px 8px;border:1px solid rgb(255 255 255 / 10%);border-radius:8px;background:rgb(0 0 0 / 25%);color:#fff;font:400 13px/18px Inter,Pretendard,sans-serif}
#sphere-view[data-sphere-shell] .sph-agent-skillform-actions{display:flex;justify-content:flex-end;gap:6px}
#sphere-view[data-sphere-shell] .sph-agent-skillform-actions button{height:28px;padding:0 12px;border:1px solid rgb(255 255 255 / 10%);border-radius:14px;background:rgb(255 255 255 / 5%);color:#fff;font:500 12px/16px Inter,Pretendard,sans-serif;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-skillform-actions button[type=submit]{background:#d6ff66;color:#141414;border-color:transparent}
#sphere-view[data-sphere-shell] .sph-agent-skillpanel[hidden]{display:none}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-tool=skill]{flex-wrap:nowrap}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-tool=skill] .sph-agent-tool-label{flex:0 0 auto}
#sphere-view[data-sphere-shell] .sph-agent-tool[data-tool=skill] .sph-agent-tool-arg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-del{margin-left:auto;flex:0 0 auto;padding:2px 8px;border-radius:10px;color:#898a8b;font:500 11px/16px Inter,Pretendard,sans-serif}
#sphere-view[data-sphere-shell] .sph-agent-skillrow-del:hover{background:rgb(255 120 100 / 15%);color:#ffb4a8}

/* folded trace: one line stands in for skills/tools/thinking after a run is done (Figma Page 17 · Krea reasoning trace) */
#sphere-view[data-sphere-shell] .sph-agent-trace{display:flex;align-items:center;column-gap:8px;width:100%;min-height:28px;padding:0;border:0;background:none;color:rgb(255 255 255 / 50%);font:inherit;font-size:14px;line-height:20px;font-weight:500;text-align:left;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-trace .sph-agent-chevron{margin-left:auto;transition:transform .15s}
#sphere-view[data-sphere-shell] .sph-agent-plan:not([data-collapsed=true]) .sph-agent-trace .sph-agent-chevron,#sphere-view[data-sphere-shell] .sph-agent-plan-past:not([data-collapsed=true]) .sph-agent-trace .sph-agent-chevron{transform:rotate(180deg)}
#sphere-view[data-sphere-shell] .sph-agent-trace:hover .sph-agent-trace-label{color:#fff}
/* trace wrapper: one height transition for status · groups · footer (grid rows 1fr → 0fr), fading as it closes */
#sphere-view[data-sphere-shell] .sph-agent-tracebody{display:grid;grid-template-rows:1fr;transition:grid-template-rows .36s cubic-bezier(.2,.7,.2,1),margin-top .36s cubic-bezier(.2,.7,.2,1)}
#sphere-view[data-sphere-shell] .sph-agent-tracebody-in{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden;transition:opacity .22s ease,transform .36s cubic-bezier(.2,.7,.2,1)}
#sphere-view[data-sphere-shell] .sph-agent-tracebody[data-collapsed=true]{grid-template-rows:0fr;margin-top:-8px;pointer-events:none}
#sphere-view[data-sphere-shell] .sph-agent-tracebody[data-collapsed=true] .sph-agent-tracebody-in{opacity:0;transform:translateY(-4px)}
#sphere-view[data-sphere-shell] .sph-agent-trace[aria-expanded=false] .sph-agent-chevron{transform:rotate(-90deg)}
@media (prefers-reduced-motion: reduce){#sphere-view[data-sphere-shell] .sph-agent-tracebody,#sphere-view[data-sphere-shell] .sph-agent-tracebody-in,#sphere-view[data-sphere-shell] .sph-agent-group-bodywrap{transition:none}}
/* 승인 후 적용 keeps its dark text against the lime fill (the thread's inherit rule is more specific than a class alone) */
#sphere-view[data-sphere-shell] .sph-agent-thread button.sph-agent-apply-button{color:#141414}
#sphere-view[data-sphere-shell] .sph-agent-thread button.sph-agent-apply-button:disabled{color:rgb(255 255 255 / 40%)}

/* 38번째 (2026-09-15) · @멘션 칩 · 작업 중 타이머 · 태그 폼 */
#sphere-view[data-sphere-shell] .sph-agent-mentions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#sphere-view[data-sphere-shell] .sph-agent-mention{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgb(255 255 255 / 8%);border:1px solid rgb(255 255 255 / 10%);font-size:11px;line-height:16px;color:rgb(255 255 255 / 70%)}
#sphere-view[data-sphere-shell] .sph-agent-mention[data-kind=person]{color:#dbe7ff}
#sphere-view[data-sphere-shell] .sph-agent-live{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 4px;font-size:12px;line-height:16px;color:rgb(255 255 255 / 55%)}
#sphere-view[data-sphere-shell] .sph-agent-live time{font-variant-numeric:tabular-nums;color:rgb(255 255 255 / 80%)}
#sphere-view[data-sphere-shell] .sph-agent-live-meta{margin-left:auto;color:rgb(255 255 255 / 35%)}
#sphere-view[data-sphere-shell] .sph-agent-mentionpanel .sph-agent-skillrow-tile{font-size:14px}
#sphere-view[data-sphere-shell] .sph-agent-compose-tools #sph-agent-tag{appearance:none;border:1px solid rgb(255 255 255 / 12%);background:transparent;color:rgb(255 255 255 / 70%);border-radius:999px;padding:0 10px;height:28px;font:inherit;font-size:12px;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-compose-tools #sph-agent-tag:hover{background:rgb(255 255 255 / 8%)}

/* 60번째 (2026-09-16) · 채팅 스레드 바 「새 채팅」 「이전 채팅」 + 이전 채팅 목록. 크롬은 무채색. */
#sphere-view[data-sphere-shell] .sph-agent-threadbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px 0}
#sphere-view[data-sphere-shell] .sph-agent-threadbtn{appearance:none;border:1px solid rgb(255 255 255 / 12%);background:transparent;color:rgb(255 255 255 / 70%);border-radius:999px;padding:0 12px;height:28px;font:inherit;font-size:12px;line-height:26px;cursor:pointer}
#sphere-view[data-sphere-shell] .sph-agent-threadbtn:hover,#sphere-view[data-sphere-shell] .sph-agent-threadbtn[aria-expanded=true]{background:rgb(255 255 255 / 8%);color:#fff}
#sphere-view[data-sphere-shell] .sph-agent-historypanel{margin:8px 16px 0;flex:0 0 auto;max-height:320px;position:relative;z-index:2}
#sphere-view[data-sphere-shell] .sph-agent-historyrow{min-height:44px;padding:4px 6px}
#sphere-view[data-sphere-shell] .sph-agent-historynote{padding:8px 6px;color:rgb(255 255 255 / 50%);font-size:12px;line-height:16px}
#sphere-view[data-sphere-shell] .sph-agent-historyrow .sph-agent-skillrow-tile{width:28px;height:28px;flex:0 0 28px;border-radius:6px;color:rgb(255 255 255 / 60%);font-size:11px}
#sphere-view[data-sphere-shell] .sph-agent-historyrow[aria-selected=true] .sph-agent-skillrow-tile{color:#d6ff66}
#sphere-view[data-sphere-shell] .sph-agent-historybody{display:flex;flex-direction:column;gap:2px;min-width:0}
#sphere-view[data-sphere-shell] .sph-agent-historytitle{font-size:13px;line-height:18px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sphere-view[data-sphere-shell] .sph-agent-historybody small{font-size:11px;line-height:14px;color:rgb(255 255 255 / 45%)}

/* 62번째 (2026-09-16) · 첨부(참고 이미지 · 문서): 컴포저 칩 · 사용자 말풍선 칩. 크롬 무채색. */
#sphere-view[data-sphere-shell] .sph-agent-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#sphere-view[data-sphere-shell] .sph-agent-attachments-pending{margin:6px 0 0}
#sphere-view[data-sphere-shell] .sph-agent-attachment{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 8px 3px 3px;border-radius:10px;background:rgb(255 255 255 / 6%);border:1px solid rgb(255 255 255 / 8%);font-size:11px;line-height:16px;color:rgb(255 255 255 / 75%)}
#sphere-view[data-sphere-shell] .sph-agent-attachment img{width:36px;height:36px;border-radius:7px;object-fit:cover;display:block;background:#111}
#sphere-view[data-sphere-shell] .sph-agent-attachment-ico{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:7px;background:rgb(255 255 255 / 6%);color:rgb(255 255 255 / 55%);font-size:14px}
#sphere-view[data-sphere-shell] .sph-agent-attachment-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sphere-view[data-sphere-shell] .sph-agent-attachment-remove{appearance:none;border:0;background:transparent;color:rgb(255 255 255 / 55%);font-size:14px;line-height:1;padding:0 2px;cursor:pointer;min-height:0}
#sphere-view[data-sphere-shell] .sph-agent-attachment-remove:hover{color:#fff;background:transparent}
#sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-attach[data-count]:not([data-count="0"])::after{content:" " attr(data-count);color:#d6ff66}
#sphere-view[data-sphere-shell] .sph-agent-compose[data-drop=true]{outline:1px dashed rgb(255 255 255 / 35%);outline-offset:-4px}
#sphere-view[data-sphere-shell] .sph-agent-msg-user .sph-agent-attachments{justify-content:flex-end}