:root { --chat-bg: #0b0114; --chat-surface: #140824; --chat-surface-2: #1a0e2e; --chat-surface-3: #221438; --chat-divider: #2d1b4e; --chat-accent: #6a00ff; --chat-accent-strong: #5200cc; --chat-gold: #ffd700; --chat-text: #f5f0ff; --chat-text-muted: #c9b8e8; --chat-text-dim: #a597b9; }
/* Chat surfaces and contract timeline. Loaded after the legacy inbox styles. */
.inbox-app { max-width: 1600px; grid-template-columns: 300px minmax(0, 1fr) 260px; background: var(--chat-bg); box-shadow: none; transition: none; }
.inbox-app .card { min-width: 0; min-height: 0; }
.inbox-threads, .inbox-context { background: var(--chat-surface); }
.inbox-chat { background: var(--chat-bg); min-width: 0; }
.inbox-app .negotiation-panel { background: var(--chat-surface); border-bottom: 1px solid #ffffff0d; padding: 18px 24px; }
.inbox-app .chat-body { background: var(--chat-bg); padding: 24px; min-height: 0; overscroll-behavior: contain; }
.inbox-app .composer { background: var(--chat-bg); padding: 14px 24px 20px; flex-shrink: 0; }
.inbox-app .composer-input-wrapper { background: var(--chat-surface-2); border-radius: 18px; }
.inbox-app .bubble { overflow-wrap: anywhere; }
.inbox-app .bubble--out { background: var(--chat-accent-strong); color: #f6f0ff; }
.inbox-app .bubble--in { background: var(--chat-surface-2); color: #eee8f5; }
.inbox-app .thread--active { background: var(--chat-surface-3); border-radius: 12px; }
.chat-user-info, .chat-user-details, .contract-top-bar__left { min-width: 0; }
.inbox-app .contract-top-bar { margin: 12px 20px 0; padding: 14px 16px; border-radius: 12px; background: var(--chat-surface-2); gap: 12px; flex-shrink: 0; }
.contract-top-bar__left { flex-wrap: wrap; gap: 6px 10px; }
.contract-top-bar__right { flex-shrink: 0; }
.contract-top-bar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-app button:focus-visible, .inbox-app [tabindex]:focus-visible, .preview-toolbar button:focus-visible { outline: 2px solid #c4a9ff !important; outline-offset: 4px; }
.inbox-app button:disabled, .contract-drawer button:disabled { opacity: .5; cursor: wait !important; }
.contract-drawer-overlay[hidden] { display: none !important; }
.contract-drawer-overlay { padding: 24px; background: #05050bb3; backdrop-filter: blur(4px); }
.contract-drawer { width: min(620px, 100%); max-width: 620px; max-height: calc(100dvh - 48px); background: var(--chat-surface); border: 1px solid #ffffff18; border-radius: 24px; box-shadow: 0 28px 100px #0008; }
.contract-drawer__handle-bar { display: none; }
.contract-drawer__header { display: block; padding: 28px 28px 22px; background: var(--chat-surface-2); border-bottom: 1px solid #ffffff0d; }
.contract-drawer__header-main { min-width: 0; }
.contract-drawer__status-badge { color: #c8bbdf; font-size: 12px; }
.contract-drawer__title { font-size: clamp(20px, 4vw, 26px); margin: 12px 0 8px; overflow-wrap: anywhere; line-height: 1.35; }
.contract-drawer__amount { font-size: 22px; color: #eee8fa; font-variant-numeric: tabular-nums; }
.contract-drawer__deadline { padding: 0; margin-top: 12px; background: none; color: #ada6bc; font-size: 12px; }
.contract-drawer__body { display: block; padding: 24px 28px; min-height: 0; overscroll-behavior: contain; }
.contract-drawer__footer { padding: 14px 28px max(16px, env(safe-area-inset-bottom)); background: var(--chat-surface); border-top: 1px solid #ffffff0d; }
.contract-drawer__btn-close { background: var(--chat-surface-3); min-height: 44px; border-radius: 12px; color: #e5deee; }
.contract-eyebrow { color: #a59bad; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.contract-overview__title { margin: 8px 0; color: #f2edf8; font-size: 18px; }
.contract-help, .contract-description { font-size: 13px; line-height: 1.7; color: #aaa5b7; margin: 0 0 18px; overflow-wrap: anywhere; }
.contract-progress-label { color: #c7bdd7; font-size: 12px; }
.contract-progress { display: block; width: 100%; height: 5px; margin: 10px 0 24px; border: 0; border-radius: 8px; accent-color: var(--chat-accent); }
.contract-progress::-webkit-progress-bar { background: var(--chat-divider); border-radius: 8px; }
.contract-progress::-webkit-progress-value { background: var(--chat-accent); border-radius: 8px; }
.contract-timeline { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.contract-stage { display: flex; gap: 14px; padding: 16px; border: 1px solid #ffffff0d; border-radius: 14px; background: var(--chat-surface-2); }
.contract-stage.is-current { background: var(--chat-surface-3); border-color: #a88be85c; }
.contract-stage__number { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #ffffff08; color: #b6a8cb; font-size: 12px; font-weight: 700; }
.is-current .contract-stage__number { background: var(--chat-accent); color: #fff; }
.is-done .contract-stage__number { color: #75d9b6; background: #75d9b614; }
.contract-stage__content { min-width: 0; flex: 1; }
.contract-stage__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.contract-stage__head h5 { font-size: 13px; color: #ece7f3; margin: 3px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.contract-stage__head strong { color: #c8bdd9; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contract-stage__status { color: #a9a1b6; font-size: 12px; line-height: 1.6; margin: 7px 0 0; }
.is-done .contract-stage__status { color: #75d9b6; }
.contract-drawer .drawer-btn-action { margin-top: 14px; background: var(--chat-accent); color: #fff; min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: 12px; font-weight: 800; white-space: normal; }
.contract-payment-note { padding-top: 16px; border-top: 1px solid #ffffff0d; margin: 18px 0 0; color: #958caa; font-size: 11px; line-height: 1.7; }
.contract-action-feedback { color: #dcc8ff; font-size: 13px; line-height: 1.5; }
.contract-action-feedback:empty { display: none; }
.contract-description { margin-top: 18px; }
@media (max-width: 1100px) {
    .inbox-app { grid-template-columns: minmax(0, 1fr); }
    body.context-open .inbox-context { display: flex !important; }
    .inbox-app .chat-body { padding: 16px; }
    .inbox-app .composer { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
    .inbox-app .negotiation-panel { padding: 12px; }
    .inbox-app .contract-top-bar { margin: 8px 12px 0; padding: 12px; }
    .contract-top-bar__title, .contract-top-bar__sep { display: none; }
    .inbox-app textarea { font-size: 16px; }
}
@media (max-width: 600px) {
    .contract-drawer-overlay { padding: 0; align-items: flex-end; }
    .contract-drawer { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; }
    .contract-drawer__handle-bar { display: flex; padding: 10px 0 0; background: var(--chat-surface-2); }
    .contract-drawer__header { padding: 18px 20px; }
    .contract-drawer__body { padding: 20px; }
    .contract-drawer__footer { padding-left: 20px; padding-right: 20px; }
    .contract-stage { padding: 14px 12px; gap: 10px; }
    .contract-stage__head { flex-wrap: wrap; gap: 4px; }
    .contract-stage .drawer-btn-action { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .contract-drawer, .contract-drawer-overlay { transition: none; } }

/* Resolve the legacy !important rules at the actual component boundary. */
.inbox-app .bubble--out { background: var(--chat-accent-strong) !important; }
.inbox-app .bubble--in { background: var(--chat-surface-2) !important; }
.inbox-app .bubble > span { color: #d2c4e9; opacity: 1; }
.inbox-app .bubble--offer { width: min(390px, 100%) !important; max-width: 100% !important; min-width: 0; border: 1px solid var(--chat-divider) !important; border-radius: 16px !important; overflow: hidden; }
.inbox-app .bubble--offer__head, .inbox-app .bubble--offer__footer { padding: 16px !important; background: transparent !important; }
.inbox-app .bubble--offer__tag, .inbox-app .status-tag { background: transparent !important; color: var(--chat-text-muted) !important; text-transform: none; letter-spacing: 0; padding: 0; font-size: 11px; white-space: normal; line-height: 1.5; }
.inbox-app .bubble--offer__price strong { color: var(--chat-gold) !important; }
.inbox-app .bubble--offer__footer button { background: var(--chat-accent) !important; color: #fff !important; min-height: 44px; border-radius: 10px !important; white-space: normal; width: 100%; justify-content: center; }
.inbox-app .bubble-group { min-width: 0; max-width: 100%; }
.inbox-app .quick-replies { overflow-x: auto; max-width: 100%; flex-shrink: 0; scrollbar-width: thin; padding: 8px 16px; gap: 8px; }
.inbox-app .quick-replies button { flex: 0 0 auto; max-width: 240px; white-space: normal; min-height: 40px; border: 1px solid var(--chat-divider) !important; background: var(--chat-surface-2); color: var(--chat-text-muted); }
.inbox-app .chat-service-context { flex-wrap: wrap; }
.inbox-app .chat-user-details { overflow: hidden; }
.inbox-app .contract-top-bar__amount, .contract-drawer__amount { color: var(--chat-gold); }
.contract-drawer { overflow: hidden; max-height: calc(100dvh - 64px); }
.contract-drawer__header, .contract-drawer__footer { flex: 0 0 auto; }
.contract-drawer__header { padding: 22px 24px 18px; }
.contract-drawer__body { flex: 1 1 auto; padding: 20px 24px; }
.contract-drawer__body { scrollbar-width: thin; scrollbar-color: var(--chat-divider) transparent; }
.contract-drawer__body::-webkit-scrollbar-thumb { background: var(--chat-divider); }
.contract-drawer__title { font-size: 22px; margin: 10px 0; }
.contract-value-label { display: block; font-size: 11px; color: var(--chat-text-muted); margin-bottom: 4px; }
.contract-stage { padding: 12px 14px; }
.contract-stage.is-current { border-color: var(--chat-accent); }
.contract-progress { margin-bottom: 16px; }
.contract-timeline { margin-top: 16px; }
.contract-overview .contract-help { margin-bottom: 12px; }
.contract-financial { margin: 20px 0 0; padding: 14px; background: var(--chat-surface-2); border-radius: 12px; }
.contract-financial__row { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.6; padding: 4px 0; color: var(--chat-text-muted); }
.contract-financial__row dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contract-financial__row:last-child { color: var(--chat-text); font-weight: 700; border-top: 1px solid var(--chat-divider); margin-top: 6px; padding-top: 10px; }
.contract-payment-note { font-size: 11px; }
.contract-drawer__header-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.contract-drawer__status-badge { grid-column: 1 / -1; }
.contract-drawer__title { grid-column: 1; grid-row: 2; margin: 8px 0; font-size: 20px; }
.contract-value-label { grid-column: 2; grid-row: 2; margin: 0; text-align: right; }
.contract-drawer__amount { grid-column: 2; grid-row: 3; text-align: right; font-size: 20px; }
.contract-drawer__deadline { grid-column: 1; grid-row: 3; margin: 0; }
.contract-overview[data-paid="true"] .contract-eyebrow, .contract-overview[data-paid="true"] .contract-help { display: none; }
.contract-overview[data-paid="true"] .contract-overview__title { margin: 0 0 8px; font-size: 15px; }
.contract-stage__content { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
.contract-stage__head { grid-column: 1 / -1; }
.contract-stage__status { align-self: center; margin: 0; }
.contract-stage .drawer-btn-action { grid-column: 2; margin-top: 4px; }
.contract-payment-details { margin-top: 16px; border-top: 1px solid var(--chat-divider); padding-top: 14px; }
.contract-payment-details > summary { color: var(--chat-text); font-size: 12px; cursor: pointer; padding: 4px 0; }
.contract-payment-details .contract-financial { margin-top: 10px; }
@media (max-width: 600px) {
    .inbox-app .negotiation-panel { display: flex; gap: 10px; }
    .inbox-app .chat-user-info { flex: 1; gap: 10px; }
    .inbox-app .chat-head__back { margin: 0; flex: 0 0 30px; }
    .inbox-app .chat-head__context-btn { flex: 0 0 36px; }
    .inbox-app .chat-service-context .dot-separator { display: none; }
    .inbox-app .chat-service-context #ctx-service { display: none; }
    .inbox-app .contract-top-bar { margin: 0; border-radius: 0; padding: 10px 14px; }
    .inbox-app .contract-top-bar__left { flex: 1; }
    .inbox-app .contract-top-bar__status { font-size: 12px; }
    .inbox-app .contract-top-bar__amount { font-size: 12px; }
    .contract-drawer-overlay { padding: 12px; align-items: center; }
    .contract-drawer { max-height: calc(100dvh - 24px); border-radius: 18px; }
    .contract-drawer__handle-bar { display: none; }
    .contract-drawer__header { padding: 18px; }
    .contract-drawer__body { padding: 16px; }
    .contract-drawer__footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
    .contract-stage__head { display: block; }
    .contract-stage__head strong { display: block; margin-top: 4px; }
    .contract-drawer__header-main { column-gap: 12px; }
    .contract-drawer__title { grid-column: 1 / -1; font-size: 18px; }
    .contract-value-label { grid-column: 1; grid-row: 3; text-align: left; }
    .contract-drawer__amount { grid-column: 2; grid-row: 3; font-size: 18px; }
    .contract-drawer__deadline { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; }
    .contract-stage__content { display: block; }
    .contract-stage__status { margin-top: 4px; }
    .contract-stage .drawer-btn-action { margin-top: 8px; }
}