/* Simulações do Financeiro com IA. Usa gestao.css (g-*) e disparo.css (WhatsApp). */
.fi-foto { padding: 4px 4px 3px; }
.fi-boleto { background: #fff; border-radius: 6px; padding: 8px; width: 190px; font-size: 8.5px; color: #111; display: flex; flex-direction: column; gap: 3px; transform: rotate(-1.5deg); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.fi-boleto b { font-size: 9px; }
.fi-boleto span { display: flex; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 2px; }
.fi-boleto span i { font-style: normal; font-weight: 700; }
.fi-barras { height: 26px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 7px, #111 7px 8px, #fff 8px 9px); margin-top: 3px; }
.fi-boleto small { font-size: 6.5px; color: #374151; letter-spacing: .02em; }
.fi-ok { font-size: 9.5px; background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 6px; font-weight: 700; }
.fi-audio { display: inline-block; width: 110px; height: 14px; vertical-align: middle; background: repeating-linear-gradient(90deg, #4b5563 0 2px, transparent 2px 5px); mask: linear-gradient(90deg, #000 60%, rgba(0,0,0,.35)); border-radius: 3px; }
.fi-transc { color: #54656f; font-size: 11px; }

.fi-strip { display: flex; align-items: center; gap: 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 9px 12px; font-size: 11.5px; }
.fi-strip > span:nth-child(2) { color: #92400e; }
.fi-t td { vertical-align: top; }
.fi-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #f1f5f9; margin-right: 6px; }
.fi-fonte { font-size: 9.5px; border-radius: 999px; padding: 2px 8px; font-weight: 700; white-space: nowrap; }
.fi-fonte.ok { background: #dcfce7; color: #166534; }
.fi-fonte.ia { background: #ccfbf1; color: #024a51; }
.fi-av td { background: #fffbeb; }
.fi-aviso { display: block; color: #b45309; font-size: 9.5px; font-weight: 700; }
.fi-rodape { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 9px 12px; margin-top: auto; }
.fi-sel td { background: #f0fdfa; }
.fi-entrada { display: flex; flex-direction: column; gap: 8px; border-color: #5eead4; }
.fi-entrada i { color: #0f766e; font-style: normal; font-size: 10px; }

.fi-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; font-size: 12px; }
.fi-q { align-self: flex-end; background: #111827; color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 12px; max-width: 70%; }
.fi-a { align-self: flex-start; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px 14px 14px 4px; padding: 10px 13px; max-width: 78%; line-height: 1.5; }
.fi-a > small { display: block; color: #64748b; font-size: 10px; margin-top: 4px; }
.fi-bars { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.fi-bars div { display: grid; grid-template-columns: 82px 1fr 82px; align-items: center; gap: 8px; font-size: 11px; }
.fi-bars i { height: 10px; border-radius: 5px; background: #0f766e; }
.fi-bars b { text-align: right; }
.fi-in { margin-top: auto; border: 1px solid #d1d5db; border-radius: 12px; padding: 9px 12px; color: #9ca3af; display: flex; justify-content: space-between; }
.fi-in span { color: #0f766e; }
.fi-sug { font-size: 10.5px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 10px; }
.fi-sug i { font-style: normal; font-family: ui-monospace, Menlo, monospace; color: #475569; }