/* Chat attachments (Phase B, D43) -- the attach button, its tiny menu, and the preview chips shown
   before (and in) a message. Same lit-surface language as the composer: no coloured side stripes,
   state is words + a dot. Everything wraps; nothing can push the page wider than the viewport. */

/* The native pickers are triggered from the menu; the inputs themselves never show. */
.attach-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The "+" lives inside the capsule, on the left of the text. The button itself is the full 44pt
   touch target (its box fills the capsule's height, so the capsule does not grow); the visible
   32pt disc is drawn by ::before, centred exactly where the old 32pt button sat (6px inset). */
.composer__attach {
  position: relative;
  flex: none;
  align-self: flex-end;
  width: var(--touch);
  min-height: var(--touch);
  height: var(--touch);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.composer__attach::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--highlight-top);
  transition: background var(--dur-1) var(--ease-out);
}

.composer__attach .icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2;
}

.composer__attach[aria-expanded='true'] {
  color: var(--ink-1);
}

.composer__attach[aria-expanded='true']::before {
  background: var(--surface-3);
}

/* The focus ring hugs the visible disc, not the invisible 44pt box (which would spill out of
   the capsule). */
.composer__attach:focus-visible {
  outline: none;
}

.composer__attach:focus-visible::before {
  box-shadow: 0 0 0 2px var(--light-cyan);
}

/* The textarea no longer starts at the capsule's edge. The 44pt attach box ends 6px after the
   visible disc, so the text inset is 6px smaller: the text starts exactly where it did when the
   button was a bare 32pt disc with a 6px left margin. */
form#composer .composer__field textarea {
  padding-left: calc(var(--s-3) - 6px);
}

.attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--s-2));
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: min(15rem, calc(100vw - 2rem));
  padding: var(--s-1);
  border-radius: var(--r-md);
  background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 12px 32px rgba(0, 0, 0, 0.45);
}

.attach-menu.hidden {
  display: none;
}

.attach-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-small);
  text-align: left;
}

.attach-menu button:hover,
.attach-menu button:focus-visible {
  background: var(--surface-2);
}

.attach-menu .icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  color: var(--ink-2);
}

/* --- Preview tray (before sending) and chips (also inside a sent bubble) ------------------------ */

.attach-tray,
.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.attach-tray {
  margin-bottom: var(--s-2);
}

.attach-tray.hidden,
.attach-note.hidden {
  display: none;
}

.msg-attachments {
  margin-bottom: var(--s-2);
}

.attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--s-1);
  padding-right: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--fs-small);
}

.attach-tray .attach-chip {
  padding-right: 2.6rem; /* room for the remove button */
}

.attach-chip__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 4px);
  background: var(--surface-2);
  color: var(--ink-2);
}

.attach-chip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attach-chip__thumb .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.attach-chip__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.attach-chip__name {
  overflow: hidden;
  max-width: 11rem;
  color: var(--ink-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-chip__sub {
  color: var(--ink-3);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}

.attach-chip__remove {
  position: absolute;
  top: 50%;
  right: var(--s-1);
  transform: translateY(-50%);
  width: 2rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  box-shadow: none;
}

.attach-chip__remove::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.attach-chip__remove .icon {
  width: 1rem;
  height: 1rem;
}

/* State = a small dot + the words in the sub line. */
.attach-chip[data-status='uploading'] .attach-chip__sub::before,
.attach-chip[data-status='error'] .attach-chip__sub::before,
.attach-chip[data-status='partial'] .attach-chip__sub::before,
.attach-chip[data-status='unreadable'] .attach-chip__sub::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--ink-3);
  vertical-align: 0.05em;
}

.attach-chip[data-status='uploading'] .attach-chip__sub::before {
  animation: attach-pulse 1.1s ease-in-out infinite;
}

.attach-chip[data-status='partial'] .attach-chip__sub {
  color: var(--warn);
}

.attach-chip[data-status='partial'] .attach-chip__sub::before {
  background: var(--warn);
}

.attach-chip[data-status='error'] .attach-chip__sub,
.attach-chip[data-status='unreadable'] .attach-chip__sub {
  color: var(--error);
}

.attach-chip[data-status='error'] .attach-chip__sub::before,
.attach-chip[data-status='unreadable'] .attach-chip__sub::before {
  background: var(--error);
}

@keyframes attach-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .attach-chip[data-status='uploading'] .attach-chip__sub::before {
    animation: none;
  }
}

.attach-note {
  margin: 0 0 var(--s-2);
  color: var(--warn);
  font-size: var(--fs-small);
}

/* While anything is attached, Send is available even with an empty text box. */
form#composer.has-attachments .composer__send {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

form#composer.attachments-busy .composer__send {
  opacity: 0.45;
}

@media (max-width: 430px) {
  .attach-chip__name {
    max-width: 8rem;
  }
}