/* JP Word Analyzer — estilo minimalista/premium (fundo claro, cards brancos, sombras suaves) */

.jpwa-app {
	--jpwa-bg: #F7F8FA;
	--jpwa-card: #FFFFFF;
	--jpwa-border: #E7E9EE;
	--jpwa-text: #1F2430;
	--jpwa-muted: #7A8194;
	--jpwa-accent: #4C6FFF;
	--jpwa-accent-soft: #EEF1FF;
	--jpwa-radius: 16px;
	--jpwa-shadow: 0 6px 24px rgba(20, 24, 40, 0.06);
	--jpwa-shadow-sm: 0 2px 10px rgba(20, 24, 40, 0.05);

	max-width: 880px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Roboto, sans-serif;
	color: var(--jpwa-text);
	box-sizing: border-box;
}
.jpwa-app *, .jpwa-app *::before, .jpwa-app *::after { box-sizing: inherit; }

/* Classe usada para esconder elementos em vez do atributo HTML "hidden":
 * alguns temas/construtores de página do WordPress removem esse atributo
 * (ou sobrescrevem seu comportamento) ao renderizar o shortcode, o que
 * deixava o painel lateral e outras seções sempre visíveis ao carregar a
 * página. O !important + alta especificidade garantem que isso não volte
 * a acontecer, mesmo que o CSS do tema tente forçar "display". */
.jpwa-app .jpwa-hidden,
.jpwa-hidden.jpwa-panel-overlay,
.jpwa-hidden.jpwa-toast {
	display: none !important;
}

/* ---------- Caixa de entrada ---------- */
.jpwa-input-card {
	background: var(--jpwa-card);
	border: 1px solid var(--jpwa-border);
	border-radius: 20px;
	box-shadow: var(--jpwa-shadow);
	padding: 18px 18px 12px;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}

/* Destaque ao arrastar um arquivo de imagem sobre a caixa de entrada
 * (leitura por OCR via drag-and-drop). Usa as próprias variáveis do
 * tema ativo, então já se adapta a qualquer tema automaticamente. */
.jpwa-input-card.is-drag-over {
	border-style: dashed;
	border-color: var(--jpwa-accent);
	background: var(--jpwa-accent-soft);
}
.jpwa-input-card.is-drag-over::after {
	content: attr(data-drop-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	background: var(--jpwa-accent-soft);
	color: var(--jpwa-accent);
	font-weight: 700;
	font-size: 14px;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

.jpwa-input {
	width: 100%;
	min-height: 56px;
	max-height: 320px;
	resize: none;
	border: none;
	outline: none;
	font-size: 17px;
	line-height: 1.6;
	font-family: inherit;
	color: var(--jpwa-text);
	background: transparent;
	overflow-y: auto;
}
.jpwa-input::placeholder { color: #B7BCC9; }

.jpwa-input-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--jpwa-border);
}

.jpwa-toolbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--jpwa-muted);
	font-size: 13px;
}

.jpwa-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: var(--jpwa-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	/* Reset explícito: sem isso, quando esta classe é usada num <button>
	 * de verdade (em vez de <label>), o CSS global de botões do TEMA do
	 * site (cores, fundo, borda) "vaza" para dentro do plugin, porque o
	 * navegador/tema aplica suas próprias regras a elementos <button>
	 * que não têm essas propriedades definidas explicitamente aqui. */
	background: none;
	border: 1px solid transparent;
	padding: 0;
	margin: 0;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}
.jpwa-icon-btn:hover { background: var(--jpwa-accent-soft); color: var(--jpwa-accent); }
.jpwa-icon-btn.is-busy { opacity: .45; pointer-events: none; animation: jpwa-pulse 1s ease-in-out infinite; }
@keyframes jpwa-pulse { 50% { opacity: .8; } }

.jpwa-vertical-toggle {
	border-color: var(--jpwa-border);
}
.jpwa-vertical-toggle-icon {
	transition: transform .2s ease;
}
/* "Deitada" (↔) no modo horizontal (padrão) e "em pé" (↕) no modo
 * vertical — a mesma seta gira 90°, então fica claro que o botão
 * alterna entre as duas orientações a cada clique. */
.jpwa-vertical-toggle.is-active .jpwa-vertical-toggle-icon {
	transform: rotate(90deg);
}
.jpwa-vertical-toggle.is-active {
	background: var(--jpwa-accent);
	border-color: var(--jpwa-accent);
	color: #fff;
}

.jpwa-mode-select {
	border: 1px solid var(--jpwa-border);
	border-radius: 10px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--jpwa-text);
	background: #FBFBFD;
}

.jpwa-char-count { white-space: nowrap; }

.jpwa-convert-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--jpwa-text);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease, transform .1s ease;
}
.jpwa-convert-btn:hover { opacity: .88; }
.jpwa-convert-btn:active { transform: scale(.98); }
.jpwa-convert-btn:disabled { opacity: .6; cursor: default; }

.jpwa-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	display: none;
	animation: jpwa-spin .7s linear infinite;
}
.jpwa-convert-btn.is-loading .jpwa-spinner { display: inline-block; }
.jpwa-convert-btn.is-loading .jpwa-btn-label { opacity: .8; }
@keyframes jpwa-spin { to { transform: rotate(360deg); } }

/* ---------- Status ---------- */
.jpwa-status {
	margin-top: 14px;
	font-size: 13px;
	color: var(--jpwa-muted);
	text-align: center;
}

/* ---------- Cards genéricos ---------- */
.jpwa-card {
	background: var(--jpwa-card);
	border: 1px solid var(--jpwa-border);
	border-radius: var(--jpwa-radius);
	box-shadow: var(--jpwa-shadow-sm);
	padding: 20px;
}

.jpwa-result { margin-top: 20px; flex-direction: column; gap: 16px; display: none; }
.jpwa-result:not([hidden]) { display: flex; }

/* ---------- Frase completa interpretada ---------- */
.jpwa-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.jpwa-card-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.jpwa-result-actions { display: flex; gap: 6px; }

.jpwa-ghost-btn {
	background: transparent;
	border: 1px solid var(--jpwa-border);
	color: var(--jpwa-muted);
	border-radius: 8px;
	font-size: 12px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all .15s ease;
}
.jpwa-ghost-btn:hover { border-color: var(--jpwa-accent); color: var(--jpwa-accent); }

.jpwa-line { padding: 10px 0; border-top: 1px solid var(--jpwa-border); }
.jpwa-line:first-of-type { border-top: none; padding-top: 0; }
.jpwa-line[hidden] { display: none; }

.jpwa-line-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--jpwa-muted);
	margin-bottom: 4px;
}
.jpwa-line-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	white-space: pre-line;
}
.jpwa-line[data-line="original"] .jpwa-line-text { font-size: 20px; font-weight: 600; }
.jpwa-line[data-line="romaji"] .jpwa-line-text { color: var(--jpwa-muted); font-style: italic; }

/* ---------- Controles de visualização / filtros ---------- */
.jpwa-view-controls, .jpwa-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jpwa-toggle-chip, .jpwa-filter-chip {
	border: 1px solid var(--jpwa-border);
	background: var(--jpwa-card);
	color: var(--jpwa-muted);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
}
.jpwa-toggle-chip.is-active {
	background: var(--jpwa-text);
	border-color: var(--jpwa-text);
	color: #fff;
}
.jpwa-filter-chip.is-active {
	background: var(--jpwa-accent-soft);
	border-color: var(--jpwa-accent);
	color: var(--jpwa-accent);
	font-weight: 600;
}

/* Cores suaves por categoria gramatical (usadas também nas linhas da tabela) */
.jpwa-filter-chip[data-filter="verbo"].is-active       { background: #EAF1FF; border-color: #4C8DFF; color: #315FD1; }
.jpwa-filter-chip[data-filter="substantivo"].is-active  { background: #E9FBF3; border-color: #2FB380; color: #1D8A62; }
.jpwa-filter-chip[data-filter="adjetivo"].is-active     { background: #FFF3E8; border-color: #F2994A; color: #C6752A; }
.jpwa-filter-chip[data-filter="particula"].is-active    { background: #F4EEFF; border-color: #B18CFE; color: #7B4FDE; }
.jpwa-filter-chip[data-filter="adverbio"].is-active     { background: #FDEDF0; border-color: #E85D75; color: #C63A53; }
.jpwa-filter-chip[data-filter="kanji"].is-active        { background: #FDF3D8; border-color: #C7952A; color: #93701F; }
.jpwa-filter-chip[data-filter="expressao"].is-active    { background: #F1F2F4; border-color: #9AA0A6; color: #5F6570; }

/* ---------- Botão Mostrar tabela ---------- */
.jpwa-show-table-wrap { display: flex; justify-content: center; }
.jpwa-show-table-btn {
	background: var(--jpwa-card);
	border: 1px solid var(--jpwa-border);
	color: var(--jpwa-text);
	border-radius: 12px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--jpwa-shadow-sm);
	transition: all .15s ease;
}
.jpwa-show-table-btn:hover { border-color: var(--jpwa-accent); color: var(--jpwa-accent); }

/* ---------- Tabela ---------- */
.jpwa-table-wrap {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s ease;
}
.jpwa-table-wrap.is-open { max-height: 4000px; }

.jpwa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.jpwa-table thead th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--jpwa-muted);
	padding: 8px 10px;
	border-bottom: 1px solid var(--jpwa-border);
}
.jpwa-table tbody td {
	padding: 10px;
	border-bottom: 1px solid var(--jpwa-border);
	vertical-align: top;
}
.jpwa-table tbody tr:last-child td { border-bottom: none; }
.jpwa-table tbody tr { cursor: pointer; transition: background .12s ease; }
.jpwa-table tbody tr:hover { background: #FAFBFF; }

.jpwa-row-word { font-weight: 600; font-size: 15px; }

.jpwa-pos-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.jpwa-pos-badge.pos-verbo       { background: #EAF1FF; color: #315FD1; }
.jpwa-pos-badge.pos-substantivo { background: #E9FBF3; color: #1D8A62; }
.jpwa-pos-badge.pos-adjetivo    { background: #FFF3E8; color: #C6752A; }
.jpwa-pos-badge.pos-particula   { background: #F4EEFF; color: #7B4FDE; }
.jpwa-pos-badge.pos-adverbio    { background: #FDEDF0; color: #C63A53; }
.jpwa-pos-badge.pos-expressao   { background: #F1F2F4; color: #5F6570; }

.jpwa-fav-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: #D8DAE2;
}
.jpwa-fav-btn.is-active { color: #F2A93B; }

.jpwa-table tbody tr[hidden] { display: none; }

/* ---------- Painel lateral (detalhes da palavra) ---------- */
/* Redeclaramos as variáveis de cor aqui porque este bloco é movido via JS
 * para ser filho direto de <body> (fora de .jpwa-app), para que o
 * position:fixed não fique preso a um ancestral do tema com transform/
 * filter/contain — o que limitaria o overlay à largura do conteúdo em vez
 * de cobrir a tela inteira. */
.jpwa-panel-overlay {
	--jpwa-card: #FFFFFF;
	--jpwa-border: #E7E9EE;
	--jpwa-text: #1F2430;
	--jpwa-muted: #7A8194;

	position: fixed;
	inset: 0;
	background: rgba(20, 22, 30, .35);
	justify-content: flex-end;
	z-index: 999999;
	display: none;
}
.jpwa-panel-overlay:not([hidden]):not(.jpwa-hidden) {
	display: flex;
}
.jpwa-panel {
	width: min(420px, 100%);
	height: 100%;
	background: var(--jpwa-card);
	box-shadow: -12px 0 30px rgba(0,0,0,.12);
	padding: 24px;
	overflow-y: auto;
	position: relative;
	animation: jpwa-slide-in .22s ease;
}
@keyframes jpwa-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.jpwa-panel-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: #F1F2F5;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--jpwa-muted);
}

.jpwa-panel h2 { font-size: 26px; margin: 0 0 4px; }
.jpwa-panel .jpwa-panel-sub { color: var(--jpwa-muted); font-size: 14px; margin-bottom: 18px; }
.jpwa-panel-section { margin-bottom: 18px; }
.jpwa-panel-section h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--jpwa-muted);
	margin: 0 0 8px;
}
.jpwa-kanji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
}
.jpwa-kanji-chip {
	background: #FAFBFD;
	border: 1px solid var(--jpwa-border);
	border-radius: 10px;
	padding: 8px;
	text-align: center;
	font-size: 22px;
	cursor: pointer;
}
.jpwa-kanji-detail dl { margin: 0; font-size: 13px; }
.jpwa-kanji-detail dt { color: var(--jpwa-muted); margin-top: 8px; }
.jpwa-kanji-detail dd { margin: 2px 0 0; }

.jpwa-panel-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- Barra / painel de aprendizado ---------- */
.jpwa-learning-bar {
	display: flex;
	gap: 6px;
	margin-top: 28px;
	border-bottom: 1px solid var(--jpwa-border);
	overflow-x: auto;
}
.jpwa-learning-tab {
	background: none;
	border: none;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--jpwa-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.jpwa-learning-tab.is-active { color: var(--jpwa-text); border-color: var(--jpwa-text); font-weight: 600; }
.jpwa-learning-tab span {
	background: var(--jpwa-accent-soft);
	color: var(--jpwa-accent);
	border-radius: 999px;
	font-size: 11px;
	padding: 1px 7px;
	margin-left: 4px;
}

.jpwa-learning-content { padding: 16px 2px; }
.jpwa-vocab-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--jpwa-border);
	border-radius: 12px;
	margin-bottom: 8px;
	background: var(--jpwa-card);
}
.jpwa-vocab-item .jpwa-vocab-main { display: flex; flex-direction: column; }
.jpwa-vocab-item .jpwa-vocab-word { font-weight: 600; }
.jpwa-vocab-item .jpwa-vocab-meta { font-size: 12px; color: var(--jpwa-muted); }
.jpwa-vocab-remove { background: none; border: none; color: var(--jpwa-muted); cursor: pointer; font-size: 16px; }

/* Cena com perspectiva 3D — o "cartão" (frente + verso) gira dentro
 * dela ao ser clicado, em vez de trocar o texto instantaneamente. */
.jpwa-flashcard-scene {
	max-width: 320px;
	margin: 0 auto;
	min-height: 160px;
	perspective: 1200px;
}

.jpwa-flashcard-card {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 160px;
	cursor: pointer;
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.4, .15, .2, 1);
}
.jpwa-flashcard-card.is-flipped {
	transform: rotateY(180deg);
}

.jpwa-flashcard-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background: var(--jpwa-card);
	border: 1px solid var(--jpwa-border);
	border-radius: 16px;
	box-shadow: var(--jpwa-shadow);
	padding: 40px 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 600;
}
.jpwa-flashcard-back {
	transform: rotateY(180deg);
	font-size: 17px;
	font-weight: 500;
}

.jpwa-flashcard-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.jpwa-empty-state { text-align: center; color: var(--jpwa-muted); font-size: 13px; padding: 24px; }

/* ---------- Toast ---------- */
.jpwa-toast {
	--jpwa-text: #1F2430;
	--jpwa-shadow: 0 6px 24px rgba(20, 24, 40, 0.06);

	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jpwa-text);
	color: #fff;
	padding: 10px 18px;
	border-radius: 10px;
	font-size: 13px;
	box-shadow: var(--jpwa-shadow);
	z-index: 999999;
}

/* ---------- Responsivo ---------- */
@media (max-width: 600px) {
	.jpwa-app { padding: 12px 10px 48px; }
	.jpwa-input-toolbar { flex-wrap: wrap; }
	.jpwa-table { font-size: 13px; }
	.jpwa-card-header { flex-direction: column; align-items: flex-start; }
}