:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111314;
  color: #e8ebeb;
  font-synthesis: none;
}
* { 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 30px; 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; }
.options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.option { min-width: 0; --selected: #213335; --selection-line: #8bbabd; }
.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: 39px; }
.sidebar { display: flex; flex-direction: column; height: 656px; border: 1px solid #353c3e; border-radius: 8px; background: #181c1e; overflow: hidden; }
.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: var(--selected); }
.thread.selected:before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--selection-line); border-radius: 1px; }
.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: 16px minmax(0,1fr); gap: 3px; align-items: center; min-height: 20px; }
.provider { display: grid; place-items: center; width: 16px; 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; }
.more .icon { width: 13px; height: 13px; }
.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: #92bcbf; }
.status.completed { color: #8dab96; }
.status.waiting { color: #c5b182; }
.status.error { color: #d29191; }
.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; }
.unread { display: none; }
.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; }
.variant-b { --selected: #2b2f31; --selection-line: #b6c0c0; }
.variant-b .sidebar { background: #1c1e20; border-color: #393d40; }
.variant-b .thread.selected { border-color: #43494c; }
.variant-b .thread.selected:before { display: none; }
.variant-b .view-tabs { border: 0; padding: 3px; background: #242729; border-radius: 5px; gap: 3px; }
.variant-b .view-tabs button { min-height: 26px; border: 0; margin: 0; border-radius: 3px; }
.variant-b .view-tabs button[aria-pressed=true] { background: #373c3f; color: #d5dddd; }
.variant-b .avatar { background: #35393d; color: #c0c8ce; }
.variant-b .thread { margin-block: 4px; }
.variant-c { --selected: #ffffff03; --selection-line: #93b1b0; }
.variant-c .sidebar { background: #15191a; }
.variant-c .thread { margin-block: 0; border-radius: 0; border-bottom-color: #ffffff06; padding-block: 10px; }
.variant-c .thread.selected:before { top: 14px; bottom: 14px; }
.variant-c .group .thread { border-bottom-color: transparent; padding-block: 7px; }
.variant-c .group { border-bottom: 1px solid #2b3335; padding-bottom: 10px; }
.variant-c .dots i { animation: none; opacity: .7; }
.variant-c .more { color: #647277; }
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; }
dialog { width: min(390px,calc(100% - 32px)); max-height: 80dvh; overflow: auto; padding: 32px 24px 24px; border: 1px solid #414c50; border-radius: 8px; background: #1c2224; color: #e5ebeb; }
dialog::backdrop { background: #0009; }
.close { position: absolute; right: 8px; top: 7px; width: 32px; height: 32px; border: 0; background: none; color: #aebcbf; font-size: 25px; }
dialog h2 { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
dialog p { color: #a3b2b6; font-size: 13px; line-height: 1.7; }
dialog .provider { width: 42px; height: 42px; margin: auto; }
dialog .provider .icon { width: 32px; height: 32px; }
.new-project label { display: block; font-size: 12px; margin-bottom: 10px; color: #a3b2b6; }
.new-project input { width: 100%; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid #5a6c73; color: #e4eeee; }
.submit { padding: 9px 15px; margin-top: 20px; border: 1px solid #4b6e73; border-radius: 5px; background: #2c4b50; color: #d4eaec; }
@media(min-width:850px) and (max-width:1100px) { main { padding-inline:20px; } .options { gap:16px; } .org { display:none; } .description { min-height:58px; } .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 { animation:none!important; transition:none!important; } }