/* Ask Lulu: the attach-a-flyer and voice-note controls (public/chatattach.js). Used by both chat pages (the Inca wall and the classic page).
   No colours of its own: text and borders follow the stone or page they sit in (currentColor), the focus ring and the recording state use the
   sun colour of the Inca tokens (public/inca.css) with a fallback. Logical properties only, so Hebrew mirrors by itself. */
.att-tools { display: flex; gap: 8px; flex: none; }
.att-btn { width: 48px; min-height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.att-tools.att-classic .att-btn { border-width: 1px; border-radius: 16px; }
.att-btn:hover { background: rgba(127, 127, 127, .18); }
.att-btn:focus-visible, .att-x:focus-visible { outline: 3px solid var(--sun, #f39a1e); outline-offset: 2px; }
.att-btn[aria-pressed="true"] { background: var(--sun, #f39a1e); color: #0f2747; border-color: #0f2747; }
.att-btn[aria-pressed="true"] svg { animation: att-pulse 1.4s ease-in-out infinite; }
@keyframes att-pulse { 50% { opacity: .45; } }
.att-file { display: none; }

.att-prev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px; border: 2px dashed currentColor; max-width: 100%; box-sizing: border-box; }
.att-prev.att-classic { border-width: 1px; border-radius: 12px; margin-bottom: 8px; }
.att-prev[hidden], .att-err[hidden], .att-img[hidden], .att-aud[hidden], .att-prog[hidden], .att-x[hidden] { display: none; }
.att-img { width: 56px; height: 56px; object-fit: cover; flex: none; background: #fff; }
.att-aud { height: 40px; max-width: 200px; flex: 0 1 200px; min-width: 0; }
.att-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.3; }
.att-line { font-weight: 650; overflow-wrap: anywhere; }
.att-note { flex: 1 0 100%; font-size: 12.5px; line-height: 1.3; opacity: .88; overflow-wrap: anywhere; }
.att-note:empty { display: none; }
.att-prog { width: 100%; max-width: 220px; height: 8px; accent-color: var(--sun, #f39a1e); }
.att-x { width: 44px; height: 44px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.att-x:hover { background: rgba(127, 127, 127, .18); }

.att-err { margin: 0; padding: 8px 12px; font-size: 14.5px; line-height: 1.35; background: rgba(192, 57, 43, .12); border-inline-start: 4px solid #c0392b; overflow-wrap: anywhere; }
.att-err.att-classic { margin-bottom: 8px; border-radius: 8px; }
.att-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* in the conversation */
.msg .att-sent { display: block; max-width: 120px; height: auto; margin-bottom: 6px; }
.typing .att-prog { width: 120px; margin-inline-start: 4px; }
.att-chip { gap: 6px; }
.att-chip svg { flex: none; }

@media (max-width: 380px) { .att-tools { gap: 6px; } .att-btn { width: 44px; } .att-aud { flex-basis: 140px; } }
@media (prefers-reduced-motion: reduce) { .att-btn[aria-pressed="true"] svg { animation: none; } }