/*
 * The staff screen wears NOLON's own design tokens (apps/web/src/app/globals.css in NOLON), so the
 * assistant looks like part of NOLON: the same blue, neutrals, radii, control heights and states,
 * and its font, served from this origin (fonts/, SIL Open Font License in fonts/OFL.txt).
 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2190-2199, U+2212;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2190-2199, U+2212;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2190-2199, U+2212;
}

:root {
  color-scheme: light;
  --brand-blue: #0a55a1;
  --brand-blue-dark: #083f78;
  --brand-blue-soft: #eaf1fb;
  --brand-blue-ring: rgb(10 85 161 / 0.22);
  /* Blue as text (sources, links): darker than the button blue on a dark surface. */
  --link: #0a55a1;
  --on-brand: #ffffff;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --surface-sunken: #eef2f6;
  --border: #e3e8ee;
  --border-strong: #cdd5df;
  --fg: #0f1b2d;
  --fg-soft: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --ok: #157a3c;
  --ok-soft: #e6f5ec;
  --warn: #a75207;
  --warn-soft: #fdf3e7;
  --bad: #b42318;
  --bad-soft: #fdeceb;
  --bad-ring: rgb(180 35 24 / 0.18);
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --shadow-xs: 0 1px 2px rgb(15 27 45 / 0.06);
  --shadow: 0 1px 2px rgb(15 27 45 / 0.05), 0 1px 3px rgb(15 27 45 / 0.06);
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-blue: #3b82d6;
    --brand-blue-dark: #60a5fa;
    --brand-blue-soft: #10294a;
    --brand-blue-ring: rgb(96 165 250 / 0.35);
    --link: #8cbcf5;
    --bg: #0a101c;
    --surface: #111a2a;
    --surface-alt: #152034;
    --surface-sunken: #0d1524;
    --border: #22304a;
    --border-strong: #2f3f5c;
    --fg: #eef2f7;
    --fg-soft: #c8d2df;
    --muted: #aab6c6;
    --faint: #8696ab;
    --ok: #4ade80;
    --ok-soft: #0f2e1d;
    --warn: #fbbf24;
    --warn-soft: #33240e;
    --bad: #f87171;
    --bad-soft: #3a1414;
    --bad-ring: rgb(248 113 113 / 0.3);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.25);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.6;
}

[hidden] {
  display: none !important;
}

/* ---- Controls (NOLON's button, input and focus styles) ---- */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-block-size: var(--control-h);
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  color: var(--on-brand);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

button:hover:not(:disabled),
.button:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

button.ghost {
  background: var(--surface);
  color: var(--fg-soft);
  border-color: var(--border-strong);
}

button.ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-ring);
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='date'],
input[type='search'],
select,
textarea {
  min-block-size: var(--control-h);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-md);
}

input[aria-invalid='true']:not([type='radio'], [type='checkbox']),
select[aria-invalid='true'] {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px var(--bad-ring);
}

input[type='radio'],
input[type='checkbox'] {
  accent-color: var(--brand-blue);
  margin: 0;
}

a {
  color: var(--link);
}

.error {
  color: var(--bad);
  font-weight: 500;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--text-xs);
}

/* ---- Page frame ---- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  padding-inline: 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

.bar h1 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-actions button {
  min-block-size: var(--control-h-sm);
}

.chat > p.small {
  margin-block: 6px 0;
  color: var(--faint);
  text-align: center;
}

#new {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--link);
}

#new:hover:not(:disabled) {
  background: var(--surface-sunken);
}

.center {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 240px;
  padding: 12px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list button {
  inline-size: 100%;
  justify-content: flex-start;
  margin-block-end: 2px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-soft);
  font-weight: 400;
  text-align: start;
}

.list button:hover:not(:disabled) {
  background: var(--surface-sunken);
  border-color: transparent;
}

.list button {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-block: 0.4375rem;
}

.conversation-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.conversation-date {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.list button[aria-current='true'] {
  background: var(--brand-blue-soft);
  color: var(--link);
  font-weight: 500;
}

.chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 12px 16px;
}

/* ---- Messages ---- */

.messages {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.messages > li {
  max-inline-size: 75%;
  margin-block: 8px;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.messages > li.user {
  margin-inline-start: auto;
  border-end-end-radius: 0.25rem;
  background: var(--brand-blue-soft);
  box-shadow: none;
}

.messages > li.purged {
  color: var(--muted);
  font-style: italic;
}

.messages > li.pending {
  color: var(--muted);
}

/* The send button sits inside the text box, as in common chat screens: one row, not two. */
.composer {
  position: relative;
  display: flex;
  margin-block-start: 6px;
}

.composer textarea {
  flex: 1;
  min-block-size: 3.25rem;
  padding-inline-end: 5.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  resize: none;
  unicode-bidi: plaintext;
}

.composer button {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  min-block-size: 2.25rem;
  padding-inline: 1rem;
}

/* ---- Task bar and task buttons: chips in one row ---- */

.task-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding-block: 2px;
  padding-inline: 12px 4px;
  margin-block-end: 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

.task-bar span {
  flex: 1 1 12rem;
  color: var(--fg-soft);
}

.task-bar button {
  min-block-size: 1.875rem;
  padding-inline: 0.625rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--link);
  font-size: var(--text-xs);
}

/* While a draft is being filled (the task bar shows, or an open task card is on screen, even
   before it holds any value), the buttons that start other tasks step aside: the bar's
   «مهمة جديدة» starts one, and the composer stays in reach. */
.chat:has(#task:not([hidden])) #quick,
.chat:has(#task:not([hidden])) #task-forms,
.chat:has(.messages > li.task-card.open) #quick,
.chat:has(.messages > li.task-card.open) #task-forms {
  display: none;
}

.resume-bar {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
}

.resume-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-block-size: 9rem;
  overflow-y: auto;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: 8px;
}

.quick-actions > button {
  min-block-size: 1.875rem;
  padding-inline: 0.875rem;
  border-color: var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-soft);
  box-shadow: none;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.quick-actions > button:hover:not(:disabled) {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--on-brand);
}

/* ---- Answer blocks ---- */

.choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-block-start: 8px;
  white-space: normal;
}

.choice-option {
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.choice-option:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--brand-blue);
}

/* «لا شيء من هذه» is a way out, not one more record: a text button under the list. */
.choice > button.block-action:not(.choice-option) {
  align-self: center;
  min-block-size: 1.75rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: underline;
}

.choice-option span {
  font-size: var(--text-xs);
  color: var(--muted);
}

.block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 8px;
}

.records-used {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-block-start: 8px;
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: normal;
}

.next-step {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-block-start: 8px;
  padding-block: 6px;
  padding-inline: 10px;
  border-inline-start: 3px solid var(--brand-blue);
  background: var(--brand-blue-soft);
  white-space: normal;
}

.result-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: 8px;
  white-space: normal;
}

.table-scope {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: var(--text-sm);
}

.table-scope dt {
  color: var(--muted);
}

.table-scope dd {
  margin: 0;
}

.table-scope .unspecified {
  font-style: italic;
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.result-table table {
  border-collapse: collapse;
  font-size: var(--text-sm);
  inline-size: 100%;
}

.result-table th {
  background: var(--surface-alt);
  color: var(--fg-soft);
  font-weight: 600;
}

.result-table th,
.result-table td {
  border-block-end: 1px solid var(--border);
  padding-block: 6px;
  padding-inline: 10px;
  text-align: start;
  white-space: nowrap;
}

.result-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.table-page,
.table-totals {
  margin: 0;
  font-size: var(--text-sm);
}

.table-totals {
  padding-inline-start: 18px;
}

/* ---- A form for a draft's details: NOLON's field layout, two columns on a wide screen ---- */

.detail-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2px 14px;
  margin-block-start: 10px;
  white-space: normal;
}

.detail-form fieldset {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 6px 8px;
  min-inline-size: 0;
  margin: 0;
  padding-block: 0.375rem 0.5rem;
  padding-inline: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

/* Choices take the whole line: their options sit side by side. */
.detail-form fieldset:has(input[type='radio'], input[type='checkbox']) {
  grid-column: 1 / -1;
}

.detail-form legend {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: 0.25rem;
  padding: 0;
  color: var(--fg-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

.detail-form input[type='text'],
.detail-form input[type='tel'],
.detail-form input[type='email'],
.detail-form input[type='date'],
.detail-form input[type='search'],
.detail-form select {
  inline-size: 100%;
}

/* A field the ERP named when it refused the staff member's form, or one left empty or wrong. */
.detail-form fieldset.missing,
.detail-form fieldset.flagged {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.detail-form fieldset.missing legend,
.detail-form fieldset.flagged legend {
  color: var(--bad);
}

.detail-form .field-note,
.task-edit .field-note {
  inline-size: 100%;
  margin: 0;
  color: var(--bad);
  font-size: var(--text-sm);
  font-weight: 500;
}

.detail-form .field-note:not(.missing-note):empty {
  display: none;
}

.detail-form > .block-actions {
  grid-column: 1 / -1;
}

/* Options as segmented choices: the whole label is the target, the chosen one in brand blue. */
label.option {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-block-size: var(--control-h-sm);
  padding-inline: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}

label.option:has(input:checked) {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
  color: var(--link);
  font-weight: 500;
}

label.option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--brand-blue-ring);
}

.quick-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  inline-size: 100%;
  margin-block-start: 0.25rem;
}

.search-option {
  justify-content: flex-start;
  text-align: start;
}

.search-picked:empty {
  display: none;
}

.search-picked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- A draft's chat card (draft-card.js): the values the ERP holds, and the decision ---- */

.messages > li.draft-card,
.messages > li.task-card {
  inline-size: min(100%, 600px);
  max-inline-size: 100%;
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  white-space: normal;
  overflow: hidden;
}

.messages > li.draft-card {
  padding: 0.875rem 1rem;
  border-block-start: 3px solid var(--brand-blue);
}

.draft-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin-block: 8px;
}

.draft-card dt {
  color: var(--muted);
}

.draft-card dd {
  margin: 0;
  font-weight: 500;
}

.draft-card .unlike {
  color: var(--bad);
}

.draft-card .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.draft-card p {
  margin-block: 4px;
}

/* ---- The live card of a task (task-card.js): fits a phone (360 px), the same right to left ---- */

.task-card > strong:first-child {
  display: block;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* A group is a section of the card, not a box inside the box. */
.task-card fieldset {
  min-inline-size: 0;
  margin: 0;
  padding-block: 0.125rem 0.375rem;
  padding-inline: 1rem;
  border: 0;
  border-block-end: 1px solid var(--border);
}

.task-card legend {
  float: inline-start;
  inline-size: 100%;
  padding-block: 0.625rem 0.125rem;
  padding-inline: 0;
  color: var(--fg-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.task-card fieldset > button {
  margin-block: 0.25rem;
}

/* One field per line: label, the value with where it came from, then its small actions. What it
   still needs (a mark, NOLON's reason) takes a second line only when there is one. */
.task-field {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding-block: 0.375rem;
  border-block-end: 1px solid var(--border);
  clear: both;
}

.task-field:last-of-type {
  border-block-end: 0;
}

.task-field-head {
  display: contents;
}

.task-label {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-size: var(--text-sm);
}

.task-main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-inline-size: 0;
}

.task-value {
  overflow-wrap: anywhere;
  font-weight: 500;
}

/* Where a value came from, as a small tag: the staff member's own, NOLON's, or a reading to check. */
.task-source {
  padding-inline: 0.4375rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: nowrap;
}

.task-source.erp {
  background: var(--brand-blue-soft);
  color: var(--link);
}

.task-source.suggested {
  background: var(--warn-soft);
  color: var(--warn);
}

.task-source-more {
  display: inline;
}

.task-source-more > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
}

.task-source-more > summary::-webkit-details-marker {
  display: none;
}

.task-source-more > summary::after {
  content: ' ▾';
  font-size: 0.625rem;
}

.task-source-more[open] > summary::after {
  content: ' ▴';
}

.task-source-more > summary:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 1px;
}

.task-detail {
  margin-inline-start: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.task-meta {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0.125rem 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Marks: a missing value is quiet; a value to confirm asks; a refusal is an error at the field. */
.task-blocker {
  font-weight: 500;
}

.task-blocker.missing {
  color: var(--muted);
}

.task-blocker.confirm {
  color: var(--warn);
}

.task-blocker.error,
.task-problem {
  color: var(--bad);
}

.task-problem {
  flex-basis: 100%;
}

.task-field.blocked .task-label {
  color: var(--fg-soft);
  font-weight: 500;
}

/* A missing value says so in its place, on the field's one line. */
.task-field.missing .task-value {
  display: none;
}

.task-field.missing .task-meta {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--text-sm);
}

.task-field.confirm .task-source {
  background: var(--surface);
}

.task-field.confirm {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}

.task-field.error {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bad-soft);
}

.task-field > .actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.task-field > .actions button {
  min-block-size: var(--control-h-sm);
  padding-inline: 0.75rem;
  font-size: var(--text-xs);
}

/* «تعديل» and the other secondary actions of a field are text buttons, not boxes on every line. */
.task-field > .actions button.ghost {
  padding-inline: 0.5rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--link);
  font-weight: 500;
}

.task-field > .actions button.ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
  border-color: transparent;
}

.task-field > .actions small {
  font-size: var(--text-xs);
}

.task-edit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 6px 2px;
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.task-edit select,
.task-edit input[type='text'],
.task-edit input[type='date'],
.task-edit input[type='tel'],
.task-edit input[type='search'] {
  inline-size: 100%;
  max-inline-size: 100%;
}

.task-edit .actions {
  display: flex;
  gap: 8px;
}

/* The card's foot: what is left, then create (primary) and the secondary actions. */
.task-card > p {
  margin: 0;
  padding-block: 0.5rem 0;
  padding-inline: 1rem;
  font-size: var(--text-sm);
}

.task-card > p.error {
  padding-block-end: 0.5rem;
}

.task-matches {
  margin-block: 0.5rem 0;
  margin-inline: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

.task-matches p,
.task-matches ul {
  margin: 0;
}

.task-card > .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 0.625rem;
  padding: 0.75rem 1rem;
  border-block-start: 1px solid var(--border);
  background: var(--surface-alt);
}

/* Create first (the primary), cancel last and apart: it ends the task. */
.task-card > .actions > button:not(.ghost) {
  order: -1;
}

.task-card > .actions > button.ghost:last-of-type {
  margin-inline-start: auto;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--bad);
}

.task-card > .actions a {
  font-weight: 500;
}

/* The conversation list's button and backdrop exist for the phone drawer only. */
.drawer-toggle,
.drawer-backdrop {
  display: none;
}

.conversation-task {
  display: block;
  color: var(--warn);
  font-size: var(--text-xs);
  font-weight: 500;
}

.conversation-task.creating,
.resume-bar button.creating {
  color: var(--link);
}

.resume-bar button.creating {
  background: var(--surface);
  border-color: var(--brand-blue);
}

.detail-form .unavailable-note {
  inline-size: 100%;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--fg-soft);
  font-size: var(--text-sm);
}

@media (max-width: 700px) {
  .layout {
    flex-direction: column;
  }

  .bar {
    flex-wrap: wrap;
    gap: 8px;
    padding-inline: 10px;
  }

  #expiry {
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .bar-actions {
    gap: 4px;
  }

  .bar-actions button {
    padding-inline: 0.625rem;
  }

  /* The conversation list is a drawer from the start side, opened by "Conversations". */
  .drawer-toggle {
    display: inline-flex;
    min-block-size: var(--control-h-sm);
  }

  body:has(#app[hidden]) .drawer-toggle {
    display: none;
  }

  .side {
    position: fixed;
    z-index: 20;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(85vw, 320px);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s,
      visibility 0.2s;
  }

  [dir='ltr'] .side {
    transform: translateX(-100%);
  }

  .drawer-open .side {
    transform: none;
    visibility: visible;
  }

  .drawer-open .drawer-backdrop {
    display: block;
    position: fixed;
    z-index: 19;
    inset: 0;
    background: rgb(15 27 45 / 0.35);
  }

  .chat {
    padding-inline: 10px;
  }

  .messages > li {
    max-inline-size: 92%;
  }

  /* The task buttons scroll sideways in one row instead of filling the screen. */
  .quick-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: 2px;
  }

  .quick-actions > button {
    flex: none;
  }

  /* On a phone a field takes two lines: its label over the value, with its actions beside the
     value; what it still needs follows under them. */
  .task-field {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0;
  }

  .task-label {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: var(--text-xs);
  }

  .task-main {
    grid-column: 1;
    grid-row: 2;
  }

  .task-field > .actions {
    grid-column: 2;
    grid-row: 2;
  }

  .task-meta {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .task-field.missing .task-meta {
    grid-column: 1;
    grid-row: 2;
  }

  /* A table's rows as small blocks, each value under its column's name, so nothing (an amount,
     its currency) is cut off at the screen's edge. */
  .result-table thead {
    display: none;
  }

  .result-table table,
  .result-table tbody,
  .result-table tr {
    display: block;
  }

  .result-table tr {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: 0 12px;
    padding-block: 6px;
    padding-inline: 10px;
    border-block-end: 1px solid var(--border);
  }

  .result-table tr:last-child {
    border-block-end: 0;
  }

  /* Values wrap here (a long customer name, say): the desktop table keeps them on one line. */
  .result-table td {
    display: contents;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .result-table td::before {
    content: attr(data-label);
    color: var(--muted);
  }

  .result-table td:first-child::before {
    content: none;
  }

  /* The first value (the record's number or name) heads its block. */
  .result-table td:first-child {
    display: block;
    grid-column: 1 / -1;
    font-weight: 600;
  }

  .result-table .num {
    text-align: start;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .side {
    transition: none;
  }
}

/* The record summary (D3): values copied from NOLON's records, confirmed with one press. */
.task-card fieldset.task-summary {
  margin-block: 0.625rem 0;
  margin-inline: 1rem;
  padding-block: 0.25rem 0.75rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-blue-soft);
}

.task-summary ul {
  clear: both;
  margin-block: 4px;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.task-summary p {
  margin-block: 2px 8px;
  font-size: var(--text-sm);
}

.task-summary > button {
  min-block-size: var(--control-h-sm);
}

/* Customer handoffs (handoffs.html): one card per open handoff. */
.handoffs {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1rem;
}
.handoff-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.handoff {
  border: 1px solid var(--border, #ddd);
  border-radius: 0.5rem;
  padding: 1rem;
}
.handoff-messages {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.handoff-messages .from-customer {
  font-weight: 500;
}
#handoffs-link[data-count]::after {
  content: ' (' attr(data-count) ')';
}