/* Release 2: multiline composer and an explicit send state. */
.composer {
  align-items: end;
}

.composer-field {
  min-height: 44px;
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 136px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 5px;
  color: #1c1c1e;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
}

.composer textarea::placeholder {
  color: #9b9ba1;
}

.send-button {
  display: grid;
  place-items: center;
}

.send-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(255 255 255 / .38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: food-send-spin .75s linear infinite;
}

.send-button.is-loading .send-icon {
  display: none;
}

.send-button.is-loading .send-loader {
  display: block;
}

.chart-empty {
  margin: 0;
  padding: 28px 0;
  color: #8e8e93;
  font-size: 15px;
  text-align: center;
}

.entry-card.multiple {
  align-items: start;
}

.entry-card.multiple .entry-info h3 {
  white-space: pre-line;
  line-height: 1.35;
}

/* Explicit paths avoid SVG custom-property rendering differences in Safari. */
.chart-line.calories { stroke: #2d8a61 !important; }
.chart-line.protein { stroke: #32cd32 !important; }
.chart-line.fat { stroke: #e19937 !important; }
.chart-line.carbs { stroke: #7869cf !important; }

@keyframes food-send-spin {
  to { transform: rotate(360deg); }
}