/* Zainly Writer - chat widget & editor panel */
.zainly-chat, .zainly-panel {
	--pdw-primary: #4f46e5;
	--pdw-primary-dark: #4338ca;
	--pdw-ink: #0f172a;
	--pdw-muted: #64748b;
	--pdw-line: #e5e7eb;
	--pdw-soft: #f8fafc;
	--pdw-good: #15803d;
	--pdw-bad: #b91c1c;
}

/* ---------- Chat ---------- */
.zainly-chat { max-width: 900px; }
.zainly-chat-log {
	height: 380px; overflow-y: auto; padding: 16px;
	background: linear-gradient(180deg, #f8fafc, #f1f5f9);
	border: 1px solid var(--pdw-line); border-radius: 14px; margin-bottom: 12px;
	scroll-behavior: smooth;
}
.zainly-chat-empty { text-align: center; color: var(--pdw-muted); padding: 60px 20px; }
.zainly-chat-empty .dashicons { font-size: 40px; width: 40px; height: 40px; color: var(--pdw-primary); opacity: .55; }
.zainly-chat-empty p { max-width: 360px; margin: 8px auto 0; }

.zainly-chat-msg {
	max-width: 86%; margin: 0 0 12px; padding: 10px 14px;
	border-radius: 16px 16px 16px 4px; background: #fff;
	border: 1px solid var(--pdw-line); line-height: 1.55; word-wrap: break-word;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	animation: zainlyPop .18s ease-out;
}
.zainly-chat-msg.is-user {
	margin-left: auto; color: #fff; border: 0;
	border-radius: 16px 16px 4px 16px;
	background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.zainly-chat-msg.is-user .zainly-chat-who { color: rgba(255, 255, 255, .75); }
.zainly-chat-msg.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.zainly-chat-msg.is-typing .zainly-chat-body { animation: zainlyPulse 1.1s infinite; }
.zainly-chat-who { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pdw-muted); margin-bottom: 3px; }
.zainly-chat-meta { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.zainly-chat-body code { background: #eef2ff; color: var(--pdw-primary-dark); padding: 1px 5px; border-radius: 4px; }
.zainly-chat-actions { margin-top: 8px; display: flex; gap: 14px; font-size: 12px; }
.zainly-chat-actions .button-link { color: var(--pdw-primary); text-decoration: none; font-weight: 600; }

.zainly-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.zainly-chip {
	background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
	padding: 5px 13px; font-size: 12px; cursor: pointer; color: #374151;
	transition: all .15s;
}
.zainly-chip:hover { border-color: var(--pdw-primary); color: var(--pdw-primary); background: #eef2ff; }
.zainly-chat-context { display: block; margin-bottom: 8px; font-size: 12px; color: var(--pdw-muted); }

.zainly-chat-compose {
	display: flex; gap: 8px; align-items: flex-end; padding: 8px;
	background: #fff; border: 1px solid #d1d5db; border-radius: 14px;
}
.zainly-chat-compose:focus-within { border-color: var(--pdw-primary); box-shadow: 0 0 0 1px var(--pdw-primary); }
.zainly-chat-input {
	flex: 1; resize: none; min-height: 44px; max-height: 160px;
	border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0;
}
.zainly-chat-send { border-radius: 10px !important; min-width: 70px; }
.zainly-chat-foot { margin-top: 8px; font-size: 12px; color: var(--pdw-muted); display: flex; gap: 12px; }
.zainly-chat-foot .button-link { color: var(--pdw-muted); }

@keyframes zainlyPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes zainlyPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Editor panel (meta box + block editor sidebar) ---------- */
.zainly-panel-alert {
	display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px;
	padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
	background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.zainly-panel-alert .dashicons { color: #d97706; flex: none; }

.zainly-panel-tabs {
	display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
	background: #eef0f6; border-radius: 10px;
}
.zainly-panel-tab {
	flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 5px;
	background: transparent; border: 0; border-radius: 8px; padding: 8px 10px;
	font-size: 13px; color: var(--pdw-muted); cursor: pointer;
}
.zainly-panel-tab .dashicons { font-size: 16px; width: 16px; height: 16px; }
.zainly-panel-tab.is-active { background: #fff; color: var(--pdw-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.zainly-panel-pane { display: none; }
.zainly-panel-pane.is-active { display: block; }

.zainly-step {
	margin-bottom: 14px; padding: 14px; background: var(--pdw-soft);
	border: 1px solid var(--pdw-line); border-radius: 12px;
}
.zainly-step-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; color: var(--pdw-ink); }
.zainly-step-num {
	width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
	font-size: 12px; color: #fff; background: var(--pdw-primary);
}
.zainly-field { margin-bottom: 12px; }
.zainly-field-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }

.zainly-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.zainly-seg-btn {
	background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
	padding: 4px 12px; font-size: 12px; cursor: pointer; color: #374151;
}
.zainly-seg-btn:hover { border-color: var(--pdw-primary); }
.zainly-seg-btn.is-active { background: var(--pdw-primary); border-color: var(--pdw-primary); color: #fff; font-weight: 600; }
.zainly-words { width: 90px; margin-top: 8px; }

.zainly-gen-row { display: flex; align-items: center; gap: 6px; }
.zainly-gen-btn {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
	width: 100%; min-height: 38px; font-size: 13px !important; border-radius: 10px !important;
}
.zainly-gen-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }
.zainly-gen-row .spinner { float: none; margin: 0; }
.zainly-panel-status { margin-top: 8px; font-size: 12px; font-weight: 500; min-height: 16px; }

.zainly-step textarea { border-radius: 10px; line-height: 1.5; }
.zainly-panel-meta { margin-top: 6px; font-size: 12px; color: var(--pdw-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zainly-tag { background: #eef2ff; color: var(--pdw-primary-dark); padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.zainly-panel-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.zainly-panel-actions .button { border-radius: 8px; }
.zainly-panel-seo { display: block; margin-top: 12px; font-size: 12px; color: var(--pdw-muted); line-height: 1.5; }

.zainly-quick-wrap { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.zainly-quick-btn { border-color: var(--pdw-primary) !important; color: var(--pdw-primary) !important; font-weight: 600; }
.zainly-quick-btn::before { content: "\2728  "; }

/* Block editor sidebar specifics */
.zainly-sidebar-host { padding: 16px; }
.zainly-panel.is-sidebar .zainly-step { padding: 12px; }
.zainly-panel.is-sidebar .zainly-panel-actions .button { flex: 1 1 100%; justify-content: center; text-align: center; }
.zainly-panel.is-sidebar .zainly-chat-log { height: 300px; padding: 10px; }
.zainly-panel.is-sidebar .zainly-chat-msg { max-width: 94%; }
.zainly-panel.is-classic .zainly-chat-log { height: 280px; }
.zainly-quick-panel .zainly-quick-help { margin: 0 0 12px; color: #6b7280; font-size: 12px; }
.zainly-quick-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zainly-quick-status { margin: 6px 0; font-size: 12px; color: #374151; }

/* =====================================================================
   v1.6 - friendlier editor panel
   ===================================================================== */
.zainly-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zainly-panel-head-icon {
	flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
	background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
}
.zainly-panel-head-icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.zainly-panel-head-text { display: flex; flex-direction: column; line-height: 1.3; }
.zainly-panel-head-text strong { font-size: 15px; color: var(--pdw-ink); }
.zainly-panel-head-text span { font-size: 12px; color: var(--pdw-muted); }

.zainly-help { margin: 0 0 14px; color: #475569; font-size: 13px; line-height: 1.55; }

/* "More options" collapsibles */
.zainly-more { margin: 0 0 14px; border: 1px solid var(--pdw-line); border-radius: 10px; background: #fff; }
.zainly-more > summary {
	cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--pdw-primary);
	list-style: none; display: flex; align-items: center; gap: 6px;
}
.zainly-more > summary::-webkit-details-marker { display: none; }
.zainly-more > summary::before { content: "\203A"; font-size: 16px; line-height: 1; transition: transform .15s; }
.zainly-more[open] > summary::before { transform: rotate(90deg); }
.zainly-more-body { padding: 4px 12px 12px; }
.zainly-more-body .zainly-field-label { margin-top: 8px; }
.zainly-more-body .zainly-words { width: 110px; display: block; }

/* Big generate button */
.zainly-gen-btn { margin-top: 2px; }
.zainly-gen-btn.is-loading .dashicons { animation: zainlySpin 1s linear infinite; }
@keyframes zainlySpin { to { transform: rotate(360deg); } }
.zainly-panel-status:empty { display: none; }
.zainly-panel-status { padding: 8px 10px; border-radius: 8px; background: #f8fafc; }

/* Result card */
.zainly-result { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--pdw-line); }
.zainly-result textarea { border-radius: 10px; line-height: 1.55; font-size: 13.5px; }
.zainly-counter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 12px; font-size: 12px; color: var(--pdw-muted); }
.zainly-seo-pill:empty { display: none; }
.zainly-seo-pill { padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.zainly-seo-pill.is-good { background: #dcfce7; color: #166534; }
.zainly-seo-pill.is-warn { background: #fef3c7; color: #92400e; }
.zainly-result .zainly-panel-actions { margin: 0 0 12px; }

/* Blog tab card */
.zainly-blogcard { text-align: center; padding: 22px 18px; border-radius: 14px; background: linear-gradient(160deg, #f5f3ff, #eff6ff); border: 1px solid #e0e7ff; }
.zainly-blogcard-icon {
	display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 8px;
	background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
}
.zainly-blogcard-icon .dashicons { font-size: 28px; width: 28px; height: 28px; }
.zainly-blogcard h4 { margin: 4px 0 6px; font-size: 16px; }
.zainly-blogcard p { margin: 0 auto 12px; max-width: 420px; color: #475569; }
.zainly-blogcard ul { list-style: none; margin: 0 auto 16px; padding: 0; display: inline-block; text-align: left; color: #334155; font-size: 13px; }
.zainly-blogcard li { padding: 3px 0 3px 22px; position: relative; }
.zainly-blogcard li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
.zainly-blogcard .button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border-radius: 10px; }
.zainly-blogcard .button .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Three tabs fit nicely in the narrow sidebar */
.zainly-panel.is-sidebar .zainly-panel-tab { padding: 8px 4px; font-size: 12.5px; }
.zainly-panel.is-sidebar .zainly-panel-tab .dashicons { display: none; }
.zainly-panel.is-sidebar .zainly-panel-head { margin-bottom: 12px; }