:root {
    --tl-ai-red: #ed111b;
    --tl-ai-red-dark: #ce0008;
    --tl-ai-navy: #102f55;
    --tl-ai-ink: #17253a;
    --tl-ai-muted: #718096;
    --tl-ai-line: #dce3eb;
    --tl-ai-soft: #f5f7fa;
    --tl-ai-soft-2: #eef3f7;
    --tl-ai-white: #fff;
    --tl-ai-shadow: 0 20px 58px rgba(10, 34, 62, .22), 0 6px 18px rgba(10, 34, 62, .08);
}

.tl-ai-assistant,
.tl-ai-assistant * { box-sizing: border-box; }

.tl-ai-assistant .screen-reader-text {
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Launcher */
.tl-ai-launcher {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 99990;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 5px 14px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--tl-ai-navy);
    box-shadow: 0 11px 30px rgba(10,34,62,.18), 0 0 0 1px rgba(16,47,85,.06);
    cursor: pointer;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
    transition: transform .16s ease, box-shadow .16s ease;
}
.tl-ai-launcher:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(10,34,62,.22), 0 0 0 1px rgba(237,17,27,.12); }
.tl-ai-launcher-icon { display:grid; width:40px; height:40px; place-items:center; flex:0 0 auto; overflow:hidden; border-radius:50%; background:#fff3f3; }
.tl-ai-launcher-icon img { display:block; width:35px; height:auto; }
.tl-ai-launcher-copy { display:grid; gap:1px; line-height:1.08; }
.tl-ai-launcher-copy strong { font-size:12.5px; font-weight:850; color:var(--tl-ai-navy); }
.tl-ai-launcher-copy span { font-size:9.5px; font-weight:650; color:#6d7b8d; }

.tl-ai-launcher:focus-visible,
.tl-ai-icon-button:focus-visible,
.tl-ai-send:focus-visible,
.tl-ai-quick-actions button:focus-visible,
.tl-ai-form textarea:focus-visible,
.tl-ai-handoff button:focus-visible {
    outline: 3px solid rgba(237,17,27,.18);
    outline-offset: 2px;
}

/* Panel */
.tl-ai-panel {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 99991;
    display: flex;
    flex-direction: column;
    width: min(438px, calc(100vw - 32px));
    max-height: min(680px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid rgba(16,47,85,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--tl-ai-shadow);
    color: var(--tl-ai-ink);
    font: 400 14px/1.42 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation: tl-ai-panel-in .18s cubic-bezier(.2,.75,.25,1);
}
.tl-ai-panel[hidden] { display:none; }
@keyframes tl-ai-panel-in { from {opacity:0; transform:translateY(8px) scale(.994)} to {opacity:1; transform:none} }

/* Header */
.tl-ai-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:72px;
    padding:12px 14px 11px 16px;
    border-bottom:1px solid #edf0f4;
    background:#fff;
    cursor:move;
}
.tl-ai-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.tl-ai-brand-logo { display:block; width:130px; max-width:38vw; height:auto; flex:0 0 auto; }
.tl-ai-brand-copy { min-width:0; padding-left:10px; border-left:1px solid #e7ebef; }
.tl-ai-brand-copy h2 { margin:0 0 3px; color:var(--tl-ai-navy); font-size:14px; line-height:1.1; font-weight:850; letter-spacing:-.01em; }
.tl-ai-online { display:inline-flex; align-items:center; gap:5px; color:#667488; font-size:10px; font-weight:650; }
.tl-ai-online i { display:block; width:7px; height:7px; border-radius:50%; background:#28a65a; box-shadow:0 0 0 3px rgba(40,166,90,.10); }
.tl-ai-header-actions { display:flex; gap:6px; flex:0 0 auto; }
.tl-ai-icon-button {
    display:grid; place-items:center; width:34px; height:34px; padding:0;
    border:1px solid #e2e7ed; border-radius:10px; background:#fff; color:#3a4b61;
    cursor:pointer; box-shadow:0 2px 7px rgba(10,34,62,.035);
    transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.tl-ai-icon-button:hover { color:var(--tl-ai-red); border-color:rgba(237,17,27,.24); background:#fff8f8; }
.tl-ai-close { font:300 22px/1 system-ui,sans-serif; padding-bottom:2px; }
.tl-ai-reset { font:750 18px/1 system-ui,sans-serif; }
.tl-ai-reset[hidden] { display:none; }

/* Thin branded visual strip */
.tl-ai-context-strip {
    position:relative;
    height:58px;
    flex:0 0 58px;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:flex-end;
    padding:0 16px 10px;
}
.tl-ai-context-photo { position:absolute; inset:0; z-index:-3; background:url('roof-hero-k37.webp') center 42%/cover no-repeat; filter:saturate(.93) contrast(1.03); }
.tl-ai-context-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(10,37,67,.86) 0%,rgba(10,37,67,.58) 48%,rgba(10,37,67,.18) 100%); }
.tl-ai-context-strip span { color:#fff; font-size:10.5px; font-weight:730; letter-spacing:.01em; text-shadow:0 1px 4px rgba(0,0,0,.28); }

/* Progress - only when conversation starts */
.tl-ai-progress {
    display:none;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    padding:9px 16px 8px;
    border-bottom:1px solid #edf0f4;
    background:#fff;
}
.tl-ai-assistant.has-conversation .tl-ai-progress { display:grid; }
.tl-ai-progress span { position:relative; display:grid; justify-items:center; gap:4px; color:#98a3b1; font-size:9px; line-height:1; font-weight:700; text-align:center; }
.tl-ai-progress span::after { content:""; position:absolute; top:5px; left:calc(50% + 7px); right:calc(-50% + 7px); height:2px; background:#e6eaf0; }
.tl-ai-progress span:last-child::after { display:none; }
.tl-ai-progress i { position:relative; z-index:1; width:11px; height:11px; border-radius:50%; background:#d9e0e8; box-shadow:0 0 0 3px #fff; }
.tl-ai-progress span.is-done { color:#647184; }
.tl-ai-progress span.is-done i { background:var(--tl-ai-navy); }
.tl-ai-progress span.is-done::after { background:var(--tl-ai-navy); }
.tl-ai-progress span.is-active { color:var(--tl-ai-red); }
.tl-ai-progress span.is-active i { background:var(--tl-ai-red); box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(237,17,27,.12); }

/* Conversation */
.tl-ai-messages {
    flex:0 1 auto;
    min-height:92px;
    max-height:300px;
    padding:14px 14px 6px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#c8d1dc transparent;
    background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);
}
.tl-ai-assistant.has-conversation .tl-ai-messages { min-height:150px; max-height:370px; }
.tl-ai-messages::-webkit-scrollbar { width:5px; }
.tl-ai-messages::-webkit-scrollbar-thumb { border-radius:999px; background:#c8d1dc; }
.tl-ai-messages::-webkit-scrollbar-track { background:transparent; }
.tl-ai-message { width:fit-content; max-width:92%; margin:0 0 9px; padding:11px 13px; border-radius:15px; overflow-wrap:anywhere; white-space:pre-line; }
.tl-ai-message-assistant { border:1px solid #dfe5ec; border-bottom-left-radius:6px; background:#fff; color:#1b2e48; box-shadow:0 3px 10px rgba(10,34,62,.035); font-size:13.2px; line-height:1.42; }
.tl-ai-message-customer { margin-left:auto; border-bottom-right-radius:6px; background:var(--tl-ai-navy); color:#fff; box-shadow:0 5px 14px rgba(16,47,85,.12); }
.tl-ai-message-system { max-width:100%; margin:1px auto 7px; padding:2px 5px; color:#7f8b9b; background:transparent; box-shadow:none; font-size:10px; text-align:center; }
.tl-ai-welcome { max-width:100%; padding:12px 13px; }
.tl-ai-welcome strong { display:block; margin-bottom:3px; color:#152c4c; font-size:14px; font-weight:850; }
.tl-ai-welcome span { display:block; color:#6e7b8d; font-size:11.5px; line-height:1.4; }

/* Quick choices */
.tl-ai-quick-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    flex:0 0 auto;
    padding:7px 14px 12px;
    background:#fff;
}
.tl-ai-quick-actions button {
    display:flex; align-items:center; gap:8px;
    min-height:44px; padding:7px 9px;
    border:1px solid #dce3eb; border-radius:12px;
    background:#fff; color:#183452;
    box-shadow:0 2px 8px rgba(10,34,62,.035);
    cursor:pointer; font:780 11.5px/1.18 system-ui,sans-serif; text-align:left;
    transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.tl-ai-quick-actions button:hover { transform:translateY(-1px); border-color:rgba(237,17,27,.25); background:#fffafa; }
.tl-ai-quick-icon { display:grid; width:28px; height:28px; place-items:center; flex:0 0 auto; border-radius:9px; background:#fff1f2; color:var(--tl-ai-red); }
.tl-ai-quick-icon svg,.tl-ai-send-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tl-ai-assistant.has-conversation .tl-ai-quick-actions { display:none; }

/* Handoff cards */
.tl-ai-handoff { max-width:100%; width:100%; padding:13px 13px 12px; border:1px solid #dbe2ea; border-left:3px solid var(--tl-ai-red); border-radius:14px; background:#fff; box-shadow:0 4px 12px rgba(10,34,62,.04); }
.tl-ai-handoff-title { margin:0 0 5px; color:#142f51; font-size:12px; line-height:1.25; font-weight:850; }
.tl-ai-handoff p { margin:0 0 10px; color:#344a64; font-size:12.2px; line-height:1.45; white-space:pre-line; }
.tl-ai-handoff label { display:flex; align-items:flex-start; gap:7px; margin:8px 0 10px; color:#354a63; font-size:11.5px; line-height:1.4; }
.tl-ai-handoff input[type="checkbox"] { margin-top:2px; accent-color:var(--tl-ai-red); }
.tl-ai-handoff .tl-ai-send { min-height:38px; padding:8px 12px; border-radius:11px; font-size:11.5px; }
.tl-ai-recap { display:grid; gap:0; margin:8px 0 11px; border:1px solid #e3e8ee; border-radius:11px; overflow:hidden; }
.tl-ai-recap div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; padding:7px 9px; border-bottom:1px solid #edf0f3; background:#fff; }
.tl-ai-recap div:last-child { border-bottom:0; }
.tl-ai-recap dt { color:#7a8797; font-size:10px; font-weight:700; }
.tl-ai-recap dd { margin:0; color:#1c334f; font-size:11px; font-weight:650; overflow-wrap:anywhere; }
.tl-ai-submitted-card { border-left-color:#28a65a; }

.tl-ai-error,.tl-ai-status { padding:0 14px; margin:0; background:#fff; font-size:10px; }
.tl-ai-error { padding-top:5px; color:#a40008; font-weight:750; }
.tl-ai-status:not(:empty) { padding-top:4px; color:#718096; }

/* Composer */
.tl-ai-form {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    flex:0 0 auto;
    padding:9px 12px 7px;
    border-top:1px solid #e7ebf0;
    background:#fff;
}
.tl-ai-input-shell { display:flex; min-width:0; align-items:center; border:1px solid #cbd5df; border-radius:14px; background:#fff; transition:border-color .14s ease,box-shadow .14s ease; }
.tl-ai-input-shell:focus-within { border-color:rgba(237,17,27,.42); box-shadow:0 0 0 3px rgba(237,17,27,.055); }
.tl-ai-form textarea { width:100%; min-height:46px; max-height:116px; resize:none; overflow-y:auto; padding:13px 13px 10px; border:0; outline:0; color:#172e51; background:transparent; font:400 13px/1.35 system-ui,sans-serif; }
.tl-ai-form textarea::placeholder { color:#8a98aa; opacity:1; }
.tl-ai-send { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:91px; min-height:46px; padding:9px 12px; border:0; border-radius:14px; background:var(--tl-ai-red); color:#fff; box-shadow:0 5px 14px rgba(206,0,8,.18); cursor:pointer; font:820 11.5px/1.1 system-ui,sans-serif; transition:background .14s ease,transform .14s ease; }
.tl-ai-send:hover { background:var(--tl-ai-red-dark); transform:translateY(-1px); }
.tl-ai-send-icon { display:grid; place-items:center; }
.tl-ai-send:disabled,.tl-ai-form textarea:disabled,.tl-ai-quick-actions button:disabled { cursor:wait; opacity:.58; }
.tl-ai-footnote { flex:0 0 auto; margin:0; padding:2px 12px 9px; color:#8591a0; background:#fff; font-size:9px; text-align:center; }
.tl-ai-fallback { padding:11px 13px; border-left:3px solid var(--tl-ai-red); background:#fff2f2; color:#111827; }

/* Submitted state */
.tl-ai-assistant.is-submitted .tl-ai-form { opacity:.5; pointer-events:none; }

/* Laptop */
@media (max-width:1366px), (max-height:760px) {
    .tl-ai-panel { width:min(418px,calc(100vw - 26px)); max-height:calc(100dvh - 26px); right:max(13px,env(safe-area-inset-right)); bottom:max(13px,env(safe-area-inset-bottom)); }
    .tl-ai-header { min-height:66px; padding:10px 12px 9px 14px; }
    .tl-ai-brand-logo { width:122px; }
    .tl-ai-context-strip { height:50px; flex-basis:50px; padding:0 14px 8px; }
    .tl-ai-messages { max-height:250px; }
    .tl-ai-assistant.has-conversation .tl-ai-messages { max-height:320px; }
}

/* Phone */
@media (max-width:520px) {
    .tl-ai-launcher { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); }
    .tl-ai-panel { right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); width:calc(100vw - 16px); max-height:calc(100dvh - 16px - env(safe-area-inset-top)); border-radius:18px; }
    .tl-ai-header { min-height:64px; padding:9px 10px 8px 12px; cursor:default; }
    .tl-ai-brand { gap:8px; }
    .tl-ai-brand-logo { width:112px; max-width:40vw; }
    .tl-ai-brand-copy { padding-left:8px; }
    .tl-ai-brand-copy h2 { font-size:13px; }
    .tl-ai-icon-button { width:32px; height:32px; border-radius:9px; }
    .tl-ai-context-strip { height:46px; flex-basis:46px; padding:0 12px 7px; }
    .tl-ai-context-strip span { font-size:9.5px; }
    .tl-ai-progress { padding:8px 10px 7px; }
    .tl-ai-progress span { font-size:8.5px; }
    .tl-ai-messages { min-height:86px; max-height:250px; padding:11px 10px 5px; }
    .tl-ai-assistant.has-conversation .tl-ai-messages { min-height:130px; max-height:330px; }
    .tl-ai-message { max-width:96%; font-size:12.8px; }
    .tl-ai-quick-actions { gap:6px; padding:6px 10px 9px; }
    .tl-ai-quick-actions button { min-height:43px; padding:6px 8px; font-size:10.8px; }
    .tl-ai-quick-icon { width:27px; height:27px; }
    .tl-ai-form { padding:8px 9px 5px; }
    .tl-ai-form textarea { min-height:44px; padding:12px 11px 9px; font-size:12.5px; }
    .tl-ai-send { min-width:48px; min-height:44px; padding:8px 12px; border-radius:13px; }
    .tl-ai-send-label { display:none; }
    .tl-ai-send-icon svg { width:19px; height:19px; }
    .tl-ai-footnote { padding:2px 10px calc(7px + env(safe-area-inset-bottom)); font-size:8.7px; }
    .tl-ai-recap div { grid-template-columns:92px minmax(0,1fr); }
}

@media (max-width:360px) {
    .tl-ai-launcher { width:50px; padding:5px; }
    .tl-ai-launcher-copy { display:none; }
    .tl-ai-brand-copy { display:none; }
    .tl-ai-brand-logo { width:126px; max-width:55vw; }
    .tl-ai-context-strip span { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
    .tl-ai-panel,.tl-ai-launcher,.tl-ai-quick-actions button,.tl-ai-send { animation:none!important; transition:none!important; }
}