/* ============================================================================
   ATENDY — DOCUMENTATION ALIGNMENT
   Loaded after the Blazor CSS-isolation bundle so the canonical visual rules
   from the supplied HTML/CSS specification remain the final source of truth.
   ============================================================================ */

html,
body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
}

button,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-family: var(--font-heading);
}

/* Shell ------------------------------------------------------------------- */

/* Desktop navigation is owned by AppNavigation.razor.css. */

.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 var(--space-3);
}

.app-header .app-header__title {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.app-header .app-header__actions {
    gap: var(--space-1);
}

.app-header .app-header__divider {
    display: none;
}

.app-header .app-header__icon-button {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    height: var(--btn-h-sm);
    width: var(--btn-h-sm);
}

.app-header .app-header__icon-button:hover {
    background: var(--accent);
    color: var(--primary);
}

.app-header .app-header__user {
    border-radius: var(--radius-full);
    padding: 0;
}

.app-header .app-header__avatar {
    background: var(--primary-soft);
    color: var(--primary);
    flex-basis: 32px;
    height: 32px;
    width: 32px;
}

.app-header .app-header__profile-panel,
.app-header .app-header__crop-actions {
    border-radius: var(--radius-lg);
}

.app-header .context-switcher,
.app-header .context-switcher__trigger {
    background: transparent;
    border-color: transparent;
    border-radius: var(--radius-md);
}

.app-header .context-switcher__trigger:hover,
.app-header .context-switcher__trigger[aria-expanded="true"] {
    background: var(--accent);
    border-color: transparent;
}

.app-header__search .global-search,
.app-header__search .global-search__control,
.app-header__search .global-search__input-shell {
    margin-inline: auto;
    max-width: 480px;
    width: 100%;
}

.app-header__search .global-search__field {
    background: var(--surface);
    border-color: var(--border);
    border-radius: 11px;
    font-size: var(--font-size-sm);
    height: 38px;
    padding: 0 13px;
}

.app-header__search .global-search--open .global-search__field {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.app-header__search .global-search__field:focus-within {
    border-color: var(--primary);
    box-shadow: none;
}

.app-header__search .global-search__field input,
.app-header__search .global-search__field input:focus,
.app-header__search .global-search__field input:focus-visible {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    outline: 0;
}

.collaboration-dock {
    background: var(--surface);
    border-left: 1px solid var(--border);
    gap: var(--space-2);
    padding: var(--space-3) 0;
    width: var(--presence-w);
}

.collaboration-dock .collaboration-dock__label,
.collaboration-dock .collaboration-dock__group h3 {
    display: none;
}

.collaboration-dock .collaboration-dock__new,
.collaboration-dock .collaboration-dock__thread {
    border-radius: var(--radius-full);
    height: 34px;
    width: 34px;
}

.collaboration-dock .collaboration-dock__new {
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary);
}

.collaboration-dock .collaboration-dock__thread {
    font-size: var(--font-size-11);
}

.collaboration-dock .collaboration-dock__divider {
    width: 32px;
}

.collaboration-dock .collaboration-dock__threads,
.collaboration-dock .collaboration-dock__group {
    gap: var(--space-2);
}

/* Section pages ----------------------------------------------------------- */

.section-layout {
    background: var(--background);
    grid-template-columns: 200px minmax(0, 1fr);
}

.section-layout__navigation {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--space-3);
}

.section-layout__link,
.section-layout__navigation button,
.section-layout__navigation a {
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    min-height: var(--btn-h-sm);
}

/* Atendimento workspace -------------------------------------------------- */

.service-requests-page {
    --service-requests-queues-width: var(--queues-w);
    --service-requests-items-width: var(--list-w);
    background: var(--surface);
    grid-template-columns: var(--service-requests-queues-width) 1px var(--service-requests-items-width) 1px minmax(0, 1fr);
}

.service-requests-page.is-queues-collapsed {
    grid-template-columns: var(--col-collapsed) 0 var(--service-requests-items-width) 1px minmax(0, 1fr);
}

.service-requests-page.is-items-collapsed {
    grid-template-columns: var(--service-requests-queues-width) 1px var(--col-collapsed) 0 minmax(0, 1fr);
}

.service-requests-page.is-queues-collapsed.is-items-collapsed {
    grid-template-columns: var(--col-collapsed) 0 var(--col-collapsed) 0 minmax(0, 1fr);
}

.queue-navigation-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.queue-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border-strong);
}

.queue-navigation-panel .queue-navigation-panel__header,
.queue-panel .queue-panel__header {
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    padding: 8px 10px 6px;
}

.queue-navigation-panel .panel-title strong,
.queue-panel .panel-title strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 800;
    gap: 6px;
}

.queue-panel .panel-title small {
    font-size: var(--font-size-11);
    line-height: 1.2;
}

.queue-navigation-panel .queue-panel__actions,
.queue-panel .queue-panel__actions {
    gap: 2px;
}

.queue-navigation-panel .queue-panel__actions button,
.queue-panel .queue-panel__actions button {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    height: 28px;
    width: 28px;
}

.queue-navigation-panel .queue-panel__actions button:hover,
.queue-panel .queue-panel__actions button:hover {
    background: var(--accent);
    color: var(--primary);
}

.queue-navigation-panel .queue-groups {
    gap: var(--space-3);
    padding: 6px;
}

.queue-navigation-panel .queue-group {
    gap: 2px;
}

.queue-navigation-panel .queue-groups__divider {
    margin: 2px var(--space-2);
}

.queue-navigation-panel .queue-group__title {
    font-size: var(--font-size-10);
    letter-spacing: .04em;
    padding: 6px 8px 2px;
    text-transform: uppercase;
}

.queue-navigation-panel .queue-link {
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    min-height: 30px;
    padding: 0 var(--space-2);
}

.queue-navigation-panel .queue-link small {
    background: var(--section);
    color: var(--muted-foreground);
    font-size: var(--font-size-10);
    min-width: 20px;
}

.queue-navigation-panel .queue-link:hover,
.queue-navigation-panel .queue-link.is-selected {
    background: var(--primary-soft);
    color: var(--primary);
}

.queue-navigation-panel .queue-link.is-selected small {
    background: var(--primary);
    color: var(--primary-foreground);
}

.queue-panel .queue-list {
    background: var(--surface);
}

.queue-panel .queue-item {
    align-items: start;
    gap: var(--space-2);
    grid-template-columns: 52px minmax(0, 1fr) auto;
    height: auto;
    min-height: 96px;
    padding: 9px 10px;
}

.queue-panel .queue-item__identity {
    display: grid;
    gap: 3px;
    grid-template-rows: auto 34px;
    justify-content: center;
    justify-items: center;
}

.queue-panel .queue-item__code {
    display: inline-flex;
}

.queue-panel .queue-item__assignee {
    display: inline-flex;
}

.queue-panel .queue-item__avatar {
    background: var(--primary-soft);
    color: var(--primary);
    height: 34px;
    width: 34px;
}

.queue-panel .queue-item__avatar--assignee {
    flex-basis: 22px;
    font-size: var(--font-size-10);
    height: 22px;
    width: 22px;
}

.queue-panel .queue-item__content {
    gap: 3px;
}

.queue-panel .queue-item__line strong {
    color: var(--ink);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.queue-panel .queue-item__subject {
    font-size: var(--font-size-xs);
    line-height: 1.25;
}

.queue-panel .queue-item__status {
    align-items: center;
    background: color-mix(in srgb, var(--status-color, var(--ok)) 12%, transparent);
    border-radius: var(--radius-full);
    color: var(--status-color, var(--ok-ink));
    display: inline-flex;
    font-size: var(--font-size-10);
    font-weight: 700;
    gap: 4px;
    line-height: 18px;
    max-width: 100%;
    overflow: hidden;
    padding: 0 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-panel .queue-item__status i {
    font-size: 8px;
}

.queue-panel .queue-item__tags {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.queue-panel .queue-item__side {
    gap: 0;
    min-width: 48px;
}

.queue-panel .queue-item__side time {
    font-size: var(--font-size-10);
}

.queue-panel .queue-item__channels {
    font-size: var(--font-size-11);
}

.queue-panel .queue-item__badge {
    font-size: var(--font-size-10);
    height: 18px;
    min-width: 18px;
}

.queue-panel .queue-item__badge--contact {
    height: 16px;
    min-width: 16px;
}

.queue-panel .queue-item:hover {
    background: var(--accent);
}

.queue-panel .queue-item.is-selected {
    background: var(--primary-soft);
}

/* Atendimento aberto ------------------------------------------------------ */

.service-request-viewer {
    background: var(--background);
    color: var(--foreground);
}

.service-request-viewer .service-request-header {
    background: transparent;
    gap: 10px;
    min-height: 56px;
    padding: 8px 14px 4px;
}

.service-request-viewer .service-request-header__avatar {
    background: var(--primary-soft);
    color: var(--primary);
    flex-basis: 40px;
    font-size: var(--font-size-sm);
    height: 40px;
    width: 40px;
}

.service-request-viewer .service-request-header__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-request-viewer .service-request-header__subject {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: 800;
    line-height: 1.25;
}

.service-request-viewer .service-request-header__identity {
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    gap: 6px;
}

.service-request-viewer .service-request-header__contact {
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.service-request-viewer .service-request-header__code {
    background: transparent;
    border: 0;
    color: var(--muted-foreground);
    font-size: var(--font-size-10);
    padding: 0;
}

.service-request-viewer .service-request-header__actions {
    gap: 2px;
}

.service-request-viewer .service-request-header__actions button i,
.service-request-viewer .service-request-channels button i {
    font-size: 14px;
}

.service-request-viewer .service-request-header__actions > button,
.service-request-viewer .service-request-header__menu > button,
.conversation-chat .conversation-chat__menu-button,
.conversation-chat .conversation-chat__close {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    height: 32px;
    width: 32px;
}

.service-request-viewer .service-request-header__actions button:hover,
.conversation-chat .conversation-chat__menu-button:hover,
.conversation-chat .conversation-chat__close:hover {
    background: var(--accent);
    color: var(--primary);
}

.service-request-viewer .service-request-viewer__content {
    grid-template-columns: minmax(0, 1fr) 1px var(--service-request-side-width, var(--side-w));
    grid-template-rows: auto minmax(0, 1fr);
}

.service-request-viewer .service-request-channels {
    background: transparent;
    gap: 2px;
    min-height: 34px;
    padding: 0 10px 6px;
}

.service-request-viewer .service-request-channels > span {
    color: var(--muted-foreground);
    font-size: var(--font-size-11);
    font-weight: 400;
    letter-spacing: normal;
    margin: 0 2px 0 8px;
    text-transform: none;
}

.service-request-viewer .service-request-channels button {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
    font-weight: 400;
    min-height: 28px;
    padding: 0 10px;
}

.service-request-viewer .service-request-channels button:hover {
    background: transparent;
    color: var(--ink);
}

.service-request-viewer .service-request-channels button.is-primary,
.service-request-viewer .service-request-channels button.is-selected {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--primary);
    color: var(--primary);
    font-weight: 500;
}

.service-request-viewer .service-request-channels .service-request-channels__picker-toggle {
    border: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    margin: 0;
    min-height: 28px;
}

.service-request-viewer .service-request-viewer__body {
    background: var(--background);
    padding: 0 8px 8px;
}

.service-request-viewer .service-request-viewer__content {
    padding-bottom: 0;
}

.service-request-viewer .service-request-stages {
    background: transparent;
    padding: 0 14px 6px;
}

.service-request-viewer .service-request-stages__stage {
    font-size: var(--font-size-xs);
    height: 26px;
    max-width: 260px;
}

.service-request-viewer .service-request-channels {
    grid-column: 1 / -1;
    grid-row: 1;
}

.service-request-viewer .service-request-side-panel,
.service-request-viewer .service-request-side-panel__splitter {
    grid-row: 2;
}

.service-request-viewer .service-request-side-panel__splitter {
    background: transparent;
}

.service-request-viewer .service-request-side-panel {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: none;
    height: auto;
    margin: 0 8px 8px 0;
    padding: 12px;
}

.conversation-chat {
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
}

.conversation-chat .conversation-chat__header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-height: 38px;
    padding: 10px 14px;
}

.conversation-chat .conversation-chat__messages,
.conversation-chat .conversation-chat__timeline,
.conversation-chat .conversation-chat__body {
    background: var(--section);
}

.conversation-chat .conversation-chat__title strong,
.conversation-chat .conversation-chat__identity strong {
    color: var(--ink);
    font-size: var(--font-size-xs);
}

.conversation-chat .conversation-chat__mode-indicator,
.conversation-chat .conversation-chat__counter {
    font-size: var(--font-size-11);
}

.conversation-chat .conversation-chat__context {
    color: var(--muted-foreground);
    display: block;
    font-size: var(--font-size-11);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-chat .conversation-chat__messages,
.conversation-chat .conversation-chat__timeline,
.conversation-chat .conversation-chat__body {
    gap: 3px;
    padding: 16px;
}

.conversation-chat .conversation-chat__row.is-group-end {
    margin-bottom: 10px;
}

.conversation-chat .conversation-chat__day {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

.conversation-chat .conversation-chat__day span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-foreground);
    font-size: var(--font-size-11);
    padding: 2px 10px;
}

.conversation-chat .conversation-message,
.conversation-chat .conversation-chat__message,
.conversation-chat .message-bubble {
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 100%;
    padding: 8px 12px;
}

.conversation-chat .conversation-chat__message time,
.conversation-chat .conversation-chat__message strong {
    font-size: var(--font-size-10);
    opacity: .7;
}

.conversation-chat .conversation-chat__message.is-internal {
    align-self: flex-end;
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn-ink);
}

.conversation-chat .conversation-chat__message.is-system {
    background: transparent;
    border-color: transparent;
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    padding: 2px 4px;
    text-align: center;
}

.conversation-chat .conversation-chat__row.is-system .conversation-chat__meta {
    display: none;
}

.conversation-chat .conversation-chat__composer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: var(--space-2);
    padding: 10px 12px;
}

.conversation-chat .conversation-chat__row {
    align-items: flex-end;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}

.conversation-chat .conversation-chat__row.is-outbound,
.conversation-chat .conversation-chat__row.is-internal {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.conversation-chat .conversation-chat__row.is-system {
    justify-content: center;
}

.conversation-chat .conversation-chat__row.is-system .conversation-chat__avatar {
    display: none;
}

.conversation-chat .conversation-chat__stack {
    display: grid;
    gap: 4px;
    justify-items: start;
    max-width: min(560px, 80%);
    min-width: 0;
}

.conversation-chat .conversation-chat__row.is-outbound .conversation-chat__stack,
.conversation-chat .conversation-chat__row.is-internal .conversation-chat__stack {
    justify-items: end;
}

.conversation-chat .conversation-chat__avatar {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-foreground);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-10);
    font-weight: 700;
    height: 26px;
    justify-content: center;
    overflow: hidden;
    width: 26px;
}

.conversation-chat .conversation-chat__avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.conversation-chat .conversation-chat__avatar.is-ghost {
    background: transparent;
    border-color: transparent;
}

.conversation-chat .conversation-chat__row:not(.is-outbound):not(.is-internal):not(.is-system).is-group-end .conversation-chat__message {
    border-radius: 12px 12px 12px 4px;
}

.conversation-chat .conversation-chat__row.is-outbound.is-group-end .conversation-chat__message {
    border-radius: 12px 12px 4px 12px;
}

.conversation-chat .conversation-chat__contact-avatar {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: 700;
    height: 36px;
    justify-content: center;
    position: relative;
    width: 36px;
}

.conversation-chat .conversation-chat__contact-avatar > i {
    align-items: center;
    background: var(--ok-soft, var(--primary-soft));
    border: 2px solid var(--surface);
    border-radius: 999px;
    bottom: -3px;
    color: var(--ok, var(--primary));
    display: inline-flex;
    font-size: 9px;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: -3px;
    width: 16px;
}

.conversation-chat .conversation-chat__file-link {
    background: var(--section);
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
}

.conversation-chat .conversation-chat__message.is-outbound .conversation-chat__file-link {
    background: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
    color: var(--primary-foreground);
}

.conversation-chat .conversation-chat__row.is-outbound .conversation-chat__avatar {
    background: var(--primary-soft);
    color: var(--primary);
}

.conversation-chat .conversation-chat__meta {
    color: var(--muted-foreground);
    font-size: var(--font-size-11);
}

.conversation-chat .conversation-chat__row {
    animation: conversation-chat-row-in .18s ease-out;
}

.conversation-chat .conversation-chat__row.is-pending .conversation-chat__message {
    opacity: .78;
}

.conversation-chat .conversation-chat__row.is-pending .conversation-chat__meta i {
    font-size: var(--font-size-10);
}

.conversation-chat .conversation-chat__pending-attachment {
    align-items: center;
    display: inline-flex;
    font-size: var(--font-size-xs);
    gap: 6px;
    opacity: .85;
}

.conversation-chat .conversation-chat__typing {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    min-height: 34px;
    padding: 10px 14px;
}

.conversation-chat .conversation-chat__typing span {
    animation: conversation-chat-typing 1.2s ease-in-out infinite;
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 6px;
    opacity: .4;
    width: 6px;
}

.conversation-chat .conversation-chat__typing span:nth-child(2) {
    animation-delay: .15s;
}

.conversation-chat .conversation-chat__typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes conversation-chat-row-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes conversation-chat-typing {
    0%, 60%, 100% {
        opacity: .4;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.conversation-chat .conversation-chat__note-label {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: 6px;
}

.conversation-chat .conversation-chat__composer textarea {
    background: transparent;
    border: 0;
    color: var(--foreground);
    font-size: var(--font-size-sm);
}

.conversation-chat .conversation-chat__composer textarea:focus {
    border: 0;
    box-shadow: none;
    outline: 0;
}

/* Painel direito: status, envolvidos e operação -------------------------- */

.service-request-viewer .service-request-side-panel {
    gap: 8px;
}

.service-request-viewer .service-request-side-panel__section {
    border-bottom: 1px solid var(--border);
    gap: 6px;
    padding: 0 0 8px;
}

.service-request-viewer .service-request-side-panel__section > strong {
    color: var(--muted-foreground);
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.service-request-viewer .service-request-side-panel__section > strong i {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 6px;
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--font-size-10);
    height: 20px;
    justify-content: center;
    width: 20px;
}

.service-request-viewer .service-request-side-panel__section:last-child {
    border-bottom: 0;
}

.service-request-viewer .service-request-side-panel__field {
    gap: var(--space-1);
}

.service-request-viewer .service-request-side-panel__field > span {
    color: var(--muted-foreground);
    font-size: var(--font-size-10);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.service-request-viewer .service-request-side-panel__field input,
.service-request-viewer .service-request-side-panel__field select,
.service-request-viewer .service-request-side-panel__field .ac__input,
.service-request-viewer .service-request-side-panel__field .dd__trigger {
    background: var(--surface);
    border-color: var(--border);
    border-radius: var(--radius-md);
    color: var(--foreground);
    font-size: var(--font-size-xs);
    min-height: 32px;
}

.service-request-viewer .service-request-side-panel__field .dd__trigger:hover,
.service-request-viewer .service-request-side-panel__field input:hover {
    border-color: var(--border-strong);
}

.service-request-viewer .service-request-side-panel__section--status .service-request-side-panel__field {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 4rem) minmax(0, 1fr);
}

.service-request-viewer .service-request-side-panel__section--status .service-request-side-panel__field > span {
    color: var(--muted-foreground);
    display: block;
    font-size: var(--font-size-11);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.service-request-viewer .service-request-side-panel__section--status .dd__trigger {
    border-color: var(--border);
    color: var(--foreground);
    font-size: var(--font-size-11);
    font-weight: 600;
    justify-content: flex-start;
    min-height: 26px;
    padding: 0 var(--space-2);
}

.service-request-viewer .service-request-side-panel__section--status .dd__trigger::before {
    background: var(--service-request-status-color, var(--muted-foreground));
    border-radius: 999px;
    content: "";
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
}

.service-request-viewer .service-request-side-panel__section--status .dd__chevron {
    margin-left: auto;
}

/* Form focus --------------------------------------------------------------
   Form controls keep their dimensions and use a neutral semantic border.
   Validation states remain authoritative and keep the destructive color. */

body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    [contenteditable="true"],
    .ac__input,
    .dd__trigger,
    .rich-editor__surface
):not(.invalid):not(.input-validation-error):not([aria-invalid="true"]):is(:focus, :focus-visible) {
    border-color: var(--field-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

body :is(
    .global-search__field,
    .assistant-composer,
    .cockpit-date-field,
    .conversation-chat__composer-row
):focus-within {
    border-color: var(--field-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

body .phone-input__field:focus-within .phone-input__control {
    border-color: var(--field-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

body :is(
    input,
    textarea,
    select,
    [contenteditable="true"],
    .ac__input,
    .dd__trigger,
    .rich-editor__surface
):is(.invalid, .input-validation-error, [aria-invalid="true"]):is(:focus, :focus-visible) {
    border-color: var(--field-error-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

body input:focus,
body input:focus-visible,
body textarea:focus,
body textarea:focus-visible,
body select:focus,
body select:focus-visible,
body [contenteditable="true"]:focus,
body [contenteditable="true"]:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Responsive -------------------------------------------------------------- */

@media (min-width: 1024px) {
    .app-header {
        grid-template-columns: minmax(150px, 1fr) minmax(260px, 360px) auto;
    }

    .app-header .app-header__search {
        display: flex;
        justify-content: center;
        padding: 0;
    }
}

@media (max-width: 1279.98px) {
    .service-request-viewer .service-request-viewer__content {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .service-requests-page,
    .service-requests-page.is-queues-collapsed,
    .service-requests-page.is-items-collapsed,
    .service-requests-page.is-queues-collapsed.is-items-collapsed {
        grid-template-columns: var(--service-requests-items-width) 1px minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .app-navigation {
        background: var(--surface);
        border-top: 1px solid var(--border);
        width: 100%;
    }

    .app-navigation .app-navigation__rail--desktop {
        display: none;
    }

    .app-navigation .app-navigation__mobile {
        display: grid;
        height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom));
        max-height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom));
        min-height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom));
    }

    .app-navigation .app-navigation__mobile-item {
        color: var(--muted-foreground);
        font-size: var(--font-size-10);
    }

    .app-navigation .app-navigation__mobile-item.is-active {
        color: var(--primary);
    }

    .service-requests-page,
    .service-requests-page.is-queues-collapsed,
    .service-requests-page.is-items-collapsed,
    .service-requests-page.is-queues-collapsed.is-items-collapsed,
    .service-requests-page.is-service-request-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .queue-panel .queue-item {
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .service-request-viewer .service-request-header {
        min-height: 56px;
        padding: 8px 10px;
    }

    .service-request-viewer .service-request-header__avatar {
        flex-basis: 36px;
        height: 36px;
        width: 36px;
    }

    .service-request-viewer .service-request-channels {
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}










.service-request-viewer .service-request-side-panel__section--status .service-request-side-panel__field {
    align-items: stretch;
    gap: var(--space-1);
    grid-template-columns: minmax(0, 1fr);
}

.service-request-viewer .service-request-header__actions button i.service-request-header__panel-icon {
    font-size: 19px;
}

.service-request-viewer .service-request-channels__assume {
    background: var(--primary-soft);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--primary);
    font-weight: 600;
    gap: 6px;
    margin-left: auto;
    padding: 0 12px;
}

.service-request-viewer .service-request-channels .service-request-channels__assume:hover {
    background: var(--primary);
    color: #fff;
}

.service-request-viewer .service-request-channels__owner {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: var(--space-2);
    position: relative;
}

.service-request-viewer .service-request-channels__assume {
    background: var(--primary-soft);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--primary);
    font-weight: 600;
    gap: 6px;
    padding: 0 12px;
    width: auto;
}

.service-request-viewer .service-request-channels__assume:hover {
    background: var(--primary);
    color: #fff;
}

.service-request-viewer .service-request-channels__owner-chip {
    background: transparent;
    border: 0;
    gap: 3px;
    padding: 0 4px;
}

.service-request-viewer .service-request-channels__owner-avatar {
    align-items: center;
    background: var(--primary-soft);
    border-radius: var(--radius-full);
    color: var(--primary);
    display: inline-flex;
    font-size: var(--font-size-10);
    font-weight: 700;
    height: 26px;
    justify-content: center;
    overflow: hidden;
    width: 26px;
}

.service-request-viewer .service-request-channels__owner-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.service-request-viewer .service-request-channels__owner-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .18);
    display: grid;
    max-height: 280px;
    min-width: 220px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
}

.service-request-viewer .service-request-channels__owner-menu button {
    align-items: center;
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 8px;
    color: var(--foreground);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-sm);
    gap: 8px;
    justify-content: flex-start;
    min-height: 34px;
    padding: 4px 8px;
    text-align: left;
    width: 100%;
}

.service-request-viewer .service-request-channels__owner-menu button:focus,
.service-request-viewer .service-request-channels__owner-menu button:focus-visible {
    outline: none;
}

.service-request-viewer .service-request-channels__owner-menu button:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.service-request-viewer .service-request-channels__owner-menu button.is-selected {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.service-request-viewer .service-request-channels__owner-menu-search {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-family: inherit;
    font-size: var(--font-size-sm);
    margin: 2px 2px 6px;
    min-height: 34px;
    outline: none;
    padding: 0 10px;
}

.service-request-viewer .service-request-channels__owner-menu-search:focus {
    border-color: var(--primary);
}

.service-request-viewer .service-request-channels__owner-menu-empty {
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
    padding: 8px 10px;
}

.service-request-viewer .service-request-channels__owner-menu-divider {
    background: var(--border);
    height: 1px;
    margin: 4px 2px;
}

.service-request-viewer .service-request-channels__owner-menu button.service-request-channels__owner-menu-clear {
    color: var(--danger, #dc2626);
}

.service-request-viewer .service-request-channels__owner-menu button.service-request-channels__owner-menu-clear:hover {
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
    color: var(--danger, #dc2626);
}

.service-request-viewer .service-request-channels__owner-menu button.service-request-channels__owner-menu-clear > span {
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #dc2626);
}

.service-request-viewer .service-request-channels__owner-menu button > span {
    align-items: center;
    background: var(--primary-soft);
    border-radius: var(--radius-full);
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: var(--font-size-10);
    font-weight: 700;
    height: 24px;
    justify-content: center;
    width: 24px;
}



.service-request-viewer .service-request-channels__group {
    align-items: center;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    border-radius: 10px;
    display: inline-flex;
    gap: 2px;
    margin-left: var(--space-2);
    padding: 3px;
}