/* Concierge Desk — composer + AI-draft card. */

.composer {
  border-top: 1px solid var(--ha-border); padding: 12px 24px 16px;
  background: var(--ha-surface);
}
.composer .field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.draft-reply-form { margin-top: var(--ha-space-2); }
.composer .demo-reply { display: inline-block; margin-top: var(--ha-space-3); }
.composer textarea {
  width: 100%; min-height: 44px; max-height: 120px; resize: none;
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md); padding: 11px 13px; font: inherit; font-size: 14px;
  color: var(--ha-ink); outline: none;
}
.composer textarea:focus {
  border-color: var(--ha-blue-accent); box-shadow: var(--ha-focus-ring);
}
.typing-indicator {
  margin: var(--ha-space-2) 0 0; font-size: 12px; font-style: italic;
  color: var(--ha-ink-muted);
}
.typing-indicator[hidden] { display: none; }

.ai-draft {
  background: var(--ha-ai-surface); border: 1px solid var(--ha-ai-border);
  border-radius: var(--ha-radius-md); padding: 11px 13px; margin-bottom: 10px;
}
.ai-draft[hidden] { display: none; }
.ai-draft .lab {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: var(--ha-weight-bold); color: var(--ha-blue-text);
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 6px;
}
.ai-draft .txt { font-size: 14px; line-height: 20px; color: var(--ha-ink); }
.ai-draft .acts { display: flex; gap: 8px; margin-top: 10px; }

.chip-btn {
  height: 28px; padding: 0 12px; border-radius: var(--ha-radius-pill); font: inherit;
  font-size: 12px; font-weight: var(--ha-weight-medium); cursor: pointer;
  border: 1px solid var(--ha-border); background: var(--ha-surface); color: var(--ha-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip-btn.primary {
  background: var(--ha-blue-text); border-color: var(--ha-blue-text); color: var(--ha-surface);
}
.chip-btn.subtle { color: var(--ha-ink-muted); }
.chip-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--ha-surface), 0 0 0 4px var(--ha-blue-accent);
}