/* =========================================================
   INPUT BAR (token-driven)
   Cambia: altezze, radius, focus, colori e layout via variabili
   ========================================================= */

/* ===== Input Bar ===== */
.input-bar{
  display:flex;
  gap:8px;
  padding:12px;

  border-top:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 70%, transparent);

  align-items:center;
  min-height: calc(var(--inputHeight) + 12px);
}

/* Text input */
.input-bar input{
  flex:1;
  padding: 12px;

  min-height: var(--inputHeight);
  min-width:0;

  border-radius: var(--inputRadius);
  border:1px solid color-mix(in srgb, var(--border) 75%, transparent);

  background: var(--mutedPanel);
  color: var(--text);

  outline:none;
}

.input-bar input::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

.input-bar input:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--focusRing);
}

/* Default buttons in input bar */
.input-bar button{
  padding: 12px;

  min-width: 44px;
  min-height: var(--inputHeight);

  border:none;
  border-radius: var(--inputRadius);

  background: var(--accent);
  cursor:pointer;

  font-weight: 800;
  line-height: 1;

  color: #0b0f1a; /* leggibile su accent chiaro */
}

.input-bar button:hover{ filter:brightness(1.05); }
.input-bar button:active{ transform: translateY(1px); }
.input-bar button:focus{
  outline:none;
  box-shadow: var(--focusRing);
}

/* Optimize Button */
#optimizeBtn{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

#optimizeBtn:hover{
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

#optimizeBtn:active{ transform: translateY(1px); }

#optimizeBtn:focus{
  outline:none;
  box-shadow: var(--focusRing);
}