:root { color-scheme: light; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f5f2; color: #171714; }
button, input, textarea { font: inherit; }
button { min-height: 2.75rem; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
.app { max-width: 72rem; margin: auto; padding: 1rem; }
.app > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.app > header h1, .app > header p { margin: .25rem 0; }
.layout { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; min-height: calc(100dvh - 7rem); }
.layout nav, .layout section, .auth { padding: 1rem; border-radius: .75rem; background: white; }
.layout nav { display: flex; flex-direction: column; gap: .5rem; align-self: stretch; min-width: 0; max-height: calc(100dvh - 7rem); }
.inbox__controls { display: grid; gap: .5rem; border-bottom: 1px solid #deded8; padding-bottom: .75rem; }
.inbox__controls select { width: 100%; min-width: 0; padding: .5rem; }
.inbox__summary { margin: .25rem 0; font-size: .875rem; color: #56564f; }
.inbox__list { display: flex; flex: 1; flex-direction: column; gap: .5rem; overflow-y: auto; overscroll-behavior: contain; }
.inbox__row { position: relative; display: grid; gap: .25rem; min-width: 0; padding: .75rem 2.5rem .75rem .75rem; text-align: left; border: 1px solid #deded8; border-radius: .6rem; background: #fff; }
.inbox__row[aria-current="true"] { border-color: #171714; background: #f5f5f2; }
.inbox__row span, .inbox__row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__row small { color: #56564f; }
.inbox__badge { position: absolute; top: .65rem; right: .65rem; min-width: 1.5rem; padding: .15rem .4rem; border-radius: 999px; background: #171714; color: white; text-align: center; }
.inbox__more { min-height: 2.75rem; }
.auth { display: grid; gap: .75rem; max-width: 28rem; margin: 4rem auto; }
.auth input { padding: .75rem; }
.auth p { min-height: 1.5rem; margin: 0; }
.chat { display: grid; align-content: start; gap: 1rem; width: 100%; max-width: 48rem; min-width: 0; max-height: calc(100dvh - 7rem); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; }
.chat--empty { place-content: center; }
.chat__back { display: none; }
.chat__context { position: sticky; top: -1rem; z-index: 2; padding: .75rem 0; background: white; border-bottom: 1px solid #deded8; }
.chat__context h2, .chat__context p { margin: .2rem 0; overflow-wrap: anywhere; }
.chat__title { margin: 0; }
.chat__history { display: flex; flex: 1 1 auto; flex-direction: column; gap: .75rem; min-height: 12rem; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.chat__message, .chat__notice, .chat__composer { padding: 1rem; border-radius: .75rem; background: #f5f5f2; overflow-wrap: anywhere; }
.chat__message { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; width: min(85%, 36rem); border: 1px solid #e4e4de; }
.chat__message[data-sender="customer"] { align-self: end; background: #e9eee8; border-color: #cfd9cd; }
.chat__sender { font-size: .8rem; }
.chat__timestamp { color: #686860; font-size: .75rem; }
.chat__message-content { grid-column: 1 / -1; white-space: pre-wrap; }
.chat__empty { margin: auto; padding: 2rem 1rem; color: #686860; text-align: center; }
.chat__composer { position: sticky; bottom: -1rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; border: 1px solid #deded8; }
.chat__composer textarea { flex: 1; min-width: 0; min-height: 4rem; }
.chat__photo-input { flex-basis: 100%; max-width: 100%; }
.chat__send-status { align-self: center; margin: 0; }
.chat__send-status:empty { display: none; }
.chat__image { display: block; width: auto; max-width: 100%; height: auto; max-height: 32rem; object-fit: contain; border-radius: .5rem; }
.chat__image[data-state="loading"] { min-width: 8rem; min-height: 6rem; background: #e6e6e0; }
.chat__image-error { margin: .5rem 0 0; }
.chat__action { justify-self: start; padding: .75rem 1rem; }
.chat__checkout { display: grid; gap: .75rem; padding: 1rem; border-radius: .75rem; background: #f5f5f2; }
.chat__checkout p { margin: 0; }
.chat__checkout button { justify-self: start; padding: .75rem 1rem; }
.public-profile { display: grid; justify-items: center; gap: 1rem; width: min(100% - 2rem, 42rem); margin: max(2rem, 8dvh) auto; padding: clamp(1.25rem, 4vw, 3rem); border-radius: 1rem; background: white; text-align: center; box-shadow: 0 1rem 3rem rgb(23 23 20 / .08); }
.public-profile h1, .public-profile p { margin: 0; }
.public-profile__avatar { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: #171714; color: white; font-size: 2rem; font-weight: 700; }
.public-profile__category { color: #686860; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.public-profile__description { max-width: 34rem; white-space: pre-wrap; }
.public-profile__price { font-size: 1.15rem; font-weight: 700; }
.public-profile__action { width: min(100%, 24rem); padding: .85rem 1rem; border: 0; border-radius: .65rem; background: #171714; color: white; }
.operator { max-width: 90rem; }
.operator__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.operator__header h1, .operator__header p { margin: .2rem 0; }
.operator__overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.operator__metric, .operator__card, .operator__directory, .operator__detail, .operator__filters { padding: 1rem; border-radius: .75rem; background: white; }
.operator__metric { display: grid; gap: .35rem; }
.operator__metric span { color: #686860; font-size: .82rem; }
.operator__metric strong { font-size: 1.25rem; }
.operator__filters { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(9rem, auto) minmax(9rem, auto) auto; gap: .5rem; margin-top: 1rem; }
.operator__filters input, .operator__filters select { min-width: 0; padding: .65rem; }
.operator__layout { display: grid; grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; min-height: 30rem; }
.operator__directory { display: flex; flex-direction: column; gap: .5rem; min-width: 0; max-height: 70dvh; overflow-y: auto; }
.operator__directory h2, .operator__detail h2 { margin-top: 0; }
.operator__workspace { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; width: 100%; padding: .75rem; border: 1px solid #deded8; border-radius: .6rem; background: white; text-align: left; }
.operator__workspace[aria-current="true"] { border-color: #171714; background: #f5f5f2; }
.operator__workspace > span, .operator__workspace > time { grid-column: 1 / -1; color: #56564f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator__status { align-self: start; padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.operator__status--active { background: #dcebd9; color: #244c20; }
.operator__status--inactive { background: #e6e6e0; color: #4f4f48; }
.operator__status--suspended { background: #f3dddd; color: #742626; }
.operator__detail { min-width: 0; max-height: 70dvh; overflow-y: auto; }
.operator__detail > * + * { margin-top: 1rem; }
.operator__detail .operator__card { border: 1px solid #e1e1dc; }
.operator__detail-line { overflow-wrap: anywhere; }
.operator__controls { display: flex; flex-wrap: wrap; gap: .75rem; }
.operator__controls h3, .operator__controls [role="status"] { flex-basis: 100%; }
.operator__back { display: none; }
.operator__payments { margin-top: 1rem; }
.operator__empty, .operator__error { padding: 2rem; text-align: center; }
@media (max-width: 32rem) {
  .app { padding: .5rem; }
  .app > header { padding: 0 .25rem; }
  .layout { display: block; min-height: calc(100dvh - 5rem); }
  .layout nav { max-height: calc(100dvh - 6rem); }
  .layout--detail .inbox { display: none; }
  .layout:not(.layout--detail) .chat { display: none; }
  .chat { max-height: calc(100dvh - 6rem); margin: 0 auto; padding: .75rem; }
  .chat__back { display: block; position: sticky; top: -.75rem; z-index: 3; min-height: 2.75rem; background: white; }
  .chat__context { top: 2rem; }
  .chat__composer { bottom: -.75rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .chat__composer { flex-direction: column; }
  .chat__composer button, .chat__action { width: 100%; min-height: 2.75rem; }
  .chat__message { width: 92%; }
  .public-profile { width: calc(100% - 1rem); margin: .5rem; min-height: calc(100dvh - 1rem); align-content: center; border-radius: .75rem; }
  .operator__header { padding: 0 .25rem; }
  .operator__overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator__filters { grid-template-columns: 1fr; }
  .operator__layout { display: block; min-height: 60dvh; }
  .operator__directory, .operator__detail { max-height: 70dvh; }
  .operator__layout--detail .operator__directory { display: none; }
  .operator__layout:not(.operator__layout--detail) .operator__detail { display: none; }
  .operator__back { display: block; position: sticky; top: -1rem; z-index: 2; width: 100%; background: white; }
  .operator__controls button, .operator__more { width: 100%; }
}