.caddy-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.caddy-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  width: 100%;
}

.context-chip {
  max-width: 44vw;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel2);
  color: var(--dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caddy-thread {
  display: flex;
  width: min(100%, 680px);
  min-height: 0;
  margin: 0 auto;
  padding: 12px 2px 18px;
  overflow-y: auto;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.chat-bubble {
  width: fit-content;
  max-width: min(84%, 520px);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  line-height: 1.45;
  white-space: pre-wrap;
}

.caddy-bubble {
  align-self: flex-start;
  background: var(--panel2);
}

.user-bubble {
  align-self: flex-end;
  border-color: var(--green-dk);
  background: var(--green-soft);
}

.warning-bubble {
  color: var(--dim);
  font-size: 13px;
}

.caddy-loading {
  display: flex;
  gap: 5px;
  margin: 0 max(calc((100% - 680px) / 2), 0px) 8px;
}

.caddy-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  animation: caddy-dot 900ms infinite ease-in-out;
}

.caddy-loading span:nth-child(2) {
  animation-delay: 120ms;
}

.caddy-loading span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes caddy-dot {
  0%,
  70%,
  100% {
    opacity: .35;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.caddy-input-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: min(100%, 680px);
  gap: 8px;
  margin: 0 auto;
  padding-bottom: 4px;
}

.caddy-input-bar input,
.hold-button,
.send-button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.caddy-input-bar input {
  min-width: 0;
  padding: 0 16px;
  background: var(--panel);
  color: var(--ink);
}

.hold-button {
  padding: 0 13px;
  background: var(--panel2);
  touch-action: none;
  user-select: none;
}

.hold-button.is-recording {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 18px var(--green-glow);
}

.hold-button:disabled {
  color: var(--dim);
  cursor: not-allowed;
  opacity: .55;
}

.send-button {
  padding: 0 17px;
  border-color: var(--green);
  background: var(--green);
  color: var(--bg);
  font-weight: 800;
}

@media (max-width: 430px) {
  .caddy-panel {
    padding-right: 12px;
    padding-left: 12px;
  }

  .caddy-header {
    gap: 8px;
  }

  .context-chip {
    max-width: 34vw;
  }

  .hold-button,
  .send-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
  }
}