:root {
    --lc-header: #075e54;
    --lc-accent: #00a884;
    --lc-user: #d9fdd3;
    --lc-agent: #ffffff;
    --lc-bg: #efeae2;
    --lc-panel: #f0f2f5;
    --lc-ink: #111b21;
    --lc-muted: #667781;
    --lc-line: #d9dee1;
    --lc-blue: #53bdeb;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--lc-ink); background: var(--lc-bg); font-family: Arial, "Helvetica Neue", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lc-app {
    position: relative;
    width: 100vw;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    overflow: hidden;
    background: var(--lc-bg);
}

.lc-app::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        radial-gradient(circle at 18px 18px, rgba(7, 94, 84, .22) 0 1.5px, transparent 1.7px),
        radial-gradient(circle at 56px 48px, rgba(120, 108, 85, .18) 0 1.5px, transparent 1.7px);
    background-size: 76px 76px;
}

.lc-app > * { position: relative; z-index: 1; }

.lc-topbar {
    min-height: calc(64px + var(--safe-top));
    padding: calc(10px + var(--safe-top)) 16px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    background: var(--lc-header);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.lc-brand { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; }
.lc-avatar {
    width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 50%; color: var(--lc-header); background: #e6f4ef; font-weight: 800;
}
.lc-brand-copy { min-width: 0; }
.lc-brand-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-presence { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: rgba(255,255,255,.82); font-size: 12px; }
.lc-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 3px rgba(53,208,127,.18); }
.lc-presence.is-office-closed .lc-presence-dot {
    background: #aeb9c1;
    box-shadow: 0 0 0 3px rgba(174,185,193,.18);
}
.lc-presence.is-human-active .lc-presence-dot {
    animation: lc-presence-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(53,208,127,.42);
}
.lc-ticket { flex: 0 0 auto; color: rgba(255,255,255,.78); font-size: 12px; }
.lc-human-btn {
    min-height: 40px;
    padding: 0 16px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255,255,255,.08);
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.lc-human-btn:hover:not(:disabled) {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
}
.lc-human-btn:disabled {
    opacity: .9;
    cursor: default;
}
.lc-human-btn.is-requested {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}
.lc-human-btn:not(.is-requested) .lc-human-btn-dots {
    display: none;
}
.lc-human-btn.is-waiting-text {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    justify-content: flex-start;
    pointer-events: none;
}
.lc-human-btn.is-waiting-text:hover:not(:disabled) {
    background: transparent;
}
.lc-human-btn-label {
    flex: 0 0 auto;
    white-space: nowrap;
}
.lc-human-btn-dots {
    display: inline-block;
    min-width: 1.8em;
    margin-left: .05em;
    text-align: left;
    white-space: nowrap;
}
.lc-header-btn {
    width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
    border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.11); font-size: 24px;
}
.lc-header-btn:hover { background: rgba(255,255,255,.2); }

.lc-start {
    position: absolute;
    z-index: 8;
    inset: calc(64px + var(--safe-top)) 0 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: auto;
    background: rgba(239, 234, 226, .96);
    backdrop-filter: blur(5px);
}
.lc-start-card {
    width: min(760px, 100%);
    padding: clamp(20px, 4vw, 36px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 28px;
    align-items: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(17, 27, 33, .18);
}
.lc-kicker { margin: 0 0 9px; color: var(--lc-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lc-start-copy h1 { margin: 0 0 12px; color: var(--lc-header); font-size: clamp(26px, 4vw, 40px); line-height: 1.08; }
.lc-start-copy p:last-child { margin: 0; color: var(--lc-muted); line-height: 1.55; }
.lc-start-form { display: grid; gap: 12px; }
.lc-start-form label { display: grid; gap: 6px; color: var(--lc-muted); font-size: 13px; font-weight: 700; }
.lc-start-form strong { color: #c93535; }
.lc-start-form input, .lc-start-form select {
    width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--lc-line);
    border-radius: 8px; outline: 0; color: var(--lc-ink); background: #fff;
}
.lc-start-form input:focus, .lc-start-form select:focus { border-color: var(--lc-accent); box-shadow: 0 0 0 3px rgba(0,168,132,.12); }
.lc-start-form button { min-height: 48px; border: 0; border-radius: 8px; color: #fff; background: var(--lc-accent); font-weight: 800; }
.lc-start-form button:hover { background: #008f72; }

.lc-messages {
    min-height: 0;
    padding: 22px clamp(12px, 4vw, 80px);
    overflow: auto;
    scroll-behavior: smooth;
}
.lc-message { display: flex; margin: 4px 0; }
.lc-message-user { justify-content: flex-end; }
.lc-message-agent { justify-content: flex-start; }
.lc-bubble {
    position: relative;
    max-width: min(72%, 680px);
    padding: 7px 10px 5px;
    border-radius: 8px;
    background: var(--lc-agent);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    overflow-wrap: anywhere;
}
.lc-message-user .lc-bubble { background: var(--lc-user); border-top-right-radius: 2px; }
.lc-message-agent .lc-bubble { border-top-left-radius: 2px; }
.lc-bubble p { margin: 0; white-space: pre-wrap; line-height: 1.42; }
.lc-author { margin-bottom: 4px; color: #008069; font-size: 11px; font-weight: 800; }
.lc-cards { display: grid; gap: 8px; margin-top: 9px; }
.lc-card {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(17,27,33,.08);
    border-radius: 10px;
    color: var(--lc-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(17,27,33,.08);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lc-card:hover {
    border-color: rgba(0,128,105,.28);
    box-shadow: 0 2px 7px rgba(17,27,33,.13);
    text-decoration: none;
}
.lc-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #eef1f3;
}
.lc-card-preview {
    display: grid;
    gap: 5px;
    padding: 10px 11px 10px 13px;
    border-left: 4px solid #00a884;
    background: #f7f8fa;
}
.lc-card-tour .lc-card-preview { border-left-color: #128c7e; }
.lc-card-label {
    width: max-content;
    padding: 0;
    color: var(--lc-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.lc-card strong {
    color: #111b21;
    font-size: 13px;
    line-height: 1.35;
}
.lc-card-price {
    width: max-content;
    padding: 2px 0;
    color: var(--lc-header);
    font-size: 12px;
    font-weight: 800;
}
.lc-card-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--lc-muted);
    font-size: 12px;
    line-height: 1.38;
}
.lc-card-action {
    display: block;
    padding: 9px 11px;
    border-top: 1px solid rgba(17,27,33,.08);
    color: var(--lc-accent);
    background: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}
.lc-meta { margin-top: 3px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: rgba(17,27,33,.52); font-size: 10px; white-space: nowrap; }
.lc-ticks { color: #8696a0; font-weight: 800; }
.lc-read { color: var(--lc-blue); font-weight: 800; letter-spacing: -1px; }
.lc-image { display: block; max-width: min(420px, 64vw); max-height: 360px; margin-bottom: 5px; border-radius: 7px; object-fit: cover; cursor: zoom-in; }
.lc-file { display: block; min-width: min(280px, 62vw); margin-bottom: 4px; padding: 12px; border-radius: 7px; color: var(--lc-ink); background: rgba(255,255,255,.58); text-decoration: none; }
.lc-file:hover { text-decoration: underline; }
.lc-system-message { width: max-content; max-width: min(90%, 620px); margin: 12px auto; padding: 6px 11px; border-radius: 8px; color: var(--lc-muted); background: rgba(255,255,255,.84); box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 12px; text-align: center; }
.lc-close-prompt { display: grid; gap: 8px; }
.lc-close-prompt-actions { display: flex; justify-content: center; gap: 7px; }
.lc-close-prompt-actions button { padding: 5px 9px; border: 1px solid var(--lc-accent); border-radius: 14px; color: var(--lc-header); background: #fff; font-size: 11px; font-weight: 700; }
.lc-new-chat-btn { margin-top: 7px; padding: 6px 10px; border: 0; border-radius: 6px; color: #fff; background: var(--lc-accent); font-size: 12px; font-weight: 700; }

.lc-typing {
    display: none;
    width: max-content;
    margin: 0 16px 7px clamp(14px, 7vw, 120px);
    padding: 8px 11px;
    align-items: center;
    gap: 4px;
    border-radius: 14px;
    color: var(--lc-muted);
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    font-size: 11px;
}
.lc-typing.is-active { display: flex; }
.lc-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--lc-accent); animation: lc-dot 1.1s infinite ease-in-out; }
.lc-typing span:nth-child(2) { animation-delay: .12s; }
.lc-typing span:nth-child(3) { animation-delay: .24s; }
.lc-typing em { display: none; }
@keyframes lc-dot { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes lc-presence-pulse {
    0% { transform: scale(1); opacity: .95; box-shadow: 0 0 0 0 rgba(53,208,127,.42); }
    70% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 0 8px rgba(53,208,127,0); }
    100% { transform: scale(1); opacity: .95; box-shadow: 0 0 0 0 rgba(53,208,127,0); }
}

.lc-upload-preview { padding: 8px 14px; display: flex; gap: 8px; overflow-x: auto; color: var(--lc-muted); background: var(--lc-panel); border-top: 1px solid var(--lc-line); }
.lc-preview-item { position: relative; width: 92px; min-width: 92px; padding: 6px; display: grid; place-items: center; gap: 4px; border-radius: 7px; background: #fff; }
.lc-preview-item img { width: 80px; height: 56px; border-radius: 5px; object-fit: cover; }
.lc-preview-item span { height: 56px; display: grid; place-items: center; font-size: 28px; }
.lc-preview-item small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.lc-preview-file-icon svg { width: 34px; height: 34px; fill: #53bdeb; }
.lc-preview-remove { position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 2px solid var(--lc-panel); border-radius: 50%; color: #fff; background: #54656f; font-size: 17px; line-height: 1; }
.lc-composer {
    min-height: calc(64px + var(--safe-bottom));
    padding: 10px 14px calc(10px + var(--safe-bottom));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 9px;
    align-items: end;
    background: var(--lc-panel);
    border-top: 1px solid rgba(17,27,33,.08);
}
.lc-attach-wrap { position: relative; width: 44px; height: 44px; }
.lc-attach-menu {
    position: absolute; z-index: 30; left: 0; bottom: 54px; width: 210px; padding: 7px;
    border: 1px solid rgba(17,27,33,.08); border-radius: 11px; background: #fff;
    box-shadow: 0 8px 28px rgba(11,20,24,.2); transform-origin: bottom left;
}
.lc-attach-option { width: 100%; min-height: 50px; padding: 6px 9px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; color: var(--lc-ink); background: transparent; text-align: start; font-weight: 600; }
.lc-attach-option:hover { background: #f0f2f5; }
.lc-attach-option-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.lc-attach-option-icon svg { width: 20px; height: 20px; fill: currentColor; }
.lc-photo-icon { background: #bf59cf; }
.lc-document-icon { background: #5f66cd; }
.lc-tool-btn, .lc-send-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; font-size: 22px; }
.lc-tool-btn svg, .lc-send-btn svg { width: 24px; height: 24px; fill: currentColor; }
.lc-tool-btn { color: #54656f; background: transparent; }
.lc-tool-btn:hover { background: #e2e6e8; }
.lc-send-btn { color: #fff; background: var(--lc-accent); }
.lc-send-btn:hover { background: #008f72; }
.lc-tool-btn:disabled, .lc-send-btn:disabled { opacity: .45; cursor: default; }
.lc-input-wrap textarea {
    width: 100%; min-height: 44px; max-height: 120px; padding: 11px 14px; resize: none;
    border: 0; border-radius: 9px; outline: 0; color: var(--lc-ink); background: #fff; line-height: 1.4;
}

.lc-modal, .lc-lightbox {
    position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px;
    background: rgba(11,20,24,.68); backdrop-filter: blur(3px);
}
.lc-modal-card { width: min(420px, 100%); padding: 22px; border-radius: 12px; background: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.28); }
.lc-modal-card h2 { margin: 0 0 16px; font-size: 20px; }
.lc-end-email-wrap { margin-bottom: 14px; }
.lc-end-email-label { display: block; margin-bottom: 7px; color: var(--lc-ink); font-size: 13px; font-weight: 700; }
.lc-end-email-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--lc-line);
    border-radius: 10px;
    background: #fff;
    color: var(--lc-ink);
    font: inherit;
}
.lc-end-email-input:focus {
    outline: none;
    border-color: var(--lc-accent);
    box-shadow: 0 0 0 3px rgba(9, 166, 137, .12);
}
.lc-end-email-hint { margin: 8px 0 0; color: var(--lc-muted); font-size: 12px; line-height: 1.45; }
.lc-email-option { display: flex; align-items: flex-start; gap: 9px; color: var(--lc-muted); line-height: 1.4; }
.lc-email-option input { margin-top: 3px; accent-color: var(--lc-accent); }
.lc-modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }
.lc-secondary-btn, .lc-danger-btn { min-height: 40px; padding: 0 15px; border-radius: 7px; font-weight: 700; }
.lc-secondary-btn { border: 1px solid var(--lc-line); background: #fff; color: var(--lc-ink); }
.lc-danger-btn { border: 0; background: #d73535; color: #fff; }

.lc-lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 12px 50px rgba(0,0,0,.35); }
.lc-lightbox button { position: fixed; top: calc(12px + var(--safe-top)); right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.36); font-size: 30px; }
.lc-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(82px + var(--safe-bottom)); transform: translateX(-50%); max-width: min(90vw, 520px); padding: 10px 14px; border-radius: 8px; color: #fff; background: #202c33; box-shadow: 0 5px 24px rgba(0,0,0,.24); text-align: center; font-size: 13px; }

.lc-card-history-email {
    border-color: rgba(0, 128, 105, .16);
    background: #fff;
}
.lc-card-history-email .lc-card-preview {
    border-left-color: var(--lc-accent);
    background:
        radial-gradient(circle at top right, rgba(0, 168, 132, .10), transparent 42%),
        linear-gradient(180deg, #fbfdfc 0%, #f6faf8 100%);
}
.lc-card-confirm-actions {
    display: flex;
    gap: 0;
    margin: 10px;
    overflow: hidden;
    border-top: 1px solid rgba(17,27,33,.08);
    border: 1px solid rgba(0, 128, 105, .18);
    border-radius: 12px;
    background: #f7fbf9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.lc-card-confirm-btn {
    flex: 1 1 0;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2f3f46;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.lc-card-confirm-btn + .lc-card-confirm-btn {
    border-left: 1px solid rgba(0, 128, 105, .14);
}
.lc-card-confirm-btn:hover:not(:disabled) {
    background: rgba(0, 168, 132, .10);
    color: #006b57;
}
.lc-card-confirm-yes.is-selected,
.lc-card-history-sent .lc-card-confirm-yes {
    background: linear-gradient(135deg, #00a884 0%, #008f72 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 168, 132, .22);
}
.lc-card-confirm-no.is-selected,
.lc-card-history-cancelled .lc-card-confirm-no {
    background: linear-gradient(135deg, #eef1f3 0%, #dfe5e8 100%);
    color: #2f3f46;
    box-shadow: inset 0 0 0 1px rgba(17,27,33,.08);
}
.lc-card-confirm-btn:disabled {
    cursor: default;
    opacity: 1;
}
.lc-card-confirm-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 10px;
    padding: 0 14px;
    border-top: 1px solid rgba(17,27,33,.08);
    border: 1px solid rgba(0, 128, 105, .14);
    border-radius: 12px;
    color: #557069;
    background: linear-gradient(180deg, #fbfdfc 0%, #f4faf7 100%);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

html[dir="rtl"] .lc-message-user { justify-content: flex-start; }
html[dir="rtl"] .lc-message-agent { justify-content: flex-end; }
html[dir="rtl"] .lc-attach-menu { right: 0; left: auto; transform-origin: bottom right; }
html[dir="rtl"] .lc-preview-remove { right: auto; left: -5px; }

@media (max-width: 760px) {
    .lc-topbar { padding-inline: 11px; }
    .lc-avatar { width: 38px; height: 38px; font-size: 13px; }
    .lc-brand-name { font-size: 15px; }
    .lc-ticket { display: none; }
    .lc-human-btn {
        min-height: 38px;
        padding-inline: 16px;
        max-width: 148px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
    .lc-start { padding: 0; place-items: stretch; }
    .lc-start-card { min-height: 100%; padding: 24px 18px calc(24px + var(--safe-bottom)); grid-template-columns: 1fr; align-content: center; border-radius: 0; box-shadow: none; }
    .lc-messages { padding: 14px 10px; }
    .lc-bubble { max-width: 88%; }
    .lc-image { max-width: 76vw; max-height: 300px; }
    .lc-typing { margin-inline-start: 10px; }
    .lc-composer { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 7px; padding-inline: 8px; }
    .lc-attach-wrap, .lc-tool-btn, .lc-send-btn { width: 40px; height: 40px; }
    .lc-attach-menu { bottom: 50px; }
}

@media (max-width: 390px) {
    .lc-presence { font-size: 11px; }
    .lc-start-copy h1 { font-size: 27px; }
    .lc-bubble { max-width: 93%; }
    .lc-file { min-width: 68vw; }
}

@media (min-width: 1400px) {
    .lc-messages { padding-inline: max(10vw, 160px); }
    .lc-typing { margin-inline-start: max(10vw, 160px); }
}