.composer-area {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    padding: 0 18px 12px;
    background: linear-gradient(
        to bottom,
        rgba(15, 15, 15, 0),
        #0f0f0f 28%
    );
}

.composer-wrap {
    max-width: var(--composer-width);
    margin: 0 auto;
    background: #252525;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
}

.composer-row {
    min-height: 58px;
    display: flex;
    align-items: flex-end;
    padding: 8px 9px 8px 11px;
    gap: 7px;
}

.composer-button {
    width: 34px;
    height: 40px;
    border-radius: 9px;
    flex: 0 0 34px;
    color: #d1d1d1;
    font-size: 0;
}

.composer-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
}

.composer-button::after {
    content: "+";
    font-size: 39px;
    font-weight: 300;
    line-height: 1;
    color: #d1d1d1;
    position: relative;
    top: -30px;
}

#input-box {
    border: 0;
    outline: 0;
    background: transparent;
    color: #eee;
    resize: none;
    line-height: 1.45;
    min-height: 40px;
    max-height: 180px;
    padding: 9px 3px 7px;
    flex: 1;
    font-size: 14px;
}

#input-box::placeholder {
    color: #a7a7a7;
}

.composer-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.thinking-button {
    height: 38px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #bdbdbd;
    cursor: pointer;
    font-size: 12px;
}

.thinking-button:hover {
    background: #3a3a3a;
    color: #eee;
}

.thinking-button[aria-pressed="true"] {
    color: var(--blue);
    background: rgba(105, 182, 255, 0.1);
}

.brain-icon {
    width: 18px;
    height: 18px;
}

.thinking-label {
    white-space: nowrap;
}

.composer-round-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 38px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}


/* =========================================================
   CONVERSA AO VIVO — ESTADO BASE
   ========================================================= */

.live-button {
    display: flex;
    background: #3A83F6;
    color: #fff;
    border: 1px solid rgba(255,255,255,.55);
}

.live-button svg {
    width: 20px;
    height: 20px;
    display: block;
    color: currentColor;
}

.live-button:hover {
    background: #3479df;
    color: #fff;
}

/* O estado pressionado continua azul; a diferença fica no contorno/halo. */
.live-button.active,
.live-button[aria-pressed="true"] {
    background: #3A83F6;
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(58,131,246,.22);
}

.live-button.active svg,
.live-button[aria-pressed="true"] svg,
.live-button[aria-pressed="false"] svg,
.live-button:not([aria-pressed]) svg {
    color: currentColor;
}


/* =========================================================
   BOTÃO DE ENVIO
   ========================================================= */

.send-button {
    background: #3A83F6;
}


/* =========================================================
   AVISO
   ========================================================= */

.composer-disclaimer {
    max-width: var(--composer-width);
    margin: 7px auto 0;
    text-align: center;
    color: #999;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   ANEXOS
   ========================================================= */

.attachment-preview {
    padding: 8px 12px 0;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.attachment-chip {
    background: #3a3a3a;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 5px 8px;
    color: #ccc;
    font-size: 11px;
}


/* =========================================================
   ENVIO — PROCESSANDO / PARAR
   O input.js adiciona .is-sending ao botão durante a geração.
   ========================================================= */

.send-button.is-sending {
    background: #3A83F6;
    color: #fff;
    cursor: pointer;
}

.send-button.is-sending:hover {
    background: #2f74df;
}

.send-button:disabled {
    cursor: default;
    opacity: 0.65;
}

/* Ícone de parada: o próprio input.js fornece o SVG.
   O CSS apenas mantém o botão visualmente estável. */

.send-button.is-sending svg {
    width: 18px;
    height: 18px;
    display: block;
    color: currentColor;
}


.attachment-item{display:flex;align-items:center;gap:8px;background:#3a3a3a;border:1px solid var(--border);border-radius:10px;padding:5px 8px;color:#ccc;font-size:11px;max-width:260px}.attachment-thumb{width:34px;height:34px;object-fit:cover;border-radius:7px;flex:0 0 34px}.attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-remove{border:0;background:transparent;color:#aaa;cursor:pointer;font-size:18px;line-height:1;padding:0 2px}.attachment-remove:hover{color:#fff}