/* ── Kashif AI Pro — Frontend Tools CSS ── */
.kai-tools-hub { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; max-width:900px; margin:0 auto; }
.kai-tools-header { text-align:center; padding:32px 20px; background:linear-gradient(135deg,#4F46E5,#7C3AED); border-radius:16px 16px 0 0; color:#fff; }
.kai-tools-header h2 { font-size:1.6rem; margin:0 0 8px; color:#fff; }
.kai-tools-header p  { color:rgba(255,255,255,0.8); font-size:0.9rem; margin:0; }

/* TABS */
.kai-tools-tabs { display:flex; gap:4px; background:#F1F5F9; padding:8px; flex-wrap:wrap; }
.kai-tab { padding:8px 14px; border-radius:8px; font-size:0.82rem; font-weight:600; color:#64748B; cursor:pointer; border:none; background:none; transition:all 0.2s; white-space:nowrap; }
.kai-tab.active, .kai-tab:hover { background:#fff; color:#4F46E5; box-shadow:0 1px 4px rgba(0,0,0,0.08); }

/* PANELS */
.kai-tools-panels { background:#fff; border:1px solid #E2E8F0; border-top:none; }
.kai-panel { display:none; padding:28px; }
.kai-panel.active { display:block; }

/* TOOLS */
.kai-tool h3    { font-size:1.1rem; font-weight:700; color:#1E293B; margin:0 0 6px; }
.kai-tool-desc  { font-size:0.88rem; color:#64748B; margin:0 0 20px; }
.kai-form-group { margin-bottom:14px; }
.kai-form-group label { display:block; font-size:0.78rem; font-weight:600; color:#64748B; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:5px; }
.kai-input    { width:100%; padding:10px 14px; border:1.5px solid #E2E8F0; border-radius:8px; font-size:0.88rem; color:#1E293B; font-family:inherit; transition:border-color 0.2s; box-sizing:border-box; }
.kai-input:focus { outline:none; border-color:#4F46E5; box-shadow:0 0 0 3px rgba(79,70,229,0.08); }
.kai-textarea { width:100%; padding:12px 14px; border:1.5px solid #E2E8F0; border-radius:8px; font-size:0.88rem; color:#1E293B; resize:vertical; font-family:inherit; transition:border-color 0.2s; box-sizing:border-box; }
.kai-textarea:focus { outline:none; border-color:#4F46E5; box-shadow:0 0 0 3px rgba(79,70,229,0.08); }
.kai-select   { width:100%; padding:10px 14px; border:1.5px solid #E2E8F0; border-radius:8px; font-size:0.88rem; background:#fff; color:#1E293B; font-family:inherit; }
.kai-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* BUTTONS */
.kai-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:8px; font-size:0.88rem; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; font-family:inherit; }
.kai-btn-primary { background:linear-gradient(135deg,#4F46E5,#7C3AED); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,0.3); }
.kai-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,70,229,0.4); }
.kai-btn-icon { font-size:1rem; }

/* RESULT BOX */
.kai-result { display:none; margin-top:20px; padding:18px; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:10px; font-size:0.88rem; color:#1E293B; line-height:1.7; white-space:pre-wrap; word-wrap:break-word; position:relative; }
.kai-result.show { display:block; }
.kai-result-copy { position:absolute; top:10px; right:10px; padding:5px 12px; background:#4F46E5; color:#fff; border:none; border-radius:6px; font-size:0.75rem; cursor:pointer; }
.kai-result-provider { font-size:0.7rem; color:#94A3B8; margin-top:8px; padding-top:8px; border-top:1px solid #E2E8F0; }
.kai-spinner { display:none; width:20px; height:20px; border:2px solid #E2E8F0; border-top-color:#4F46E5; border-radius:50%; animation:kai-spin 0.7s linear infinite; margin:0 auto; }
@keyframes kai-spin { to { transform:rotate(360deg); } }

/* CHAT */
.kai-chat-tool h3 { font-size:1.1rem; font-weight:700; color:#1E293B; margin:0 0 6px; }
.kai-chat-messages { height:320px; overflow-y:auto; border:1px solid #E2E8F0; border-radius:10px; padding:16px; background:#F8FAFC; margin-bottom:12px; display:flex; flex-direction:column; gap:12px; }
.kai-chat-msg { display:flex; gap:10px; align-items:flex-start; }
.kai-chat-msg.kai-chat-user { flex-direction:row-reverse; }
.kai-chat-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#4F46E5,#7C3AED); display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.kai-chat-bubble { max-width:80%; padding:10px 14px; border-radius:12px; font-size:0.85rem; line-height:1.6; }
.kai-chat-ai   .kai-chat-bubble { background:#fff; border:1px solid #E2E8F0; color:#1E293B; }
.kai-chat-user .kai-chat-bubble { background:linear-gradient(135deg,#4F46E5,#7C3AED); color:#fff; }
.kai-chat-input-wrap { display:flex; gap:8px; margin-bottom:10px; }
.kai-chat-input { flex:1; padding:10px 14px; border:1.5px solid #E2E8F0; border-radius:8px; font-size:0.88rem; font-family:inherit; }
.kai-chat-input:focus { outline:none; border-color:#4F46E5; }
.kai-chat-send { padding:10px 16px; white-space:nowrap; flex-shrink:0; }
.kai-chat-suggestions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.kai-chat-suggestions span { font-size:0.75rem; color:#94A3B8; }
.kai-chat-suggestions button { padding:4px 10px; background:#F1F5F9; border:1px solid #E2E8F0; border-radius:50px; font-size:0.75rem; cursor:pointer; color:#64748B; transition:all 0.2s; }
.kai-chat-suggestions button:hover { background:#4F46E5; color:#fff; border-color:#4F46E5; }

/* FOOTER */
.kai-tools-footer { background:#F8FAFC; border:1px solid #E2E8F0; border-top:none; padding:14px 20px; border-radius:0 0 16px 16px; text-align:center; font-size:0.82rem; color:#64748B; }
.kai-tools-footer a { color:#4F46E5; font-weight:600; }

/* Responsive */
@media (max-width:600px) {
    .kai-tools-tabs { overflow-x:auto; flex-wrap:nowrap; }
    .kai-form-row   { grid-template-columns:1fr; }
    .kai-panel      { padding:16px; }
}