.customer-task-center {
  --task-ink: #18283b;
  --task-muted: #647286;
  --task-line: #d6dee8;
  --task-blue: #174e84;
  --task-blue-soft: #edf4fa;
  --task-gold: #a27a33;
  --task-danger: #bd4c4c;
  --task-surface: #ffffff;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, Arial, sans-serif;
  letter-spacing: 0;
  position: relative;
  z-index: 9400;
}

.customer-task-rail,
.customer-task-quick-open {
  position: fixed;
  z-index: 9402;
  right: 0;
  top: 34%;
  width: 62px;
  min-height: 184px;
  box-sizing: border-box;
  padding: 14px 7px 16px 9px;
  border: 2px solid #9a783d;
  border-right: 0;
  border-left-width: 4px;
  border-radius: 32px 0 0 32px;
  background: linear-gradient(180deg, #285f8d 0%, #194b76 48%, #123d65 100%);
  color: #fff;
  box-shadow:
    -8px 12px 24px rgba(17, 43, 68, .28),
    inset 0 2px 0 rgba(255, 255, 255, .24),
    inset 0 -4px 0 rgba(7, 31, 53, .28),
    inset 4px 0 0 rgba(255, 255, 255, .08);
  cursor: pointer;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  isolation: isolate;
  overflow: visible;
  text-shadow: 0 2px 3px rgba(5, 25, 43, .36);
  transition: transform 360ms cubic-bezier(.22, .72, .24, 1), opacity 220ms ease, box-shadow 240ms ease, filter 240ms ease;
}

.customer-task-rail::before,
.customer-task-quick-open::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px 0 7px 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-right: 0;
  border-radius: 25px 0 0 25px;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .08);
  pointer-events: none;
}

.customer-task-quick-open { display: none; }
body.auth-ready .customer-task-quick-open { display: grid; }
/* Modal input/confirmation owns the interaction surface. Restore the task
   entry automatically after cancel/close; do not remove it or alter tasks. */
body:has(> .action-modal-backdrop:not(.hidden):not([hidden])) .customer-task-quick-open,
body:has(> .action-final-confirmation-backdrop:not(.hidden):not([hidden])) .customer-task-quick-open {
  visibility: hidden;
  pointer-events: none;
}
body.customer-task-drawer-open .customer-task-quick-open {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
}

.customer-task-rail > span,
.customer-task-quick-open > span {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid rgba(242, 219, 174, .86);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fffdf7 0%, #e9dbc0 100%);
  color: #174d78;
  box-shadow: inset 0 2px 0 #fff, 0 4px 8px rgba(6, 29, 49, .30);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
}

.customer-task-rail > small,
.customer-task-quick-open > small {
  color: #fff8e9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  writing-mode: vertical-rl;
  letter-spacing: 0;
}

.customer-task-rail:hover,
.customer-task-quick-open:hover {
  border-color: #c29a52;
  background: linear-gradient(180deg, #3474a7 0%, #205b8d 48%, #16466f 100%);
  box-shadow:
    -11px 15px 30px rgba(17, 43, 68, .34),
    inset 0 2px 0 rgba(255, 255, 255, .3),
    inset 0 -4px 0 rgba(7, 31, 53, .24),
    inset 4px 0 0 rgba(255, 255, 255, .11);
  transform: translateX(-4px);
  filter: saturate(1.05);
}

.customer-task-rail:active,
.customer-task-quick-open:active { transform: translate(-2px, 2px); box-shadow: -4px 7px 15px rgba(17, 43, 68, .25), inset 0 3px 7px rgba(5, 27, 47, .22); }

.customer-task-rail-count,
.customer-task-quick-open > b {
  position: absolute;
  top: -9px;
  left: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: #c9323b;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid #fff;
  line-height: 22px;
  box-shadow: 0 4px 10px rgba(133, 30, 38, .3), inset 0 1px 0 rgba(255,255,255,.22);
}

.customer-task-quick-open.has-pending > span { border-color: #f0c96e; box-shadow: inset 0 2px 0 #fff, 0 4px 9px rgba(6,29,49,.32), 0 0 0 2px rgba(194,154,82,.14); }

.customer-site-notification {
  position: fixed;
  z-index: 9403;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 32px));
  min-height: 92px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 46px 15px 14px;
  border: 1px solid #9bb9ce;
  border-left: 5px solid #236b9d;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #edf5fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px rgba(19, 57, 84, .22);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.72,.24,1);
}
.customer-site-notification[hidden] { display: none; }
.customer-site-notification.show { opacity: 1; transform: translateY(0); }
.customer-site-notification-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #85a9c2; border-radius: 50%; background: linear-gradient(180deg, #3b82b5 0%, #1f5f8e 100%); color: #fff; font-size: 15px; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 5px 10px rgba(24,80,120,.22); }
.customer-site-notification-copy { min-width: 0; }
.customer-site-notification-copy em { display: block; color: #64839a; font-size: 9px; font-style: normal; font-weight: 850; }
.customer-site-notification-copy strong { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: #173f61; font-size: 15px; line-height: 1.4; }
.customer-site-notification-copy strong b { min-width: 23px; height: 21px; padding: 0 6px; border-radius: 11px; background: #b74747; color: #fff; font-size: 10px; line-height: 21px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.customer-site-notification-copy p { margin: 3px 0 0; color: #60788b; font-size: 11px; line-height: 1.45; }
.customer-site-notification-open { min-width: 76px; height: 34px; border: 1px solid #5e8cab; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #e2eef5 100%); color: #205b83; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9cb7c9, 0 5px 10px rgba(26,77,112,.12); }
.customer-site-notification-open:hover { transform: translateY(-1px); border-color: #39779f; background: linear-gradient(180deg, #fff 0%, #d8eaf4 100%); }
.customer-site-notification-close { position: absolute; top: 8px; right: 8px; width: 27px; height: 27px; border: 0; border-radius: 50%; background: transparent; color: #6c8394; font-size: 20px; line-height: 25px; cursor: pointer; }
.customer-site-notification-close:hover { background: #e2edf4; color: #174f77; }

#customerTaskQuickOpen ~ .customer-task-center .customer-task-rail,
.customer-task-launcher ~ .customer-task-center .customer-task-rail { display: none; }

.customer-task-center.open .customer-task-rail { opacity: 1; pointer-events: auto; }

.customer-task-scrim {
  position: fixed;
  z-index: 9400;
  inset: 0;
  background: rgba(18, 34, 52, 0.18);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 460ms ease, visibility 460ms ease;
}

.customer-task-center.open .customer-task-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.customer-task-panel {
  position: fixed;
  z-index: 9401;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(400px, calc(100vw - 36px));
  border: 1px solid #bfcbd8;
  border-radius: 8px;
  background: #f6f8fb;
  box-shadow: 0 26px 70px rgba(14, 37, 61, 0.24), 0 0 0 1px rgba(255,255,255,.85);
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms ease, opacity 180ms ease, visibility 220ms;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.customer-task-center.open .customer-task-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.customer-task-head {
  position: relative;
  min-height: 76px;
  padding: 17px 18px 15px 20px;
  background: #173d63;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customer-task-head span,
.customer-task-subhead span,
.customer-task-context > span {
  display: block;
  color: #9ebbd5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.customer-task-head h2 { margin: 4px 0 0; font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: 0; }
.customer-task-head-actions { display: flex; gap: 6px; }
.customer-task-icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.customer-task-icon-button:hover { background: rgba(255,255,255,.16); }

.customer-task-body { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.customer-task-context {
  margin: 14px 14px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--task-gold);
  border-top: 1px solid var(--task-line);
  border-right: 1px solid var(--task-line);
  border-bottom: 1px solid var(--task-line);
  border-radius: 4px;
  background: var(--task-surface);
}
.customer-task-context.compact { margin-top: 10px; }
.customer-task-context > span { color: #8c6a2e; }
.customer-task-context strong { display: block; margin-top: 3px; color: var(--task-ink); font-size: 14px; }
.customer-task-context p { margin: 4px 0 0; color: var(--task-muted); font-size: 12px; line-height: 1.5; }
.customer-task-context-title { display: block; }
.customer-task-context-title > div > span { color: #8c6a2e; font-size: 10px; font-weight: 700; }
.customer-task-context-title > div > strong { white-space: nowrap; overflow-wrap: normal; }
.customer-task-context-title > p { max-width: none; margin: 5px 0 0; text-align: left; }
.customer-task-cargo-summary { margin: 11px 0 0; padding: 9px 0; border-top: 1px solid #d9e0e6; border-bottom: 1px solid #d9e0e6; display: grid; grid-template-columns: 1fr; gap: 8px; }
.customer-task-cargo-summary div { min-width: 0; }
.customer-task-cargo-summary dt { color: #788696; font-size: 10px; }
.customer-task-cargo-summary dd { margin: 3px 0 0; color: #26384a; font-size: 11px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-factory-list { margin-top: 10px; }
.customer-task-factory-list > span { display: block; margin-bottom: 4px; color: #788696; font-size: 10px; font-weight: 650; }
.customer-task-factory-row { min-height: 29px; padding: 5px 0; border-top: 1px solid #e1e6eb; display: grid; grid-template-columns: minmax(86px, .8fr) minmax(0, 1.7fr); align-items: center; gap: 10px; }
.customer-task-factory-row strong { min-width: 0; margin: 0; color: #26384a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-factory-row > span { color: #57697a; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-factory-list details { border-top: 1px solid #e1e6eb; }
.customer-task-factory-list summary { padding: 7px 0 3px; color: #285c87; font-size: 10px; font-weight: 650; cursor: pointer; list-style-position: inside; }
.customer-task-factory-list details .customer-task-factory-row:first-of-type { margin-top: 3px; }
.customer-task-factory-list details:not([open]) > .customer-task-factory-row { display: none; }

.customer-task-list-summary { margin: 12px 14px 0; padding: 0 2px; color: #768695; font-size: 11px; display: flex; align-items: center; justify-content: space-between; }
.customer-task-list { flex: 1; min-height: 0; margin: 8px 14px 12px; border: 1px solid var(--task-line); border-radius: 6px; background: var(--task-surface); overflow-y: auto; }
.customer-task-row {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #e1e6eb;
  border-radius: 0;
  background: transparent;
  color: var(--task-ink);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  transition: background 140ms ease;
}
.customer-task-row:last-child { border-bottom: 0; }
.customer-task-row:hover { background: #f2f6f9; }
.customer-task-row.unread { background: #fbfcfd; }
.customer-task-row-avatar { width: 38px; height: 38px; border-radius: 50%; background: #dce8f2; color: #245885; display: grid; place-items: center; font-size: 14px; font-weight: 750; line-height: 1; }
.customer-task-row-avatar.type-pre_order { background: #f4ead7; color: #8d6927; }
.customer-task-row-avatar.type-general { background: #e4ece8; color: #3c6a57; }
.customer-task-row.unread .customer-task-row-avatar { box-shadow: 0 0 0 3px #f9e9e9; }
.customer-task-row-main { min-width: 0; display: grid; gap: 5px; }
.customer-task-row-main > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; }
.customer-task-row-preview { color: var(--task-muted); font-size: 10px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-row-side { align-self: stretch; min-width: 40px; padding-top: 1px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.customer-task-row-side time { color: #8a96a4; font-size: 9px; white-space: nowrap; }
.customer-task-status,
.customer-task-due {
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
  line-height: 17px;
  white-space: nowrap;
}
.customer-task-status { color: #315c80; background: #e8f0f7; border: 1px solid #c5d7e6; }
.customer-task-status.status-answered { color: #286753; background: #eaf5f0; border-color: #c6e0d5; }
.customer-task-status.status-completed { color: #6d7782; background: #f0f2f4; border-color: #d9dee3; }
.customer-task-due { color: #7c6233; background: #f8f2e7; border: 1px solid #e7d8b9; }
.customer-task-due.due-overdue { color: #9d3f3f; background: #faecec; border-color: #edc8c8; }
.customer-task-unread { min-width: 17px; height: 17px; border-radius: 9px; background: var(--task-danger); color: #fff; font-size: 9px; line-height: 17px; text-align: center; }
.customer-task-unread-dot { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #d94a4a; box-shadow: 0 2px 5px rgba(128, 33, 33, .3); }

.customer-task-primary-footer { flex: 0 0 auto; padding: 12px 18px 16px; border-top: 1px solid var(--task-line); background: #fff; }
.customer-task-primary,
.customer-task-send {
  width: 100%;
  min-height: 42px;
  border: 1px solid #123e6a;
  border-radius: 6px;
  background: var(--task-blue);
  color: #fff;
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
}
.customer-task-primary:hover,
.customer-task-send:hover { background: #123f6d; }
.customer-task-primary:disabled,
.customer-task-send:disabled { opacity: .58; cursor: wait; }
.customer-task-draft-notice { position: absolute; z-index: 2; top: calc(100% + 8px); right: 16px; max-width: min(420px, calc(100vw - 32px)); padding: 9px 12px; border: 1px solid #d7b66c; border-radius: 5px; background: #fff9e9; box-shadow: 0 8px 18px rgba(50, 68, 83, .16); color: #7a5615; font-size: 12px; line-height: 1.45; }

.customer-task-subhead {
  min-height: 70px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--task-line);
  background: #fff;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.customer-task-subhead.detail { grid-template-columns: minmax(0, 1fr) auto; }
.customer-task-subhead.compose { grid-template-columns: minmax(0, 1fr) 32px; }
.customer-task-subhead span { color: #78899b; }
.customer-task-subhead h3 { margin: 3px 0 0; color: var(--task-ink); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }

.customer-task-form { flex: 1; min-height: 0; padding: 18px; overflow-y: auto; }
.customer-task-field { position: relative; display: block; }
.customer-task-field > span,
.customer-task-due-field legend,
.customer-task-custom-due > span { color: var(--task-ink); font-size: 12px; font-weight: 650; }
.customer-task-field textarea,
.customer-task-reply-form textarea,
.customer-task-custom-due > input,
.customer-task-custom-due .shared-time-input-date {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 1px solid #bdc9d5;
  border-radius: 6px;
  background: #fff;
  color: var(--task-ink);
  font: inherit;
  font-size: 13px;
  outline: 0;
}
.customer-task-field textarea {
  height: 140px;
  min-height: 140px;
  padding: 13px 14px;
  border-color: #9bb2c4;
  border-radius: 7px;
  background: #ffffff;
  color: #29465f;
  resize: none;
  line-height: 1.65;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e1eaf1, 0 2px 0 #b6c7d3, 0 5px 12px rgba(27, 61, 90, .1);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.customer-task-field textarea:hover { border-color: #7095b0; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #dce7ef, 0 2px 0 #9eb7c7, 0 6px 13px rgba(27, 61, 90, .13); }
.customer-task-field textarea:focus { border-color: #3f779f; box-shadow: inset 0 1px 0 #ffffff, 0 0 0 3px rgba(63, 119, 159, .13), 0 3px 0 #88aabb, 0 6px 13px rgba(27, 61, 90, .15); }
.customer-task-reply-form textarea:focus,
.customer-task-custom-due > input:focus,
.customer-task-custom-due .shared-time-input-date:focus { border-color: #5d86aa; box-shadow: 0 0 0 3px rgba(61, 112, 157, .11); }
.customer-task-field small { position: absolute; right: 9px; bottom: 8px; color: #8995a2; font-size: 10px; }

.customer-task-due-field { margin: 20px 0 0; padding: 0; border: 0; }
.customer-task-segments { margin-top: 9px; border: 1px solid #bdc9d5; border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.customer-task-segments button { min-height: 38px; padding: 6px 8px; border: 0; border-right: 1px solid #d4dce4; border-bottom: 1px solid #d4dce4; background: #fff; color: #4c5c6c; font-size: 11px; cursor: pointer; }
.customer-task-segments button:nth-child(2n) { border-right: 0; }
.customer-task-segments button:nth-child(n+3) { border-bottom: 0; }
.customer-task-segments button.active { background: #e9f1f8; color: #174e84; font-weight: 700; box-shadow: inset 0 -2px 0 #174e84; }
.customer-task-due-field > p { margin: 8px 0 0; color: #7f6a42; font-size: 11px; }
.customer-task-custom-due { display: block; margin-top: 12px; }
.customer-task-custom-due > input,
.customer-task-custom-due .shared-time-input-date { min-height: 40px; padding: 8px 10px; }
.customer-task-due-mode { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.customer-task-due-mode label {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #aabfce;
  border-bottom-color: #7f9caf;
  border-radius: 6px;
  background: #ffffff;
  color: #516477;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e7eef4, 0 2px 0 #b3c5d1, 0 5px 10px rgba(25, 59, 87, .09);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.customer-task-due-mode label:hover { border-color: #7297b1; transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e0eaf1, 0 3px 0 #94afc0, 0 7px 12px rgba(25, 59, 87, .13); }
.customer-task-due-mode input { width: 14px; height: 14px; margin: 0; accent-color: #215f91; }
.customer-task-due-mode label:has(input:checked) { border-color: #4d82a6; border-bottom-color: #215b87; background: #e4f1fa; color: #174e7e; font-weight: 700; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #c7dfef, 0 3px 0 #2b6995, 0 6px 12px rgba(25, 75, 113, .16); }
.customer-task-due-options { margin-top: 12px; padding: 11px; border: 1px solid #d3e0ea; border-radius: 5px; background: #f8fbfd; }
.customer-task-due-choice-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; }
.customer-task-due-choice-row + .customer-task-due-choice-row { margin-top: 9px; }
.customer-task-due-choice-row > span { color: #61758a; font-size: 11px; font-weight: 700; }
.customer-task-due-choice-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.customer-task-due-choice-group button {
  min-height: 34px;
  padding: 4px 3px;
  border: 1px solid #aec1cf;
  border-bottom-color: #849eaf;
  border-radius: 5px;
  background: #ffffff;
  color: #5a6d7f;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e7eef3, 0 2px 0 #b6c7d2, 0 4px 8px rgba(25, 59, 87, .07);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.customer-task-due-choice-group button:hover { border-color: #7196b0; transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e0eaf1, 0 3px 0 #94afc0, 0 6px 10px rgba(25, 59, 87, .11); }
.customer-task-due-choice-group button.active { border-color: #4c81a5; border-bottom-color: #205b86; background: #e1effa; color: #174e7e; font-weight: 700; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #c8dfef, 0 3px 0 #2a6798, 0 6px 10px rgba(25, 75, 113, .14); }
.customer-task-custom-due { margin-top: 10px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; }
.customer-task-due-choice-row[hidden],
.customer-task-custom-due[hidden] { display: none !important; }
.customer-task-custom-due > span { display: block; color: #61758a; font-size: 11px; font-weight: 700; }
.customer-task-custom-due > input,
.customer-task-custom-due .shared-time-input-date {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border-color: #91abc0;
  border-radius: 6px;
  background: #ffffff;
  color: #29465f;
  cursor: pointer;
  justify-self: end;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #e1eaf1, 0 2px 0 #b4c5d2, 0 5px 11px rgba(27, 61, 90, .13);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.customer-task-custom-due > .shared-date-time-input-control {
  grid-column: 2;
  width: min(286px, 100%);
  justify-self: end;
}
.customer-task-custom-due > input:hover,
.customer-task-custom-due .shared-time-input-date:hover { border-color: #668dab; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #dbe7ef, 0 3px 0 #93afc2, 0 7px 13px rgba(27, 61, 90, .16); }
.customer-task-custom-due > input:focus,
.customer-task-custom-due .shared-time-input-date:focus { border-color: #3e759c; box-shadow: inset 0 1px 0 #ffffff, 0 0 0 3px rgba(62, 117, 156, .14), 0 3px 0 #81a4ba, 0 7px 13px rgba(27, 61, 90, .16); }
.customer-task-form-note { margin: 18px 0 14px; padding: 10px 12px; border-left: 2px solid #9caebe; background: #eef2f5; color: #657381; font-size: 11px; line-height: 1.6; }

.customer-task-detail-meta { padding: 12px 18px; border-bottom: 1px solid var(--task-line); background: #f2f5f8; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.customer-task-detail-meta div { min-width: 0; }
.customer-task-detail-meta span { display: block; color: #788696; font-size: 10px; }
.customer-task-detail-meta strong { display: block; margin-top: 4px; color: var(--task-ink); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-detail-meta .customer-task-accepted { color: #2d765d; }
.customer-task-thread { flex: 1; min-height: 0; padding: 16px 18px 20px; overflow-y: auto; background: #f7f9fb; }
.customer-task-message { width: fit-content; max-width: 88%; margin-bottom: 14px; }
.customer-task-message.employee { margin-right: auto; }
.customer-task-message.client { margin-left: auto; }
.customer-task-message header { width: fit-content; max-width: 100%; margin: 0 2px 6px; display: grid; gap: 2px; }
.customer-task-message header > div { display: flex; align-items: baseline; gap: 7px; }
.customer-task-message.employee header { justify-items: start; margin-right: auto; }
.customer-task-message.client header { justify-items: end; margin-left: auto; }
.customer-task-message header strong { color: #566779; font-size: 10px; }
.customer-task-message header time { color: #929da8; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-task-message p { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px; border: 1px solid var(--task-line); border-radius: 6px; background: #fff; color: #26384a; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; box-shadow: 0 3px 9px rgba(24, 45, 67, .05); }
.customer-task-message.employee p { margin-right: auto; }
.customer-task-message.client p { margin-left: auto; }
.customer-task-message.client p { border-color: #bfd2e2; background: #eaf2f8; }
.customer-task-message-attachments { margin: 6px 2px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.customer-task-message-attachments a { max-width: 100%; padding: 4px 7px; border: 1px solid #c7d7e4; border-radius: 4px; background: #fff; color: #245d8e; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-reply-form { flex: 0 0 auto; padding: 12px 16px 15px; border-top: 1px solid var(--task-line); background: #fff; }
.customer-task-reply-form textarea { height: 140px; min-height: 140px; margin: 0; padding: 10px 11px; resize: none; line-height: 1.55; }
.customer-task-reply-form > div { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.customer-task-send { width: 92px; min-height: 36px; }
.customer-task-complete { min-height: 34px; padding: 0 12px; border: 1px solid #c8d1da; border-radius: 6px; background: #fff; color: #526272; font-size: 11px; cursor: pointer; }
.customer-task-completed-note { color: #768391; font-size: 11px; }

.customer-task-empty,
.customer-task-loading,
.customer-task-error { margin: auto; padding: 42px 24px; color: var(--task-muted); text-align: center; }
.customer-task-empty > span { width: 42px; height: 42px; margin: 0 auto 13px; border: 1px solid #b7c4d0; border-radius: 50%; display: grid; place-items: center; color: var(--task-blue); font-weight: 700; }
.customer-task-empty strong,
.customer-task-error strong { display: block; color: var(--task-ink); font-size: 13px; }
.customer-task-error p { margin: 8px 0 16px; font-size: 11px; line-height: 1.6; }
.customer-task-error button { min-height: 34px; padding: 0 14px; border: 1px solid #9fb0c1; border-radius: 6px; background: #fff; color: var(--task-blue); cursor: pointer; }
.customer-task-loading { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; }
.customer-task-loading i { width: 16px; height: 16px; border: 2px solid #ccd6e0; border-top-color: var(--task-blue); border-radius: 50%; animation: customer-task-spin .8s linear infinite; }
.customer-task-inline-error { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #e6bebe; border-radius: 4px; background: #fbebeb; color: #9a3e3e; font-size: 11px; }

.customer-task-context-button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #9fb3c5;
  border-radius: 5px;
  background: #fff;
  color: #285c87;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.customer-task-context-button:hover { border-color: #507ca3; background: #edf4fa; }
.customer-task-context-button.avatar {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #9bb9d2;
  border-bottom-color: #7397b5;
  border-radius: 999px;
  background: #ffffff;
  color: #286898;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 #91abc0, 0 5px 10px rgba(38, 92, 136, .13);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.customer-task-context-button.avatar::after {
  content: none;
}
.customer-task-context-button.avatar:hover {
  border-color: #2f6fa5;
  border-bottom-color: #1e557f;
  background: #edf5fb;
  color: #1f5f91;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 #1e557f, 0 7px 13px rgba(38, 92, 136, .18);
}
.customer-task-context-button.avatar:focus-visible { outline: 3px solid rgba(38, 101, 158, .24); outline-offset: 2px; }
.customer-task-column-icon {
  width: 23px;
  height: 23px;
  margin: auto;
  border-radius: 6px;
  background: #174e84;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}
.legacy-order-table th.customer-task-order-col,
.legacy-order-table td.customer-task-order-cell {
  width: 46px !important;
  min-width: 46px;
  max-width: 46px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  text-align: center;
  vertical-align: middle !important;
}
.legacy-order-table td.customer-task-order-cell > .customer-task-context-button.avatar {
  display: inline-grid;
  margin: 0 auto;
}

@keyframes customer-task-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .customer-task-panel { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
  .customer-task-rail,
  .customer-task-quick-open { top: auto; bottom: 82px; width: 58px; min-height: 158px; border-radius: 29px 0 0 29px; }
  .customer-task-scrim { display: none; }
  .customer-task-detail-meta { grid-template-columns: 1fr; }
  .customer-task-context-button.avatar { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .customer-site-notification { right: 14px; bottom: 22px; width: calc(100vw - 28px); grid-template-columns: 40px minmax(0, 1fr); padding-right: 42px; }
  .customer-site-notification-open { grid-column: 1 / -1; width: 100%; }
}

/* Desktop keeps the three-pane workspace, but presents it as a right-side drawer. */
.customer-task-panel {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(1240px, calc(100vw - 36px));
  height: auto;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  transform: translateX(100%);
  transition: transform 560ms cubic-bezier(.16, 1, .3, 1), opacity 360ms ease, visibility 560ms;
}
.customer-task-center.open .customer-task-panel { transform: translateX(0); }
.customer-task-head { min-height: 80px; padding: 17px 20px 16px 22px; }
.customer-task-head h2 { font-size: 22px; }
.customer-task-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 340px minmax(0, 1fr); }
.customer-task-workspace.no-order-info { grid-template-columns: 280px minmax(0, 1fr); }
.customer-task-workspace.sidebar-collapsed { grid-template-columns: 64px 340px minmax(0, 1fr); }
.customer-task-workspace.sidebar-collapsed.no-order-info { grid-template-columns: 64px minmax(0, 1fr); }
.customer-task-sidebar { min-width: 0; min-height: 0; border-right: 1px solid #d7e0e8; background: #fff; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.customer-task-sidebar-head { min-height: 72px; padding: 16px 16px 12px; border-bottom: 1px solid #e0e6ec; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.customer-task-pane-title > span { display: block; color: #8c6a2e; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.customer-task-pane-title > strong,
.customer-task-pane-title > h3 { display: block; margin: 4px 0 0; color: #20354a; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.customer-task-sidebar-toggle { min-width: 84px; min-height: 38px; flex: 0 0 84px; padding: 4px 10px; border: 1px solid #a9c8df; border-radius: 19px; background: #eef6fc; box-shadow: 0 2px 0 #c2d6e6, 0 5px 10px rgba(37, 83, 120, .10); color: #1e5c8f; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; line-height: 1; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.customer-task-sidebar-toggle:hover { background: #fff; box-shadow: 0 3px 0 #abc8dc, 0 7px 14px rgba(37, 83, 120, .14); transform: translateY(-1px); }
.customer-task-sidebar-toggle:active { box-shadow: 0 1px 0 #abc8dc; transform: translateY(2px); }
.customer-task-sidebar-toggle-icon { width: 16px; color: #1b5c91; font-size: 25px; font-weight: 700; line-height: .65; }
.customer-task-sidebar-toggle-label { color: #1c527e; font-size: 11px; font-weight: 750; letter-spacing: 0; white-space: nowrap; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar { position: relative; display: block; overflow: hidden; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar-head { min-height: 0; padding: 0; border: 0; display: block; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar-head > .customer-task-pane-title,
.customer-task-workspace.sidebar-collapsed .customer-task-filter-tabs,
.customer-task-workspace.sidebar-collapsed .customer-task-list,
.customer-task-workspace.sidebar-collapsed .customer-task-pager,
.customer-task-workspace.sidebar-collapsed .customer-task-primary-footer { display: none; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar-toggle { position: absolute; top: 12px; left: 8px; width: 48px; min-width: 48px; height: 58px; min-height: 58px; padding: 6px 3px 7px; border-color: #a8c9e1; border-radius: 16px; background: #f5faff; box-shadow: 0 2px 0 #b9d3e5, 0 5px 12px rgba(37, 83, 120, .12); flex-direction: column; gap: 4px; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar-toggle-icon { width: auto; font-size: 28px; line-height: .7; }
.customer-task-workspace.sidebar-collapsed .customer-task-sidebar-toggle-label { font-size: 10px; }
.customer-task-filter-tabs { padding: 0; border-bottom: 1px solid #e0e6ec; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.customer-task-filter-tabs button { min-width: 0; min-height: 54px; padding: 6px 2px; border: 0; border-right: 1px solid #e0e6ec; border-radius: 0; background: transparent; color: #66798b; font: inherit; font-size: 10px; cursor: pointer; display: grid; place-items: center; gap: 2px; }
.customer-task-filter-tabs button:last-child { border-right: 0; }
.customer-task-filter-tabs button b { font-size: 16px; font-weight: 700; line-height: 1; }
.customer-task-filter-tabs button.active { border-color: #c5d8e7; background: #edf4fa; color: #174e84; }
.customer-task-sidebar .customer-task-list { min-height: 0; margin: 0; border: 0; border-radius: 0; background: #fff; overflow-y: auto; }
.customer-task-sidebar .customer-task-row { width: 100%; min-height: 72px; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid #e5eaf0; border-radius: 0; background: #fff; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; box-shadow: none; transition: background 140ms ease; }
.customer-task-sidebar .customer-task-row:hover { border-color: #e5eaf0; background: #f2f6f9; box-shadow: none; }
.customer-task-sidebar .customer-task-row.unread { background: #fbfcfd; }
.customer-task-sidebar .customer-task-row-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #dce8f2; color: #245885; display: grid; place-items: center; font-size: 14px; font-weight: 750; line-height: 1; }
.customer-task-sidebar .customer-task-row-avatar.type-pre_order { background: #f4ead7; color: #8d6927; }
.customer-task-sidebar .customer-task-row-avatar.type-general { background: #e4ece8; color: #3c6a57; }
.customer-task-sidebar .customer-task-row.unread .customer-task-row-avatar { box-shadow: 0 0 0 3px #f9e9e9; }
.customer-task-sidebar .customer-task-row-main { min-width: 0; display: grid; gap: 5px; }
.customer-task-sidebar .customer-task-row-main > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; }
.customer-task-sidebar .customer-task-row-preview { color: #718294; font-size: 10px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-sidebar .customer-task-row-side { align-self: stretch; min-width: 40px; padding-top: 1px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.customer-task-sidebar .customer-task-row-side time { color: #8a96a4; font-size: 9px; white-space: nowrap; }
.customer-task-sidebar .customer-task-unread { min-width: 17px; height: 17px; border-radius: 9px; background: var(--task-danger); color: #fff; font-size: 9px; line-height: 17px; text-align: center; }
.customer-task-list-empty { padding: 30px 18px; color: #8795a2; font-size: 12px; text-align: center; }
.customer-task-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #dde6ef; background: #f8fbfd; }
.customer-task-pager button { min-width: 54px; min-height: 27px; border: 1px solid #b9cad9; border-radius: 999px; background: #fff; color: #285b83; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.customer-task-pager button:disabled { opacity: .42; cursor: default; }
.customer-task-pager span { min-width: 18px; color: #6d8192; font-size: 11px; text-align: center; }
.customer-task-sidebar .customer-task-primary-footer { padding: 12px; border-top: 1px solid #e0e6ec; }
.customer-task-sidebar .customer-task-primary { min-height: 40px; font-size: 12px; }
.customer-task-order-info { min-width: 0; min-height: 0; padding: 0 16px 18px; border-right: 1px solid #d7e0e8; background: #f4f7fa; display: flex; flex-direction: column; overflow-y: auto; }
.customer-task-order-info > header { min-height: 72px; box-sizing: border-box; padding: 16px 2px 12px; border-bottom: 1px solid #d7e0e8; }
.customer-task-order-content { padding-top: 16px; }
.customer-task-order-no { display: block; color: #19334d; font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
.customer-task-order-no-link { width: fit-content; max-width: 100%; color: #1d5687; text-decoration: none; cursor: pointer; }
.customer-task-order-no-link span { display: inline-block; margin-left: 6px; color: #9a7638; font-size: 13px; transition: transform 160ms ease; }
.customer-task-order-no-link:hover { color: #174e7e; text-decoration: underline; text-decoration-color: #b59458; text-underline-offset: 3px; }
.customer-task-order-no-link:hover span { transform: translate(2px, -2px); }
.customer-task-route { margin: 16px 0; padding: 13px 0; border-top: 1px solid #dce4eb; border-bottom: 1px solid #dce4eb; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 5px; }
.customer-task-route div { min-width: 0; }
.customer-task-route div:last-child { text-align: right; }
.customer-task-route span { display: block; color: #7b8997; font-size: 10px; }
.customer-task-route strong { display: block; margin-top: 5px; color: #243c54; font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-route i { color: #6384a1; font-size: 17px; font-style: normal; text-align: center; }
.customer-task-order-schedule { margin: 0 0 16px; padding: 12px 0 2px; border-top: 1px solid #dce4eb; border-bottom: 1px solid #dce4eb; }
.customer-task-order-schedule h4 { margin: 0 0 7px; color: #66798b; font-size: 10px; font-weight: 700; }
.customer-task-order-schedule.empty { padding-bottom: 12px; }
.customer-task-order-schedule.empty p { margin: 0; color: #7d8b98; font-size: 10px; }
.customer-task-order-leg { padding: 9px 0 10px; border-top: 1px solid #e0e7ed; }
.customer-task-order-leg:first-of-type { border-top: 0; }
.customer-task-order-leg > strong { display: block; margin-bottom: 4px; color: #89692f; font-size: 10px; }
.customer-task-order-leg-route { display: block; color: #61778b; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-order-leg-route i { padding: 0 3px; color: #5d7c98; font-style: normal; }
.customer-task-order-leg > b { display: block; margin-top: 4px; color: #244a6c; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-order-leg > div { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.customer-task-order-leg > div span { color: #7c8996; font-size: 9px; }
.customer-task-order-leg > div em { display: block; margin-top: 2px; color: #3d566d; font-size: 10px; font-style: normal; font-weight: 650; }
.customer-task-order-data { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
.customer-task-order-data div { padding-bottom: 11px; border-bottom: 1px solid #dce4eb; }
.customer-task-order-data .wide { grid-column: 1 / -1; padding-top: 11px; }
.customer-task-order-data dt { color: #788696; font-size: 10px; }
.customer-task-order-data dd { margin: 5px 0 0; color: #263d54; font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-order-data .wide dd { font-size: 12px; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.55; }
.customer-task-cargo-total { display: block; min-width: 0; }
.customer-task-cargo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; align-items: end; column-gap: 0; row-gap: 5px; }
.customer-task-cargo-grid > * { min-width: 0; padding: 0 8px; box-sizing: border-box; text-align: right; }
.customer-task-cargo-grid > :nth-child(3n + 1) { padding-left: 0; }
.customer-task-cargo-grid > :nth-child(3n) { padding-right: 0; }
.customer-task-cargo-grid > :nth-child(3n + 2), .customer-task-cargo-grid > :nth-child(3n + 3) { border-left: 1px solid #dce5eb; }
.customer-task-cargo-label { color: #778a99; font-size: 9px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.customer-task-cargo-grid > strong { color: #173f63; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.customer-task-order-factories { margin-top: 15px; border-top: 1px solid #dce4eb; }
.customer-task-order-factories h4 { margin: 0 0 7px; color: #66798b; font-size: 10px; font-weight: 700; }
.customer-task-order-factory-row { min-height: 47px; padding: 9px 0; border-top: 1px solid #dce4eb; display: block; }
.customer-task-order-factory-row strong { display: block; min-width: 0; color: #1d456d; font-size: 13px; font-weight: 750; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-order-factory-row span { display: block; margin-top: 3px; color: #637689; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.customer-task-order-factory-row .customer-task-order-factory-product { margin-top: 2px; }
.customer-task-order-factory-row.target { margin: 4px 0; padding: 10px 11px; border: 1px solid #b9d0e1; border-radius: 6px; background: #edf5fa; box-shadow: inset 3px 0 0 #3f789f, 0 3px 9px rgba(28, 68, 99, .06); }
.customer-task-order-factory-row strong em { display: inline-flex; min-height: 19px; margin-left: 8px; padding: 0 7px; border: 1px solid #abc6da; border-radius: 10px; align-items: center; vertical-align: 1px; background: #fff; color: #2b638d; font-size: 9px; font-style: normal; font-weight: 700; }
.customer-task-order-factories details { border-top: 1px solid #dce4eb; }
.customer-task-order-factories summary { padding: 8px 0 2px; color: #245d8e; font-size: 10px; font-weight: 650; cursor: pointer; list-style-position: inside; }
.customer-task-order-factories details:not([open]) > .customer-task-order-factory-row { display: none; }
.customer-task-preorder-scope { margin-top: 13px; padding: 10px 0; border-top: 1px solid #dce4eb; border-bottom: 1px solid #dce4eb; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.customer-task-preorder-scope div { min-width: 0; }
.customer-task-preorder-scope span { display: block; color: #7a8998; font-size: 9px; }
.customer-task-preorder-scope strong { display: block; margin-top: 4px; color: #244d71; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.customer-task-preorder-dates { margin: 0 0 16px; padding: 12px 0; border-top: 1px solid #dce4eb; border-bottom: 1px solid #dce4eb; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
.customer-task-preorder-dates span { display: block; color: #7d8b98; font-size: 9px; }
.customer-task-preorder-dates strong { display: block; margin-top: 3px; color: #2b4863; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.customer-task-order-link { margin-top: auto; padding: 10px 2px 0; color: #245d8e; font-size: 11px; font-weight: 650; text-align: center; }
.customer-task-general-meta { margin-top: 14px; padding: 11px; border: 1px solid #dce4eb; border-radius: 5px; background: #fff; }
.customer-task-general-meta span { display: block; color: #788696; font-size: 10px; }
.customer-task-general-meta strong { display: block; margin-top: 4px; color: #26384a; font-size: 12px; }
.customer-task-conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f7f9fb; }
.customer-task-conversation > .customer-task-subhead { flex: 0 0 auto; min-height: 72px; box-sizing: border-box; padding: 16px 18px 12px; background: #fff; border-bottom: 1px solid #dce4eb; }
.customer-task-conversation .customer-task-detail-meta { flex: 0 0 auto; padding: 9px 18px; }
.customer-task-conversation .customer-task-thread { min-height: 0; }
.customer-task-conversation-empty { margin: auto; color: #8b98a5; text-align: center; }
.customer-task-conversation-empty > span { width: 46px; height: 46px; margin: 0 auto 12px; border: 1px solid #c4d0db; border-radius: 50%; display: grid; place-items: center; color: #2d608b; font-weight: 700; }
.customer-task-conversation-empty strong { color: #526579; font-size: 13px; }
.customer-task-detail-context { flex: 0 0 auto; margin: 8px 18px 0; border: 1px solid #dce4eb; border-radius: 5px; background: #fff; }
.customer-task-detail-context > summary { padding: 9px 11px; color: #526a80; font-size: 11px; cursor: pointer; list-style-position: inside; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-task-detail-context[open] > summary { border-bottom: 1px solid #e1e7ec; color: #174e84; }
.customer-task-detail-context .customer-task-context { margin: 0; border: 0; border-radius: 0; }
.customer-task-inline-context { display: none; }

/* Visual refinement: shared materials for the client portal task workspace. */
.customer-task-panel {
  background: #f8fafc;
  border-color: #afc1d2;
  box-shadow: -18px 0 46px rgba(17, 45, 74, .18), 0 0 0 1px rgba(255, 255, 255, .8);
}
.customer-task-head {
  background: #1c456e;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.customer-task-head span { color: #b8cee1; }
.customer-task-icon-button {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.customer-task-icon-button:hover { border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .15); }

.customer-task-sidebar {
  background: #fbfcfe;
  border-right-color: #d4e0ea;
}
.customer-task-sidebar-head {
  background: #ffffff;
  border-bottom-color: #dce6ee;
}
.customer-task-pane-title > span { color: #9a7130; }
.customer-task-filter-tabs { border-bottom-color: #dce6ee; background: #fbfcfe; }
.customer-task-filter-tabs button { color: #718397; transition: background-color 160ms ease, color 160ms ease; }
.customer-task-filter-tabs button:hover { background: #f0f5f9; color: #265d8c; }
.customer-task-filter-tabs button.active {
  border-color: #bfd4e6;
  background: #eaf3fa;
  color: #164e7e;
  box-shadow: inset 0 -2px 0 #2b6a9c;
}
.customer-task-sidebar .customer-task-list { background: #fbfcfe; }
.customer-task-sidebar .customer-task-row {
  border-bottom-color: #e2eaf1;
  background: #fbfcfe;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.customer-task-sidebar .customer-task-row:hover { background: #f2f7fb; }
.customer-task-sidebar .customer-task-row.active {
  background: #edf5fb;
  box-shadow: inset 3px 0 0 #2a6898;
}
.customer-task-sidebar .customer-task-row.unread { background: #fdfefe; }
.customer-task-sidebar .customer-task-row.unread .customer-task-row-main > strong { color: #173f65; }
.customer-task-sidebar .customer-task-row-avatar { background: #e1edf6; color: #225d8c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.customer-task-sidebar .customer-task-row.unread .customer-task-row-avatar { box-shadow: 0 0 0 3px #f8e9e9; }
.customer-task-unread,
.customer-task-sidebar .customer-task-unread { background: #bc5555; }

.customer-task-order-info {
  background: #f5f8fb;
  border-right-color: #d4e0ea;
}
.customer-task-order-info > header,
.customer-task-route,
.customer-task-order-data div,
.customer-task-order-factories,
.customer-task-order-factory-row,
.customer-task-order-factories details { border-color: #d8e3ec; }
.customer-task-order-no { color: #183c61; }
.customer-task-order-factory-row strong { color: #1b4c78; }
.customer-task-order-link { color: #245f90; }
.customer-task-order-factories { margin-top: 13px; border-top: 0; }
.customer-task-order-factories h4 {
  min-height: 31px;
  box-sizing: border-box;
  margin: 0 0 7px;
  padding: 0;
  border-top: 1px solid #d8e3ec;
  border-bottom: 1px solid #d8e3ec;
  color: #687d90;
  display: flex;
  align-items: center;
}
.customer-task-order-factory-row { border-top: 0; }

.customer-task-conversation { background: #f7f9fc; }
.customer-task-conversation > .customer-task-subhead {
  background: #ffffff;
  border-bottom-color: #d8e3ec;
}
.customer-task-detail-meta { background: #f2f6fa; border-bottom-color: #d8e3ec; }
.customer-task-thread { background: #f8fafc; }
.customer-task-message header strong { color: #4c637a; }
.customer-task-message header time { color: #93a2b0; }
.customer-task-message p {
  border-color: #d7e1ea;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(21, 48, 75, .045);
}
.customer-task-message.client p { border-color: #b8d2e5; background: #e9f3fa; }
.customer-task-message-attachments a { border-color: #c7d8e6; background: #fbfdff; color: #255f8f; }
.customer-task-reply-form { border-top-color: #d8e3ec; background: #fbfcfe; }
.customer-task-reply-form textarea {
  border-color: #b7c9d9;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(16, 44, 71, .03);
}
.customer-task-send { border-color: #123f6a; background: #1a5688; }
.customer-task-send:hover { background: #174b78; }
.customer-task-complete { border-color: #c6d3de; background: #ffffff; color: #526a7f; }
.customer-task-complete:hover { border-color: #9fb5c8; background: #f4f8fb; }

.customer-task-sidebar .customer-task-list,
.customer-task-order-info,
.customer-task-thread {
  scrollbar-width: thin;
  scrollbar-color: #bccbd8 transparent;
}
.customer-task-sidebar .customer-task-list::-webkit-scrollbar,
.customer-task-order-info::-webkit-scrollbar,
.customer-task-thread::-webkit-scrollbar { width: 7px; }
.customer-task-sidebar .customer-task-list::-webkit-scrollbar-thumb,
.customer-task-order-info::-webkit-scrollbar-thumb,
.customer-task-thread::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #bccbd8; background-clip: padding-box; }

/* Stronger portal-aligned visual identity without changing the workspace layout. */
.customer-task-head {
  background: #1a4773;
  box-shadow: inset 0 -3px 0 #b48a43;
}
.customer-task-head h2 { font-weight: 700; }
.customer-task-sidebar-head,
.customer-task-order-info > header {
  position: relative;
  background: #fbfcfe;
}
.customer-task-sidebar-head::after,
.customer-task-order-info > header::after {
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 2px;
  background: #c7a264;
  content: "";
}
.customer-task-order-info > header::after { right: 2px; left: 2px; }
.customer-task-pane-title > strong,
.customer-task-pane-title > h3 { color: #183b5d; font-weight: 750; }
.customer-task-filter-tabs button.active {
  background: #dceefa;
  box-shadow: inset 0 -3px 0 #24699d;
}
.customer-task-sidebar .customer-task-row.active {
  background: #dceefa;
  box-shadow: inset 4px 0 0 #1e628f;
}
.customer-task-sidebar .customer-task-row.active .customer-task-row-main > strong { color: #123f68; }
.customer-task-sidebar .customer-task-row.active .customer-task-row-avatar { background: #cfe4f3; color: #164f7d; }
.customer-task-order-no {
  margin-left: 0;
  padding-left: 10px;
  border-left: 3px solid #b48a43;
  color: #163e64;
}
.customer-task-order-info > header { border-bottom-color: #cfdde8; }
.customer-task-conversation > .customer-task-subhead {
  box-shadow: inset 0 -2px 0 #c4dceb;
}
.customer-task-detail-meta {
  background: #eaf2f8;
  box-shadow: inset 0 -1px 0 #cbdce9;
}
.customer-task-detail-meta strong { color: #183f63; }
.customer-task-thread { background: #f5f8fb; }
.customer-task-message.employee p { border-left: 3px solid #b48a43; }
.customer-task-message.client p { border-right: 3px solid #4d87af; }

.customer-task-read-receipt {
  width: fit-content;
  margin: 6px 3px 0 auto;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0;
  box-shadow: 0 2px 5px rgba(31, 48, 64, .05);
}

.customer-task-read-receipt i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentColor;
}

.customer-task-read-receipt.unread {
  border-color: #d8bd86;
  background: #fff8e9;
  color: #8a6425;
}

.customer-task-read-receipt.read {
  border-color: #a8cfc7;
  background: #edf8f5;
  color: #33736a;
}
.customer-task-reply-form {
  background: #ffffff;
  box-shadow: inset 0 3px 0 #d9e8f3;
}
.customer-task-reply-form textarea:focus {
  border-color: #4d7fa5;
  box-shadow: 0 0 0 3px rgba(42, 103, 151, .13), inset 0 1px 2px rgba(16, 44, 71, .03);
}
.customer-task-send {
  min-width: 96px;
  border-color: #164b77;
  background: #1e5d90;
  box-shadow: 0 2px 0 #123e65;
}
.customer-task-send:hover { background: #174e7d; }

.customer-task-filter-tabs {
  margin: 8px 10px 10px;
  padding: 4px;
  border: 1px solid #b7c8d6;
  border-radius: 8px;
  gap: 4px;
  background: linear-gradient(180deg, #e6edf3 0%, #dbe5ed 100%);
  box-shadow:
    inset 0 2px 4px rgba(28, 57, 82, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .82),
    0 4px 10px rgba(24, 55, 82, .10);
}
.customer-task-filter-tabs button,
.customer-task-filter-tabs button:last-child {
  min-height: 50px;
  padding: 6px 2px 7px;
  border: 1px solid #c5d2dc;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f7 100%);
  color: #64788b;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #b6c4cf,
    0 4px 7px rgba(31, 61, 87, .07);
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.customer-task-filter-tabs button span {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.customer-task-filter-tabs button b {
  min-width: 22px;
  color: #536a7f;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #fff;
}
.customer-task-filter-tabs button:hover {
  border-color: #91acc1;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1f7 100%);
  color: #245d89;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9eb6c8, 0 6px 10px rgba(31, 72, 105, .11);
  transform: translateY(-1px);
}
.customer-task-filter-tabs button.active,
.customer-task-filter-tabs button.active:hover {
  border-color: #286692;
  background: linear-gradient(180deg, #3b7dad 0%, #256895 52%, #1d5681 100%);
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 0 rgba(8, 42, 69, .28),
    0 3px 0 #174c75,
    0 7px 12px rgba(22, 72, 109, .20);
  transform: translateY(-1px);
}
.customer-task-filter-tabs button.active span { color: #eef8ff; text-shadow: 0 1px 2px rgba(4, 30, 50, .32); }
.customer-task-filter-tabs button.active b { color: #fff; text-shadow: 0 2px 3px rgba(4, 30, 50, .34); }
.customer-task-filter-tabs button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(18, 49, 74, .18), 0 1px 0 #9eb0be; }

.customer-task-sidebar .customer-task-list {
  padding: 6px 7px 9px;
  background: linear-gradient(180deg, #f2f6f9 0%, #edf2f6 100%);
}
.customer-task-sidebar .customer-task-row {
  width: 100%;
  min-height: 70px;
  box-sizing: border-box;
  margin: 0 0 7px;
  padding: 10px 10px;
  border: 1px solid #d5e0e8;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 2px 5px rgba(28, 59, 84, .07), inset 0 1px 0 #fff;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}
.customer-task-sidebar .customer-task-row:last-child { margin-bottom: 0; border-bottom: 1px solid #d5e0e8; }
.customer-task-sidebar .customer-task-row:hover {
  border-color: #b5cbdc;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fb 100%);
  box-shadow: 0 4px 9px rgba(28, 69, 101, .11), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}
.customer-task-sidebar .customer-task-row.unread { background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%); }
.customer-task-sidebar .customer-task-row.active {
  border-color: #9fbed4;
  background: linear-gradient(180deg, #eff7fc 0%, #e3f0f8 100%);
  box-shadow: inset 4px 0 0 #23658f, inset 0 1px 0 #fff, 0 4px 9px rgba(30, 78, 114, .12);
  transform: none;
}

.customer-task-sidebar .customer-task-primary-footer {
  padding: 13px 14px 16px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #fbfcfe 0%, #f2f6f9 100%);
}
.customer-task-sidebar .customer-task-primary,
.customer-task-form > .customer-task-primary,
.customer-task-send {
  border: 1px solid #174c76;
  background: linear-gradient(180deg, #3477aa 0%, #225f91 52%, #194f7c 100%);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(7, 38, 63, .24), 0 3px 0 #123f65, 0 7px 12px rgba(21, 68, 103, .17);
  text-shadow: 0 1px 2px rgba(4, 27, 46, .32);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.customer-task-sidebar .customer-task-primary {
  width: 210px;
  max-width: 100%;
  min-height: 43px;
  border-radius: 22px;
  font-size: 12px;
}
.customer-task-form > .customer-task-primary {
  display: block;
  width: 148px;
  min-height: 42px;
  margin: 0 0 2px auto;
  border-radius: 22px;
}
.customer-task-send {
  width: 104px;
  min-width: 104px;
  min-height: 38px;
  border-radius: 20px;
}
.customer-task-sidebar .customer-task-primary:hover,
.customer-task-form > .customer-task-primary:hover,
.customer-task-send:hover {
  background: linear-gradient(180deg, #3f84b8 0%, #276a9e 52%, #1c5785 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(7, 38, 63, .21), 0 4px 0 #123f65, 0 9px 15px rgba(21, 68, 103, .21);
  transform: translateY(-1px);
}
.customer-task-sidebar .customer-task-primary:active,
.customer-task-form > .customer-task-primary:active,
.customer-task-send:active { transform: translateY(2px); box-shadow: inset 0 3px 6px rgba(6, 34, 56, .22), 0 1px 0 #123f65; }

.customer-task-order-content {
  padding-top: 1px;
}
.customer-task-preorder-history-notice {
  margin: 12px 0 0;
  padding: 10px 11px;
  border: 1px solid #d9e2e9;
  border-left: 3px solid #91a6b8;
  border-radius: 5px;
  background: #f7fafc;
  color: #687b8c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.customer-task-preorder-history-notice.converted { border-left-color: #4b8eb8; background: #f2f8fc; }
.customer-task-preorder-history-notice.deleted { border-left-color: #a78b62; background: #fcfaf6; }
.customer-task-preorder-history-notice strong,
.customer-task-preorder-history-notice span { display: block; }
.customer-task-preorder-history-notice strong { color: #506a7d; font-size: 11px; font-weight: 700; }
.customer-task-preorder-history-notice span { margin-top: 4px; color: #748595; font-size: 10px; line-height: 1.55; }
.customer-task-preorder-history-notice a { margin-right: 5px; color: #246795; font-weight: 700; text-decoration: none; }
.customer-task-preorder-history-notice a:hover { text-decoration: underline; }
.customer-task-preorder-unavailable > p { margin: 12px 0 0; color: #58718a; font-size: 11px; line-height: 1.55; }
.customer-task-preorder-unavailable .customer-task-preorder-history-note { color: #8391a0; font-size: 10px; }
.customer-task-preorder-order-number { min-height: 47px; margin: 10px 0 0; padding: 8px 10px; border: 1px solid #d3e0e9; border-radius: 5px; background: #fbfdfe; box-shadow: inset 0 1px 0 #fff; }
.customer-task-preorder-order-number span { display: block; color: #7a8998; font-size: 9px; font-weight: 700; }
.customer-task-preorder-order-number strong { display: block; min-height: 17px; margin-top: 4px; color: #244f78; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.customer-task-preorder-order-number strong.empty { color: transparent; }
.customer-task-preorder-order-number a { color: inherit; text-decoration: none; }
.customer-task-preorder-order-number a:hover { text-decoration: underline; text-decoration-color: #b58a43; text-underline-offset: 3px; }
.customer-task-preorder-order-number a span { display: inline; margin-left: 3px; color: #a57935; font-size: 11px; }
.customer-task-order-no {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 15px 0 0;
  padding: 11px 12px 12px 14px;
  border: 1px solid #c8d8e5;
  border-left: 4px solid #b58a43;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fa 100%);
  color: #17466f;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(27, 63, 92, .08);
  font-size: 17px;
  line-height: 1.35;
}
.customer-task-order-no::before {
  content: attr(data-reference-label);
  display: block;
  margin-bottom: 4px;
  color: #8b6b34;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}
.customer-task-order-no-link:hover {
  border-color: #9dbbd1;
  border-left-color: #9e7533;
  background: linear-gradient(180deg, #fff 0%, #eaf3f8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 11px rgba(27, 70, 103, .12);
  text-decoration: none;
  transform: translateY(-1px);
}
.customer-task-order-factories {
  margin: 16px -16px 0;
  padding: 12px 16px 13px;
  border-top: 1px solid #d5e1ea;
  border-bottom: 1px solid #d5e1ea;
  background: linear-gradient(180deg, #f9fbfd 0%, #f3f7fa 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(28, 62, 89, .035);
}
.customer-task-order-factories h4 {
  min-height: 22px;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  color: #526d84;
  font-size: 10px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 7px;
}
.customer-task-order-factories h4::before {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #b78a40;
  box-shadow: 0 1px 2px rgba(93, 67, 25, .18);
  content: "";
}
.customer-task-order-factory-row {
  min-height: 48px;
  padding: 9px 10px;
  border-top: 1px solid #dce6ed;
  background: rgba(255, 255, 255, .62);
}
.customer-task-order-factory-row:first-of-type { border-top: 0; }
.customer-task-order-factory-row strong { font-size: 14px; }
.customer-task-order-factory-row span { font-size: 11px; }
.customer-task-route {
  margin: 0 -16px;
  padding: 15px 16px 16px;
  border-top: 0;
  border-bottom: 1px solid #cddde8;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  background: linear-gradient(180deg, #eef5fa 0%, #e7f0f6 100%);
  box-shadow: inset 0 2px 4px rgba(31, 72, 103, .055), inset 0 1px 0 #fff;
}
.customer-task-route span { color: #6e8294; font-size: 9px; font-weight: 650; }
.customer-task-route strong { margin-top: 6px; color: #173f63; font-size: 15px; font-weight: 800; }
.customer-task-route i {
  width: 30px;
  height: 30px;
  border: 1px solid #b9ccdb;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #39749f;
  box-shadow: 0 2px 5px rgba(29, 71, 103, .10), inset 0 1px 0 #fff;
  font-size: 15px;
}
.customer-task-order-schedule,
.customer-task-preorder-dates {
  margin: 0 -16px;
  padding: 14px 16px 13px;
  border-top: 0;
  border-bottom: 1px solid #d5e1ea;
  background: #fff;
}
.customer-task-order-schedule h4 {
  margin-bottom: 10px;
  color: #526d84;
  font-weight: 750;
}
.customer-task-order-leg {
  padding: 10px 0 11px 11px;
  border-top: 1px solid #e0e8ee;
  border-left: 3px solid #8db2cc;
}
.customer-task-order-leg:first-of-type { border-top: 0; }
.customer-task-order-leg > b { color: #17466f; font-size: 13px; }
.customer-task-order-data {
  margin: 0 -16px;
  padding: 14px 16px 17px;
  background: linear-gradient(180deg, #f7fafc 0%, #f1f6f9 100%);
  column-gap: 14px;
}
.customer-task-order-data div {
  min-width: 0;
  padding: 10px 11px 11px;
  border: 1px solid #d5e1e9;
  border-radius: 5px;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(29, 64, 91, .05);
}
.customer-task-order-data .wide {
  margin-top: 12px;
  padding-top: 10px;
  border: 1px solid #c8d9e5;
  border-left: 3px solid #b58a43;
}
.customer-task-order-data dt { color: #748695; font-size: 9px; font-weight: 650; }
.customer-task-order-data dd { color: #1c405f; font-size: 14px; font-weight: 800; }
.customer-task-order-data .wide dd { color: #173f63; font-size: 12px; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.55; }

.customer-task-thread {
  padding: 18px 20px 22px;
  background: linear-gradient(180deg, #f6f9fb 0%, #f2f6f9 100%);
  display: flex;
  flex-direction: column;
}
.customer-task-message { margin-bottom: 17px; }
.customer-task-message header { margin-bottom: 7px; }
.customer-task-message header time { color: #8293a2; }
.customer-task-message header strong { color: #405d74; font-weight: 750; }
.customer-task-message p {
  position: relative;
  padding: 12px 14px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #20384e;
  font-size: 12px;
  line-height: 1.7;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 14px rgba(27, 57, 82, .11),
    0 1px 2px rgba(27, 57, 82, .08);
}
.customer-task-message.employee p {
  border: 1px solid #d1dce5;
  border-left: 3px solid #b48a43;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}
.customer-task-message.client p {
  border: 1px solid #aecadf;
  border-right: 3px solid #397ba8;
  background: linear-gradient(180deg, #eef7fc 0%, #dfedf6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 14px rgba(35, 91, 130, .14), 0 1px 2px rgba(27, 57, 82, .08);
}
.customer-task-message p::before {
  position: absolute;
  top: 12px;
  width: 8px;
  height: 13px;
  filter: drop-shadow(0 2px 1px rgba(28, 58, 81, .08));
  content: "";
}
.customer-task-message.employee p::before {
  left: -8px;
  background: #b48a43;
  clip-path: polygon(100% 0, 100% 100%, 0 48%);
}
.customer-task-message.client p::before {
  right: -8px;
  background: #397ba8;
  clip-path: polygon(0 0, 100% 48%, 0 100%);
}

.customer-task-resolution-guide {
  width: min(520px, calc(100% - 48px));
  margin: auto auto 8px;
  padding-top: 30px;
  color: #8493a0;
  font-size: 11px;
  font-style: normal;
  line-height: 1.8;
  text-align: center;
}
.customer-task-resolution-guide span { display: block; }
.customer-task-resolution-guide-action {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #91a9ba;
  background: transparent;
  color: #58748a;
  font: inherit;
  font-weight: 750;
  line-height: inherit;
  cursor: pointer;
}
.customer-task-resolution-guide-action:hover {
  border-bottom-color: #4d7896;
  color: #245b82;
}
.customer-task-resolution-guide-action:focus-visible {
  border-radius: 2px;
  outline: 2px solid #93b6cc;
  outline-offset: 3px;
}

.customer-task-reply-form {
  padding: 15px 17px 17px;
  border-top: 1px solid #cbdbe7;
  background: linear-gradient(180deg, #fbfdfe 0%, #f3f7fa 100%);
  box-shadow: inset 0 3px 0 #d8e7f1, 0 -5px 14px rgba(31, 64, 90, .045);
}
.customer-task-field textarea,
.customer-task-reply-form textarea {
  box-sizing: border-box;
  border: 1px solid #9fb7c9;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #213d55;
  box-shadow: inset 0 2px 5px rgba(27, 58, 84, .07), inset 0 1px 0 #fff, 0 3px 8px rgba(27, 64, 92, .07);
  caret-color: #246999;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.customer-task-reply-form textarea {
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.65;
}
.customer-task-field textarea::placeholder,
.customer-task-reply-form textarea::placeholder { color: #8998a5; }
.customer-task-field textarea:hover,
.customer-task-reply-form textarea:hover {
  border-color: #789bb4;
  box-shadow: inset 0 2px 5px rgba(27, 58, 84, .075), inset 0 1px 0 #fff, 0 4px 10px rgba(27, 72, 105, .10);
}
.customer-task-field textarea:focus,
.customer-task-reply-form textarea:focus {
  border-color: #3978a4;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(25, 57, 82, .045), 0 0 0 3px rgba(57, 120, 164, .14), 0 5px 12px rgba(27, 72, 105, .12);
}
.customer-task-reply-form > div { margin-top: 11px; }
.customer-task-complete {
  min-width: 112px;
  min-height: 37px;
  padding: 0 16px;
  border: 1px solid #7895a9;
  border-radius: 19px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf1f5 100%);
  color: #385a72;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a4b6c3, 0 5px 9px rgba(30, 62, 87, .10);
  font-size: 11px;
  font-weight: 750;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}
.customer-task-complete:hover {
  border-color: #4c7897;
  background: linear-gradient(180deg, #fff 0%, #e0edf4 100%);
  color: #174d76;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #83a0b4, 0 7px 12px rgba(30, 75, 108, .14);
  transform: translateY(-1px);
}
.customer-task-complete.reopen {
  border-color: #9b814f;
  background: linear-gradient(180deg, #fffdf7 0%, #f2eadb 100%);
  color: #745a2b;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b9a47b, 0 5px 9px rgba(92, 70, 31, .10);
}
.customer-task-complete:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(30, 62, 87, .16), 0 1px 0 #8da3b3; }

.customer-task-confirm-layer {
  position: fixed;
  z-index: 9410;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(17, 37, 56, .30);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.customer-task-confirm-layer.open { opacity: 1; pointer-events: auto; }
.customer-task-confirm-dialog {
  width: min(420px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid #b9cbd9;
  border-top: 4px solid #b58a43;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
  box-shadow: 0 22px 55px rgba(12, 35, 54, .30), inset 0 1px 0 #fff;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  transform: translateY(10px) scale(.985);
  transition: transform 180ms ease;
}
.customer-task-confirm-layer.open .customer-task-confirm-dialog { transform: translateY(0) scale(1); }
.customer-task-confirm-mark {
  width: 42px;
  height: 42px;
  border: 1px solid #9bb7ca;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #eef6fb 0%, #dbeaf4 100%);
  color: #24658f;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(30, 75, 108, .12);
  font-size: 19px;
  font-weight: 800;
}
.customer-task-confirm-dialog small { color: #9a7130; font-size: 9px; font-weight: 750; }
.customer-task-confirm-dialog h3 { margin: 5px 0 0; color: #173c5d; font-size: 17px; line-height: 1.45; }
.customer-task-confirm-dialog p { margin: 8px 0 0; color: #687b8b; font-size: 11px; line-height: 1.65; }
.customer-task-confirm-dialog footer { grid-column: 1 / -1; margin-top: 5px; display: flex; justify-content: flex-end; gap: 9px; }
.customer-task-confirm-dialog footer button {
  min-width: 104px;
  min-height: 37px;
  padding: 0 15px;
  border: 1px solid #b3c1cc;
  border-radius: 19px;
  background: linear-gradient(180deg, #fff 0%, #edf2f5 100%);
  color: #53697a;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a9b7c1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.customer-task-confirm-dialog footer button.primary {
  min-width: 132px;
  border-color: #174d77;
  background: linear-gradient(180deg, #3477aa 0%, #225f91 52%, #194f7c 100%);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(7, 38, 63, .24), 0 3px 0 #123f65, 0 7px 12px rgba(21, 68, 103, .18);
}
.customer-task-reply-form.completed {
  background: linear-gradient(180deg, #f3f5f7 0%, #eceff2 100%);
  box-shadow: inset 0 3px 0 #d8dee3, 0 -4px 12px rgba(40, 55, 68, .035);
}
.customer-task-reply-form.completed textarea,
.customer-task-reply-form textarea:disabled {
  border-color: #c6cdd3;
  background: linear-gradient(180deg, #eef1f3 0%, #e7ebee 100%);
  color: #8a949c;
  box-shadow: inset 0 2px 5px rgba(51, 65, 76, .08), inset 0 1px 0 rgba(255, 255, 255, .72);
  cursor: not-allowed;
  opacity: 1;
}
.customer-task-reply-form.completed textarea::placeholder { color: #929ca4; opacity: 1; }
.customer-task-reply-form .customer-task-send:disabled {
  border-color: #aeb7be;
  background: linear-gradient(180deg, #d9dee2 0%, #c7cdd2 100%);
  color: #7b858d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #abb3b9;
  text-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

@media (max-width: 1120px) {
  .customer-task-panel { width: min(980px, calc(100vw - 32px)); }
  .customer-task-workspace { grid-template-columns: 280px minmax(0, 1fr); }
  .customer-task-workspace.sidebar-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
  .customer-task-order-info { display: none; }
  .customer-task-inline-context { display: block; flex: 0 0 auto; margin: 8px 18px 0; padding: 8px 10px; border: 1px solid #dce4eb; border-radius: 5px; background: #fff; color: #536a80; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 760px) {
  .customer-task-panel { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; transform: translateX(100%); }
  .customer-task-center.open .customer-task-panel { transform: translateX(0); }
  .customer-task-workspace { display: block; }
  .customer-task-sidebar { height: 100%; border-right: 0; }
  .customer-task-order-info { display: none; }
  .customer-task-conversation { height: 100%; }
  .customer-task-workspace.conversation-active .customer-task-sidebar { display: none; }
  .customer-task-workspace:not(.conversation-active) .customer-task-conversation { display: none; }
  .customer-task-conversation > .customer-task-subhead { min-height: 68px; padding: 14px; }
  .customer-task-detail-context { margin: 8px 12px 0; }
  .customer-task-inline-context { margin: 8px 12px 0; }
  .customer-task-resolution-guide { width: calc(100% - 24px); padding-top: 24px; }
  .customer-task-field textarea { height: 120px; min-height: 120px; }
}

/* Attachments are first-class conversation content on both sides. */
.customer-task-message-attachments {
  width: min(360px, 100%);
  margin: 9px 2px 0;
  display: grid;
  gap: 7px;
}
.customer-task-message.employee .customer-task-message-attachments { margin-right: auto; }
.customer-task-message.client .customer-task-message-attachments { margin-left: auto; }
.customer-task-message-attachments .customer-task-attachment-card {
  width: 100%;
  min-width: 220px;
  min-height: 58px;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid #afc7d9;
  border-left: 3px solid #397ba8;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff 0%, #edf5fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgba(28, 70, 101, .12);
  color: #1f4f75;
  text-decoration: none;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.customer-task-message-attachments .customer-task-attachment-card:hover {
  border-color: #6f9ab9;
  background: linear-gradient(180deg, #fff 0%, #e5f0f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(28, 75, 110, .17);
  transform: translateY(-1px);
}
.customer-task-attachment-kind {
  width: 38px;
  height: 38px;
  border: 1px solid #9dbbd1;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #edf6fb 0%, #d9eaf4 100%);
  color: #235f8c;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 10px;
  font-weight: 800;
}
.customer-task-attachment-meta { min-width: 0; display: grid; gap: 3px; }
.customer-task-attachment-meta strong {
  min-width: 0;
  color: #173f63;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-task-attachment-meta small { color: #718497; font-size: 9px; line-height: 1.3; }
.customer-task-attachment-download {
  width: 24px;
  height: 24px;
  border: 1px solid #b8cbd9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2c6c9a;
  box-shadow: 0 2px 5px rgba(28, 68, 98, .10);
  font-size: 13px;
  font-weight: 800;
}

.customer-task-file-control {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.customer-task-form > .customer-task-file-control {
  margin-top: 16px;
  padding: 8px 9px;
  border: 1px solid #d2dfe8;
  border-radius: 7px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(28, 65, 94, .06);
}
.customer-task-file-picker {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px 0 8px;
  border: 1px solid #8fadc3;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #e8f1f6 100%);
  color: #245f8c;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a8bdcc, 0 5px 9px rgba(27, 68, 99, .10);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.customer-task-file-picker:hover {
  border-color: #5f8cac;
  background: linear-gradient(180deg, #fff 0%, #dfedf5 100%);
  transform: translateY(-1px);
}
.customer-task-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.customer-task-file-picker-mark {
  width: 19px;
  height: 19px;
  border: 1px solid #a6c0d3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 13px;
  line-height: 1;
}
.customer-task-selected-file {
  min-width: 0;
  color: #82909c;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-task-selected-file.has-file { color: #174d76; font-size: 11px; font-weight: 750; }
.customer-task-reply-actions { align-items: center; }
.customer-task-reply-actions:has(> .field-feedback-message) { flex-wrap: wrap; }
.customer-task-reply-actions > .field-feedback-message { order: 1; flex-basis: 100%; }
.customer-task-reply-actions > .customer-task-file-control { flex: 1 1 auto; }
.customer-task-reply-commands { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.customer-task-reply-form.completed .customer-task-file-picker,
.customer-task-file-picker.disabled {
  border-color: #c1c9cf;
  background: linear-gradient(180deg, #e8ecef 0%, #dce1e5 100%);
  color: #8a939a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 #bcc4ca;
  cursor: not-allowed;
  transform: none;
}
.customer-task-reply-form.completed .customer-task-selected-file { color: #939ca3; }

@media (max-width: 760px) {
  .customer-task-reply-actions { flex-wrap: wrap; }
  .customer-task-reply-actions > .customer-task-file-control { flex-basis: 100%; }
  .customer-task-reply-commands { width: 100%; justify-content: space-between; }
  .customer-task-message-attachments .customer-task-attachment-card { min-width: 0; }
}

.customer-task-order-content.preorder-context .customer-task-preorder-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.customer-task-order-content.preorder-context .customer-task-preorder-status {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid #abc9dc;
  border-radius: 16px;
  background: linear-gradient(#fff, #e4f1f8);
  box-shadow: inset 0 1px #fff, 0 3px 6px rgba(27, 57, 82, .1);
  color: #285b80;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.customer-task-order-content.preorder-context .customer-task-preorder-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
}
.customer-task-order-content.preorder-context .customer-task-preorder-status.attention {
  border-color: #e5bdb5;
  background: linear-gradient(#fff, #fbece9);
  color: #9c483c;
}
.customer-task-order-factory-row .customer-task-preorder-factory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.customer-task-order-factory-row .customer-task-preorder-factory-head strong { flex: 1 1 auto; }
.customer-task-order-factory-row .customer-task-preorder-factory-attention {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #ebc2ba;
  border-radius: 10px;
  background: #fff1ee;
  color: #a45247;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
body:not(.client-task-center-enabled) #customerTaskCenter,
body:not(.client-task-center-enabled) #pageCustomerTaskButton,
body:not(.client-task-center-enabled) #customerTaskQuickOpen,
body:not(.client-task-center-enabled) .customer-task-launcher { display: none !important; }