/* Phones and tablets, the product (12 Oct 2026, Ameer: every page must work on a phone and a tablet).
   One file for every page inside the shell, loaded after the page's own stylesheets, so a fix here
   wins without touching them. Logical properties only, so Arabic mirrors. Tablets (768 to 1099px)
   also start on the slim side menu (shell.js, tabletBand). Checked with tools/check-responsive.mjs
   at 360, 390, 430, 768, 834 and 1024. */

/* ---------- every table: words kept for screen readers (.sr-only, position: absolute) inside a
   table that scrolls sideways were placed against the page, not the table, so the whole page
   scrolled sideways (Analytics, Knowledge gaps). The table now holds them ---------- */
table {
  position: relative;
}

/* ---------- Home on a phone ---------- */
@media (max-width: 600px) {
  /* an alert's head: the agent's whole name on its own line, then Live and "since" */
  .hm-alert__who {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .hm-alert__who .hm-alert__name {
    flex: 1 1 100%;
  }
  .hm-alert__who .ag-card__grow {
    display: none;
  }
  .hm-alert__who .hm-alert__since {
    margin-inline-start: auto;
  }
  /* its foot: the counts, then the button, never one over the other */
  .hm-alert__foot {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hm-alert__foot .hm-alert__split {
    flex-wrap: wrap;
    min-width: 0;
  }
  /* a row (a live call, a customer to follow up): the name and its line keep the first line to
     themselves; the tag or the buttons go under them */
  .hm-person:not(.hm-agent) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .hm-person:not(.hm-agent) > .hm-row__text {
    flex: 1 1 calc(100% - 96px);
  }
  .hm-person--go > .cl-alert-tag {
    margin-inline-start: 54px;
    max-width: calc(100% - 90px);
  }
  .hm-person:not(.hm-person--go):not(.hm-agent) > .hm-row__text {
    flex-basis: calc(100% - 60px);
  }
  .hm-person > .ob-rowacts,
  .hm-person > .ob-rowacts > .ag-btn,
  .hm-person > button.ag-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* an agent's row: the name may take two lines */
  .hm-agent .hm-who__name {
    white-space: normal;
  }
}

/* ---------- Alerts on a phone ---------- */
@media (max-width: 600px) {
  .al-gh {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .al-gh .al-gh__name {
    flex: 1 1 calc(100% - 48px);
  }
  .al-gh .ag-card__grow {
    display: none;
  }
  .al-gh .al-gh__count {
    margin-inline-start: auto;
  }
  .al-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .al-row > .al-row__text {
    flex: 1 1 calc(100% - 50px);
  }
  .al-row .al-row__how {
    white-space: normal;
  }
  .al-row > .al-row__done {
    margin-inline-start: 46px;
  }
}

/* ---------- Alert settings on a phone: Edit and the switch under the rule, not squeezing it ---------- */
@media (max-width: 600px) {
  .as-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .as-row > .as-row__text {
    flex: 1 1 calc(100% - 56px);
  }
  .as-row > .as-edit {
    margin-inline-start: 52px;
  }
}

/* ---------- the call list (Conversations, an agent's Conversations): the table keeps a width its
   columns can read at and scrolls sideways inside its card, so names and the failed tag no longer
   break into four and five lines ---------- */
@media (max-width: 900px) {
  .cl-frame > .cl-table {
    min-width: 860px;
  }
}

/* ---------- Home on a phone, more: the counts keep their words (the button drops under them when
   both do not fit), and a customer's status line wraps and is not cut ---------- */
@media (max-width: 600px) {
  .hm-alert__foot .hm-alert__split {
    flex: 1 1 auto;
    min-width: min(max-content, 100%);
  }
  .hm-person:not(.hm-agent) .hm-muted {
    white-space: normal;
  }
}

/* ---------- Agents on a tablet: an agent's name gets the first line of its card beside its icon;
   the status, the alert and the buttons go under it (the name was cut to "Card Activa…") ---------- */
@media (min-width: 641px) and (max-width: 1099px) {
  .ag-list .ag-card__head,
  .ag-page .ag-card > .ag-card__head {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .ag-page .ag-card > .ag-card__head > .ag-card__name {
    flex: 1 1 calc(100% - 60px);
    white-space: normal;
  }
}

/* ---------- an agent's page on a tablet: the name on its own line over the buttons, as on a phone
   (beside Call a customer and Publish it was cut to "Card Activation Hel…") ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
  .ap .agent-head__row {
    flex-direction: column;
    align-items: stretch;
  }
  .ap .agent-head__tools {
    margin-inline-start: 0;
  }
}
/* and on every small screen a long name wraps, it is never cut */
@media (max-width: 1099px) {
  .ap .agent-head__title h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}