/* Gropro AI preview — task/subtask cards (canvas) + list rows match project page */

#groproAiTaskModal .task-card.gropro-ai-proposed-task,
#groproAiTaskModal .subtask-card.gropro-ai-proposed-task {
  border: 1px solid #e5e7eb;
  border-style: solid;
  background: #fff;
  box-shadow: none;
}

#groproAiTaskModal .task-card.gropro-ai-proposed-task:hover,
#groproAiTaskModal .subtask-card.gropro-ai-proposed-task:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Multi-assignee chips: project-assignee-picker.css */

#groproAiTaskModal .task-card .task-meta-row,
#groproAiTaskModal .subtask-card .task-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#groproAiTaskModal .task-card .task-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

#groproAiTaskModal .task-card .task-priority .priority-flag.priority-none {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

#groproAiTaskModal .task-card .task-priority .priority-flag.priority-low {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

#groproAiTaskModal .task-card .task-priority .priority-flag.priority-high {
  background: rgba(248, 113, 113, 0.14);
  color: #dc2626;
}

#groproAiTaskModal .task-card .task-priority .priority-flag.priority-urgent {
  background: rgba(217, 70, 239, 0.18);
  color: #a21caf;
}

#groproAiTaskModal .task-card .task-priority .priority-flag.priority-normal {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

#groproAiTaskModal .task-card .task-priority .priority-flag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

#groproAiTaskModal .subtask-card .task-priority .priority-flag {
  padding: 3px 6px;
  font-size: 10px;
}

#groproAiTaskModal .task-card .task-subtasks,
#groproAiTaskModal .task-card .gropro-ai-subtasks-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  margin-top: 8px;
  width: fit-content;
  border: none;
}

#groproAiTaskModal .task-card .task-subtasks:hover,
#groproAiTaskModal .task-card .gropro-ai-subtasks-toggle:hover {
  background: #f3f4f6;
  color: #ed2047;
}

#groproAiTaskModal .subtask-container {
  margin-top: 8px;
  display: none;
}

#groproAiTaskModal .subtask-container.expanded {
  display: block;
}

#groproAiTaskModal .subtask-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}

#groproAiTaskModal .subtask-card .task-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

#groproAiTaskModal .subtask-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#groproAiTaskModal .subtask-card-header .task-name {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
}

#groproAiTaskModal .task-row.subtask-row .task-name-prefix.subtask-prefix i {
  color: #9ca3af;
  font-size: 12px;
}

#groproAiTaskModal .task-row-subtasks {
  display: none;
}

#groproAiTaskModal .task-row-subtasks.expanded {
  display: block;
}

#groproAiTaskModal .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#groproAiTaskModal .status-pill .status-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#groproAiTaskModal .priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

#groproAiTaskModal .priority-pill.priority-none {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
}

#groproAiTaskModal .priority-pill i {
  font-size: 12px;
}

#groproAiTaskModal .list-view-level-pill .task-level-tag {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}