/* The conversation page. Builds on payment.css, which carries the palette. */

.page{ max-inline-size: 760px; }

.ok{
  margin:1.5rem 0 0; padding:.9rem 1.1rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--pale); font-weight:600;
}

/* Where things stand */
.status-strip{
  display:flex; align-items:center; gap:.7rem;
  margin-top:2rem; padding:.85rem 1.1rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--cream);
  font-size:.92rem;
}
.status-strip__dot{
  inline-size:10px; block-size:10px; flex:none;
  border-radius:50%; background:var(--pill, var(--tan));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pill, var(--tan)) 30%, transparent);
}

/* An outstanding quote, shown in the flow of the conversation */
.quote-card{
  margin-top:1.25rem; padding:1.3rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--sand); box-shadow:6px 6px 0 var(--ink);
}
.quote-card__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1rem;
}
.quote-card__fee{
  font-family:var(--display); font-weight:800; font-size:1.7rem;
  letter-spacing:-0.03em;
}
.quote-card .btn{ margin-top:0; text-decoration:none; }
.quote-card__note{ margin-top:.9rem; font-size:.85rem; color:var(--ink-70); }

/* The thread */
.thread{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:1.1rem;
}

.msg{
  display:grid; gap:.4rem;
  padding:1rem 1.15rem;
  border:2px solid var(--ink);
  border-radius:14px;
  max-inline-size:88%;
}

/* Theirs on the left, yours on the right — the shape says who spoke, and so
   does the fill. These two need real separation from each other AND from the
   page: under the warm palette --cream and --pale were different hues and did
   the job on their own, but in blue they collapsed into the same pale wash and
   the thread read as one voice. So the sides get their own values rather than
   borrowing surface tokens that happen to look alike. */
.msg--theirs{
  background:#ffffff;
  justify-self:start;
  border-bottom-left-radius:4px;
}
.msg--mine{
  background:#ece7fa;
  justify-self:end;
  border-bottom-right-radius:4px;
}
.msg--answer{
  background:var(--sand);
  box-shadow:5px 5px 0 var(--ink);
  max-inline-size:100%;
  justify-self:stretch;
}

.msg__meta{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70);
}
.msg__who{ font-weight:500; }
.msg__meta time{ margin-left:auto; }

.msg__badge{
  display:inline-block; justify-self:start;
  background:var(--ink); color:var(--cream);
  padding:.15rem .6rem; border-radius:999px;
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase;
}

.msg__body p{ margin-bottom:.7rem; line-height:1.6; }
.msg__body p:last-child{ margin-bottom:0; }
.msg--answer .msg__body p{ line-height:1.7; }

.msg__files{
  list-style:none; margin:.5rem 0 0; padding:.6rem 0 0;
  border-top:1px solid rgba(26,42,107,.18);
  display:grid; gap:.3rem;
}
.msg__fileitem{ font-size:.85rem; }

/* The whole row is the target. On a phone a filename is a few words wide and
   roughly impossible to hit; this is 44px tall, which is the smallest thing
   Apple and Google both consider tappable. */
.msg__filelink{
  display:flex; align-items:center; gap:.65rem;
  min-block-size:44px; padding:.4rem .55rem;
  border:1px solid rgba(26,42,107,.22); border-radius:6px;
  background:rgba(255,255,255,.55);
  text-decoration:none; color:inherit;
}
.msg__filelink:hover,
.msg__filelink:focus-visible{ background:#fff; border-color:var(--ink); }

/* A document whose bytes have been cleared under the retention policy. It
   keeps its row, because a message that silently loses its attachment reads
   as the site having broken — but it reads as absent rather than available. */
.msg__fileitem.is-cleared{
  display:flex; align-items:center; gap:.65rem;
  min-block-size:44px; padding:.4rem .55rem;
  border:1px dashed rgba(26,42,107,.3); border-radius:6px;
  background:transparent; color:var(--ink-70);
}
.msg__fileitem.is-cleared .msg__file{ font-weight:500; }
.msg__fileitem.is-cleared .msg__ext{ background:transparent; border-style:dashed; }

/* A preview of the actual image, because "IMG_4812.jpg" tells somebody
   nothing about which photograph of their paperwork they sent. */
.msg__thumb{
  inline-size:42px; block-size:42px; flex:none;
  object-fit:cover; border-radius:4px;
  border:1px solid rgba(26,42,107,.22); background:var(--pale);
}

/* Everything else gets its extension, which is the one thing about a
   document that is worth knowing at a glance. */
.msg__ext{
  inline-size:42px; block-size:42px; flex:none;
  display:grid; place-items:center;
  border-radius:4px; background:var(--sand); border:1px solid rgba(26,42,107,.22);
  font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink-70);
}

.msg__filemeta{ display:grid; gap:.1rem; min-inline-size:0; }
.msg__file{ font-weight:600; overflow-wrap:anywhere; }
.msg__size{ font-family:var(--mono); font-size:.68rem; color:var(--ink-70); }

@media (max-width:560px){
  .msg{ max-inline-size:100%; }
}

/* Reply box */
.reply{
  margin-top:1.75rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--cream); padding:1.2rem;
}
.reply label[for]{
  display:block; margin-bottom:.45rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-70);
}
.reply textarea{
  inline-size:100%; font:inherit; font-size:1rem;
  padding:.85rem 1rem; line-height:1.55;
  border:2px solid var(--ink); border-radius:4px;
  background:#fff; color:var(--ink);
  resize:vertical; min-block-size:120px;
}
.reply__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin-top:.9rem;
}
.reply__attach{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center;
  border:2px dashed var(--ink); border-radius:999px;
  padding:.55rem 1.1rem;
  font-size:.88rem; font-weight:600; cursor:pointer;
}
.reply__attach input{
  position:absolute; inset:0; opacity:0; cursor:pointer; inline-size:100%;
}
.reply__attach:hover{ background:var(--sand); }

/* The input inside is invisible, so without this a keyboard user tabbing onto
   it gets no ring at all and no idea where they are. */
.reply__attach:focus-within{ background:var(--sand); outline:3px solid var(--ink); outline-offset:2px; }

/* What is about to be sent ------------------------------------------------
   A styled file button hides the browser's own "2 files selected", so until
   this list existed choosing a file changed nothing on the screen. */

/* The block takes the whole row of the reply foot, so the list of files is as
   wide as the box rather than as wide as the button above it. */
.attach{ flex:1 1 100%; display:grid; gap:.6rem; justify-items:start; }
.attach__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.4rem; inline-size:100%; justify-self:stretch;
}

.attach__item{
  display:flex; align-items:center; gap:.65rem;
  min-block-size:44px; padding:.35rem .4rem .35rem .35rem;
  border:1px solid rgba(26,42,107,.22); border-radius:6px;
  background:rgba(255,255,255,.55);
  font-size:.85rem;
}

/* A file that the server will refuse says so here rather than after the
   upload. The border carries it as well as the words, so it does not depend
   on reading the note. */
.attach__item.is-bad{ border-color:var(--warn); background:rgba(179,38,30,.06); }
.attach__item.is-bad .attach__note{ color:var(--warn); }

.attach__thumb,
.attach__ext{
  inline-size:38px; block-size:38px; flex:none;
  border-radius:4px; border:1px solid rgba(26,42,107,.22);
}
.attach__thumb{ object-fit:cover; background:var(--pale); }
.attach__ext{
  display:grid; place-items:center; background:var(--sand);
  font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink-70);
}

.attach__meta{ display:grid; gap:.1rem; min-inline-size:0; flex:1 1 auto; }
.attach__name{
  font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.attach__note{ font-family:var(--mono); font-size:.68rem; color:var(--ink-70); }

/* The one target on the row, so it gets the full 44px rather than the 36 it
   would look balanced at. */
.attach__remove{
  flex:none; inline-size:44px; block-size:44px;
  display:grid; place-items:center;
  border:1px solid rgba(26,42,107,.22); border-radius:999px;
  background:#fff; color:var(--ink);
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.attach__remove:hover,
.attach__remove:focus-visible{ background:var(--warn); border-color:var(--warn); color:#fff; }

/* Something that happened, rather than something that is — a repeat that was
   not added again. Cleared by the next action. */
.attach__said{
  margin:0; font-size:.78rem; color:var(--ink-70);
  justify-self:stretch;
}
.btn--send{ margin-top:0; margin-left:auto; inline-size:auto; padding:.75rem 1.8rem; font-size:1rem; }
.btn--ghost{ background:transparent; box-shadow:none; }
.btn--ghost:hover{ background:var(--sand); }
.reply__note{ margin-top:.9rem; font-size:.82rem; color:var(--ink-70); }

/* Refunds — present, but not competing with Send */
.refund{ margin-top:1.25rem; font-size:.92rem; }
.refund > summary{
  display:inline-block; cursor:pointer;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-70);
  border-bottom:1px solid var(--ink-70);
  padding-bottom:1px;
}
.refund > summary:hover{ color:var(--tan-deep); border-bottom-color:var(--tan-deep); }
.refund > summary::marker,
.refund > summary::-webkit-details-marker{ content:""; display:none; }
.refund[open] > summary{ margin-bottom:1rem; }

.refund form{
  border:2px solid var(--ink); border-radius:4px;
  background:var(--pale); padding:1.2rem;
}
.refund label[for]{
  display:block; margin-bottom:.45rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-70);
}
.refund textarea{
  inline-size:100%; font:inherit; font-size:1rem;
  padding:.85rem 1rem; line-height:1.55;
  border:2px solid var(--ink); border-radius:4px;
  background:#fff; color:var(--ink);
  resize:vertical; min-block-size:96px;
}
.refund .btn{ inline-size:auto; margin-top:.9rem; padding:.65rem 1.5rem; font-size:.95rem; }
.refund__lede{ margin:0 0 1rem; line-height:1.6; color:var(--ink-70); }
.refund__note{ margin-top:.9rem; font-size:.82rem; color:var(--ink-70); }

.refund-note{
  margin-top:1.25rem; padding:.9rem 1.1rem;
  border:2px dashed var(--ink); border-radius:4px;
  font-size:.9rem; line-height:1.6;
}

.print{ margin-top:1.5rem; }
.print .btn{ inline-size:auto; margin-top:0; padding:.75rem 1.6rem; font-size:.95rem; }

.private{
  margin-top:2rem; padding:1.1rem 1.2rem;
  border:2px solid var(--ink); border-radius:4px; background:var(--pale);
  font-size:.9rem; line-height:1.6;
}
.private b{ display:block; margin-bottom:.3rem; font-family:var(--display); font-size:1rem; }

@media print{
  .bar, .foot, .private, .print, .reply, .refund, .quote-card, .status-strip{ display:none; }
  .msg{ box-shadow:none; max-inline-size:100%; justify-self:stretch; page-break-inside:avoid; }
  body{ background:#fff; }
}