/* =============================================================================
   GAVI Desk theme layer
   Loaded after HESK's app.css (customer theme + admin panel).
   To disable: remove the <link> to gavi.css from head.txt and inc/header.inc.php.
   ============================================================================= */

:root {
    --g-navy: #133e5e;
    --g-navy-deep: #0e2f48;
    --g-navy-line: rgba(255, 255, 255, .10);
    --g-blue: #2c70a2;
    --g-blue-hover: #235d88;
    --g-blue-wash: #eaf2f8;
    --g-bg: #f3f5f8;
    --g-surface: #ffffff;
    --g-sunken: #f7f9fb;
    --g-line: #e2e7ed;
    --g-line-strong: #cbd4de;
    --g-ink: #142230;
    --g-ink-2: #43515f;
    --g-ink-3: #5f6c7a;
    --g-focus: 0 0 0 3px rgba(44, 112, 162, .28);

    --g-red: #c8372d;
    --g-amber: #b86e00;
    --g-green: #23824f;
    --g-violet: #6a4fc0;
    --g-pink: #b8306f;
    --g-gray: #6b7684;

    --g-r-sm: 6px;
    --g-r: 8px;
    --g-r-lg: 12px;
    --g-shadow-pop: 0 8px 24px -6px rgba(20, 34, 48, .18), 0 2px 6px rgba(20, 34, 48, .06);
    --g-ease: cubic-bezier(.16, 1, .3, 1);

    --g-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --g-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    font-family: var(--g-sans);
    accent-color: var(--g-blue);
}

/* -----------------------------------------------------------------------------
   Base: type, browser surfaces
   ----------------------------------------------------------------------------- */

.wrapper,
.table,
.notification,
.btn,
input, select, textarea, button {
    font-family: var(--g-sans);
}

.wrapper {
    background-color: var(--g-bg);
    color: var(--g-ink);
    font-size: 14px;
    letter-spacing: 0;
}

::selection {
    background: rgba(44, 112, 162, .22);
    color: var(--g-ink);
}

* {
    scrollbar-color: var(--g-line-strong) transparent;
}

a {
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

.link,
a.link {
    color: var(--g-blue);
}

.link:hover,
a.link:hover {
    color: var(--g-blue-hover);
}

:focus-visible {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

.trackid,
.table__td-id a,
.g-mono,
time.timeago {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */

.btn {
    border-radius: var(--g-r);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color 160ms var(--g-ease), border-color 160ms var(--g-ease), color 160ms var(--g-ease), box-shadow 160ms var(--g-ease);
}

.btn-full {
    height: 40px;
    min-width: 0;
    padding: 0 20px;
    border: 1px solid var(--g-blue);
    background-color: var(--g-blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(19, 62, 94, .18);
}

.btn-full:hover {
    background-color: var(--g-blue-hover);
    border-color: var(--g-blue-hover);
}

.btn-full:active {
    background-color: var(--g-navy);
}

.btn-full.disabled,
.btn-full:disabled {
    background-color: var(--g-sunken);
    border-color: var(--g-line);
    color: var(--g-ink-3);
    box-shadow: none;
}

.btn-border,
.btn--blue-border,
.btn-transparent,
.btn.cancel {
    height: 40px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid var(--g-line-strong);
    background-color: var(--g-surface);
    color: var(--g-ink);
    font-weight: 600;
}

.btn-border:hover,
.btn--blue-border:hover,
.btn-transparent:hover,
.btn.cancel:hover {
    border-color: var(--g-blue) !important;
    background-color: var(--g-blue-wash) !important;
    color: var(--g-navy) !important;
}

.btn--blue-border .icon,
.btn-border .icon {
    fill: currentColor;
}


/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */

.form-control,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.selectize-input {
    border: 1px solid var(--g-line-strong) !important;
    border-radius: var(--g-r) !important;
    background-color: var(--g-surface) !important;
    color: var(--g-ink);
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color 140ms var(--g-ease), box-shadow 140ms var(--g-ease);
}

.form-control:hover,
.selectize-input:hover {
    border-color: #aab6c3 !important;
}

.form-control:focus,
.form-group input:focus,
.form-group textarea:focus,
.selectize-input.focus {
    border-color: var(--g-blue) !important;
    box-shadow: var(--g-focus) !important;
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #7d8895;
}

.form-group .label,
.form-group > label,
label.label {
    color: var(--g-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.isError .form-control,
.form-group.isError input,
.form-group.isError textarea {
    border-color: var(--g-red) !important;
}

.form-control__error {
    color: var(--g-red);
}

.dropdown-select .label,
.dropdown .label {
    border-radius: var(--g-r);
}

.dropdown-list {
    border-radius: var(--g-r) !important;
    border: 1px solid var(--g-line) !important;
    box-shadow: var(--g-shadow-pop) !important;
    overflow: hidden;
}

.dropdown-list li:hover,
.dropdown-list li.selected {
    background-color: var(--g-blue-wash) !important;
}

/* -----------------------------------------------------------------------------
   Status chips: neutral pill + label in ink; the signal colour lives only in the dot
   ----------------------------------------------------------------------------- */

span.open, span.waitingreply, span.replied, span.resolved, span.inprogress, span.onhold {
    --dot: var(--g-gray);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 10px 2px 8px;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background-color: var(--g-sunken);
    color: var(--g-ink-2) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

span.open::before, span.waitingreply::before, span.replied::before,
span.resolved::before, span.inprogress::before, span.onhold::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--dot);
    flex-shrink: 0;
}

span.open         { --dot: var(--g-red); }
span.waitingreply { --dot: #e08a00; }
span.replied      { --dot: var(--g-blue); }
span.resolved     { --dot: #2fa866; }
span.inprogress   { --dot: var(--g-violet); }
span.onhold       { --dot: var(--g-pink); }

/* Priority: replace the flag images with a square + label (scoped to .priority only) */
.priority[data-value] > span,
.priority[data-value] .label > span,
.priority0, .priority1, .priority2, .priority3 {
    position: relative;
    padding-left: 15px !important;
    background: none !important;
    font-weight: 600;
}

.priority[data-value] > span::before,
.priority[data-value] .label > span::before,
.priority0::before, .priority1::before, .priority2::before, .priority3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 2px;
    background: var(--g-gray);
}

.priority[data-value="critical"] > span, .priority[data-value="critical"] .label > span, .priority[data-value="0"] > span, .priority[data-value="0"] .label > span, .priority0 { color: var(--g-red); }
.priority[data-value="high"] > span, .priority[data-value="high"] .label > span,     .priority[data-value="1"] > span, .priority[data-value="1"] .label > span, .priority1 { color: #a8480c; }
.priority[data-value="medium"] > span, .priority[data-value="medium"] .label > span,   .priority[data-value="2"] > span, .priority[data-value="2"] .label > span, .priority2 { color: var(--g-ink-2); }
.priority[data-value="low"] > span, .priority[data-value="low"] .label > span,      .priority[data-value="3"] > span, .priority[data-value="3"] .label > span, .priority3 { color: var(--g-ink-3); font-weight: 500; }

.priority[data-value="critical"] > span::before, .priority[data-value="critical"] .label > span::before, .priority[data-value="0"] > span::before, .priority[data-value="0"] .label > span::before, .priority0::before { background: var(--g-red) !important; }
.priority[data-value="high"] > span::before, .priority[data-value="high"] .label > span::before,     .priority[data-value="1"] > span::before, .priority[data-value="1"] .label > span::before, .priority1::before { background: #e07b24 !important; }
.priority[data-value="medium"] > span::before, .priority[data-value="medium"] .label > span::before,   .priority[data-value="2"] > span::before, .priority[data-value="2"] .label > span::before, .priority2::before { background: #e3b341 !important; }
.priority[data-value="low"] > span::before, .priority[data-value="low"] .label > span::before,      .priority[data-value="3"] > span::before, .priority[data-value="3"] .label > span::before, .priority3::before { background: #b4bdc8 !important; }

.dropdown.priority [data-option], .dropdown-select.priority [data-option] {
    background-image: none !important;
    padding-left: 16px !important;
}

/* -----------------------------------------------------------------------------
   Notices
   ----------------------------------------------------------------------------- */

.notification {
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: none;
    background-color: var(--g-surface);
    color: var(--g-ink);
    padding: 16px 20px;
}

.notification.green,
.notification.success { background-color: #eef8f2; border-color: #c4e5d1; }
.notification.orange,
.notification.warning { background-color: #fdf5e7; border-color: #f0d9ae; }
.notification.red,
.notification.danger  { background-color: #fcefee; border-color: #f0c7c3; }
.notification.blue    { background-color: var(--g-blue-wash); border-color: #c8dcec; }

/* Legacy 8px side bar replaced by the tinted sheet */
.notification::before {
    display: none !important;
}

.notification > b:first-child,
.notification > strong:first-child,
.notification .notification--title {
    color: var(--g-ink);
}

/* =============================================================================
   CUSTOMER PORTAL  (body.cust-help)
   ============================================================================= */

.cust-help {
    background-color: var(--g-bg);
}

.cust-help .wrapper,
.cust-help .main__content {
    background-color: var(--g-bg) !important;
}

.cust-help .contr {
    max-width: 1040px;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 640px) {
    .cust-help .contr {
        padding-left: 16px;
        padding-right: 16px;
    }
    .cust-help .main__content {
        padding-top: 32px !important;
    }
    .cust-help .navlink {
        padding: 20px 44px 20px 16px;
        gap: 14px;
    }
    .cust-help .navlink::after {
        right: 18px;
    }
    .cust-help .navlink .icon-in-circle {
        width: 40px;
        height: 40px;
    }
    .cust-help .main__content .contr {
        padding-left: 16px;
        padding-right: 16px;
    }
    .cust-help .form.ticket-create,
    .cust-help form.form-submit-ticket {
        padding: 24px 16px !important;
    }
}

/* Header: one navy band, logo + title together */
.cust-help .header {
    background-color: var(--g-navy);
    border-bottom: 0;
}

.cust-help .header__inner {
    min-height: 64px;
    padding: 0;
}

.cust-help .header__logo img {
    width: 72px !important;
    height: auto;
    display: block;
}

/* Breadcrumbs become a quiet sub-bar on the same navy */
.cust-help .breadcrumbs {
    background-color: var(--g-navy-deep);
    border-bottom: 0;
}

.cust-help .breadcrumbs__inner {
    min-height: 40px;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

.cust-help .breadcrumbs__inner a,
.cust-help .breadcrumbs__inner a span {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.cust-help .breadcrumbs__inner a:hover span {
    color: #fff;
}

.cust-help .breadcrumbs__inner .last {
    color: #fff;
    font-weight: 600;
}

.cust-help .breadcrumbs__inner .icon {
    fill: rgba(255, 255, 255, .4);
}

.cust-help .main__content {
    padding: 48px 0 56px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Home: left-aligned greeting + search */
.cust-help .help-search {
    max-width: none;
    margin: 0 0 32px;
    text-align: left;
}

.cust-help .search__title,
.cust-help .select__title {
    margin: 0 0 20px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--g-navy);
    text-align: left;
    text-wrap: balance;
}

.cust-help .search__form .form-group input {
    height: 52px;
    border-radius: var(--g-r-lg) !important;
    font-size: 16px;
}

/* Primary actions: protocol rows, not floating cards */
.cust-help .nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    margin: 0 0 40px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
    overflow: hidden;
}

.cust-help .navlink {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 24px 56px 24px 24px;
    gap: 16px;
    align-items: flex-start;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--g-ink);
    text-decoration: none;
    transition: background-color 160ms var(--g-ease);
}

.cust-help .navlink + .navlink {
    border-left: 1px solid var(--g-line);
}

.cust-help .navlink::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--g-ink-3);
    border-right: 2px solid var(--g-ink-3);
    transform: rotate(45deg);
    transition: transform 200ms var(--g-ease), border-color 160ms var(--g-ease);
}

.cust-help .navlink:hover {
    background-color: var(--g-sunken);
    box-shadow: none;
}

.cust-help .navlink:hover::after {
    border-color: var(--g-blue);
    transform: translateX(3px) rotate(45deg);
}

.cust-help .navlink .icon-in-circle {
    width: 44px;
    height: 44px;
    border-radius: var(--g-r);
    background-color: var(--g-blue-wash);
}

.cust-help .navlink .icon-in-circle .icon {
    fill: var(--g-blue);
}

.cust-help .navlink__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--g-navy);
}

.cust-help .navlink__descr {
    font-size: 14px;
    line-height: 1.45;
    color: var(--g-ink-3);
}

/* Category select: list of rows */
.cust-help .navlink-condensed {
    padding: 16px 48px 16px 20px;
}

@media (max-width: 640px) {
    .cust-help .navlink + .navlink {
        border-left: 0;
        border-top: 1px solid var(--g-line);
    }
}

.cust-help .icon-in-circle {
    border-radius: var(--g-r);
    background-color: var(--g-blue-wash);
}

.cust-help .icon-in-circle .icon {
    fill: var(--g-blue);
}

/* Knowledgebase block + section headings */
.cust-help .article {
    margin-top: 8px;
}

.cust-help .article__heading {
    text-align: left;
    color: var(--g-navy);
    font-size: 20px;
    letter-spacing: -.01em;
}

.cust-help .article__heading a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.cust-help .article__heading--form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    font-size: 24px;
}

.cust-help .tabbed__head {
    border-bottom: 1px solid var(--g-line);
    background: transparent;
}

.cust-help .tabbed__head .tabbed__head_tabs li {
    color: var(--g-ink-3);
    font-weight: 600;
}

.cust-help .tabbed__head .tabbed__head_tabs li.current {
    color: var(--g-navy);
    box-shadow: inset 0 -2px 0 var(--g-blue);
}

.cust-help .tabbed__tabs .preview,
.cust-help .preview {
    border-radius: var(--g-r);
}

.cust-help .preview:hover {
    background-color: var(--g-surface);
}

.cust-help .preview__title {
    color: var(--g-navy);
    font-weight: 700;
}

.cust-help .preview__text {
    color: var(--g-ink-3);
}

/* Forms (submit / view ticket): one white sheet */
.cust-help .form.ticket-create,
.cust-help form.form-submit-ticket {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
}

.cust-help .form.ticket-create,
.cust-help form.form-submit-ticket {
    box-shadow: none;
}

.cust-help .form-submit-ticket .form-groups,
.cust-help .form-groups.centered,
.cust-help .form-submit-ticket .form-group,
.cust-help .form-submit-ticket .param {
    max-width: none;
}

.cust-help .form-submit-ticket .form-group {
    margin-bottom: 24px;
}

.cust-help .article__heading--form {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cust-help .article__heading--form .icon-in-circle {
    width: 40px;
    height: 40px;
}

.checkbox-custom [type="checkbox"] + label,
.radio-custom [type="radio"] + label {
    color: var(--g-ink-2) !important;
}

.cust-help .form-footer {
    align-items: flex-start;
    margin-top: 8px;
}

.cust-help .form-footer .btn-full {
    min-width: 200px;
    height: 44px;
}

.cust-help .divider {
    background-color: var(--g-line);
}

/* Ticket view */
.cust-help .ticket {
    gap: 24px;
}

.cust-help .ticket__body_block {
    padding: 24px 28px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: none;
    text-align: left;
}

.cust-help .ticket__body_block h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--g-navy);
}

.cust-help .block--head {
    color: var(--g-ink-3);
    border-bottom: 1px solid var(--g-line);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.cust-help .block--description {
    color: var(--g-ink);
    font-size: 15px;
    line-height: 1.65;
    max-width: 72ch;
}

.cust-help .ticket__params .params--block {
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: none;
    background-color: var(--g-surface);
    overflow: hidden;
}

.cust-help .ticket__params .params--block h4 {
    background-color: var(--g-sunken);
    border-bottom: 1px solid var(--g-line);
    color: var(--g-navy);
}

.cust-help .ticket__params .params--block .row {
    border-color: var(--g-line);
}

.cust-help .ticket__params .params--block .row .title {
    color: var(--g-ink-3);
}

.cust-help .ticket__params .params--block .row:first-child .value {
    font-family: var(--g-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--g-navy);
}

/* Footer */
.cust-help .footer {
    margin-top: auto;
    padding: 24px 16px 32px;
    color: var(--g-ink-3);
    font-size: 12.5px;
}

.cust-help .footer a {
    color: var(--g-ink-2);
}

.cust-help .main__content + .footer,
.cust-help .footer {
    border-top: 1px solid var(--g-line);
}

/* "Ir ao painel administrativo" link on the home page */
.cust-help .main__content a.link[href$="admin/"] {
    color: var(--g-ink-3);
}

.cust-help .main__content a.link[href$="admin/"]:hover {
    color: var(--g-navy);
}

/* The protocol code is typed as a protocol */
.cust-help input[name="track"] {
    font-family: var(--g-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* =============================================================================
   AGENT PANEL  (admin)
   ============================================================================= */

/* Sidebar */
.main-menu {
    background-color: var(--g-navy);
    color: rgba(255, 255, 255, .72);
    border-right: 1px solid var(--g-navy-deep);
}

.navbar__header {
    height: 64px;
    border-bottom: 1px solid var(--g-navy-line);
}

.navbar__logo {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.navbar__toggler {
    color: rgba(255, 255, 255, .6);
}

.navbar__list {
    padding: 12px 0;
}

.navbar__list li {
    margin-bottom: 2px;
}

.listitem {
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    transition: background-color 140ms var(--g-ease), color 140ms var(--g-ease);
}

.listitem:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.listitem.current {
    background-color: rgba(255, 255, 255, .10) !important;
    color: #fff;
    font-weight: 700;
}

.listitem__icon,
.listitem__icon a,
.listitem__caption {
    height: 44px;
}

.listitem__icon .icon {
    width: 20px;
    height: 20px;
}

.navbar__list li.is-active,
.navbar__list li.submenu-is-opened {
    background-color: rgba(0, 0, 0, .14);
}

.submenu__listitem {
    height: 38px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .7);
}

.submenu__listitem:hover,
.navbar__list li.current .submenu__list li.current {
    color: #fff;
}

.navbar__list li .submenu__list .submenu__listitem.current::before {
    width: 6px;
    height: 6px;
    background: #7fb4dc;
}

.navbar__list li.separator {
    opacity: 1;
    background-color: var(--g-navy-line);
    margin: 10px 16px;
}

.main-menu.is-toggled .listitem__menu {
    background-color: var(--g-navy-deep);
    border-radius: 0 var(--g-r) var(--g-r) 0;
    box-shadow: var(--g-shadow-pop);
}

.badge,
.listitem__notification {
    background-color: var(--g-red);
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Top bar */
body:not(.cust-help) .wrapper:not(.login) .main > .header {
    height: 64px;
    background-color: var(--g-surface);
    border-bottom: 1px solid var(--g-line);
}

.header__left .search-form input,
.header__left input[type="text"] {
    height: 40px;
    border-radius: var(--g-r);
    background-color: var(--g-sunken);
    border: 1px solid var(--g-line);
}

.header__left input[type="text"]:focus {
    background-color: var(--g-surface);
    border-color: var(--g-blue);
    box-shadow: var(--g-focus);
}

.profile__item {
    border-left-color: var(--g-line) !important;
}

.profile__menu {
    border-radius: var(--g-r-lg);
    border: 1px solid var(--g-line);
    box-shadow: var(--g-shadow-pop);
    overflow: hidden;
}

/* Content area */
.wrapper .main__content {
    padding: 28px 32px 32px;
}

.main__content h2,
.main__content .h-2,
.tickets__head h2 {
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--g-navy);
}

/* Ticket queue */
.table-wrap {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
    box-shadow: none;
    overflow: clip;
}

/* A wrap that is just the table goes edge-to-edge */
.table-wrap:has(> table.table:only-child),
.table-wrap:has(> table.ticket-list) {
    padding: 0;
}

@media (max-width: 899px) {
    .table-wrap {
        overflow-x: auto;
        padding: 16px;
    }
}

.table {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--g-ink);
}

.table thead {
    height: 40px;
    background-color: var(--g-sunken);
    color: var(--g-ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 14px;
    background-color: var(--g-sunken);
    border-bottom: 1px solid var(--g-line);
}

.table thead th:not(:first-child),
.table tbody td:not(:first-child) {
    border-left: 0;
}

.table thead .sort,
.table thead th a {
    color: var(--g-ink-3);
}

.table thead th.asc .sort,
.table thead th.desc .sort {
    color: var(--g-navy);
}

.table thead th .handle::before { border-bottom-color: currentColor; }
.table thead th .handle::after  { border-top-color: currentColor; }

.table tbody tr,
.table tbody tr:nth-child(even) {
    background-color: var(--g-surface);
    border-bottom: 1px solid var(--g-line);
}

.table tbody tr:last-child {
    border-bottom: 0;
}

.table tbody tr:hover {
    background-color: #f5f9fc !important;
}

.table tbody tr.is-checked {
    background-color: var(--g-blue-wash) !important;
}

.table tbody td {
    padding: 11px 14px;
    vertical-align: middle;
}

.table tbody tr .table__first_td,
.table thead th.table__first_th,
.table tbody td.table__first_th {
    padding: 11px 4px 11px 16px;
}

/* Protocol number: the first thing the eye lands on */
.table td.trackid a,
.table .table__td-id a {
    font-family: var(--g-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--g-blue);
    text-decoration: none;
    white-space: nowrap;
}

.table td.trackid a:hover {
    text-decoration: underline;
}

.table td.subject a {
    color: var(--g-ink);
    font-weight: 600;
    text-decoration: none;
}

.table td.subject a:hover {
    color: var(--g-blue);
}

/* Unassigned: bold subject, no side rail. Critical: warm tint, no rail */
.table tbody tr.new td,
.table tbody tr.new .table__td-id a {
    font-weight: inherit;
}

.table tbody tr.new td.subject a {
    font-weight: 700;
}

.table tbody tr.new td:first-child::before,
.table tbody tr.new.bg-critical td:first-child::before {
    display: none !important;
}

.bg-critical {
    background-color: #fff7f6 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #f3d3cf !important;
}

/* Pagination */
.pagination__link,
.pagination__item a,
.pagination__nav-btn {
    border-radius: var(--g-r-sm);
}

.pagination__item.is-current a,
.pagination__item.current a,
.pagination__item.is-current .pagination__link {
    background-color: var(--g-navy);
    color: #fff;
}

/* Ticket view: way back to the queue */
.main__content.ticket {
    flex-wrap: wrap;
    align-items: flex-start;
}

/* wrap lets the crumb take its own row; basis 0 keeps body + params side by side */
@media (min-width: 900px) {
    .main__content.ticket > .ticket__body {
        flex: 1 1 0;
        min-width: 0;
    }
}

.gavi-ticket-crumb {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 16px;
    font-size: 13px;
}

.gavi-ticket-crumb__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 8px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    color: var(--g-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms var(--g-ease), border-color 160ms var(--g-ease), color 160ms var(--g-ease);
}

.gavi-ticket-crumb__back .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 200ms var(--g-ease);
}

.gavi-ticket-crumb__back:hover,
.gavi-ticket-crumb__back:focus-visible {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
    text-decoration: none;
}

.gavi-ticket-crumb__back:hover .icon {
    transform: translateX(-2px);
}

.gavi-ticket-crumb__sep {
    color: var(--g-line-strong);
}

.gavi-ticket-crumb__id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--g-ink-3);
    font-family: var(--g-mono);
    font-weight: 600;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

/* Ticket view */
.main__content.ticket .ticket__body_block,
.ticket__body_block {
    padding: 24px 28px;
    margin-bottom: 16px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: none;
    background-color: var(--g-surface);
    text-align: left;
}

.ticket__body_block h3 {
    color: var(--g-navy);
    font-weight: 700;
    letter-spacing: -.01em;
}

.ticket__body_block .block--head {
    color: var(--g-ink-3);
}

.ticket__body_block .block--description {
    color: var(--g-ink);
    font-size: 15px;
    line-height: 1.65;
    max-width: 78ch;
}

/* Message bodies (incl. HTML from emails): undo app.css reset (font: inherit) on inline formatting */
.browser-default b,
.browser-default strong { font-weight: 700; }
.browser-default i,
.browser-default em,
.browser-default cite,
.browser-default dfn,
.browser-default var { font-style: italic; }
.browser-default u,
.browser-default ins { text-decoration: underline; }
.browser-default s,
.browser-default strike,
.browser-default del { text-decoration: line-through; }
.browser-default small { font-size: 85%; }
.browser-default sub,
.browser-default sup { font-size: 75%; line-height: 0; position: relative; }
.browser-default sub { vertical-align: sub; }
.browser-default sup { vertical-align: super; }
.browser-default code,
.browser-default kbd,
.browser-default samp,
.browser-default tt,
.browser-default pre { font-family: "JetBrains Mono", monospace; }
.browser-default h1,
.browser-default h2,
.browser-default h3,
.browser-default h4,
.browser-default h5,
.browser-default h6 { font-weight: 700; line-height: 1.3; margin: .6em 0 .3em; }
.browser-default h1 { font-size: 1.6em; }
.browser-default h2 { font-size: 1.4em; }
.browser-default h3 { font-size: 1.2em; }
.browser-default h4 { font-size: 1.1em; }

.ticket__body_block.original-message {
    border-color: var(--g-line-strong);
}

.ticket__params .params--block,
.ticket__params .params--bar {
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: none;
    background-color: var(--g-surface);
}

.ticket__params .params--block .row {
    border-color: var(--g-line);
}

.ticket__params .params--block .row .title {
    color: var(--g-ink-3);
}

.ticket__params .params--block h4 {
    color: var(--g-navy);
}

/* Internal notes: amber paper so they never read as a reply */
.note {
    border: 1px solid #f0dcae;
    border-radius: var(--g-r);
    background-color: #fdf8ec;
}

.note__head {
    color: #7a5200;
}

/* Settings & management screens */
.settings__form_block,
.right-bar__body,
.main__content.templates .ticket__list,
.main__content.templates .response__list,
.users-online {
    border-radius: var(--g-r-lg);
}

.right-bar {
    box-shadow: -12px 0 32px -12px rgba(20, 34, 48, .25);
}

.divider {
    background-color: var(--g-line);
}

/* Login screen: navy brand panel + white form sheet */
.wrapper.login {
    background-color: var(--g-surface);
}

.wrapper.login .reg__image {
    flex: 1 1 auto;
    width: auto;
    background-color: var(--g-navy);
}

.wrapper.login .reg__image .bg-absolute {
    background: var(--g-navy) url(../img/logo_gavi.png) no-repeat 56px 48px / 96px auto;
}

.wrapper.login .reg__image .bg-absolute img {
    display: none;
}

.wrapper.login .reg__image::after {
    content: "Plataforma de Suporte";
    position: absolute;
    left: 56px;
    bottom: 48px;
    z-index: 1;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    font-weight: 500;
}

.wrapper.login .reg__section {
    flex: 0 0 auto;
    max-width: 480px;
    margin-left: 0;
    padding: 96px 48px 48px;
    box-shadow: none;
    background-color: var(--g-surface);
}

.wrapper.login .reg__box {
    max-width: 340px;
}

.wrapper.login .main {
    flex: 1 1 auto;
    width: 100%;
}

.wrapper.login .reg__heading {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-navy);
}

.wrapper.login .form-group input {
    height: 44px;
}

.wrapper.login .btn-full {
    width: 100%;
    height: 44px !important;
}

@media (max-width: 899px) {
    .wrapper.login .reg__wrap {
        flex-direction: column;
        margin-top: 0;
    }
    .wrapper.login .reg__image {
        display: block;
        flex: 0 0 72px;
        height: 72px;
    }
    .wrapper.login .reg__image .bg-absolute {
        background-position: 16px center;
        background-size: 72px auto;
    }
    .wrapper.login .reg__image::after {
        display: none;
    }
    .wrapper.login .reg__section {
        max-width: none;
        padding: 40px 16px 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* -----------------------------------------------------------------------------
   Agent panel refinements (from logged-in screenshots)
   ----------------------------------------------------------------------------- */

/* Queue: sequential ticket number set as a protocol, not an underlined link */
.ticket-list tbody td:not(.subject) > a[href^="admin_ticket.php"] {
    font-family: var(--g-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--g-blue);
    text-decoration: none;
}

.ticket-list tbody td:not(.subject) > a[href^="admin_ticket.php"]:hover {
    text-decoration: underline;
}

/* Time tracker: a quiet toolbar instead of a solid blue band */
.ticket__body_block .block--timer {
    height: 52px;
    margin-bottom: 12px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r);
    background-color: var(--g-sunken);
}

.ticket__body_block .block--timer span,
.ticket__body_block .block--timer label {
    color: var(--g-ink-2) !important;
    font-family: var(--g-sans);
    font-weight: 600;
}

.ticket__body_block .block--timer input#time_worked {
    height: 34px;
    width: 104px;
    font-family: var(--g-mono);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ticket__body_block .block--timer a {
    border-radius: var(--g-r-sm);
}

.ticket__body_block .block--timer a svg {
    fill: var(--g-ink-3);
}

.ticket__body_block .block--timer a:hover {
    background-color: var(--g-blue-wash);
}

.ticket__body_block .block--timer a:hover svg {
    fill: var(--g-blue);
}

/* Attachments: the add-files trigger is secondary, not a full-width primary bar */
.btn.fileinput-button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: 36px;
    margin: 12px 16px 0 0;
    padding: 0 14px;
    border: 1px solid var(--g-line-strong);
    background-color: var(--g-surface);
    color: var(--g-ink);
    box-shadow: none;
}

.btn.fileinput-button:hover {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.dropzone {
    border: 1px dashed var(--g-line-strong) !important;
    border-radius: var(--g-r) !important;
    background-color: var(--g-sunken) !important;
    color: var(--g-ink-3);
}

/* "Enviar como": same secondary control family; the wrapper carries no chrome */
.ticket__body_block .block--submit .submit-us,
.ticket__body_block .block--submit .submit-us.dropdown-select {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.ticket__body_block .block--submit .submit-us .label,
.ticket__body_block .block--submit .submit-us > .label {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-line-strong) !important;
    border-radius: var(--g-r);
    background: var(--g-surface) !important;
    color: var(--g-ink) !important;
    font-weight: 600;
}

.ticket__body_block .block--submit .submit-us .label:hover {
    border-color: var(--g-blue) !important;
    background-color: var(--g-blue-wash) !important;
}

.ticket__body_block .block--submit .submit-us span {
    color: inherit;
}

.ticket__body_block .block--submit .submit-us .icon-chevron-down {
    fill: var(--g-ink-3);
}

/* Previous tickets: small status dots, links without heavy underline */
.dot {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: 1px;
}

.bg-open         { background-color: var(--g-red) !important; }
.bg-waitingreply { background-color: #e08a00 !important; }
.bg-replied      { background-color: var(--g-blue) !important; }
.bg-resolved     { background-color: #2fa866 !important; }
.bg-inprogress   { background-color: var(--g-violet) !important; }
.bg-onhold       { background-color: var(--g-pink) !important; }

.ticket__params .params--block .accordion-body > div > a[href^="admin_ticket.php"] {
    color: var(--g-ink);
    text-decoration: none;
    line-height: 1.5;
}

.ticket__params .params--block .accordion-body > div > a[href^="admin_ticket.php"]:hover {
    color: var(--g-blue);
    text-decoration: underline;
}

.ticket__params .params--block .accordion-body > div {
    margin-bottom: 6px;
}

/* Ticket meta: give labels room so they stop wrapping */
.ticket__params .params--block .row .title {
    flex: 0 0 112px;
    min-width: 112px;
}

/* "Enviar como": legacy ID rules draw a blue box inside a box; flatten to one secondary button */
#submit-as-div .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-line-strong) !important;
    border-radius: var(--g-r);
    background: var(--g-surface) !important;
    color: var(--g-ink) !important;
    cursor: pointer;
    transition: border-color 160ms var(--g-ease), background-color 160ms var(--g-ease);
}

#submit-as-div .label:hover,
#submit-as-div.active .label {
    border-color: var(--g-blue) !important;
    background-color: var(--g-blue-wash) !important;
}

#submit-as-div .label span {
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit !important;
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1;
}

#submit-as-div .label .icon-chevron-down {
    margin: 0;
    fill: var(--g-ink-3);
}

/* -----------------------------------------------------------------------------
   Ticket queue: search bar + filter panel beside the list (inc/show_search_form.inc.php)
   ----------------------------------------------------------------------------- */

.g-queue [hidden] {
    display: none !important;
}

.g-queue *,
.g-queue *::before,
.g-queue *::after {
    box-sizing: border-box;
}

.g-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.g-queue input[type="text"],
.g-queue input[type="search"],
.g-queue input[type="number"],
.g-queue select {
    height: 38px;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    color: var(--g-ink);
    font: 400 14px/1 var(--g-sans);
    transition: border-color 140ms var(--g-ease), box-shadow 140ms var(--g-ease);
}

.g-queue select {
    padding-right: 32px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f6c7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    text-overflow: ellipsis;
}

.g-queue input:hover,
.g-queue select:hover {
    border-color: #aab6c3;
}

.g-queue input:focus,
.g-queue select:focus {
    outline: none;
    border-color: var(--g-blue);
    box-shadow: var(--g-focus);
}

.g-queue input::placeholder {
    color: #7b8794;
}

.g-queue .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Search bar */
.g-search {
    margin-bottom: 16px;
}

.g-search__bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.g-search__bar .g-search__what {
    width: auto;
    max-width: 200px;
    flex: 0 0 auto;
    background-color: var(--g-sunken);
}

.g-search__field {
    position: relative;
    flex: 1 1 320px;
    max-width: 560px;
    min-width: 0;
}

.g-search__field .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -8px;
    color: var(--g-ink-3);
    pointer-events: none;
}

.g-search__field input[type="search"] {
    padding-left: 36px;
}

.g-search__bar .btn {
    height: 38px;
    flex: 0 0 auto;
}

.g-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--g-blue);
    font: 600 13px/1.2 var(--g-sans);
    cursor: pointer;
    white-space: nowrap;
}

.g-link-btn:hover {
    color: var(--g-blue-hover);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.g-link-btn .icon {
    width: 12px;
    height: 12px;
    transition: transform 180ms var(--g-ease);
}

.g-link-btn[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.g-search__bar .g-link-btn {
    margin-left: 4px;
}

.g-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    color: var(--g-ink);
    font: 600 14px/1 var(--g-sans);
    cursor: pointer;
    transition: background-color 160ms var(--g-ease), border-color 160ms var(--g-ease), color 160ms var(--g-ease);
}

.g-filters-toggle:hover {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.g-filters-toggle[aria-expanded="true"] {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.g-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--g-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Advanced search: one hairline sheet under the bar */
.g-search__adv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 20px;
    margin-top: 10px;
    padding: 16px 20px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
}

.g-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 220px;
    min-width: 0;
}

.g-field--wide { flex-basis: auto; }
.g-field--narrow { flex-basis: 110px; }

.g-field > label,
.g-field__label {
    color: var(--g-ink-2);
    font-size: 13px;
    font-weight: 600;
}

.g-range {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--g-ink-3);
}

.g-range input {
    width: 148px !important;
    font-variant-numeric: tabular-nums;
}

/* Layout: list + panel */
.g-queue__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 20px;
    align-items: start;
}

.g-queue.is-collapsed .g-queue__body {
    grid-template-columns: minmax(0, 1fr);
}

.g-queue.is-collapsed .g-filters,
.g-queue.is-collapsed .g-filters__scrim {
    display: none;
}

.g-queue__list {
    min-width: 0;
}

.g-queue__list > .quick-links:first-child,
.g-queue__list > .notification:first-child {
    margin-top: 0;
}

/* Filter panel */
.g-filters {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
    overflow: hidden;
}

.g-filters__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.g-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--g-line);
    flex: 0 0 auto;
}

.g-filters__head h2 {
    margin: 0;
    color: var(--g-navy);
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0;
}

.g-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--g-r-sm);
    background: none;
    color: var(--g-ink-3);
    cursor: pointer;
}

.g-icon-btn:hover {
    background-color: var(--g-sunken);
    color: var(--g-ink);
}

.g-icon-btn .icon {
    width: 12px;
    height: 12px;
}

.g-filters__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 8px;
}

.g-group {
    position: relative;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--g-line);
    min-width: 0;
}

.g-group--last {
    border-bottom: 0;
}

.g-group__head {
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    color: var(--g-ink-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.g-group > .g-chips,
.g-group > select,
.g-group > input {
    clear: both;
}

.g-group__all {
    position: absolute;
    top: 16px;
    right: 0;
    z-index: 1;
    padding: 0 2px;
    line-height: 20px;
    font-size: 12.5px;
}

.g-group select + .g-due {
    margin-top: 8px;
}

.g-due {
    display: flex;
    gap: 8px;
}

.g-due input[type="number"] {
    width: 84px;
    flex: 0 0 84px;
    font-variant-numeric: tabular-nums;
}

/* Chips: one click toggles a value; the checked state is the filter */
.g-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.g-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.g-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.g-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 11px;
    border: 1px solid var(--g-line-strong);
    border-radius: 999px;
    background-color: var(--g-surface);
    color: var(--g-ink-3);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    user-select: none;
    transition: background-color 140ms var(--g-ease), border-color 140ms var(--g-ease), color 140ms var(--g-ease);
}

.g-chip:hover > span {
    border-color: #aab6c3;
    color: var(--g-ink);
}

.g-chip input:checked + span {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.g-chip input:checked + span::after {
    content: "";
    width: 9px;
    height: 5px;
    margin: -3px 0 0 1px;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
}

.g-chip input:focus-visible + span {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

/* The status pill inside a chip gives up its own pill; the dot stays */
.g-chip span.open, .g-chip span.waitingreply, .g-chip span.replied,
.g-chip span.resolved, .g-chip span.inprogress, .g-chip span.onhold {
    padding: 0;
    border: 0;
    background: none;
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
}

.g-chip [class^="priority"] {
    color: inherit !important;
    font-weight: inherit;
}

.g-chip input:not(:checked) + span span.open::before,
.g-chip input:not(:checked) + span span.waitingreply::before,
.g-chip input:not(:checked) + span span.replied::before,
.g-chip input:not(:checked) + span span.resolved::before,
.g-chip input:not(:checked) + span span.inprogress::before,
.g-chip input:not(:checked) + span span.onhold::before,
.g-chip input:not(:checked) + span [class^="priority"]::before {
    opacity: .45;
}

/* Switch and plain check */
.g-switch,
.g-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--g-ink-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.g-switch input {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 18px;
    margin: 1px 0 0;
    border-radius: 999px;
    background-color: var(--g-line-strong);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 160ms var(--g-ease);
}

.g-switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(20, 34, 48, .25);
    transition: transform 180ms var(--g-ease);
}

.g-switch input:checked {
    background-color: var(--g-blue);
}

.g-switch input:checked::after {
    transform: translateX(14px);
}

.g-switch input:focus-visible {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

.g-check input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: 0 0 16px;
}

/* Display options: collapsed by default */
.g-view {
    margin: 0 -20px;
    padding: 0 20px;
    border-top: 1px solid var(--g-line);
    background-color: var(--g-sunken);
}

.g-view summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    color: var(--g-ink-2);
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.g-view summary::-webkit-details-marker {
    display: none;
}

.g-view summary .icon {
    width: 12px;
    height: 12px;
    color: var(--g-ink-3);
    transition: transform 180ms var(--g-ease);
}

.g-view[open] summary .icon {
    transform: rotate(180deg);
}

.g-view .g-group {
    padding-top: 0;
    border-bottom: 0;
}

.g-sort {
    display: flex;
    gap: 8px;
    clear: both;
}

.g-queue .g-sort select {
    flex: 1 1 auto;
    width: auto;
}

.g-seg {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    overflow: hidden;
}

.g-seg label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.g-seg label + label {
    border-left: 1px solid var(--g-line-strong);
}

.g-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.g-seg span {
    display: grid;
    place-items: center;
    height: 36px;
    padding: 0 10px;
    color: var(--g-ink-3);
    font-size: 13px;
    font-weight: 600;
}

.g-seg input:checked + span {
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.g-seg input:focus-visible + span {
    outline: 2px solid var(--g-blue);
    outline-offset: -2px;
}

/* Footer: the apply action never scrolls away */
.g-filters__foot {
    flex: 0 0 auto;
    display: grid;
    gap: 12px;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--g-line);
    background-color: var(--g-surface);
}

.g-filters__actions {
    display: flex;
    gap: 8px;
}

.g-filters__actions .btn-full {
    flex: 1 1 auto;
}

.g-filters__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.g-filters__reset {
    color: var(--g-ink-3);
    font-size: 12.5px;
    text-decoration: underline;
    text-decoration-color: var(--g-line-strong);
}

.g-filters__reset:hover {
    color: var(--g-blue);
    text-decoration-color: currentColor;
}

.g-filters .g-filters__head .g-icon-btn {
    display: none;
}

.g-filters__scrim {
    display: none;
}

/* Below 1360px the panel becomes a drawer so the table keeps its width */
@media (max-width: 1359px) {
    .g-queue__body,
    .g-queue.is-collapsed .g-queue__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .g-filters,
    .g-queue.is-collapsed .g-filters {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        display: flex;
        width: min(340px, 100vw);
        max-height: none;
        border: 0;
        border-left: 1px solid var(--g-line);
        border-radius: 0;
        box-shadow: -12px 0 32px -12px rgba(20, 34, 48, .25);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 220ms var(--g-ease), visibility 0s linear 220ms;
    }

    .g-queue.is-drawer-open .g-filters {
        transform: none;
        visibility: visible;
        transition: transform 220ms var(--g-ease), visibility 0s;
    }

    .g-filters .g-filters__head .g-icon-btn {
        display: inline-grid;
    }

    .g-queue.is-drawer-open .g-filters__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background-color: rgba(14, 47, 72, .28);
    }

    .g-queue .g-filters-toggle[aria-expanded="false"] {
        border-color: var(--g-line-strong);
        background-color: var(--g-surface);
        color: var(--g-ink);
    }
}

@media (max-width: 760px) {
    .g-search__bar {
        flex-wrap: wrap;
    }

    .g-search__bar .g-search__what {
        order: -3;
        flex: 1 1 0;
        max-width: none;
    }

    .g-filters-toggle {
        order: -2;
    }

    .g-search__field {
        order: -1;
        flex: 1 1 100%;
        max-width: none;
    }

    .g-search__adv {
        padding: 16px;
    }

    .g-field {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-queue *,
    .g-queue *::before,
    .g-queue *::after {
        transition-duration: 0ms !important;
    }
}

/* -----------------------------------------------------------------------------
   Ticket list rows (inc/ticket_list.inc.php): Freshdesk-style, three cells
   checkbox | avatar + protocol + subject + meta | priority / owner / status
   ----------------------------------------------------------------------------- */

.table.g-list {
    table-layout: fixed;
    width: 100%;
}

.table.g-list thead {
    height: auto;
    text-transform: none;
    letter-spacing: 0;
}

.table.g-list .g-col-check {
    width: 48px;
}

.table.g-list .g-col-props {
    width: 232px;
}

.table.g-list thead th.g-list__bar {
    padding: 8px 16px 8px 4px;
}

.g-list__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}

.g-list__all {
    margin: 0;
    color: var(--g-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.g-list__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--g-ink-3);
    font-size: 13px;
    font-weight: 600;
}

.g-list__sort label {
    margin: 0;
    white-space: nowrap;
}

.g-list__sort select {
    height: 32px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background: var(--g-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f6c7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--g-ink);
    font: 600 13px/1 var(--g-sans);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.g-list__sort select:focus {
    outline: none;
    border-color: var(--g-blue);
    box-shadow: var(--g-focus);
}

.g-list__dir {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    color: var(--g-ink-2) !important;
}

.g-list__dir:hover {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy) !important;
}

.g-list__dir .icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform 180ms var(--g-ease);
}

.g-list__dir .icon.is-asc {
    transform: rotate(180deg);
}

/* Rows */
.table.g-list tbody tr.g-row {
    cursor: pointer;
}

.table.g-list tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: top;
}

.table.g-list tbody tr .table__first_td,
.table.g-list tbody td.table__first_th {
    padding-top: 22px;
}

.g-row__wrap {
    display: flex;
    gap: 14px;
    min-width: 0;
}

.g-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--g-r);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}

.g-row.new .g-avatar {
    background-color: var(--g-navy);
    color: #fff;
}

.g-row__text {
    min-width: 0;
    flex: 1 1 auto;
}

.g-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 4px;
    line-height: 1.35;
}

.table.g-list .g-row__id {
    flex: 0 0 auto;
    font-family: var(--g-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    color: var(--g-blue);
    text-decoration: none;
}

.table.g-list .g-row__id:hover {
    text-decoration: underline;
}

.table.g-list .g-row__subject {
    min-width: 0;
    color: var(--g-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.table.g-list tr.new .g-row__subject {
    font-weight: 700;
}

.table.g-list tr.g-row:hover .g-row__subject {
    color: var(--g-blue);
}

.g-row__title .icon-tag {
    width: 14px;
    height: 14px;
    align-self: center;
    fill: var(--g-violet);
}

/* Due flags: neutral pill, the colour stays in the dot */
.g-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 1px 8px 1px 7px;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background-color: var(--g-sunken);
    color: var(--g-ink-2);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.g-flag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e08a00;
}

.g-flag.is-overdue::before {
    background-color: var(--g-red);
}

.g-meta {
    margin-top: 5px;
    color: var(--g-ink-3);
    font-size: 13px;
    line-height: 1.45;
}

.g-meta > span,
.g-meta > a {
    white-space: nowrap;
}

.g-meta > i {
    padding: 0 3px;
    font-style: normal;
    color: #aab6c3;
}

.g-meta__who {
    color: var(--g-ink-2);
    font-weight: 600;
}

.g-meta__num {
    font-variant-numeric: tabular-nums;
}

.g-meta a {
    color: var(--g-ink-3);
}

.g-tag {
    font-variant-numeric: tabular-nums;
}

.g-tag__k {
    color: var(--g-ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Properties column */
.table.g-list td.g-row__props {
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid var(--g-line);
}

.g-props {
    display: grid;
    gap: 5px;
    justify-items: start;
    font-size: 13px;
    line-height: 20px;
}

.g-props .priority {
    margin: 0;
}

.g-props .priority > span {
    font-size: 13px;
}

.g-owner {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: var(--g-ink);
    font-weight: 500;
}

.g-owner span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-owner .icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: var(--g-ink-3);
}

.g-owner.is-me {
    color: var(--g-navy);
    font-weight: 700;
}

.g-owner.is-me .icon {
    fill: var(--g-blue);
}

.g-owner.is-none {
    color: var(--g-ink-3);
    font-style: italic;
}

.g-status span {
    font-size: 12px;
}

/* Legend now carries only the archive mark */
.tickets__legend .icon-tag {
    fill: var(--g-violet);
}

@media (max-width: 760px) {
    .table.g-list,
    .table.g-list tbody,
    .table.g-list tr.g-row {
        display: block;
    }

    .table.g-list thead tr {
        display: flex;
    }

    .table.g-list thead th.g-list__bar {
        flex: 1 1 auto;
    }

    .g-list__all {
        display: none;
    }

    .table.g-list tr.g-row {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .table.g-list tr.g-row > td {
        display: block;
    }

    .table.g-list colgroup {
        display: none;
    }

    .table.g-list td.g-row__props {
        grid-column: 2;
        width: auto;
        padding: 0 16px 14px 0;
        border-left: 0;
    }

    .g-props {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        padding-left: 54px;
    }

    .g-avatar {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .table-wrap:has(> table.g-list) {
        overflow-x: visible;
        padding: 0;
    }
}

/* Inline editing: the property reads as text; an invisible native select sits on top */
.g-prop {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: -2px -6px;
    padding: 2px 22px 2px 6px;
    border-radius: var(--g-r-sm);
    transition: background-color 140ms var(--g-ease);
}

.g-prop:has(.g-prop__select)::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.5px solid var(--g-ink-3);
    border-bottom: 1.5px solid var(--g-ink-3);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 140ms var(--g-ease);
}

.g-prop:has(.g-prop__select):hover,
.g-prop:has(.g-prop__select:focus-visible) {
    background-color: var(--g-sunken);
    box-shadow: inset 0 0 0 1px var(--g-line);
}

.g-prop:has(.g-prop__select):hover::after,
.g-prop:has(.g-prop__select:focus-visible)::after {
    opacity: 1;
}

.g-prop:has(.g-prop__select:focus-visible) {
    box-shadow: 0 0 0 2px var(--g-blue);
}

.g-prop__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 14px;
}

.g-prop.is-saving {
    opacity: .55;
    pointer-events: none;
}

.g-props .priority.g-prop > span {
    padding-left: 15px !important;
}

.g-props .priority.g-prop > span::before {
    left: 0;
}

/* Toast */
.g-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    max-width: min(560px, calc(100vw - 32px));
    padding: 11px 18px;
    border-radius: var(--g-r);
    background-color: var(--g-navy);
    color: #fff;
    font: 600 14px/1.4 var(--g-sans);
    box-shadow: var(--g-shadow-pop);
    transform: translate(-50%, 12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 220ms var(--g-ease), opacity 220ms var(--g-ease), visibility 0s linear 220ms;
}

.g-toast.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 220ms var(--g-ease), opacity 220ms var(--g-ease), visibility 0s;
}

.g-toast.is-error {
    background-color: #8f241d;
}

/* Bulk bar: replaces the list tools while tickets are selected */
.g-list__tools[hidden],
.g-bulk[hidden] {
    display: none !important;
}

.g-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.g-bulk__count {
    margin-right: 6px;
    color: var(--g-navy);
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.g-bulk__ctl,
.g-bulk__btn,
.g-bulk__clear {
    height: 32px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    color: var(--g-ink);
    font: 600 13px/1 var(--g-sans);
    cursor: pointer;
    transition: background-color 140ms var(--g-ease), border-color 140ms var(--g-ease), color 140ms var(--g-ease);
}

.g-queue select.g-bulk__ctl {
    width: auto;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
}

.g-bulk__ctl {
    max-width: 200px;
    padding: 0 28px 0 10px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--g-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f6c7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}

.g-bulk__btn {
    padding: 0 12px;
}

.g-bulk__ctl:hover,
.g-bulk__btn:hover {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
}

.g-bulk__ctl:focus-visible,
.g-bulk__btn:focus-visible,
.g-bulk__clear:focus-visible {
    outline: none;
    border-color: var(--g-blue);
    box-shadow: var(--g-focus);
}

.g-bulk__clear {
    margin-left: auto;
    padding: 0 10px;
    border-color: transparent;
    background: none;
    color: var(--g-ink-3);
}

.g-bulk__clear:hover {
    color: var(--g-blue);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* The bottom bulk controls now live in the bar; keep them in the DOM for HESK's modal */
.tickets__legend .bulk-actions {
    display: none !important;
}

.table.g-list thead:has(.g-bulk:not([hidden])) th {
    background-color: var(--g-blue-wash);
}

@media (prefers-reduced-motion: reduce) {
    .g-toast,
    .g-prop,
    .g-prop::after {
        transition-duration: 0ms !important;
    }
}

/* Reply recipients: "Para" + e-mails em copia (Cc) */
.ticket__body_block .block--recipients {
    margin: 12px 0 0;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r);
    background-color: var(--g-surface);
    font-family: var(--g-sans);
}

.ticket__body_block .block--recipients .recipients__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
}

.ticket__body_block .block--recipients .recipients__row + .recipients__row {
    border-top: 1px solid var(--g-line);
}

.ticket__body_block .block--recipients .recipients__label {
    flex: 0 0 40px;
    padding-top: 4px;
    color: var(--g-ink-3);
    font-size: 13px;
    font-weight: 600;
}

.ticket__body_block .block--recipients .recipients__value {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    min-width: 0;
    color: var(--g-ink);
    font-size: 14px;
}

.ticket__body_block .block--recipients .recipients__chip {
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--g-blue-wash);
    color: var(--g-navy);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ticket__body_block .block--recipients .checkbox-custom {
    margin: 0;
}

.ticket__body_block .block--recipients .checkbox-custom label {
    overflow-wrap: anywhere;
}

.ticket__body_block .block--recipients .recipients__all {
    flex-basis: 100%;
}

.ticket__body_block .block--recipients .recipients__all label {
    color: var(--g-ink-2);
    font-weight: 600;
}

.ticket__body_block .block--recipients .recipients__empty {
    padding-top: 4px;
    color: var(--g-ink-3);
}

.ticket__body_block .block--recipients .recipients__add {
    flex-basis: 100%;
}

.ticket__body_block .block--recipients .recipients__add input {
    width: 100%;
    max-width: 560px;
    height: 36px;
}

.ticket__body_block .block--recipients .recipients__add small {
    display: block;
    margin-top: 4px;
    color: var(--g-ink-3);
    font-size: 12px;
}

/* Dica abaixo de campos (ex.: e-mails em copia na abertura de chamado) */
.form-group .form-hint {
    display: block;
    margin-top: 4px;
    color: var(--g-ink-3);
    font-size: 12px;
    line-height: 1.4;
}

/* =============================================================================
   Ticket conversation (admin): original first, then replies and internal notes
   oldest -> newest, each a "comment" with avatar, name, role and time.
   ============================================================================= */
.g-thread {
    --g-thread-avatar: 36px;
    --g-thread-pad-x: 24px;
    --g-thread-gap: 14px;
    display: block;
}

.main__content.ticket .ticket__body_block.g-msg,
.ticket__body_block.g-msg {
    position: relative;
    padding: 20px var(--g-thread-pad-x) 22px;
    margin-bottom: 16px;
    background-color: var(--g-surface);
    text-align: left;
}

/* Thread connector: a hairline linking each message to the one before it */
.g-thread .g-msg:not(.g-msg--origin)::before {
    content: "";
    position: absolute;
    top: -17px;
    left: calc(var(--g-thread-pad-x) + var(--g-thread-avatar) / 2);
    width: 1px;
    height: 16px;
    background-color: var(--g-line-strong);
}

.g-thread__subject {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.25;
    text-wrap: balance;
}

/* Head: avatar + who/role/time + actions */
.ticket__body_block.g-msg .block--head.g-msg__head,
.ticket__body_block.original-message.g-msg .block--head.g-msg__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px !important;
    font-family: var(--g-sans);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
}

.g-msg__avatar.g-avatar {
    flex: 0 0 var(--g-thread-avatar);
    width: var(--g-thread-avatar);
    height: var(--g-thread-avatar);
    font-size: 13px;
}

.g-msg--agent .g-msg__avatar.g-avatar {
    background-color: var(--g-navy);
    color: #fff;
}

.ticket__body_block.g-msg .block--head .g-msg__who {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    min-width: 0;
}

.ticket__body_block.g-msg .block--head .g-msg__who b,
.ticket__body_block.g-msg .block--head .g-msg__who .dropdown label span {
    margin: 0;
    color: var(--g-ink);
    font-size: 14.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ticket__body_block.g-msg .block--head .g-msg__who .dropdown {
    margin-left: 0;
}

.ticket__body_block.g-msg .block--head .g-msg__who .dropdown label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: var(--g-r-sm);
}

.ticket__body_block.g-msg .block--head .g-msg__who .dropdown label:hover span {
    color: var(--g-blue);
}

.g-msg__role {
    padding: 1px 8px;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background-color: var(--g-sunken);
    color: var(--g-ink-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.g-msg--origin .g-msg__role {
    padding: 0;
    border: 0;
    background: none;
    color: var(--g-ink-3);
    font-weight: 500;
    font-size: 13.5px;
}

.ticket__body_block.g-msg .block--head time {
    margin: 0;
    color: var(--g-ink-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ticket__body_block.g-msg .block--head .more {
    margin-right: 0;
    padding-right: 0;
}

/* Body aligned under the name, like a comment */
.g-msg > .block--description,
.g-msg > .block--uploads,
.g-msg > .block--suggested,
.g-msg > .rate,
.g-msg > div:not([class]) {
    margin-left: calc(var(--g-thread-avatar) + 12px);
}

.ticket__body_block.g-msg .block--description {
    margin-top: 0;
}

.ticket__body_block.g-msg .block--description > p:last-child:empty {
    display: none;
}

.g-msg > .rate {
    margin-top: 12px;
    color: var(--g-ink-3);
    font-size: 12.5px;
    text-align: left;
}

/* Agent replies: HESK tints them green; keep the sheet white, the avatar marks the side */
.ticket__body_block.g-msg.response {
    background-color: var(--g-surface);
    box-shadow: none;
}

/* Internal notes: amber paper inside the thread */
.ticket__body_block.g-msg.g-msg--note {
    border-color: #f0dcae;
    background-color: #fdf8ec;
}

.g-msg--note .g-msg__avatar.g-avatar {
    background-color: #f5e6c0;
    color: #7a5200;
}

.g-msg--note .g-msg__role {
    border-color: #f0dcae;
    background-color: #f8ecd0;
    color: #7a5200;
}

.g-msg__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: auto;
}

.g-msg__actions a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--g-r-sm);
    transition: background-color 160ms var(--g-ease);
}

.g-msg__actions a svg {
    width: 16px;
    height: 16px;
    fill: #9a7a3a;
}

.g-msg__actions a:hover {
    background-color: rgba(122, 82, 0, .08);
}

.g-msg__actions a:hover svg {
    fill: #7a5200;
}

.g-msg__actions a:focus-visible {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

/* Collapsed earlier messages (HESK "hide replies" setting) */
.g-thread__collapsed.ticket__replies {
    position: relative;
    margin: 0 0 16px;
}

.g-thread__collapsed .ticket__replies_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 1px dashed var(--g-line-strong);
    border-radius: var(--g-r-lg);
    background-color: var(--g-surface);
    color: var(--g-blue);
    font-family: var(--g-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms var(--g-ease), border-color 160ms var(--g-ease);
}

.g-thread__collapsed .ticket__replies_link:hover {
    border-color: var(--g-blue);
    background-color: var(--g-blue-wash);
}

.g-thread__collapsed .ticket__replies_link:focus-visible {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

.g-thread__collapsed .ticket__replies_list {
    padding-top: 16px;
}

/* Add-note composer under the thread */
.g-thread__composer.block--notes {
    margin: 0 0 16px;
    padding: 0;
}

.g-thread__composer #notesDiv {
    margin-top: 12px !important;
    padding: 16px 20px;
    border: 1px solid #f0dcae;
    border-radius: var(--g-r-lg);
    background-color: #fdf8ec;
}

.g-thread__composer #notesDiv > form > i {
    color: #7a5200;
    font-size: 13px;
    font-style: normal;
}

@media (max-width: 640px) {
    .g-thread {
        --g-thread-pad-x: 16px;
        --g-thread-avatar: 32px;
    }

    .g-thread__subject {
        font-size: 19px;
    }

    .g-msg > .block--description,
    .g-msg > .block--uploads,
    .g-msg > .block--suggested,
    .g-msg > .rate,
    .g-msg > div:not([class]) {
        margin-left: 0;
    }

    .ticket__body_block.g-msg .block--head.g-msg__head {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-msg__actions a,
    .g-thread__collapsed .ticket__replies_link {
        transition-duration: 0ms !important;
    }
}

/* Column layout (mobile): the crumb's 100% basis would mean 100% of the height
   and push the ticket into a second column off-screen */
@media (max-width: 899px) {
    .main__content.ticket {
        flex-wrap: nowrap;
    }

    .main__content.ticket > .gavi-ticket-crumb {
        flex: 0 0 auto;
    }

    .main__content.ticket > .ticket__body,
    .main__content.ticket > .ticket__params {
        width: 100%;
        min-width: 0;
    }
}

/* HESK colours every span in .contact blue; the thread keeps them neutral */
.ticket__body_block.g-msg .block--head .contact > span.g-msg__role {
    color: var(--g-ink-2);
}

.ticket__body_block.g-msg.g-msg--origin .block--head .contact > span.g-msg__role {
    color: var(--g-ink-3);
}

.ticket__body_block.g-msg.g-msg--note .block--head .contact > span.g-msg__role {
    color: #7a5200;
}

.main__content.ticket .ticket__body_block.g-msg.g-msg--note {
    border-color: #f0dcae;
    background-color: #fdf8ec;
}

/* Mobile: HESK stacks every .block--head in a column; keep the comment head as
   avatar + who on one row, actions wrapping underneath */
@media (max-width: 899px) {
    .main__content.ticket .ticket__body .ticket__body_block.g-msg .block--head.g-msg__head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 4px;
    }

    .main__content.ticket .ticket__body .ticket__body_block.g-msg .block--head .g-msg__who {
        flex: 1 1 0;
        padding-top: 2px;
    }

    .main__content.ticket .ticket__body .ticket__body_block.g-msg .block--head time {
        margin: 0;
    }

    .main__content.ticket .ticket__body .ticket__body_block.g-msg .block--head > .more,
    .main__content.ticket .ticket__body .ticket__body_block.g-msg .block--head > .g-msg__actions {
        flex: 1 0 100%;
        margin-left: 0;
        padding-left: calc(var(--g-thread-avatar) + 12px);
        justify-content: flex-start;
    }
}

/* Queue: the quick-links row sits 16px from the search bar and 16px from the list.
   Buttons used a bottom margin for wrapping and the list added its own top margin,
   which made the bottom gap 28px. Gap handles wrapping now. */
.g-queue__list > .quick-links {
    margin-bottom: 16px;
    row-gap: 12px;
}

.g-queue__list > .quick-links .filters__listing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.g-queue__list > .quick-links .filters__listing > .btn {
    margin: 0;
}

.g-queue__list > .quick-links .auto-reload {
    margin-bottom: 0;
}

.g-queue__list > .quick-links ~ form .table-wrap {
    margin-top: 0;
}

/* Queue rows: centre checkbox, avatar and text against the taller properties column */
@media (min-width: 761px) {
    .table.g-list tbody tr.g-row > td {
        vertical-align: middle;
    }

    .table.g-list tbody tr.g-row > td.table__first_th {
        padding-top: 14px;
    }

    .table.g-list tbody tr.g-row .g-row__wrap {
        align-items: center;
    }
}

/* Long requester names ("Fulano - Empresa X") must wrap on phones */
@media (max-width: 760px) {
    .g-meta > .g-meta__who {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}