/* Targeted v7 compatibility fixes. Loaded after the legacy bundled styles.
   The important display rule supersedes older !important mobile hide rules. */
body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__context {
    display: inline-flex !important;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-decoration: none;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__context:hover {
    color: var(--v7-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 8px 0 16px;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-detail-links a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--v7-line);
    border-radius: 6px;
    background: var(--v7-panel);
    color: var(--v7-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-detail-links a:hover {
    border-color: var(--v7-accent);
    background: var(--v7-raised);
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 #customer-ticket-reply-title {
    scroll-margin-top: 144px;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-editor__textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 12rem;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-editor-button {
    min-height: 44px;
    min-width: 44px;
}

body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-workspace--customer :is(.portal-rich-text, .portal-attachment-pill) {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 1121px) {
    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-workspace--customer .portal-ticket-v10-reply-card {
        top: calc(var(--cp5-topbar, 68px) + 16px);
    }
}

@media (max-width: 760px) {
    /* v5 also forces one-column child grids. Own the mobile header as a whole. */
    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px 48px !important;
        grid-template-rows: auto auto auto !important;
        align-items: center !important;
        gap: 8px 10px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 12px !important;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        height: auto !important;
        min-height: 44px;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__context {
        width: auto !important;
        max-width: none;
        padding: 0;
        border: 0;
        font-size: 12px;
        overflow-wrap: normal;
        word-break: normal;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__right {
        display: contents !important;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__right > .portal-notification-center {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__right > .portal-topbar__account {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__right > .portal-topbar__display-controls {
        display: flex !important;
        justify-content: space-between;
        gap: 10px;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: auto !important;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-topbar__restriction-state {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}

@media (max-width: 560px) {
    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-detail-metrics--customer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-detail-metrics--customer > div {
        min-width: 0;
        padding: 12px;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-detail-header .portal-ticket-v10-hero__rail {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-v10-detail-header .portal-ticket-v10-hero__rail > * {
        width: auto;
        max-width: 100%;
    }

    body.portal-app-body.portal-ui-v5.portal-ui-v6.portal-ui-v7 .portal-ticket-detail-links a {
        flex: 1 1 145px;
    }
}