/* assets/css/task.css — split from index.html */

.push-row.push-row-switch { align-items:flex-start; }

.push-row.push-row-switch .push-label {
  padding-top:0; height:22px; line-height:22px; display:flex; align-items:center;
}

.welcome-msg-box .push-composer {
  border:none; border-radius:0; background:#fff;
}

.welcome-msg-box .push-composer:focus-within { border-color:transparent; }

.welcome-msg-box .push-composer-bar {
  border-top:1px solid #E5E6EB; background:#fff;
}

.push-actions .btn + .btn { margin-left:6px; }

.push-actions .btn { font-weight:500; }

.push-actions .btn-default {
  background:#F2F3F5; border-color:#F2F3F5; color:#4E5969;
}

.push-actions .btn-default:hover {
  background:#E5E6EB; border-color:#E5E6EB; color:#1D2129;
}

#page-company .table-wrap td.col-action .task-ops-row {
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
}

.push-top {
  flex-shrink:0; height:56px; display:flex; align-items:center; gap:12px;
  padding:0 24px; border-bottom:1px solid var(--border);
}

.push-top .back {
  width:32px; height:32px; border:1px solid var(--border); background:#fff; cursor:pointer;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}

.push-top .back svg { width:16px; height:16px; display:block; }

.push-top .back:hover { border-color:#C9CDD4; background:#F7F8FA; }

.push-top h3 {
  margin:0; font-size:16px; font-weight:600; color:#1D2129; line-height:24px;
}

.push-body {
  flex:1; min-height:0; display:flex; align-items:flex-start; gap:40px;
  overflow:auto; background:#fff; padding:28px 32px 36px;
  justify-content:flex-start;
}

.push-form {
  flex:0 1 640px; width:640px; max-width:100%; min-width:0;
  overflow:visible; padding:0;
}

.push-preview {
  width:280px; flex:0 0 auto; padding:0;
  display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; position:sticky; top:0;
}

.push-row {
  display:flex; align-items:flex-start; gap:12px; margin-bottom:24px;
}

.push-label {
  width:72px; flex-shrink:0; padding-top:5px;
  color:#4E5969; font-size:14px; font-weight:400; line-height:22px;
}

.push-field { flex:1; min-width:0; max-width:none; }

.push-field input[type=text],
.push-field input[type=number],
.push-field input[type=datetime-local],
.push-field textarea {
  width:100%; border:1px solid var(--border); border-radius:8px;
  padding:0 12px; height:32px; font-size:14px; line-height:22px;
  color:var(--text); background:#F7F8FA;
}

.push-field textarea {
  height:120px; padding:10px 12px; resize:vertical; line-height:22px; background:#fff;
  border-radius:10px; font-family: inherit;
}

.push-field input:focus, .push-field textarea:focus {
  outline:none; border-color:#165DFF; background:#fff;
}

.push-field .hint { margin-top:8px; font-size:12px; line-height:20px; color:#86909C; }

.push-extra { margin-top:12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }

.push-extra .hint { margin-top:0; font-size:12px; line-height:20px; color:#86909C; }

.push-extra textarea { width:100%; }

.push-inline {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:32px;
}

.push-inline .hint { margin-top:0; font-size:12px; line-height:20px; color:#86909C; }

.push-field .pick-box > .hint,
.pick-box > .hint {
  margin:0;
  padding:8px;
  font-size:12px;
  line-height:20px;
  color:#86909C;
  box-sizing:border-box;
}

.push-group-tabs {
  display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; align-items:center;
}

.push-group-tabs .push-group-tab {
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 12px; box-sizing:border-box;
  border:1px solid #E5E6EB; border-radius:6px; background:#fff;
  color:#4E5969; cursor:pointer; font-size:12px; line-height:1;
  font-family:inherit; font-weight:500; white-space:nowrap;
}

.push-group-tabs .push-group-tab:hover:not(.on) {
  border-color:#94BFFF; color:var(--primary);
}

.push-group-tabs .push-group-tab.on {
  border-color:var(--primary); background:var(--primary); color:#fff;
}

/* 推送内容编辑器（图二风格） */
.push-composer {
  border:1px solid #E5E6EB; border-radius:8px; background:#fff; overflow:hidden;
}

.push-composer:focus-within { border-color:#165DFF; }

.push-composer textarea,
.push-composer .push-text-input {
  width:100%; min-height:220px; height:220px; border:none !important; border-radius:0 !important;
  padding:14px 16px !important; resize:vertical; line-height:22px !important; background:#fff !important;
  font-size:14px !important; color:#1D2129 !important; display:block; box-shadow:none !important;
  font-family: "Microsoft YaHei", "微软雅黑", SimHei, sans-serif !important;
  white-space: pre-wrap !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  letter-spacing: normal !important;
}

.push-composer textarea:focus,
.push-composer .push-text-input:focus { outline:none; }

.push-composer-bar {
  display:flex; align-items:center; gap:0; padding:10px 12px;
  border-top:1px solid #E5E6EB; min-height:44px; background:#fff;
  box-sizing:border-box;
}

.push-attach-chips {
  margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;
  width:100%; box-sizing:border-box;
}

.push-attach-chip {
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  flex:0 0 calc(50% - 4px); width:calc(50% - 4px); max-width:calc(50% - 4px);
  padding:6px 10px; border:1px solid #E5E6EB; border-radius:6px;
  background:#F7F8FA; font-size:13px; color:#4E5969; line-height:20px;
}

.push-attach-chip.has-img {
  flex:0 0 calc((100% - 16px) / 3);
  width:calc((100% - 16px) / 3);
  max-width:calc((100% - 16px) / 3);
  align-items:center; padding:6px 10px 6px 6px;
}

.push-attach-chip .chip-txt {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.push-attach-chip .chip-x {
  border:none; background:transparent; color:#86909C; cursor:pointer;
  font-size:16px; line-height:1; padding:0 2px; flex-shrink:0;
}

.push-attach-chip .chip-x:hover { color:#F53F3F; }

/* 添加附件弹窗 */
.attach-modal { width:560px; max-width:94vw; border-radius:12px; overflow:hidden; }

.attach-modal .modal-header { border-bottom:none; padding:18px 20px 8px; }

.attach-modal .modal-header h3 { font-size:16px; font-weight:600; color:#1D2129; }

.attach-modal .modal-body { padding:8px 20px 16px; }

.attach-modal .modal-footer {
  background:#fff; border-top:1px solid #E5E6EB; padding:14px 20px;
}

.attach-modal .btn-default {
  background:#F2F3F5; border-color:#F2F3F5; color:#1D2129; border-radius:6px; min-width:72px;
}

.attach-modal .btn-primary { border-radius:6px; min-width:72px; }

.attach-panel {
  border:1px solid #E5E6EB; border-radius:8px; min-height:120px;
  padding:16px; background:#fff;
  display:flex; align-items:center; justify-content:center;
}

.attach-panel .attach-file-row { width:100%; }

.attach-upload-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px; border:none; border-radius:6px;
  background:#165DFF; color:#fff; font-size:14px; cursor:pointer;
}

.attach-upload-btn:hover { background:#0E4FE0; }

.attach-upload-btn svg { width:16px; height:16px; }

.attach-file-done {
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid #E5E6EB; border-radius:8px; background:#F7F8FA;
}

.attach-file-row {
  display:flex; align-items:center; gap:8px;
}

.attach-file-done .fn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#1D2129; }

.attach-file-ok {
  width:18px; height:18px; flex-shrink:0; color:#00B42A;
}

.attach-file-del {
  flex-shrink:0; border:none; background:transparent; cursor:pointer;
  line-height:1; padding:4px; display:inline-flex; align-items:center; justify-content:center;
}

.attach-file-del svg { width:18px; height:18px; display:block; }

.attach-file-del:hover { opacity:.85; }

.attach-preview-img {
  width:40px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#fff;
  border:1px solid #E5E6EB;
}

.push-attach-chip .chip-img {
  width:32px; height:32px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#fff;
}

/* 朋友圈预览（九宫格）— 字号对齐客服群发预览 */
.moment-post { display:flex; align-items:flex-start; gap:8px; }

.moment-post + .moment-post {
  margin-top:14px; padding-top:14px; border-top:1px solid #F0F0F0;
}

.moment-avatar {
  width:32px; height:32px; flex-shrink:0; border-radius:4px;
  background:#C9B6E4; color:#fff; display:flex; align-items:center; justify-content:center;
}

.moment-avatar svg { width:18px; height:18px; }

.moment-main { flex:1; min-width:0; }

.moment-name {
  display:flex; align-items:baseline; gap:0; min-width:0;
  font-size:11px; font-weight:600; color:#576b95; line-height:1.35;
}

.moment-name-user {
  flex:1 1 auto; min-width:0;
  font-size:11px; font-weight:600; color:#576b95;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.moment-name-corp {
  flex:0 0 auto; max-width:45%;
  font-size:9px; font-weight:600; color:#fa9d3b; margin-left:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.moment-text {
  margin-top:3px; font-size:10px; color:#111; line-height:1.35;
  white-space:pre-wrap; word-break:break-word;
  font-family: "Microsoft YaHei", "微软雅黑", SimHei, sans-serif;
}

.moment-text.empty { color:#C9CDD4; }

.moment-text.clamp {
  max-height: calc(1.35em * 6);
  overflow: hidden;
}

.moment-more {
  display:inline-block; margin-top:1px; padding:0; border:none;
  background:transparent; color:#576b95; font-size:10px; line-height:1.35;
  cursor:pointer; font-family:inherit;
}

.moment-more:hover { opacity:.85; }

.moment-grid { margin-top:6px; display:grid; gap:2px; grid-template-columns:repeat(3, 1fr); width:148px; }

.moment-cell {
  position:relative; width:100%; padding-bottom:100%;
  background:#F2F3F5; overflow:hidden; border-radius:1px;
}

.moment-cell img {
  position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;
}

.moment-cell .ph {
  position:absolute; left:0; top:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  color:#C9CDD4; font-size:9px;
}

.moment-link {
  margin-top:6px; display:flex; align-items:center; gap:6px;
  padding:4px; background:#f7f7f7; border-radius:2px;
}

.moment-link-thumb {
  width:28px; height:28px; flex-shrink:0; border-radius:2px; overflow:hidden;
  background:#E5E6EB; display:flex; align-items:center; justify-content:center;
  color:#C9CDD4; font-size:9px;
}

.moment-link-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.moment-link-title {
  flex:1; min-width:0; font-size:10px; color:#111; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.moment-meta { margin-top:8px; font-size:9px; color:#b2b2b2; line-height:1; }

.push-actions { margin-top:8px; padding-left:84px; }

/* 日期时间选择器 */
.dt-wrap { position:relative; width:100%; max-width:360px; }

.push-time-block {
  display:inline-flex; flex-direction:column; align-items:stretch; max-width:100%;
}

.push-time-block .seg {
  flex-wrap:nowrap; height:36px; width:max-content; max-width:100%;
}

.push-time-block .week-chips {
  display:flex; flex-wrap:nowrap; gap:4px; margin-bottom:10px;
  width:100%; box-sizing:border-box;
}

.push-time-block .push-extra {
  width:0; min-width:100%; margin-top:12px; display:block;
}

.push-time-block .dt-wrap {
  width:100%; max-width:none;
}

.push-time-block .dt-input {
  height:36px; border-radius:8px;
}

.push-time-block .dt-input input {
  height:34px !important; font-size:14px;
}

.dt-input {
  display:flex; align-items:center; height:32px; border:1px solid var(--border); border-radius:8px;
  background:#fff; cursor:pointer; transition:border-color .2s; padding:0 30px 0 12px; position:relative;
}

.dt-input:hover { border-color:#C9CDD4; }

.dt-input.open { border-color:var(--primary); }

.dt-input input {
  flex:1; min-width:0; border:none !important; background:transparent !important;
  height:30px !important; padding:0 !important; font-size:15px; color:#C0C4CC; cursor:pointer;
}

.dt-input.filled input { color:#1D2129; }

.dt-input input::placeholder { color:#C0C4CC; }

.dt-suffix {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#C0C4CC; pointer-events:none;
}

.dt-panel {
  position:fixed; z-index:3000; width:280px; min-width:260px; background:#fff; border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.1); color:#1D2129; font-size:12px;
  overflow:hidden; box-sizing:border-box;
  transform-origin: bottom center;
  animation: dt-panel-up .18s ease-out;
}

.dt-panel-hd {
  display:flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; box-sizing:border-box;
  text-align:center; font-size:15px; font-weight:500; color:#1D2129;
  border-bottom:1px solid #EBEEF5;
}

.dt-date-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 8px; box-sizing:border-box; height:44px;
  border-bottom:1px solid #EBEEF5;
}

.dt-date-hd-left,
.dt-date-hd-right {
  display:flex; align-items:center; gap:2px; flex:0 0 72px;
}

.dt-date-hd-right { justify-content:flex-end; }

.dt-date-hd button {
  border:none; background:transparent; color:#1D2129; cursor:pointer;
  font-size:22px; font-weight:500; width:32px; height:32px; border-radius:4px;
  padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  line-height:1; vertical-align:middle;
}

.dt-date-hd button:hover { color:var(--primary); background:#F2F3F5; }

.dt-date-title {
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:15px; font-weight:500; color:#1D2129;
  line-height:32px; height:32px; margin:0; padding:0;
  white-space:nowrap; display:flex; align-items:center; justify-content:center;
}

.dt-date-body,
.dt-time-body {
  padding:8px 0 4px; box-sizing:border-box; height:256px;
}

.dt-week {
  display:grid; grid-template-columns:repeat(7,1fr); padding:0 6px 4px; text-align:center;
  color:#1D2129; font-size:12px; line-height:24px;
}

.dt-days {
  display:grid; grid-template-columns:repeat(7,1fr); padding:0 6px; gap:0;
}

.dt-day {
  height:36px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:1px; cursor:pointer; font-size:14px; color:#1D2129; box-sizing:border-box;
}

.dt-day .dt-num {
  width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%;
  color:inherit; font-size:14px;
}

.dt-day:hover .dt-num { color:var(--primary); }

.dt-day.other { color:#C0C4CC; }

.dt-day.other:hover .dt-num { color:#909399; }

.dt-day.on .dt-num { background:var(--primary); color:#fff; }

.dt-day.on:hover .dt-num { color:#fff; }

.dt-day.today:not(.on) .dt-num { color:var(--primary); font-weight:600; }

.dt-day .dt-dot {
  width:4px; height:4px; border-radius:50%; margin-top:2px; background:transparent;
}

.dt-day.on .dt-dot { background:var(--primary); }

.dt-time-body { padding:0; }

.dt-time-cols {
  display:flex; height:100%; position:relative;
}

.dt-time-cols::before,
.dt-time-cols::after {
  content:""; position:absolute; top:0; bottom:0; width:1px; background:#EBEEF5;
  z-index:3; pointer-events:none;
}

.dt-time-cols::before { left:33.333%; }

.dt-time-cols::after { left:66.666%; }

.dt-time-col {
  flex:1; overflow-y:auto; text-align:center;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px 0 218px; position:relative; z-index:2;
  box-sizing:border-box;
}

.dt-time-col::-webkit-scrollbar { width:0; height:0; display:none; }

.dt-time-col div {
  height:32px; line-height:32px; font-size:14px; cursor:pointer; color:#1D2129;
  margin:0 8px; border-radius:4px; box-sizing:border-box;
}

.dt-time-col div:hover { color:var(--primary); }

.dt-time-col div.on {
  color:#fff; font-weight:500; background:var(--primary);
}

.dt-time-col div.on:hover { color:#fff; }

.dt-panel-ft {
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px;
  border-top:1px solid #EBEEF5;
}

.dt-panel-ft-right {
  display:flex; align-items:center; gap:18px; margin-left:auto;
}

.dt-panel-ft .btn-now {
  border:none; background:#F2F3F5; color:#4E5969; height:28px; padding:0 12px;
  border-radius:4px; cursor:pointer; font-size:14px;
}

.dt-panel-ft .btn-now:hover { color:var(--primary); }

.dt-panel-ft .btn-link {
  border:none; background:transparent; color:var(--primary); cursor:pointer; font-size:13px; padding:0;
  white-space:nowrap; margin-right:4px;
}

.dt-panel-ft .btn-ok {
  border:none; background:var(--primary); color:#fff; height:28px; padding:0 14px;
  border-radius:4px; cursor:pointer; font-size:14px;
}

.dt-panel-ft .btn-ok:hover { background:var(--primary-hover); }

@media (max-width: 900px) {
  :root { --sider-w: 168px; }
  .form-grid { grid-template-columns:1fr; }
  .brand-text { font-size:16px; }
  .push-body { flex-direction:column; gap:24px; padding:20px 16px 28px; }
  .push-form { width:100%; flex:1 1 auto; }
  .push-preview { width:100%; align-items:center; position:static; }
  .push-actions { padding-left:0; }
  .push-form { padding:0; }
}

.task-staff-cell {
  font-size:14px; color:#1D2129;
  vertical-align:middle; text-align:left;
}

.task-staff-all { text-align:left; }

.task-staff-all .all-lab {
  font-size:14px; font-weight:600; color:#1D2129; line-height:20px;
}

.task-staff-all .all-list {
  margin-top:4px; display:flex; flex-direction:column; gap:2px;
}

.task-staff-all .all-item {
  font-size:14px; color:#1D2129; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.task-staff-one { text-align:left; }

.task-staff-one .st-name {
  font-size:14px; color:#1D2129; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.task-staff-one .st-uid {
  margin-top:2px; font-size:13px; color:#1D2129; line-height:18px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.task-name-cell {
  vertical-align:middle;
}

.task-name-cell .tn-title {
  font-size:14px; color:#1D2129; line-height:20px; font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.task-name-cell .tn-sub {
  margin-top:2px; font-size:13px; color:#1D2129; line-height:18px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.task-msg-td {
  vertical-align:middle;
}

.task-msg-cell {
  display:inline-flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:center;
}

.task-msg-cell .mat-content-cell.plain {
  max-width:280px; color:#1D2129; font-size:14px; line-height:20px;
}

.task-msg-cell .mat-card-link,
.task-msg-cell .mat-card-mp { margin:0; }

table.task-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }

table.task-table th,
table.task-table td {
  padding:14px 16px; vertical-align:middle;
}

/* 序号列锁死宽度，避免多余空白被分到这里（看起来像和计划名称间距很大） */
table.task-table th.col-idx,
table.task-table td.col-idx {
  width:52px; min-width:52px; max-width:52px;
  white-space:nowrap; box-sizing:border-box;
  text-align:center; padding-left:8px; padding-right:8px;
}

table.task-table th.col-name,
table.task-table td.task-name-cell {
  width:200px; padding-left:4px; padding-right:8px;
}

/* 计划名称 ↔ 消息内容：固定间隔列 */
table.task-table th.col-spacer,
table.task-table td.col-spacer {
  width:48px !important; min-width:48px !important; max-width:48px !important;
  padding:0 !important; margin:0 !important; border-bottom:1px solid var(--border);
}

table.task-table th.col-msg,
table.task-table td.task-msg-td {
  width:300px; padding-left:8px; padding-right:25px;
}

table.task-table th.col-staff,
table.task-table td.task-staff-cell {
  width:300px; text-align:left; padding-left:25px; padding-right:25px;
}

table.task-table th.col-time,
table.task-table td.col-time {
  width:170px; white-space:nowrap; padding-left:25px; padding-right:0;
}

table.task-table td.col-time.task-send-time {
  white-space:pre-line; line-height:1.45; vertical-align:middle;
}

/* 推送时间 ↔ 状态：固定 50px 空列（时间列内容会撑满，靠 padding 看不出 50） */
table.task-table th.col-spacer-time,
table.task-table td.col-spacer-time {
  width:50px !important; min-width:50px !important; max-width:50px !important;
  padding:0 !important; margin:0 !important; border-bottom:1px solid var(--border);
}

table.task-table th.col-status,
table.task-table td.col-status {
  width:88px; max-width:88px; white-space:nowrap; padding-left:0; padding-right:8px;
  overflow:visible; vertical-align:middle;
}

table.task-table th.col-action,
table.task-table td.col-action {
  width:240px; white-space:normal; padding-left:34px; padding-right:0; vertical-align:middle;
  overflow:hidden;
}

.task-ops {
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px;
}

.task-ops-row {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap;
}

.task-op-btn {
  height:32px; min-width:0; width:auto; padding:0 16px; border-radius:4px;
  font-size:14px; font-weight:500; line-height:1; box-sizing:border-box;
  white-space:nowrap; flex:0 0 auto;
}

.task-record-modal { width:720px; border-radius:8px; }

.task-record-modal .modal-body { padding:16px 20px 20px; }