.ticket-conversation-page {
            --tc-page-bg: var(--bodyBg, #f5f7fb);
            --tc-card-bg: var(--whiteColor, #ffffff);
            --tc-card-soft: #fbfdff;
            --tc-border: #dde5ef;
            --tc-border-strong: #d1dbe8;
            --tc-heading: #17233c;
            --tc-text: #42516a;
            --tc-muted: #77849a;
            --tc-primary: #1877d2;
            --tc-primary-soft: #f4f9ff;
            --tc-primary-border: #cfe2f6;
            --tc-success: #19914a;
            --tc-success-soft: #f5fcf7;
            --tc-success-border: #ccebd6;
            --tc-danger: #ef2344;
            --tc-warning: #f39a12;
            --tc-warning-soft: #fff9ef;
            --tc-warning-border: #ffd89b;
            --tc-line: #dce4ee;
            --tc-shadow: 0 4px 18px rgba(24, 39, 75, 0.07);
            --tc-shadow-hover: 0 8px 24px rgba(24, 39, 75, 0.11);
        }

        html[data-theme="dark"] .ticket-conversation-page,
        html.dark .ticket-conversation-page,
        body[data-theme="dark"] .ticket-conversation-page,
        body.dark .ticket-conversation-page,
        body.dark-mode .ticket-conversation-page,
        body.dark-theme .ticket-conversation-page,
        .dark-mode .ticket-conversation-page,
        .dark-theme .ticket-conversation-page {
            --tc-page-bg: #0f1622;
            --tc-card-bg: #171f2c;
            --tc-card-soft: #1b2534;
            --tc-border: #2b3748;
            --tc-border-strong: #354257;
            --tc-heading: #f4f7fb;
            --tc-text: #bac5d5;
            --tc-muted: #8d9aaf;
            --tc-primary: #55aaff;
            --tc-primary-soft: #17293c;
            --tc-primary-border: #294968;
            --tc-success: #4fd780;
            --tc-success-soft: #172d23;
            --tc-success-border: #2d5b41;
            --tc-danger: #ff526d;
            --tc-warning: #ffb643;
            --tc-warning-soft: #2b2419;
            --tc-warning-border: #5e4726;
            --tc-line: #2b3748;
            --tc-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
            --tc-shadow-hover: 0 8px 26px rgba(0, 0, 0, 0.35);
        }

        .ticket-conversation-page .main-content-container {
            color: var(--tc-text);
        }

        .ticket-conversation-shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 355px;
            gap: 24px;
            align-items: start;
        }

        .ticket-conversation-main,
        .ticket-conversation-sidebar {
            min-width: 0;
        }

        .ticket-status-alert {
            min-height: 58px;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 13px 18px;
            margin-bottom: 18px;
            background: var(--tc-warning-soft);
            border: 1px solid var(--tc-warning-border);
            border-radius: 11px;
            color: #6d3a14;
            font-size: 15px;
            box-shadow: 0 2px 8px rgba(243, 154, 18, 0.05);
        }

        .ticket-status-alert.show {
            display: flex;
        }

        .ticket-status-alert .material-symbols-outlined {
            color: var(--tc-warning);
            font-size: 25px;
        }

        html[data-theme="dark"] .ticket-status-alert,
        html.dark .ticket-status-alert,
        body.dark .ticket-status-alert,
        body.dark-mode .ticket-status-alert,
        body.dark-theme .ticket-status-alert,
        .dark-mode .ticket-status-alert,
        .dark-theme .ticket-status-alert {
            color: #ffd89c;
        }

        .conversation-card {
            background: var(--tc-card-bg) !important;
            border-color: var(--tc-border) !important;
            color: var(--tc-text);
            box-shadow: var(--tc-shadow);
        }

        .ticket-hero-card {
            padding: 28px 26px;
            margin-bottom: 20px;
            border-radius: 11px !important;
        }

        .ticket-hero-main {
            min-height: 66px;
        }

        .ticket-hero-icon {
            width: 62px;
            height: 62px;
            min-width: 62px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #2d8fe7, #176dce);
            border-radius: 10px;
            color: #ffffff;
            box-shadow: 0 9px 18px rgba(24, 119, 210, 0.24);
        }

        .ticket-hero-icon .material-symbols-outlined {
            font-size: 33px;
        }

        .ticket-hero-title {
            margin: 0 0 8px;
            color: var(--tc-heading);
            font-size: 27px;
            font-weight: 700;
            line-height: 1.15;
        }

        .ticket-hero-subject {
            color: var(--tc-text);
            font-size: 15px;
            line-height: 1.5;
        }

        .ticket-hero-subject strong {
            color: var(--tc-heading);
            font-weight: 700;
        }

        .ticket-hero-actions {
            flex-shrink: 0;
        }

        .ticket-top-action {
            min-height: 52px;
            padding: 12px 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
        }

        .ticket-top-reply {
            background: var(--tc-card-bg);
            border: 1px solid var(--tc-border-strong);
            color: var(--tc-heading);
        }

        .ticket-top-reply:hover {
            background: var(--tc-card-soft);
            border-color: var(--tc-primary);
            color: var(--tc-primary);
        }

        .ticket-top-status {
            min-width: 116px;
            border: 0 !important;
        }

        .conversation-stage {
            position: relative;
            padding: 2px 0 8px 40px;
        }

        .conversation-stage::before {
            width: 2px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 14px;
            content: '';
            background: var(--tc-line);
        }

        .conversation-timeline {
            position: relative;
            min-height: 230px;
        }

        .conversation-message-row {
            position: relative;
            margin-bottom: 18px;
        }

        .conversation-message-row:last-child {
            margin-bottom: 0;
        }

        .conversation-timeline-dot {
            width: 15px;
            height: 15px;
            position: absolute;
            top: 38px;
            left: -33px;
            z-index: 3;
            background: #d8dee8;
            border: 4px solid var(--tc-page-bg);
            border-radius: 50%;
            box-shadow: 0 0 0 1px var(--tc-line);
        }

        .conversation-message-row.incoming .conversation-timeline-dot {
            background: #d8dee8;
        }

        .conversation-message-row.outgoing .conversation-timeline-dot {
            background: var(--tc-success);
        }

        .conversation-message-card {
            position: relative;
            overflow: visible;
            background: var(--tc-primary-soft);
            border: 1px solid var(--tc-primary-border);
            border-radius: 10px;
            color: var(--tc-text);
            box-shadow: 0 2px 8px rgba(24, 39, 75, 0.035);
            transition: box-shadow .2s ease, transform .2s ease;
        }

        .conversation-message-card:hover {
            box-shadow: var(--tc-shadow-hover);
        }

        .conversation-message-card::before {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 37px;
            left: -11px;
            z-index: 1;
            content: '';
            background: var(--tc-primary-soft);
            border-left: 1px solid var(--tc-primary-border);
            border-bottom: 1px solid var(--tc-primary-border);
            transform: rotate(224deg)!important;
        }

        .conversation-message-row.outgoing {
            padding-left: 80px;
        }

        .conversation-message-row.outgoing .conversation-message-card {
            background: var(--tc-success-soft);
            border-color: var(--tc-success-border);
        }

        .conversation-message-row.outgoing .conversation-message-card::before {
            right: -11px;
            left: auto;
            background: var(--tc-success-soft);
            border: 0;
            border-top: 1px solid var(--tc-success-border);
            border-right: 1px solid var(--tc-success-border);
        }

        .conversation-message-header {
            min-height: 68px;
            padding: 14px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            border-bottom: 1px solid var(--tc-primary-border);
        }

        .conversation-message-row.outgoing .conversation-message-header {
            border-color: var(--tc-success-border);
        }

        .conversation-sender-wrap {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .conversation-avatar {
            width: 42px;
            height: 42px;
            min-width: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #2f91e4, #176dc8);
            border-radius: 50%;
            color: #ffffff;
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 3px 8px rgba(24, 119, 210, 0.18);
        }

        .conversation-message-row.outgoing .conversation-avatar {
            background: linear-gradient(145deg, #2caf63, #178342);
            box-shadow: 0 3px 8px rgba(25, 145, 74, 0.18);
        }

        .conversation-sender-name {
            overflow: hidden;
            color: var(--tc-heading);
            font-size: 15px;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .conversation-role-badge {
            padding: 5px 9px;
            display: inline-flex;
            align-items: center;
            background: transparent;
            border: 1px solid var(--tc-primary-border);
            border-radius: 5px;
            color: #0870ce;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
        }

        .conversation-message-row.outgoing .conversation-role-badge {
            border-color: var(--tc-success-border);
            color: var(--tc-success);
        }

        .conversation-message-date {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--tc-text);
            font-size: 13px;
            white-space: nowrap;
        }

        .conversation-message-date .material-symbols-outlined {
            font-size: 18px;
        }

        .conversation-message-body {
            padding: 20px 24px 22px;
            color: var(--tc-heading);
            font-size: 15px;
            line-height: 1.75;
            word-break: break-word;
        }

        .conversation-message-description p {
            margin-bottom: 12px;
        }

        .conversation-message-description > :last-child {
            margin-bottom: 0;
        }

        .conversation-reply-rating {
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 9px;
            color: var(--tc-muted);
            font-size: 12px;
        }

        .conversation-rating-stars {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .conversation-rating-stars .material-symbols-outlined {
            color: #9ba6b6;
            font-size: 22px;
            font-variation-settings: 'FILL' 0, 'wght' 300;
        }

        .conversation-attachments {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 16px;
        }

        .conversation-attachment {
            overflow: hidden;
            display: block;
            background: var(--tc-card-bg);
            border: 1px solid var(--tc-border);
            border-radius: 8px;
            text-decoration: none;
        }

        .conversation-attachment img {
            width: 100%;
            height: 98px;
            display: block;
            object-fit: cover;
        }

        .conversation-attachment-name {
            padding: 7px 9px;
            overflow: hidden;
            color: var(--tc-text);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .conversation-empty-state,
        .conversation-loading-state {
            min-height: 270px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 34px;
            background: var(--tc-card-bg);
            border: 1px solid var(--tc-border);
            border-radius: 10px;
            color: var(--tc-text);
            text-align: center;
            box-shadow: var(--tc-shadow);
        }

        .conversation-state-icon {
            font-size: 46px;
        }

        .conversation-heading {
            color: var(--tc-heading);
        }

        .conversation-muted {
            color: var(--tc-muted);
        }

        .ticket-reply-card {
            display: none;
            margin: 20px 0 2px;
            border-radius: 10px !important;
        }

        .ticket-reply-card.show {
            display: block;
        }

        .ticket-reply-header {
            padding: 17px 20px;
            border-bottom: 1px solid var(--tc-border);
        }

        .ticket-reply-body {
            padding: 20px;
        }

        .ticket-readonly-box {
            display: none;
            align-items: center;
            gap: 10px;
            padding: 15px 17px;
            background: rgba(239, 35, 68, .08);
            border: 1px solid rgba(239, 35, 68, .23);
            border-radius: 9px;
            color: var(--tc-danger);
        }

        .ticket-readonly-box.show {
            display: flex;
        }

        .ticket-conversation-page .form-control,
        .ticket-conversation-page .form-select {
            min-height: 47px;
            background: var(--tc-card-soft);
            border-color: var(--tc-border);
            color: var(--tc-heading);
        }

        .ticket-conversation-page .form-control::placeholder {
            color: var(--tc-muted);
        }

        .ticket-conversation-page .form-control:focus,
        .ticket-conversation-page .form-select:focus {
            background: var(--tc-card-bg);
            border-color: var(--tc-primary);
            box-shadow: 0 0 0 3px rgba(24, 119, 210, .12);
            color: var(--tc-heading);
        }

        .ticket-reply-editor-wrap {
            overflow: hidden;
            background: var(--tc-card-soft);
            border: 1px solid var(--tc-border);
            border-radius: 9px;
        }

        .ticket-reply-toolbar {
            padding: 9px 12px;
            background: var(--tc-card-soft);
            border: 0;
            border-bottom: 1px solid var(--tc-border);
        }

        .ticket-reply-editor {
            min-height: 165px;
            background: var(--tc-card-bg);
            color: var(--tc-heading);
        }

        .ticket-reply-editor.ql-container {
            border: 0 !important;
            font-size: 15px;
        }

        .ticket-reply-editor .ql-editor {
            min-height: 165px;
            line-height: 1.7;
        }

        .ticket-reply-editor .ql-editor.ql-blank::before {
            color: var(--tc-muted);
            font-style: normal;
        }

        html[data-theme="dark"] .ticket-conversation-page .ql-stroke,
        html.dark .ticket-conversation-page .ql-stroke,
        body.dark .ticket-conversation-page .ql-stroke,
        body.dark-mode .ticket-conversation-page .ql-stroke,
        body.dark-theme .ticket-conversation-page .ql-stroke,
        .dark-mode .ticket-conversation-page .ql-stroke,
        .dark-theme .ticket-conversation-page .ql-stroke {
            stroke: var(--tc-text);
        }

        html[data-theme="dark"] .ticket-conversation-page .ql-fill,
        html.dark .ticket-conversation-page .ql-fill,
        body.dark .ticket-conversation-page .ql-fill,
        body.dark-mode .ticket-conversation-page .ql-fill,
        body.dark-theme .ticket-conversation-page .ql-fill,
        .dark-mode .ticket-conversation-page .ql-fill,
        .dark-theme .ticket-conversation-page .ql-fill {
            fill: var(--tc-text);
        }

        .ticket-reply-submit {
            min-width: 150px;
        }

        .ticket-reply-submit .button-loader {
            display: none;
        }

        .ticket-reply-submit.loading .button-text {
            display: none;
        }

        .ticket-reply-submit.loading .button-loader {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .ticket-side-card {
            margin-bottom: 16px;
            overflow: hidden;
            border-radius: 10px !important;
        }

        .ticket-side-header {
            min-height: 61px;
            padding: 15px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid var(--tc-border);
        }

        .ticket-side-title {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--tc-heading);
            font-size: 17px;
            font-weight: 700;
        }

        .ticket-side-title .material-symbols-outlined {
            font-size: 21px;
        }

        .ticket-side-chevron {
            color: var(--tc-heading);
            font-size: 20px;
        }

        .ticket-info-list {
            padding: 0 18px;
        }

        .ticket-info-item {
            padding: 14px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid var(--tc-border);
        }

        .ticket-info-item:last-child {
            border-bottom: 0;
        }

        .ticket-info-icon {
            width: 25px;
            min-width: 25px;
            padding-top: 1px;
            color: var(--tc-heading);
        }

        .ticket-info-icon .material-symbols-outlined {
            font-size: 20px;
        }

        .ticket-info-label {
            margin-bottom: 4px;
            color: var(--tc-heading);
            font-size: 13px;
            font-weight: 700;
        }

        .ticket-info-value {
            color: var(--tc-text);
            font-size: 14px;
            line-height: 1.55;
            word-break: break-word;
        }

        .ticket-info-badges {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
        }

        .ticket-meta-badge {
            padding: 5px 9px;
            display: inline-flex;
            align-items: center;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 600;
        }

        .ticket-owner-badge {
            margin-left: 7px;
            padding: 3px 8px;
            display: inline-flex;
            align-items: center;
            background: #43ad59;
            border-radius: 5px;
            color: #ffffff;
            font-size: 11px;
            font-weight: 600;
        }

        .ticket-side-actions {
            padding: 0 18px 16px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .ticket-side-actions .btn {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 6px;
        }

        .ticket-side-reply {
            background: #15913f;
            border-color: #15913f;
            color: #ffffff;
        }

        .ticket-side-reply:hover {
            background: #117c36;
            border-color: #117c36;
            color: #ffffff;
        }

        .ticket-side-status {
            background: var(--tc-danger);
            border-color: var(--tc-danger);
            color: #ffffff;
        }

        .ticket-account-row {
            padding: 15px 18px;
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--tc-text);
            font-size: 14px;
        }

        .ticket-account-row .material-symbols-outlined {
            color: var(--tc-heading);
            font-size: 20px;
        }

        .ticket-cc-form {
            padding: 14px 18px 17px;
        }

        .ticket-cc-group {
            display: flex;
        }

        .ticket-cc-group .form-control {
            min-width: 0;
            border-radius: 7px 0 0 7px;
        }

        .ticket-cc-group .btn {
            min-width: 78px;
            border: 1px solid var(--tc-border);
            border-left: 0;
            border-radius: 0 7px 7px 0;
            background: var(--tc-card-bg);
            color: var(--tc-heading);
        }

        .ticket-support-list {
            padding: 0 18px 8px;
        }

        .ticket-support-link {
            min-height: 39px;
            display: flex;
            align-items: center;
            gap: 11px;
            border-bottom: 1px solid var(--tc-border);
            color: var(--tc-text);
            font-size: 14px;
            text-decoration: none;
        }

        .ticket-support-link:last-child {
            border-bottom: 0;
        }

        .ticket-support-link:hover {
            color: var(--tc-primary);
        }

        .ticket-support-link .material-symbols-outlined {
            color: var(--tc-heading);
            font-size: 19px;
        }

        .ticket-hidden-refresh {
            display: none !important;
        }

        @media (max-width: 1199px) {
            .ticket-conversation-shell {
                grid-template-columns: minmax(0, 1fr) 320px;
                gap: 18px;
            }
        }

        @media (max-width: 991px) {
            .ticket-conversation-shell {
                grid-template-columns: 1fr;
            }

            .ticket-conversation-sidebar {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
            }

            .ticket-side-card {
                margin-bottom: 0;
            }
        }

        @media (max-width: 767px) {
            .ticket-hero-card {
                padding: 20px;
            }

            .ticket-hero-main,
            .ticket-hero-main > div:first-child {
                align-items: flex-start !important;
            }

            .ticket-hero-main {
                flex-direction: column;
            }

            .ticket-hero-actions {
                width: 100%;
            }

            .ticket-hero-actions .ticket-top-action {
                flex: 1;
            }

            .ticket-hero-title {
                font-size: 22px;
            }

            .ticket-hero-icon {
                width: 52px;
                height: 52px;
                min-width: 52px;
            }

            .conversation-stage {
                padding-left: 30px;
            }

            .conversation-stage::before {
                left: 9px;
            }

            .conversation-timeline-dot {
                left: -28px;
            }

            .conversation-message-row.outgoing {
                padding-left: 0;
            }

            .conversation-message-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 14px 16px;
            }

            .conversation-message-date {
                padding-left: 55px;
                white-space: normal;
            }

            .conversation-message-body {
                padding: 17px 18px 19px;
            }

            .ticket-conversation-sidebar {
                grid-template-columns: 1fr;
            }

            .ticket-reply-actions {
                width: 100%;
            }

            .ticket-reply-actions .btn {
                flex: 1;
            }
        }

        @media (max-width: 480px) {
            .ticket-status-alert {
                justify-content: flex-start;
                font-size: 13px;
            }

            .ticket-hero-main > div:first-child {
                flex-direction: column;
            }

            .ticket-hero-actions {
                flex-direction: column;
            }

            .ticket-hero-actions .ticket-top-action {
                width: 100%;
            }

            .conversation-sender-line {
                align-items: flex-start !important;
                flex-direction: column;
                gap: 5px !important;
            }

            .conversation-message-date {
                padding-left: 0;
            }

            .ticket-side-actions {
                grid-template-columns: 1fr;
            }
        }
        /*
        |--------------------------------------------------------------------------
        | Requested Conversation Layout Updates
        |--------------------------------------------------------------------------
        */

        .ticket-conversation-page .main-content-container {
            padding-top: 14px;
        }

        .conversation-stage {
            padding: 2px 0 8px;
        }

        .conversation-stage::before,
        .conversation-timeline-dot {
            display: none !important;
        }

        .conversation-message-row,
        .conversation-message-row.outgoing {
            width: 100%;
            padding-left: 0;
        }

        .conversation-message-card {
            width: 100%;
        }

        .ticket-reply-card,
        .ticket-reply-card.show {
            display: block;
        }

        .ticket-reply-file-help {
            display: block;
            margin-top: 7px;
            color: var(--tc-muted);
            font-size: 12px;
        }


        .ticket-reply-image-preview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
            gap: 12px;
            margin-top: 14px;
        }

        .ticket-reply-image-item {
            position: relative;
            overflow: hidden;
            background: var(--tc-card-bg);
            border: 1px solid var(--tc-border);
            border-radius: 9px;
        }

        .ticket-reply-image-item img {
            width: 100%;
            height: 105px;
            display: block;
            object-fit: cover;
        }

        .ticket-reply-image-name {
            padding: 7px 9px;
            overflow: hidden;
            color: var(--tc-text);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ticket-reply-image-remove {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 7px;
            right: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: rgba(15, 23, 42, .82);
            border: 0;
            border-radius: 50%;
            color: #ffffff;
        }

        .ticket-reply-image-remove .material-symbols-outlined {
            font-size: 18px;
        }

        .ticket-side-status:disabled {
            cursor: not-allowed;
            opacity: .72;
        }

        @media (max-width: 767px) {
            .conversation-stage {
                padding-left: 0;
            }
        }


        /*
        |--------------------------------------------------------------------------
        | Final Conversation Page Layout
        |--------------------------------------------------------------------------
        */

        .ticket-conversation-body #header-area,
        .ticket-conversation-body .header-area,
        .ticket-conversation-body .top-header-area,
        .ticket-conversation-body .topbar-area,
        .ticket-conversation-body .top-bar,
        .ticket-conversation-body .navbar-area,
        .ticket-conversation-body .page-title-area,
        .ticket-conversation-body .breadcrumb-area {
            display: none !important;
        }

        .ticket-conversation-body .main-content {
            padding-top: 0 !important;
        }

        .ticket-conversation-body .main-content-container {
            margin-top: 0 !important;
            padding-top: 10px !important;
        }

        .ticket-conversation-shell,
        .ticket-hero-card {
            margin-top: 0 !important;
        }

        .conversation-stage {
            width: 100%;
            padding: 0 0 8px !important;
        }

        .conversation-stage::before,
        .conversation-timeline-dot {
            display: none !important;
            content: none !important;
        }

        .conversation-timeline,
        .conversation-message-row,
        .conversation-message-row.incoming,
        .conversation-message-row.outgoing,
        .conversation-message-card {
            width: 100% !important;
            max-width: none !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .conversation-message-row.incoming .conversation-message-card::before {
            left: -11px !important;
            right: auto !important;
        }

        .conversation-message-row.outgoing .conversation-message-card::before {
            left: auto !important;
            right: -11px !important;
        }

        .ticket-reply-card,
        .ticket-reply-card.show {
            display: block !important;
            width: 100%;
            margin-top: 18px;
        }


    .ticket-conversation-page .ticket-client-line {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .ticket-conversation-page .ticket-client-avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
        object-fit: cover;
        border-radius: 50%;
        background: var(--tc-card-soft);
        border: 2px solid var(--tc-card-bg);
        box-shadow: 0 3px 10px rgba(24, 39, 75, .12);
    }

    .ticket-conversation-page .ticket-client-primary {
        color: var(--tc-heading);
        font-size: 14px;
        font-weight: 700;
        word-break: break-word;
    }

    .ticket-conversation-page .ticket-client-secondary {
        margin-top: 2px;
        color: var(--tc-muted);
        font-size: 12px;
        word-break: break-word;
    }

    .ticket-conversation-page .ticket-side-full {
        grid-column: 1 / -1;
    }

    .ticket-conversation-page .ticket-description-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        color: var(--tc-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .45px;
    }

    .ticket-conversation-page .conversation-original-card {
        background: var(--tc-card-bg);
        border-color: var(--tc-border-strong);
    }

    .ticket-conversation-page .conversation-original-card::before {
        background: var(--tc-card-bg);
        border-left-color: var(--tc-border-strong);
        border-bottom-color: var(--tc-border-strong);
    }

    .ticket-conversation-page .conversation-original-card .conversation-message-header {
        border-color: var(--tc-border);
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-card {
        margin-left: 70px;
    }

    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-card {
        margin-right: 70px;
    }

    .ticket-conversation-page .ticket-reply-title {
        min-height: 47px;
    }

    .ticket-conversation-page .ticket-complete-button {
        background: #ff0b0b;
        border-color: #ff0b0b;
        color: #fff;
    }

    .ticket-conversation-page .ticket-complete-button:hover {
        filter: brightness(.94);
        color: #fff;
    }

    .ticket-conversation-page .ticket-complete-button:disabled {
        cursor: not-allowed;
        opacity: .72;
    }

    .ticket-conversation-page .ticket-page-error {
        min-height: 300px;
    }

    .ticket-conversation-page .conversation-message-description {
        white-space: normal;
    }

    .ticket-conversation-page .conversation-message-description p {
        white-space: pre-wrap;
        word-break: break-word;
    }

    @media (max-width: 767px) {
        .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-card,
        .ticket-conversation-page .conversation-message-row.incoming .conversation-message-card {
            margin-left: 0;
            margin-right: 0;
        }
    }





    /*
    |--------------------------------------------------------------------------
    | Full-width chat cards + sender content alignment
    |--------------------------------------------------------------------------
    | Card dono taraf same full width rahega.
    | Client/ASTAR ka content left aur ESTAR ka content right aligned rahega.
    */

    .ticket-conversation-page .conversation-message-row,
    .ticket-conversation-page .conversation-message-row.incoming,
    .ticket-conversation-page .conversation-message-row.outgoing {
        width: 100% !important;
        display: block !important;
        padding: 0 12px !important;
        margin: 0 0 18px !important;
    }

    .ticket-conversation-page .conversation-message-row .conversation-message-card,
    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-card,
    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Client / ASTAR: content left side */
    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-header {
        flex-direction: row !important;
    }

    .ticket-conversation-page .conversation-message-row.incoming .conversation-sender-wrap {
        flex-direction: row !important;
        text-align: left;
    }

    .ticket-conversation-page .conversation-message-row.incoming .conversation-sender-line {
        justify-content: flex-start !important;
    }

    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-body,
    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-description {
        text-align: left !important;
    }

    .ticket-conversation-page .conversation-message-row.incoming .ticket-description-label {
        justify-content: flex-start !important;
    }

    .ticket-conversation-page .conversation-message-row.incoming .conversation-attachments {
        justify-content: flex-start;
    }

    /* ESTAR / Owner: avatar, sender name and message content right side */
    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-header {
        flex-direction: row-reverse !important;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-sender-wrap {
        min-width: 0;
        flex-direction: row-reverse !important;
        text-align: right;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-sender-line {
        justify-content: flex-end !important;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-date {
        justify-content: flex-start;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-body,
    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-description {
        text-align: right !important;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .ticket-description-label {
        width: 100%;
        justify-content: flex-end !important;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-attachments {
        grid-template-columns: repeat(auto-fill, minmax(120px, 165px));
        justify-content: end;
    }

    /* Bubble pointer: client left, ESTAR right */
    .ticket-conversation-page .conversation-message-row.incoming .conversation-message-card::before {
        left: 1181px !important;
        right: auto !important;
    }

    .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-card::before {
        left: auto !important;
        right: 1181px !important;
    }

    /* Quill formatted message output */
    .ticket-conversation-page .ticket-rich-message.ql-editor {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: normal !important;
    }

    .ticket-conversation-page .ticket-rich-message > :first-child {
        margin-top: 0 !important;
    }

    .ticket-conversation-page .ticket-rich-message > :last-child {
        margin-bottom: 0 !important;
    }

    .ticket-conversation-page .ticket-rich-message p,
    .ticket-conversation-page .ticket-rich-message ul,
    .ticket-conversation-page .ticket-rich-message ol,
    .ticket-conversation-page .ticket-rich-message blockquote,
    .ticket-conversation-page .ticket-rich-message pre {
        margin-bottom: 10px;
    }

    .ticket-conversation-page .ticket-rich-message a {
        color: var(--tc-primary);
        text-decoration: underline;
        word-break: break-all;
    }

    /* Lists readable rahengi, alignment sender side ke according rahega */
    .ticket-conversation-page .conversation-message-row.outgoing .ticket-rich-message ul,
    .ticket-conversation-page .conversation-message-row.outgoing .ticket-rich-message ol {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        text-align: left;
    }

    @media (max-width: 767px) {
        .ticket-conversation-page .conversation-message-row,
        .ticket-conversation-page .conversation-message-row.incoming,
        .ticket-conversation-page .conversation-message-row.outgoing {
            padding: 0 9px !important;
        }

        .ticket-conversation-page .conversation-message-header,
        .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-header {
            gap: 10px;
        }
    }

    @media (max-width: 480px) {
        .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-header,
        .ticket-conversation-page .conversation-message-row.incoming .conversation-message-header {
            align-items: flex-start;
        }

        .ticket-conversation-page .conversation-message-row.outgoing .conversation-message-date {
            align-self: flex-start;
            padding-left: 0;
        }
    }

    /* Client Message - Green */
.ticket-conversation-page
.conversation-message-row.incoming
.conversation-message-card {
    background: var(--tc-success-soft) !important;
    border-color: var(--tc-success-border) !important;
}

.ticket-conversation-page
.conversation-message-row.incoming
.conversation-message-card::before {
    background: var(--tc-success-soft) !important;
    border-left-color: var(--tc-success-border) !important;
    border-bottom-color: var(--tc-success-border) !important;
}

.ticket-conversation-page
.conversation-message-row.incoming
.conversation-message-header {
    border-bottom-color: var(--tc-success-border) !important;
}

.ticket-conversation-page
.conversation-message-row.incoming
.conversation-role-badge {
    color: var(--tc-success) !important;
    border-color: var(--tc-success-border) !important;
}


/* EStar Message - Blue */
.ticket-conversation-page
.conversation-message-row.outgoing
.conversation-message-card {
    background: var(--tc-primary-soft) !important;
    border-color: var(--tc-primary-border) !important;
}

.ticket-conversation-page
.conversation-message-row.outgoing
.conversation-message-card::before {
    background: var(--tc-primary-soft) !important;
    border-top-color: var(--tc-primary-border) !important;
    border-right-color: var(--tc-primary-border) !important;
}

.ticket-conversation-page
.conversation-message-row.outgoing
.conversation-message-header {
    border-bottom-color: var(--tc-primary-border) !important;
}

.ticket-conversation-page
.conversation-message-row.outgoing
.conversation-role-badge {
    color: var(--tc-primary) !important;
    border-color: var(--tc-primary-border) !important;
}