html {
  scroll-behavior: smooth;
}

.field {
  width: 100%;
  border: 1px solid rgb(23 32 42 / 0.12);
  border-radius: 8px;
  background: #ffffff;
  padding: 0.75rem 0.9rem;
  font-weight: 700;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field:focus {
  border-color: #2077b4;
  box-shadow: 0 0 0 4px rgb(32 119 180 / 0.14);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(23 32 42 / 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #17202a;
  transition: all 160ms ease;
}

.icon-btn:hover {
  border-color: #2077b4;
  color: #2077b4;
}

.icon-btn.danger:hover {
  border-color: #ef6f6c;
  color: #ef6f6c;
}

.conversation-scroll {
  min-height: 58vh;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.message-bubble {
  max-width: 760px;
  border-radius: 8px;
  border: 1px solid rgb(23 32 42 / 0.1);
  background: #ffffff;
  padding: 0.9rem;
  box-shadow: 0 10px 22px rgb(23 32 42 / 0.06);
}

.message-bubble.mine {
  margin-left: auto;
  border-color: rgb(32 119 180 / 0.2);
  background: rgb(32 119 180 / 0.06);
}

.message-bubble.theirs {
  margin-right: auto;
  border-color: rgb(79 178 134 / 0.24);
  background: rgb(79 178 134 / 0.07);
}

.recording {
  animation: pulseRecord 1.1s ease-in-out infinite;
}

@keyframes pulseRecord {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(239 111 108 / 0.36);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 12px rgb(239 111 108 / 0);
  }
}

@media (max-width: 640px) {
  .conversation-scroll {
    min-height: 52vh;
    max-height: none;
  }
}