/* TradieRing's messages, as they look in the thread. Skinned by each direction through the variables on body. */
.thread { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.38; letter-spacing: -0.006em; }
.c-day { margin: 2px 0 8px; text-align: center; font-size: 12px; color: var(--meta); font-family: var(--mono); letter-spacing: -0.02em; }

.b { max-width: 84%; padding: 8px 13px 9px; border-radius: 20px; margin: 0; overflow-wrap: anywhere; }
.b.in  { align-self: flex-start; background: var(--in-bg); color: var(--in-fg); box-shadow: var(--in-ring, none); }
.b.out { align-self: flex-end;   background: var(--out-bg); color: var(--out-fg); }
.b.in + .out, .b.out + .in { margin-top: 8px; }
.b.in.end  { border-bottom-left-radius: 6px; }
.b.out.end { border-bottom-right-radius: 6px; }

/* A file the tradie sends */
.b.file { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 9px 14px 9px 9px; }
.doc {
  position: relative; width: 32px; height: 40px; border-radius: 5px; background: var(--white); color: var(--navy-900);
  display: grid; place-items: end center; padding-bottom: 5px; font-size: 9px; font-weight: 700; letter-spacing: .02em;
}
.doc::before { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-bottom-left-radius: 4px; background: rgba(32, 39, 52, .18); }
.fn { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.fs { display: block; font-size: 12px; opacity: .72; }

/* A setting card, arriving as a rich link */
.b.card { padding: 0; overflow: hidden; width: 248px; max-width: 88%; display: block; }
.card-top { display: grid; gap: 8px; padding: 14px 14px 12px; background: var(--card-top); color: var(--card-top-fg); }
.card-days { display: flex; gap: 4px; }
.card-days span {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--navy-900); color: var(--lime-100);
}
.card-days span.off { background: transparent; color: var(--navy-700); box-shadow: inset 0 0 0 1px rgba(32, 39, 52, .28); }
.card-time { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.card-map { display: block; width: 100%; height: auto; }
.card-foot { display: grid; gap: 1px; padding: 9px 14px 11px; }
.card-foot b { font-size: 14px; font-weight: 600; }
.card-foot small { font-size: 12px; color: var(--meta); font-family: var(--mono); letter-spacing: -0.02em; }

/* Job text after a call: same format as the receptionist's notify.py */
.b.job .jh { display: block; font-weight: 600; margin-bottom: 2px; }
.b.job .jl { display: block; }
.b.job .jm { display: block; margin-top: 6px; }
.flag {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
  background: var(--flag-bg); color: var(--flag-fg); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

/* TradieRing typing, then its reply arriving (site.js, once per tile, only with motion allowed) */
.typing { align-self: flex-start; display: flex; gap: 4px; margin-top: 8px; padding: 12px 14px; border-radius: 20px; border-bottom-left-radius: 6px; background: var(--in-bg); box-shadow: var(--in-ring, none); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--meta); opacity: .5; animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: .9; transform: translateY(-2px); } }
.motion [data-reply].waiting { display: none; }
.arrive { animation: arrive 380ms var(--ease-out) both; transform-origin: 0 100%; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.card-top-map { padding: 0; }