/* Composer, template panel, attachment chip, quick-reply menu and media bubbles (send-path plan, task 16). Tokens only. */
.composer { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface); }
.composer-hint { margin: 0; font-size: var(--fs-sm); }
.composer-hint:empty, .composer-error:empty, .composer-quick:empty, .composer-attachment:empty { display: none; }

.composer-text {
  width: 100%; min-height: 64px; max-height: 40vh; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--bg); resize: vertical; line-height: 1.45;
}
.composer-text:focus-visible { border-color: var(--accent); }
.composer-text:disabled { opacity: 0.6; cursor: not-allowed; }

.composer-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.composer-bar .btn.primary { margin-left: auto; }
.composer-bar .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.composer-count { font-size: var(--fs-sm); }
.composer-count.is-over { color: var(--danger); font-weight: 600; }
.composer-error { margin: 0; color: var(--danger); }

/* attachment chip */
.attach-chip { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.attach-chip .attach-name { font-weight: 600; overflow-wrap: anywhere; }
.attach-chip .btn { margin-left: auto; }
.attach-note { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }

/* quick-reply menu, sits directly above the text box */
.quick-menu { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
.quick-item { display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); cursor: pointer; }
.quick-item.is-active, .quick-item:hover { background: var(--accent-soft); }
.quick-shortcut { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; flex: none; }
.quick-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.quick-note { margin: 0; font-size: var(--fs-sm); }

/* template panel */
.template-panel { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); max-height: 55vh; overflow-y: auto; }
.template-list { display: grid; gap: var(--sp-2); }
.template-item { display: grid; gap: var(--sp-1); width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.template-item:hover:not(:disabled) { background: var(--surface-2); }
.template-item.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.template-item:disabled { opacity: 0.6; cursor: not-allowed; }
.template-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.template-title { font-weight: 600; }
.template-snippet { font-size: var(--fs-sm); }
.template-reason { font-size: var(--fs-sm); color: var(--warn); }
.template-form { display: grid; gap: var(--sp-3); }
.template-form-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.template-heading { font-size: var(--fs-lg); }
.template-preview { display: grid; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bubble-out); }
.template-preview .bubble-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* media and retry inside thread bubbles */
.bubble-image { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: var(--r-md); }
.bubble-video { display: block; max-width: min(320px, 100%); border-radius: var(--r-md); }
.bubble-audio { display: block; width: min(280px, 100%); }
.bubble-file { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--text); }
.bubble-file-name { font-weight: 600; overflow-wrap: anywhere; }
.bubble-caption { margin-top: var(--sp-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-retry { margin-top: var(--sp-2); }

@media (max-width: 640px) {
  .composer .btn, .template-item, .quick-item, .bubble-retry { min-height: 44px; }
  .composer { padding: var(--sp-3); }
}