/* The Optio theme for Paperclip (dark mode). Applies only once optio-theme.js has set
   data-kc-company, i.e. on pages of a company listed in theme/companies.json. Other companies,
   the instance pages and light mode keep Paperclip's own values.
   Uses only Paperclip's own tokens and a few stable classes (.paperclip-markdown, .task-detail-properties). */

html.dark[data-kc-company] {
  --background: #111113;
  --foreground: #ededef;
  --side-panel-bg: #111113;
  --side-panel-fg: #ededef;
  --streamlined-task-detail-bg: #111113;
  --card: #141417;
  --card-foreground: #ededef;
  --popover: #18181b;
  --popover-foreground: #ededef;
  --bubble-agent: #141417;

  --primary: #5e6ad2;
  --primary-foreground: #ffffff;
  --secondary: #1b1b1f;
  --secondary-foreground: #ededef;
  --muted: #1b1b1f;
  --muted-foreground: #8a8a93;
  --accent: #1b1b1f;
  --accent-foreground: #ededef;

  --border: rgb(255 255 255 / 0.07);
  --input: rgb(255 255 255 / 0.1);
  --ring: #5e6ad2;
  --scrollbar-thumb: #2a2a2e;
  --scrollbar-thumb-hover: #3a3a3f;

  --sidebar: #0b0b0c;
  --sidebar-foreground: #c4c4cc;
  --sidebar-primary: #5e6ad2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #18181b;
  --sidebar-accent-foreground: #ededef;
  --sidebar-border: rgb(255 255 255 / 0.05);
  --sidebar-ring: #5e6ad2;

  /* The user's messages in the thread: dark indigo instead of Paperclip's bright blue. */
  --liveness-blue: #2b2e52;

  /* Status: yellow = waiting/running, green = done, purple = in progress. */
  --status-task-icon-in_progress: #7c83e8;
  --status-task-icon-in_review: #e2b340;
  --status-task-icon-done: #3fb950;
}

/* Slightly smaller text on desktop. Phones keep 16 px so Safari does not zoom into fields. */
@media (min-width: 768px) {
  html[data-kc-company] {
    font-size: 15px;
  }
}

/* Agent messages and comments: smaller text, more line spacing. */
html[data-kc-company] .paperclip-markdown {
  font-size: 13.5px;
  line-height: 1.65;
}
html[data-kc-company] .paperclip-markdown :is(h1, h2) {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 1.2em;
}
html[data-kc-company] .paperclip-markdown h3 {
  font-size: 1em;
  font-weight: 600;
}
html[data-kc-company] .paperclip-markdown table {
  font-size: 12.5px;
}
html[data-kc-company] .paperclip-markdown :is(th, td) {
  border-color: var(--border);
  padding: 6px 10px;
}
html[data-kc-company] .paperclip-markdown code {
  font-size: 0.9em;
}

/* Properties panel: the same size as Linear. */
html[data-kc-company] .task-detail-properties {
  font-size: 12.5px;
}

/* ── Labels (optio-theme.js sets data-kc-*) ─────────────────────────────────────
   Badge: a neutral pill, colour only in the dot, the value's own name. Paperclip's text is hidden and
   shown again from data-kc-name, so React still owns the element. */
html[data-kc-company] [data-slot="badge"][data-kc-name] {
  background: transparent !important;
  color: var(--foreground) !important;
  border: 1px solid rgb(255 255 255 / 0.1) !important;
  font-size: 0 !important;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  align-items: center;
}
html[data-kc-company] [data-slot="badge"][data-kc-name]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 4px;
  flex: 0 0 7px;
  background: var(--kc-dot, var(--muted-foreground));
}
html[data-kc-company] [data-slot="badge"][data-kc-name]::after {
  content: attr(data-kc-name);
  font-size: 12px;
  line-height: 1;
  color: rgb(237 237 239 / 0.86);
}

/* Picker like Linear: groups as rows with ›, a group opens its own list, search shows everything. */
html[data-kc-company] [data-kc-labels] {
  width: 272px;
  padding: 0;
  border-radius: 10px;
  border-color: rgb(255 255 255 / 0.09);
  background: #1a1a1e;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  overflow: hidden;
}
html[data-kc-company] [data-kc-labels] > input[data-kc-search] {
  height: 38px;
  padding: 0 12px;
  margin: 0;
  font-size: 12.5px;
  border-color: rgb(255 255 255 / 0.07);
}
html[data-kc-company] [data-kc-labels] > [data-kc-list] {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 360px;
  padding: 4px;
}
/* Shared row. */
html[data-kc-company] [data-kc-list] > button {
  height: 30px;
  gap: 9px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  background: transparent;
  color: #e4e4e7;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
html[data-kc-company] [data-kc-list] > button:hover { background: #232329; }
html[data-kc-company] [data-kc-list] > button[data-kc-off],
html[data-kc-company] [data-kc-list] > [data-kc-head][hidden] { display: none; }

/* Group row: name, chosen values, ›. */
html[data-kc-company] [data-kc-head] [data-kc-head-name] { flex: 0 0 auto; }
html[data-kc-company] [data-kc-head] [data-kc-head-on] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
  color: var(--muted-foreground);
}
html[data-kc-company] [data-kc-head] [data-kc-head-chev] { color: var(--muted-foreground); }
/* While searching, a group is a heading, not a button. */
html[data-kc-company] [data-kc-mode="search"] [data-kc-head] {
  height: auto;
  padding: 8px 8px 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  pointer-events: none;
}
html[data-kc-company] [data-kc-mode="search"] [data-kc-head] [data-kc-head-on],
html[data-kc-company] [data-kc-mode="search"] [data-kc-head] [data-kc-head-chev] { display: none; }
html[data-kc-company] [data-kc-mode="group"] [data-kc-head] { display: none; }
/* The back row exists only inside a group. */
html[data-kc-company] [data-kc-list] > [data-kc-back] { display: none; color: var(--muted-foreground); font-size: 12px; }
html[data-kc-company] [data-kc-mode="group"] [data-kc-list] > [data-kc-back] {
  display: flex;
  margin-bottom: 2px;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  border-radius: 6px 6px 0 0;
}

/* Value row: radio or checkbox before the dot. */
html[data-kc-company] [data-kc-list] > button[data-kc-group]::before {
  content: "";
  order: -1;
  flex: 0 0 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1.5px solid #3a3a42;
}
html[data-kc-company] [data-kc-list] > button[data-kc-single]::before { border-radius: 7px; }
html[data-kc-company] [data-kc-list] > button[data-kc-group]:has(svg.lucide-check)::before {
  border-color: var(--primary);
  background: var(--primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")
    center / 9px 9px no-repeat;
}
html[data-kc-company] [data-kc-list] > button > svg.lucide-check { display: none; }
html[data-kc-company] [data-kc-list] > button[data-kc-group] > span:first-child { width: 8px; height: 8px; }
html[data-kc-company] [data-kc-list] span[data-kc-name] { font-size: 0; }
html[data-kc-company] [data-kc-list] span[data-kc-name]::after { content: attr(data-kc-name); font-size: 12.5px; }

/* New labels are created in Settings › Factory, so every loop reads the same names. */
html[data-kc-company] [data-kc-labels] > div.mt-2 { display: none; }
html[data-kc-company] [data-kc-foot] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
  font-size: 11.5px;
  color: var(--muted-foreground);
}
html[data-kc-company] [data-kc-foot] a { color: #a8aef0; text-decoration: none; }
html[data-kc-company] [data-kc-foot] a:hover { color: #c9cdf7; }
html:not([data-kc-company]) [data-kc-foot] { display: none; }

/* ── Properties panel like Linear (optio-theme.js sets data-kc-prop / data-kc-section) ──────
   Only what the software-factory loop uses: 420 Linear issues never used estimate, due date, cycle or
   parent/sub-issues; review and approval belong to the loop, not to Paperclip's Execution fields.
   Relations and Delivery sit in the Factory plugin's groups at the top of the panel. */
html[data-kc-company] [data-kc-section="execution"],
html[data-kc-company] [data-kc-section="relationships"],
html[data-kc-company] [data-kc-section="workspace"],
html[data-kc-company] [data-kc-prop="parent"],
html[data-kc-company] [data-kc-prop="subtasks"],
html[data-kc-company] [data-kc-prop="reviewers"],
html[data-kc-company] [data-kc-prop="approvers"],
html[data-kc-company] [data-kc-prop="monitor"],
html[data-kc-company] [data-kc-prop="watchdog"],
html[data-kc-company] [data-kc-prop="execution"],
html[data-kc-company] [data-kc-prop="workspace"],
html[data-kc-company] [data-kc-prop="folder"],
html[data-kc-company] [data-kc-prop="originating"],
html[data-kc-company] [data-kc-prop="updated"] {
  display: none !important;
}
/* Section headings: plain text instead of mono capitals; the top one has none. */
html[data-kc-company] [data-kc-section] > div.uppercase {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0;
  padding: 0 0 6px;
}
html[data-kc-company] [data-kc-section] > div.uppercase::after {
  font-size: 11.5px;
  color: var(--muted-foreground);
}
html[data-kc-company] [data-kc-section="work"] > div.uppercase { display: none; }
html[data-kc-company] [data-kc-section="relationships"] > div.uppercase::after { content: "Relations"; }
html[data-kc-company] [data-kc-section="workspace"] > div.uppercase::after { content: "Delivery"; }
html[data-kc-company] [data-kc-section="about"] > div.uppercase::after { content: "About"; }
/* Rows: a little taller, with hover as in Linear. */
html[data-kc-company] [data-kc-prop] {
  min-height: 30px;
  padding-inline: 8px;
  margin-inline: -8px;
  border-radius: 6px;
  align-items: center;
}
html[data-kc-company] [data-kc-prop]:hover { background: rgb(255 255 255 / 0.03); }
html[data-kc-company] [data-kc-prop] > span.w-24 { width: 92px; font-size: 12px; }
html[data-kc-company] [data-kc-section] + [data-kc-section] { margin-top: 10px; }


/* ── Task v3 ─────────────────────────────────────────────────────────────────
   The description is the task's content, not a message: plain full-width text, unfolded. */
html[data-kc-company] [data-testid="task-chat-description-bubble"] {
  align-items: stretch;
  gap: 0;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
html[data-kc-company] [data-testid="task-chat-description-bubble"] > div { flex-direction: column; }
html[data-kc-company] [data-testid="task-chat-description-bubble"] > div > div {
  max-width: 100%;
  width: 100%;
  background: transparent;
  color: var(--foreground);
  border-radius: 0;
  padding: 2px 0 0;
}
html[data-kc-company] [data-testid="task-chat-description-bubble"] .paperclip-markdown {
  font-size: 14px;
  line-height: 1.7;
  color: rgb(237 237 239 / 0.88);
}
html[data-kc-company] [data-testid="task-chat-description-bubble"] .fold-curtain__content {
  max-height: none !important;
  mask-image: none !important;
}
html[data-kc-company] [data-testid="task-chat-description-bubble"] .fold-curtain__toggle,
html[data-kc-company] [data-testid="task-chat-description-bubble"] > span { display: none; }

/* The plugin's loop card has its own border; Paperclip's frame around it is removed. */
html[data-kc-company] div.rounded-lg.border:has(> section[aria-label="Loop"]) {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Properties: an icon on the left instead of a title column, as in Linear. The title is a tooltip. */
html[data-kc-company] [data-kc-prop] > span.w-24 {
  width: 16px;
  flex: 0 0 16px;
  font-size: 0;
  height: 16px;
  align-self: center;
  margin-top: 0;
  background: var(--muted-foreground);
  -webkit-mask: var(--kc-icon) center / 14px 14px no-repeat;
  mask: var(--kc-icon) center / 14px 14px no-repeat;
}
html[data-kc-company] [data-kc-prop="labels"] > span.w-24 { align-self: flex-start; margin-top: 3px; }
html[data-kc-company] [data-kc-prop] { gap: 12px; }
html[data-kc-company] [data-kc-prop="status"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='black'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="assignee"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="project"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="labels"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5' fill='black'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="blocked by"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M6.5 6.5l11 11'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="blocking"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="branch"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Cpath d='M6 7v10M18 10c0 4-6 3-11 7'/%3E%3C/svg%3E"); }
html[data-kc-company] :is([data-kc-prop="started"], [data-kc-prop="created"]) { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); }
html[data-kc-company] [data-kc-prop="completed"] { --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }

/* Branch: PR status as a coloured dot and short text, from the loop card. */
html[data-kc-company] [data-kc-prop="branch"][data-kc-pr] { flex-wrap: wrap; }
html[data-kc-company] [data-kc-prop="branch"][data-kc-pr]::after {
  content: attr(data-kc-pr-label);
  flex-basis: 100%;
  padding-left: 28px;
  margin-top: -2px;
  font-size: 11.5px;
  color: var(--kc-pr, var(--muted-foreground));
}
html[data-kc-company] [data-kc-pr="merged"] { --kc-pr: #b392f0; }
html[data-kc-company] [data-kc-pr="queued"] { --kc-pr: #a8aef0; }
html[data-kc-company] [data-kc-pr="green"] { --kc-pr: #7ee2a0; }
html[data-kc-company] [data-kc-pr="checks"] { --kc-pr: #f0cf75; }
html[data-kc-company] [data-kc-pr="blocked"] { --kc-pr: #ff9a9d; }