/* ==========================================================================
   Modo Manual — Estilos (4ADVS Design System)
   Usa as variáveis do design system (dark-mode first)
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */
.mm { display:flex; flex-direction:column; height:100%; border-radius:var(--radius-lg); overflow:hidden; background:var(--card-bg); border:1px solid var(--gray-200); }

/* ── Header ────────────────────────────────────────────────────────────── */
.mm-head { padding:20px 24px; border-bottom:1px solid var(--gray-200); background:var(--card-bg); }
.mm-title { font-size:var(--font-lg); font-weight:600; color:var(--gray-900); margin:0; }
.mm-sub   { font-size:var(--font-sm); color:var(--gray-500); margin:4px 0 0; }

/* ── Feed (mensagens) ──────────────────────────────────────────────────── */
.mm-feed { flex:1; padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; background:var(--gray-50); }

/* ── Composer (input inferior) ─────────────────────────────────────────── */
.mm-composer { padding:16px 24px; background:var(--card-bg); border-top:1px solid var(--gray-200); display:flex; gap:12px; align-items:flex-end; }
.mm-composer.is-locked { opacity:0.5; }
.mm-input { flex:1; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:12px 16px; font-family:var(--font-family); font-size:var(--font-base); resize:none; max-height:200px; outline:none; transition:border-color 0.2s; background:var(--gray-100); color:var(--gray-800); }
.mm-input:focus { border-color:var(--primary-500); }
.mm-input:disabled { background:var(--gray-200); color:var(--gray-500); cursor:not-allowed; }
.mm-input::placeholder { color:var(--gray-500); }
.mm-send { background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%); color: #0B1326 !important; border:none; border-radius:var(--radius-md); width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.mm-send:disabled { background:var(--gray-300); color:var(--gray-500); cursor:not-allowed; }
.mm-send:not(:disabled):hover { background: linear-gradient(135deg, #E2BF45 0%, #B88815 100%); color: #000000 !important; }
.mm-send .mm-ico, .mm-send svg { stroke: #0B1326; }
.mm-send:hover .mm-ico, .mm-send:hover svg { stroke: #000000; }

/* ── Ícones SVG ────────────────────────────────────────────────────────── */
.mm-ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ── Balão do bot ──────────────────────────────────────────────────────── */
.mm-bot { margin:0; padding:12px 16px; background:var(--gray-100); border:1px solid var(--gray-200); border-radius:12px 12px 12px 0; color:var(--gray-800); font-size:var(--font-base); align-self:flex-start; max-width:85%; }

/* ── Balão do usuário ──────────────────────────────────────────────────── */
.mm-user { margin:0; padding:12px 16px; background:var(--primary-500); color:#000; font-weight:500; border-radius:12px 12px 0 12px; font-size:var(--font-base); align-self:flex-end; max-width:85%; }

/* ── Card genérico ─────────────────────────────────────────────────────── */
.mm-card { background:var(--card-bg); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; gap:16px; align-self:center; width:100%; max-width:600px; }
.mm-card.is-done { opacity:0.5; pointer-events:none; }

/* ── Pergunta / título ─────────────────────────────────────────────────── */
.mm-q { font-weight:600; color:var(--gray-900); font-size:15px; margin:0; }
.mm-q--end { text-align:center; margin-top:16px; }

/* ── Barra de busca ────────────────────────────────────────────────────── */
.mm-search { display:flex; align-items:center; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:0 12px; background:var(--gray-100); }
.mm-search .mm-ico { color:var(--gray-500); width:18px; height:18px; }
.mm-search-input { border:none; padding:12px; flex:1; font-size:var(--font-base); outline:none; background:transparent; color:var(--gray-800); }
.mm-search-input::placeholder { color:var(--gray-500); }

/* ── Lista / Grupos ────────────────────────────────────────────────────── */
.mm-list { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; gap:0; padding-right:4px; }
.mm-list::-webkit-scrollbar { width:6px; }
.mm-list::-webkit-scrollbar-track { background:transparent; }
.mm-list::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:10px; }
.mm-empty { color:var(--gray-500); text-align:center; padding:20px; font-size:var(--font-sm); }
.mm-group { display:flex; flex-direction:column; margin-bottom:8px; }
.mm-group-head { width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 4px; background:transparent; border:none; cursor:pointer; text-align:left; font-family:var(--font-family); }
.mm-group-head:hover { background:transparent; }
.mm-group-head .mm-ico { transition:transform 0.2s; color:var(--gray-500); margin-left:auto; }
.mm-group-head[aria-expanded="true"] .mm-ico { transform:rotate(180deg); }
.mm-group-title { display:flex; align-items:center; flex:1; }
.mm-group-name { font-weight:700; color:var(--gray-500); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
.mm-group-count { color:var(--gray-500); font-size:11px; font-weight:700; margin-left:4px; }
.mm-group-head:hover .mm-group-name, .mm-group-head:hover .mm-group-count { color:var(--gray-700); }
.mm-group-body { display:flex; flex-direction:column; gap:8px; padding:8px 0 16px 0; }
.mm-group-body[hidden] { display:none !important; }

/* ── Opções clicáveis ──────────────────────────────────────────────────── */
.mm-opt { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--gray-100); border:1px solid var(--gray-200); border-radius:var(--radius-md); cursor:pointer; color:var(--gray-800); font-size:var(--font-base); font-weight:500; transition:all 0.2s; text-align:left; font-family:var(--font-family); }
.mm-opt:hover { background:var(--gray-200); border-color:var(--gray-300); transform:translateY(-1px); color:var(--gray-900); }
.mm-opt .mm-ico { width:16px; height:16px; color:var(--gray-400); }
.mm-opt:hover .mm-ico { color:var(--primary-500); }
.mm-opts { display:flex; flex-direction:column; gap:8px; }
.mm-opts .mm-opt { border:1px solid var(--gray-200); border-radius:var(--radius-md); }
.mm-opts .mm-opt:hover { border-color:var(--primary-400); }

/* ── Step (etapa do wizard) ────────────────────────────────────────────── */
.mm-step-top { display:flex; align-items:center; gap:12px; }
.mm-tag { font-size:var(--font-xs); font-weight:600; color:var(--primary-500); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.mm-bar { flex:1; height:4px; background:var(--gray-300); border-radius:2px; overflow:hidden; }
.mm-bar i { display:block; height:100%; background:var(--primary-500); transition:width 0.4s ease; border-radius:2px; }
.mm-step-body { display:flex; gap:16px; align-items:flex-start; }
.mm-step-ic { width:40px; height:40px; border-radius:10px; background:var(--primary-50); color:var(--primary-500); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mm-step-title { margin:0; font-size:var(--font-md); font-weight:600; color:var(--gray-900); }
.mm-step-hint { margin:4px 0 0; font-size:var(--font-sm); color:var(--gray-500); line-height:1.5; }

/* ── Campo opcional ────────────────────────────────────────────────────── */
.mm-optional { display:flex; justify-content:space-between; align-items:center; font-size:var(--font-sm); color:var(--gray-500); padding:12px 16px; background:var(--gray-100); border-radius:var(--radius-md); border:1px solid var(--gray-200); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.mm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--radius-md); font-size:var(--font-base); font-weight:500; cursor:pointer; transition:all 0.2s; border:1px solid var(--gray-300); background:var(--gray-100); color:var(--gray-700); font-family:var(--font-family); }
.mm-btn:hover { background:var(--gray-200); border-color:var(--gray-400); }
.mm-btn--primary { background:var(--primary-500); border-color:var(--primary-500); color:#000; font-weight:600; }
.mm-btn--primary:hover { background:var(--primary-600); border-color:var(--primary-600); }
.mm-btn--primary:disabled { background:var(--gray-300); border-color:var(--gray-300); color:var(--gray-500); cursor:not-allowed; }
.mm-btn--danger { color:var(--danger-500); border-color:transparent; background:transparent; }
.mm-btn--danger:hover { background:var(--danger-50); border-color:var(--danger-500); }

/* ── Footer dos cards ──────────────────────────────────────────────────── */
.mm-foot { display:flex; justify-content:flex-end; gap:12px; padding-top:16px; border-top:1px solid var(--gray-200); flex-wrap:wrap; }

/* ── Notas de status ───────────────────────────────────────────────────── */
.mm-note { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-radius:var(--radius-md); font-size:var(--font-base); max-width:85%; }
.mm-note--info { background:var(--info-50); color:var(--info-500); align-self:flex-start; border:1px solid var(--info-100); }
.mm-note--warn { background:var(--warning-50); color:var(--warning-500); align-self:center; width:100%; max-width:600px; border:1px solid var(--warning-100); }
.mm-note--ok   { background:var(--success-50); color:var(--success-500); align-self:center; border:1px solid var(--success-100); }
.mm-note-body  { flex:1; }
.mm-note-text  { margin:0; font-weight:500; }
.mm-note-tip   { margin:4px 0 0; font-size:var(--font-sm); opacity:0.85; }

/* ── Checkboxes de teses ───────────────────────────────────────────────── */
.mm-checks { display:flex; flex-direction:column; gap:8px; max-height:250px; overflow-y:auto; padding-right:8px; }
.mm-check { display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid var(--gray-200); border-radius:var(--radius-md); cursor:pointer; transition:all 0.2s; }
.mm-check:hover { background:var(--gray-100); border-color:var(--gray-300); }
.mm-check input[type="checkbox"] { margin-top:2px; accent-color:var(--primary-500); }
.mm-check span { font-size:var(--font-base); color:var(--gray-700); line-height:1.5; }

/* ── Revisão final ─────────────────────────────────────────────────────── */
.mm-review .mm-q { font-size:var(--font-lg); text-align:center; margin-bottom:8px; }
.mm-sum { display:flex; flex-direction:column; gap:0; background:var(--gray-100); padding:0; border-radius:var(--radius-md); border:1px solid var(--gray-200); overflow:hidden; }
.mm-sum-row { display:flex; flex-direction:column; gap:4px; border-bottom:1px solid var(--gray-200); padding:12px 16px; }
.mm-sum-row:last-child { border-bottom:none; }
.mm-sum-row--empty { opacity:0.4; }
.mm-sum-label { font-size:var(--font-xs); font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; }
.mm-sum-val   { font-size:var(--font-base); color:var(--gray-800); font-weight:500; }
.mm-sum-full  { font-size:var(--font-base); color:var(--gray-700); margin:8px 0 0; white-space:pre-wrap; padding-left:12px; border-left:2px solid var(--primary-500); }

details.mm-sum-row summary { display:flex; flex-direction:column; gap:4px; cursor:pointer; outline:none; list-style:none; }
details.mm-sum-row summary::-webkit-details-marker { display:none; }
details.mm-sum-row summary .mm-sum-val { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
details[open].mm-sum-row summary .mm-sum-val { display:none; }