/* =========================================================
   EASYPRINT GUEST SUPPORT
   User Dashboard Theme
========================================================= */

:root {
    --primary: #184e83;
    --primary-2: #24538b;

    --blue: #2f9dde;
    --cyan: #16b9d4;

    --muted: #6f86a1;
    --muted-2: #8aa0b5;

    --danger: #e23c3c;
    --warning: #d9822b;
    --success: #2f9e72;

    --glass: rgba(255, 255, 255, 0.54);
    --glass-soft: rgba(255, 255, 255, 0.38);
    --glass-strong: rgba(255, 255, 255, 0.78);

    --border: rgba(255, 255, 255, 0.84);
    --line: rgba(47, 157, 222, 0.14);
    --line-strong: rgba(47, 157, 222, 0.24);

    --shadow:
        0 28px 72px rgba(24, 78, 131, 0.14);

    --shadow-soft:
        0 16px 42px rgba(24, 78, 131, 0.09);

    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 13px;

    --content-width: 1180px;
}

/* =========================================================
   RESET
========================================================= */

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

html,
body {
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    color: var(--primary);
    font-family: "ABeeZee", sans-serif;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(47, 157, 222, 0.24),
            transparent 31%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(22, 185, 212, 0.22),
            transparent 35%
        ),
        radial-gradient(
            circle at 52% 18%,
            rgba(255, 255, 255, 0.72),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #eaf8ff 0%,
            #f8fdff 48%,
            #e9fbff 100%
        );

    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

/* =========================================================
   PAGE CONTAINER

   Padding belongs to the content container, not the body.
   This allows the footer to remain full width.
========================================================= */

.guest-page {
    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;
    max-width: calc(var(--content-width) + 48px);

    margin: 0 auto;
    padding: 24px;
}

/* Background decoration */

.guest-page::before,
.guest-page::after {
    content: "";

    position: fixed;
    z-index: -1;

    pointer-events: none;

    border-radius: 50%;
    filter: blur(18px);
}

.guest-page::before {
    width: 560px;
    height: 560px;

    top: -220px;
    left: -210px;

    background:
        radial-gradient(
            circle,
            rgba(47, 157, 222, 0.26),
            transparent 68%
        );
}

.guest-page::after {
    width: 660px;
    height: 660px;

    right: -260px;
    bottom: -260px;

    background:
        radial-gradient(
            circle,
            rgba(22, 185, 212, 0.24),
            transparent 70%
        );
}

/* =========================================================
   SHARED GLASS PANELS
========================================================= */

.guest-topbar,
.guest-hero,
.guest-card,
.guest-note,
.guest-credentials,
.guest-conversation {
    border: 1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.48)
        );

    box-shadow:
        var(--shadow-soft),
        inset 0 0 0 1px rgba(47, 157, 222, 0.05);

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);
}

/* =========================================================
   TOP NAVIGATION
========================================================= */

.guest-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 14px 16px;

    border-radius: var(--radius-lg);
}

.brand {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--primary);
    text-decoration: none;
}

.brand-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;
    flex: 0 0 auto;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    color: #ffffff;

    font-family: "Hammersmith One", sans-serif;
    font-size: 15px;
    font-weight: 400;

    box-shadow:
        0 12px 28px rgba(47, 157, 222, 0.22);
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 20px;
    font-weight: 400;
}

.brand-copy small {
    color: var(--muted);

    font-family: "ABeeZee", sans-serif;
    font-size: 11px;
}

.top-actions {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}

.top-link {
    min-height: 42px;
    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.76),
            rgba(255, 255, 255, 0.42)
        );

    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;

    box-shadow:
        0 14px 36px rgba(24, 78, 131, 0.08),
        inset 0 0 0 1px rgba(47, 157, 222, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.top-link:hover,
.top-link:focus-visible {
    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 18px 42px rgba(24, 78, 131, 0.13),
        inset 0 0 0 1px rgba(47, 157, 222, 0.12);
}

.top-link.primary {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    color: #ffffff;

    box-shadow:
        0 14px 32px rgba(47, 157, 222, 0.23);
}

.top-link.primary:hover,
.top-link.primary:focus-visible {
    background:
        linear-gradient(
            135deg,
            #12abc5,
            #278dcc
        );
}

/* =========================================================
   HERO
========================================================= */

.guest-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 24px;
    padding: clamp(32px, 5vw, 50px);

    border-radius: var(--radius-xl);

    box-shadow:
        var(--shadow),
        inset 0 0 0 1px rgba(47, 157, 222, 0.05);
}

.hero-copy {
    max-width: 760px;
}

.kicker {
    display: inline-block;

    color: var(--blue);

    font-family: "Hammersmith One", sans-serif;
    font-size: 10.5px;
    font-weight: 400;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.guest-page h1,
.guest-page h2 {
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-weight: 400;
}

.guest-page h1 {
    margin: 10px 0 0;

    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.06;
}

.hero-copy p {
    max-width: 720px;

    margin: 16px 0 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.75;
}

.hero-signin {
    min-height: 50px;
    padding: 12px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    border: 0;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    color: #ffffff;

    font-family: "Hammersmith One", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;

    box-shadow:
        0 16px 34px rgba(47, 157, 222, 0.23);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.hero-signin:hover,
.hero-signin:focus-visible {
    transform: translateY(-2px);

    box-shadow:
        0 20px 42px rgba(47, 157, 222, 0.3);
}

/* =========================================================
   SUPPORT GRID
========================================================= */

.guest-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, 0.8fr);

    gap: 22px;

    margin-top: 24px;
}

.guest-card {
    min-width: 0;

    padding: clamp(24px, 4vw, 34px);

    border-radius: var(--radius-lg);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.guest-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 22px 54px rgba(24, 78, 131, 0.12),
        inset 0 0 0 1px rgba(47, 157, 222, 0.07);
}

.card-heading {
    display: flex;
    align-items: center;

    gap: 14px;
}

.card-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;
    flex: 0 0 auto;

    border: 1px solid rgba(47, 157, 222, 0.1);
    border-radius: 15px;

    background: rgba(222, 244, 253, 0.82);
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.guest-page h2 {
    margin: 4px 0 0;

    font-size: 24px;
    line-height: 1.2;
}

.card-description {
    margin: 16px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.65;
}

/* =========================================================
   FORM
========================================================= */

.guest-form {
    display: grid;

    gap: 16px;

    margin-top: 22px;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field {
    min-width: 0;

    display: grid;

    gap: 7px;
}

.field.full {
    grid-column: 1 / -1;
}

.field > span {
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.field small {
    color: var(--muted-2);

    font-family: "ABeeZee", sans-serif;
    font-size: 10px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;

    padding: 11px 13px;

    border: 1px solid rgba(47, 157, 222, 0.18);
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, 0.72);
    color: var(--primary);

    font-family: "ABeeZee", sans-serif;
    font-size: 13px;

    outline: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted-2);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(47, 157, 222, 0.52);

    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 0 0 4px rgba(47, 157, 222, 0.1);
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

.field input[type="file"] {
    padding: 8px;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    cursor: not-allowed;

    background: rgba(245, 249, 252, 0.78);
    color: var(--muted);

    opacity: 0.72;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-button {
    width: 100%;
    min-height: 48px;

    padding: 11px 18px;

    border: 1px solid transparent;
    border-radius: 15px;

    font-family: "Hammersmith One", sans-serif;
    font-size: 13px;
    font-weight: 400;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.action-button.primary {
    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    color: #ffffff;

    box-shadow:
        0 14px 30px rgba(47, 157, 222, 0.2);
}

.action-button.primary:not(:disabled):hover {
    transform: translateY(-1px);

    box-shadow:
        0 18px 38px rgba(47, 157, 222, 0.28);
}

.action-button.secondary {
    border-color: rgba(47, 157, 222, 0.16);

    background: rgba(222, 244, 253, 0.72);
    color: var(--primary);
}

.action-button.secondary:not(:disabled):hover {
    transform: translateY(-1px);

    background: rgba(222, 244, 253, 0.96);
}

.action-button:disabled {
    cursor: not-allowed;

    background: rgba(204, 221, 232, 0.76);
    color: var(--muted);

    box-shadow: none;

    opacity: 0.72;
}

/* =========================================================
   NOTES
========================================================= */

.backend-note {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.security-note {
    padding: 15px;

    border: 1px solid rgba(47, 157, 222, 0.14);
    border-radius: 15px;

    background: rgba(222, 244, 253, 0.62);
}

.security-note strong {
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.security-note p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.55;
}

/* =========================================================
   LIMITED SUPPORT NOTICE
========================================================= */

.guest-note {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 22px 0 10px;
    padding: 18px 20px;

    border-radius: var(--radius-md);
}

.guest-note strong {
    color: var(--primary);

    font-family: "Hammersmith One", sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.guest-note p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}

.guest-note a {
    flex: 0 0 auto;

    color: var(--blue);

    font-family: "Hammersmith One", sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
}

.guest-note a:hover,
.guest-note a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* =========================================================
   FALLBACK FOR BROWSERS WITHOUT BACKDROP FILTER
========================================================= */

@supports not (
    (backdrop-filter: blur(18px))
    or
    (-webkit-backdrop-filter: blur(18px))
) {
    .guest-topbar,
    .guest-hero,
    .guest-card,
    .guest-note,
    .guest-credentials,
    .guest-conversation {
        background: rgba(255, 255, 255, 0.94);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .guest-hero {
        align-items: flex-start;
        flex-direction: column;

        gap: 26px;
    }

    .guest-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .guest-page {
        padding: 12px;
    }

    .guest-topbar {
        align-items: stretch;
        flex-direction: column;

        gap: 14px;

        border-radius: 22px;
    }

    .top-actions {
        width: 100%;
    }

    .top-link {
        flex: 1;
    }

    .guest-hero {
        margin-top: 16px;
        padding: 28px 22px;

        border-radius: 26px;
    }

    .guest-page h1 {
        font-size: 36px;
    }

    .hero-signin {
        width: 100%;
    }

    .guest-grid {
        gap: 16px;
        margin-top: 16px;
    }

    .guest-card {
        padding: 22px 18px;

        border-radius: 24px;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .guest-note {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 16px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .top-actions {
        flex-direction: column;
    }

    .top-link {
        width: 100%;
    }

    .card-heading {
        align-items: flex-start;
    }

    .guest-page h1 {
        font-size: 32px;
    }

    .guest-page h2 {
        font-size: 21px;
    }
}

/* =========================================================
   LIVE GUEST SUPPORT STATES
========================================================= */

.guest-alerts {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.guest-alert {
    padding: 13px 16px;
    border: 1px solid rgba(47, 157, 222, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary);
    font-size: 12px;
    line-height: 1.55;
    box-shadow: 0 8px 24px rgba(24, 78, 131, 0.08);
}

.guest-alert.is-success {
    border-color: rgba(47, 158, 114, 0.28);
    background: rgba(237, 250, 245, 0.94);
    color: #236d52;
}

.guest-alert.is-error {
    border-color: rgba(226, 60, 60, 0.24);
    background: rgba(255, 244, 244, 0.94);
    color: #a62f2f;
}

.field-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.guest-credentials {
    margin-top: 20px;
    padding: 24px;
    border-radius: var(--radius-lg);
}

.guest-credentials h2 {
    margin: 5px 0 8px;
}

.guest-credentials > div:first-child > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.credential-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.credential-box {
    padding: 16px 18px;
    border: 1px solid rgba(47, 157, 222, 0.18);
    border-radius: 16px;
    background: rgba(245, 251, 255, 0.82);
}

.credential-box.is-private {
    border-color: rgba(217, 130, 43, 0.25);
    background: rgba(255, 249, 238, 0.9);
}

.credential-box span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.credential-box strong {
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.credential-warning {
    margin: 14px 0 0;
    color: #99621f;
    font-size: 11px;
    line-height: 1.55;
}

/* =========================================================
   SECURE GUEST CONVERSATION
========================================================= */

.guest-conversation {
    margin-top: 22px;
    padding: 24px;
    border-radius: var(--radius-lg);
}

.conversation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(47, 157, 222, 0.14);
}

.conversation-header h2 {
    margin: 5px 0 6px;
}

.conversation-header p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.conversation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.guest-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(47, 157, 222, 0.1);
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: 10px;
    font-weight: 400;
}

.guest-status.status-resolved,
.guest-status.status-closed {
    background: rgba(47, 158, 114, 0.12);
    color: #267456;
}

.guest-status.status-waiting_for_user {
    background: rgba(217, 130, 43, 0.13);
    color: #9a641f;
}

.end-access-button {
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(226, 60, 60, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    color: #b23939;
    font-family: "ABeeZee", sans-serif;
    font-size: 10px;
    cursor: pointer;
}

.end-access-button:hover,
.end-access-button:focus-visible {
    background: rgba(255, 241, 241, 0.96);
}

.conversation-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.conversation-meta > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(47, 157, 222, 0.12);
    border-radius: 13px;
    background: rgba(248, 252, 255, 0.68);
}

.conversation-meta span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted-2);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.conversation-meta strong {
    display: block;
    color: var(--primary);
    font-size: 11px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.guest-thread {
    display: grid;
    gap: 12px;
    max-height: 520px;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid rgba(47, 157, 222, 0.12);
    border-radius: 18px;
    background: rgba(246, 251, 255, 0.56);
}

.thread-message {
    width: min(78%, 680px);
    padding: 14px 16px;
    border: 1px solid rgba(47, 157, 222, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 20px rgba(24, 78, 131, 0.06);
}

.thread-message.is-guest {
    justify-self: end;
    border-bottom-right-radius: 6px;
    background: rgba(230, 247, 255, 0.92);
}

.thread-message.is-admin {
    justify-self: start;
    border-bottom-left-radius: 6px;
}

.thread-message header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.thread-message header strong {
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: 11px;
    font-weight: 400;
}

.thread-message header span {
    color: var(--muted-2);
    font-size: 9px;
    white-space: nowrap;
}

.thread-message p {
    margin: 0;
    color: #3e5e7c;
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-system,
.thread-empty {
    justify-self: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(129, 151, 173, 0.1);
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
}

.thread-attachments {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}

.thread-attachments a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(47, 157, 222, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--primary);
    font-size: 10px;
    text-decoration: none;
}

.thread-attachments a:hover,
.thread-attachments a:focus-visible {
    border-color: rgba(47, 157, 222, 0.4);
    background: #ffffff;
}

.thread-attachments small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 9px;
}

.guest-reply-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding-top: 17px;
    border-top: 1px solid rgba(47, 157, 222, 0.14);
}

.conversation-closed-note {
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid rgba(47, 157, 222, 0.12);
    border-radius: 13px;
    background: rgba(245, 250, 253, 0.78);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .credential-grid,
    .conversation-meta {
        grid-template-columns: 1fr;
    }

    .conversation-header {
        flex-direction: column;
    }

    .conversation-actions {
        justify-content: flex-start;
    }

    .thread-message {
        width: 92%;
    }
}

@media (max-width: 480px) {
    .guest-credentials,
    .guest-conversation {
        padding: 19px 16px;
        border-radius: 22px;
    }

    .thread-message {
        width: 100%;
    }

    .thread-message header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* =========================================================
   R2 — APP-LIKE GUEST SUPPORT
   Dedicated conversation, live updates, attachment picker
========================================================= */

.guest-support-body .button-spinner {
    display: none;
    width: 15px;
    height: 15px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: guestSupportSpin 0.75s linear infinite;
}

.guest-support-body .button-spinner.is-visible {
    display: inline-block;
}

@keyframes guestSupportSpin {
    to { transform: rotate(360deg); }
}

.credential-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.credential-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(47, 157, 222, 0.22);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    font-family: "ABeeZee", sans-serif;
    font-size: 10.5px;
    text-decoration: none;
    cursor: pointer;
}

.credential-action:hover,
.credential-action:focus-visible {
    border-color: rgba(47, 157, 222, 0.48);
    background: #ffffff;
}

.credential-action.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #ffffff;
}

.support-attachment-field {
    display: block;
}

.support-attachment-field > .field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: 11px;
    font-weight: 400;
}

.support-attachment-field > .field-label small {
    color: var(--muted-2);
    font-family: "ABeeZee", sans-serif;
    font-size: 9px;
}

.support-attachment-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.support-attachment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.support-add-file {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border: 1px dashed rgba(47, 157, 222, 0.36);
    border-radius: 11px;
    background: rgba(247, 252, 255, 0.9);
    color: var(--primary);
    font-size: 10.5px;
    cursor: pointer;
}

.support-add-file:hover:not(:disabled),
.support-add-file:focus-visible:not(:disabled) {
    border-style: solid;
    background: #ffffff;
}

.support-add-file:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.support-attachment-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
}

.support-selected-files {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.support-selected-files.is-empty {
    margin-top: 0;
}

.support-selected-file {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border: 1px solid rgba(47, 157, 222, 0.14);
    border-radius: 11px;
    background: rgba(247, 252, 255, 0.86);
}

.support-selected-file-copy {
    min-width: 0;
}

.support-selected-file-copy strong,
.support-selected-file-copy small {
    display: block;
}

.support-selected-file-copy strong {
    overflow: hidden;
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-selected-file-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.support-remove-file {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(214, 86, 86, 0.2);
    border-radius: 9px;
    background: #ffffff;
    color: #b23939;
    font-size: 18px;
    cursor: pointer;
}

/* Dedicated secure conversation */
.guest-ticket-body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(104, 210, 235, 0.2), transparent 32%),
        linear-gradient(145deg, #eefaff, #dff6ff 55%, #c9f1f7);
}

.guest-ticket-page {
    display: grid;
    width: min(1180px, calc(100% - 32px));
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    min-height: 0;
    margin: 14px auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
}

.guest-ticket-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 28px rgba(24, 78, 131, 0.08);
    backdrop-filter: blur(14px);
}

.guest-ticket-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}

.guest-ticket-back > span {
    font-size: 24px;
    line-height: 1;
}

.guest-ticket-brand {
    text-align: right;
}

.guest-ticket-brand strong,
.guest-ticket-brand small {
    display: block;
}

.guest-ticket-brand strong {
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: 15px;
    font-weight: 400;
}

.guest-ticket-brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.guest-ticket-alerts,
.guest-runtime-alerts {
    margin-top: 0;
}

.guest-runtime-alerts {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 100;
    width: min(560px, calc(100% - 28px));
    transform: translateX(-50%);
}

.guest-conversation-shell {
    display: grid;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 42px rgba(24, 78, 131, 0.12);
    backdrop-filter: blur(14px);
}

.guest-ticket-header {
    padding: 0 0 13px;
}

.guest-ticket-header h1 {
    margin: 4px 0 5px;
    color: var(--primary);
    font-family: "Hammersmith One", sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    line-height: 1.15;
}

.guest-ticket-meta {
    margin: 12px 0;
}

.end-access-button.is-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(214, 86, 86, 0.42);
    border-radius: 11px;
    background: #ffffff;
    color: #ad3939;
    box-shadow: 0 5px 14px rgba(173, 57, 57, 0.08);
    font-size: 10.5px;
    font-weight: 400;
}

.end-access-button.is-action:hover,
.end-access-button.is-action:focus-visible {
    border-color: rgba(214, 86, 86, 0.68);
    background: #fff4f4;
    transform: translateY(-1px);
}

.guest-thread-wrap {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.guest-ticket-page .guest-thread {
    height: 100%;
    max-height: none;
    min-height: 0;
    align-content: start;
    scroll-behavior: smooth;
}

.guest-new-message-button {
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 4;
    min-height: 34px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(24, 78, 131, 0.2);
    font-size: 10px;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.guest-ticket-composer {
    padding-top: 12px;
}

.guest-ticket-composer .guest-reply-form {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.45fr);
    align-items: end;
    gap: 10px 14px;
    margin-top: 0;
    padding-top: 12px;
}

.guest-reply-message-field {
    grid-column: 1;
}

.guest-ticket-composer .support-attachment-field {
    grid-column: 2;
}

.guest-composer-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.guest-live-state {
    color: #2f9e72;
    font-size: 9.5px;
}

.guest-live-state::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.guest-live-state.is-offline {
    color: #d88c22;
}

.guest-send-button {
    width: auto;
    min-width: 140px;
    margin: 0;
}

@media (max-width: 760px) {
    .guest-ticket-body {
        overflow: auto;
    }

    .guest-ticket-page {
        width: min(100% - 18px, 760px);
        height: auto;
        min-height: calc(100dvh - 18px);
        margin: 9px auto;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .guest-conversation-shell {
        min-height: calc(100dvh - 92px);
        padding: 14px;
        border-radius: 20px;
    }

    .guest-ticket-header {
        flex-direction: row;
    }

    .guest-ticket-meta {
        display: none;
    }

    .guest-ticket-page .guest-thread {
        min-height: 300px;
    }

    .guest-ticket-composer .guest-reply-form {
        grid-template-columns: 1fr;
    }

    .guest-reply-message-field,
    .guest-ticket-composer .support-attachment-field {
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .credential-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .credential-action.is-primary {
        grid-column: 1 / -1;
    }

    .guest-ticket-topbar {
        padding: 10px 12px;
        border-radius: 16px;
    }

    .guest-ticket-brand small {
        display: none;
    }

    .guest-ticket-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .conversation-actions {
        width: 100%;
        justify-content: space-between;
    }

    .guest-ticket-page .guest-thread {
        padding: 11px;
    }

    .thread-message {
        width: 94%;
    }

    .guest-composer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .guest-send-button {
        width: 100%;
    }
}

/* EASYPRINT PUBLIC GUEST SUPPORT V3
   ---------------------------------------------------------
   Match public landing design language:
   - Arial / Helvetica
   - stronger EasyPrint blue gradient
   - smaller cards
   - calmer buttons
   - tighter forms
   - flatter top navigation
--------------------------------------------------------- */

.guest-support-body {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  background:
    linear-gradient(
      180deg,
      #f4fbff 0%,
      #e4f5ff 20%,
      #eef9ff 42%,
      #dff2ff 68%,
      #edf9ff 100%
    ) !important;
}

.guest-page {
  max-width:
    1080px !important;

  padding:
    18px 20px 44px !important;
}


/* =========================================================
   TOPBAR
========================================================= */

.guest-topbar {
  min-height:
    64px;

  padding:
    10px 4px !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    16px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;
}

.brand-copy {
  gap:
    1px !important;
}

.brand-copy strong {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    21px !important;

  font-weight:
    800 !important;

  letter-spacing:
    -0.3px;

  color:
    #184e83 !important;
}

.brand-copy small {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    10px !important;

  color:
    #8193a1 !important;
}

.top-actions {
  width:
    auto !important;

  display:
    inline-flex !important;

  flex-direction:
    row !important;

  gap:
    7px !important;
}

.top-link {
  min-height:
    38px !important;

  padding:
    0 14px !important;

  border-radius:
    10px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  box-shadow:
    none !important;
}

.top-link:not(.primary) {
  border:
    1px solid
    rgba(24, 78, 131, 0.09) !important;

  background:
    rgba(255, 255, 255, 0.72) !important;
}

.top-link.primary {
  background:
    linear-gradient(
      135deg,
      #20b7c7,
      #2f9dde
    ) !important;

  box-shadow:
    0 6px 16px
    rgba(47, 157, 222, 0.15) !important;
}


/* =========================================================
   HERO
========================================================= */

.guest-hero {
  margin-top:
    34px !important;

  padding:
    8px 4px 30px !important;

  align-items:
    flex-end !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;
}

.hero-copy {
  max-width:
    650px !important;
}

.kicker {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    1.6px !important;

  color:
    #4f91ba !important;
}

.guest-page h1 {
  margin:
    8px 0 0 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    clamp(30px, 6vw, 42px) !important;

  font-weight:
    800 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.7px !important;
}

.hero-copy p {
  max-width:
    600px !important;

  margin:
    12px 0 0 !important;

  color:
    #60798c !important;

  font-size:
    12.5px !important;

  line-height:
    1.65 !important;
}

.hero-signin {
  min-height:
    42px !important;

  padding:
    0 16px !important;

  border-radius:
    11px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  box-shadow:
    0 7px 16px
    rgba(47, 157, 222, 0.14) !important;
}


/* =========================================================
   SUPPORT CARDS
========================================================= */

.guest-grid {
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.75fr) !important;

  gap:
    22px !important;

  margin-top:
    10px !important;
}

.guest-card {
  padding:
    22px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.92),
      rgba(239, 249, 255, 0.90)
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(24, 78, 131, 0.045) !important;

  backdrop-filter:
    none !important;
}

.guest-card:hover {
  transform:
    none !important;

  box-shadow:
    0 10px 24px
    rgba(24, 78, 131, 0.045) !important;
}

.card-heading {
  gap:
    11px !important;
}

.card-icon {
  width:
    40px !important;

  height:
    40px !important;

  border-radius:
    12px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    17px !important;

  font-weight:
    700 !important;

  background:
    #e8f6ff !important;
}

.guest-page h2 {
  margin:
    3px 0 0 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    21px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    -0.3px !important;
}

.card-description {
  margin:
    13px 0 0 !important;

  color:
    #6b8091 !important;

  font-size:
    11.5px !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   FORM
========================================================= */

.guest-form {
  gap:
    14px !important;

  margin-top:
    18px !important;
}

.field-grid {
  gap:
    13px !important;
}

.field > span,
.field-label,
.support-attachment-field > .field-label {
  margin-bottom:
    6px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;

  color:
    #315f82 !important;
}

.field small,
.field-label small {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9px !important;

  font-weight:
    400 !important;

  color:
    #93a1ad !important;
}

.field input,
.field select,
.field textarea {
  border:
    1px solid
    rgba(24, 78, 131, 0.10) !important;

  border-radius:
    12px !important;

  background:
    rgba(255, 255, 255, 0.86) !important;

  color:
    #315d7d !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    12px !important;

  box-shadow:
    none !important;
}

.field input,
.field select {
  min-height:
    46px !important;

  padding:
    0 13px !important;
}

.field textarea {
  min-height:
    120px !important;

  padding:
    12px 13px !important;

  line-height:
    1.5 !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    rgba(47, 157, 222, 0.42) !important;

  box-shadow:
    0 0 0 3px
    rgba(47, 157, 222, 0.08) !important;
}


/* =========================================================
   ATTACHMENTS
========================================================= */

.support-add-file {
  min-height:
    38px !important;

  padding:
    0 12px !important;

  border-radius:
    10px !important;

  background:
    rgba(255, 255, 255, 0.78) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    10.5px !important;
}

.field-help,
.support-attachment-count {
  font-size:
    9.5px !important;

  color:
    #8193a2 !important;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-button {
  min-height:
    46px !important;

  padding:
    0 16px !important;

  border-radius:
    11px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11.5px !important;

  font-weight:
    700 !important;
}

.action-button.primary {
  background:
    linear-gradient(
      135deg,
      #20b7c7,
      #2f9dde
    ) !important;

  box-shadow:
    0 7px 16px
    rgba(47, 157, 222, 0.14) !important;
}

.action-button.secondary {
  border:
    1px solid
    rgba(47, 157, 222, 0.13) !important;

  background:
    #edf8ff !important;

  color:
    #245f89 !important;
}


/* =========================================================
   NOTES
========================================================= */

.security-note {
  padding:
    13px 14px !important;

  border:
    1px solid
    rgba(47, 157, 222, 0.10) !important;

  border-radius:
    12px !important;

  background:
    rgba(232, 246, 255, 0.72) !important;
}

.security-note strong {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;
}

.security-note p {
  margin-top:
    4px !important;

  font-size:
    10px !important;

  line-height:
    1.5 !important;
}

.guest-note {
  margin:
    28px 0 8px !important;

  padding:
    15px 17px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  border-radius:
    14px !important;

  background:
    rgba(245, 251, 255, 0.82) !important;

  box-shadow:
    none !important;
}

.guest-note strong {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11.5px !important;

  font-weight:
    700 !important;
}

.guest-note p,
.guest-note a {
  font-size:
    10px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .guest-page {
    padding:
      10px 16px 36px !important;
  }

  .guest-topbar {
    flex-direction:
      row !important;

    align-items:
      center !important;

    padding:
      10px 0 !important;
  }

  .top-actions {
    width:
      auto !important;

    flex-direction:
      row !important;
  }

  .top-link {
    width:
      auto !important;

    flex:
      0 0 auto !important;
  }

  .guest-hero {
    margin-top:
      28px !important;

    padding:
      4px 0 28px !important;

    gap:
      18px !important;

    border-radius:
      0 !important;
  }

  .guest-page h1 {
    font-size:
      30px !important;
  }

  .hero-signin {
    width:
      auto !important;
  }

  .guest-grid {
    grid-template-columns:
      1fr !important;

    gap:
      24px !important;
  }

  .guest-card {
    padding:
      19px 16px !important;

    border-radius:
      18px !important;
  }

  .guest-page h2 {
    font-size:
      20px !important;
  }

  .field-grid {
    grid-template-columns:
      1fr !important;
  }

  .guest-note {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;

    gap:
      10px !important;
  }

}

@media (max-width: 420px) {

  .top-actions {
    flex-direction:
      row !important;
  }

  .top-link {
    width:
      auto !important;
  }

}

/* EASYPRINT GUEST SUPPORT ACCORDION V4
   ---------------------------------------------------------
   Collapsed Submit / Track cards with expandable forms.
--------------------------------------------------------- */


/* =========================================================
   GRID
========================================================= */

.guest-grid {
  display:
    grid !important;

  grid-template-columns:
    1fr 1fr !important;

  align-items:
    start !important;

  gap:
    18px !important;
}


/* =========================================================
   ACCORDION CARD
========================================================= */

.guest-accordion-card {
  padding:
    0 !important;

  overflow:
    hidden;

  border-radius:
    18px !important;
}

.guest-accordion-card > summary {
  list-style:
    none;
}

.guest-accordion-card > summary::-webkit-details-marker {
  display:
    none;
}

.guest-accordion-summary {
  min-height:
    150px;

  padding:
    20px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  cursor:
    pointer;
}

.guest-accordion-heading {
  min-width:
    0;

  flex:
    1;
}

.guest-accordion-summary .card-heading {
  margin:
    0;
}

.guest-accordion-summary .card-description {
  margin:
    14px 0 0 !important;

  max-width:
    560px;
}


/* =========================================================
   PLUS / MINUS
========================================================= */

.guest-accordion-icon {
  position:
    relative;

  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  margin-top:
    3px;

  border:
    1px solid
    rgba(47, 157, 222, 0.12);

  border-radius:
    9px;

  background:
    #edf8ff;
}

.guest-accordion-icon::before,
.guest-accordion-icon::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    10px;

  height:
    1.5px;

  border-radius:
    999px;

  background:
    #3981ae;

  transform:
    translate(-50%, -50%);
}

.guest-accordion-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);

  transition:
    transform 0.18s ease;
}

.guest-accordion-card[open]
.guest-accordion-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* =========================================================
   EXPANDED BODY
========================================================= */

.guest-accordion-body {
  padding:
    0 20px 20px;

  border-top:
    1px solid
    rgba(24, 78, 131, 0.07);
}

.guest-accordion-body .guest-form {
  margin-top:
    18px !important;
}


/* =========================================================
   SAME PRIMARY STYLE FOR BOTH SUBMIT + TRACK
========================================================= */

.action-button.primary,
.action-button.secondary {
  min-height:
    46px !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      #20b7c7,
      #2f9dde
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 7px 16px
    rgba(47, 157, 222, 0.14) !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11.5px !important;

  font-weight:
    700 !important;
}

.action-button.primary:not(:disabled):hover,
.action-button.secondary:not(:disabled):hover {
  transform:
    translateY(-1px) !important;

  background:
    linear-gradient(
      135deg,
      #20b7c7,
      #2f9dde
    ) !important;

  box-shadow:
    0 9px 20px
    rgba(47, 157, 222, 0.18) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .guest-grid {
    grid-template-columns:
      1fr !important;

    gap:
      18px !important;
  }

  .guest-accordion-summary {
    min-height:
      auto;

    padding:
      18px 16px;
  }

  .guest-accordion-body {
    padding:
      0 16px 18px;
  }

  .guest-accordion-icon {
    width:
      28px;

    height:
      28px;

    flex-basis:
      28px;
  }

}

/* EASYPRINT GUEST CHAT MESSENGER V11
   =========================================================
   Clean messaging-app layout inspired by Telegram/Messenger.
========================================================= */


/* =========================================================
   A11Y
========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   FULL CHAT SCREEN
========================================================= */

.guest-ticket-body {
  height:
    100svh !important;

  min-height:
    100svh !important;

  margin:
    0 !important;

  overflow:
    hidden !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  background:
    #edf4f8 !important;
}

.guest-ticket-page {
  width:
    min(100%, 860px) !important;

  height:
    100svh !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  background:
    #ffffff !important;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.guest-chat-appbar {
  flex:
    0 0 62px !important;

  min-height:
    62px !important;

  padding:
    7px 10px !important;

  display:
    grid !important;

  grid-template-columns:
    38px
    38px
    minmax(0, 1fr)
    38px !important;

  align-items:
    center !important;

  gap:
    7px !important;

  border-bottom:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  background:
    #ffffff !important;
}


/* Back */

.guest-chat-back {
  width:
    38px !important;

  height:
    38px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  color:
    #204f70 !important;

  font-size:
    23px !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;
}

.guest-chat-back:hover {
  background:
    #f0f5f8 !important;
}


/* Avatar */

.guest-chat-avatar {
  width:
    36px !important;

  height:
    36px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border-radius:
    50% !important;

  background:
    #d9eff9 !important;

  color:
    #23688f !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  letter-spacing:
    -0.2px !important;
}


/* Header text */

.guest-chat-appbar-copy {
  min-width:
    0 !important;

  display:
    grid !important;

  gap:
    2px !important;
}

.guest-chat-appbar-copy strong {
  overflow:
    hidden !important;

  color:
    #1c3446 !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}

.guest-chat-appbar-copy span {
  overflow:
    hidden !important;

  color:
    #8897a1 !important;

  font-size:
    7.5px !important;

  line-height:
    1.25 !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


/* End access */

.guest-chat-end-form {
  margin:
    0 !important;
}

.guest-chat-end-button {
  width:
    36px !important;

  height:
    36px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  color:
    #a35b5b !important;

  font-size:
    15px !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;
}

.guest-chat-end-button:hover {
  background:
    #fff3f3 !important;
}


/* =========================================================
   CONVERSATION AREA
========================================================= */

.guest-conversation-shell {
  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #f7f9fb !important;

  box-shadow:
    none !important;
}

.guest-ticket-topbar,
.guest-ticket-header,
.guest-ticket-meta {
  display:
    none !important;
}


/* =========================================================
   THREAD
========================================================= */

.guest-thread-wrap {
  position:
    relative !important;

  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  padding:
    14px 12px 10px !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  background:
    #f7f9fb !important;
}

.guest-thread {
  width:
    100% !important;

  height:
    100% !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    flex-end !important;

  gap:
    5px !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  scroll-behavior:
    smooth !important;
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */

.thread-message {
  position:
    relative !important;

  width:
    fit-content !important;

  max-width:
    min(78%, 540px) !important;

  margin:
    0 !important;

  padding:
    8px 10px 7px !important;

  border:
    0 !important;

  border-radius:
    13px !important;

  box-shadow:
    none !important;
}


/* Me */

.thread-message.is-guest {
  align-self:
    flex-end !important;

  background:
    #2f9dde !important;

  color:
    #ffffff !important;

  border-bottom-right-radius:
    4px !important;
}


/* Support */

.thread-message.is-admin {
  align-self:
    flex-start !important;

  background:
    #ffffff !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.07) !important;

  border-bottom-left-radius:
    4px !important;
}


/* =========================================================
   MESSAGE TEXT
========================================================= */

.thread-message > p {
  margin:
    0 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    13.5px !important;

  line-height:
    1.38 !important;

  white-space:
    pre-wrap !important;

  overflow-wrap:
    anywhere !important;
}

.thread-message.is-guest > p {
  color:
    #ffffff !important;
}

.thread-message.is-admin > p {
  color:
    #263f50 !important;
}


/* =========================================================
   MESSAGE NAME / TIME
========================================================= */

.thread-message header {
  margin:
    0 0 4px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    baseline !important;

  gap:
    6px !important;

  border:
    0 !important;

  background:
    transparent !important;
}


/* User already knows their own name */

.thread-message.is-guest header strong {
  display:
    none !important;
}

.thread-message.is-guest header {
  justify-content:
    flex-end !important;

  margin:
    0 0 2px !important;
}

.thread-message header strong {
  color:
    #2d6c92 !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;
}

.thread-message header span {
  color:
    #95a2aa !important;

  font-size:
    7px !important;
}

.thread-message.is-guest header span {
  color:
    rgba(255, 255, 255, 0.72) !important;
}


/* =========================================================
   SYSTEM MESSAGE
========================================================= */

.thread-system,
.thread-empty {
  align-self:
    center !important;

  margin:
    5px 0 !important;

  padding:
    4px 9px !important;

  border-radius:
    999px !important;

  background:
    rgba(82, 102, 115, 0.08) !important;

  color:
    #87959e !important;

  font-size:
    7px !important;
}


/* =========================================================
   CHAT ATTACHMENTS
========================================================= */

.thread-attachments {
  margin-top:
    6px !important;

  display:
    grid !important;

  gap:
    4px !important;
}

.thread-attachments a {
  min-width:
    140px !important;

  padding:
    7px 8px !important;

  display:
    flex !important;

  justify-content:
    space-between !important;

  gap:
    8px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.10) !important;

  border-radius:
    8px !important;

  background:
    rgba(255, 255, 255, 0.82) !important;

  color:
    #355f7a !important;

  font-size:
    7.5px !important;

  text-decoration:
    none !important;
}


/* =========================================================
   NEW MESSAGE BUTTON
========================================================= */

.guest-new-message-button {
  position:
    absolute !important;

  right:
    12px !important;

  bottom:
    9px !important;

  min-height:
    27px !important;

  padding:
    0 9px !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    #2f6f94 !important;

  color:
    #ffffff !important;

  font-size:
    7px !important;
}


/* =========================================================
   COMPOSER BAR
========================================================= */

.guest-chat-composer {
  flex:
    0 0 auto !important;

  padding:
    8px 9px
    calc(9px + env(safe-area-inset-bottom)) !important;

  border-top:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  background:
    #ffffff !important;
}

.guest-chat-form {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    40px !important;

  align-items:
    center !important;

  gap:
    7px !important;
}


/* =========================================================
   ATTACHMENT +
========================================================= */

.guest-chat-attachments {
  grid-column:
    1 !important;

  grid-row:
    1 !important;

  width:
    40px !important;

  height:
    40px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}

.support-attachment-input {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}

.guest-chat-add {
  width:
    40px !important;

  height:
    40px !important;

  min-width:
    40px !important;

  min-height:
    40px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.14) !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    #2c6487 !important;

  font-size:
    25px !important;

  font-weight:
    300 !important;

  line-height:
    1 !important;

  box-shadow:
    none !important;
}

.guest-chat-attachments
.support-attachment-count {
  display:
    none !important;
}


/* =========================================================
   INPUT
========================================================= */

.guest-chat-message {
  grid-column:
    2 !important;

  grid-row:
    1 !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}

.guest-chat-message textarea {
  width:
    100% !important;

  height:
    40px !important;

  min-height:
    40px !important;

  max-height:
    110px !important;

  margin:
    0 !important;

  padding:
    10px 14px !important;

  overflow-y:
    auto !important;

  box-sizing:
    border-box !important;

  resize:
    none !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.14) !important;

  border-radius:
    20px !important;

  background:
    #f7f9fb !important;

  color:
    #314a5a !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    12px !important;

  line-height:
    1.35 !important;

  outline:
    0 !important;

  box-shadow:
    none !important;
}

.guest-chat-message textarea::placeholder {
  color:
    #8d9aa3 !important;
}

.guest-chat-message textarea:focus {
  border-color:
    rgba(47, 157, 222, 0.34) !important;

  background:
    #ffffff !important;
}


/* =========================================================
   SEND
========================================================= */

.guest-chat-form > .guest-chat-send {
  grid-column:
    3 !important;

  grid-row:
    1 !important;

  width:
    40px !important;

  min-width:
    40px !important;

  max-width:
    40px !important;

  height:
    40px !important;

  min-height:
    40px !important;

  max-height:
    40px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    #2f9dde !important;

  color:
    #ffffff !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}

.guest-chat-send-icon {
  display:
    block !important;

  font-size:
    14px !important;

  line-height:
    1 !important;
}

.guest-chat-send .button-spinner {
  position:
    absolute !important;

  margin:
    0 !important;
}

.guest-chat-send
.button-spinner.is-visible
~ .guest-chat-send-icon {
  visibility:
    hidden !important;
}


/* =========================================================
   LIVE LABEL
========================================================= */

.guest-chat-form >
.guest-live-state {
  display:
    none !important;
}


/* =========================================================
   SELECTED ATTACHMENTS
========================================================= */

.guest-chat-selected-files {
  position:
    absolute !important;

  left:
    0 !important;

  right:
    0 !important;

  bottom:
    calc(100% + 7px) !important;

  z-index:
    20 !important;

  margin:
    0 !important;

  padding:
    6px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  border-radius:
    10px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 18px
    rgba(24, 78, 131, 0.08) !important;
}

.guest-chat-selected-files:empty,
.guest-chat-selected-files.is-empty {
  display:
    none !important;
}


/* =========================================================
   CLOSED
========================================================= */

.conversation-closed-note {
  padding:
    10px 12px !important;

  border-radius:
    10px !important;

  background:
    #f5f8fa !important;

  color:
    #748793 !important;

  font-size:
    8.5px !important;

  text-align:
    center !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-ticket-page {
    width:
      100% !important;
  }

  .guest-chat-appbar {
    flex-basis:
      58px !important;

    min-height:
      58px !important;
  }

  .guest-thread-wrap {
    padding:
      12px 9px 9px !important;
  }

  .thread-message {
    max-width:
      80% !important;
  }

  .thread-message > p {
    font-size:
      13px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .guest-chat-form {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px !important;

    gap:
      6px !important;
  }

  .guest-chat-attachments,
  .guest-chat-add,
  .guest-chat-form > .guest-chat-send {
    width:
      38px !important;

    min-width:
      38px !important;

    max-width:
      38px !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;
  }

  .guest-chat-message textarea {
    height:
      38px !important;

    min-height:
      38px !important;
  }

}

/* EASYPRINT GUEST CHAT HEADER MENU V12
   =========================================================
   Back label + conversation information overflow menu
========================================================= */


/* =========================================================
   HEADER GRID
========================================================= */

.guest-chat-appbar {
  grid-template-columns:
    auto
    36px
    minmax(0, 1fr)
    40px !important;

  gap:
    7px !important;
}


/* =========================================================
   BACK
========================================================= */

.guest-chat-back {
  width:
    auto !important;

  height:
    38px !important;

  padding:
    0 7px !important;

  gap:
    5px !important;

  border-radius:
    8px !important;

  color:
    #204f70 !important;

  font-size:
    17px !important;
}

.guest-chat-back strong {
  color:
    #204f70 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   THREE DOT MENU
========================================================= */

.guest-chat-menu {
  position:
    relative !important;

  justify-self:
    end !important;
}

.guest-chat-menu-toggle {
  width:
    38px !important;

  height:
    38px !important;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  color:
    #486577 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    15px !important;

  font-weight:
    700 !important;

  letter-spacing:
    1px !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;
}

.guest-chat-menu-toggle:hover,
.guest-chat-menu-toggle:focus-visible,
.guest-chat-menu.is-open
.guest-chat-menu-toggle {
  background:
    #eef5f8 !important;
}


/* =========================================================
   MENU PANEL
========================================================= */

.guest-chat-menu-panel {
  position:
    absolute !important;

  top:
    calc(100% + 7px) !important;

  right:
    0 !important;

  z-index:
    100 !important;

  width:
    min(280px, calc(100vw - 28px)) !important;

  padding:
    8px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.09) !important;

  border-radius:
    13px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 14px 36px
    rgba(24, 78, 131, 0.15) !important;
}

.guest-chat-menu-panel[hidden] {
  display:
    none !important;
}


/* =========================================================
   MENU HEADING
========================================================= */

.guest-chat-menu-heading {
  padding:
    7px 8px 9px !important;

  border-bottom:
    1px solid
    rgba(24, 78, 131, 0.07) !important;
}

.guest-chat-menu-heading strong {
  color:
    #234f70 !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   TICKET INFORMATION
========================================================= */

.guest-chat-ticket-details {
  margin:
    0 !important;

  padding:
    5px 0 !important;

  display:
    grid !important;
}

.guest-chat-ticket-details > div {
  padding:
    7px 8px !important;

  display:
    grid !important;

  grid-template-columns:
    82px
    minmax(0, 1fr) !important;

  gap:
    8px !important;
}

.guest-chat-ticket-details dt {
  margin:
    0 !important;

  color:
    #94a0a9 !important;

  font-size:
    7px !important;

  font-weight:
    600 !important;
}

.guest-chat-ticket-details dd {
  min-width:
    0 !important;

  margin:
    0 !important;

  color:
    #3f596a !important;

  font-size:
    8px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  overflow-wrap:
    anywhere !important;
}


/* =========================================================
   END ACCESS INSIDE MENU
========================================================= */

.guest-chat-menu-end-form {
  margin:
    3px 0 0 !important;

  padding:
    8px 5px 3px !important;

  border-top:
    1px solid
    rgba(24, 78, 131, 0.07) !important;
}

.guest-chat-menu-end-button {
  width:
    100% !important;

  min-height:
    36px !important;

  padding:
    0 10px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #a44f4f !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    8.5px !important;

  font-weight:
    700 !important;

  text-align:
    left !important;

  cursor:
    pointer !important;
}

.guest-chat-menu-end-button:hover,
.guest-chat-menu-end-button:focus-visible {
  background:
    #fff2f2 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-chat-appbar {
    grid-template-columns:
      auto
      34px
      minmax(0, 1fr)
      38px !important;

    padding:
      6px 7px !important;

    gap:
      5px !important;
  }

  .guest-chat-back {
    padding:
      0 5px !important;
  }

  .guest-chat-back strong {
    font-size:
      8px !important;
  }

  .guest-chat-avatar {
    width:
      34px !important;

    height:
      34px !important;
  }

  .guest-chat-appbar-copy strong {
    font-size:
      12px !important;
  }

  .guest-chat-appbar-copy span {
    font-size:
      7px !important;
  }

  .guest-chat-menu-panel {
    top:
      calc(100% + 5px) !important;

    right:
      0 !important;

    width:
      min(270px, calc(100vw - 18px)) !important;
  }

}

/* EASYPRINT GUEST CHAT ALIGNMENT V13 */


/* =========================================================
   HEADER — CLEAN APP-LIKE ALIGNMENT
========================================================= */

.guest-chat-appbar {
  width:
    100% !important;

  min-height:
    60px !important;

  padding:
    8px 12px !important;

  box-sizing:
    border-box !important;

  display:
    grid !important;

  grid-template-columns:
    64px
    36px
    minmax(0, 1fr)
    38px !important;

  align-items:
    center !important;

  gap:
    8px !important;

  background:
    #ffffff !important;
}


/* =========================================================
   BACK CONTROL
========================================================= */

.guest-chat-back {
  width:
    auto !important;

  height:
    38px !important;

  margin:
    0 !important;

  padding:
    0 5px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    3px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #245f89 !important;

  text-decoration:
    none !important;
}

.guest-chat-back-icon {
  position:
    relative;

  top:
    -1px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    28px;

  font-weight:
    300;

  line-height:
    1;
}

.guest-chat-back strong {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  color:
    #245f89 !important;
}

.guest-chat-back:hover,
.guest-chat-back:focus-visible {
  background:
    #f1f7fa !important;
}


/* =========================================================
   AVATAR
========================================================= */

.guest-chat-avatar {
  width:
    36px !important;

  height:
    36px !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  align-self:
    center !important;

  border-radius:
    50% !important;

  background:
    #dff2fb !important;

  color:
    #2d6b90 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   SUPPORT PROFILE COPY
========================================================= */

.guest-chat-appbar-copy {
  min-width:
    0 !important;

  align-self:
    center !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  gap:
    2px !important;

  transform:
    none !important;
}

.guest-chat-appbar-copy strong {
  margin:
    0 !important;

  color:
    #183f61 !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;
}

.guest-chat-appbar-copy span {
  margin:
    0 !important;

  color:
    #8796a0 !important;

  font-size:
    7.5px !important;

  line-height:
    1.25 !important;
}


/* =========================================================
   THREE DOT BUTTON
========================================================= */

.guest-chat-menu {
  width:
    38px !important;

  justify-self:
    end !important;
}

.guest-chat-menu-toggle {
  width:
    38px !important;

  height:
    38px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border-radius:
    50% !important;

  color:
    #496879 !important;
}


/* =========================================================
   CONVERSATION AREA
========================================================= */

.guest-conversation-shell {
  width:
    100% !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}

.guest-thread-wrap {
  width:
    100% !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   BOTTOM COMPOSER — FULL WIDTH
========================================================= */

.guest-chat-composer {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    8px 10px
    calc(9px + env(safe-area-inset-bottom)) !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-top:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  border-radius:
    0 !important;

  background:
    #ffffff !important;

  box-shadow:
    none !important;
}


/* =========================================================
   COMPOSER CONTENT
========================================================= */

.guest-chat-form {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    40px !important;

  gap:
    8px !important;
}

.guest-chat-add,
.guest-chat-form > .guest-chat-send {
  align-self:
    center !important;
}

.guest-chat-message {
  width:
    100% !important;

  min-width:
    0 !important;
}

.guest-chat-message textarea {
  width:
    100% !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-chat-appbar {
    grid-template-columns:
      60px
      34px
      minmax(0, 1fr)
      36px !important;

    min-height:
      58px !important;

    padding:
      7px 9px !important;

    gap:
      6px !important;
  }

  .guest-chat-back {
    height:
      36px !important;

    padding:
      0 3px !important;
  }

  .guest-chat-back-icon {
    font-size:
      26px !important;
  }

  .guest-chat-back strong {
    font-size:
      8px !important;
  }

  .guest-chat-avatar {
    width:
      34px !important;

    height:
      34px !important;
  }

  .guest-chat-appbar-copy strong {
    font-size:
      12px !important;
  }

  .guest-chat-appbar-copy span {
    font-size:
      7px !important;
  }

  .guest-chat-composer {
    width:
      100% !important;

    margin:
      0 !important;

    padding-left:
      9px !important;

    padding-right:
      9px !important;
  }

}

/* EASYPRINT GUEST CHAT GRADIENT V14
   =========================================================
   Landing-inspired subtle blue conversation background.
========================================================= */


/* =========================================================
   PAGE SURROUND
========================================================= */

.guest-ticket-body {
  background:
    linear-gradient(
      145deg,
      #e6f6ff 0%,
      #d9f1fb 48%,
      #dff7f7 100%
    ) !important;
}


/* =========================================================
   CHAT AREA
========================================================= */

.guest-conversation-shell {
  background:
    linear-gradient(
      155deg,
      #f3faff 0%,
      #eaf7fc 45%,
      #e9f8f8 100%
    ) !important;
}

.guest-thread-wrap {
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(255, 255, 255, 0.55),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 85%,
      rgba(32, 183, 199, 0.08),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      #f1f9fe 0%,
      #e8f5fb 48%,
      #e5f7f7 100%
    ) !important;
}

.guest-thread {
  background:
    transparent !important;
}


/* =========================================================
   HEADER REMAINS CLEAN WHITE
========================================================= */

.guest-chat-appbar {
  background:
    rgba(255, 255, 255, 0.96) !important;

  backdrop-filter:
    blur(10px) !important;
}


/* =========================================================
   COMPOSER REMAINS WHITE FOR CONTRAST
========================================================= */

.guest-chat-composer {
  background:
    rgba(255, 255, 255, 0.97) !important;

  backdrop-filter:
    blur(10px) !important;
}


/* =========================================================
   SUPPORT BUBBLES
========================================================= */

.thread-message.is-admin {
  background:
    rgba(255, 255, 255, 0.95) !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.08) !important;

  box-shadow:
    0 3px 10px
    rgba(24, 78, 131, 0.035) !important;
}


/* =========================================================
   USER BUBBLES
========================================================= */

.thread-message.is-guest {
  background:
    linear-gradient(
      135deg,
      #2996d2,
      #35a9df
    ) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-ticket-body {
    background:
      linear-gradient(
        150deg,
        #dff3fd 0%,
        #d5eef8 52%,
        #d9f5f4 100%
      ) !important;
  }

  .guest-thread-wrap {
    background:
      linear-gradient(
        155deg,
        #f0f9fd 0%,
        #e7f4fa 48%,
        #e4f5f5 100%
      ) !important;
  }

}

/* EASYPRINT GUEST CHAT LANDING GRADIENT V15
   =========================================================
   Stronger visible cyan-blue gradient matching landing vibe.
========================================================= */


/* =========================================================
   OUTER PAGE
========================================================= */

.guest-ticket-body {
  background:
    linear-gradient(
      145deg,
      #d5f7fa 0%,
      #d8f3fb 34%,
      #cbeafa 68%,
      #d9f3ff 100%
    ) !important;
}


/* =========================================================
   CHAT SHELL
========================================================= */

.guest-conversation-shell {
  background:
    linear-gradient(
      150deg,
      #eafcff 0%,
      #e4f8fd 28%,
      #dff3fb 62%,
      #e9f7ff 100%
    ) !important;
}


/* =========================================================
   MAIN MESSAGE AREA
========================================================= */

.guest-thread-wrap {
  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(66, 211, 218, 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 86% 78%,
      rgba(74, 166, 229, 0.16),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #e2fbfd 0%,
      #def6fb 36%,
      #d7eef9 70%,
      #e1f4fd 100%
    ) !important;
}

.guest-thread {
  background:
    transparent !important;
}


/* =========================================================
   HEADER
========================================================= */

.guest-chat-appbar {
  background:
    rgba(255, 255, 255, 0.94) !important;

  backdrop-filter:
    blur(12px) !important;
}


/* =========================================================
   COMPOSER
========================================================= */

.guest-chat-composer {
  background:
    rgba(255, 255, 255, 0.95) !important;

  backdrop-filter:
    blur(12px) !important;
}


/* =========================================================
   USER MESSAGE BUBBLE
========================================================= */

.thread-message.is-guest {
  background:
    linear-gradient(
      135deg,
      #1eb7c8 0%,
      #2f9dde 55%,
      #328ed0 100%
    ) !important;
}


/* =========================================================
   SUPPORT BUBBLE
========================================================= */

.thread-message.is-admin {
  background:
    rgba(255, 255, 255, 0.96) !important;

  border:
    1px solid
    rgba(47, 157, 222, 0.10) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-ticket-body {
    background:
      linear-gradient(
        150deg,
        #d2f6f8 0%,
        #d2effa 45%,
        #c7e8f7 100%
      ) !important;
  }

  .guest-thread-wrap {
    background:
      radial-gradient(
        circle at 12% 18%,
        rgba(44, 201, 210, 0.15),
        transparent 32%
      ),
      radial-gradient(
        circle at 88% 82%,
        rgba(47, 157, 222, 0.14),
        transparent 36%
      ),
      linear-gradient(
        150deg,
        #def9fb 0%,
        #d9f2fa 48%,
        #d2ebf8 100%
      ) !important;
  }

}

/* EASYPRINT GUEST CHAT MOBILE SCALE V16
   =========================================================
   Remove zoomed-out feel and make chat truly edge-to-edge.
========================================================= */


/* =========================================================
   GLOBAL CHAT WIDTH
========================================================= */

.guest-ticket-page,
.guest-conversation-shell,
.guest-thread-wrap,
.guest-chat-composer {
  width:
    100% !important;

  max-width:
    none !important;

  margin-left:
    0 !important;

  margin-right:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   HEADER TYPOGRAPHY
========================================================= */

.guest-chat-appbar-copy strong {
  font-size:
    16px !important;

  line-height:
    1.15 !important;
}

.guest-chat-appbar-copy span {
  font-size:
    11px !important;

  line-height:
    1.3 !important;
}

.guest-chat-back strong {
  font-size:
    12px !important;
}

.guest-chat-avatar {
  font-size:
    11px !important;
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */

.thread-message {
  max-width:
    min(82%, 560px) !important;

  padding:
    10px 12px !important;

  border-radius:
    15px !important;
}

.thread-message > p {
  font-size:
    15px !important;

  line-height:
    1.38 !important;
}

.thread-message header strong {
  font-size:
    10px !important;
}

.thread-message header span {
  font-size:
    9px !important;
}


/* =========================================================
   THREAD AREA
========================================================= */

.guest-thread-wrap {
  padding:
    14px 12px 10px !important;
}

.guest-thread {
  padding:
    0 !important;

  gap:
    7px !important;
}


/* =========================================================
   COMPOSER FULL WIDTH
========================================================= */

.guest-chat-composer {
  margin:
    0 !important;

  padding:
    9px 10px
    calc(10px + env(safe-area-inset-bottom)) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.guest-chat-form {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    44px !important;

  gap:
    8px !important;
}


/* =========================================================
   INPUT / BUTTON SCALE
========================================================= */

.guest-chat-add,
.guest-chat-form > .guest-chat-send {
  width:
    44px !important;

  min-width:
    44px !important;

  max-width:
    44px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  max-height:
    44px !important;
}

.guest-chat-add {
  font-size:
    27px !important;
}

.guest-chat-send-icon {
  font-size:
    16px !important;
}

.guest-chat-message textarea {
  height:
    44px !important;

  min-height:
    44px !important;

  padding:
    11px 14px !important;

  border-radius:
    22px !important;

  font-size:
    14px !important;

  line-height:
    1.35 !important;
}

.guest-chat-message textarea::placeholder {
  font-size:
    14px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-ticket-page {
    width:
      100vw !important;

    max-width:
      100vw !important;

    margin:
      0 !important;
  }

  .guest-conversation-shell,
  .guest-thread-wrap,
  .guest-chat-composer {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;
  }

  .guest-chat-appbar {
    width:
      100% !important;

    padding:
      8px 10px !important;

    box-sizing:
      border-box !important;
  }

  .guest-chat-appbar-copy strong {
    font-size:
      15px !important;
  }

  .guest-chat-appbar-copy span {
    font-size:
      10px !important;
  }

  .guest-chat-back strong {
    font-size:
      11px !important;
  }

  .thread-message > p {
    font-size:
      15px !important;
  }

  .thread-message header span {
    font-size:
      9px !important;
  }

  .guest-chat-composer {
    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }

}

/* EASYPRINT GUEST CHAT FULL BLEED V17
   =========================================================
   Header, conversation and composer share the same edges.
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.guest-ticket-body {
  overflow-x:
    hidden !important;
}

.guest-ticket-page {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* =========================================================
   CONVERSATION — TRUE VIEWPORT WIDTH
========================================================= */

.guest-conversation-shell {
  position:
    relative !important;

  left:
    50% !important;

  width:
    100vw !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    translateX(-50%) !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   THREAD BACKGROUND EXTENDS EDGE TO EDGE
========================================================= */

.guest-thread-wrap {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-radius:
    0 !important;
}


/* Messages still need breathing room */

.guest-thread {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   COMPOSER — SAME FULL WIDTH AS HEADER
========================================================= */

.guest-chat-composer {
  position:
    relative !important;

  left:
    0 !important;

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  border-left:
    0 !important;

  border-right:
    0 !important;

  border-bottom:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


/* Inner controls keep normal padding */

.guest-chat-form {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-conversation-shell {
    left:
      50% !important;

    width:
      100vw !important;

    transform:
      translateX(-50%) !important;
  }

  .guest-thread-wrap {
    padding:
      14px 12px 10px !important;
  }

  .guest-chat-composer {
    padding:
      9px 12px
      calc(10px + env(safe-area-inset-bottom)) !important;
  }

}

/* EASYPRINT GUEST CHAT HEADER CLEARANCE V18 */


/* =========================================================
   KEEP HEADER ABOVE CHAT
========================================================= */

.guest-chat-appbar {
  position:
    relative !important;

  z-index:
    30 !important;
}


/* =========================================================
   RESET CONVERSATION POSITION
========================================================= */

.guest-conversation-shell {
  left:
    auto !important;

  transform:
    none !important;

  width:
    100% !important;

  margin:
    0 !important;

  position:
    relative !important;

  z-index:
    1 !important;
}


/* =========================================================
   NO OVERLAP
========================================================= */

.guest-thread-wrap {
  position:
    relative !important;

  z-index:
    1 !important;

  margin-top:
    0 !important;
}


/* =========================================================
   KEEP FULL WIDTH
========================================================= */

.guest-ticket-page,
.guest-conversation-shell,
.guest-thread-wrap,
.guest-chat-composer {
  width:
    100% !important;

  max-width:
    none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-conversation-shell {
    left:
      auto !important;

    transform:
      none !important;
  }

}

/* EASYPRINT GUEST CHAT BUBBLE COLORS V19 */


/* Guest / user messages */
.thread-message.is-guest {
  background:
    linear-gradient(
      135deg,
      #2396d1 0%,
      #2f9dde 58%,
      #238bc3 100%
    ) !important;

  color:
    #ffffff !important;

  border:
    0 !important;
}

.thread-message.is-guest > p {
  color:
    #ffffff !important;
}

.thread-message.is-guest header span {
  color:
    rgba(255, 255, 255, 0.72) !important;
}


/* EasyPrint Support / admin messages */
.thread-message.is-admin {
  background:
    #e4f4fb !important;

  color:
    #284f69 !important;

  border:
    1px solid
    rgba(47, 157, 222, 0.12) !important;

  box-shadow:
    none !important;
}

.thread-message.is-admin > p {
  color:
    #284f69 !important;
}

.thread-message.is-admin header strong {
  color:
    #1f5f87 !important;
}

.thread-message.is-admin header span {
  color:
    #7894a6 !important;
}

/* EASYPRINT CHAT ATTACHMENT MENU V20 */


/* Hidden native inputs */
.guest-chat-attachments
.support-attachment-input,

.guest-chat-attachments
.support-attachment-source {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  margin:
    -1px !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/* Attachment action menu */
.guest-chat-attachment-menu {
  position:
    absolute !important;

  left:
    0 !important;

  bottom:
    calc(100% + 10px) !important;

  z-index:
    60 !important;

  width:
    230px !important;

  padding:
    7px !important;

  display:
    grid !important;

  gap:
    3px !important;

  border:
    1px solid
    rgba(24, 78, 131, 0.09) !important;

  border-radius:
    13px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 12px 30px
    rgba(24, 78, 131, 0.14) !important;
}

.guest-chat-attachment-menu[hidden] {
  display:
    none !important;
}


/* Each menu action */
.guest-chat-attachment-option {
  width:
    100% !important;

  min-height:
    54px !important;

  padding:
    7px 9px !important;

  display:
    grid !important;

  grid-template-columns:
    36px
    minmax(0, 1fr) !important;

  align-items:
    center !important;

  gap:
    9px !important;

  border:
    0 !important;

  border-radius:
    9px !important;

  background:
    transparent !important;

  color:
    #31566f !important;

  text-align:
    left !important;

  cursor:
    pointer !important;
}

.guest-chat-attachment-option:hover,
.guest-chat-attachment-option:focus-visible {
  background:
    #edf8fc !important;
}


.guest-chat-attachment-option-icon {
  width:
    34px !important;

  height:
    34px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border-radius:
    9px !important;

  background:
    #e6f5fb !important;

  color:
    #2c7da9 !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;
}


.guest-chat-attachment-option > span:last-child {
  min-width:
    0 !important;

  display:
    grid !important;

  gap:
    2px !important;
}

.guest-chat-attachment-option strong {
  color:
    #244f6b !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;
}

.guest-chat-attachment-option small {
  color:
    #8295a2 !important;

  font-size:
    8px !important;
}


/* + active state */
.guest-chat-attachments.is-attachment-menu-open
.guest-chat-add {
  background:
    #eaf7fc !important;

  border-color:
    rgba(47, 157, 222, 0.24) !important;
}


@media (max-width: 680px) {

  .guest-chat-attachment-menu {
    width:
      220px !important;
  }

}

/* EASYPRINT CHAT ATTACHMENT LAYER V23 */


/* thread stays underneath */
.guest-thread-wrap {
  position: relative !important;
  z-index: 1 !important;
}


/* composer becomes the upper UI layer */
.guest-chat-composer {
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}


/* form must not clip popover */
.guest-chat-form {
  position: relative !important;
  z-index: 101 !important;
  overflow: visible !important;
}


/* + button wrapper is the menu anchor */
.guest-chat-attachments {
  position: relative !important;
  z-index: 110 !important;
  overflow: visible !important;
}


/* actual attachment popover */
.guest-chat-attachment-menu {
  position: absolute !important;

  left: 0 !important;
  bottom: calc(100% + 10px) !important;

  z-index: 9999 !important;

  visibility: visible;
  opacity: 1;
}


/* hidden means genuinely hidden */
.guest-chat-attachment-menu[hidden] {
  display: none !important;
}


/* conversation cannot clip the popover */
.guest-conversation-shell {
  overflow: visible !important;
}


/* keep scrolling/clipping only inside message area */
.guest-thread-wrap {
  overflow: hidden !important;
}


@media (max-width: 680px) {

  .guest-chat-attachment-menu {
    left: 0 !important;
    bottom: calc(100% + 8px) !important;

    width: 220px !important;
    max-width: calc(100vw - 24px) !important;
  }

}

/* EASYPRINT CHAT INLINE ATTACHMENTS V24
   =========================================================
   Selected attachments live inside the composer,
   above the message row.
========================================================= */


/* =========================================================
   COMPOSER
========================================================= */

.guest-chat-composer {
  position:
    relative !important;

  overflow:
    visible !important;

  background:
    rgba(255, 255, 255, 0.97) !important;
}


/* =========================================================
   FORM
========================================================= */

.guest-chat-form {
  position:
    relative !important;

  width:
    100% !important;

  overflow:
    visible !important;

  transition:
    padding-top 0.15s ease !important;
}


/*
 * When files exist, reserve an internal row above
 * the + / message / send controls.
 */
.guest-chat-form:has(
  .guest-chat-selected-files:not(:empty)
) {
  padding-top:
    62px !important;
}


/* =========================================================
   ATTACHMENT WRAPPER
========================================================= */

/*
 * Make the wrapper stop acting as the positioning
 * parent for the selected-file list.
 *
 * The form becomes the positioning parent instead.
 */
.guest-chat-attachments {
  position:
    static !important;

  overflow:
    visible !important;
}


/* =========================================================
   SELECTED FILE ROW
========================================================= */

.guest-chat-selected-files {
  position:
    absolute !important;

  top:
    0 !important;

  left:
    0 !important;

  right:
    0 !important;

  bottom:
    auto !important;

  z-index:
    5 !important;

  width:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  scrollbar-width:
    none !important;
}

.guest-chat-selected-files::-webkit-scrollbar {
  display:
    none !important;
}

.guest-chat-selected-files:empty,
.guest-chat-selected-files.is-empty {
  display:
    none !important;
}


/* =========================================================
   FILE CHIP
========================================================= */

.guest-chat-selected-files
.support-selected-file {
  position:
    relative !important;

  flex:
    0 0 auto !important;

  width:
    auto !important;

  min-width:
    135px !important;

  max-width:
    210px !important;

  min-height:
    50px !important;

  margin:
    0 !important;

  padding:
    8px 34px 8px 10px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(47, 157, 222, 0.13) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #f0f9fd 0%,
      #e8f6fc 100%
    ) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   FILE NAME / SIZE
========================================================= */

.guest-chat-selected-files
.support-selected-file-copy {
  min-width:
    0 !important;

  flex:
    1 1 auto !important;

  display:
    grid !important;

  gap:
    2px !important;
}

.guest-chat-selected-files
.support-selected-file-copy strong {
  display:
    block !important;

  max-width:
    150px !important;

  overflow:
    hidden !important;

  color:
    #245a7c !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}

.guest-chat-selected-files
.support-selected-file-copy small {
  color:
    #8095a3 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9px !important;

  line-height:
    1.2 !important;
}


/* =========================================================
   REMOVE X
========================================================= */

.guest-chat-selected-files
.support-remove-file {
  position:
    absolute !important;

  top:
    50% !important;

  right:
    7px !important;

  width:
    24px !important;

  min-width:
    24px !important;

  height:
    24px !important;

  min-height:
    24px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    rgba(255, 255, 255, 0.92) !important;

  color:
    #a95757 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    17px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;

  transform:
    translateY(-50%) !important;

  box-shadow:
    0 1px 4px
    rgba(24, 78, 131, 0.08) !important;
}


/* =========================================================
   KEEP ATTACHMENT ACTION MENU WORKING
========================================================= */

/*
 * Since .guest-chat-attachments is now position: static,
 * anchor the + popup relative to the whole form.
 */
.guest-chat-attachment-menu {
  position:
    absolute !important;

  left:
    0 !important;

  bottom:
    calc(100% + 8px) !important;

  z-index:
    9999 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .guest-chat-form:has(
    .guest-chat-selected-files:not(:empty)
  ) {
    padding-top:
      60px !important;
  }

  .guest-chat-selected-files {
    gap:
      6px !important;
  }

  .guest-chat-selected-files
  .support-selected-file {
    min-width:
      125px !important;

    max-width:
      185px !important;

    min-height:
      48px !important;

    padding:
      7px 31px 7px 9px !important;
  }

  .guest-chat-selected-files
  .support-selected-file-copy strong {
    max-width:
      125px !important;

    font-size:
      10.5px !important;
  }

}