/* Madeira Investment AI Assistant — Styles v1.0 */
:root {
  --mi-navy: #0D1B2A;
  --mi-gold: #C9A84C;
  --mi-gold-alpha: rgba(201,168,76,0.18);
  --mi-gold-border: rgba(201,168,76,0.28);
  --mi-text: rgba(255,255,255,0.88);
  --mi-muted: rgba(255,255,255,0.45);
  --mi-surface: rgba(255,255,255,0.05);
  --mi-r: 14px;
}

/* ── Wrap ── */
.mi-assistant-wrap { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 780px; margin: 0 auto 24px; }

/* ── Chat window ── */
.mi-chat-window { background: #0f2035; border: 1px solid var(--mi-gold-border); border-radius: 18px; overflow: hidden; }

/* ── Top bar ── */
.mi-topbar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--mi-gold-border); background: rgba(201,168,76,0.06); }
.mi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mi-gold); box-shadow: 0 0 7px var(--mi-gold); animation: mi-pulse 2s infinite; flex-shrink: 0; }
@keyframes mi-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
.mi-topbar-label { font-size: 13px; color: var(--mi-muted); }
.mi-topbar-label strong.mi-name { color: var(--mi-gold); font-weight: 500; }
.mi-badge { margin-left: auto; font-size: 10px; padding: 3px 9px; border-radius: 20px; font-weight: 500; letter-spacing: 0.4px; }
.mi-badge-live { background: rgba(61,220,132,0.1); color: #3ddc84; border: 1px solid rgba(61,220,132,0.22); }

/* ── Messages ── */
.mi-messages { padding: 20px 18px; min-height: 340px; max-height: 440px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--mi-gold-border) transparent; }
.mi-msg { display: flex; gap: 9px; }
.mi-msg-user { flex-direction: row-reverse; }
.mi-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--mi-gold-alpha); border: 1px solid var(--mi-gold-border); color: var(--mi-gold); }
.mi-msg-user .mi-avatar { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); font-size: 11px; }
.mi-bubble { max-width: 76%; padding: 11px 15px; border-radius: 13px; font-size: 14px; line-height: 1.65; }
.mi-bubble-ai { background: var(--mi-surface); border: 1px solid var(--mi-gold-border); color: var(--mi-text); }
.mi-bubble-user { background: var(--mi-gold-alpha); border: 1px solid var(--mi-gold-border); color: var(--mi-text); }
.mi-bubble strong { color: var(--mi-gold); font-weight: 500; }
.mi-bubble ul { padding-left: 16px; margin: 6px 0 0; }
.mi-bubble ul li { margin-bottom: 3px; }

/* ── Typing ── */
.mi-typing { display: flex; gap: 4px; align-items: center; padding: 3px 0; }
.mi-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mi-gold); opacity: 0.4; animation: mi-blink 1.2s infinite; }
.mi-typing span:nth-child(2) { animation-delay:.2s } .mi-typing span:nth-child(3) { animation-delay:.4s }
@keyframes mi-blink { 0%,80%,100%{opacity:0.25} 40%{opacity:1} }

/* ── Quick buttons ── */
.mi-quick-btns { padding: 0 18px 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.mi-qbtn { font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 30px; border: 1px solid var(--mi-gold-border); background: var(--mi-gold-alpha); color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.18s; white-space: nowrap; }
.mi-qbtn:hover { border-color: var(--mi-gold); color: var(--mi-gold); background: rgba(201,168,76,0.14); }

/* ── Input area ── */
.mi-input-area { display: flex; gap: 9px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid rgba(201,168,76,0.1); background: rgba(0,0,0,0.15); }
.mi-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--mi-gold-border); border-radius: 10px; color: var(--mi-text); font-family: inherit; font-size: 14px; padding: 9px 13px; resize: none; outline: none; min-height: 42px; max-height: 110px; transition: border-color 0.18s; }
.mi-input::placeholder { color: var(--mi-muted); }
.mi-input:focus { border-color: rgba(201,168,76,0.55); }
.mi-send-btn { width: 42px; height: 42px; border-radius: 10px; background: var(--mi-gold); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #0D1B2A; transition: opacity 0.18s, transform 0.12s; flex-shrink: 0; }
.mi-send-btn:hover { opacity: 0.85; transform: scale(1.04); }
.mi-send-btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }

/* ── Email panel ── */
.mi-email-panel { margin-top: 10px; border: 1px solid var(--mi-gold-border); border-radius: var(--mi-r); overflow: hidden; background: #0f2035; }
.mi-email-header { display: flex; align-items: center; gap: 9px; padding: 11px 16px; background: rgba(201,168,76,0.06); border-bottom: 1px solid transparent; cursor: pointer; user-select: none; color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; }
.mi-email-header svg { color: var(--mi-gold); flex-shrink: 0; }
.mi-arrow { margin-left: auto; font-size: 11px; color: var(--mi-muted); transition: transform 0.2s; }
.mi-arrow.open { transform: rotate(180deg); }
.mi-email-header.open { border-bottom-color: var(--mi-gold-border); }
.mi-email-body { padding: 16px; display: none; flex-direction: column; gap: 10px; }
.mi-email-body.open { display: flex; }
.mi-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mi-field { display: flex; flex-direction: column; gap: 4px; }
.mi-label { font-size: 10px; font-weight: 500; color: var(--mi-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.mi-finput, .mi-ftextarea { background: rgba(255,255,255,0.05); border: 1px solid var(--mi-gold-border); border-radius: 8px; color: var(--mi-text); font-family: inherit; font-size: 13px; padding: 8px 11px; outline: none; width: 100%; transition: border-color 0.18s; }
.mi-ftextarea { min-height: 85px; resize: vertical; }
.mi-finput:focus, .mi-ftextarea:focus { border-color: rgba(201,168,76,0.5); }
.mi-finput::placeholder, .mi-ftextarea::placeholder { color: rgba(255,255,255,0.22); }
.mi-email-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.mi-btn-generate { font-family: inherit; font-size: 12px; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--mi-gold-border); background: var(--mi-gold-alpha); color: var(--mi-gold); cursor: pointer; transition: all 0.18s; }
.mi-btn-generate:hover { background: rgba(201,168,76,0.2); }
.mi-btn-send { font-family: inherit; font-size: 12px; font-weight: 500; padding: 8px 16px; border-radius: 8px; border: none; background: var(--mi-gold); color: #0D1B2A; cursor: pointer; transition: opacity 0.18s; }
.mi-btn-send:hover { opacity: 0.85; }
.mi-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
.mi-status { font-size: 12px; padding: 7px 10px; border-radius: 6px; display: none; }
.mi-status.success { display: block; background: rgba(61,220,132,0.09); color: #3ddc84; border: 1px solid rgba(61,220,132,0.2); }
.mi-status.error   { display: block; background: rgba(255,80,80,0.09); color: #ff7777; border: 1px solid rgba(255,80,80,0.2); }

/* ── Floating bubble ── */
#mi-floating-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 99999; font-family: 'DM Sans', -apple-system, sans-serif; }
#mi-bubble-btn { display: flex; align-items: center; gap: 8px; background: var(--mi-gold); color: #0D1B2A; border: none; border-radius: 50px; padding: 12px 20px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 20px rgba(201,168,76,0.35); transition: transform 0.18s, box-shadow 0.18s; font-family: inherit; }
#mi-bubble-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(201,168,76,0.45); }
#mi-floating-panel { display: none; position: fixed; bottom: 80px; right: 24px; width: min(420px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; border-radius: 18px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
#mi-floating-panel.open { display: block; }
#mi-floating-panel .mi-assistant-wrap { margin: 0; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .mi-row-2 { grid-template-columns: 1fr; }
  .mi-bubble { max-width: 88%; }
  .mi-quick-btns { gap: 5px; }
  .mi-qbtn { font-size: 11px; padding: 5px 10px; }
}