/* FlexiType Support – frontend (pro design, matches FlexiType Product) */

.fts-wrap { max-width: 820px; }

.fts-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.fts-head h2 { margin: 0; }

.fts-empty {
	text-align: center; padding: 56px 24px;
	border: 1px solid var(--ftp-line, #e5e7eb); border-radius: 12px;
}
.fts-empty p { color: var(--ftp-muted, #6b7280); margin-bottom: 16px; }

/* List */
.fts-list code.fts-ref {
	background: #f1f5f9; color: #475569; padding: 3px 9px; border-radius: 6px;
	font-size: 12px; font-weight: 600;
}
.fts-subject { font-weight: 700; color: var(--ftp-ink, #1f2937) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.fts-subject:hover { color: var(--ftp-primary-dark, #189662) !important; }
.fts-dot {
	width: 9px; height: 9px; border-radius: 50%; background: #ef4444; flex: none;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

/* Badges */
.fts-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 99px; vertical-align: middle; letter-spacing: .2px; }
.fts-badge--open { background: #fff7e6; color: #b45309; }
.fts-badge--answered { background: #e6f7ef; color: #15724d; }
.fts-badge--processing { background: #eef4ff; color: #1d4ed8; }
.fts-badge--on-hold { background: #fef3c7; color: #92400e; }
.fts-badge--suspend { background: #fae8ff; color: #86198f; }
.fts-badge--solved { background: #dcfce7; color: #166534; }
.fts-badge--closed { background: #eef0f3; color: #6b7280; }

.fts-back { font-weight: 700; color: var(--ftp-primary-dark, #189662) !important; text-decoration: none; }
.fts-meta { color: var(--ftp-muted, #6b7280); font-size: 13.5px; }

/* Thread header */
.fts-thread-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.fts-thread-head h2 { margin: 0; font-size: 24px; }

/* Info bar — pro card style */
.fts-tinfo {
	display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 22px;
	background: linear-gradient(180deg, #fbfcfd, #f6f8fa);
	border: 1px solid var(--ftp-line, #e5e7eb); border-radius: 12px; overflow: hidden;
}
.fts-tinfo__item {
	display: flex; flex-direction: column; gap: 4px; padding: 13px 20px; flex: 1;
	border-right: 1px solid var(--ftp-line, #e5e7eb); min-width: 130px;
}
.fts-tinfo__item:last-child { border-right: none; }
.fts-tinfo__item i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #9aa3af; font-weight: 700; }
.fts-tinfo__item b { font-size: 14.5px; color: var(--ftp-ink, #1f2937); font-weight: 700; }
.fts-pri--high { color: #b42318 !important; }
.fts-pri--normal { color: #b45309 !important; }
.fts-pri--low { color: #6b7280 !important; }

/* Thread messages with avatars */
.fts-thread { display: grid; gap: 16px; margin: 0 0 26px; }
.fts-msg { display: flex; gap: 14px; align-items: flex-start; }
.fts-msg--agent { flex-direction: row-reverse; }
.fts-msg__avatar { flex: none; position: relative; }
.fts-msg__avatar-img { border-radius: 50%; display: block; width: 42px; height: 42px; object-fit: cover; }
.fts-msg__agent-mark {
	position: absolute; bottom: -2px; right: -2px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--ftp-primary, #21b074); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; border: 2px solid #fff;
}
.fts-msg__agent-ic {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--ftp-primary, #21b074); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.fts-msg__bubble {
	flex: 1; border: 1px solid var(--ftp-line, #e5e7eb); border-radius: 14px;
	padding: 15px 18px; background: #fff; position: relative; min-width: 0;
}
.fts-msg--agent .fts-msg__bubble {
	background: linear-gradient(180deg, #effaf4, #e6f7ef);
	border-color: #b8e8d2;
}
.fts-msg__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fts-msg__head strong { font-size: 14.5px; color: var(--ftp-ink, #1f2937); }
.fts-msg__role {
	font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
	padding: 2px 9px; border-radius: 5px; background: rgba(0,0,0,.06); color: #64748b;
}
.fts-msg--agent .fts-msg__role { background: rgba(33,176,116,.18); color: #15724d; }
.fts-msg__head time { margin-left: auto; font-size: 12.5px; color: #9aa3af; }
.fts-msg--agent .fts-msg__head { flex-direction: row-reverse; }
.fts-msg--agent .fts-msg__head time { margin-left: 0; margin-right: auto; }
.fts-msg__body { font-size: 14.5px; line-height: 1.7; color: var(--ftp-ink, #1f2937); word-wrap: break-word; }
.fts-msg__body p:last-child { margin-bottom: 0; }
.fts-msg__body a { color: var(--ftp-primary-dark, #189662); font-weight: 600; word-break: break-all; }

/* Reply — full width */
.fts-reply { display: block; margin-top: 6px; }
.fts-reply__label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 9px; }
.fts-reply__text {
	width: 100%; box-sizing: border-box; display: block;
	border: 1px solid var(--ftp-line, #e5e7eb); border-radius: 10px;
	padding: 14px 16px; font-size: 14.5px; font-family: inherit; line-height: 1.6; resize: vertical;
}
.fts-reply__text:focus { outline: none; border-color: var(--ftp-primary, #21b074); box-shadow: 0 0 0 3px rgba(33,176,116,.14); }
.fts-reply__hint {
	display: flex; align-items: flex-start; gap: 9px;
	background: #eef4ff; border: 1px solid #d6e4ff; border-radius: 9px;
	padding: 11px 14px; margin: 12px 0 16px; font-size: 13px; line-height: 1.55; color: #1e40af;
}
.fts-reply__hint svg { flex: none; margin-top: 2px; color: #2563eb; }
.fts-closed-note { background: #eef0f3; border-radius: 9px; padding: 14px 16px; }

/* Pager */
.fts-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.fts-pager__info { color: var(--ftp-muted, #6b7280); font-size: 13.5px; }

/* Forms (new ticket / public) */
.fts-form { display: grid; gap: 15px; max-width: 680px; }
.fts-form label { display: grid; gap: 7px; font-weight: 600; font-size: 14px; }
.fts-form input[type="text"], .fts-form input[type="email"], .fts-form select, .fts-form textarea {
	border: 1px solid var(--ftp-line, #e5e7eb); border-radius: 8px;
	padding: 11px 13px; font-size: 14.5px; font-weight: 400; width: 100%; box-sizing: border-box;
}
.fts-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fts-form button { justify-self: start; }

@media (max-width: 680px) {
	.fts-form__row { grid-template-columns: 1fr; }
	.fts-head { flex-wrap: wrap; }
	.fts-tinfo__item { min-width: 50%; border-bottom: 1px solid var(--ftp-line, #e5e7eb); }
	.fts-msg--agent { flex-direction: row; }
	.fts-msg--agent .fts-msg__head { flex-direction: row; }
}

.fts-ref-link { text-decoration: none; }
.fts-ref-link:hover .fts-ref { background: var(--ftp-primary-soft, #e6f7ef); color: var(--ftp-primary-dark, #189662); }