/* =============================================================================
   BarberPrime Support - Frontend (cliente)
   ============================================================================= */

.bp-support { padding: 24px; }

.bp-support__header {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.bp-support__title { margin: 0 0 4px 0; font-size: 24px; }
.bp-support__subtitle { margin: 0; color: #6B6258; font-size: 14px; }

.bp-support__view { animation: bpFadeIn .25s ease; }
@keyframes bpFadeIn { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} }

/* ===== Lista ===== */
.bp-support__list { list-style: none; margin: 0; padding: 0; }
.bp-support__list li {
	border: 1px solid #E5E0D8; border-radius: 10px; padding: 14px 16px;
	margin-bottom: 10px; cursor: pointer; transition: all .15s ease;
	background: #fff;
}
.bp-support__list li:hover { border-color: #1A1612; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.bp-support__list li.has-new {
	border-color: #E8AF3D; background: linear-gradient(to right, #FFF9E8 0%, #fff 60%);
}

.bp-ticket-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.bp-ticket-row__title { font-weight: 600; color: #1A1612; margin: 0 0 4px 0; font-size: 15px; }
.bp-ticket-row__meta {
	display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6B6258;
	margin-top: 4px;
}
.bp-ticket-row__meta strong { color: #1A1612; font-weight: 600; }

.bp-ticket-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 600; color: #fff;
}
.bp-ticket-badge--new {
	background: #E8AF3D; color: #1A1612; padding: 2px 8px;
	animation: bpPulse 1.5s ease-in-out infinite;
}
@keyframes bpPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

.bp-support__empty {
	text-align: center; padding: 40px 20px; color: #6B6258;
	border: 2px dashed #E5E0D8; border-radius: 12px;
}
.bp-support__empty-icon { font-size: 48px; margin-bottom: 8px; }
.bp-support__empty p { margin: 0 0 4px 0; }
.bp-support__hint { font-size: 13px; color: #999; }

.bp-support__loading {
	text-align: center; padding: 30px; color: #6B6258;
	display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bp-support__spinner {
	width: 18px; height: 18px; border: 2px solid #E5E0D8; border-top-color: #1A1612;
	border-radius: 50%; animation: bpSpin .8s linear infinite;
}
@keyframes bpSpin { to { transform: rotate(360deg) } }

/* ===== Form de novo ticket ===== */
.bp-support__back {
	background: none; border: none; color: #6B6258; cursor: pointer;
	font-size: 13px; padding: 6px 0; margin-bottom: 14px;
}
.bp-support__back:hover { color: #1A1612; }

.bp-support__form { max-width: 640px; }
.bp-support__form h3 { margin: 0 0 18px 0; }

.bp-support__field {
	display: block; margin-bottom: 14px;
}
.bp-support__field > span {
	display: block; font-weight: 600; font-size: 13px;
	color: #1A1612; margin-bottom: 6px;
}
.bp-support__field input, .bp-support__field select, .bp-support__field textarea {
	width: 100%; box-sizing: border-box;
	border: 1px solid #E5E0D8; border-radius: 8px; padding: 10px 12px;
	font-size: 14px; font-family: inherit;
	transition: border-color .15s ease;
}
.bp-support__field input:focus, .bp-support__field select:focus, .bp-support__field textarea:focus {
	outline: none; border-color: #1A1612;
}
.bp-support__field textarea { resize: vertical; min-height: 100px; }

.bp-support__actions { margin-top: 18px; }
.bp-support__error {
	background: #FEE1E1; border: 1px solid #B83A3A; border-radius: 8px;
	padding: 12px 14px; color: #B83A3A; font-size: 13px; margin-top: 12px;
}

/* ===== Detalhe / chat ===== */
.bp-support__detail-header {
	background: #FAFAF8; border-radius: 12px; padding: 18px;
	margin-bottom: 18px; border: 1px solid #E5E0D8;
}
.bp-support__detail-title { font-size: 20px; margin: 0 0 8px 0; }
.bp-support__detail-meta {
	display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px;
	color: #6B6258;
}

.bp-support__thread {
	max-height: 480px; overflow-y: auto;
	background: #FAFAF8; border-radius: 12px; padding: 18px;
	border: 1px solid #E5E0D8; margin-bottom: 14px;
}

.bp-msg {
	display: flex; gap: 12px; margin-bottom: 16px;
	animation: bpMsgIn .3s ease;
}
@keyframes bpMsgIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bp-msg--admin { flex-direction: row; }
.bp-msg--client { flex-direction: row-reverse; }

.bp-msg__avatar {
	width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 600;
}
.bp-msg--admin  .bp-msg__avatar { background: #1A1612; color: #E8AF3D; }
.bp-msg--client .bp-msg__avatar { background: #E8AF3D; color: #1A1612; }

.bp-msg__bubble {
	background: #fff; border: 1px solid #E5E0D8;
	border-radius: 14px; padding: 10px 14px;
	max-width: 75%; font-size: 14px; line-height: 1.5;
}
.bp-msg--admin  .bp-msg__bubble { border-top-left-radius: 4px; }
.bp-msg--client .bp-msg__bubble { border-top-right-radius: 4px; background: #FFF9E8; border-color: #E8AF3D; }

.bp-msg__author { font-size: 11px; font-weight: 600; color: #6B6258; margin-bottom: 4px; }
.bp-msg__body p { margin: 0 0 6px 0; }
.bp-msg__body p:last-child { margin: 0; }
.bp-msg__time { font-size: 11px; color: #999; margin-top: 4px; }

.bp-support__reply {
	display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px;
}
.bp-support__reply textarea {
	flex: 1; border: 1px solid #E5E0D8; border-radius: 10px;
	padding: 10px 12px; font-family: inherit; font-size: 14px;
	resize: vertical; min-height: 60px; max-height: 200px;
}
.bp-support__reply textarea:focus { outline: none; border-color: #1A1612; }
.bp-support__reply button { white-space: nowrap; }

.bp-support__live-hint {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: #2E7D5B; margin: 8px 0 0 0;
}
.bp-support__live-dot {
	width: 8px; height: 8px; border-radius: 50%; background: #2E7D5B;
	animation: bpPulse 2s ease-in-out infinite;
}

/* Closed state */
.bp-support__closed {
	background: #F3F0EB; border: 1px solid #E5E0D8; border-radius: 10px;
	padding: 14px; text-align: center; color: #6B6258; font-size: 13px;
}

/* ===== Video embed (YouTube/Vimeo) ===== */
.bp-video-embed {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
	margin: 8px 0; border-radius: 10px; background: #000;
}
.bp-video-embed iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ===== System message ===== */
.bp-msg-system {
	text-align: center; margin: 14px auto; padding: 10px 16px;
	background: #FFF9E8; border: 1px dashed #E8AF3D; border-radius: 10px;
	color: #6B6258; font-size: 13px; font-style: italic; max-width: 80%;
}

/* ===== Upload area ===== */
.bp-support__upload {
	margin: 12px 0; padding: 14px; background: #FFF9E8;
	border: 2px dashed #E8AF3D; border-radius: 10px;
	animation: bpUploadIn .35s ease;
}
@keyframes bpUploadIn { from {opacity:0;transform:translateY(-6px)} to {opacity:1;transform:translateY(0)} }

.bp-support__upload-info {
	font-size: 14px; margin-bottom: 10px; color: #1A1612;
}
.bp-support__upload-timer { color: #B83A3A; font-size: 12px; margin-left: 8px; }

.bp-support__upload form {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.bp-support__upload input[type=file] {
	flex: 1; min-width: 200px; padding: 6px; background: #fff;
	border: 1px solid #E5E0D8; border-radius: 6px; font-size: 13px;
}
.bp-support__upload small { color: #6B6258; font-size: 11px; flex-basis: 100%; }

/* IMG em msg ajusta ao bubble */
.bp-msg__body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 4px 0; }

/* Avatar com imagem */
.bp-msg__avatar img {
	width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.bp-msg__avatar { overflow: hidden; }

/* ===== Ações do cliente: encerrar ticket ===== */
.bp-support__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #EEE8DD;
}
.bp-btn--ghost {
	background: transparent;
	border: 1px solid #C8A96E;
	color: #9A7B3E;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
}
.bp-btn--ghost:hover { background: #FBF7EF; }
.bp-support__actions-hint { font-size: 12.5px; color: #9A9183; }

/* ===== Avaliação ===== */
.bp-support__rating {
	margin-top: 18px;
	padding: 20px;
	background: #FBF7EF;
	border: 1px solid #E8E2D8;
	border-radius: 14px;
	text-align: center;
}
.bp-support__rating h4 { margin: 0 0 4px; font-size: 16px; color: #1A1612; }
.bp-support__rating-sub { margin: 0 0 14px; font-size: 13px; color: #8A8178; }
.bp-support__stars {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 14px;
}
.bp-support__star {
	background: none;
	border: none;
	font-size: 34px;
	line-height: 1;
	color: #DDD6CA;
	cursor: pointer;
	transition: color .12s, transform .12s;
	padding: 0;
}
.bp-support__star:hover { transform: scale(1.15); }
.bp-support__star.is-active { color: #F0B429; }
.bp-support__rating textarea {
	width: 100%;
	max-width: 400px;
	border: 1px solid #DDD6CA;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 12px;
	box-sizing: border-box;
	resize: vertical;
}
.bp-support__rating-done {
	color: #2E7D5B;
	font-weight: 600;
	font-size: 15px;
	margin-top: 8px;
}

/* ============================================================
   📱 Responsividade do suporte do cliente (v2.16.3)
   ============================================================ */
@media (max-width: 600px) {
	/* Formulário e thread ocupam largura total */
	.bp-support__form { max-width: 100%; }
	/* Linha do ticket empilha o badge embaixo */
	.bp-ticket-row { grid-template-columns: 1fr; }
	/* Área de resposta: input e botão empilham */
	.bp-support__reply { flex-direction: column; align-items: stretch; }
	.bp-support__reply textarea { width: 100%; box-sizing: border-box; }
	.bp-support__reply .bp-btn { width: 100%; }
	/* Ações (encerrar) empilham e centralizam */
	.bp-support__actions { flex-direction: column; align-items: stretch; text-align: center; }
	.bp-support__actions .bp-btn { width: 100%; }
	/* Avaliação: textarea e estrelas com largura total */
	.bp-support__rating textarea { max-width: 100%; }
	.bp-support__stars { gap: 4px; }
	.bp-support__star { font-size: 30px; }
	/* Mensagens do chat: bolhas mais largas no mobile */
	.bp-support__msg { max-width: 90% !important; }
	/* Anexos: preview não estoura */
	.bp-support__attach-row { flex-direction: column; align-items: stretch; }
	.bp-support__attach-row > * { min-width: 0 !important; }
}