/* UI Advanced overrides for AI Assistant Pro */
:root{
  --ai-font-scale: 1.1;
  --ai-space-scale: 1.12;
  --ai-radius: 14px;
  --ai-accent: #0ea5e9;
  --ai-bg: #ffffff;
  --ai-text: #0f172a;
  --ai-muted:#334155;
  --ai-bot:#F1F5F9;
  --ai-user:#DCFCE7;
  --ai-card:#ffffff;
}

/* Base scaling */
#ai-assistant-pro-v8, #ai-float-btn, .ai-popup, .ai-card, .ai-input, .ai-header {
  font-size: calc(16px * var(--ai-font-scale));
  color: var(--ai-text);
}
#ai-float-btn { background: var(--ai-accent); }

/* Popup container */
.ai-popup{
  background: var(--ai-bg);
  border-color: var(--ai-accent) !important;
  border-radius: var(--ai-radius) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Header */
.ai-header{ background: rgba(0,0,0,.02); }
#ai-close{ border-radius: var(--ai-radius); }
#ai-close:hover{ background: rgba(0,0,0,.06); }

/* Messages */
.ai-msg.bot{ background: var(--ai-bot) !important; border-radius: var(--ai-radius) !important; }
.ai-msg.user{ background: var(--ai-user) !important; border-radius: var(--ai-radius) !important; }

/* Spacing scale */
#ai-chat-window .ai-msg{ margin: calc(6px * var(--ai-space-scale)) 0; padding: calc(10px * var(--ai-space-scale)) calc(12px * var(--ai-space-scale)); }
.ai-input{ gap: calc(8px * var(--ai-space-scale)); padding: calc(10px * var(--ai-space-scale)); }
.ai-input input{ padding: calc(10px * var(--ai-space-scale)); border-radius: var(--ai-radius); }
.ai-input button{ padding: calc(10px * var(--ai-space-scale)) calc(16px * var(--ai-space-scale)); border-radius: var(--ai-radius); background: var(--ai-accent); }

/* Cards */
.ai-card{
  border-radius: var(--ai-radius) !important;
  background: var(--ai-card);
  border: 1px solid rgba(0,0,0,.08);
  gap: calc(12px * var(--ai-space-scale));
  padding: calc(12px * var(--ai-space-scale));
}
.ai-card-img img{ border-radius: calc(var(--ai-radius) - 4px); }
.ai-card-title{ font-weight: 700; margin-bottom: 4px; }
.ai-card-desc{ color: var(--ai-muted); }
.ai-chips{ color: #111827; }

.ai-card-actions .ai-btn{
  border-radius: var(--ai-radius);
  padding: calc(8px * var(--ai-space-scale)) calc(12px * var(--ai-space-scale));
}
.ai-btn-link{ background: #eef2ff; }
.ai-btn-cart{ background: #dcfce7; }

/* Inputs focus */
.ai-input input:focus{ outline: 2px solid color-mix(in srgb, var(--ai-accent) 60%, transparent); }

/* Mobile tweaks */
@media (max-width:600px){
  #ai-chat-window{ max-height: 58vh; }
  .ai-card{ flex-direction: column; }
  .ai-card-img img{ width: 100%; }
}