/* ================================================================= CARDS == */
/* The card view (task queue #121): every chat at once, each card with its own
   composer and its linked queue tasks under it. cards.js owns the markup. Own
   file, like home.css, so parallel rounds editing style.css never collide.
   Uses style.css's tokens only. */

/* ---- the toggle and what it swaps ---- */
#home-cards-toggle[aria-pressed="true"] { color: var(--accent-2); background: var(--accent-soft); }
#cards-heading { display: none; }
#app-shell.home-cards #cards-heading { display: block; }
#app-shell.home-cards #conv-menu-btn,
#app-shell.home-cards #chat-log,
#app-shell.home-cards #thinking-indicator,
#app-shell.home-cards .composer-dock { display: none; }
/* The tasks move under their cards, so the right column's list goes. */
#app-shell.home-cards #home-dots { display: none; }

/* ---- the global max (follow-up 4): running/max across all chats ---- */
.cards-global {
  display: none;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  cursor: pointer;
}
#app-shell.home-cards .cards-global { display: inline-flex; }
.cards-global:hover { border-color: var(--line-3); color: var(--text-2); }
.cg-run { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.cards-global select { height: 26px; padding: 0 4px; border: 0; background: none; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.cards-global.paused { border-color: rgba(245, 182, 74, 0.5); background: rgba(245, 182, 74, 0.08); color: var(--warn); }
.cards-global.paused select, .cards-global.paused .cg-run { color: var(--warn); }
@media (max-width: 760px) { .cards-global .cg-l { display: none; } }

/* ---- which chats show (follow-up 1): the eye button and its list ---- */
.cards-pick-wrap { position: relative; display: none; }
#app-shell.home-cards .cards-pick-wrap { display: block; }
#cards-pick-btn { position: relative; }
#cards-pick-btn[aria-expanded="true"] { background: var(--surface-2); }
#cards-pick-btn.has-hidden { color: var(--accent-2); }
.cards-pick-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b12;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
.cards-pick-count:empty { display: none; }
#cards-pick {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 8px 6px;
  border-radius: 14px;
  /* Opaque: inside the topbar's own backdrop blur, a second blur sees nothing behind it. */
  border: 1px solid var(--line-2);
  background: #16161c;
  box-shadow: var(--shadow-pop);
  animation: fadeIn 0.14s var(--ease) both;
}
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 8px; font-size: var(--fs-xs); color: var(--text-3); }
.cp-head .linklike { height: 22px; font-size: var(--fs-xs); }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm); color: var(--text); }
.cp-row:hover { background: var(--surface-2); }
.cp-row input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--accent); }
.cp-row input:not(:checked) + .cp-name { color: var(--text-3); }
.cp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-error { padding: 6px 8px 2px; font-size: var(--fs-xs); color: var(--danger); }
.cv-none { grid-column: 1 / -1; padding: 40px 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.cv-none .ic { width: 15px; height: 15px; vertical-align: -3px; }
/* A card's own hide button shows on hover (always on a touch screen). */
.cv-hide { opacity: 0; transition: opacity 0.14s var(--ease); }
.cv-card:hover .cv-hide, .cv-hide:focus-visible { opacity: 1; }
@media (hover: none) { .cv-hide { opacity: 1; } }

#home-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  /* Rows are as tall as their cards: the column scrolls, a card never shrinks. */
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 14px;
  padding: 14px 18px 28px;
}

/* ---- one card ---- */
.cv-card {
  /* Isolated for the thinking orb, the card's background at the bottom left
     of its chat, as in the one-chat view (style.css .orb-bg). */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  animation: fadeIn 0.2s var(--ease) both;
  transition: border-color 0.16s var(--ease);
}
.cv-card > * { flex: none; }
.cv-card:focus-within { border-color: var(--line-2); }
.cv-card.cv-drop { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

.cv-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.cv-head .conv-dot { flex: none; }
.cv-title, .cv-title-static {
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.cv-title:hover { color: var(--accent-2); }
.cv-age { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.cv-unassigned .cv-head { padding-right: 14px; }
.cv-reason { padding: 6px 14px 0; font-size: var(--fs-xs); color: var(--warn); }

/* The chat itself: app.js's bubbles, a size down. */
.cv-log { height: 300px; overflow-y: auto; padding: 14px 14px 4px; overscroll-behavior: contain; }
.cv-log .msg { margin-bottom: 18px; animation: none; }
.cv-log .msg-text { font-size: 13px; line-height: 1.55; }
.cv-log .msg.user { max-width: 88%; padding: 7px 11px; border-radius: 14px 14px 5px 14px; }
.cv-log .msg.assistant { padding-left: 15px; }
.cv-log .msg.assistant::before { top: 6px; width: 6px; height: 6px; border-radius: 2px; }
.cv-log .msg.assistant .ts { left: 15px; }
.cv-log .msg-attachment { max-width: 100%; max-height: 160px; }
.cv-log .msg-attachments { max-width: 100%; }
.cv-log .msg-text pre { max-width: 100%; }
.cv-empty { margin: 110px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }

.cv-error { padding: 0 14px 8px; font-size: var(--fs-xs); color: var(--danger); }

/* ---- the composer ---- */
.cv-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.cv-files.sending .attach-chip { opacity: 0.55; }
.cv-files .attach-chip { gap: 7px; padding: 4px 4px 4px 6px; font-size: var(--fs-xs); border-radius: 10px; }
.cv-files .attach-chip img, .cv-files .attach-chip-icon { width: 26px; height: 26px; border-radius: 6px; }
.cv-files .attach-chip-remove { width: 22px; height: 22px; }
.cv-compose {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 0 10px 10px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  /* Frosted, so the orb behind it shows through softly (task queue #131). */
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Solid where there is no backdrop blur, or less transparency is asked for
   (style.css "Glass fallback"). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cv-compose { background: var(--bg-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .cv-compose { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cv-compose:focus-within { border-color: var(--line-3); box-shadow: 0 0 0 3px rgba(139, 142, 255, 0.07); }
.cv-compose .compose-btn { width: 30px; height: 30px; }
.cv-compose textarea {
  flex: 1;
  min-width: 0;
  height: 30px;
  max-height: 160px;
  padding: 6px 6px;
  resize: none;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.cv-compose textarea::placeholder { color: var(--text-3); }
/* Small pills (style.css .compose-pill) so a card stays compact. */
.cv-compose .compose-pill { flex: none; align-self: center; height: 24px; margin-right: 2px; padding: 0 8px; gap: 4px; font-size: 11px; }
.cv-send {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text-3);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease);
}
.cv-send .ic { width: 16px; height: 16px; stroke-width: 2; }
/* Awake once there is something to send, like the focused composer's. */
.cv-compose:has(textarea:not(:placeholder-shown)) .cv-send,
.cv-card.has-files .cv-send { background: var(--accent); color: #0b0b12; }
.cv-send:active { transform: scale(0.92); }

/* ---- the tasks under a card: the panel's dots (home.css draws .home-dot) ---- */
.cv-tasks { padding: 7px 10px 8px; border-top: 1px solid var(--line); background: var(--bg-2); }
.cv-dots { --dot: 10px; display: flex; flex-wrap: nowrap; gap: 9px; padding: 4px 3px; }
.cv-unassigned .cv-tasks { border-top: 0; background: none; }
.cv-unassigned { grid-column: 1 / -1; }

/* ---- Max: how many of this chat's tasks run at once (follow-up 2), and the
   machine its tasks run on (Q app msg 9168). Just the number and a short
   machine name, no text labels, so the card name stays readable (Q app msg
   9223); the tooltip says what each pill means. ---- */
.cv-max {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 20px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-3);
  cursor: pointer;
}
.cv-max:hover { border-color: var(--line-3); }
.cv-max select {
  appearance: none;
  -webkit-appearance: none;
  field-sizing: content;
  height: 18px;
  min-width: 20px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 18px;
  text-align: center;
  text-align-last: center;
  color: var(--text-2);
  cursor: pointer;
}
.cv-max:hover select { color: var(--text); }
.cv-max select:focus-visible { outline: 1px solid var(--accent-line); border-radius: 999px; }
.cv-max.paused { border-color: rgba(245, 182, 74, 0.5); background: rgba(245, 182, 74, 0.08); color: var(--warn); }
.cv-max.paused select { color: var(--warn); }

/* ---- moving cards: drag the top bar (mouse); the eye menu's arrows (any screen) ---- */
@media (hover: hover) {
  .cv-card:not(.cv-unassigned) .cv-head { cursor: grab; }
  .cv-card:not(.cv-unassigned) .cv-head :is(.icon-btn, select, label) { cursor: pointer; }
}
.cv-card.cv-dragging { opacity: 0.4; border-style: dashed; }
.cp-row { gap: 2px; padding: 2px 4px 2px 8px; }
.cp-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; }
.cp-move { flex: none; width: 26px; height: 26px; color: var(--text-3); }
.cp-move:disabled { opacity: 0.25; }
.cp-move.cp-up .ic { transform: rotate(180deg); }
.cp-foot { padding: 8px 8px 2px; font-size: var(--fs-xs); color: var(--text-3); }
@media (hover: none) { .cp-foot { display: none; } }

@media (max-width: 760px) {
  #home-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 10px 24px; }
  .cv-log { height: 260px; }
}