f7support/css/f7support.css

/* f7support UI — themes/dop + доска тикетов и чат (apps/f7support/js/main.js) */




#f7support-app {
	font-family: "Raleway";
	font-weight: 500;
	font-variant-numeric: lining-nums;
	box-sizing: border-box;
}

#f7support-app *,
#f7support-app *::before,
#f7support-app *::after {
	box-sizing: inherit;
}

#f7support-app {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 8px;
	width: 100%;
}

#f7support-app .f7s-main {
	padding: 16px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#f7support-app .f7s-main h2 {
	margin: 0;
}

#f7support-app .f7s-main .f7s-wrapper-main {
	width: 100%;
	max-width: min(1680px, 100%);
	min-height: min(70vh, 720px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 24px 0px;
	box-sizing: border-box;
}

#f7support-app .f7s-error {
	color: #b00020;
}

#f7support-app .f7s-section-title-icon,
#f7support-app .f7s-home-icon-wrap .f7s-section-title-icon {
	display: block;
	width: 77px;
	height: auto;
	margin: 0 0 20px 0;
	flex-shrink: 0;
	max-width: 100%;
}

#f7support-app .f7s-section-title {
	margin: 0;
	color: #151515;
	font-weight: 500;
	font-size: 24px;
	line-height: 20px;

}

#f7support-app .f7s-hint {
	color: #888;
	margin: 0;
	max-width: 100%;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
}

#f7support-app .f7s-home-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

#f7support-app .f7s-home-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	gap: 20px;
}

#f7support-app .f7s-home--empty .f7s-home-top {
	flex: 1;
	justify-content: center;
	padding: 8vh 0 24px;
}

#f7support-app .f7s-home--has-tickets .f7s-home-top {
	align-items: flex-start;
	padding-bottom: 8px;
}

#f7support-app .f7s-home--has-tickets .f7s-home-intro {
	align-items: flex-start;
	text-align: left;
}

#f7support-app .f7s-home-icon-wrap[hidden] {
	display: none !important;
}

#f7support-app .f7s-create-ticket-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding: 0 18px;
	border: 1px solid;
	border-image-source: linear-gradient(90deg, rgba(192, 255, 123, 0.2) 3.12%, rgba(112, 182, 43, 0.2) 66.7%);
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset;
	border-radius: 100px;
	background: linear-gradient(104.25deg, #C0FF7B 0%, #7CBC3D 45.31%);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(149, 212, 63, 0.35);
	font-size: 14px;
	font-weight: 500;
}

#f7support-app .f7s-create-ticket-btn:hover {
	filter: brightness(1.03);
}

#f7support-app .f7s-create-ticket-btn:active {
	transform: translateY(1px);
}

#f7support-app .f7s-create-ticket-btn__icon {
	flex: 0 0 auto;
}

#f7support-app .f7s-create-ticket-btn__text {
	line-height: 1;
	white-space: nowrap;
}

#f7support-app .f7s-ticket-list {
	padding-left: 20px;
	margin: 0;
}

#f7support-app .f7s-ticket-item {
	cursor: pointer;
	margin-bottom: 6px;
}


/*modal create tiket*/
#f7support-app .f7s-modal {
	display: none;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
}

#f7support-app .f7s-modal.f7s-open {
	display: flex;
}

#f7support-app .f7s-modal--create {
	z-index: 100000;
}

#f7support-app .f7s-modal--chat {
	z-index: 100000;
}

#f7support-app .f7s-modal-panel {
	background: rgba(255, 255, 255, 1);
	padding: 16px;
	width: min(95vw, 1200px);
	height: 90vh;
	max-height: 90vh;
	max-width: 95vw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

#f7support-app .f7s-modal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

#f7support-app .f7s-modal-head h3 {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 20px;
	padding-top: 24px;

}

#f7support-app .f7s-modal-head #close-modal-btn,
#f7support-app .f7s-modal-head #close-chat-btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	margin: 0;
	min-height: max-content;
}

#f7support-app .f7s-btn-icon {
	font-size: 20px;
	line-height: 1;
	border: none;
	background: transparent;
	cursor: pointer;
}

#f7support-app .f7s-btn-icon--lg {
	font-size: 22px;
	padding: 4px 8px;
}

#f7support-app .f7s-input {
	width: 100%;
	margin-top: 24px;
	height: 36px;
	background: rgba(253, 253, 253, 1);
	border: 1px solid rgba(230, 230, 230, 1);
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 2px 0px rgba(230, 230, 230, 1);

}

#f7support-app .f7s-textarea {
	width: 100%;
	height: 200px;
	margin: 12px 0 0 0;
	background: rgba(253, 253, 253, 1);
	border: 1px solid rgba(230, 230, 230, 1);
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 2px 0px rgba(230, 230, 230, 1);
}


#f7support-app .f7s-file-field {
	width: 100%;
	flex: 1 1 100%;
}

#f7support-app .f7s-file-combo {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	background: rgba(253, 253, 253, 1);
	border: 1px solid rgba(230, 230, 230, 1);
	border-radius: 8px;
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 2px 0px rgba(230, 230, 230, 1), 0 4px 14px rgba(0, 0, 0, 0.06);
}



#f7support-app .f7s-file-combo:has(.f7s-file-chip) {
	width: max-content !important;
	padding: 2px 5px;
	max-width: 100%;
}

#f7support-app .f7s-file-trigger-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#f7support-app .f7s-file-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	cursor: pointer;
}

#f7support-app .f7s-file-trigger__icon {
	display: flex;
	line-height: 0;
}

#f7support-app .f7s-file-input-native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	font-size: 0;
}

#f7support-app .f7s-file-trigger-wrap:has(.f7s-file-input-native:focus-visible) .f7s-file-trigger {
	outline: 2px solid rgba(149, 212, 63, 0.55);
	outline-offset: 2px;
	border-radius: 8px;
}

#f7support-app .f7s-file-chips {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

#f7support-app .f7s-file-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: min(280px, 100%);
	padding: 2px 12px;
	background: rgba(253, 253, 253, 1);
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset;
	box-shadow: 0px 1px 2px 0px rgba(230, 230, 230, 1);
	border-radius: 100px;
	height: 24px;

}

#f7support-app .f7s-file-chip__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #151515;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#f7support-app .f7s-file-chip-remove {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2px;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	border-radius: 4px;
}

#f7support-app .f7s-file-chip-remove:hover {
	background: rgba(0, 0, 0, 0.06);
}

#f7support-app .f7s-file-placeholder {
	flex: 1 1 auto;
	min-width: 80px;
	font-size: 14px;
	line-height: 1.35;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	padding-left: 40px;
}

#f7support-app .f7s-file-placeholder--hidden {
	display: none;
}

#f7support-app .f7s-submit-ticket-btn {
	float: right;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border-radius: 100px;
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset;
	border: 1px solid;
	border-image-source: linear-gradient(90deg, rgba(192, 255, 123, 0.2) 3.12%, rgba(112, 182, 43, 0.2) 66.7%);
	background: linear-gradient(104.25deg, #C0FF7B 0%, #7CBC3D 45.31%);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(149, 212, 63, 0.35);
	font-size: 14px;
	font-weight: 500;
}

#f7support-app .f7s-submit-ticket-btn:hover {
	filter: brightness(1.03);
}

#f7support-app .f7s-submit-ticket-btn:active {
	transform: translateY(1px);
}

#f7support-app .f7s-submit-ticket-btn__icon {
	flex: 0 0 auto;
	display: block;
}

#f7support-app .f7s-submit-ticket-btn__text {
	line-height: 1;
	white-space: nowrap;
}

/*modal chat*/

#f7support-app .f7s-modal-panel.f7s-chat-panel,
#f7support-app .f7s-modal-panel--create {
	min-height: 0;
}

#f7support-app .f7s-modal-panel--create .f7support-modal-head,
#f7support-app .f7s-modal-panel--create .f7s-modal-head {
	flex-shrink: 0;
}

#f7support-app .f7s-modal-panel--create>.f7support-input,
#f7support-app .f7s-modal-panel--create>.f7s-input {
	flex-shrink: 0;
}

#f7support-app .f7s-modal-compose {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#f7support-app .f7s-modal-compose .f7s-textarea-attach-wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}

#f7support-app .f7s-modal-compose .f7s-create-body {
	flex: 1 1 auto;
	min-height: 120px;
	height: auto !important;
	max-height: none;
	width: 100%;
	resize: none;
}

#f7support-app .f7s-modal-compose .f7s-modal-attach-row {
	flex-shrink: 0;
	margin-top: 24px;
	align-items: center;
}

#f7support-app .f7s-modal-panel.f7s-chat-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#f7support-app .f7s-modal-panel.f7s-chat-panel .f7s-modal-head h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: calc(100% - 40px);
}

#f7support-app .f7s-textarea--message {
	min-height: 72px;
	height: auto;
}

#f7support-app .f7s-mt-8 {
	margin-top: 24px;
}

#f7support-app .f7s-modal-attach-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	align-items: center;
}

#f7support-app .f7s-modal-attach-row .f7s-file-field {
	flex: 1 1 0;
	min-width: 0;
}

#f7support-app .f7s-modal-attach-row .f7s-submit-ticket-btn {
	flex: 0 0 auto;
	float: none;
	margin-top: 0;
}

#f7support-app .f7s-create-body {
	margin-top: 0;
}

#f7support-app .f7s-textarea-attach-wrap {
	position: relative;
	width: 100%;
}

#f7support-app .f7s-textarea-attach-wrap .f7s-create-body,
#f7support-app .f7s-textarea-attach-wrap .f7s-chat-textarea {
	padding-right: 44px;
	padding-bottom: 40px;
	box-sizing: border-box;
}

#f7support-app .f7s-textarea-clip {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	pointer-events: none;
}

#f7support-app .f7s-textarea-clip .f7s-file-trigger-wrap {
	width: 36px;
	height: 36px;
	pointer-events: auto;
}

#f7support-app .f7s-textarea-clip .f7s-file-trigger {
	pointer-events: none;
}

#f7support-app .f7s-file-chips-slot {
	display: none;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

#f7support-app .f7s-modal-attach-row.f7s-has-attachments .f7s-file-chips-slot {
	display: flex;
}

#f7support-app .f7s-modal-attach-row:not(.f7s-has-attachments) {
	justify-content: flex-end;
}

#f7support-app .f7s-modal-attach-row.f7s-has-attachments {
	justify-content: flex-start;
}

#f7support-app .f7s-modal-attach-row.f7s-has-attachments .f7s-submit-ticket-btn {
	margin-left: auto;
}

#f7support-app .f7s-modal-attach-row .f7s-file-chips {
	width: 100%;
}

#f7support-app .f7s-modal-panel.f7s-chat-panel .f7support-modal-head,
#f7support-app .f7s-modal-panel.f7s-chat-panel .f7s-modal-head {
	flex-shrink: 0;
}

#f7support-app .f7s-chat-send-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

#f7support-app .f7s-send-message-btn {
	float: none;
}

#f7support-app .f7s-chat-error {
	margin: 0;
	padding: 8px 0 0;
	min-height: 0;
	flex-shrink: 0;
}

#f7support-app .f7s-message-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 8px;
	max-height: none;
}

#f7support-app .f7s-chat-footer {
	padding: 16px 0 0;
	flex: 0 0 auto;
	flex-shrink: 0;
	margin-top: 8px;
}

#f7support-app .f7s-chat-footer .f7s-textarea-attach-wrap {
	flex: 0 0 auto;
}

#f7support-app .f7s-msg {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	margin-top: 10px;
}

#f7support-app .f7s-msg:first-child {
	margin-top: 0;
}

#f7support-app .f7s-msg--middle,
#f7support-app .f7s-msg--last {
	margin-top: 2px;
}

#f7support-app .f7s-msg--in {
	align-items: flex-start;
}

#f7support-app .f7s-msg--out {
	align-items: flex-end;
}

#f7support-app .f7s-msg-sender {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

#f7support-app .f7s-msg-avatar {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ECF9DE;
	color: #70B62B;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

#f7support-app .f7s-msg-sender-name {
	font-size: 12px;
	color: #808080;
	font-weight: 500;
}

#f7support-app .f7s-msg-bubble {
	--f7s-bubble-r: 16px;
	--f7s-bubble-flat: 4px;
	max-width: min(420px, 88%);
	border-radius: var(--f7s-bubble-r);
	padding: 8px 12px;
	color: rgba(21, 21, 21, 1);
	display: flex;
	align-items: stretch;
	gap: 6px;
}


#f7support-app .f7s-msg-bubble.f7s-msg-bubble--has-attach {
	flex-direction: column;
	position: relative;

	& .f7s-msg-meta {
		position: absolute;
		bottom: 8px;
		right: 12px;
	}
}

#f7support-app .f7s-msg-bubble--image {
	max-width: min(280px, 78%);
	padding: 10px 12px 8px;
}

#f7support-app .f7s-msg-bubble--has-attach .f7s-msg-meta {
	margin-top: 2px;
}

#f7support-app .f7s-msg-bubble {
	background-color: #ecf9de;
}

#f7support-app .f7s-msg--out .f7s-msg-bubble--first {
	border-radius: var(--f7s-bubble-r) var(--f7s-bubble-r) var(--f7s-bubble-flat) var(--f7s-bubble-r);
}

#f7support-app .f7s-msg--out .f7s-msg-bubble--middle {
	border-radius: var(--f7s-bubble-r) var(--f7s-bubble-flat) var(--f7s-bubble-flat) var(--f7s-bubble-r);
}

#f7support-app .f7s-msg--out .f7s-msg-bubble--last {
	border-radius: var(--f7s-bubble-r) var(--f7s-bubble-flat) var(--f7s-bubble-r) var(--f7s-bubble-r);
}

#f7support-app .f7s-msg--in .f7s-msg-bubble--first {
	border-radius: var(--f7s-bubble-r) var(--f7s-bubble-r) var(--f7s-bubble-r) var(--f7s-bubble-flat);
}

#f7support-app .f7s-msg--in .f7s-msg-bubble--middle {
	border-radius: var(--f7s-bubble-flat) var(--f7s-bubble-r) var(--f7s-bubble-r) var(--f7s-bubble-flat);
}

#f7support-app .f7s-msg--in .f7s-msg-bubble--last {
	border-radius: var(--f7s-bubble-flat) var(--f7s-bubble-r) var(--f7s-bubble-r) var(--f7s-bubble-r);
}

#f7support-app .f7s-msg-text {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	word-break: break-word;
}

#f7support-app .f7s-msg-text:last-child {
	margin-bottom: 0;
}

#f7support-app .f7s-msg-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(128, 128, 128, 1);
}

#f7support-app .f7s-msg-time {
	font-variant-numeric: tabular-nums;
}

#f7support-app .f7s-msg-read {
	order: -1;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

#f7support-app .f7s-msg-read svg {
	display: block;
}

#f7support-app .f7s-msg-img-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#f7support-app .f7s-msg-img-name {
	font-size: 14px;
	font-weight: 600;
	color: #151515;
	word-break: break-word;
}

#f7support-app .f7s-msg-img-size {
	font-size: 12px;
	color: #666;
}

#f7support-app .f7s-msg-img-wrap {
	margin-top: 2px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.6);
}

#f7support-app .f7s-msg-img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: min(320px, 42vh);
	object-fit: cover;
	border-radius: 12px;
	cursor: pointer;
}

#f7support-app .f7s-img-err {
	color: #888;
	font-size: 13px;
	padding: 8px;
}

#f7support-app .f7s-msg-attach-card {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	padding: 6px 8px 6px 6px;
	border-radius: 100px;
	border: none;
	box-shadow: none;
	cursor: pointer;
}

#f7support-app .f7s-msg-attach-card:hover {
	filter: brightness(1.02);
}

#f7support-app .f7s-msg-attach-card__body {
	flex: 1 1 120px;
	min-width: 0;
}

#f7support-app .f7s-msg-attach-card__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

#f7support-app .f7s-msg-attach-card__icon-img {
	display: block;
	width: 45px;
	height: 45px;
	object-fit: contain;
}

#f7support-app .f7s-msg-attach-card__name {
	font-size: 14px;
	font-weight: 500;
	color: #151515;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 150px;
}

#f7support-app .f7s-msg-attach-card__size {
	font-size: 12px;
	color: #666;
	margin-top: 2px;
}

#f7support-app .f7s-msg-attach-card__btn {
	margin: 0;
	padding: 6px 12px;
	border: none;
	border-radius: 100px;
	background: linear-gradient(104.25deg, #c0ff7b 0%, #7cbc3d 45.31%);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

#f7support-app .f7s-msg-attach-card__btn:hover {
	filter: brightness(1.03);
}

/* ——— Текущее приложение: канбан, модалки f7support-*, пузыри файлов ——— */

#f7support-app .f7support-wrap {
	padding: 16px;
	max-width: min(1680px, 100%);
	width: 100%;
}

#f7support-app .f7support-error {
	height: max-content;
}

#f7support-app .f7support-main {
	width: 100%;
}

#f7support-app .f7support-main.f7s-wrapper-main {
	align-items: stretch;
	width: 100%;
}

#f7support-app .f7-board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 4px;
	align-items: stretch;
	width: 100%;
	flex: 1;
	min-height: 0;
}

#f7support-app .f7-board[hidden] {
	display: none !important;
}

@media (max-width: 1100px) {
	#f7support-app .f7-board {
		grid-template-columns: 1fr;
	}
}

#f7support-app .f7-column {
	border: none;
	border-radius: 12px;
	padding: 0;
	min-height: min(52vh, 560px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#f7support-app .f7-column--new {}

#f7support-app .f7-column--progress {}

#f7support-app .f7-column--closed {}

#f7support-app .f7-column-title {
	margin: 0;
	padding: 8px 14px;
	border-radius: 12px 12px 0 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	display: flex;
	justify-content: center;


}

#f7support-app .f7-column--new .f7-column-title {
	background: #DEF9F8;
	color: #151515;
}

#f7support-app .f7-column--progress .f7-column-title {
	background: #ECF9DE;
	color: #151515;
}

#f7support-app .f7-column--closed .f7-column-title {
	background: #F5F5F5;
	color: #151515;
}

#f7support-app .f7-column-list {
	list-style: none;
	margin: 0;
	padding: 16px 0 0 0;
	flex: 1;
	min-height: 120px;
	max-height: min(72vh, 820px);
	overflow-y: auto;
}

#f7support-app .f7-ticket-card {
	border: 1px solid #E6E6E6;
	border-radius: 8px;
	margin-bottom: 16px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	padding: 12px;
}

#f7support-app .f7-ticket-card:hover {
	border-color: #d0d0d0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#f7support-app .f7-ticket-card--active {
	outline: 2px solid #7cbc3d;
	outline-offset: 1px;
}

#f7support-app .f7-ticket-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: #F5F5F5;
	margin: 0;
	padding: 8px;
}

#f7support-app .f7-ticket-card__title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
	color: #151515;
}

#f7support-app .f7-ticket-card__title b {
	font-weight: 500;
	word-break: break-word;
}

#f7support-app .f7-ticket-card__num {
	font-weight: 500;
	color: #808080;
	margin-left: 8px;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
}

#f7support-app .f7-ticket-card__status {
	flex-shrink: 0;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 400;
	color: #fff;
	line-height: 1.2;
}

#f7support-app .f7-ticket-card__status--new {
	background: #2B9AB6;
}

#f7support-app .f7-ticket-card__status--progress {
	background: #70B62B;
}

#f7support-app .f7-ticket-card__status--closed {
	background: #808080;
}

#f7support-app .f7-ticket-card__body {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 0 0 0;
}

#f7support-app .f7-ticket-card__preview {
	flex: 1;
	margin: 0;
	color: #808080;
	font-size: 14px;
	line-height: 20px;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#f7support-app .f7-ticket-card__preview-empty {
	color: #999;
}

#f7support-app .f7-unread-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #70b62b;
	margin-top: 6px;
	box-shadow: 0 0 0 2px rgba(112, 182, 43, 0.2);
}

#f7support-app .f7-ticket-card__foot {
	display: flex;
	justify-content: flex-end;
	padding: 8px 0 0 0;
}

#f7support-app .f7-ticket-card__time {
	color: #808080;
	background: #F5F5F5;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
}

#f7support-app .f7support-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	padding: 16px;
	box-sizing: border-box;
}

#f7support-app .f7support-modal.f7support-modal-visible {
	display: flex;
}

#f7support-app .f7support-modal-panel {
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	padding: 16px;
	width: min(95vw, 100%);
	max-width: 95vw;
	height: 85vh;
	max-height: 85vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

#f7support-app .f7support-chat-panel {
	width: min(95vw, 100%);
	max-width: 95vw;
	height: 85vh;
	max-height: 85vh;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
}

#f7support-app .f7support-modal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-shrink: 0;
	position: relative;
}

#f7support-app .f7support-modal-head h3 {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 20px;
	padding-top: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: calc(100% - 40px);
}

#f7support-app .f7support-icon-btn {
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	color: #444;
	position: absolute;
	top: 0;
	right: 0;
	min-height: max-content;
	margin: 0;
}

#f7support-app .f7support-icon-btn:hover {
	color: #000;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
}

#f7support-app .f7support-input.f7s-input,
#f7support-app .f7support-textarea.f7s-input {
	margin-top: 24px;
}

#f7support-app .f7support-textarea.f7s-textarea {
	height: 200px;
	margin: 12px 0 0;
}

#f7support-app .f7support-textarea.f7s-chat-textarea,
#f7support-app .f7s-chat-textarea {
	margin-top: 0;
	border-radius: 12px;
	height: 100px !important;
	min-height: 100px !important;
	max-height: 100px !important;
	flex: 0 0 100px;
	resize: none;
}

#f7support-app .f7support-message-list {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow: auto;
	border: none;
	border-radius: 0;
	padding: 16px 0;
	margin: 8px 0 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#f7support-app .f7support-message-list.f7support-dnd-dragover {
	outline: 2px dashed rgba(124, 188, 61, 0.85);
	background: rgba(236, 249, 222, 0.35);
}

#f7support-app .f7support-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 6px;
}

#f7support-app .f7support-composer .f7support-textarea {
	flex: 1;
	margin-top: 0;
}

#f7support-app .f7support-clip-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(230, 230, 230, 1);
	border-radius: 8px;
	background: rgba(253, 253, 253, 1);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0;
	box-shadow: 0px -0.25px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 2px 0px rgba(230, 230, 230, 1);
}

#f7support-app .f7support-clip-btn:hover {
	background: #f5f5f5;
}

#f7support-app .f7support-hidden-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

#f7support-app .f7support-pending-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(253, 253, 253, 1);
	border: 1px solid rgba(230, 230, 230, 1);
	border-radius: 100px;
	margin-bottom: 8px;
	font-size: 0.9rem;
	box-shadow: 0px 1px 2px 0px rgba(230, 230, 230, 1);
}

#f7support-app .f7support-chat-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

#f7support-app .f7support-chat-footer {
	padding: 16px 0 0;
	flex-shrink: 0;
	margin-top: 8px;
}

#f7support-app #submit-ticket-btn.f7s-submit-ticket-btn,
#f7support-app #send-message-btn.f7s-submit-ticket-btn {
	float: right;
	margin: 0px;
}

#f7support-app #send-message-btn.f7s-send-message-btn {
	float: none;
	margin-top: 0;
}

#f7support-app .f7support-msg {
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}

#f7support-app .f7support-msg__atts {
	margin-top: 6px;
}

#f7support-app .f7support-att__loading {
	color: #666;
	font-size: 0.9em;
}

#f7support-app .chat-file-bubble-wrap {
	display: flex;
	width: 100%;
	margin-top: 8px;
}

#f7support-app .chat-file-bubble-wrap--out {
	justify-content: flex-end;
}

#f7support-app .chat-file-bubble-wrap--in {
	justify-content: flex-start;
}

#f7support-app .chat-file-bubble {
	max-width: min(100%, 340px);
	padding: 10px 12px 8px;
	color: #fff;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	position: relative;
	transition: filter 0.15s ease, transform 0.15s ease;
}

#f7support-app .chat-file-bubble:hover {
	filter: brightness(1.05);
}

#f7support-app .chat-file-bubble:active {
	transform: scale(0.99);
}

#f7support-app .chat-file-bubble--out {
	background: linear-gradient(165deg, #c4b5e8 0%, #9b86d8 45%, #8b7cc8 100%);
	border-radius: 14px 14px 6px 14px;
}

#f7support-app .chat-file-bubble--out::after {
	content: "";
	position: absolute;
	right: -4px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	background: #8b7cc8;
	border-radius: 0 0 10px 0;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

#f7support-app .chat-file-bubble--in {
	background: linear-gradient(165deg, #6b7280 0%, #4b5563 100%);
	border-radius: 14px 14px 14px 6px;
}

#f7support-app .chat-file-bubble--in::after {
	content: "";
	position: absolute;
	left: -4px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	background: #4b5563;
	border-radius: 0 0 0 10px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

#f7support-app .chat-file-bubble__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

#f7support-app .chat-file-bubble__icon {
	flex-shrink: 0;
	width: 44px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(180deg, #3b9eff 0%, #1e6fd9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

#f7support-app .chat-file-bubble__icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 14px 14px 0;
	border-color: transparent rgba(255, 255, 255, 0.35) transparent transparent;
}

#f7support-app .chat-file-bubble__icon-text {
	font-size: 10px;
	font-weight: 700;
	text-transform: lowercase;
	color: #fff;
	letter-spacing: 0.02em;
	max-width: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#f7support-app .chat-file-bubble__body {
	flex: 1;
	min-width: 0;
}

#f7support-app .chat-file-bubble__name {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.25;
	word-break: break-word;
}

#f7support-app .chat-file-bubble__size {
	font-size: 0.8rem;
	opacity: 0.92;
	margin-top: 4px;
}

#f7support-app .chat-file-bubble__foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 0.72rem;
	opacity: 0.92;
}

#f7support-app .chat-file-bubble__ticks {
	font-size: 0.78rem;
	letter-spacing: -3px;
	opacity: 0.95;
}

#f7support-app .f7support-dnd-target.f7support-dnd-dragover {
	outline: 2px dashed rgba(124, 188, 61, 0.85);
}

#f7support-app .chat-inline-img-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin: 4px 0;
}

#f7support-app .chat-inline-img {
	display: block;
	max-width: min(100%, min(520px, 92vw));
	max-height: min(280px, 42vh);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}


@media (max-width: 768px) {
	#f7support-app #create-ticket-modal.f7support-modal,
	#f7support-app #chat-modal.f7support-modal {
		padding: 0;
		align-items: stretch;
		justify-content: stretch;
	}

	#f7support-app #create-ticket-modal .f7s-modal-panel,
	#f7support-app #create-ticket-modal .f7support-modal-panel,
	#f7support-app #chat-modal .f7s-modal-panel,
	#f7support-app #chat-modal .f7support-modal-panel,
	#f7support-app #chat-modal .f7support-chat-panel {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
		padding-top: max(16px, env(safe-area-inset-top));
		padding-bottom: max(16px, env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	/* Канбан: карточки в ряд с горизонтальным свайпом */
	#f7support-app .f7-column {
		min-height: 0;
	}

	#f7support-app .f7-column-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		max-height: none;
		min-height: 0;
		padding: 12px 16px 16px;
		margin: 0;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	#f7support-app .f7-column-list::-webkit-scrollbar {
		display: none;
	}

	#f7support-app .f7-column-list > .f7-ticket-card {
		flex: 0 0 calc(100% - 28px);
		width: calc(100% - 28px);
		max-width: none;
		min-height: 148px;
		margin-bottom: 0;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	#f7support-app .f7-column-list > .f7-ticket-card:only-child {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
	}

	#f7support-app .f7-column-list > .f7-ticket-card .f7-ticket-card__body {
		flex: 1 1 auto;
		min-height: 0;
	}

	#f7support-app .f7-column-list > .f7-ticket-card .f7-ticket-card__preview {
		min-height: 3.6em;
		-webkit-line-clamp: 3;
	}
}