/* ════════════════════════════════════════════════════════════
   bubbles.css — Capa 2: Burbujas de chat
   Dueño exclusivo de: .bubble*, .query-view*, .pair*
   Solo usa variables de primitives.css. Cero hardcoded.
   ════════════════════════════════════════════════════════════ */

/* ── Par ─────────────────────────────────────────────────── */

.pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.pair:last-child { margin-bottom: 0; }

.pair--deleting .bubble--html-response,
.pair--deleting .bubble--response-trivial {
  opacity: .7;
  border-style: dashed;
}

/* ── Bubble base ─────────────────────────────────────────── */

.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--bubble-max-width);
  border-radius: var(--bubble-radius);
  padding: var(--bubble-padding);
  gap: 6px;
  border: var(--bubble-border-width) solid transparent;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.bubble__content { position: relative; }

.bubble__footer {
  font-size: var(--bubble-footer-size);
  opacity: var(--bubble-footer-opacity);
  text-align: right;
  font-weight: var(--font-weight-medium);
}

/* ── Bubble — query ─────────────────────────────────────── */

.bubble--query {
  align-self: flex-end;
  background: var(--bubble-query-bg);
  border-color: var(--bubble-query-border);
  box-shadow: var(--bubble-query-shadow);
  color: var(--bubble-query-color);
}

.bubble--query .bubble__content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ── Bubble — response ──────────────────────────────────── */

.bubble--response-trivial,
.bubble--html-response {
  align-self: flex-start;
  background: var(--bubble-response-bg);
  border-color: var(--bubble-response-border);
  box-shadow: var(--bubble-response-shadow);
  color: var(--bubble-response-color);
  margin-top: 4px;
}

.bubble--response-trivial .bubble__content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.bubble--html-response .bubble__content {
  max-height: 240px;
  overflow: hidden;
  position: relative;
}

/* ── Bubble — hover (JS añade .bubble--hover) ───────────── */

.bubble--hover {
  border-color: var(--bubble-hover-border) !important;
  box-shadow: var(--bubble-hover-shadow) !important;
}

/* ── Query view ─────────────────────────────────────────── */

.query-view {
  padding: 12px 14px;
  background: var(--query-bg);
  flex-shrink: 0;
}

.query-view__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.query-view__input {
  flex: 1;
  resize: none;
  border: var(--query-input-border);
  border-radius: var(--query-input-radius);
  padding: var(--query-input-padding);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  outline: none;
  background: var(--query-input-bg);
  color: var(--color-text-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  line-height: var(--line-height-base);
  cursor: text;
}

.query-view__input:hover {
  border-color: var(--query-input-focus-border);
}

.query-view__input:focus {
  border-color: var(--query-input-focus-border);
  box-shadow: var(--query-input-focus-shadow);
}

.query-view__send {
  flex-shrink: 0;
  background: var(--query-send-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  width: 36px;
  height: 36px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
  box-shadow: var(--query-send-shadow);
}

.query-view__send:hover {
  box-shadow: var(--query-send-hover-shadow);
  transform: scale(1.05);
}


.query-view__cancel-wrap {
  display: none;
  padding-top: 8px;
}

.query-view__cancel {
  background: var(--query-send-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  cursor: pointer;
}