/* Multi-AI Chat — Dreameans Edition — chat.css */
:root{
  --maic-bg:     #16181d;
  --maic-surf:   #1e2028;
  --maic-surf2:  #26204e;
  --maic-brd:    rgba(124,58,237,.28);
  --maic-brd2:   rgba(212,168,71,.25);
  --maic-text:   #f0ecff;
  --maic-text2:  #c4b8f0;
  --maic-muted:  #6b7280;
  --maic-accent: #7c3aed;
  --maic-user-bg:#7c3aed;
  --maic-user-t: #fff;
  --maic-ai-bg:  #23262f;
  --maic-ai-t:   #dde1ec;
  --maic-shadow: 0 24px 64px rgba(0,0,0,.55);
  --maic-r:      18px;
}

/* Root */
.maic-root{font-family:'DM Sans','Segoe UI',system-ui,sans-serif}

/* Floating */
.maic-floating{position:fixed;bottom:24px;z-index:99999}
.maic-bottom-right{right:24px}
.maic-bottom-left{left:24px}

/* Toggle button */
.maic-toggle{
  width:60px;height:60px;border-radius:50%;
  background:var(--maic-accent);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;margin-left:auto;position:relative;
  box-shadow:0 6px 26px rgba(124,58,237,.45);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.maic-bottom-left .maic-toggle{margin-left:0}
.maic-toggle:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(124,58,237,.6)}
.maic-ico{display:flex;position:absolute;transition:.28s ease}
.maic-ico svg{width:24px;height:24px}
.maic-ico-close{opacity:0;transform:rotate(-90deg) scale(.4)}
.maic-root.maic-open .maic-ico-open{opacity:0;transform:rotate(90deg) scale(.4)}
.maic-root.maic-open .maic-ico-close{opacity:1;transform:rotate(0) scale(1)}
.maic-pulse{position:absolute;top:2px;right:2px;width:11px;height:11px;background:#4ade80;border-radius:50%;border:2px solid #fff;animation:maic-pulse 2s infinite}
@keyframes maic-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* Panel */
.maic-panel{
  width:400px;background:var(--maic-bg);
  border-radius:var(--maic-r);border:1px solid var(--maic-brd);
  box-shadow:var(--maic-shadow);display:flex;flex-direction:column;overflow:hidden;
  max-height:90vh;
}
.maic-floating .maic-panel{
  position:absolute;bottom:74px;
  transform:scale(.88) translateY(18px);opacity:0;pointer-events:none;
  transform-origin:bottom right;transition:all .32s cubic-bezier(.34,1.4,.64,1);
}
.maic-bottom-left .maic-panel{right:auto;left:0;transform-origin:bottom left}
.maic-root.maic-open .maic-panel,.maic-panel.maic-panel-open{transform:scale(1) translateY(0)!important;opacity:1!important;pointer-events:all!important}
.maic-inline{display:block;max-width:560px;margin:0 auto}
.maic-inline .maic-panel{position:static;width:100%;max-height:700px;border-radius:var(--maic-r)}

/* Header */
.maic-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.maic-hd-left{display:flex;align-items:center;gap:10px}
.maic-logo{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.maic-title{font-size:14.5px;font-weight:600;color:#fff}
.maic-status{font-size:11px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:4px;margin-top:1px}
.maic-sdot{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:maic-blink 2s infinite}
@keyframes maic-blink{0%,100%{opacity:1}50%{opacity:.3}}
.maic-clear{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.maic-clear:hover{background:rgba(255,255,255,.22)}
.maic-clear svg{width:14px;height:14px}

/* ── DREAM FORM ── */
.maic-dream-form{
  padding:20px 18px;overflow-y:auto;flex-shrink:0;
  border-bottom:1px solid var(--maic-brd);
  background:var(--maic-bg);
}
.maic-dream-form::-webkit-scrollbar{width:3px}
.maic-dream-form::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.maic-form-title{font-size:14px;font-weight:600;color:var(--maic-text);margin-bottom:16px;text-align:center;letter-spacing:.02em}
.maic-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.maic-form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.maic-label{font-size:12px;font-weight:500;color:var(--maic-text2);letter-spacing:.03em}
.maic-req{color:#ef4444;font-size:13px}
.maic-select,.maic-input-field{
  background:var(--maic-surf);border:1.5px solid var(--maic-brd);border-radius:10px;
  padding:9px 12px;font-size:13.5px;color:var(--maic-text);outline:none;
  transition:border-color .2s;width:100%;font-family:inherit;
}
.maic-select option{background:var(--maic-bg);color:var(--maic-text)}
.maic-select:focus,.maic-input-field:focus{border-color:var(--maic-accent)}
.maic-input-field::placeholder{color:var(--maic-muted)}

/* Model row */
.maic-model-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.maic-model-btns{display:flex;gap:5px;flex-wrap:wrap}
.maic-sel{
  padding:5px 11px;border-radius:20px;border:1px solid var(--maic-brd);
  background:transparent;color:var(--maic-muted);font-size:12px;font-weight:500;
  cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;transition:.2s;
}
.maic-sel:hover{color:var(--maic-text);border-color:#444}
.maic-sel.active{background:rgba(255,255,255,.08);color:var(--maic-text);border-color:#555}
.maic-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

.maic-form-error{font-size:12px;color:#f87171;min-height:16px;margin-bottom:8px;display:none}
.maic-form-error.show{display:block}

.maic-start-btn{
  width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--maic-accent),#d97706);
  color:#fff;font-size:14px;font-weight:600;font-family:inherit;
  letter-spacing:.03em;transition:all .22s;
}
.maic-start-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,58,237,.45)}
.maic-start-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── CONTEXT BAR ── */
.maic-ctx-bar{
  padding:10px 16px;background:var(--maic-surf);
  border-bottom:1px solid var(--maic-brd);font-size:12px;
  color:var(--maic-text2);display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;
}
.maic-ctx-chip{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.2);color:var(--maic-text2);font-size:11.5px}

/* ── CHAT AREA ── */
.maic-chat-area{display:flex;flex-direction:column;flex:1;min-height:0}
.maic-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:linear-gradient(180deg,var(--maic-bg),var(--maic-surf) 100%)}
.maic-messages::-webkit-scrollbar{width:3px}
.maic-messages::-webkit-scrollbar-thumb{background:#333;border-radius:3px}

.maic-ai-wrap,.maic-user-wrap{display:flex;flex-direction:column;max-width:86%}
.maic-ai-wrap{align-self:flex-start}
.maic-user-wrap{align-self:flex-end;align-items:flex-end}
.maic-provider-tag{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;padding-left:2px}
.maic-ai-wrap[data-p="claude"]  .maic-provider-tag{color:#e57e24}
.maic-ai-wrap[data-p="chatgpt"] .maic-provider-tag{color:#10a37f}
.maic-ai-wrap[data-p="gemini"]  .maic-provider-tag{color:#4285f4}
.maic-ai-wrap[data-p="grok"]    .maic-provider-tag{color:#aaa}
.maic-bubble{padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.56;word-wrap:break-word;white-space:pre-wrap;animation:maic-in .24s cubic-bezier(.34,1.4,.64,1) both}
@keyframes maic-in{from{opacity:0;transform:translateY(7px) scale(.95)}to{opacity:1;transform:none}}
.maic-bubble.ai{background:var(--maic-ai-bg);color:var(--maic-ai-t);border-bottom-left-radius:4px}
.maic-bubble.user{background:var(--maic-user-bg);color:var(--maic-user-t);border-bottom-right-radius:4px}
.maic-time{font-size:10px;color:var(--maic-muted);margin-top:3px;padding:0 2px}
.maic-typing .maic-bubble{display:flex;gap:5px;align-items:center;padding:13px 16px}
.maic-tdot{width:7px;height:7px;background:var(--maic-muted);border-radius:50%;animation:maic-td 1.1s infinite}
.maic-tdot:nth-child(2){animation-delay:.18s}
.maic-tdot:nth-child(3){animation-delay:.36s}
@keyframes maic-td{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}

/* Footer */
.maic-footer{padding:10px 12px;background:var(--maic-surf);border-top:1px solid var(--maic-brd);display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
.maic-textarea{flex:1;background:var(--maic-bg);border:1.5px solid var(--maic-brd);border-radius:10px;padding:9px 12px;color:var(--maic-text);font-size:13px;font-family:inherit;resize:none;outline:none;max-height:100px;line-height:1.45;transition:border-color .2s}
.maic-textarea:focus{border-color:var(--maic-accent)}
.maic-textarea::placeholder{color:var(--maic-muted)}
.maic-send-btn{width:38px;height:38px;border-radius:10px;background:var(--maic-accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.maic-send-btn:hover{filter:brightness(1.15);transform:scale(1.06)}
.maic-send-btn:disabled{background:#444;cursor:not-allowed;transform:none;filter:none}
.maic-send-btn svg{width:18px;height:18px}

/* Saved bar */
.maic-saved-bar{padding:10px 14px;background:rgba(74,222,128,.08);border-top:1px solid rgba(74,222,128,.2);font-size:12.5px;color:#4ade80;text-align:center;flex-shrink:0}
.maic-saved-bar a{color:#4ade80;text-decoration:underline}

/* Responsive */
@media(max-width:480px){
  .maic-floating .maic-panel{width:calc(100vw - 28px)}
  .maic-bottom-right .maic-panel{right:-6px}
  .maic-bottom-left  .maic-panel{left:-6px}
  .maic-form-row{grid-template-columns:1fr}
}