:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111314;
  color: #e8ebeb;
  font-synthesis: none;

  --thinking: #92bcbf;
  --completed: #8dab96;
  --waiting: #c5b182;
  --error: #d29191;
  --idle: #6d7a7e;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid #88b5b8; outline-offset: 3px; }
main { max-width: 1220px; margin: auto; padding: 36px 32px 24px; }

.brandline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.brandline img { width: 22px; height: 22px; }
.brandline span { margin-left: auto; color: #747c7e; font-size: 10px; font-weight: 450; }
h1 { margin: 29px 0 10px; font-size: 29px; font-weight: 570; line-height: 1.25; }
.page-header p { margin: 0; max-width: 710px; color: #939da0; font-size: 13px; line-height: 1.7; }

.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 17px 0; margin: 27px 0 0; border-block: 1px solid #282d2e; }
.segments { display: flex; padding: 3px; gap: 2px; border-radius: 6px; background: #1d2224; }
.segments button { background: transparent; border: 0; border-radius: 4px; color: #929da0; padding: 6px 17px; font-size: 12px; }
.segments button[aria-pressed=true] { background: #333b3d; color: #e4ebeb; }
.controls label { display: flex; align-items: center; gap: 7px; color: #a5afb0; font-size: 11px; cursor: pointer; }
input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: #85b9b9; cursor: pointer; }

.hint { margin: 14px 0 30px; color: #7f8b8f; font-size: 11px; line-height: 1.6; }

.options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.option { min-width: 0; }
.option-head { display: flex; align-items: center; gap: 9px; min-height: 23px; }
.number { color: #667377; font-size: 10px; }
.option-head h2 { font-size: 16px; font-weight: 550; margin: 0; }
.recommended { margin-left: auto; font-size: 10px; color: #93bfba; }
.description { color: #8f9b9f; font-size: 12px; line-height: 1.6; margin: 8px 0 20px; min-height: 58px; }

.sidebar { display: flex; flex-direction: column; height: 620px; border: 1px solid #353c3e; border-radius: 8px; background: #181c1e; overflow: hidden; transition: filter 180ms ease; }
body[data-squint=on] .sidebar { filter: blur(3.2px) saturate(1.15); }

.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 16px 15px 13px; }
.product { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.product img { width: 23px; height: 23px; }
.add-project { width: 30px; height: 30px; margin-left: auto; display: grid; place-items: center; border: 1px solid #343d40; border-radius: 5px; background: transparent; color: #a4b1b4; }
.add-project:hover { background: #ffffff06; color: #d4dedf; }

.icon { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; mask: var(--icon) center/contain no-repeat; -webkit-mask: var(--icon) center/contain no-repeat; }

.view-tabs { display: flex; margin: 0 15px 13px; border-bottom: 1px solid #323a3c; }
.view-tabs button { flex: 1; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; color: #77858a; background: transparent; font-size: 10px; }
.view-tabs button .icon { width: 12px; height: 12px; }
.view-tabs button[aria-pressed=true] { color: #c2d3d4; border-bottom-color: #8eb0b1; }

.sidebar-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 12px; scrollbar-width: thin; scrollbar-color: #465457 transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #465457; border-radius: 4px; }
.list-heading { display: flex; justify-content: space-between; margin: 0 6px 10px; font-size: 10px; color: #718085; line-height: 18px; }

.thread { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 25px; align-items: center; margin: 3px 0; padding: 8px 6px 8px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; transition: background-color 140ms ease; }
.thread:hover { background: #ffffff04; }
.thread.selected { background: #22282a; }
.thread.selected:before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: #8f9ea1; }

.row-content { min-width: 0; }
.project { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 22px; margin: 0 1px 1px 0; color: #d9dfdf; }
.project > .icon { width: 13px; height: 13px; color: #b3a17b; }
.project-name { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; font-weight: 680; line-height: 22px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.selected .project { color: #eef2f1; }
.org { margin-left: auto; padding-left: 7px; font-size: 8px; line-height: 14px; color: #627176; font-weight: 400; white-space: nowrap; }

.identity { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 4px; align-items: center; min-height: 20px; }
.provider { position: relative; display: grid; place-items: center; width: 18px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #a0acab; }
.provider .icon { width: 12px; height: 12px; }
.provider.claude { color: #bc8774; }
.provider.claude .icon { width: 13px; height: 13px; }
.provider:hover { background: #ffffff09; }

.title { border: 0; padding: 0; min-width: 0; background: transparent; text-align: left; color: #8e9b9f; font-size: 11px; line-height: 20px; font-weight: 430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.selected .title { color: #a3b1b3; }

.more { display: grid; place-items: center; height: 28px; width: 25px; border: 0; padding: 0; border-radius: 4px; background: transparent; color: #748287; opacity: 0; transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease; }
.more .icon { width: 13px; height: 13px; }
.thread:hover .more, .more:focus-visible { opacity: 1; }
.more:hover { background: #ffffff07; color: #bdc8ca; }

.status { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; min-height: 15px; line-height: 15px; font-size: 9px; color: #8fa0a3; white-space: nowrap; }
.status.thinking { color: var(--thinking); }
.status.completed { color: var(--completed); }
.status.waiting { color: var(--waiting); }
.status.error { color: var(--error); }
.time { color: #76878b; font-size: 9px; }

.dots { display: flex; gap: 2px; align-items: center; }
.dots i { width: 2px; height: 2px; background: currentColor; border-radius: 50%; animation: quietDots 2.8s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes quietDots { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
body[data-motion=off] .dots i { animation: none; opacity: .65; }

.group { margin-top: 14px; }
.group:first-child { margin-top: 0; }
.group-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 5px 6px; width: 100%; min-width: 0; border: 0; color: #d9dfdf; background: transparent; text-align: left; }
.group-toggle .icon { color: #a6a089; width: 12px; height: 12px; }
.group-name { font-size: 13px; font-weight: 680; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.group-toggle .count { margin-left: auto; color: #6f7e82; font-size: 10px; }
.group-toggle[aria-expanded=false] .chevron { transform: rotate(-90deg); }
.group .thread { margin-left: 12px; padding-block: 6px; }

.user { display: flex; align-items: center; gap: 8px; padding: 13px 15px; min-height: 57px; border-top: 1px solid #30383b; font-size: 12px; }
.avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #2c3b3d; color: #b8d0d1; font-size: 10px; }
.user small { color: #839a9d; margin-left: auto; font-size: 10px; }
.user > span:last-child { display: flex; align-items: center; flex: 1; min-width: 0; }

.tradeoff { color: #8f9b9f; font-size: 12px; line-height: 1.7; margin: 17px 0 0; }
.tradeoff strong { color: #c4d1d2; font-weight: 500; }

/* ---- A: метка на провайдере ---- */
.variant-a .provider:after {
  content: ''; position: absolute; right: -1px; bottom: 1px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid #181c1e; background: var(--idle);
}
.variant-a .thread.selected .provider:after { border-color: #22282a; }
.variant-a .thread[data-state=thinking] .provider:after { background: var(--thinking); animation: breathe 2.6s ease-in-out infinite; }
.variant-a .thread[data-state=waiting] .provider:after { background: var(--waiting); }
.variant-a .thread[data-state=error] .provider:after { background: var(--error); }
.variant-a .thread[data-state=completed] .provider:after { background: var(--completed); }
.variant-a .thread[data-state=idle] .provider:after { display: none; }
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
body[data-motion=off] .variant-a .provider:after { animation: none !important; }
.variant-a .status span:first-child { color: #8b989c; }
.variant-a .status.waiting span:first-child, .variant-a .status.error span:first-child { color: inherit; }

/* ---- B: цветная рельса состояния ---- */
.variant-b .thread:before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: transparent; }
.variant-b .thread[data-state=thinking]:before { background: var(--thinking); }
.variant-b .thread[data-state=waiting]:before { background: var(--waiting); }
.variant-b .thread[data-state=error]:before { background: var(--error); }
.variant-b .thread[data-state=completed]:before { background: #4c5b57; }
.variant-b .thread.selected { background: #22282a; }
.variant-b .thread.selected:after { content: ''; position: absolute; inset: 0; border: 1px solid #3f4749; border-radius: 5px; pointer-events: none; }
.variant-b .status span:first-child { color: #8b989c; }
.variant-b .status.waiting span:first-child, .variant-b .status.error span:first-child { color: inherit; }

/* ---- C: статус-чип ---- */
.variant-c .status { gap: 0; }
.variant-c .status span:first-child {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: #ffffff0a; color: #93a0a4; font-size: 9px; line-height: 14px;
}
.variant-c .status.thinking span:first-child { background: rgba(146,188,191,.13); color: var(--thinking); }
.variant-c .status.waiting span:first-child { background: rgba(197,177,130,.14); color: var(--waiting); }
.variant-c .status.error span:first-child { background: rgba(210,145,145,.14); color: var(--error); }
.variant-c .status.completed span:first-child { background: rgba(141,171,150,.11); color: var(--completed); }
.variant-c .dots { margin-left: 5px; }
.variant-c .time { margin-left: 5px; }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #293033; padding-top: 19px; margin-top: 32px; color: #7d8b90; font-size: 11px; line-height: 1.6; }

#tooltip { position: fixed; z-index: 20; max-width: 260px; border: 1px solid #475054; border-radius: 5px; padding: 9px 12px; background: #252b2d; color: #dae3e4; font-size: 12px; line-height: 1.65; pointer-events: none; }
#tooltip small { display: block; color: #9caaad; font-size: 11px; }

@media(min-width:850px) and (max-width:1100px) { main { padding-inline:20px; } .options { gap:16px; } .org { display:none; } .description { min-height:76px; } .option-head { flex-wrap:wrap; } }
@media(max-width:849px) { main { padding:25px 18px; } h1 { font-size:26px; } .options { grid-template-columns:1fr; gap:36px; } .option { width:100%; max-width:390px; margin:auto; } .description { min-height:0; } .controls { gap:15px 18px; } .controls label { font-size:10px; } .brandline span { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }