/* ═══════════════════════════════════════════════════════════════════════════
   Gemini GF — Inline field styles (frontend) v7.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor del botón ────────────────────────────────────────────────── */
.claudegf-inline-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Botón Generar ───────────────────────────────────────────────────────── */
.claudegf-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #C4532D, #0d5cc7);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  box-shadow: 0 2px 6px rgba(26,115,232,.35);
}
.claudegf-gen-btn:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-1px);
}
.claudegf-gen-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}
.claudegf-gen-btn.claudegf-regenerate {
  background: linear-gradient(135deg, #34a853, #278a41);
  box-shadow: 0 2px 6px rgba(52,168,83,.35);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.claudegf-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: claudegf-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes claudegf-spin {
  to { transform: rotate(360deg); }
}

/* ── Mensaje de error ────────────────────────────────────────────────────── */
.claudegf-inline-msg {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
}
.claudegf-msg-error {
  color: #d93025;
  background: #fce8e6;
}

/* ── Campo readonly ──────────────────────────────────────────────────────── */
.claudegf-readonly {
  background: #f8f9fb !important;
  border-color: #dde0e3 !important;
  color: #3c4043 !important;
  cursor: default !important;
}

/* ── Preview HTML (cuando la respuesta contiene HTML) ────────────────────── */
.claudegf-html-preview {
  margin-top: 10px;
  padding: 12px 16px;
  background: #f8f9fb;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #1d2327;
}
.claudegf-html-preview h1,
.claudegf-html-preview h2,
.claudegf-html-preview h3,
.claudegf-html-preview h4 { margin: .75em 0 .4em; font-weight: 700; }
.claudegf-html-preview ul,
.claudegf-html-preview ol  { padding-left: 1.4em; margin: .5em 0; }
.claudegf-html-preview li  { margin-bottom: .3em; }
.claudegf-html-preview p   { margin: .5em 0; }
.claudegf-html-preview strong { font-weight: 700; }
.claudegf-html-preview em    { font-style: italic; }
.claudegf-html-preview a     { color: #C4532D; }
.claudegf-html-preview code  { background: #FDF3EF; padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.claudegf-html-preview pre   { background: #1d2327; color: #e8eaed; padding: 12px; border-radius: 6px; overflow-x: auto; }

/* Campo oculto cuando hay preview */
.claudegf-field-with-preview {
  display: none !important;
}

/* ── Conversación multi-turno ────────────────────────────────────────────── */
.claudegf-conv-zone {
  margin-top: 12px;
  border-top: 1px solid #e0e3e8;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claudegf-turn-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: #FDF3EF;
  color: #C4532D;
  border-radius: 10px;
}
.claudegf-turn-max {
  background: #fce8e6;
  color: #d93025;
}

.claudegf-followup-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  min-height: 56px;
  background: #fff;
}
.claudegf-followup-input:focus {
  outline: none;
  border-color: #C4532D;
  box-shadow: 0 0 0 2px rgba(26,115,232,.15);
}

.claudegf-continue-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #34a853, #278a41);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(52,168,83,.3);
  transition: opacity .2s;
}
.claudegf-continue-btn:disabled { opacity: .65; cursor: not-allowed; }
.claudegf-continue-btn:hover:not(:disabled) { opacity: .9; }

/* ── HTML preview dentro del wrap ────────────────────────────────────────── */
.claudegf-inline-wrap .claudegf-html-preview {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 12px 16px;
  background: #f8f9fb;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #1d2327;
}