/* NOTICIAS BONAO - AI SYSTEM styles (v2.2.0) */
:root{
  --nb-primary:#e11d3f;
  --nb-secondary:#1d3557;
  --nb-bg:#ffffff;
  --nb-chat-bg:#f7f8fb;
  --nb-text:#1f2937;
  --nb-muted:#6b7280;
  --nb-border:#e5e7eb;
  --nb-shadow:0 10px 30px rgba(0,0,0,.1);
}

.ai-chat-toggle{
  position:fixed; top:20px; right:20px;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--nb-secondary),var(--nb-primary));
  color:#fff; border:none; box-shadow:var(--nb-shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10000;
}
.ai-chat-toggle .ai-badge{
  position:absolute; top:-6px; right:-6px; background:#10b981; color:#fff;
  font-size:11px; padding:2px 6px; border-radius:999px; box-shadow:var(--nb-shadow);
}
.ai-chat-toggle i{ font-size:20px; }

.ai-chatbot{
  position:fixed; top:80px; right:20px; width:360px; height:560px;
  background:var(--nb-bg); border-radius:16px; box-shadow:var(--nb-shadow);
  display:none; flex-direction:column; overflow:hidden; z-index:10000;
  border:1px solid var(--nb-border);
}
.ai-chatbot.active{ display:flex; }
.ai-chatbot.minimized{ height:56px; overflow:hidden; }

.chat-header{
  background:linear-gradient(135deg,var(--nb-secondary),var(--nb-primary));
  color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
.chat-title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.chat-actions button{
  background:transparent; border:none; color:#fff; font-size:16px; cursor:pointer; margin-left:8px;
}

.chat-messages{
  flex:1; overflow-y:auto; background:var(--nb-chat-bg); padding:12px;
}
.ai-message,.user-message{ display:flex; gap:8px; margin-bottom:10px; align-items:flex-start; }
.ai-message .message-avatar, .user-message .message-avatar{
  width:32px; height:32px; border-radius:50%; background:#eef2ff; color:var(--nb-secondary);
  display:flex; align-items:center; justify-content:center;
}
.user-message{ justify-content:flex-end; }
.user-message .message-avatar{ order:2; background:#fee2e2; color:var(--nb-primary); }
.user-message .message-content{
  background:#fff; border:1px solid var(--nb-border);
  border-radius:12px 12px 2px 12px; padding:10px 12px; max-width:70%;
}
.ai-message .message-content{
  background:#fff; border:1px solid var(--nb-border);
  border-radius:12px 12px 12px 2px; padding:10px 12px; max-width:78%;
}

.chat-input-container{
  display:flex; gap:8px; padding:10px; border-top:1px solid var(--nb-border); background:#fff;
}
.chat-input-container input{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--nb-border); outline:none;
}
.chat-input-container button{
  width:44px; border-radius:10px; background:var(--nb-primary); color:#fff; border:none; cursor:pointer;
}

.chat-suggestions{ display:flex; gap:8px; padding:8px 10px; border-top:1px solid var(--nb-border); background:#fff; flex-wrap:wrap;}
.suggestion-btn{
  background:#eef2ff; border:none; color:var(--nb-secondary); padding:6px 10px; border-radius:999px; cursor:pointer; font-size:13px;
}

.typing-indicator .message-content .dot{
  width:6px; height:6px; background:#cbd5e1; border-radius:50%; display:inline-block; margin-right:4px; animation:blink 1.2s infinite ease-in-out;
}
.typing-indicator .message-content .dot:nth-child(2){ animation-delay:.2s; }
.typing-indicator .message-content .dot:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

.chat-article-card{
  border:1px solid var(--nb-border); background:#fff; border-radius:10px; padding:8px 10px; margin-bottom:8px;
}

.ai-feature-btn{
  border:none; border-radius:10px; background:#f3f4f6; color:#111827; padding:8px 12px; margin:8px 6px 0 0; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,0.03);
}
.voice-btn{ background:#eef2ff; color:var(--nb-secondary); }
.summarize-btn{ background:#fef3c7; color:#92400e; }
.translate-btn{ background:#ecfeff; color:#0e7490; }

.translate-controls{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.translate-select{ padding:6px 8px; border:1px solid var(--nb-border); border-radius:8px; }

.translation-notice{
  background:#ecfeff; border:1px dashed #67e8f9; border-radius:8px; padding:8px 10px; margin:6px 0 12px 0; color:#0369a1;
}

.ai-summary-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:10001;
}
.ai-summary-modal .summary-content{
  width:92%; max-width:640px; background:#fff; border-radius:12px; box-shadow:var(--nb-shadow);
}
.summary-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--nb-border); }
.summary-body{ padding:14px 16px; }
.close-summary{ background:transparent; border:none; font-size:18px; cursor:pointer; }

/* Recommendations */
.ai-recommendations{ margin-top:20px; }
.ai-recommendations h3{ display:flex; align-items:center; gap:8px; }
.rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.rec-card{ display:block; border:1px solid var(--nb-border); border-radius:12px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; }
.rec-card img{ width:100%; height:120px; object-fit:cover; }
.rec-content{ padding:10px; }
.rec-content .category{ display:inline-block; font-size:12px; color:#6b7280; margin-bottom:6px; }

/* Search results block */
.smart-search-results{ background:#fff; border:1px solid var(--nb-border); border-radius:12px; padding:12px; }
.smart-search-results h3{ margin:0 0 8px; }
.smart-search-results ul{ margin:0; padding-left:18px; }

/* Responsive */
@media (max-width:680px){
  .ai-chatbot{ right:12px; width:92vw; height:60vh; }
  .ai-chat-toggle{ right:12px; }
}