@import url('../base.css');
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--color-surface); padding: 8px; z-index: 99; }
.logo { font: 700 24px/1 var(--font-heading); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; }
.logo i { font-style: normal; color: var(--color-primary-ink); }

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--aside-w); min-height: 100vh; }
.side { border-right: 2px solid var(--color-rule-strong); padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.newbtn { width: 100%; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--color-ink); font-weight: 600; border-left: 4px solid transparent; }
.nav a:hover { background: var(--color-surface-2); }
.nav a[aria-current='page'] { border-left-color: var(--color-primary); background: var(--color-primary-tint); font-weight: 700; }
.nav a span { width: 18px; text-align: center; color: var(--color-ink-3); }
.dot { margin-left: auto; background: var(--color-primary-strong); color: #fff; font-size: 12px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-sm); }
.me { margin-top: auto; display: grid; gap: 2px; font-size: 14px; border-top: 1px solid var(--color-rule); padding-top: 12px; }

.main { min-width: 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--color-rule); min-height: 64px; flex-wrap: wrap; position: sticky; top: 0; background: var(--color-bg); z-index: 10; }
.bar h1 { font-size: var(--text-xl); }
.bar__tools { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bar .AppSegmentedTabs button { min-height: 34px; padding: 0 10px; font-size: 13px; }
main { padding: 28px 32px 64px; outline: none; }
.rail { border-left: 1px solid var(--color-rule); padding: 28px 24px; display: grid; gap: 20px; align-content: start; background: var(--color-surface-2); }
.rail h2 { font-size: var(--text-base); margin-bottom: 8px; }
.rail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.rail dt { color: var(--color-ink-3); } .rail dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.page-h { margin-bottom: 20px; display: flex; justify-content: space-between; gap: 12px; align-items: end; flex-wrap: wrap; }
.page-h h2 { font-size: var(--text-2xl); }
.page-h p { color: var(--color-ink-2); }
.stack { display: grid; gap: 20px; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--color-rule); color: inherit; text-decoration: none; }
.row:last-child { border-bottom: 0; }
a.row:hover { background: var(--color-surface-2); }
.row .ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-rule); font: 700 14px var(--font-mono); color: var(--color-ink-2); }
.row .t { font-weight: 700; overflow-wrap: anywhere; } .row .s { font-size: 14px; color: var(--color-ink-2); overflow-wrap: anywhere; }
.row--act .ic { border-color: var(--color-primary); color: var(--color-primary-ink); background: var(--color-primary-tint); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* timeline */
.tl { position: relative; padding-left: 8px; }
.tl li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 0 0 18px; position: relative; font-size: 14px; }
.tl li::before { content: ''; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--color-rule); }
.tl li:last-child::before { display: none; }
.tl .p { width: 24px; height: 24px; border: 2px solid var(--color-ink-3); display: grid; place-items: center; font: 700 12px var(--font-body); background: var(--color-surface); }
.tl .done .p { background: var(--color-success); border-color: var(--color-success); color: #0B2A0D; }
.tl .cur .p { border-color: var(--color-primary-ink); background: var(--color-primary-tint); color: var(--color-primary-ink); }
.tl .cur b { color: var(--color-primary-ink); }
.tl .wait { color: var(--color-ink-3); }
.tl .when { color: var(--color-ink-3); font-size: 13px; }

/* offer */
.offer { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border: 2px solid var(--color-primary-ink); background: var(--color-primary-tint); padding: 14px 16px; }
.offer .price { font: 700 var(--text-xl)/1.1 var(--font-heading); }
.offer .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.waitbox { border: 1px dashed var(--color-ink-3); padding: 14px 16px; background: var(--color-surface); display: flex; gap: 12px; align-items: center; }

/* chat */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--color-rule); border-top: 2px solid var(--color-rule-strong); background: var(--color-surface); min-height: 560px; }
.threads { border-right: 1px solid var(--color-rule); }
.thread { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--color-rule); text-decoration: none; color: inherit; border-left: 4px solid transparent; }
.thread[aria-current='true'] { background: var(--color-primary-tint); border-left-color: var(--color-primary); }
.thread b { overflow-wrap: anywhere; } .thread span { font-size: 13px; color: var(--color-ink-2); overflow-wrap: anywhere; }
.conv { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.conv__h { padding: 12px 18px; border-bottom: 1px solid var(--color-rule); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.msgs { padding: 18px; display: grid; gap: 10px; align-content: start; }
.msg { max-width: 78%; padding: 10px 14px; border: 1px solid var(--color-rule); background: var(--color-surface-2); overflow-wrap: anywhere; }
.msg small { display: block; color: var(--color-ink-3); font-size: 12px; margin-top: 4px; }
.msg.me { justify-self: end; background: var(--color-primary-tint); border-color: var(--color-primary-ink); }
.composer { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--color-rule); }
.back { display: none; }

.pay-methods { display: grid; gap: 10px; }
.sum2 { display: grid; gap: 8px; font-size: 15px; } .sum2 div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-rule); padding-bottom: 8px; }
.sum2 .tot { font: 700 var(--text-lg) var(--font-heading); border-bottom: 2px solid var(--color-rule-strong); }

.bottom { display: none; }
.proto { white-space: nowrap; }

@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .bar { padding: 10px 16px; min-height: 56px; }
  .bar h1 { font-size: var(--text-lg); }
  .bar__tools { width: 100%; }
  .bar__tools .AppSegmentedTabs { flex: 1; }
  .proto { display: none; }
  main { padding: 16px 16px 96px; }
  .cols { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; }
  .page-h h2 { font-size: var(--text-xl); }
  .chat { grid-template-columns: 1fr; min-height: 0; }
  .chat[data-view='list'] .conv, .chat[data-view='conv'] .threads { display: none; }
  .back { display: inline-flex; }
  .msg { max-width: 92%; }
  .bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-surface); border-top: 2px solid var(--color-rule-strong); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .bottom a { display: grid; justify-items: center; gap: 2px; padding: 8px 0; min-height: 56px; text-decoration: none; color: var(--color-ink-2); font: 700 11px var(--font-body); border-top: 4px solid transparent; margin-top: -2px; }
  .bottom a[aria-current='page'] { color: var(--color-primary-ink); border-top-color: var(--color-primary); }
  .toast { bottom: 76px; }
  .row { grid-template-columns: 36px minmax(0, 1fr); } .row > :last-child { grid-column: 2; }
  .row .ic { width: 36px; height: 36px; }
  .ledger td.r { white-space: normal; }
}
@media (max-width: 760px) {
  .bar .AppSegmentedTabs button { padding: 0 7px; font-size: 12px; }
  .bar .tg { padding: 0 8px; }
}