@font-face {
  font-family: "VT323";
  src: url("/static/fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --chrome-bg: #050505;
  --chrome-fg: #ff8fc7;
  --accent: #ff8fc7;
  --paper: #111111;
  --muted: rgba(255, 143, 199, 0.62);
  --soft-line: rgba(255, 143, 199, 0.28);
  --danger: #ff5d5d;
  --ok: #93ff74;
  --warn: #ffd75a;
  --body-font: "VT323", ui-monospace, monospace;
  --chrome-font: "VT323", ui-monospace, monospace;
  --ui-scale: 1;
  --menu-h: calc(22px * var(--ui-scale));
  --status-h: calc(27px * var(--ui-scale));
  --window-title-h: calc(22px * var(--ui-scale));
  --control-h: calc(27px * var(--ui-scale));
  --base-text: calc(20px * var(--ui-scale));
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body,
button,
input,
textarea {
  font-family: var(--body-font);
}

body {
  overflow: hidden;
  background: #000;
  color: var(--chrome-fg);
  font-size: var(--base-text);
}

button,
input,
textarea {
  border-radius: 0;
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: var(--menu-h) 1fr var(--status-h);
}

.menu-bar {
  height: var(--menu-h);
  display: flex;
  align-items: center;
  gap: calc(18px * var(--ui-scale));
  padding: 0 12px;
  border-bottom: 1px solid var(--chrome-fg);
  background: var(--chrome-bg);
  font-family: var(--chrome-font);
  font-size: calc(18px * var(--ui-scale));
  line-height: 1;
}

.mark {
  width: calc(22px * var(--ui-scale));
  height: var(--menu-h);
  display: grid;
  place-items: center;
  border: 0;
  color: var(--accent);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1;
  overflow: hidden;
  margin-right: calc(-8px * var(--ui-scale));
  text-transform: lowercase;
}

.mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
}

.app-title {
  width: auto;
  min-width: 44px;
  max-width: 32vw;
  height: var(--menu-h);
  display: flex;
  align-items: center;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-tab {
  width: auto;
  height: var(--menu-h);
  border: 0;
  background: transparent;
  color: var(--chrome-fg);
  font-family: var(--chrome-font);
  font-size: calc(18px * var(--ui-scale));
  line-height: 1;
  padding: 0 3px;
  margin: 0 -3px;
}

.menu-tab:hover,
.menu-tab.active {
  background: var(--chrome-fg);
  color: var(--chrome-bg);
}

.menu-spacer {
  flex: 1;
}

.status-line {
  max-width: 22vw;
  overflow: hidden;
  color: var(--ok);
  font-family: var(--chrome-font);
  font-size: calc(16px * var(--ui-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-line {
  color: var(--chrome-fg);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dropdown {
  position: fixed;
  top: var(--menu-h);
  z-index: 30;
  min-width: 200px;
  border: 1px solid var(--chrome-fg);
  background: var(--chrome-bg);
  box-shadow: 2px 2px 0 var(--chrome-fg);
  padding: 2px 0;
  font-size: calc(16px * var(--ui-scale));
}

.dropdown.file {
  left: calc(42px * var(--ui-scale));
  width: 200px;
}

.dropdown.special {
  left: calc(90px * var(--ui-scale));
  width: 214px;
}

.menu-row,
.swatch-row {
  width: 100%;
  min-height: calc(22px * var(--ui-scale));
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 2px 14px 2px 18px;
  color: var(--chrome-fg);
  font-size: calc(16px * var(--ui-scale));
  text-align: left;
  white-space: nowrap;
}

.menu-row:hover,
.swatch-row:hover {
  background: var(--chrome-fg);
  color: var(--chrome-bg);
}

.menu-row.disabled,
.menu-row:disabled {
  color: var(--muted);
  pointer-events: none;
}

.menu-sep {
  border-top: 1px solid var(--chrome-fg);
  margin: 2px 0;
}

.menu-label {
  padding: 9px 10px 4px;
  color: var(--accent);
  font-family: var(--chrome-font);
  font-size: calc(18px * var(--ui-scale));
}

.swatch {
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  background: var(--swatch);
}

.color-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.color-pick {
  min-width: 280px;
  max-width: min(420px, calc(100vw - 28px));
  border: 1px solid var(--chrome-fg);
  background: #000;
  color: var(--chrome-fg);
  padding: 14px 16px;
  font-family: var(--chrome-font);
}

.color-pick-title {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: calc(14px * var(--ui-scale));
  letter-spacing: 0.04em;
}

.color-pick-subtitle {
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(11px * var(--ui-scale));
  line-height: 1.35;
}

.color-pick-row,
.choice-row,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-pick-row {
  margin-bottom: 14px;
}

.choice-row {
  align-items: stretch;
}

.choice-row .menu-row,
.dialog-actions .menu-row {
  width: auto;
  border: 1px solid var(--chrome-fg);
  background: #000;
}

.dialog-actions {
  margin-top: 14px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border: 1px solid var(--chrome-fg);
  border-radius: 50%;
  background: var(--accent);
  padding: 0;
}

.color-swatch:hover {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.color-swatch-wheel {
  background:
    radial-gradient(circle at center, #fff 0%, transparent 55%),
    conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.desktop {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background-color: #000;
  background-image: var(--desktop-bg-image);
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  user-select: none;
}

.desktop.drop-ready {
  outline: 2px solid var(--accent);
  outline-offset: -8px;
}

.icons,
.window-layer {
  position: absolute;
  inset: 0;
}

.icons {
  z-index: 2;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  width: calc(80px * var(--ui-scale));
  min-height: calc(84px * var(--ui-scale));
  display: grid;
  grid-template-rows: calc(56px * var(--ui-scale)) calc(22px * var(--ui-scale));
  justify-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--chrome-fg);
  pointer-events: auto;
  touch-action: none;
}

.desktop-icon:hover .desktop-icon-label,
.desktop-icon.selected .desktop-icon-label {
  background: var(--chrome-fg);
  color: var(--chrome-bg);
}

.icon-art {
  position: relative;
  width: calc(42px * var(--ui-scale));
  height: calc(38px * var(--ui-scale));
  display: grid;
  place-items: center;
  color: var(--accent);
  image-rendering: pixelated;
}

.icon-art.pixel-grid {
  width: calc(56px * var(--ui-scale));
  height: calc(56px * var(--ui-scale));
}

.icon-art.pixel-grid svg,
.file-glyph.pixel-grid svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-art::before,
.icon-art::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 2px solid currentColor;
}

.icon-art.pixel-grid::before,
.icon-art.pixel-grid::after {
  content: none;
}

.pixel-icon.files::before,
.pixel-icon.yall::before,
.pixel-icon.chat::before,
.pixel-icon.build::before,
.pixel-icon.website::before {
  left: 5px;
  right: 5px;
  bottom: 2px;
  height: 28px;
  background: #000;
}

.pixel-icon.files::after,
.pixel-icon.yall::after,
.pixel-icon.chat::after,
.pixel-icon.build::after,
.pixel-icon.website::after {
  left: 5px;
  top: 3px;
  width: 18px;
  height: 10px;
  border-bottom: 0;
  background: #000;
}

.pixel-icon.yall::before {
  background: linear-gradient(#000 0 8px, currentColor 8px 10px, #000 10px 18px, currentColor 18px 20px, #000 20px);
}

.pixel-icon.chat::before {
  border-radius: 0;
}

.pixel-icon.chat::after {
  width: 10px;
  height: 10px;
  left: 27px;
  top: 24px;
  border-top: 0;
  border-left: 0;
}

.pixel-icon.build::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.pixel-icon.build::after {
  width: 24px;
  height: 24px;
  left: 10px;
  top: 8px;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) center/22px 3px no-repeat,
    linear-gradient(currentColor, currentColor) center/3px 22px no-repeat;
}

.pixel-icon.website::before {
  background:
    linear-gradient(currentColor, currentColor) 0 7px/100% 2px no-repeat,
    #000;
}

.desktop-icon-label {
  max-width: calc(80px * var(--ui-scale));
  display: inline-block;
  padding: 1px 3px;
  overflow: hidden;
  font-family: var(--chrome-font);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-layer {
  z-index: 3;
  pointer-events: none;
}

.window {
  position: absolute;
  min-width: calc(280px * var(--ui-scale));
  min-height: calc(180px * var(--ui-scale));
  display: grid;
  grid-template-rows: var(--window-title-h) minmax(0, 1fr);
  border: 1px solid var(--chrome-fg);
  background: var(--chrome-bg);
  box-shadow: 3px 3px 0 var(--chrome-fg);
  resize: both;
  overflow: hidden;
  pointer-events: auto;
}

.window-title {
  height: var(--window-title-h);
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
  border-bottom: 1px solid var(--chrome-fg);
  padding: 2px 6px;
  color: var(--accent);
  font-family: var(--chrome-font);
  font-size: calc(16px * var(--ui-scale));
  cursor: move;
  touch-action: none;
  background: repeating-linear-gradient(0deg, var(--chrome-fg) 0 1px, #000 1px 3px);
}

.window-name {
  min-width: 0;
  padding: 0 8px;
  background: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-close {
  width: calc(11px * var(--ui-scale));
  height: calc(11px * var(--ui-scale));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--chrome-fg);
  background: #000;
  color: var(--chrome-fg);
  padding: 0;
  font-size: calc(12px * var(--ui-scale));
  line-height: 1;
}

.window-close:hover {
  background: var(--chrome-fg);
  color: #000;
}

.window-title .title-spacer {
  flex: 1;
}

.window-menu-button {
  height: calc(16px * var(--ui-scale));
  min-width: calc(20px * var(--ui-scale));
  flex: 0 0 auto;
  border: 1px solid var(--chrome-fg);
  background: #000;
  color: var(--chrome-fg);
  padding: 0 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 1px;
  line-height: 1;
}

.window-menu-button:hover,
.window-menu-button.active {
  background: var(--chrome-fg);
  color: #000;
}

.window-dropdown {
  position: absolute;
  top: var(--window-title-h);
  left: calc(25px * var(--ui-scale));
  z-index: 8;
  min-width: calc(190px * var(--ui-scale));
  border: 1px solid var(--chrome-fg);
  background: #000;
  box-shadow: 2px 2px 0 var(--chrome-fg);
  padding: 2px 0;
  font-family: var(--chrome-font);
}

.window-title .small-button {
  height: calc(16px * var(--ui-scale));
  min-width: calc(20px * var(--ui-scale));
  flex: 0 0 auto;
  background: #000;
  padding: 0 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 1px;
  line-height: 1;
}

.window-body {
  min-height: 0;
  overflow: hidden;
}

.file-view {
  height: 100%;
  min-height: 0;
}

.toolbar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 6px;
}

.tool-button,
.small-button,
.send-button {
  height: var(--control-h);
  min-width: 28px;
  border: 1px solid var(--chrome-fg);
  background: var(--paper);
  color: var(--chrome-fg);
  padding: 0 8px;
  font-size: calc(18px * var(--ui-scale));
}

.tool-button:hover,
.small-button:hover,
.send-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.path-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(18px * var(--ui-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(104px * var(--ui-scale)), 1fr));
  grid-auto-rows: calc(94px * var(--ui-scale));
  gap: calc(8px * var(--ui-scale));
  overflow: auto;
  padding: 8px;
}

.file-grid.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
}

.file-item {
  display: grid;
  grid-template-rows: calc(42px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(16px * var(--ui-scale));
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--chrome-fg);
  padding: 6px;
}

.file-item:hover,
.file-item.selected {
  border-color: var(--accent);
}

.file-glyph {
  position: relative;
  width: calc(44px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  display: grid;
  place-items: center;
  color: var(--accent);
}

.file-glyph::before,
.file-glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 2px solid currentColor;
  background: #000;
}

.file-glyph.pixel-grid::before,
.file-glyph.pixel-grid::after {
  content: none;
}

.file-glyph.folder::before {
  left: 2px;
  right: 2px;
  bottom: 1px;
  height: 24px;
}

.file-glyph.folder::after {
  left: 2px;
  top: 3px;
  width: 18px;
  height: 9px;
  border-bottom: 0;
}

.file-glyph.file::before,
.file-glyph.text::before {
  inset: 2px 7px 1px 7px;
}

.file-glyph.file::after,
.file-glyph.text::after {
  right: 7px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-left: 0;
  border-bottom: 0;
}

.file-glyph.text {
  background:
    linear-gradient(currentColor, currentColor) center 14px/18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 20px/18px 2px no-repeat;
}

.file-glyph.pixel-grid.text {
  background: none;
}

.file-name,
.file-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name {
  font-size: calc(18px * var(--ui-scale));
}

.file-meta {
  color: var(--muted);
  font-size: calc(15px * var(--ui-scale));
}

.editor {
  height: 100%;
}

.editor textarea,
.chat-input textarea,
.note-input,
.login-panel input,
.project-input,
.task-input {
  width: 100%;
  border: 1px solid var(--chrome-fg);
  background: #0c0c0c;
  color: var(--chrome-fg);
  outline: 0;
}

.editor textarea {
  min-height: 0;
  resize: none;
  border: 0;
  padding: 10px;
  font-size: calc(16px * var(--ui-scale));
}

.markdown-view {
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 30px;
  color: var(--chrome-fg);
  font-size: calc(21px * var(--ui-scale));
  line-height: 1.5;
}

.markdown-view h1,
.markdown-view h2,
.markdown-view h3 {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--chrome-font);
  font-weight: 400;
  line-height: 1;
}

.markdown-view h1 {
  font-size: calc(34px * var(--ui-scale));
}

.markdown-view h2 {
  font-size: calc(26px * var(--ui-scale));
}

.markdown-view h3 {
  font-size: calc(22px * var(--ui-scale));
}

.markdown-view p,
.markdown-view ul {
  margin: 0 0 12px;
}

.markdown-view code {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0 4px;
  color: var(--ok);
}

.split {
  height: 100%;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 0;
}

.thread-list,
.project-list {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.36);
}

.list-head {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 6px;
}

.thread-button,
.project-button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--chrome-fg);
  padding: 6px 8px;
  font-size: calc(18px * var(--ui-scale));
  text-align: left;
  white-space: pre-line;
}

.thread-button:hover,
.thread-button.active,
.project-button:hover,
.project-button.active {
  background: rgba(255, 255, 255, 0.09);
  color: var(--accent);
}

.chat-pane {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 84px;
}

.messages {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.messages.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
  background: rgba(255, 143, 199, 0.08);
}

.bubble {
  max-width: 76%;
  border: 1px solid var(--chrome-fg);
  background: #101010;
  margin-bottom: 10px;
  padding: 8px;
  white-space: pre-wrap;
}

.bubble.user {
  margin-left: auto;
  border-color: var(--accent);
}

.bubble.assistant {
  margin-right: auto;
}

.pending-line {
  width: fit-content;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 8px;
  font-size: calc(18px * var(--ui-scale));
}

.bubble-meta {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: calc(16px * var(--ui-scale));
}

.chat-input {
  display: grid;
  grid-template-columns: 1fr 48px 74px;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  padding: 6px;
}

.chat-input textarea {
  resize: none;
  padding: 7px;
  font-size: calc(18px * var(--ui-scale));
}

.build-input {
  grid-template-columns: 1fr 74px;
}

.build-composer-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.build-composer-wrap textarea {
  position: relative;
  z-index: 1;
  height: 100%;
  background: transparent;
}

.build-ghost {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  color: var(--muted);
  font-size: calc(18px * var(--ui-scale));
  line-height: 1.15;
  white-space: pre-wrap;
  overflow: hidden;
}

.build-ghost .caret {
  display: inline-block;
  width: 0.1em;
  height: 0.9em;
  margin-left: 0.1em;
  background: rgba(255, 143, 199, 0.72);
  vertical-align: -0.08em;
  animation: blink 1s steps(1) infinite;
}

.build-ghost .enter-glyph {
  color: var(--accent);
}

.empty-build {
  width: fit-content;
  border: 1px solid rgba(255, 143, 199, 0.55);
  color: var(--muted);
  padding: 8px;
  font-size: calc(18px * var(--ui-scale));
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.yall-board {
  height: 100%;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
}

.yall-board.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
}

.tree-head {
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(130px, 0.85fr) minmax(82px, 0.35fr) calc(116px * var(--ui-scale));
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--soft-line);
  padding: 0 8px;
  color: var(--muted);
  font-size: calc(14px * var(--ui-scale));
  letter-spacing: 0;
  text-transform: lowercase;
}

.tree-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yall-tree {
  min-height: 0;
  overflow: auto;
  padding: 6px 0 22px;
}

.task-shell {
  min-width: 0;
}

.task-row {
  --depth: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(130px, 0.85fr) minmax(82px, 0.35fr) calc(116px * var(--ui-scale));
  align-items: stretch;
  min-height: calc(34px * var(--ui-scale));
  border-bottom: 1px solid var(--soft-line);
  color: var(--chrome-fg);
}

.task-row.root-row {
  min-height: calc(39px * var(--ui-scale));
  border-top: 1px solid var(--chrome-fg);
  border-bottom-color: var(--chrome-fg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.task-row.root-row + .task-row.root-row {
  border-top: 0;
}

.root-row.status-red {
  box-shadow: inset 4px 0 0 var(--danger);
}

.root-row.status-yellow {
  box-shadow: inset 4px 0 0 var(--warn);
}

.root-row.status-green {
  box-shadow: inset 4px 0 0 var(--ok);
}

.task-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.task-main {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale)) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding-left: calc(8px + var(--depth) * 18px);
}

.project-main {
  padding-left: calc(12px + var(--depth) * 18px);
}

.status-advance {
  width: calc(13px * var(--ui-scale));
  height: calc(13px * var(--ui-scale));
  border: 1px solid var(--chrome-fg);
  background: var(--status-box-color, var(--warn));
  padding: 0;
}

.draft-status {
  opacity: 0.25;
}

.twisty {
  width: calc(18px * var(--ui-scale));
  height: calc(22px * var(--ui-scale));
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: calc(17px * var(--ui-scale));
}

.twisty.open {
  transform: rotate(90deg);
}

.editable {
  min-width: 0;
  outline: 0;
  overflow-wrap: anywhere;
}

.editable:focus {
  background: var(--chrome-fg);
  color: #000;
}

.task-title,
.task-note,
.task-owner {
  min-width: 0;
  padding: 6px 8px;
  font-size: calc(18px * var(--ui-scale));
  line-height: 1.05;
}

.task-title {
  color: var(--accent);
}

.project-title {
  font-size: calc(20px * var(--ui-scale));
  text-transform: lowercase;
}

.task-title.file-linked {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.task-note {
  border-left: 1px solid var(--soft-line);
  color: var(--chrome-fg);
}

.task-owner {
  border-left: 1px solid var(--soft-line);
  color: var(--muted);
  text-align: right;
}

.task-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  border-left: 1px solid var(--soft-line);
  padding: 4px;
}

.mini-button {
  height: calc(23px * var(--ui-scale));
  min-width: calc(21px * var(--ui-scale));
  border: 1px solid var(--chrome-fg);
  background: #000;
  color: var(--chrome-fg);
  padding: 0 5px;
  font-size: calc(16px * var(--ui-scale));
}

.mini-button:hover {
  background: var(--chrome-fg);
  color: #000;
}

.link-button {
  color: var(--accent);
}

.draft-row {
  opacity: 0.72;
}

.blank-cell {
  border-left: 1px solid var(--soft-line);
}

.status-bar {
  height: var(--status-h);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--chrome-fg);
  background: var(--chrome-bg);
  padding: 0 10px;
  color: var(--muted);
  font-size: calc(18px * var(--ui-scale));
}

.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--accent);
  padding: 20px;
}

.login-panel {
  width: min(390px, 100%);
  border: 1px solid var(--accent);
  background: #000;
  box-shadow: 4px 4px 0 var(--accent);
  padding: 16px;
}

.login-title {
  color: var(--accent);
  font-family: var(--chrome-font);
  font-size: 48px;
  line-height: 0.9;
}

.login-panel label {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 20px;
}

.login-panel input {
  height: 34px;
  padding: 6px 8px;
  border-color: var(--accent);
  background: #000;
  color: var(--accent);
  font-size: 22px;
}

.login-error {
  min-height: 16px;
  margin-top: 10px;
  color: var(--danger);
  font-size: 18px;
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-rows: var(--menu-h) minmax(0, 1fr) var(--status-h);
  }

  .desktop-icon {
    width: 72px;
    min-height: 70px;
  }

  .desktop-icon-label {
    max-width: 70px;
  }

  .window-layer {
    padding: 8px 6px 12px 88px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .window {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: min(620px, calc(100dvh - 120px)) !important;
    min-width: 0;
    resize: vertical;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .thread-list,
  .project-list {
    max-height: 150px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  }

  .tree-head {
    grid-template-columns: minmax(104px, 1fr) minmax(72px, 0.68fr) 42px 64px;
    padding: 0 4px;
    font-size: calc(13px * var(--ui-scale));
  }

  .tree-head span {
    font-size: 0;
  }

  .tree-head span::after {
    content: attr(data-mobile-label);
    font-size: calc(13px * var(--ui-scale));
  }

  .task-row {
    grid-template-columns: minmax(104px, 1fr) minmax(72px, 0.68fr) 42px 64px;
  }

  .task-main {
    grid-template-columns: calc(13px * var(--ui-scale)) calc(16px * var(--ui-scale)) minmax(0, 1fr);
    gap: 3px;
    padding-left: calc(5px + var(--depth) * 10px);
  }

  .project-main {
    padding-left: calc(7px + var(--depth) * 10px);
  }

  .task-title,
  .task-note,
  .task-owner {
    padding: 5px 4px;
    font-size: calc(17px * var(--ui-scale));
  }

  .project-title {
    font-size: calc(18px * var(--ui-scale));
  }

  .task-owner {
    text-align: left;
  }

  .task-tools {
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
  }

  .mini-button {
    min-width: calc(18px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    padding: 0 2px;
    font-size: calc(14px * var(--ui-scale));
  }

  .menu-bar {
    padding: 0 8px;
  }

  .app-title {
    max-width: 34vw;
  }

  .status-line {
    display: none;
  }

  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: 92px;
  }

  .chat-input {
    grid-template-columns: 1fr 44px 58px;
  }

  .send-button,
  .tool-button,
  .small-button {
    padding: 0 6px;
    font-size: 17px;
  }

  .bubble {
    max-width: 92%;
  }
}