.emailbot-state-filters .log-tag-filter.is-active {
    cursor: default;
    opacity: 1;
}

.emailbot-account-chip-row .log-tag-filter[aria-disabled="false"] {
    cursor: pointer;
}

.emailbot-account-chip-row .log-tag-filter[aria-disabled="true"] {
    cursor: default;
    filter: none;
}

.emailbot-state-filter-label,
.emailbot-state-filter-separator {
    font-weight: 400;
}

.emailbot-state-filter-separator {
    opacity: 0.5;
    white-space: pre;
}

.emailbot-state-filter-count {
    font-weight: 700;
}


.emailbot-chat-item {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   The connect view
   --------------------------------------------------------------------------- */

/* The width is stated rather than left to the row, so the percentages of the card and the buttons
   below always measure themselves against the whole pane and not against the widest line of text
   that happens to be on it. */
.emailbot-connect-view {
    grid-row: 2;
    flex: 1;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 1.2rem 0.8rem 2rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.emailbot-connect-view[hidden] {
    display: none;
}

/* The card itself: a slab that lifts towards the pointer, with a slow sheen crossing it and a
   glow whose hue is derived from the name on it, so two cards never look quite the same. */
.emailbot-connect-card {
    position: relative;
    width: min(340px, 88%);
    padding: 1.4rem 1.2rem 1.6rem;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(120% 90% at 50% -10%, hsl(var(--emailbot-connect-hue, 210) 70% 62% / 0.3), transparent 62%),
        radial-gradient(90% 70% at 108% 108%, hsl(calc(var(--emailbot-connect-hue, 210) + 48) 70% 58% / 0.24), transparent 62%),
        radial-gradient(80% 60% at -8% 82%, hsl(calc(var(--emailbot-connect-hue, 210) - 42) 65% 55% / 0.16), transparent 64%),
        linear-gradient(160deg, var(--input-bg) 0%, var(--bg-color) 100%);
    box-shadow:
        0 18px 40px -22px hsl(var(--emailbot-connect-hue, 210) 70% 40% / 0.55),
        0 2px 0 0 hsl(var(--emailbot-connect-hue, 210) 70% 70% / 0.18) inset,
        0 -22px 34px -26px rgba(0, 0, 0, 0.95) inset;
    transform: perspective(900px) rotateX(var(--emailbot-connect-tilt-x, 0deg)) rotateY(var(--emailbot-connect-tilt-y, 0deg));
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.45s ease;
    transform-style: preserve-3d;
    overflow: hidden;
    isolation: isolate;
}

/* The sheen. It never crosses the code itself, which sits above it.
   It travels from the top left corner to the bottom right one and back the same way, so the light
   only ever changes direction and never restarts: there is no frame at which it is anywhere other
   than where it just was. */
.emailbot-connect-card::after {
    content: '';
    position: absolute;
    inset: -55%;
    background: linear-gradient(
        var(--emailbot-connect-sheen-angle, 115deg),
        transparent 38%,
        hsl(var(--emailbot-connect-hue, 210) 90% 88% / 0.18) 50%,
        transparent 62%
    );
    animation: emailbot-connect-sheen 18s ease-in-out infinite;
    animation-delay: var(--emailbot-connect-sheen-delay, 0s);
    pointer-events: none;
    z-index: 0;
}

@keyframes emailbot-connect-sheen {
    0%, 100% { transform: translate3d(-34%, -34%, 0); }
    50% { transform: translate3d(34%, 34%, 0); }
}

.emailbot-connect-card > * {
    position: relative;
    z-index: 1;
}

/* The code keeps a white field of its own whatever the card does around it, and never tilts with
   the card, so a camera always reads a flat square. */
.emailbot-connect-qr {
    width: min(210px, 62vw);
    margin: 0 auto 1rem;
    padding: 10px;
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
    transform: translateZ(30px);
}

.emailbot-connect-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.emailbot-connect-name {
    font-weight: 700;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.emailbot-connect-line {
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.emailbot-connect-line.is-quiet {
    opacity: 0.7;
}

.emailbot-connect-hint {
    font-weight: 700;
    opacity: 0.5;
    margin-top: 0.4rem;
}

.emailbot-connect-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: min(340px, 88%);
}

.emailbot-connect-scanner {
    width: min(340px, 88%);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #000000;
}

.emailbot-connect-scanner[hidden] {
    display: none;
}

.emailbot-connect-table-select {
    width: 100%;
}

.emailbot-connect-manual-button.is-secondary {
    opacity: 0.5;
}

/* On the one-column layout the card is what the whole view is for: it is held up to be scanned and
   read from the other side of a table, and the buttons under it are hit with a thumb. There both
   take nearly the width of the pane, and the code grows with them. A screen wide enough for the
   list beside the chat keeps the desk-sized card. */
@media (max-width: 960px) {
    .emailbot-connect-view {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .emailbot-connect-card,
    .emailbot-connect-actions {
        width: 90%;
    }

    .emailbot-connect-qr {
        width: min(340px, 62vw);
    }

    .emailbot-connect-scanner,
    .emailbot-connect-actions button {
        width: 100%;
    }
}

/* The wheel of card surfaces, in the top right corner of the CONNECT header. It stays bright while
   the surface is only the one this visit was handed at random, and goes quiet once the account has
   picked one of its own. */
.emailbot-connect-designnav {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.emailbot-connect-designnav-step {
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.emailbot-connect-designnav-step:hover,
.emailbot-connect-designnav-step:focus-visible {
    opacity: 0.4;
}

.emailbot-connect-designnav-number {
    opacity: 0.25;
    white-space: pre;
    font-variant-numeric: tabular-nums;
}

.emailbot-connect-designnav.is-unchosen .emailbot-connect-designnav-step {
    opacity: 1;
}

.emailbot-connect-designnav.is-unchosen .emailbot-connect-designnav-step:hover,
.emailbot-connect-designnav.is-unchosen .emailbot-connect-designnav-step:focus-visible {
    opacity: 0.8;
}

.emailbot-connect-designnav.is-unchosen .emailbot-connect-designnav-number {
    opacity: 0.5;
}

/* A contact card is not just another file: its tile keeps the size and the frame of every other
   attachment tile and trades the file name for a small card in the company accent colour. Which
   company that is is decided on the card itself; a card that names none leaves the tile in the
   accent of the page. A card waiting to be sent and a card sitting in the conversation look the
   same, so both tiles are dressed here. */
.attachment-preview.is-vcard,
.emailbot-message-attachment.is-vcard {
    background-color: var(--cvc-accent, var(--accent-color, #2980b9));
    background-image:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.34), transparent 62%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 4px);
}

.attachment-preview.is-vcard a,
.attachment-preview.is-vcard span,
.emailbot-message-attachment.is-vcard a,
.emailbot-message-attachment.is-vcard span {
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 5px 2px 3px;
    font-size: 0.55em;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    text-decoration: none;
    color: var(--cvc-accent-ink, #ffffff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* A tile in the conversation centres a file name in a box of its own size. The two lines of a card
   want the colours of that box but not its size, or they each fill the whole tile. */
.emailbot-message-attachment.is-vcard .emailbot-vcard-mark {
    display: inline;
    width: auto;
    height: auto;
}

.emailbot-message-attachment.is-vcard .emailbot-vcard-name {
    height: auto;
}

.attachment-preview.is-vcard .emailbot-vcard-mark,
.emailbot-message-attachment.is-vcard .emailbot-vcard-mark {
    font-size: 1.3em;
    line-height: 1;
    text-shadow: none;
}

.attachment-preview.is-vcard .emailbot-vcard-name,
.emailbot-message-attachment.is-vcard .emailbot-vcard-name {
    width: 100%;
    padding: 1px 2px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.34);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.emailbot-contact-table-picker-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.emailbot-contact-table-picker-content .emailbot-connect-table-select {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .emailbot-connect-card,
    .emailbot-connect-card::after {
        animation: none;
        transition: none;
    }
}

.emailbot-sidebar-new-chat .emailbot-chat-item {
    margin-bottom: 0;
}

.emailbot-chatlist-loading {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.45rem;
    overflow: visible;
    pointer-events: none;
    position: sticky;
    top: 0;
    z-index: 2;
}

.emailbot-empty-state {
    text-align: center;
    width: 100%;
    opacity: 0.7;
    margin: 0.75rem 0;
}

.emailbot-empty-state.emailbot-empty-state-centered,
.emailbot-chat-state {
    margin: 0;
    max-width: 100%;
    text-align: center;
}

.emailbot-chat-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.45rem;
    cursor: pointer;
    background: var(--bg-color);
    opacity: 1;
    transition: opacity 0.16s ease;
}

.emailbot-chat-item.active {
    opacity: 0.3;
    cursor: default;
}

.emailbot-chat-item:hover {
    opacity: 0.8;
}

.emailbot-chat-item.active:hover {
    opacity: 0.3;
}

.emailbot-chat-item .emailbot-preview-link {
    color: var(--link-color);
    text-transform: uppercase;
    cursor: inherit;
    pointer-events: none;
}
.emailbot-chat-item .emailbot-preview-link * { pointer-events: none; cursor: inherit; }
.emailbot-chat-item .tnx-mention-label { opacity: .5; }
.emailbot-chat-item .tnx-mention-label[data-tnx-identity="self"] { opacity: 1; }
.emailbot-chat-item .tnx-mention-label[data-tnx-identity="role"],
.emailbot-chat-item .tnx-mention-label[data-tnx-identity="location"] { opacity: .75; }

.emailbot-chat-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

.emailbot-chat-state-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.emailbot-chat-state-pill {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.emailbot-chat-meta {
    opacity: 0.65;
    font-size: 0.8rem;
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.emailbot-chat-contact {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    word-break: break-word;
}

.emailbot-chat-contact.is-group-chat {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emailbot-activity-indicator {
    opacity: 0.3;
    white-space: nowrap;
}

.emailbot-chat-preview {
    opacity: 0.65;
    font-size: 0.8rem;
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--emailbot-chat-preview-lines, 3);
    line-clamp: var(--emailbot-chat-preview-lines, 3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
    max-height: calc(1.35em * var(--emailbot-chat-preview-lines, 3));
    word-break: break-word;
}

.emailbot-chat-preview-subject {
    font-weight: 700;
}

.emailbot-chat-draft-preview {
    color: var(--text-color);
    opacity: 1;
}

.emailbot-draft-label {
    color: var(--accent-color);
    font-weight: 700;
}

.emailbot-new-draft-label {
    margin-inline-start: auto;
    white-space: nowrap;
}

.emailbot-chat-preview-separator,
.emailbot-chat-preview-body {
    font-weight: 400;
}

.emailbot-chat-preview-reacted-label {
    opacity: 0.5;
}

.emailbot-chat-preview .emailbot-markdown-inline p,
.emailbot-chat-preview.emailbot-markdown-inline p,
.emailbot-message-subject .emailbot-markdown-inline p,
.emailbot-message-subject.emailbot-markdown-inline p {
    display: inline;
    margin: 0;
}

.emailbot-chat-preview .emailbot-markdown-inline table,
.emailbot-chat-preview.emailbot-markdown-inline table,
.emailbot-chat-preview .emailbot-markdown-inline thead,
.emailbot-chat-preview.emailbot-markdown-inline thead,
.emailbot-chat-preview .emailbot-markdown-inline tbody,
.emailbot-chat-preview.emailbot-markdown-inline tbody,
.emailbot-chat-preview .emailbot-markdown-inline tr,
.emailbot-chat-preview.emailbot-markdown-inline tr,
.emailbot-chat-preview .emailbot-markdown-inline th,
.emailbot-chat-preview.emailbot-markdown-inline th,
.emailbot-chat-preview .emailbot-markdown-inline td {
    display: inline;
}

.emailbot-chat-badge {
    display: inline-block;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0 0.45rem;
    margin-right: 0;
    font-size: 0.75rem;
}

.emailbot-chat-badge.external,
.emailbot-chat-badge.mixed {
    border-color: orange;
}

.emailbot-chat-badge.internal {
    border-color: green;
}

/* Contacts sit between the two: known people, but at another company. */
.emailbot-chat-badge.contacts {
    border-color: #c8a800;
}

/* The message state menu, shared by the messenger and the entry chat hover cards. */
.emailbot-state-options-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1200;
    box-sizing: border-box;
    width: min(168px, 48vw);
    max-width: calc(100vw - 16px);
}

.emailbot-state-options-menu.open {
    display: flex;
}

.emailbot-state-option {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emailbot-state-option[aria-selected="true"] {
    cursor: default;
    opacity: 0.3;
}

.emailbot-state-option-followup[aria-selected="true"] {
    opacity: 1;
}

.emailbot-state-option-followup[aria-selected="true"] .emailbot-state-followup-title,
.emailbot-state-option-followup[aria-selected="true"] .emailbot-state-followup-number,
.emailbot-state-option-followup[aria-selected="true"] .emailbot-state-followup-unit {
    opacity: 0.3;
}

.emailbot-state-option-followup[aria-selected="true"] .emailbot-state-followup-step {
    opacity: 1;
}

.emailbot-state-option-followup {
    min-height: calc(2em + 14px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    text-align: left;
}

.emailbot-state-followup-title,
.emailbot-state-followup-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
}

.emailbot-state-followup-title {
    display: block;
    font-weight: 700;
    text-overflow: ellipsis;
}

.emailbot-state-followup-step {
    flex: 0 0 calc(1em + 4px);
    width: calc(1em + 4px);
    height: calc(1em + 4px);
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.emailbot-state-followup-step:hover,
.emailbot-state-followup-step:focus {
    opacity: 0.8;
}

.emailbot-state-followup-step.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.emailbot-state-followup-number {
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.emailbot-state-followup-unit {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emailbot-state-option:hover,
.emailbot-state-option:focus {
    opacity: 0.8;
    outline: none;
}

.emailbot-state-option[aria-selected="true"]:hover,
.emailbot-state-option[aria-selected="true"]:focus {
    opacity: 0.3;
}

.emailbot-state-option-followup[aria-selected="true"]:hover,
.emailbot-state-option-followup[aria-selected="true"]:focus {
    opacity: 1;
}

/* A message's mentions below a line, in the messenger and in the entry chat hover cards. */
.emailbot-message-mentions { margin-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--text-color) 50%, transparent); padding-top: .4rem; }
.emailbot-message-mentions.is-editing { opacity: 1; }