/* Keyboard inset is a total bottom inset, not an addition to normal spacing. */

.bar {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding: clamp(7px, 1.852vw, 10px)
    calc(var(--chat-inline-padding, 16px) + var(--app-safe-right, 0px))
    max(
      calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px)),
      var(--chat-keyboard-bottom-inset, 0px)
    )
    calc(var(--chat-inline-padding, 16px) + var(--app-safe-left, 0px));
  background: transparent;
  transition: padding-bottom 0.2s ease;
}

.composer {
  position: relative;
  width: 100%;
}

.row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(94, 62, 73, 0.11);
  border-radius: var(--radius-full, 999px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 12px 30px rgba(75, 48, 57, 0.1),
    0 2px 8px rgba(75, 48, 57, 0.05);
  backdrop-filter: blur(18px);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.rowFocused {
  border-color: rgba(246, 87, 160, 0.62);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 3px rgba(246, 87, 160, 0.1),
    0 14px 34px rgba(92, 52, 67, 0.12);
}

@media (max-width: 350px) {
  .bar {
    padding-right: calc(12px + var(--app-safe-right, 0px));
    padding-left: calc(12px + var(--app-safe-left, 0px));
  }
}