:root{
	--radius: var(--rad,4px);
}
.page-template-page-ticket-detail .dashboard-main {
/* 	padding: 0; */
	--m-off: var(--margin-offset-sidebar);
	padding: var(--m-off) var(--m-off) var(--m-off) 0;
	overflow: clip;
/* 	height: calc(var(--vh,100svh) - var(--m-off) * 2); */
}
.page-template-page-ticket-detail .dashboard-main .dashboard-main-wrapper{
	max-width: 100%;
}
.fs-custom-portal.ticket-detail-wrapper{
	background-color: var(--white-color);
	border: 1px solid var(--border-color);
	border-radius: var(--rad);
}
.ticket-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.ticket-name {
	font-size: 20px;
	font-weight: 500;
	margin: 0;
	color: var(--text-color);
}

.ticket-id {
	color: color-mix(in srgb, currentcolor 30%, transparent);
	font-weight: 400;
	margin-top: 6px;
	font-size: 13px;
	display: block;
}

/* The header heading is now the id on its own - the 6px above it existed to
   space it under the ticket title, which no longer renders. Scoped rather than
   removed from .ticket-id: this stylesheet loads site-wide, and the id is still
   stacked under a title on the ticket cards elsewhere (dashboards, the customer
   detail side panel). */
.ticket-header .ticket-name .ticket-id {
	margin-top: 0;
}

/* Buttons */
.va-self-assign-btn,
.ticket-status-change {
	background-color: var(--primary-color);
	color: #ffffff;
	border: none;
	padding: 6px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor: pointer;
	transition: 0.2s;
	white-space: nowrap;
}
.va-self-assign-btn:hover,
.ticket-status-change:hover {
	background-color: color-mix(in srgb, var(--primary-color) 90%, #111111);
}
.va-self-assign-btn.is-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	opacity: 0.85;
	cursor: progress;
	pointer-events: none;
}
.va-self-assign-btn .tv-btn-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	animation: tv-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

/* Assigned VA Info */
.assigned-va-info {
	display: flex;
	align-items: center;
	gap: 2px 6px;
	font-size: 14px;
	margin-left: auto;
}

.assigned-va-label {
	color: var(--text-gray);
	font-weight: 500;
}

.assigned-va-label.unassigned {
	color: #f59e0b;
	background: #fffbeb;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
}

.assigned-va-name {
	line-height: 1;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 13px;
	color: var(--secondary-color);
	border: 1px solid 
		color-mix(in srgb, var(--secondary-color) 40%, var(--white-color));
	background-color: 
		color-mix(in srgb, var(--secondary-color) 10%, var(--white-color));
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.assigned-va-name .name {
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ticket owner (customer) - shown to staff in the popup header. */
.ticket-customer-info {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.ticket-customer-label {
	color: var(--text-gray);
	font-weight: 500;
}

.ticket-customer-name {
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 13px;
	color: var(--primary-color);
	border: 1px solid 
		color-mix(in srgb, var(--primary-color) 40%, transparent);
	background-color: 
		color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.remove-agent-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 5px;
	border: none;
	border-radius: 50%;
	background: var(--light-gary);
	color: var(--primary-color);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	margin-right: -6px;
	border: 1px solid var(--border-color);
}

.remove-agent-btn:hover {
	background: var(--primary-color);
	color: #ffffff;
}

/* Box Wrappers */
.ticket-detail-wrapper .box-wrapper-item {
	background: none;
	border: none;
	border-radius: 0px;
	padding: 0;
	box-shadow: none;
	margin-bottom: 20px;
}

.ticket-detail-wrapper .ticket-description {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 15px;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--border-color);
}

/* Commission (Form #7) ticket body - a labelled block per answer so the
   customer's form submission reads as a proper Q&A rather than a
   run-together line dump. */
/* Form-entry ticket bodies - the commission form (#7) and the general enquiry
   form (#6), whose whole submission IS the request. The tv-commission-* names
   are historical and kept because they are baked into the stored content of
   every ticket created before the builder was shared; tv-entry-* is what
   tv_gf_entry_to_ticket_body() writes now. Same styling either way. */
.ticket-detail-wrapper .tv-commission-body,
.ticket-detail-wrapper .tv-entry-body { display: flex; flex-direction: column; gap: 14px; }
.tv-commission-field,
.tv-entry-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--white-color, #fff);
	border: 1px solid var(--border-color);
	border-radius: var(--rad, 8px);
}
.tv-commission-field__label,
.tv-entry-field__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-gray);
}
.tv-commission-field__value,
.tv-entry-field__value {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color);
	word-break: break-word;
}
.tv-commission-field__value a,
.tv-entry-field__value a { color: var(--primary-color); text-decoration: underline; }

/* Assigned assets panel - shows every asset post + assetstype term the
   current ticket is tied to. Last block in the description column. */
.ticket-assigned-assets {
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}
.ticket-assigned-assets__title {
	margin: 0 0 8px; font-size: 11px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--text-color);
}
.ticket-assigned-assets__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px;
}
.ticket-assigned-assets__item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	background: color-mix(in srgb, var(--primary-color) 6%, var(--white-color));
	border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
	font-size: 11px; color: var(--text-color);
}
.ticket-assigned-assets__item a {
	color: var(--primary-color); text-decoration: none; font-weight: 500;
}
.ticket-assigned-assets__item a:hover { text-decoration: underline; }
.ticket-assigned-assets__kind {
	font-size: 10px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--text-gray);
	padding: 1px 6px; border-radius: 4px;
	background: color-mix(in srgb, var(--text-gray) 12%, var(--white-color));
}
.ticket-detail-wrapper .reference-images{
	margin-bottom: 20px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--border-color);
}
.ticket-detail-wrapper .title h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-gray);
	margin-bottom: 12px;
}

/* Lists and Info */
.additional-info ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.additional-info li {
	background: var(--light-gary);
	border: 1px solid var(--border-color);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	color: var(--text-gray);
}


.reference-images h3 {
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 12px;
	font-weight: 500;
}
.reference-image-list {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
	gap: 2px;
	font-size: 14px;
}
.reference-image-list a {
	word-break: break-word;
}
.fs-custom-portal .reference-image-list img {
	max-width: 100% !important;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border-color);
	object-fit: contain;
	margin: 0 !important;
}

/* Conversation Thread */
.ticket-replies {
	padding-top: 16px;
}
.ticket-replies > h3 {
	margin-top: 0;
	margin-bottom: 24px;
	font-size: 20px;
}

.reply-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
	flex-direction: column;
	align-items: flex-start;
}

.ticket-detail-wrapper .author-name {
	font-weight: 500;
	color: var(--text-color);
	font-size: 16px;
}

.reply-time {
	color: var(--text-gray);
}

.reply-body {
	padding-left: 50px;
}

.reply-item {
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid var(--border-color);
}
.reply-body p {
	margin: 0;
	color: var(--text-gray);
}
.reply-head {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.reply-head .author-name {
	margin-right: auto;
}
/* .va-badge {
background: var(--secondary-color);
color: white;
padding: 2px 6px;
font-size: 10px;
border-radius: 4px;
margin-left: 4px;
text-transform: uppercase;
} */
.va-badge{
	opacity: 0.5;
}
.reply-business-name {
	font-size: 12px;
	color: var(--text-gray);
	opacity: 0.8;
	line-height: 1.2;
}
.latest-assets-wrapper {
	position: relative;
	display: inline-block;
	margin-top: 10px;
}

.latest-assets-wrapper img {
	border-radius: var(--radius);
	display: block;
}

.latest-assets {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--primary-color);
	color: white;
	font-size: 13px;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 500;
}

/* Asset upload preview in the conversation - render like the dashboard /
asset-single .assets-lib-card, constrained so it doesn't span the thread. */
.asset-upload-log .assets-lib-card {
	max-width: 320px;
	margin-top: 10px;
}
/* Badge sits top-left so it doesn't collide with the download control (top-right). */
.asset-upload-log .assets-lib-media .latest-assets {
	top: 8px;
	left: 8px;
	right: auto;
	z-index: 2;
}



/* WP-editor CSS */
.reply-form-wrapper {
	margin-bottom: 20px;
	text-align: right;
}

.reply-form-wrapper button.btn {
	margin-top: 10px;
}
.reply-list{
	margin-top: 20px;
}
div#wp-reply_message-editor-tools {
	display: none;
}

#mceu_20 {
	display: none;
}

iframe#reply_message_ifr {
	height: auto !important;
}

div#mceu_19 {
	border-radius: 0 !important;
	overflow: clip;
	background-color: transparent;
}

div#mceu_15 {
	background-color: #ffffff !important;
}

div#mceu_16 {
	background-color: transparent;
	box-shadow: none;
}

div#mceu_15:before {
	display: none;
}

div#mceu_15-body {
	border: 0;
}

div#mceu_14-body {
	border: 0 !important;
}

div#wp-reply_message-editor-container {
	border-radius: 4px;
	overflow: clip;
}

.reply-form-wrapper{
	display: none;
}
.reply-overlay {
	background-color: #ffffff;
	color: #00000080;
	padding: 12px 20px;
	border-radius: 6px;
	border: 1px solid #cccccc;
	cursor: pointer;
}

.form-buttons button[name="cancel_reply"] {
	background-color: transparent;
	border: 0;
	padding: 0;
	color: var(--text-colror);
	margin-right: 20px;
	cursor: pointer;
}

.form-buttons button[name="cancel_reply"]:hover {
	color: var(--primary-color);
}
/* End WP Editor CSS */

/* Ticket reply form (detail page + popup) */
.ticket-reply-box {
	margin-bottom: 24px;
}
.ticket-reply-input {
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 12px 14px;
	font: inherit;
	color: var(--text-color);
	background: var(--white-color);
	resize: vertical;
	min-height: 110px;
}
.ticket-reply-input:focus {
	outline: none;
	border-color: var(--primary-color);
}
.ticket-reply-box .form-buttons {
	margin-top: 10px;
	text-align: right;
}
.ticket-detail-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--text-gray);
}



.ticket-reply-box:not(.open-comment) form {
	display: none;
}

.ticket-reply-box:not(.open-comment):after {
	content: 'Add a Comment';
	font-size: 14px;
	opacity: 0.8;
}

.ticket-reply-box:not(.open-comment) {
	border: 1px solid var(--border-color);
	padding: 12px 14px;
	border-radius: var(--rad);
	cursor: text;
}


.ticket-asset a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid var(--blue);
	background-color: color-mix(in srgb, var(--blue) 10%, transparent);
	color: var(--blue);
	font-size: 12px;
	text-decoration: none;
	line-height: 1;
	font-weight: 600;
}

.ticket-asset a:hover{
	background-color: color-mix(in srgb, var(--blue) 30%, transparent);
}

/* .reply-body:has(.asset-upload-log) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
}
.reply-body:has(.asset-upload-log) a{
display: block;
} */
.reply-body .assets-lib-card{
	gap: 10px;
}


/* Ticket Layout */
.fs-custom-portal.ticket-detail-wrapper {
	width: 100%;
	height: 100%;
	overflow: clip;
}
.ticket-closed-banner ~ .ticket-detail-layout{
	--status-banner: 48px;
}
.ticket-toolbar ~ .ticket-detail-layout {
    --toolbar-height: 40px;
}
.ticket-detail-layout {
	display: grid;
	grid-template-areas:
		'ticket comments'
		'detail comments';
	gap: 0;
	grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
	--business-height: 116px;
	--remaining-height: 64px;
	--extra-height: calc(var(--toolbar-height, 0px) + var(--status-banner, 0px));
	grid-template-rows: calc(100% - var(--business-height) - var(--extra-height)) var(--business-height);
	height: 100%;
	transition: 0.3s;
}
.ticket-detail-layout.ticket-detail-layout--full{
	--remaining-height: 78px;
}
.ticket-detail-layout.view-bussiness{
	--business-height: calc(var(--vh,100svh) - var(--m-off) * 2 - var(--remaining-height) - var(--extra-height));
}
.ticket-detail-layout.view-bussiness .ticket-detail-main.scrollbar,
.ticket-detail-layout:not(.view-bussiness) .ticket-detail-customer .ticket-detail-customer__wrap{
	overflow: clip;
}
.ticket-detail-layout .toggle-button {
	font-size: 12px;
	line-height: 1;
	background-color: var(--white-color);
	border: 1px solid var(--border-color);
	border-radius: 100px;
	padding: 5px 10px;
	color: var(--text-color);
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 7px -5px var(--text-color);
	z-index: 2;
}

.ticket-detail-layout .ticket-detail-customer__wrap,
.ticket-detail-layout > * {
	padding: 20px;
}
.ticket-detail-layout .ticket-detail-customer__wrap{
	height: 100%;
}
.ticket-detail-customer__wrap .contact-information{
	display: grid;
	grid-template-columns: 100%;
	gap: 20px;
	margin-bottom: 20px;
}
.ticket-detail-customer__wrap .contact-information .section-card.map-section{
	padding: 0;
	overflow: hidden;
}
.ticket-detail-customer__wrap .contact-information .section-card.map-section iframe{
	display: block;
    width: 100%;
    height: 260px;
    border: 0;
}
.ticket-detail-customer__wrap .contact-information .section-card.map-section p{
	margin: 0;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-gray);
    border-top: 1px solid var(--border-color);
}
.ticket-detail-customer{
	padding: 0 !important;
	position: relative;
}

.ticket-detail-layout .ticket-detail-main {
	grid-area: ticket;	
	border-bottom: 1px solid var(--border-color);
	position: relative;
}
.ticket-closed-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
	color: var(--text-color);
	font-size: 14px;
	border-top-left-radius: var(--rad);
	border-top-right-radius: var(--rad);
}
.ticket-closed-banner__msg {
	font-weight: 500;
}
.ticket-closed-banner__btn {
	margin: 0;
	padding: 6px 14px;
	font-size: 13px;
}
.ticket-status-closed-badge {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    border: none;
    padding: 4px 10px;
    border-radius: 100px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    cursor: default;
    white-space: nowrap;
    position: absolute;
    top: 16px;
    right: 16px;
}
.ticket-detail-layout .ticket-detail-customer {
	grid-area: detail;
	box-shadow: 0 -10px 46px var(--white-color);
	z-index: 1;
}

.ticket-detail-layout .ticket-detail-reply {
	grid-area: comments;
	border-left: 1px solid var(--border-color);
}

/* Full-page (staff-only) ticket detail: 3 columns -
col 1: ticket + customer (stacked) | col 2: comments | col 3: asset tree. */
.ticket-detail-layout--full {
	grid-template-areas:
		'ticket comments assets'
		'detail comments assets';
	grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr);
}
.ticket-detail-layout--full .ticket-detail-assets {
	grid-area: assets;
	border-left: 1px solid var(--border-color);
	overflow-y: auto;
}
/* General enquiry tickets carry no asset at all, so the tree column is not
   rendered (template-parts/ticket-detail.php). The grid has to give the track
   back as well - a named area with nothing in it still reserves its 2fr, which
   would leave a blank third of the screen where the tree used to be. Falls back
   to the same two-column split the compact layout uses. */
.ticket-detail-layout--full.ticket-detail-layout--no-assets {
	grid-template-areas:
		'ticket comments'
		'detail comments';
	grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
}
.asset-tree-business {
	padding-top:16px;
	margin: 0 0 16px;
	font-size: 20px;
	color: var(--text-color);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
}
.asset-tree-empty {
	color: var(--text-gray);
	font-size: 13px;
}
.asset-tree {
	font-size: 13px;
}
.asset-tree-folder > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--text-color);
	list-style: none;
	user-select: none;
}
.asset-tree-folder > summary::-webkit-details-marker {
	display: none;
}
.asset-tree-folder > summary::marker {
	content: '';
}
.asset-tree-folder > summary:hover {
	background: color-mix(in srgb, var(--border-color) 30%, var(--white-color));
}
.asset-tree-chevron {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.asset-tree-folder[open] > summary > .asset-tree-chevron {
	transform: rotate(90deg);
}
.asset-tree-folder-icon,
.asset-tree-file-icon {
	flex-shrink: 0;
	color: var(--text-gray);
}
.asset-tree-folder.asset-tree-type > summary > .asset-tree-folder-icon {
	color: #C8A340;
}
.asset-tree-folder.asset-tree-post > summary > .asset-tree-folder-icon {
	color: #6B7280;
}
.asset-tree-type > summary .asset-tree-label {
	font-weight: 500;
	font-size: 14px;
}
.asset-tree-post > summary .asset-tree-label {
	font-weight: 500;
	font-size: 13px;
	color: var(--text-color);
	text-decoration: none;
	line-height: 1.5;
}
.asset-tree-post.is-active > summary .asset-tree-label{
	color: var(--primary-color);
}
.asset-tree-post > summary .asset-tree-label:hover {
	color: var(--primary-color);
	text-decoration: underline;
}
.asset-tree-children {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px dashed var(--border-color);
}

/* Custom-document ticket: the outer type wrapper is duplicative
   ("Custom Document" > "Custom Document"), so `<summary>` isn't
   rendered and the children get de-indented to sit flush with
   the panel edge - the asset row acts as the top-level entry. */
.asset-tree-folder.asset-tree-type--hidden > .asset-tree-children {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}
.asset-tree-file {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--text-gray);
}
.asset-tree-file:hover {
	background: color-mix(in srgb, var(--border-color) 30%, var(--white-color));
}
.asset-tree-file:not(:hover) .asset-tree-file__btn{
	opacity: 0;
}
.asset-tree-file__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 1px;
	color: var(--text-color);
	text-decoration: none;
}
.asset-tree-file__main:hover .asset-tree-file__name {
	color: var(--primary-color);
	text-decoration: underline;
}
.asset-tree-file__name {
	font-size: 12px;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.asset-tree-file__meta {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--text-gray);
	opacity: 0.75;
}
.asset-tree-file__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	color: var(--text-gray);
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.asset-tree-file__btn:hover {
	background: color-mix(in srgb, var(--primary-color) 10%, var(--white-color));
	color: var(--primary-color);
}
.asset-tree-file__btn.is-loading {
	pointer-events: none;
	position: relative;
}
.asset-tree-file__btn.is-loading svg {
	visibility: hidden;
}
.asset-tree-file__btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 2px solid color-mix(in srgb, var(--text-color, #111) 20%, transparent);
	border-top-color: var(--primary-color, #185FA5);
	border-radius: 50%;
	animation: tv-spin 0.7s linear infinite;
}
.asset-tree-file__delete:hover {
	background: color-mix(in srgb, #d6371f 10%, var(--white-color));
	color: #d6371f;
}
.asset-tree-file.is-hidden-from-va {
	opacity: 0.45;
}
.asset-deleted-placeholder {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--text-gray, #6b7280);
	background: color-mix(in srgb, var(--border-color) 40%, var(--white-color));
	border: 1px dashed var(--border-color);
	border-radius: 4px;
}

/* Asset-upload cards in the conversation thread whose file URL has been
   removed via the trash button on the ticket-detail page. The card body
   collapses to just a "File removed" chip - the upload-log header above
   still carries the historical context (asset name / folder). Applied by
   tv_mark_deleted_asset_cards_in_html() in inc/gravityForms.php. */
.assets-lib-card--deleted {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-top: 6px;
	min-height: 0;
	display: inline-flex;
	align-items: center;
}
.assets-lib-card__removed-chip {
	display: inline-block;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #a03636;
	background: color-mix(in srgb, #a03636 5%, var(--white-color));
	border: 1px solid color-mix(in srgb, #a03636 50%, var(--white-color));
	border-radius: var(--rad);
}
.assets-lib-card.assets-lib-card--deleted{
	display: block !important;
}

/* Breadcrumbs at the top of the staff ticket-detail page. */
.ticket-detail-layout .ticket-detail-breadcrumbs {
    /* display: flex; */
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--text-gray);
    margin-top: -6px;
    max-width: calc(100% - 75px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-detail-breadcrumbs__sep {
	color: var(--text-gray);
	opacity: 0.6;
}
.ticket-detail-breadcrumbs__item {
	color: inherit;
	text-decoration: none;
}
a.ticket-detail-breadcrumbs__item:hover {
	color: var(--text-color);
	text-decoration: underline;
}

/* Add-a-folder affordance (sits at the bottom of each asset-type's children). */
.asset-tree-add {
	padding: 0px 6px 0px 24px;
}
/* When rendered above the asset post folders (top-of-list variant), match
   the folder rows' chevron-column indent so the "+" sits flush with the
   chevrons below it. */
.asset-tree-add--top {
	padding-left: 0;
	margin-bottom: 4px;
}
.asset-tree-add__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--text-gray, #6b7280);
	opacity: 0.55;
	font-size: 12px;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s;
}
.asset-tree-add__trigger:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--border-color) 30%, var(--white-color));
	color: var(--text-color);
}
.asset-tree-add__trigger[hidden] {
	display: none;
}
.asset-tree-add__form {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}
.asset-tree-add__form[hidden] {
	display: none;
}
.asset-tree-add__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 8px;
	font-size: 13px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background: var(--white-color);
	color: var(--text-color);
}
.asset-tree-add__input:focus {
	outline: none;
	border-color: var(--primary-color, #d6371f);
}
.asset-tree-add__confirm,
.asset-tree-add__cancel {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.asset-tree-add__confirm {
	background: color-mix(in srgb, var(--primary-color, #d6371f) 12%, var(--white-color));
	color: var(--primary-color, #d6371f);
}
.asset-tree-add__confirm:hover {
	background: var(--primary-color, #d6371f);
	color: #fff;
}
.asset-tree-add__cancel {
	background: var(--light-gary);
	color: var(--text-gray);
}
.asset-tree-add__cancel:hover {
	background: var(--border-color);
	color: var(--text-color);
}
.asset-tree-add.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* "Add file" trigger inside each asset-post folder. */
.asset-tree-add-file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 6px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--text-gray, #6b7280);
	opacity: 0.55;
	font-size: 12px;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.asset-tree-add-file:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--border-color) 30%, var(--white-color));
	color: var(--text-color);
}
/* Custom-document tickets gate file uploads on the customer approving
   the credit estimate. While the gate is closed the button renders
   greyed out and non-interactive; the reason is exposed via title
   attr (hover tooltip). */
.asset-tree-add-file.is-disabled,
.asset-tree-add-file[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Trash icon at the right-hand end of a folder's title row. The summary is
already a flex row, so margin-left:auto is all that pushes it over. Kept faint
until the row is hovered: it's the exception, not the action, and it shouldn't
draw the eye while someone is reading folder names. Only rendered on empty
folders (template-parts/ticket-detail.php). */
.asset-tree-delete-folder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: auto;
	padding: 3px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--text-gray, #6b7280);
	/* Invisible but still laid out, so revealing it on hover doesn't shift the
	   folder name sideways. */
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.asset-tree-folder > summary:hover .asset-tree-delete-folder,
.asset-tree-delete-folder:focus-visible {
	opacity: 0.65;
}
/* Red only on direct hover, so it reads as destructive at the moment the
   pointer is actually on it rather than anywhere on the row. */
.asset-tree-delete-folder:hover {
	opacity: 1;
	background: rgba(223, 21, 21, 0.1);
	color: var(--primary-color, #DF1515);
}
/* Touch and keyboard have no hover to reveal it, so it stays visible there. */
@media (hover: none) {
	.asset-tree-delete-folder { opacity: 0.65; }
}
.asset-tree-delete-folder:focus-visible {
	outline: 2px solid var(--primary-color, #DF1515);
	outline-offset: 1px;
	opacity: 1;
}
.asset-tree-delete-folder[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Add-asset GF#2 popup on the ticket detail page reuses the .default-popup-item
styling from main.css. Just add the open-state visibility hook here. */
#add-asset-modal {
	display: none;
}
#add-asset-modal.is-open {
	display: block;
}
.asset-tree-file.is-hidden-from-va::after {
	content: 'hidden';
	margin-left: 4px;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--text-gray);
	border: 1px solid var(--border-color);
	border-radius: 3px;
	padding: 1px 4px;
}

/* Asset details info modal */
.tv-asset-info-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1100;
	align-items: center;
	justify-content: center;
}
.tv-asset-info-modal.is-open {
	display: flex;
}
.tv-asset-info-modal__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--text-color) 45%, transparent);
	backdrop-filter: blur(4px);
}
.tv-asset-info-modal__dialog {
	position: relative;
	background: var(--white-color, #fff);
	border-radius: 8px;
	padding: 28px;
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
}
.tv-asset-info-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
}
.tv-asset-info-modal__close:hover {
	background: var(--border-color);
}
.tv-asset-info-modal__preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 320px;
	background: color-mix(in srgb, var(--border-color) 30%, var(--white-color));
	border-radius: 6px;
	margin: 8px 0 20px;
	padding: 24px;
}
.tv-asset-info-modal__preview img {
	max-width: 100%;
	max-height: 60vh;
	object-fit: contain;
	border-radius: 4px;
}
.tv-asset-info-modal__file-icon {
	color: var(--text-gray);
}
.tv-asset-info-modal__file-type {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--text-gray);
}
.tv-asset-info-modal__meta {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.tv-asset-info-modal__meta > div {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	align-items: baseline;
}
.tv-asset-info-modal__meta dt {
	margin: 0;
	font-size: 12px;
	color: var(--text-gray);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.tv-asset-info-modal__meta dd {
	margin: 0;
	font-size: 14px;
	color: var(--text-color);
	word-break: break-word;
}
.asset-tree-empty-inline {
	padding: 4px 6px;
	font-size: 12px;
	color: var(--text-gray);
	font-style: italic;
}
.asset-tree-files-date {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-gray);
}
.asset-tree-files-date:first-child {
	padding-top: 2px;
}
.asset-tree-files-date__label {
	flex: 1;
	min-width: 0;
}
.asset-tree-files-date__download-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 4px 6px;
	border-radius: 4px;
	color: var(--text-gray);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.asset-tree-files-date__download-all:hover {
	background: var(--body-color, #F9FAFB);
	color: var(--text-color, #111);
}
.asset-tree-files-date__download-all.is-loading {
	pointer-events: none;
	position: relative;
}
.asset-tree-files-date__download-all.is-loading svg {
	visibility: hidden;
}
.asset-tree-files-date__download-all.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid color-mix(in srgb, var(--text-color, #111) 20%, transparent);
	border-top-color: var(--primary-color, #185FA5);
	border-radius: 50%;
	animation: tv-spin 0.7s linear infinite;
}
.asset-tree-files-date__download-all svg {
	display: block;
}
@media (max-width: 900px) {
	.ticket-detail-layout--full {
		grid-template-areas:
			'ticket'
			'detail'
			'comments'
			'assets';
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.ticket-detail-layout--full .ticket-detail-reply,
	.ticket-detail-layout--full .ticket-detail-assets {
		border-left: 0;
		border-top: 1px solid var(--border-color);
	}
}
.reply-head-wrapper,
.ticket-reply-user {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 12px;
	align-items: center;
}
.reply-head-wrapper .profile-avatar,
.ticket-reply-user .profile-avatar {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	font-size: 14px;
	font-weight: 500;
}
.profile-avatar.subscriber {
	color: var(--secondary-color);
	border: 1px solid color-mix(in srgb, var(--secondary-color) 40%, transparent);
	background-color: color-mix(in srgb, var(--secondary-color) 10%, transparent);
}
.profile-avatar.admin {
	color: var(--blue);
	border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
	background-color: color-mix(in srgb, var(--blue) 10%, transparent);
}
/* Reply assets card */
.reply-body .assets-lib-card {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	align-items: center;
	gap: 0 12px;
	padding: 9px 12px;
	background-color: var(--light-gary);
	transition: background 0.1s;
	border-top-right-radius: var(--rad);
	border-top-left-radius: var(--rad);
	margin-top: 6px;
	max-width: 100%;
}
.reply-body .asset-upload-log + .asset-upload-log {
	margin-top: 20px;
}
.reply-body .assets-lib-card p {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	display: flex;
	align-items: center;
}
.reply-body .assets-lib-content {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.reply-body .assets-lib-card .controls {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	position: static;
}

.reply-body .assets-lib-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	border: 0.5px solid var(--color-border-tertiary);
	background: var(--light-gary, #f6f7f8);
	color: var(--text-gray);
}
/* Clickable in every role/layout - the JS handler opens the preview modal
   regardless of whether the legacy log-to-card unwrapped it to a <span>. */
.reply-body .assets-lib-media {
	cursor: pointer;
	transition: border-color 0.12s ease, transform 0.12s ease;
}
.reply-body .assets-lib-media:hover {
	border-color: var(--primary-color);
}
.reply-body .assets-lib-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reply-body .assets-lib-media .assets-lib-file-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.reply-body .assets-lib-media .assets-lib-file-icon svg {
	width: 70%;
	height: 70%;
}

.reply-body .latest-assets {
	display: none;
}

.reply-body .assets-lib-card span.assets-lib-title {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: color 0.12s ease;
	line-height: 2;
}
.reply-body .assets-lib-card span.assets-lib-title:hover {
	color: var(--primary-color);
}
.reply-body .assets-lib-card span.assets-lib-detail {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin: 0 0 0 auto;
}
.reply-body .assets-lib-type {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-color);
	background: var(--white-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 3px 5px 1px;
	width: calc(5ch + 10px);
	text-align: center;
}
.reply-body .dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.3;
}
.reply-body .assets-lib-size {
	font-size: 12px;
	color: var(--color-text-secondary);
}

.reply-body .control-btn {
	display: flex;
}
.reply-body .assets-lib-card .control-btn .control-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 0.5px solid var(--border-color);
	text-decoration: none;
	transition: background 0.1s, color 0.1s;
	background-color: var(--white-color);
	color: var(--text-color);
}
.reply-body .control-icon:hover {
	background: var(--color-background-secondary);
	color: var(--color-text-primary);
}

.reply-body .assets-lib-card + .assets-lib-card {
	margin: 0;
	border-radius: 0;
	border-top: 1px solid var(--border-color);
}

.reply-body .assets-lib-card:not(:has(+ .assets-lib-card)) {
	border-bottom-left-radius: var(--rad);
	border-bottom-right-radius: var(--rad);
}

.reply-body .assets-lib-card .assets-lib-media {
	aspect-ratio: 1;
}

/* Request-a-Change attachments rendered inside the ticket description reuse
the conversation-thread (.reply-body) horizontal card layout. Cancel the
avatar-offset padding the base .reply-body adds, and give the heading +
list a tidier rhythm than the default. */
.ticket-attachments.reply-body {
	padding-left: 0;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}
.ticket-attachments.reply-body > h3 {
	font-size: 14px;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-color);
}
.ticket-attachments.reply-body .ticket-attachments-list {
	display: flex;
	flex-direction: column;
}

/* ===== Reply rich-text editor ===== */
.ticket-reply-toolbar {
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	padding: 0px 0 0 3px;
	border: 1px solid var(--border-color);
	border-bottom: 0;
	border-radius: var(--rad) var(--rad) 0 0;
	background: var(--white-color);
	align-items: center;
}
.ticket-reply-toolbar .form-buttons{
	margin-left: auto;
}
.ticket-reply-toolbar .form-buttons button{
	border-radius: 0 var(--rad) 0 0;
	background-color: #008237;
	color: #ffffff;
	padding: 10px 20px;
	min-width: 120px;
	justify-content: center;
}
.ticket-reply-toolbar .rt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--text-color);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.ticket-reply-toolbar .rt-btn.is-active,
.ticket-reply-toolbar .rt-btn:hover {
	background: var(--light-gary);
	border-color: var(--border-color);
}

.ticket-reply-toolbar .rt-btn:active {
	background: #e0e0e0;
}

.ticket-reply-toolbar .rt-btn svg {
	display: block;
}

.ticket-reply-input[contenteditable="true"] {
	min-height: 96px;
	padding: 12px 14px;
	border: 1px solid var(--border-color);
	border-radius: 0 0 var(--rad) var(--rad);
	background: var(--white-color);
	font: inherit;
	line-height: 1.5;
	outline: none;
	overflow-wrap: anywhere;
}

.ticket-reply-input[contenteditable="true"]:focus {
	border-color: var(--primary-color);
}

.ticket-reply-input[contenteditable="true"]:empty::before {
	content: attr(data-placeholder);
	color: var(--text-gray);
	pointer-events: none;
}

.ticket-reply-input ul {
	margin: 6px 0;
	padding-left: 20px;
	list-style: disc;
}

.ticket-reply-input a {
	color: var(--primary-color);
	text-decoration: underline;
}

/* --- Images in a reply --------------------------------------------------
   Scoped to direct images so the asset-upload cards further down this file,
   which style their own .assets-lib-media img, keep their fixed tile sizing. */
.ticket-reply-input img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px 0;
	border: 1px solid var(--border-color);
	border-radius: var(--rad);
}

.ticket-reply-input.is-drop-target {
	border-color: var(--primary-color);
	background: var(--light-gary);
}

.ticket-reply-toolbar .rt-btn:disabled {
	opacity: .5;
	cursor: default;
}

.ticket-reply-status {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-gray);
}

.ticket-reply-status.is-error {
	color: var(--primary-color);
}

/* Upload progress. Green rather than --primary-color: red is this palette's
   error colour, and a red bar reads as a failure while it is still working. */
.ticket-reply-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
}

.ticket-reply-progress[hidden] {
	display: none;
}

.ticket-reply-progress__track {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 999px;
	background: var(--border-color);
	overflow: hidden;
}

.ticket-reply-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--secondary-color);
	transition: width .15s linear;
}

.ticket-reply-progress__label {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-gray);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.ticket-reply-progress__fill {
		transition: none;
	}
}

/* A posted image. :not() keeps this off the asset-upload log cards, which
   render their own thumbnails through .assets-lib-media. */
.reply-body > img,
.reply-body > p > img,
.reply-body > div:not([class]) img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rad);
	border: 1px solid var(--border-color);
	margin: 8px 0;
}


.ticket-actions-bar {
	display: flex;
	gap: 20px;
	align-items: center;
}


/* Toolbar CSS */
.ticket-toolbar {
    padding: 4px 10px;
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}
.ticket-toolbar .assign-agent-wrap select{
	padding: 6px 8px;
}
/* Loading state while the assignment AJAX is in flight - dims the select,
   shows a spinner to the right, and blocks pointer events so a second
   assignment can't fire mid-request. */
.assign-agent-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.assign-agent-wrap.is-loading select {
	opacity: 0.55;
	pointer-events: none;
}
.assign-agent-wrap.is-loading::after {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--secondary-color) 25%, transparent);
	border-top-color: var(--secondary-color);
	animation: tv-assign-spin 0.7s linear infinite;
	flex-shrink: 0;
}
.assigned-va-info.is-loading {
	opacity: 0.55;
	pointer-events: none;
	position: relative;
}
.assigned-va-info.is-loading::after {
	content: "";
	width: 12px;
	height: 12px;
	margin-left: 6px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--secondary-color) 25%, transparent);
	border-top-color: var(--secondary-color);
	animation: tv-assign-spin 0.7s linear infinite;
	flex-shrink: 0;
}
@keyframes tv-assign-spin {
	to { transform: rotate(360deg); }
}
.ticket-toolbar .ticket-toolbar__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-toolbar .ticket-toolbar__back {
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
	font-size: 15px;
	line-height: 32px;
}
.ticket-toolbar .va-self-assign-btn,
.ticket-toolbar .ticket-status-change.ticket-toolbar__close {
    align-self: stretch;
    font-size: 14px;
    padding: 9px 14px;
	line-height: 1;
}
/* Toolbar "Estimation" button (staff-only) - opens the modal below.
   Shows the current value inline when set, or "+ Add estimation" when
   blank. Customer read-only view is a plain "Estimated: N hours" chip. */
.ticket-estimation-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    background: var(--white-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    font-family: inherit;
}
.ticket-estimation-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.ticket-estimation-btn svg { flex: 0 0 auto; }
.ticket-estimation-btn.is-locked,
.ticket-estimation-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}
.ticket-estimation-btn.is-locked:hover,
.ticket-estimation-btn[disabled]:hover {
    border-color: var(--border-color);
    color: var(--text-color);
}

.ticket-estimation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    background: var(--white-color);
    font-size: 13px;
    line-height: 1.4;
}
.ticket-estimation__label { color: var(--text-gray); font-weight: 500; }
.ticket-estimation__value { font-weight: 600; color: var(--text-color); }

/* Estimation modal - small centred dialog with a backdrop. Follows
   the same pattern as .add-client-modal (page-manage-user-customer).
   The [hidden] attribute alone is sufficient for the on/off state
   because no other rule forces `display` on this element. */
.ticket-estimation-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ticket-estimation-modal[hidden] { display: none; }
.ticket-estimation-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.ticket-estimation-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    padding: 24px 24px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.ticket-estimation-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    border-radius: 6px;
}
.ticket-estimation-modal__close:hover { background: color-mix(in srgb, var(--text-color) 6%, transparent); color: var(--text-color); }
.ticket-estimation-modal__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
}
.ticket-estimation-modal__hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.4;
}
.ticket-estimation-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.ticket-estimation-modal__field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
}
.ticket-estimation-modal__field-optional {
    color: var(--text-gray);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}
.ticket-estimation-modal__field .ticket-estimation__input,
.ticket-estimation-modal__field .ticket-estimation__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    font-size: 14px;
    color: var(--text-color);
    background: var(--white-color);
    font-family: inherit;
}
.ticket-estimation__textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.4;
}
.ticket-estimation__notes {
    font-size: 12px;
    color: var(--text-gray);
    margin-left: 6px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estimation card embedded in the conversation thread. Rendered as
   the message content on estimation save (tv_render_estimation_card);
   enhanced with approve/reject clicks for customer viewers by the
   [data-tv-estimation-decide] handler in ajaxcaller.js. */
.tv-estimation-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    background: color-mix(in srgb, var(--primary-color) 4%, var(--white-color));
}
.tv-estimation-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tv-estimation-card__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-color);
}
.tv-estimation-card__badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 8%, var(--white-color));
    color: var(--text-gray);
    text-transform: capitalize;
}
.tv-estimation-card[data-status="approved"] .tv-estimation-card__badge {
    background: color-mix(in srgb, #16a34a 15%, var(--white-color));
    color: #15803d;
}
.tv-estimation-card[data-status="rejected"] .tv-estimation-card__badge {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--white-color));
    color: var(--primary-color);
}
.tv-estimation-card__row,
.tv-estimation-card__notes {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    align-items: baseline;
}
.tv-estimation-card__row {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: var(--rad);
    padding: 10px 12px;
    align-items: center;
    margin-top: 4px;
}
.tv-estimation-card__row .tv-estimation-card__val {
    font-size: 15px;
    font-weight: 600;
}
.tv-estimation-card__row .tv-estimation-card__val strong {
    color: var(--primary-color);
    font-size: 17px;
}
.tv-estimation-card__notes {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-top: 1px dashed var(--border-color);
    padding: 8px 0 0;
    margin-top: 8px;
}
.tv-estimation-card__notes .tv-estimation-card__val {
    white-space: pre-line;
    margin: 0;
}
.tv-estimation-card__notes .tv-estimation-card__val br + br { display: none; }
/* The __key rule uses `flex: 0 0 110px` so labels line up as a fixed
   column in the row layout. Inside the notes container the direction
   flips to `column`, which makes that basis map to the MAIN axis
   (height) and stretches the NOTES label to 110px tall. Reset the
   basis to auto here so the label sizes to its text. */
.tv-estimation-card__notes .tv-estimation-card__key {
    flex: 0 0 auto;
}
.tv-estimation-card__key {
    flex: 0 0 110px;
    color: var(--text-gray);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tv-estimation-card__val { color: var(--text-color); }
.tv-estimation-card__actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.tv-estimation-card__prompt {
    margin: 0;
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--text-gray);
}
.tv-estimation-card__prompt--short {
    color: #b91c1c;
    font-weight: 500;
}
.tv-estimation-card__btn[disabled],
.tv-estimation-card__btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.tv-estimation-card__btn {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--rad);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.tv-estimation-card__btn:disabled { opacity: 0.6; cursor: default; }
.tv-estimation-card__btn--approve {
    background: #16a34a;
    color: #fff;
}
.tv-estimation-card__btn--approve:hover:not(:disabled) {
    background: #15803d;
}
.tv-estimation-card__btn--reject {
    background: var(--white-color);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.tv-estimation-card__btn--reject:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--white-color));
}
.tv-estimation-card__btn--delete {
    background: #b91c1c;
    color: #fff;
    border: 1px solid #b91c1c;
}
.tv-estimation-card__btn--delete:hover:not(:disabled) {
    background: #991b1b;
    border-color: #991b1b;
}
/* Once decided, the action row is removed by JS. On page reload the
   badge reflects the persisted status, and the buttons are hidden via
   CSS so a stale HTML render still reads as final. */
.tv-estimation-card[data-status="approved"] .tv-estimation-card__actions,
.tv-estimation-card[data-status="rejected"] .tv-estimation-card__actions {
    display: none;
}
.ticket-estimation-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ticket-estimation-modal__cancel {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--rad);
    background: var(--white-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.ticket-estimation-modal__cancel:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.ticket-estimation__save {
    padding: 8px 16px;
    border: 0;
    border-radius: var(--rad);
    background: var(--primary-color);
    color: var(--white-color, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ticket-estimation__save:disabled { opacity: 0.6; cursor: default; }
.ticket-estimation__save:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary-color) 90%, #111);
}
.ticket-estimation__status {
    display: block;
    margin-top: 10px;
    text-align: right;
    font-size: 12px;
    color: var(--text-gray);
}
.ticket-estimation__status.is-success { color: #16a34a; }
.ticket-estimation__status.is-error   { color: var(--primary-color); }

.ticket-created {font-size: 14px;color: var(--text-gray);}
.ticket-created-ago {color: color-mix(in srgb, var(--text-gray) 75%, transparent);margin-left: 2px;}

/* Staff-only ticket workflow timeline: Reported → Assigned → Closed
   with the gap between steps rendered as a vertical line with a label. */
.ticket-workflow {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ticket-workflow__step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.3;
}
.ticket-workflow__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary-color);
	flex-shrink: 0;
}
.ticket-workflow__step:last-child .ticket-workflow__dot {
	background: var(--secondary-color, #008237);
}
.ticket-workflow__text {
	font-weight: 500;
}
.ticket-workflow__gap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 0;
	min-height: 28px;
	color: color-mix(in srgb, var(--text-gray) 80%, transparent);
	font-size: 12px;
}
.ticket-workflow__line {
	display: inline-block;
	width: 2px;
	min-height: 22px;
	background: color-mix(in srgb, var(--border-color) 70%, transparent);
	margin-left: 3px; /* aligns under the 8px dot */
	flex-shrink: 0;
}
.ticket-workflow__gap-label {
	font-style: italic;
}

.ticket-closed-marker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 8px 0 24px;
}
.ticket-closed-marker__line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right,
		transparent,
		color-mix(in srgb, var(--primary-color) 22%, transparent),
		transparent);
}
.ticket-closed-marker__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--white-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    /* white-space: nowrap; */
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-color) 8%, transparent);
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 8px;
    align-items: center;
    line-height: 1;
}
.ticket-closed-marker__icon {
	flex-shrink: 0;
	opacity: 0.85;
}
.ticket-closed-marker__text {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}
.ticket-closed-marker__date {
	color: color-mix(in srgb, var(--primary-color) 75%, var(--text-color));
	font-weight: 500;
	font-size: 12px;
}
.ticket-closed-marker__date::before {
	content: '·';
	margin-right: 6px;
	color: color-mix(in srgb, var(--primary-color) 40%, transparent);
	font-weight: 700;
}



@media screen and (max-width: 767px){
	.ticket-detail-header::after {
		content: "▾";
		font-size: 14px;
		color: #6b7280;
		transition: transform 0.2s ease;
	}
	.ticket-detail-accordion[open] > .ticket-detail-header::after {
		transform: rotate(180deg);
	}
	.ticket-detail-layout:has(.ticket-detail-accordion) {
		display: block;
		height: auto;
	}

	.fs-custom-portal.ticket-detail-wrapper:has(.ticket-detail-accordion) {
		background-color: transparent;
		height: auto;
		overflow: auto;
	}

	.ticket-detail-accordion {
		background-color: var(--white-color);
		border-top: 1px solid var(--border-color);
		padding: 0 !important;
	}

	.ticket-detail-accordion > summary {
		font-size: 16px;
		font-family: var(--title-family);
		font-weight: 500;
		list-style: none;
		padding: 10px 10px;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
		box-shadow: 0 0 1px 0 var(--border-color);
		z-index: 100;
		background-color: var(--white-color);
	}

	.ticket-detail-accordion .ticket-detail-content > * {
		padding: 20px 14px 20px !important;
		border-top: 1px solid var(--border-color);
		background-color: var(--body-color);
	}
	.reply-body .assets-lib-card{
		background-color: var(--border-color);
	}
}