/* ===== арт-дирекшн: тушь, скос, жёсткие тени ===== */
:root { background: #0d0f11; }
body { background: #0d0f11; }
h1 { font-weight: 850; }
.number { display: grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--ink); color: #10161a; font-weight: 900; font-size: 11px; }
.option-head { align-items: center; }
.options { gap: 30px; }
.segments button[aria-pressed=true] { background: var(--thinking); color: #0b2220; font-weight: 800; box-shadow: none; }
.reset { border-radius: 2px; }

.option { --ink: var(--thinking); --panel: #131a1c; }
.variant-b { --ink: #f1d96e; --panel: #191821; }
.variant-c { --ink: #ff4d6a; --panel: #161113; }

.sidebar { height: 600px; border-radius: 3px; border: 1px solid #3c4c4a; background: var(--panel); box-shadow: 4px 4px 0 #000; }

.sidebar-head { position: relative; isolation: isolate; overflow: hidden; min-height: 96px; padding: 14px 12px 13px; align-items: flex-end; border-bottom: 3px solid var(--ink); }
.sidebar-head::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('assets/zaraki.webp') 68% 40% / 185% auto no-repeat; filter: grayscale(1) brightness(3) contrast(1.25); opacity: .85; }
.sidebar-head::after { content: ''; position: absolute; z-index: -1; bottom: 0; left: -12px; width: 70%; height: 44px; background: var(--panel); transform: skewX(-13deg); border-right: 3px solid var(--ink); }
.variant-b .sidebar-head::before { filter: grayscale(1) brightness(3.3) sepia(.65) contrast(1.2); }
.variant-c .sidebar-head::before { filter: grayscale(1) brightness(2.6) contrast(1.4) sepia(.5) hue-rotate(310deg) saturate(2.2); }

.product { font-size: 22px; font-weight: 900; font-style: italic; line-height: 28px; gap: 6px; }
.product img { width: 23px; height: 23px; border: 1px solid #5d7370; border-radius: 3px; }
.add-project { width: 31px; height: 31px; border-radius: 2px; border: 1px solid #0e1416; background: var(--ink); color: #10201d; box-shadow: 3px 3px 0 #000; }
.add-project:hover { background: #fff; color: #10201d; }

.view-tabs { margin: 11px 11px 10px; padding: 0; gap: 2px; background: transparent; border-bottom: 1px solid #33413f; }
.view-tabs button { min-height: 27px; font-weight: 750; border-radius: 0; }
.view-tabs button[aria-pressed=true] { background: var(--ink); color: #10201d; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%,0 8px); }

.list-heading { color: #8ca29f; }
.thread { border-radius: 2px; margin: 4px 0; background: #1b2426; border: 1px solid #2a3735; }
.thread:hover { background: #24302f; }
.thread.selected { background: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 #05100e; }
.thread.selected::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: var(--panel); clip-path: polygon(100% 0,100% 100%,0 100%); z-index: 4; }
.thread.selected .project-name { color: #10201d; }
.thread.selected .project > .icon { color: #2f4a43; }
.thread.selected .title { color: #3c5d55; }
.thread.selected .org { color: #4d6f68; }
.thread.selected .provider { background: #ffffff2e; color: #24443c; }
.thread.selected .provider.claude { color: #7a4029; }
.thread.selected .status { color: #2b524a; }
.thread.selected .time { color: #44685f; }
.thread.selected .more { color: #35594f; }
.variant-b .thread.selected .project-name, .variant-b .thread.selected .provider { color: #241f0c; }
.variant-c .thread.selected .project-name { color: #22070c; }
.variant-c .thread.selected .title, .variant-c .thread.selected .status { color: #5e1421; }

.project-name { font-size: 12.5px; font-weight: 820; }
.title { font-size: 11px; }
.provider { border-radius: 2px; }
.status.error .label { border: 1px solid currentColor; padding: 0 4px; line-height: 12px; }
.thread[data-state=thinking]:not(.selected) { border-left: 2px solid var(--thinking); }
.thread[data-state=waiting]:not(.selected) { border-left: 2px solid var(--waiting); }
.thread[data-state=error]:not(.selected) { border-left: 2px solid var(--error); }

.group-toggle { padding: 6px 6px 7px; border-bottom: 1px solid #364744; }
.group-name { font-weight: 820; }
.group .thread { background: transparent; border-color: transparent; }
.group .thread.selected { background: var(--ink); }

.user { border-top: 1px solid #47605b; background: #17201f; }
.avatar { border-radius: 3px; border: 1px solid var(--ink); background: #1e2b29; color: #dff4ef; }
.user small { border: 1px solid var(--ink); padding: 2px 7px; border-radius: 1px; color: var(--ink); }

/* ===== моя логика состояний поверх арта ===== */
.thread.unseen { border-color: var(--completed); box-shadow: 3px 3px 0 rgba(110,231,135,.85); }
.thread.unseen .project-name { color: #fff; }
.thread.unseen .status.completed { color: var(--completed); }
.thread.unseen .status.completed .label { background: var(--completed); color: #06130b; padding: 1px 5px; font-weight: 900; animation: unseenBlink 2.2s ease-in-out infinite; }
.thread.unseen .files { background: var(--completed); color: #06130b; }
.variant-c .thread.unseen { box-shadow: 3px 3px 0 rgba(110,231,135,.75); }