/*
 * input.css - Chat Input Component
 * ==================================
 * PORQUÊ: A área de input (textarea, toolbar, send button) tem
 * comportamentos visuais próprios (focus glow, auto-resize, hover states).
 *
 * Sprint 10 - Animacoes Premium:
 * - .input-box:focus-within: spring easing na borda (suavidade organica)
 * - .send-btn:hover: scale(1.05) com translateY(-2px), sensacao de "levantar"
 * - .send-btn:active: scale(0.92) + rippleOut (onda vermelha ao clicar)
 * PORQUE ripple: o usuario precisa de feedback IMEDIATO de que o clique
 * foi registrado, especialmente enquanto aguarda resposta da IA.
 */

.input-area {
 padding: 16px 24px 24px;
 background: var(--bg-deep);
 flex-shrink: 0;
 transition: background 0.3s ease;
}

.input-box {
 max-width: 760px;
 margin: 0 auto;
 background: var(--bg-input);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 12px 16px;
 transition: border-color 0.2s, box-shadow 0.2s, background 0.3s ease;
 position: relative;
}

.input-box:focus-within {
 border-color: var(--red-dim);
 box-shadow: 0 0 0 3px rgba(196, 30, 30, 0.08), 0 0 20px rgba(196, 30, 30, 0.06);
 transition: border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.input-box textarea {
 width: 100%;
 background: transparent;
 border: none;
 outline: none;
 color: var(--white);
 font-family: 'Open Sans', sans-serif;
 font-size: 14.5px;
 font-weight: 300;
 line-height: 1.6;
 resize: none;
 min-height: 26px;
 max-height: 200px;
 overflow-y: auto;
 transition: color 0.3s ease;
}

.input-box textarea::placeholder { color: var(--muted); }
.input-box textarea::-webkit-scrollbar { width: 3px; }
.input-box textarea::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Toolbar (attachments + send) ── */
.input-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 10px;
 padding-top: 8px;
 border-top: 1px solid var(--border);
}

.input-tools { display: flex; gap: 4px; }

.tool-btn {
 width: 30px;
 height: 30px;
 background: transparent;
 border: none;
 color: var(--muted);
 cursor: pointer;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.15s;
 font-size: 15px;
}

.tool-btn:hover {
 background: var(--bg-panel);
 color: var(--muted-light);
}

/* ── Action buttons (mic + send) ── */
.input-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}

/* ── Send button ── */
.send-btn {
 width: 36px;
 height: 36px;
 background: var(--red);
 border: none;
 border-radius: 9px;
 color: #f0ece6;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 box-shadow: 0 2px 10px rgba(196, 30, 30, 0.3);
}

.send-btn:hover {
 background: #d42020;
 box-shadow: 0 4px 16px rgba(196, 30, 30, 0.45);
 transform: translateY(-2px) scale(1.05);
}

.send-btn:active {
 transform: translateY(0) scale(0.92);
 animation: rippleOut 0.35s ease;
 transition-duration: 0.1s;
}

/* ── Hint text below input ── */
.input-hint {
 text-align: center;
 font-size: 11px;
 color: var(--muted);
 margin-top: 10px;
 letter-spacing: 0.3px;
}