/* 鲸选RPA 管理后台 · 手工创建任务（manual-task-composer.js）
   三栏：消息序列（左）· 正在编辑的消息（中）· 机器人 / 目标群 / 发送时间（右）；窄屏依次堆叠。 */

.manual-task-dialog { width: min(1440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.manual-task-dialog > form { min-height: 0; }

.manual-task-header {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 16px 24px;
  border-bottom: 1px solid var(--border);
}
.manual-task-header > div { flex: 1; min-width: 0; }
.manual-task-header h2 { font-size: 17px; }
.manual-task-header p { margin-top: 2px; color: var(--muted-foreground); font-size: 13px; }
.manual-task-header > button.secondary { flex: none; height: 32px; padding: 0 10px 0 8px; border-color: transparent; background: transparent; color: var(--muted-foreground); }
.manual-task-header > button.secondary::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-x) center / contain no-repeat;
  mask: var(--icon-x) center / contain no-repeat;
}
.manual-task-header > button.secondary:hover:not(:disabled) { border-color: transparent; background: var(--muted); color: var(--foreground); }

.manual-task-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.4fr) minmax(320px, 1fr);
  align-items: start;
  gap: 16px;
  min-height: 0;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--background);
}
.manual-preview-pane, .manual-content-section, .manual-settings-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-surface);
}
.manual-status-area { display: flex; flex-direction: column; grid-column: 1 / -1; gap: 12px; }
.manual-status-area:not(:has(> :not([hidden]))) { display: none; }

.manual-task-dialog h3 { font-size: 15px; }
.manual-task-dialog small { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }

/* 共用的小按钮与分段切换 */
.manual-message-tabs, .manual-message-additions, .manual-message-order-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.manual-message-tabs button, .manual-message-additions button, .manual-message-order-actions button,
.manual-message-editor-heading button, .manual-interval-presets button { height: var(--control-height-sm); padding: 0 10px; font-size: 13px; }
.manual-message-tabs button[aria-pressed="true"], .manual-robot-option[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.manual-message-additions button { flex: 1 1 0; padding: 0 6px; }
.manual-message-order-actions { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.manual-message-order-actions button { flex: 1 1 auto; }
button.secondary.manual-message-delete { color: var(--destructive); }
button.secondary.manual-message-delete:hover:not(:disabled) { border-color: rgb(191 58 58 / 0.45); background: var(--destructive-soft); }

.manual-content-tabs, .manual-interval-presets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  border-radius: var(--radius);
  background: rgb(20 41 60 / 0.06);
}
.manual-content-tabs button, .manual-interval-presets button {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
}
.manual-content-tabs button:hover:not(:disabled), .manual-interval-presets button:hover:not(:disabled) { background: rgb(255 255 255 / 0.7); color: var(--foreground); }
.manual-content-tabs button[aria-pressed="true"], .manual-interval-presets button[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgb(20 41 60 / 0.1), 0 0 0 1px rgb(20 41 60 / 0.05);
}
.manual-content-tabs button:focus-visible, .manual-interval-presets button:focus-visible { outline-offset: -2px; }

/* ---------- 左栏：消息序列 ---------- */
.manual-preview-pane > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.manual-preview-pane > h3 span { color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.manual-phone { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-xl); background: var(--muted); }
.manual-phone-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; color: var(--muted-foreground); font-size: 13px; }
/* 2px 内边距抵消负外边距，避免滚动容器裁掉选中卡片的描边。 */
.manual-preview-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; margin: -2px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; }
.manual-preview-card { overflow: hidden; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-surface); transition: box-shadow 0.15s; }
.manual-preview-card:hover { box-shadow: var(--shadow-surface-hover); }
.manual-preview-card.is-active { box-shadow: 0 0 0 2px var(--primary); }
button.manual-preview-card-heading {
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
button.manual-preview-card-heading:hover:not(:disabled), button.manual-preview-card-heading:active:not(:disabled) { background: var(--muted); }
button.manual-preview-card-heading:focus-visible { outline-offset: -2px; }
.manual-preview-card-heading span:last-child { color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.manual-preview-card.is-active .manual-preview-card-heading span:last-child { color: var(--primary); }
.manual-preview-card .manual-message { padding: 10px 12px; }
.manual-preview-card .manual-message-bubble { padding: 0; border: 0; background: transparent; box-shadow: none; }
.manual-preview-card .manual-message-bubble p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.manual-preview-card .manual-message-bubble :is(img, video) { max-height: 120px; }
.manual-message-delay { display: block; padding: 0 12px 10px 48px; }

/* 消息气泡（左栏缩略与中栏发送预览共用） */
.manual-message { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.manual-message-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  font-size: 13px;
  font-weight: 600;
}
.manual-message-bubble {
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 4px 12px 12px;
  background: var(--card);
  box-shadow: var(--shadow-surface);
  overflow-wrap: anywhere;
}
.manual-message-bubble p { font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.manual-message-bubble :is(img, video) { display: block; width: 100%; max-width: 240px; max-height: 260px; border-radius: var(--radius-md); object-fit: contain; }

/* ---------- 中栏：编辑当前消息 ---------- */
.manual-message-editor { display: flex; flex-direction: column; gap: 14px; }
.manual-message-editor-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.manual-message-editor-heading strong { flex: 1 1 auto; font-size: 15px; }
.manual-message-editor-heading > span:not(.manual-message-position) { display: inline-flex; gap: 6px; }
.manual-message-position { color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
label.manual-text-field textarea { min-height: 200px; }
label.manual-text-field > small { align-self: flex-end; font-variant-numeric: tabular-nums; }

.manual-media-field { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px dashed var(--input-hover); border-radius: var(--radius); background: rgb(239 243 248 / 0.5); }
.manual-media-field.is-uploading { border-color: var(--primary); }
.manual-media-field.is-uploaded { border-style: solid; border-color: rgb(19 120 74 / 0.4); }
.manual-upload-heading { display: flex; align-items: center; gap: 12px; }
.manual-upload-heading strong { display: block; font-size: 14px; }
.manual-upload-heading p.subtle { margin-top: 2px; font-size: 13px; }
.manual-upload-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.manual-upload-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manual-upload-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-surface); }
.manual-upload-preview { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-md); background: var(--muted); }
.manual-upload-preview :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.manual-upload-details { display: flex; flex: 1 1 160px; flex-direction: column; gap: 2px; min-width: 0; }
.manual-upload-details span { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.manual-file-button { flex: none; }
.manual-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.manual-upload-status { color: var(--muted-foreground); font-size: 13px; }
.manual-upload-status:empty { display: none; }

.manual-interval-field { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.manual-interval-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.manual-interval-heading strong { font-size: 14px; }
.manual-interval-heading span { color: var(--muted-foreground); font-size: 13px; }
.manual-interval-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
label.manual-interval-custom { flex-direction: row; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 400; }
label.manual-interval-custom > span:first-child { font-weight: 400; }
label.manual-interval-custom input { width: 88px; }

.manual-live-preview { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-xl); background: var(--muted); }

/* ---------- 右栏：机器人、目标群、发送时间 ---------- */
.manual-robot-section { display: flex; flex-direction: column; gap: 6px; }
.manual-robot-section > label { font-size: 14px; }
.manual-robot-section > small { margin-top: 2px; }
button.secondary.manual-robot-toggle {
  justify-content: flex-start;
  width: 100%;
  padding: 0 34px 0 12px;
  background: var(--card) var(--icon-chevron-down) no-repeat right 10px center / 16px;
  font-weight: 400;
  text-align: left;
}
button.secondary.manual-robot-toggle[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.manual-robot-popup { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-popover); }
.manual-robot-popup > div:not(.mapping-pagination) { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
button.secondary.manual-robot-option { justify-content: flex-start; width: 100%; border-color: transparent; font-weight: 400; text-align: left; }
button.secondary.manual-robot-option:hover:not(:disabled) { border-color: transparent; }
button.secondary.manual-robot-option[aria-pressed="true"] { border-color: var(--primary); }

.manual-target-section { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.manual-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.manual-section-heading span { color: var(--primary); font-size: 13px; font-weight: 500; }
.manual-group-sets { border: 1px solid var(--border); border-radius: var(--radius); }
.manual-group-sets > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.manual-group-sets > summary::-webkit-details-marker { display: none; }
.manual-group-sets > summary::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--icon-chevron-down) center / 16px no-repeat;
  transition: transform 0.15s;
}
.manual-group-sets[open] > summary::after { transform: rotate(180deg); }
.manual-group-sets > summary:hover { background: var(--muted); }
.manual-group-sets > summary:focus-visible { outline-offset: -2px; }
.manual-group-sets > div { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.manual-group-sets .group-selector-toolbar { margin: 0; }
.manual-group-sets > div > div:not(.group-selector-toolbar):not(.mapping-pagination) { display: flex; flex-direction: column; gap: 4px; }
.manual-group-sets p.subtle { font-size: 13px; }
button.secondary.manual-group-set-option { justify-content: space-between; width: 100%; font-weight: 500; text-align: left; }
button.secondary.manual-group-set-option span { color: var(--primary); font-size: 13px; font-weight: 400; }
.manual-settings-pane .group-selector-options { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); max-height: 260px; }

.manual-send-mode { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.manual-send-mode > legend { float: left; width: 100%; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.manual-send-mode > label:not(.manual-field) {
  flex: 1 1 120px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.manual-send-mode > label:not(.manual-field):hover { border-color: var(--input-hover); }
.manual-send-mode > label:not(.manual-field):has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.manual-send-mode > .manual-scheduled-field { flex: 1 1 100%; margin-top: 4px; }

.manual-send-availability { padding: 10px 12px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-active); font-size: 13px; line-height: 1.6; }
.manual-send-availability:empty { display: none; }
.manual-preview-summary { display: flex; flex-direction: column; padding: 4px 14px; border-radius: var(--radius); background: var(--muted); }
.manual-preview-summary > p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; }
.manual-preview-summary > p + p { border-top: 1px solid var(--border); }
.manual-preview-summary span { flex: none; color: var(--muted-foreground); }
.manual-preview-summary b { min-width: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------- 预览确认、错误与创建结果 ---------- */
.manual-server-preview { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-xl); background: var(--card); box-shadow: 0 0 0 1px rgb(29 111 184 / 0.35), 0 1px 2px rgb(20 41 60 / 0.04); }
.manual-server-preview > strong { padding: 10px 12px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-active); font-size: 14px; }
.manual-server-preview h4 { margin-top: 4px; font-size: 14px; font-weight: 600; }
.manual-confirm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.manual-confirm-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--muted); }
.manual-confirm-grid span { color: var(--muted-foreground); font-size: 12px; }
.manual-confirm-grid b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.manual-confirm-time, .manual-server-preview > p { color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.manual-confirm-messages { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.manual-confirm-messages td { vertical-align: top; overflow-wrap: anywhere; }
.manual-confirm-messages td:first-child, .manual-confirm-messages td:last-child { white-space: nowrap; }
.manual-confirm-targets { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.manual-confirm-targets span { padding: 3px 10px; border-radius: 999px; background: var(--secondary); color: var(--foreground); font-size: 13px; }
.manual-form-error { padding: 10px 14px; border-radius: var(--radius-md); background: var(--destructive-soft); color: var(--destructive); font-size: 14px; line-height: 1.6; }
.manual-created-result { padding: 10px 14px; border-radius: var(--radius-md); background: rgb(19 120 74 / 0.1); color: var(--success); font-size: 14px; font-weight: 500; line-height: 1.6; }

.manual-task-footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.manual-task-footer > p { color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.manual-task-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.manual-task-footer button { min-width: 96px; }
/* 预览确认后「确认创建」是唯一主操作，「重新预览」降为次要按钮。 */
.manual-task-footer > div:has(> [data-manual-submit]:not([hidden])) > [data-manual-preview] { border-color: var(--input); background: var(--card); color: var(--foreground); }
.manual-task-footer > div:has(> [data-manual-submit]:not([hidden])) > [data-manual-preview]:hover:not(:disabled) { border-color: var(--input-hover); background: var(--muted); }

/* 创建成功后在任务下发列表下方给出的结果提示 */
/* 提示节点挂在任务下发列表最下方，列表一长就看不到；改成与 .toast 同位置、同样式的轻提示，8 秒后由原逻辑隐藏。 */
.manual-create-feedback {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 1000;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--foreground);
  color: var(--primary-foreground);
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 12px 32px -8px rgb(20 41 60 / 0.45);
  transform: translateX(-50%);
  animation: toast-in 0.2s ease-out;
}
@media (min-width: 768px) {
  .manual-create-feedback {
    left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2);
    max-width: min(520px, calc(100vw - var(--sidebar-width) - 32px));
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1279px) {
  .manual-task-layout { grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.4fr); }
  .manual-settings-pane { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; }
  .manual-settings-pane > .manual-target-section { grid-column: 2; grid-row: 1 / span 6; padding-top: 0; border-top: 0; }
  .manual-settings-pane > :not(.manual-target-section) { grid-column: 1; }
  }
@media (max-width: 767px) {
  .manual-task-layout { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  /* 1279px 断点给两栏网格设的 align-items: start 在纵向 flex 里会让字段缩成内容宽度 */
  .manual-settings-pane { display: flex; align-items: stretch; }
  .manual-settings-pane > .manual-target-section { padding-top: 16px; border-top: 1px solid var(--border-soft); }
  .manual-preview-list { max-height: 320px; }
}
@media (max-width: 639px) {
  .manual-task-dialog { width: 100vw; max-height: calc(100dvh - 12px); }
  .manual-task-header { padding: 14px 16px; }
  .manual-task-layout { padding: 12px; gap: 12px; }
  .manual-preview-pane, .manual-content-section, .manual-settings-pane { padding: 14px; }
  .manual-content-tabs { display: flex; width: 100%; }
  .manual-content-tabs button { flex: 1; }
  .manual-task-footer { padding: 12px 16px; }
  .manual-task-footer > p { flex-basis: 100%; }
  .manual-task-footer > div { width: 100%; }
  .manual-task-footer button { flex: 1 1 auto; min-width: 0; }
  .manual-confirm-messages, .manual-confirm-messages tbody, .manual-confirm-messages tr, .manual-confirm-messages td { display: block; }
  .manual-confirm-messages thead { display: none; }
  .manual-confirm-messages tr { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
  .manual-confirm-messages tr:last-child { border-bottom: 0; }
  .manual-confirm-messages td { display: flex; gap: 8px; padding: 2px 0; border: 0; white-space: normal; }
  .manual-confirm-messages td:first-child, .manual-confirm-messages td:last-child { white-space: normal; }
  .manual-confirm-messages td::before { content: attr(data-label); flex: none; width: 88px; color: var(--muted-foreground); font-size: 13px; }
}

/* Optional, read-only identifiers of the exact server preview. */
.manual-task-verification { min-width: 0; border-top: 1px solid var(--border); padding-top: 12px; }
.manual-task-verification summary { cursor: pointer; font-weight: 600; }
.manual-task-verification p { margin: 10px 0; font-size: 13px; color: var(--muted-foreground); }
.manual-task-verification dl { margin: 8px 0; }
.manual-task-verification dt { font-size: 12px; color: var(--muted-foreground); }
.manual-task-verification dd { margin: 2px 0 10px; overflow-wrap: anywhere; user-select: text; font-family: monospace; }
.manual-task-verification dd code { display: block; overflow-wrap: anywhere; }
.manual-task-verification dd button { margin-top: 4px; padding: 3px 8px; font-size: 12px; }
.manual-verification-tasks { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.manual-verification-tasks section + section { border-top: 1px solid var(--border); padding-top: 8px; }