/* Offerbox: list of conversations + the open conversation (side by side on desktop) */
.ob { max-width: 720px; margin: 0 auto; padding: 8px 0 32px; }
.ob__head { padding: 12px 16px 8px; }
.ob__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.ob__sub { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.ob__chips { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.ob__chips::-webkit-scrollbar { display: none; }
.ob__chips .chip { flex: none; }
.ob__chips small { font-weight: 400; opacity: .7; }
.ob__list { display: flex; flex-direction: column; margin-top: 4px; background: var(--color-surface); }
.ob__empty { padding: 48px 24px; }
.ob__cta, .ob__switch .pf-btn { display: inline-flex; width: auto; margin-top: 16px; padding: 0 22px; }
.ob__switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.ob-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: var(--hairline) solid var(--color-line); color: var(--color-ink); text-decoration: none; }
.ob__list .ob-row:first-child { border-top: 0; }
.ob-row .dx-av { flex: none; width: 44px; height: 44px; }
.ob-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-row__top { display: flex; align-items: baseline; gap: 8px; }
.ob-row__top b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-row__top small { flex: none; font-size: 12px; color: var(--color-ink-muted); }
.ob-row__facts { font-size: 13px; color: var(--color-ink-2); }
.ob-row__msg { font-size: 13px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-row.is-waiting .ob-row__top b::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--color-badge); vertical-align: middle; }
.ob-row.is-open { background: var(--color-hover); box-shadow: inset 3px 0 0 var(--color-accent); }

.ob-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--color-field); color: var(--color-ink-2); }
.ob-pill svg { width: 12px; height: 12px; }
.ob-pill--waiting { background: var(--btn-brand-bg); color: var(--btn-brand-ink); box-shadow: inset 0 0 0 1px var(--btn-brand-line); }
.ob-pill--booked { background: var(--btn-pos-bg); color: var(--btn-pos-ink); box-shadow: inset 0 0 0 1px var(--btn-pos-line); }
.ob-pill--booked svg { color: var(--color-positive); }
.ob-pill--closed { color: var(--color-ink-muted); }

/* Conversation */
.ob-thread { display: flex; flex-direction: column; min-height: 100%; background: var(--color-surface); }
.ob-thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: var(--hairline) solid var(--color-line); }
.ob-thread__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; color: inherit; }
.ob-thread__who .dx-av { flex: none; width: 48px; height: 48px; }
.ob-thread__who > span:not(.dx-av) { min-width: 0; display: flex; flex-direction: column; }
.ob-thread__who b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-thread__who small { font-size: 13px; color: var(--color-ink-muted); }
.ob-facts { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; margin: 14px 16px 0; }
.ob-facts div { padding: 10px 12px; border-radius: 12px; background: var(--color-field); }
.ob-facts dt { font-size: 12px; color: var(--color-ink-muted); }
.ob-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.ob-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 16px 0; }
.ob-btn { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ob-btn svg { width: 16px; height: 16px; }
.ob-actions .btn-positive { flex: 1 1 140px; }
.ob-actions .dx-btn.ob-btn { flex: 1 1 120px; }
.ob-actions .dx-link { padding: 0 12px; height: 44px; font-weight: 700; }
.ob-actions--quiet { justify-content: space-between; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--color-field); font-size: 14px; color: var(--color-ink-2); }
.ob-actions--quiet .dx-link { height: 32px; }
.ob-actions--booked { padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--btn-pos-bg); box-shadow: inset 0 0 0 1px var(--btn-pos-line); font-size: 14px; font-weight: 700; color: var(--btn-pos-ink); }
.ob-actions--booked > svg { width: 18px; height: 18px; color: var(--color-positive); }
.ob-actions--booked span { flex: 1; min-width: 0; }
.ob-eventline { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; font-size: 13px; color: var(--color-ink-2); }
.ob-eventline svg { width: 16px; height: 16px; flex: none; color: var(--color-ink-muted); }

.ob-timeline { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 16px; }
.ob-ev { display: flex; flex-direction: column; gap: 6px; }
.ob-ev__line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--color-ink-2); }
.ob-ev__line svg { width: 15px; height: 15px; flex: none; color: var(--color-ink-muted); }
.ob-ev__line span { flex: 1; min-width: 0; }
.ob-ev__line small { flex: none; font-size: 12px; color: var(--color-ink-muted); }
.ob-ev__line--accepted svg { color: var(--color-positive); }
.ob-ev__line--accepted span { font-weight: 700; color: var(--color-ink); }
.ob-ev.is-mine { align-items: stretch; }

.ob-compose { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--color-surface); border-top: var(--hairline) solid var(--color-line); }
.ob-compose textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 11px 14px; border: 0; border-radius: 22px; background: var(--color-field); color: var(--color-ink); font: inherit; font-size: var(--fs-field); line-height: 22px; resize: none; }
.ob-compose textarea:focus { outline: 2px solid var(--color-ink); outline-offset: 0; }
.ob-send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-brand-bg); color: var(--btn-brand-ink); box-shadow: inset 0 0 0 1px var(--btn-brand-line); }
.ob-send svg { width: 18px; height: 18px; }
.ob-send:disabled { background: var(--color-field); color: var(--color-ink-muted); box-shadow: none; }
.ob-crew { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px 14px; font-size: 12px; color: var(--color-ink-muted); background: var(--color-surface); }
.ob-crew svg { width: 14px; height: 14px; flex: none; }
.ob__none { padding: 64px 24px; }

/* Badge on the Offerbox tab */
.nav-item, .side-link { position: relative; }
.ob-badge { position: absolute; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--color-badge); color: var(--color-on-badge); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nav-item .ob-badge { top: -4px; left: calc(50% + 4px); }
.side-link .ob-badge { top: 50%; right: 12px; transform: translateY(-50%); }

/* Phone page for one conversation */
.screen--offer .screen-inner { max-width: 720px; padding: 0; }
.ob-page { min-height: 100%; }
.screen--offer .ob-thread { min-height: calc(100dvh - 64px); }

@media (min-width: 640px) {
  .ob__list { margin: 4px 16px 0; border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); overflow: hidden; }
}
@media (min-width: 1024px) {
  .ob:not(.ob--fan) { width: 100%; box-sizing: border-box; max-width: var(--page-w); display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 24px; padding: 28px var(--page-pad) 48px; align-items: start; }
  .ob:not(.ob--fan) .ob__head { padding: 8px 0 8px; }
  .ob:not(.ob--fan) .ob__list { margin: 4px 0 0; }
  .ob__main { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); background: var(--color-surface); }
  .ob__main:empty { display: none; }
  .ob.is-empty { display: block; }
  .ob.is-empty .ob__head { max-width: 680px; margin: 0 auto; text-align: center; }
  .ob.is-empty .ob__sub { justify-content: center; }
  .ob.is-empty .ob__empty { padding-top: clamp(24px, 9vh, 110px); }
  .ob__main .ob-thread { min-height: calc(100dvh - 32px); }
  .side-link .ob-badge { right: 12px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .side-link .ob-badge { top: 6px; right: 10px; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .ob-row:not(.is-open):hover { background: var(--color-hover); }
  .ob-thread__who:not(:disabled):hover b { text-decoration: underline; }
}
.ob-actions a.dx-btn { text-decoration: none; }

/* ---------- v2: three tabs per offer (Figma 145–155) ---------- */
.ob-tabs { position: sticky; top: 0; z-index: 2; }
.screen--offer .ob-tabs { top: 0; }

.ob-details { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 0; background: var(--color-bg); }
.ob-sec { padding: 8px 16px; }
.ob-sec__title { margin: 4px 0 8px; font-size: 15px; font-weight: 400; color: var(--color-ink-muted); }
.ob-msgcard, .ob-event, .ob-info__card, .ob-term, .ob-files, .ob-hist { background: var(--color-surface); border-radius: 14px; box-shadow: 0 0 0 var(--hairline) var(--color-line); }
.ob-msgcard { padding: 14px 16px; }
.ob-msgcard__who { display: flex; align-items: center; gap: 12px; }
.ob-msgcard__who .dx-av { width: 44px; height: 44px; }
.ob-msgcard__who > span:not(.dx-av) { display: flex; flex-direction: column; }
.ob-msgcard__who b { font-size: 16px; }
.ob-msgcard__who small { font-size: 12px; color: var(--color-ink-muted); }
.ob-msgcard p { margin: 12px 0 0; font-size: 15px; line-height: 22px; white-space: pre-line; overflow-wrap: anywhere; }

.ob-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-info__card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px; text-align: center; }
.ob-info__card small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2); }
.ob-info__big { margin-top: 6px; font-size: 26px; line-height: 30px; font-weight: 700; }
.ob-info__card span { font-size: 13px; color: var(--color-ink-muted); }
.ob-info__month { text-transform: capitalize; }
.ob-change { margin-top: 12px; height: 36px; width: 100%; max-width: 160px; justify-content: center; }
.ob-terms { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ob-term { padding: 12px 16px; }
.ob-term__head { display: flex; align-items: center; justify-content: space-between; }
.ob-term__head b { font-size: 15px; font-weight: 700; }
.ob-term__head svg { width: 20px; height: 20px; color: var(--color-ink-muted); }
.ob-term p { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 14px; color: var(--color-ink-2); }
.ob-term__ok { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--color-positive); color: var(--color-on-positive); flex: none; }
.ob-term__dash { width: 20px; text-align: center; color: var(--color-ink-muted); }
.ob-term.is-on p { color: var(--color-ink); }
.ob-files { display: flex; flex-direction: column; padding: 6px 0; }
.ob-file { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--color-ink); text-decoration: none; font-size: 14px; }
.ob-file svg { width: 20px; height: 20px; color: var(--color-danger); flex: none; }
.ob-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-file small { color: var(--color-ink-muted); }
.ob-hist { margin: 8px 16px 0; padding: 0; }
.ob-hist summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 700; }
.ob-hist summary::-webkit-details-marker { display: none; }
.ob-hist summary small { font-weight: 400; color: var(--color-ink-muted); margin-left: 6px; }
.ob-hist ul { margin: 0; padding: 0 16px 12px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ob-hist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink-2); }
.ob-hist li svg { width: 15px; height: 15px; flex: none; color: var(--color-ink-muted); }
.ob-hist li span { flex: 1; min-width: 0; }
.ob-hist li small { color: var(--color-ink-muted); }
.ob-hist li.is-accepted svg { color: var(--color-positive); }

.ob-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: var(--hairline) solid var(--color-line); }
.ob-foot .ob-btn { flex: 1 1 0; min-width: 0; }
.ob-foot .ob-btn--main { flex: 1.3 1 0; }
.ob-foot .ob-btn--danger { color: var(--color-danger); }
.ob-foot__note { flex: 1 1 100%; font-size: 14px; color: var(--color-ink-2); }
.ob-foot__note + .ob-btn { flex: 0 0 auto; }
.ob-decline { flex: 1 1 100%; height: 32px; font-size: 14px; font-weight: 700; }

.ob-event { padding: 14px 16px; }
.ob-event__head { display: flex; align-items: flex-start; gap: 12px; }
.ob-event__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-event__txt b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-event__txt small { font-size: 12px; color: var(--color-ink-muted); }
.ob-event__day { position: static; box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.ob-event__stats { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0; text-align: center; }
.ob-event__stats dd { margin: 0; font-size: 16px; font-weight: 700; }
.ob-event__stats dt { font-size: 12px; color: var(--color-ink-muted); }
.ob-event__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.ob-event__chat { margin: 12px 0 0; font-size: 14px; line-height: 20px; }
.ob-event__chat small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--color-ink-muted); }
.ob-event.is-cancelled .ob-event__img { filter: grayscale(1); opacity: .6; }
.ob-event__cancel { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--color-danger); }

/* Chats */
.ob-chat { display: flex; flex-direction: column; min-height: 420px; background: var(--color-bg); }
.ob-chat__list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.ob-chat__empty { margin: 40px 16px; text-align: center; font-size: 14px; color: var(--color-ink-muted); }
.ob-day { align-self: center; margin: 6px 0 2px; font-size: 12px; color: var(--color-ink-muted); }
.ob-private { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--color-field); font-size: 13px; color: var(--color-ink-2); }
.ob-private svg { width: 16px; height: 16px; flex: none; }
.ob-msg { display: flex; align-items: flex-end; gap: 8px; }
.ob-msg .dx-av { flex: none; width: 32px; height: 32px; font-size: 11px; }
.ob-msg.is-mine { justify-content: flex-end; }
.ob-bubble { display: flex; flex-direction: column; gap: 4px; max-width: 78%; margin: 0; padding: 10px 14px 8px; border-radius: 16px 16px 16px 4px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); font-size: 15px; line-height: 21px; white-space: pre-line; overflow-wrap: anywhere; }
.ob-bubble__who { font-size: 12px; color: var(--color-ink-2); }
.ob-bubble small { font-size: 11px; color: var(--color-ink-muted); }
.ob-bubble.is-mine { border-radius: 16px 16px 4px 16px; background: var(--btn-brand-bg); box-shadow: inset 0 0 0 1px var(--btn-brand-line); }
.ob-bubble.is-crew.is-mine { background: var(--btn-pos-bg); box-shadow: inset 0 0 0 1px var(--btn-pos-line); }
.ob-chat .ob-compose { margin-top: auto; }

/* Offer form: terms + attachments */
.offer__files { display: flex; flex-direction: column; gap: 6px; }
.offer__files:empty { display: none; }
.offer__file { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--color-field); font-size: 14px; }
.offer__file > svg { width: 18px; height: 18px; color: var(--color-danger); flex: none; }
.offer__file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer__file button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--color-ink-2); }
.offer__file button svg { width: 14px; height: 14px; }
.offer__addfile { align-self: flex-start; }
.offer__addfile svg { width: 14px; height: 14px; }
.offer__hint { font-size: 12px; color: var(--color-ink-muted); }

@media (min-width: 1024px) {
  .ob__main .ob-foot { position: sticky; bottom: 0; }
  .ob__main .ob-chat { min-height: calc(100dvh - 160px); }
}

.ob-thread > .ob-chat, .ob-thread > .ob-details { flex: 1; }

/* Nav dot: "something new" — the bell carries the numbers. Fades in, fades away once you've looked. */
.ob-badge.ob-dot { min-width: 0; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; box-shadow: 0 0 0 2px var(--nav-surface, var(--color-surface)); animation: dot-in .32s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .4s ease, transform .4s ease; }
.nav-item .ob-badge.ob-dot { top: 0; left: calc(50% + 8px); }
.side-link .ob-badge.ob-dot { top: 50%; right: 18px; transform: translateY(-50%); }
.ob-badge.ob-dot.is-out { opacity: 0; transform: scale(.4); animation: none; }
.side-link .ob-badge.ob-dot.is-out { transform: translateY(-50%) scale(.4); }
@keyframes dot-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.side-link .ob-badge.ob-dot { animation-name: dot-in-side; }
@keyframes dot-in-side { from { opacity: 0; transform: translateY(-50%) scale(.4); } to { opacity: 1; transform: translateY(-50%); } }
@media (min-width: 1024px) and (max-width: 1279px) { .side-link .ob-badge.ob-dot { top: 8px; right: 12px; transform: none; animation-name: dot-in; } .side-link .ob-badge.ob-dot.is-out { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .ob-badge.ob-dot { animation: none; transition: opacity .2s ease; } }

/* ---------- Offer list rows: feed-size type, room to breathe, one clear hierarchy ----------
   Who (name) → what (date · fee · set) → last word → status. Time top-right, unread = coral dot. */
.ob-row { align-items: flex-start; gap: 14px; padding: 16px 20px; border-top: 0; position: relative; }
.ob-row + .ob-row::before { content: ''; position: absolute; top: 0; left: 86px; right: 0; border-top: var(--hairline) solid var(--color-line); }
.ob-row .dx-av { width: 52px; height: 52px; font-size: 18px; }
.ob-row__txt { gap: 3px; padding-top: 1px; }
.ob-row__top { align-items: center; gap: 10px; }
.ob-row__top b { font-size: 16px; line-height: 22px; font-weight: 700; }
.ob-row__top small { font-size: 13px; color: var(--color-ink-muted); }
.ob-row.is-waiting .ob-row__top b::after { width: 8px; height: 8px; margin-left: 8px; }
.ob-row__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 15px; line-height: 21px; color: var(--color-ink-2); }
.ob-row__facts b { font-weight: 600; color: var(--color-ink); }
.ob-row__facts > span { color: var(--color-ink-muted); }
.ob-row__msg { font-size: 14px; line-height: 20px; color: var(--color-ink-muted); }
.ob-row__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ob-row__meta small { font-size: 12px; color: var(--color-ink-muted); }

/* Status label (replaces the pill) */
.ob-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); white-space: nowrap; }
.ob-st svg { width: 14px; height: 14px; }
.ob-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ob-st--waiting { color: var(--color-accent-text); }
.ob-st--sent { color: var(--color-ink-2); }
.ob-st--booked { color: var(--color-positive); }
.ob-thread__head .ob-st { flex: none; font-size: 14px; }

/* ---------- Decision bar: the two answers big, the quiet ones small ---------- */
.ob-foot--decide { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); box-shadow: 0 -1px 0 var(--color-line), 0 -10px 28px rgba(17, 17, 28, 0.06); border-top: 0; }
.ob-foot__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; }
.ob-foot--decide .ob-btn { height: 50px; border-radius: 14px; font-size: 16px; flex: none; }
.ob-foot__minor { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.ob-minor { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; margin: 0 -10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--color-ink-2); -webkit-tap-highlight-color: transparent; }
.ob-minor svg { width: 16px; height: 16px; }
.ob-minor.is-danger { color: var(--color-danger); }
@media (hover: hover) and (pointer: fine) { .ob-minor:hover { background: var(--color-hover); } }
.ob-details { padding-bottom: 4px; }

@media (min-width: 1024px) {
  .ob-row { padding: 14px 18px; }
  .ob-row + .ob-row::before { left: 84px; }
  .ob-foot--decide { border-radius: 0 0 16px 16px; }
}

/* ---------- Your answer: the last card of the details, read first, decide after. Nothing covers the content. ---------- */
.ob-answer .ob-foot { position: static; margin: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ob-answer .ob-foot--decide { padding: 16px 16px 6px; }
.ob-answer .ob-foot__minor { margin-top: 4px; }
.ob-details { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .ob-answer .ob-foot--decide { border-radius: 16px; } .ob__main .ob-answer .ob-foot { position: static; } }

/* One header on the offer page: Back · who · status. The page bar with the repeated name goes. */
.ob-thread__back { display: none; }
.screen--offer .screen-bar { display: none; }
.screen--offer .ob-thread__head { gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px 4px; }
.screen--offer .ob-thread__back { display: inline-grid; flex: none; }
.screen--offer .ob-thread__who .dx-av { width: 40px; height: 40px; }
.screen--offer .ob-thread__who b { font-size: 16px; }
.screen--offer .ob-thread { min-height: 100dvh; }
/* The offer's message: just the words and when — who sent it is already in the header */
.ob-msgcard p { margin: 0; font-size: 16px; line-height: 23px; }
.ob-msgcard__at { display: block; margin-top: 8px; font-size: 13px; color: var(--color-ink-muted); }

/* ---------- Offer details v2: one calm sheet — the offer first, then the words, then what's included, then your answer ---------- */
.ob2 { gap: 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); }
.ob2 > .ob-sec { padding: 16px 20px 4px; }

/* Date + fee: the two facts that are the offer */
.ob2-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; padding: 20px 20px 4px; }
.ob2-fact { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--color-field); color: var(--color-ink); text-align: left; transition: background-color .15s ease, box-shadow .15s ease; }
button.ob2-fact { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ob2-fact:active { transform: scale(.99); }
.ob2-fact__edit { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; color: var(--color-ink-muted); opacity: .7; transition: opacity .15s ease; }
.ob2-cal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); }
.ob2-cal small { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-text); }
.ob2-cal b { font-size: 22px; line-height: 26px; font-weight: 800; }
.ob2-fact__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob2-fact__txt b { font-size: 17px; line-height: 22px; font-weight: 700; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob2-fact__txt small { font-size: 13px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob2-fact__txt--fee b { font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; }

/* Their words: a quote, not a card */
.ob2-note { margin: 16px 20px 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--color-line-strong); }
.ob2-note p { margin: 0; font-size: 16px; line-height: 24px; color: var(--color-ink); white-space: pre-line; overflow-wrap: anywhere; }
.ob2-note small { display: block; margin-top: 6px; font-size: 13px; color: var(--color-ink-muted); }

/* What's included: one list, hairlines between */
.ob2-block { padding: 22px 20px 0; }
.ob2-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--color-ink-muted); }
.ob2-rows { margin: 0; padding: 0; list-style: none; }
.ob2-row { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: var(--hairline) solid var(--color-line); font-size: 15px; }
.ob2-row:last-child { border-bottom: 0; }
.ob2-row__ic { flex: none; width: 20px; height: 20px; color: var(--color-ink-2); }
.ob2-row__k { flex: 1; min-width: 0; color: var(--color-ink-2); }
.ob2-row__v { font-weight: 600; color: var(--color-ink); text-align: right; }
.ob2-row.is-off .ob2-row__v { font-weight: 400; color: var(--color-ink-muted); }
.ob2 .ob-files { margin-top: 4px; background: none; box-shadow: none; }

/* Your answer: last, clear, nothing covering the content */
.ob2-answer { margin: 24px 20px 0; padding-top: 20px; border-top: var(--hairline) solid var(--color-line); }
.ob2-answer .ob-foot, .ob2-answer .ob-foot--decide { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ob2-answer .ob-foot__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.ob2-answer .ob-foot__minor { margin-top: 8px; }
.ob2-answer:not(.is-decide) .ob-foot { gap: 10px; }

/* History: quiet, at the very end */
.ob2-hist { margin: 18px 20px 0; border-radius: 12px; }
.ob2-hist summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-ink-2); }
.ob2-hist summary::-webkit-details-marker { display: none; }
.ob2-hist summary > svg { width: 16px; height: 16px; color: var(--color-ink-muted); }
.ob2-hist summary small { font-weight: 400; color: var(--color-ink-muted); }
.ob2-hist__chev { margin-left: auto; transition: transform .2s ease; }
.ob2-hist[open] .ob2-hist__chev { transform: rotate(180deg); }
.ob2-hist ul { margin: 0; padding: 4px 0 8px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ob2-hist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink-2); }
.ob2-hist li svg { width: 15px; height: 15px; flex: none; color: var(--color-ink-muted); }
.ob2-hist li span { flex: 1; min-width: 0; }
.ob2-hist li small { color: var(--color-ink-muted); }
.ob2-hist li.is-accepted svg { color: var(--color-positive); }

@media (hover: hover) and (pointer: fine) {
  button.ob2-fact:hover { background: var(--color-hover); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
  button.ob2-fact:hover .ob2-fact__edit { opacity: 1; color: var(--color-ink); }
}
@media (max-width: 380px) {
  .ob2-summary { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .ob2-summary { padding: 24px 24px 4px; }
  .ob2-note, .ob2-hist { margin-left: 24px; margin-right: 24px; }
  .ob2-block { padding-left: 24px; padding-right: 24px; }
  .ob2-answer { margin-left: 24px; margin-right: 24px; }
}

/* ---------- Decision: one row — Decline (quiet, far left) · Counter · Accept ---------- */
.ob-decide { display: flex; align-items: center; gap: 12px; width: 100%; }
.ob-decline { flex: none; height: 48px; padding: 0 6px; margin-left: -6px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--color-danger); -webkit-tap-highlight-color: transparent; }
.ob-decide__main { flex: 1; display: flex; justify-content: flex-end; gap: 10px; min-width: 0; }
.ob-decide__main .ob-btn { height: 48px; padding: 0 20px; border-radius: 14px; font-size: 15px; flex: 0 1 auto; min-width: 0; }
.ob-decide__main .ob-btn--main { flex: 0 1 180px; }
.ob2-answer .ob-foot--decide { display: block; }
@media (max-width: 639px) {
  .ob-decide__main .ob-btn { flex: 1 1 0; padding: 0 12px; }
  .ob-decide__main .ob-btn--main { flex: 1.3 1 0; }
}
@media (hover: hover) and (pointer: fine) { .ob-decline:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); } }

.ob-thread__more { flex: none; width: 40px; height: 40px; margin-right: -4px; }
@media (min-width: 1024px) { .ob__main .ob-thread__more { margin-right: 0; } }
.ob-thread__more svg { width: 20px; height: 20px; }
@media (max-width: 430px) {
  .ob-decide { gap: 8px; }
  .ob-decide__main { gap: 8px; }
  .ob-decide__main .ob-btn { padding: 0 8px; font-size: 14px; white-space: nowrap; }
  .ob-decide__main .ob-btn--main { flex: 1.15 1 0; gap: 6px; }
  .ob-decide__main .ob-btn--main svg { width: 14px; height: 14px; }
  .ob-decline { font-size: 14px; }
}
.ob-row__muted { flex: none; width: 14px; height: 14px; color: var(--color-ink-muted); }
.ob2-answer:not(.is-decide) .ob-foot { flex-wrap: wrap; }
.ob2-answer:not(.is-decide) .ob-foot .ob-btn svg { width: 14px; height: 14px; }

/* Not the Admin: who decides, and where to talk */
.ob-noadmin { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--color-field); }
.ob-noadmin > svg { flex: none; width: 18px; height: 18px; color: var(--color-ink-2); }
.ob-noadmin span { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--color-ink-2); }
.ob-noadmin .ob-btn { flex: none; height: 40px; padding: 0 14px; font-size: 14px; }
.ob-noadmin .ob-btn svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .ob-noadmin { flex-wrap: wrap; } .ob-noadmin .ob-btn { width: 100%; } }

/* Announce */
.an-box { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.an-box.is-done { background: var(--color-field); box-shadow: none; }
.an-box__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.an-box__txt b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.an-box__txt b svg { width: 15px; height: 15px; color: var(--color-positive); }
.an-box__txt small { font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.an-box .ob-btn { flex: none; height: 42px; padding: 0 16px; font-size: 14px; }
.an-box .ob-btn svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .an-box { flex-wrap: wrap; } .an-box__go { width: 100%; } }
.an-sheet .fsheet__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 16px); padding: 8px 0 0; }
.an-sheet .pf-sheet__bar { padding: 0 8px 0 16px; }
.an-form__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.an-form__what { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.an-form__what b { font-size: 16px; }
.an-form__what small { font-size: 13px; color: var(--color-ink-muted); text-transform: capitalize; }
.an-poster { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: min(100%, 240px); aspect-ratio: 4 / 5; align-self: center; border-radius: 14px; overflow: hidden; background: var(--color-field); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-line-strong); text-align: center; padding: 16px; }
.an-poster:has(img) { padding: 0; box-shadow: none; }
.an-poster img { width: 100%; height: 100%; object-fit: cover; }
.an-poster > svg { width: 28px; height: 28px; }
.an-poster b { font-size: 15px; color: var(--color-ink); }
.an-poster small { font-size: 12px; line-height: 16px; color: var(--color-ink-muted); }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
.an-row .shp-field { margin-top: 0; }
.an-form__note { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.an-form__note svg { flex: none; width: 16px; height: 16px; }
.an-form__go { width: 100%; height: 50px; justify-content: center; font-size: 16px; border-radius: 14px; }
@media (min-width: 640px) { .an-sheet .fsheet__panel { max-width: 460px; max-height: min(780px, calc(100dvh - 48px)); } }
/* the page title never moves: with nothing in Offers it stays top-left like on every page; only the hero below is centred */
@media (min-width: 1024px) {
  .ob.is-empty .ob__head { max-width: none; margin: 0; text-align: left; }
  .ob.is-empty .ob__sub { justify-content: flex-start; }
}

/* message avatars open the profile (23 Oct) */
.ob-msg__av { flex: none; align-self: flex-end; border-radius: 50%; display: block; }
.ob-msg__av:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-accent); }
.ob-msg__av:active { opacity: .7; }
.ob-msg__av { text-decoration: none; color: inherit; }
.ch-note span { max-width: 38ch; }
.ob-noadmin--chat { margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; }
/* a value with an explanation under it (Cancellation · Standard + the rule) never runs over its label */
.ob2-row__k { flex: 1 0 auto; white-space: nowrap; }
.ob2-row__v { flex: 0 1 auto; min-width: 0; max-width: 64%; }
.ob2-row:has(.ob2-row__v small) { align-items: flex-start; padding: 13px 0; }
.ob2-row:has(.ob2-row__v small) .ob2-row__ic { margin-top: 1px; }

/* ---------- Offers on the web (owner 24 Oct): the same frame as Tasks, Crew and Gig Match ----------
   No boxes: the list is rows with lines, the open offer sits beside it behind one glowing line, full height,
   its composer is the glowing field. Phone stays as it is. */
@media (min-width: 1024px) {
  .ob:not(.ob--fan) { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .ob:not(.ob--fan) .ob__side, .ob:not(.ob--fan) > .ob__head, .ob:not(.ob--fan) > .ob__list { padding-right: 28px; }
  .ob:not(.ob--fan) .ob__list { margin: 14px 0 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
  .ob:not(.ob--fan) .ob-row { padding: 16px 12px; margin: 0 -12px; border-top: 0; border-bottom: var(--hairline) solid var(--color-line); border-radius: 14px; background: none; }
  .ob:not(.ob--fan) .ob-row:last-child { border-bottom: 0; }
  .ob:not(.ob--fan) .ob-row.is-open { background: var(--color-accent-soft); border-bottom-color: transparent; box-shadow: none; }
  .ob:not(.ob--fan) .ob-row.is-open::before { display: none; }
  .ob__main { top: 0; height: 100dvh; max-height: none; margin-top: -28px; padding: 28px 0 0 28px; border-radius: 0; box-shadow: none; background: none; }
  .ob__main::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 22%, color-mix(in srgb, var(--color-accent) 70%, transparent) 78%, transparent);
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }
  .ob__main .ob-thread { min-height: calc(100dvh - 28px); background: none; }
  .ob__main .ob-thread__head { padding: 0 0 12px; border-bottom: 0; background: none; }
  .ob__main .ob-tabs { background: var(--color-bg); }
  .ob__main .ob-chat, .ob__main .ob-chat__list { background: none; }
  .ob__main .ob2, .ob__main .ob-crew, .ob__main .ob-answer .ob-foot, .ob__main .ob-foot--decide { background: none; box-shadow: none; }
  .ob__main .ob2-summary { padding: 20px 24px 4px; }
  .ob__main .ob-tabs { margin-right: 0; }
  .ob__main .ob-compose { position: sticky; bottom: 0; align-items: flex-end; gap: 10px; padding: 12px 0 24px; background: var(--color-bg); border-top: 0; }
  .ob__main .ob-compose textarea { min-height: 48px; padding: 13px 20px; border-radius: 24px; background: var(--color-surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 32%, var(--color-line)), 0 0 24px -6px color-mix(in srgb, var(--color-accent) 45%, transparent); }
  .ob__main .ob-compose textarea:focus { outline: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 75%, transparent), 0 0 32px -4px color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .ob__main .ob-send { width: 48px; height: 48px; background: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--color-accent) 80%, transparent); }
  .ob__main .ob-send:disabled { background: var(--color-field); color: var(--color-ink-muted); box-shadow: none; }
}

/* 24 Oct: nothing to open yet → no reading pane and no divider beside the empty state */
.ob.is-empty .ob__main { display: none; }