.tcf-assistant, .tcf-operator, .tcf-operator-login { max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.tcf-assistant { display: grid; grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); gap: 76px; align-items: start; }
.tcf-assistant h1, .tcf-operator h1, .tcf-operator-login h1 { margin-bottom: 25px; font-size: 57px; }
.tcf-assistant-intro > p:not(.tcf-eyebrow), .tcf-operator-head p { max-width: 460px; color: var(--tcf-muted); font-size: 17px; }
.tcf-assistant-promises { display: grid; gap: 13px; margin: 38px 0 0; padding: 0; list-style: none; color: var(--tcf-muted); font-size: 13px; font-weight: 740; }
.tcf-assistant-promises li { display: flex; align-items: baseline; gap: 11px; }.tcf-assistant-promises span { color: #397d89; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.tcf-assistant-chat { border: 1px solid var(--tcf-ink); background: var(--tcf-white); }
.tcf-assistant-status { display: flex; align-items: center; gap: 8px; padding: 15px 18px; border-bottom: 1px solid var(--tcf-line); color: var(--tcf-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tcf-assistant-status span { width: 8px; height: 8px; background: var(--tcf-lime); }
.tcf-assistant-messages { display: flex; min-height: 350px; max-height: 510px; flex-direction: column; gap: 14px; overflow-y: auto; padding: 24px; background: linear-gradient(90deg, rgba(17, 23, 25, .025) 1px, transparent 1px), linear-gradient(rgba(17, 23, 25, .025) 1px, transparent 1px); background-size: 20px 20px; }
.tcf-assistant-bubble { max-width: 85%; padding: 12px 14px; border: 1px solid var(--tcf-line); background: var(--tcf-white); }.tcf-assistant-bubble.is-visitor { align-self: flex-end; border-color: var(--tcf-ink); background: var(--tcf-ink); color: var(--tcf-white); }.tcf-assistant-bubble.is-operator { align-self: flex-start; border-color: var(--tcf-cyan); background: #eafaff; }.tcf-assistant-bubble > span { display: block; margin-bottom: 5px; color: #638078; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.tcf-assistant-bubble.is-visitor > span { color: var(--tcf-lime); }.tcf-assistant-bubble p { margin: 0; font-size: 14px; line-height: 1.45; }
.tcf-assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px 0; }.tcf-assistant-suggestions button { min-height: 32px; padding: 6px 9px; border: 1px solid var(--tcf-line); border-radius: 0; background: var(--tcf-white); color: var(--tcf-ink); cursor: pointer; font-size: 11px; font-weight: 750; }.tcf-assistant-suggestions button:hover { border-color: var(--tcf-ink); background: var(--tcf-mist); }
.tcf-assistant-compose { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 18px; }.tcf-assistant-compose textarea, .tcf-assistant-contact input, .tcf-operator textarea { width: 100%; padding: 12px; border: 1px solid var(--tcf-line); border-radius: 0; background: var(--tcf-white); resize: vertical; }.tcf-assistant-compose textarea { min-height: 52px; }.tcf-assistant-compose button, .tcf-assistant-contact button, .tcf-operator-actions button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--tcf-ink); border-radius: 0; background: var(--tcf-ink); color: var(--tcf-white); cursor: pointer; font-size: 12px; font-weight: 820; }.tcf-assistant-compose.is-sending button { opacity: .5; pointer-events: none; }
.tcf-assistant-notice { margin: 0 18px 18px; padding: 11px; border-left: 3px solid var(--tcf-coral); background: #fff4f0; font-size: 13px; }.tcf-assistant-contact { margin: 0 18px 18px; padding: 16px; border-top: 1px solid var(--tcf-line); background: #f5faf7; }.tcf-assistant-contact p { margin-bottom: 13px; font-size: 13px; font-weight: 760; }.tcf-assistant-contact > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.tcf-assistant-contact label { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 780; }.tcf-assistant-contact input { margin-top: 5px; }.tcf-assistant-contact button { width: 100%; margin-top: 4px; border-color: var(--tcf-lime); background: var(--tcf-lime); color: var(--tcf-ink); }
.tcf-operator-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }.tcf-operator-head .tcf-text-link { margin-bottom: 10px; white-space: nowrap; }.tcf-operator-layout { display: grid; min-height: 550px; grid-template-columns: 270px minmax(0, 1fr); border: 1px solid var(--tcf-ink); background: var(--tcf-white); }.tcf-operator-list { overflow-y: auto; border-right: 1px solid var(--tcf-line); background: #f2f6f3; }.tcf-operator-list a { display: grid; gap: 6px; padding: 15px; border-bottom: 1px solid var(--tcf-line); color: inherit; text-decoration: none; }.tcf-operator-list a:hover, .tcf-operator-list a.is-current { background: var(--tcf-white); }.tcf-operator-list span, .tcf-operator-thread-head span { color: #397d89; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.tcf-operator-list strong { font-size: 13px; }.tcf-operator-list small { color: var(--tcf-muted); font-size: 11px; }.tcf-operator-list > p { padding: 15px; color: var(--tcf-muted); font-size: 13px; }.tcf-operator-thread { display: flex; min-width: 0; flex-direction: column; }.tcf-operator-thread-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 20px; border-bottom: 1px solid var(--tcf-line); }.tcf-operator-thread-head h2 { margin: 4px 0 0; font-size: 29px; }.tcf-operator-thread-head p { max-width: 275px; margin: 3px 0 0; color: var(--tcf-muted); font-size: 12px; text-align: right; }.tcf-operator-messages { flex: 1; padding: 22px; background: linear-gradient(90deg, rgba(17, 23, 25, .025) 1px, transparent 1px), linear-gradient(rgba(17, 23, 25, .025) 1px, transparent 1px); background-size: 20px 20px; }.tcf-operator-messages p { max-width: 82%; margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--tcf-line); background: var(--tcf-white); font-size: 14px; line-height: 1.45; }.tcf-operator-messages p.is-visitor { margin-left: auto; border-color: var(--tcf-ink); background: var(--tcf-ink); color: var(--tcf-white); }.tcf-operator-messages p.is-operator { border-color: var(--tcf-cyan); background: #eafaff; }.tcf-operator-messages span { display: block; margin-bottom: 4px; color: #638078; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.tcf-operator-messages .is-visitor span { color: var(--tcf-lime); }.tcf-operator-actions { padding: 18px; border-top: 1px solid var(--tcf-line); }.tcf-operator-actions form:first-child { display: flex; gap: 8px; margin-bottom: 13px; }.tcf-operator-actions form:first-child button:last-child { border-color: var(--tcf-line); background: var(--tcf-white); color: var(--tcf-ink); }.tcf-operator-actions form:last-child { display: grid; grid-template-columns: 1fr auto; gap: 10px; }.tcf-operator-actions textarea { min-height: 52px; }.tcf-operator-empty { display: grid; min-height: 100%; padding: 30px; color: var(--tcf-muted); place-content: center; text-align: center; }.tcf-operator-login { max-width: 760px; }.tcf-operator-login > p:not(.tcf-eyebrow) { max-width: 490px; color: var(--tcf-muted); font-size: 17px; }
@media (max-width: 760px) { .tcf-assistant, .tcf-operator, .tcf-operator-login { padding-top: 65px; padding-bottom: 80px; }.tcf-assistant { display: block; }.tcf-assistant h1, .tcf-operator h1, .tcf-operator-login h1 { font-size: 43px; }.tcf-assistant-chat { margin-top: 42px; }.tcf-assistant-messages { min-height: 340px; padding: 15px; }.tcf-assistant-bubble { max-width: 92%; }.tcf-assistant-suggestions { padding: 14px 14px 0; }.tcf-assistant-compose { padding: 14px; }.tcf-assistant-compose button { min-width: 76px; }.tcf-assistant-contact { margin: 0 14px 14px; }.tcf-assistant-contact > div { grid-template-columns: 1fr; gap: 0; }.tcf-operator-head { display: block; margin-bottom: 33px; }.tcf-operator-head .tcf-text-link { display: inline-block; margin-top: 18px; }.tcf-operator-layout { display: block; }.tcf-operator-list { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--tcf-line); }.tcf-operator-thread-head { display: block; }.tcf-operator-thread-head p { margin-top: 13px; text-align: left; }.tcf-operator-messages { padding: 14px; }.tcf-operator-messages p { max-width: 93%; }.tcf-operator-actions form:last-child { grid-template-columns: 1fr; } }