/* Tasks: one queue for Customer Service */
.tktabs { display: flex; align-items: center; max-width: 100%; min-width: 0; overflow-x: auto; }
.tkrefresh { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; flex: none; }
.tkrefresh .ic { width: 16px; height: 16px; }
.tkkinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tkgap { height: 12px; }
.tkchip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--grey-ink); font: inherit; font-size: var(--fs-14); cursor: pointer; }
.tkchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tkchip .n { opacity: 0.7; margin-left: 2px; }
.tklist { list-style: none; margin: 0; padding: 0 0 72px; display: flex; flex-direction: column; gap: 6px; }

/* A row: the title button stretches over the whole row, so a click anywhere opens it; Take and Assign sit above it */
.tkrow { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px 140px 210px; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 10px; background: var(--surface); color: var(--ink); }
.tkrow:hover { border-color: var(--input-strong, #7C8A83); }
.tkrow.urgent { border-left-color: var(--red); }
.tkrow.over { background: var(--red-bg); }
.tkkind { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--blue-bg, #E7EFF8); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tkmain { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tkopen { all: unset; display: block; min-width: 0; cursor: pointer; color: var(--ink); }
.tkopen b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkrow .tkopen::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.tkopen:focus-visible { outline: none; }
.tkrow:focus-within:has(.tkopen:focus-visible), .tkmini:has(.tkopen:focus-visible) { outline: 2px solid var(--blue-btn, #4471B8); outline-offset: 2px; }
.tksub { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tksub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tksub .ic { width: 14px; height: 14px; flex: none; }
.tknext { font-size: 0.8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tknext.w { font-weight: 500; color: var(--muted); }
.tkdue { min-width: 0; }
.tkdue .kdue { white-space: normal; }
.tkwho { display: inline-flex; align-items: center; gap: 6px; min-width: 0; justify-self: start; }
.tkwho .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkasg { position: relative; z-index: 1; min-height: 36px; padding: 0 8px 0 4px; margin-left: -4px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; max-width: 100%; }
.tkasg:hover, .tkasg:focus-visible { border-color: var(--line); background: var(--surface); }
.tkasg .ic { width: 14px; height: 14px; flex: none; color: var(--muted); }
.tkacts { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.tktake { min-height: 32px; }

@media (max-width: 900px) {
  .tkrow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kind due" "main main" "who acts"; gap: 6px 10px; padding: 10px 12px; }
    .tkk { grid-area: kind; } .tkmain { grid-area: main; } .tkdue { grid-area: due; justify-self: end; } .tkwho { grid-area: who; } .tkacts { grid-area: acts; }
  .tkopen b, .tknext, .tksub span { white-space: normal; overflow-wrap: anywhere; }
  .tksub { align-items: flex-start; } .tksub .ic { margin-top: 2px; }
}
@media (max-width: 600px) { .tkrefresh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tktabs .tab { padding-left: 6px; padding-right: 6px; } .tktabs { gap: 0 12px; } }

/* Team (supervisors): one lane per person, Not taken first */
.tkteamhelp { margin: 12px 0; }
.tkteam { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; padding-bottom: 72px; }
.tklane { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px; min-width: 0; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.tklane.over { border-color: var(--blue-btn, #4471B8); box-shadow: 0 0 0 2px var(--blue-btn, #4471B8); }
.tklh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tklt { display: flex; flex-direction: column; min-width: 0; }
.tklt b, .tklt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tklt .st-active { color: var(--good); } .tklt .st-busy { color: var(--red); } .tklt .st-away { color: var(--amber); } .tklt .st-offline, .tklt .st-leave { color: var(--muted); }
.tkln { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0; color: var(--muted); }
.tkln .late { color: var(--red); font-weight: 600; } .tkln .soon { color: var(--amber); font-weight: 600; }
.tklempty { margin: 4px 0 0; }
.tkminis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tkmini { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--divider); border-left: 3px solid transparent; border-radius: 8px; background: var(--surface); cursor: grab; }
.tkmini.urgent { border-left-color: var(--red); }
.tkmini.over { background: var(--red-bg); }
.tkmini.dragging { opacity: 0.5; }
.tkmini .tkopen::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.tkmini .tkopen b { font-size: 0.875rem; }
.tkmini .tknext { font-size: 0.75rem; }
.tkmove, .tkmini > .small { position: relative; z-index: 1; justify-self: end; min-height: 32px; }
@media (max-width: 640px) { .tkteam { grid-template-columns: minmax(0, 1fr); } .tkmini { cursor: default; } }

/* ---------- My Day: queue rows built from Tasks (day.js) ---------- */
.qi.over { background: var(--red-bg); }
.qi.over:hover, .qi.over.sel { background: var(--red-bg); }
.qi .qdue { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.qnext { font-size: 0.8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qnext.w { font-weight: 500; color: var(--muted); }
.wqfree { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 20px 12px; border-top: 1px solid var(--divider); font-size: 0.875rem; color: var(--grey-ink); }
.wqsub { margin-top: 12px; }
@media (max-width: 640px) { .qi .qdue { align-items: flex-start; } .wqfree { padding: 10px 14px 12px; } .qnext { white-space: normal; } }

/* ---------- Parking (js/park.js) in Tasks and My Day ---------- */
.tkpnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tknext.rep { color: var(--good); }
.tkacts { gap: 6px; flex-wrap: wrap; }
.wqwait .fud { color: var(--amber); }
@media (max-width: 900px) { .tkpnote { white-space: normal; overflow-wrap: anywhere; } .tkacts { justify-content: flex-end; } }

/* ---------- Split view (1100px and wider): list left, the chosen task right ---------- */
.tkpage.wide { max-width: 1600px; }
.tksplit { display: grid; grid-template-columns: clamp(350px, 27vw, 460px) minmax(0, 1fr); gap: 16px; align-items: start; }
.tkcol { min-width: 0; }
.tksplit .tklist { padding-bottom: 72px; }
/* Rows stack in the narrower list column, as on a phone */
.tksplit .tkrow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kind due" "main main" "who acts"; gap: 6px 10px; padding: 10px 12px; }
.tksplit .tkk { grid-area: kind; } .tksplit .tkmain { grid-area: main; } .tksplit .tkdue { grid-area: due; justify-self: end; } .tksplit .tkwho { grid-area: who; } .tksplit .tkacts { grid-area: acts; }
.tksplit .tkopen b, .tksplit .tknext { white-space: normal; overflow-wrap: anywhere; }
.tkrow.sel { border-color: var(--blue-btn, #4471B8); box-shadow: inset 0 0 0 1px var(--blue-btn, #4471B8); }
.tkrow.sel:not(.over) { background: var(--blue-bg, #E7EFF8); }
.tkpane { min-width: 0; padding: 20px 24px; position: sticky; top: calc(var(--strip, 0px) + 16px); max-height: calc(100vh - var(--strip, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain; }
.tkpane.composing { position: static; max-height: none; overflow: visible; }
.tkpane .mlback { display: none; }
.tkpempty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; text-align: center; }
.tkpempty .ic { width: 28px; height: 28px; color: var(--muted); }
.tkph { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tkpt { margin: 10px 0 4px; font-size: 1.25rem; overflow-wrap: anywhere; }
.tkpn { margin: 0 0 12px; font-weight: 600; }
.tkpn.w { font-weight: 500; color: var(--muted); }
.tkfacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 16px; font-size: 0.875rem; }
.tkfacts dt { color: var(--muted); }
.tkfacts dd { margin: 0; overflow-wrap: anywhere; }
.tkpacts { display: flex; flex-wrap: wrap; gap: 8px; }
.tkpacts .btn .ic { width: 16px; height: 16px; }

/* ---------- Drop bar: drag a task onto someone (computer with a mouse) ---------- */
.tkdropbar { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .tkdropbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; }
  .tkdropbar ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .tkdrop { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 10px 3px 4px; border: 1px dashed var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-14, 0.875rem); color: var(--grey-ink); transition: background-color .12s, border-color .12s, opacity .12s; }
  .tkdc { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tkdc.late { color: var(--red); font-weight: 600; }
  body.tkdragging .tkdrop { border-color: var(--blue-btn, #4471B8); }
  body.tkdragging .tkdrop.no, body.tkdragging .tklane.no { opacity: 0.45; border-color: var(--line); }
  .tkdrop.over { background: var(--blue-bg, #E7EFF8); border-style: solid; color: var(--ink); box-shadow: 0 0 0 2px var(--blue-btn, #4471B8); }
  [data-tkdrag] { cursor: grab; }
  [data-tkdrag].dragging { opacity: 0.5; }
}
.asgav0.sm { width: 28px; height: 28px; }

/* ---------- Ageing: business hours in the queue (6 h onwards gets pinker; 1 business day is red) ---------- */
.tkk { display: flex; align-items: center; gap: 8px; min-width: 0; justify-self: stretch; }
.tkk .tkkind { flex: 0 1 auto; min-width: 0; }
.tkpick { position: relative; z-index: 1; width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue-btn, #4471B8); cursor: pointer; }
.tkrow.picked { box-shadow: inset 0 0 0 1px var(--blue-btn, #4471B8); }
.tkage { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkage.red { color: var(--red); font-weight: 600; }
.tksplit .tkdue { text-align: right; }
@media (max-width: 900px) { .tkdue { text-align: right; } }
.tkrow.age-1, .tkmini.age-1, .qi.age-1 { background: color-mix(in srgb, var(--red-bg) 22%, var(--surface)); }
.tkrow.age-2, .tkmini.age-2, .qi.age-2 { background: color-mix(in srgb, var(--red-bg) 45%, var(--surface)); }
.tkrow.age-3, .tkmini.age-3, .qi.age-3 { background: color-mix(in srgb, var(--red-bg) 68%, var(--surface)); }
.tkrow.age-4, .tkmini.age-4, .qi.age-4 { background: color-mix(in srgb, var(--red-bg) 88%, var(--surface)); }
.tkrow.age-red, .tkmini.age-red, .tkrow.over, .tkmini.over { background: var(--red-bg); }
.tkrow.age-red, .tkmini.age-red { border-left-color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.qi.age-red { background: var(--red-bg); }
.qi.age-red::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.qi .qage { font-size: 0.75rem; color: var(--muted); }
.qi.age-red .qage { color: var(--red); font-weight: 600; }

/* ---------- Selecting several ---------- */
.tkall { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; min-height: 32px; cursor: pointer; }
.tkall input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-btn, #4471B8); }
.tkbulk { position: sticky; top: calc(var(--strip, 0px) + 8px); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px;
  border: 1px solid var(--blue-btn, #4471B8); border-radius: 10px; background: var(--surface); box-shadow: var(--sh-2); }
.tkbulk .btn .ic { width: 16px; height: 16px; }

/* ---------- Workload (supervisors) ---------- */
.wksum { margin: 12px 0 8px; font-size: 0.9375rem; }
.wksum .late { color: var(--red); }
.wkbar0 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.wksort { display: inline-flex; gap: 6px; }
.wkkey { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.wkkey span { display: inline-flex; align-items: center; gap: 4px; }
.wkkey .wkm { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wklist { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wkrow { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 160px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.wkrow.on { border-color: var(--blue-btn, #4471B8); box-shadow: inset 0 0 0 1px var(--blue-btn, #4471B8); }
.wkrow.over { border-color: var(--blue-btn, #4471B8); box-shadow: 0 0 0 2px var(--blue-btn, #4471B8); background: var(--blue-bg, #E7EFF8); }
body.tkdragging .wkrow.no { opacity: 0.45; }
.wkwho { all: unset; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; border-radius: 8px; padding: 4px; }
.wkwho:focus-visible { outline: 2px solid var(--blue-btn, #4471B8); outline-offset: 2px; }
.wkwho:hover .tklt b { text-decoration: underline; }
.wkcs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.wkc { display: flex; flex-direction: column; min-width: 0; }
.wkc b { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkc span { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkc.late b { color: var(--red); } .wkc.soon b { color: var(--amber); }
.wkmix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--divider); }
.wkm { display: block; height: 100%; }
.wkm.m-email { background: #4471B8; } .wkm.m-kam { background: #2F8F7A; } .wkm.m-case { background: #C77B2A; } .wkm.m-sop { background: #8A6BB8; }
.wkm.none { width: 100%; background: transparent; }
.wkpick { margin-top: 8px; }
.wkph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0; }
.wkph h2 { margin: 0; font-size: 1.0625rem; }
@media (max-width: 900px) {
  .wkrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wkcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wkkey { margin-left: 0; }
}

/* Stacked rows: the kind and owner set the first column; due and actions sit right and wrap */
@media (max-width: 900px) { .tkacts { justify-self: end; } .tkk { max-width: 60vw; } .tkwho { min-width: max-content; } }
.tksplit .tkacts { justify-self: end; }

/* ---------- Split view, reading room (agent H): a narrow compact list, a roomy pane, and Expand ---------- */
/* Expand: the list (and its drop bar) step aside; the task gets the whole width */
.tksplit.focus { grid-template-columns: minmax(0, 1fr); }
.tksplit.focus .tkcol { display: none; }
.tkfocus { position: absolute; top: 12px; right: 16px; z-index: 1; }
.tkpane .mlread .mlh, .tkpane .tkph { padding-right: 96px; }
.tksplit.focus .tkpane .mlread .mlh, .tksplit.focus .tkpane .tkph { padding-right: 130px; }
.tkfocus .ic { width: 16px; height: 16px; }

/* Compact rows in the list column: title and due on top, next step and who it's from under it, type, owner and Take at the foot */
.tksplit .tklist { gap: 4px; }
.tksplit .tkrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; padding: 7px 10px; border-radius: 8px; }
.tksplit .tkrow::before { content: ""; order: 2; flex: 0 0 100%; height: 0; margin-bottom: -4px; }
.tksplit .tkrow .tkopen::after { border-radius: 8px; }
.tksplit .tkk { order: 3; flex: none; gap: 6px; max-width: 50%; }
.tksplit .tkmain { order: 0; flex: 1 1 0; align-self: flex-start; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; }
.tksplit .tkopen { flex: 1 0 100%; }
.tksplit .tkopen b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9375rem; }
.tksplit .tknext { order: 1; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; }
.tksplit .tksub { order: 2; flex: 1 1 0; min-width: 48px; font-size: 0.8125rem; gap: 6px; }
.tksplit .tksub .ic { display: none; }
.tksplit .tksub::before { content: "·"; flex: none; }
.tksplit .tkpnote { order: 3; flex: 1 0 100%; font-size: 0.75rem; }
.tksplit .tkdue { order: 1; flex: none; max-width: 45%; align-self: flex-start; }
.tksplit .tkdue .kdue { white-space: nowrap; }
.tksplit .tkage { margin-top: 1px; }
.tksplit .tkkind { font-size: 0.75rem; line-height: 20px; padding: 0 6px; max-width: 130px; }
.tksplit .tkwho { order: 4; flex: 0 1 auto; min-width: 0; }
.tksplit .tkwho .small { font-size: 0.8125rem; }
.tksplit .tkasg { min-height: 28px; }
.tksplit .tkacts { order: 5; flex: none; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tksplit .tkacts .qact { min-height: 28px; padding: 0 10px; box-shadow: none; }
.tksplit .tkpick { width: 16px; height: 16px; }
.tksplit .tkall { min-height: 28px; margin: 0 0 4px; font-size: 0.8125rem; }
.tksplit .tkall input { width: 16px; height: 16px; }
/* Type filters: one row that scrolls sideways */
.tksplit .tkkinds { flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin: 8px 0; padding: 1px; scrollbar-width: none; }
.tksplit .tkkinds::-webkit-scrollbar { display: none; }
.tksplit .tkkinds .tkchip { flex: none; min-height: 28px; padding: 0 10px; font-size: 0.8125rem; }
.tksplit .tkgap { height: 8px; }
.tkkinds.ovf, .tkdropbar ul.ovf { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }

/* The drop bar: one compact row of people; it scrolls sideways when there are more than fit */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .tkdropbar { flex-wrap: nowrap; gap: 8px; margin: 8px 0 0; min-width: 0; }
  .tkdropbar > .small { flex: none; white-space: nowrap; font-size: 0.8125rem; }
  .tkdropbar ul { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  .tkdropbar ul::-webkit-scrollbar { display: none; }
  .tkdrop { flex: none; gap: 5px; min-height: 30px; padding: 2px 8px 2px 3px; font-size: 0.8125rem; white-space: nowrap; }
  .tkdrop .av, .tkdrop .asgav0.sm { width: 22px; height: 22px; font-size: 0.625rem; }
  .tkdrop .avwrap > .pdot { width: 9px; height: 9px; border-width: 1.5px; }
  .tkdc { font-size: 0.6875rem; }
}

/* The email in the pane: a compact header so the email itself starts high up. Tasks only; the Emails page is unchanged. */
.tkpane.mlpane { padding: 14px 20px 20px; }
.tkpane .mlread .mlh { font-size: 1.125rem; line-height: 1.3; }
.tkpane .mlmeta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; padding-bottom: 8px; }
.tkpane .mlmeta > .small { font-size: 0.8125rem; }
.tkpane .mlfromline { font-size: 0.9375rem; }
.tkpane .mlstate { margin-top: 0; gap: 6px; }
.tkpane .mlacts { gap: 6px 8px; padding: 8px 0; }
.tkpane .mlacts .btn { min-height: 32px; padding: 0 12px; gap: 6px; font-size: 0.875rem; }
.tkpane .mlacts .link { min-height: 32px; font-size: 0.875rem; }
.tkpane .mlparked { margin: 0 0 8px; }
.tkpane .mltask { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; margin: 0 0 8px; border-color: var(--divider); }
.tkpane .mltask > .mlsuggest, .tkpane .mltask > .mltaskform, .tkpane .mltask > .mllinked { flex: 1 1 100%; }
.tkpane .mltaskrow { gap: 6px 10px; }
.tkpane .mltaskrow > label { font-size: 0.8125rem; color: var(--grey-ink); }
.tkpane .mltaskrow select, .tkpane .mltypeacts select { min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 0.875rem; }
.tkpane .mltaskbtns .btn.small, .tkpane .mltypeacts .btn.small { min-height: 30px; }
.tkpane .mltypeacts { gap: 6px 10px; }
.tkpane .mlsuggest { padding: 6px 10px; gap: 8px; }
.tkpane .mlsuggest .mas { width: 26px; height: 30px; }
/* Attachments: a row of small chips (name, size, an icon button) */
.tkpane .mlattach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 0 8px; }
.tkpane .mlattach .mlth { margin: 0; font-size: 0.8125rem; }
.tkpane .mlattach > p { margin: 0; }
.tkpane .mlattl { display: contents; }
.tkpane .mlattl li, .tkpane .mlattl li + li { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 2px 2px 10px; border: 1px solid var(--divider); border-radius: 999px; background: var(--surface2); }
.tkpane .mlattn { flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: normal; }
.tkpane .mlattn b { font-size: 0.8125rem; font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkpane .mlattn .small { font-size: 0.75rem; white-space: nowrap; }
.tkpane .mlattl .btn.small { flex: none; width: 28px; min-height: 28px; height: 28px; padding: 0; border-radius: 50%; }
.tkpane .mlattl .btn.small span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tkpane .mlattl .chip, .tkpane .mlattl li > .small { margin-right: 8px; font-size: 0.75rem; }
.tkpane .mlattach.shut .mlattl li:nth-child(n+4):not(.tkattli) { display: none; }
.tkpane .mlattl li.tkattli { padding: 0 4px; border-color: transparent; background: none; }
.tkattmore { min-height: 28px; font-size: 0.8125rem; }
.tkpane .mlframe { margin-top: 0; }
.tkpane .mlbody { padding-top: 0; }
/* The task summary (KAM requests, cases, SOPs) */
.tkpane:not(.mlpane) { padding: 16px 20px; }
.tkpane.mlpane.composing { position: relative; }

/* Her suggestion in a task: small face and "Suggested:" */
.tksug { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.tksug .mas { width: 18px; height: 20px; flex: none; }
.tksug .tksugl { font-weight: 500; color: var(--muted); }

/* Coach line on My Day */
.coach { margin: 0; padding: 8px 14px; border-left: 3px solid var(--blue, #1480C4); border-radius: 0 10px 10px 0; background: var(--blue-bg, #E7EFF8); font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.coach b { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-right: 6px; }

/* ---------- My Day: chips over the queue (Mine · Waiting on others · Unassigned · Done today) ---------- */
.dqchips { display: flex; gap: 6px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding: 0 20px; }
.dqchips::-webkit-scrollbar { display: none; }
.dqchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--grey-ink); font: inherit; font-size: 0.875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dqchip:hover { background: var(--surface2); color: var(--ink); }
.dqchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dqchip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface2); color: var(--grey-ink); font-size: 0.75rem; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.dqchip[aria-pressed="true"] .n { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
.dqchip .n.hot, .dqchip[aria-pressed="true"] .n.hot { background: var(--blue-btn); color: var(--on-accent); }
.dqsub { margin: 0; padding: 14px 20px 6px; border-top: 1px solid var(--divider); font-size: var(--fs-12, 0.75rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dqload { padding: 0 20px 16px; }
/* Row buttons (Take, Snooze, Park…, Open) sit together at the end of the row */
.qacts { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.qacts .tkacts { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.qi .tktake { background: var(--blue-btn); border-color: var(--blue-btn); color: var(--on-accent); }
.qi .tktake:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-accent); }
.qmain.qstatic { cursor: default; }
a.qmain { text-decoration: none; }
.dqdone .qic { color: var(--good, var(--muted)); }
@media (max-width: 640px) {
  .dqchips { padding: 0 14px 10px; scroll-padding: 0 14px; }
  .dqchip { min-height: 40px; padding: 0 10px; gap: 5px; }
  .dqlong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dqsub { padding: 12px 14px 6px; }
  .dqload { padding: 0 14px 14px; }
  /* Buttons drop under the text so the title keeps the width */
  .qi:has(.qacts) { flex-wrap: wrap; row-gap: 0; }
  .qi:has(.qacts) .qmain { flex-basis: 100%; padding-bottom: 4px; }
  .qacts { width: 100%; justify-content: flex-end; flex-wrap: wrap; padding: 0 0 10px 56px; }
  .qacts .qact { min-height: 40px; }
}