/* ==========================================================================
   TEMPORARY(AI-2091, review after 2027-03-01): the Basic view of the ticket
   screens. Everything here hangs under .basic-* classes that only the Basic
   pages render, so Expert never sees a rule of it. Removing the experiment
   deletes this file and its <link> in index.html.

   Hierarchy: the last customer message weighs most, one place says what needs
   attention (orange is "mind this"), one filled button is the next step
   (purple). Long text stays in the text colours, never in orange.
   ========================================================================== */

/* ---------- The view switch in the top bar ------------------------------- */

.basic-view-switch .ui-segmented__item {
    min-width: 64px;
}

@media (max-width: 760px) {
    .basic-view-switch {
        display: none;
    }
}

/* ---------- The open ticket ---------------------------------------------- */

.basic-ticket {
    --basic-gap: clamp(8px, 1.2vw, 16px);
    --basic-h: calc(100dvh - var(--ui-topbar-h) - 2 * var(--basic-gap));
    --basic-info-w: clamp(250px, 20vw, 290px);
    padding: var(--basic-gap);
}

.basic-ticket__banner {
    margin-bottom: 8px;
}

.basic-ticket__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--basic-gap);
    height: var(--basic-h);
    min-height: 520px;
}

.basic-ticket__frame.has-info {
    grid-template-columns: minmax(0, 1fr) var(--basic-info-w);
}

.basic-ticket__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--ui-radius-lg);
}

/* ---------- Head of the ticket -------------------------------------------- */

.basic-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ui-divider);
    min-width: 0;
}

.basic-topbar__who {
    flex: 1 1 auto;
    min-width: 0;
}

.basic-topbar__line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.basic-topbar__title {
    margin: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ui-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-topbar__nr {
    flex: 0 0 auto;
    font-size: .82rem;
    color: var(--ui-text-3);
}

.basic-topbar__sub {
    overflow: hidden;
    font-size: .84rem;
    color: var(--ui-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-topbar__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.basic-topbar__status {
    width: 120px;
}

.basic-topbar__group {
    width: 140px;
}

.basic-topbar__agent {
    width: 140px;
}

.basic-topbar__count {
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

@media (max-width: 1360px) {
    .basic-topbar__status,
    .basic-topbar__agent,
    .basic-topbar__group {
        width: 112px;
    }
}

/* "More": words, one per line, never loose icons. */
/* Only an open panel lays out: a display on the closed popover would leave it, invisible,
   over the trigger and swallow the click. */
.basic-menu:popover-open {
    display: flex;
}

.basic-menu {
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    padding: 6px;
}

.basic-menu__labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ui-divider);
}

.basic-menu__heading {
    font-size: .76rem;
    font-weight: 600;
    color: var(--ui-text-3);
}

.basic-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: .9rem;
    color: var(--ui-text);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--ui-radius-sm);
}

.basic-menu__item:hover:not(:disabled),
.basic-menu__item:focus-visible {
    background: var(--ui-bg-hover);
    outline: none;
}

.basic-menu__item:disabled {
    cursor: default;
    opacity: .5;
}

.basic-menu__item[aria-pressed="true"] .ui-icon {
    color: var(--ui-tone-primary);
}

/* ---------- The conversation ---------------------------------------------- */

.basic-ticket__conversation {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.basic-ticket__search {
    padding: 8px 14px 0;
}

.basic-ticket__messages {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0 6px;
}

/* The conversation takes exactly the room left above the attention spot and the composer: the
   Expert pane's own heights (600px, 60vh) would run it on underneath them. */
:root .basic-ticket .basic-ticket__messages > .ticket-paper,
:root .basic-ticket .basic-ticket__messages .ticket-chatbox-paper {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0 !important;
    background: transparent;
    box-shadow: none;
}

:root .basic-ticket .basic-ticket__messages .ticket-chatbox-scroll {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0 !important;
}

.basic-ticket__earlier {
    align-self: center;
    padding: 6px 12px;
    margin: 6px 0 0;
    font: inherit;
    font-size: .84rem;
    color: var(--ui-text-2);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--ui-radius-pill);
}

.basic-ticket__earlier:hover,
.basic-ticket__earlier:focus-visible {
    color: var(--ui-text);
    background: var(--ui-bg-hover);
    outline: none;
}

/* Earlier messages fold away: everything before the last customer message
   (the page writes those rules, it knows which message that is). On a small
   screen that is the default; on a taller one they stay open, until the person
   chooses. Of the two ways, the one that fits shows. */
.basic-ticket__earlier--hide {
    display: none;
}

.basic-ticket__messages.is-earlier-open .basic-ticket__earlier--show,
.basic-ticket__messages.is-earlier-folded .basic-ticket__earlier--hide {
    display: none;
}

.basic-ticket__messages.is-earlier-open .basic-ticket__earlier--hide {
    display: block;
}

@media (min-height: 820px) {
    .basic-ticket__messages:not(.is-earlier-folded) .basic-ticket__earlier--show {
        display: none;
    }

    .basic-ticket__messages:not(.is-earlier-folded) .basic-ticket__earlier--hide {
        display: block;
    }
}

/* A turn opens as a sheet over the conversation; the composer below stays. */
.basic-ticket__sheet {
    position: absolute;
    inset: 8px 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-raised);
}

.basic-ticket__sheet > * {
    flex: 1 1 auto;
}

.basic-ticket__sheet[hidden] {
    display: none;
}

/* ---------- The attention spot -------------------------------------------- */

.basic-attention {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 12px 0;
}

.basic-attention__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--ui-tone-warning) 9%, var(--ui-bg-card));
    border: 1px solid color-mix(in srgb, var(--ui-tone-warning) 35%, transparent);
    border-radius: var(--ui-radius);
}

.basic-attention__item:not(.is-lead) {
    background: var(--ui-bg-card);
    border-color: var(--ui-border);
}

.basic-attention__icon {
    flex: 0 0 auto;
    color: var(--ui-tone-warning);
}

.basic-attention__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.basic-attention__text strong {
    font-size: .94rem;
    font-weight: 650;
    color: var(--ui-text);
}

.basic-attention__detail {
    font-size: .84rem;
    color: var(--ui-text-2);
}

.basic-attention__more {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--ui-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: 0;
}

.basic-attention__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

/* ---------- The composer -------------------------------------------------- */

.basic-ticket__composer {
    flex: 0 0 auto;
    padding: 8px 12px 12px;
}

/* On a larger screen the editor grows with the room, so no space stays empty. */
.basic-ticket__composer .basic-ticket__editor {
    max-height: max(180px, 34vh);
}

@media (min-height: 860px) {
    .basic-ticket__composer .basic-ticket__editor {
        max-height: 40vh;
    }
}

/* ---------- Customer info column ------------------------------------------ */

.basic-ticket__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--ui-radius-lg);
}

.basic-info__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-bottom: 1px solid var(--ui-divider);
}

.basic-info__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: .8rem;
    font-weight: 650;
    color: var(--ui-tone-primary);
    background: color-mix(in srgb, var(--ui-tone-primary) 12%, var(--ui-bg-card));
    border-radius: 50%;
}

.basic-info__who {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.basic-info__who strong,
.basic-info__who span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-info__who strong {
    font-size: .95rem;
    color: var(--ui-text);
}

.basic-info__who span {
    font-size: .82rem;
    color: var(--ui-text-2);
}

.basic-info__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px;
    overflow-y: auto;
}

.basic-info__check {
    margin-bottom: 10px;
}

.basic-info__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 2px;
    margin: -4px 0 8px -2px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ui-text);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--ui-radius-sm);
}

.basic-info__back:hover {
    background: var(--ui-bg-hover);
}

.basic-record {
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ui-divider);
}

.basic-record__kind {
    display: block;
    margin-bottom: 4px;
    font-size: .78rem;
    color: var(--ui-text-3);
}

.basic-record__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.basic-record__title strong {
    font-size: .95rem;
    color: var(--ui-text);
}

.basic-record__title span {
    font-size: .84rem;
    color: var(--ui-text-2);
}

.basic-record__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0 0 10px;
}

.basic-record__facts dt {
    font-size: .76rem;
    color: var(--ui-text-3);
}

.basic-record__facts dd {
    margin: 0;
    overflow: hidden;
    font-size: .88rem;
    color: var(--ui-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-record__all {
    padding: 0;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ui-tone-primary);
    cursor: pointer;
    background: none;
    border: 0;
}

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

.basic-info__part {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 4px;
    font: inherit;
    font-size: .9rem;
    color: var(--ui-text);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ui-divider);
}

.basic-info__part:hover,
.basic-info__part:focus-visible {
    background: var(--ui-bg-hover);
    outline: none;
}

.basic-info__part-label {
    flex: 1 1 auto;
}

.basic-info__part-count {
    font-size: .84rem;
    color: var(--ui-text-2);
    font-variant-numeric: tabular-nums;
}

/* Below a laptop's width the column does not open by itself (the page decides);
   opened, it lies over the conversation. */
.basic-ticket__frame.is-info-overlay {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
}

.basic-ticket__frame.is-info-overlay .basic-ticket__info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: min(320px, 90%);
    box-shadow: var(--ui-shadow-raised);
}

/* ---------- The list ------------------------------------------------------- */

.basic-list .basic-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 2px 0;
}

.basic-row__top,
.basic-row__subject,
.basic-row__bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.basic-row__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.basic-row.is-unread .basic-row__dot {
    background: var(--ui-tone-primary);
}

.basic-row__name {
    flex: 1 1 auto;
    overflow: hidden;
    font-size: .92rem;
    color: var(--ui-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-row.is-unread .basic-row__name,
.basic-row.is-unread .basic-row__subject-text {
    font-weight: 650;
}

.basic-row__time {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--ui-text-3);
}

.basic-row__channel {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--ui-text-3);
}

.basic-row__subject-text,
.basic-row__preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-row__subject-text {
    font-size: .88rem;
    color: var(--ui-text);
}

.basic-row__preview {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    color: var(--ui-text-2);
}

.basic-row__mark {
    flex: 0 0 auto;
    font-size: .76rem;
    color: var(--ui-text-2);
    white-space: nowrap;
}

/* Short words only: orange is "mind this". */
.basic-row__mark.is-attention {
    font-weight: 600;
    color: var(--ui-tone-warning);
}

.basic-row__org {
    flex: 0 1 auto;
    max-width: 72px;
    overflow: hidden;
    font-size: .72rem;
    color: var(--ui-text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-row__agent {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: .62rem;
    font-weight: 650;
    color: var(--ui-text);
    background: color-mix(in srgb, var(--agent-face, var(--ui-avatar-1)) 30%, var(--ui-bg-card));
    border-radius: 50%;
}

.basic-list .basic-list__new {
    white-space: nowrap;
}

/* ---------- The choice on the profile ------------------------------------- */

.basic-view-setting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}