/* Website chat: the floating "Chat with us" button (bottom right) and its panel (assets/js/livechat.js). */
#tfChat { --lc-green: #0b6e4f; --lc-green-dark: #084c37; --lc-ink: #1f2b26; --lc-muted: #6c7a74; --lc-line: #e3ebe7;
          position: fixed; right: 20px; bottom: 20px; z-index: 1080; font-size: .9rem; color: var(--lc-ink); }

.lc-fab { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem .8rem 1.05rem; border: 0;
          border-radius: 999px; background: linear-gradient(135deg, var(--lc-green), var(--lc-green-dark)); color: #fff; font-weight: 600;
          font-size: .95rem; box-shadow: 0 10px 28px rgba(8, 76, 55, .35); cursor: pointer;
          transition: transform .18s ease, box-shadow .18s ease; }
.lc-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(8, 76, 55, .42); }
.lc-fab:focus-visible { outline: 3px solid #f0a500; outline-offset: 3px; }
.lc-fab-ic { font-size: 1.25rem; line-height: 1; }
.lc-badge { position: absolute; top: -4px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #dc3545;
            color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.lc-has-unread { animation: lc-nudge 2.4s ease-in-out infinite; }
@keyframes lc-nudge { 0%, 85%, 100% { transform: none; } 90% { transform: translateY(-4px); } 95% { transform: translateY(0); } }

.lc-panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: 370px; height: min(560px, calc(100vh - 120px));
            display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lc-line); border-radius: 18px; overflow: hidden;
            box-shadow: 0 24px 60px rgba(8, 40, 30, .25); opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right;
            transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1); }
.lc-open .lc-panel { opacity: 1; transform: none; }

.lc-head { display: flex; align-items: center; gap: .65rem; padding: .85rem .9rem; color: #fff;
           background: linear-gradient(135deg, var(--lc-green), var(--lc-green-dark)); }
.lc-head-ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.lc-head-txt { flex: 1; min-width: 0; }
.lc-title { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.lc-sub { font-size: .76rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sub::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #7ee2b8; vertical-align: 1px; }
.lc-is-waiting .lc-sub::before { background: #f0a500; }
.lc-hbtn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center;
           font-size: 1rem; transition: background-color .15s ease; }
.lc-hbtn:hover { background: rgba(255, 255, 255, .15); }

.lc-body { flex: 1; overflow-y: auto; padding: 1rem .9rem .5rem; background: #f6f9f7; scrollbar-width: thin; overscroll-behavior: contain; }
.lc-msg { display: flex; flex-direction: column; max-width: 85%; margin-bottom: .7rem; }
.lc-who { font-size: .7rem; font-weight: 600; color: var(--lc-muted); margin: 0 0 .2rem .35rem; }
.lc-bubble { padding: .55rem .8rem; border-radius: 14px; line-height: 1.45; word-wrap: break-word; }
.lc-bubble a { color: inherit; text-decoration: underline; }
.lc-time { font-size: .66rem; color: #98a59f; margin: .15rem .4rem 0; }
.lc-bot .lc-bubble, .lc-staff .lc-bubble { background: #fff; border: 1px solid var(--lc-line); border-top-left-radius: 4px; }
.lc-staff .lc-bubble { border-color: #cfe6dc; background: #eef7f2; }
.lc-staff .lc-who { color: var(--lc-green); }
.lc-visitor { margin-left: auto; align-items: flex-end; }
.lc-visitor .lc-bubble { background: var(--lc-green); color: #fff; border-top-right-radius: 4px; }
.lc-pending .lc-bubble { opacity: .7; }
.lc-failed .lc-bubble { background: #b02a37; }
.lc-sys { text-align: center; font-size: .75rem; color: var(--lc-muted); margin: .4rem 1rem .8rem; line-height: 1.4; }
.lc-sys.err { color: #b02a37; }

.lc-chips, .lc-links { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 .8rem; }
.lc-chips button { border: 1px solid #bfdccf; background: #fff; color: var(--lc-green); border-radius: 999px; padding: .32rem .75rem;
                   font-size: .8rem; font-weight: 500; transition: background-color .15s ease, color .15s ease; }
.lc-chips button:hover { background: var(--lc-green); color: #fff; border-color: var(--lc-green); }
.lc-links a { display: inline-flex; align-items: center; padding: .35rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--lc-line);
              color: var(--lc-green); font-size: .8rem; font-weight: 600; text-decoration: none; }
.lc-links a:hover { border-color: var(--lc-green); }

.lc-form { background: #fff; border: 1px solid var(--lc-line); border-radius: 14px; padding: .75rem; margin: -.2rem 0 .8rem; display: grid; gap: .5rem; }
.lc-form label { display: block; font-size: .76rem; font-weight: 600; color: #44524c; }
.lc-form label span { font-weight: 400; color: var(--lc-muted); }
.lc-form input, .lc-form textarea { display: block; margin-top: .2rem; border: 1px solid #d5ded9; border-radius: 9px; padding: .45rem .6rem; font-size: .88rem; font-weight: 400; width: 100%; }
.lc-form input:focus, .lc-form textarea:focus { outline: none; border-color: var(--lc-green); box-shadow: 0 0 0 3px rgba(11, 110, 79, .12); }
.lc-form button { border: 0; border-radius: 10px; padding: .55rem; background: var(--lc-green); color: #fff; font-weight: 600; }
.lc-form button:disabled { opacity: .6; }
.lc-depts { border: 0; margin: 0 0 .1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.lc-depts legend { font-size: .76rem; font-weight: 600; color: #44524c; margin-bottom: .3rem; float: none; width: 100%; padding: 0; }
.lc-dept { display: inline-flex !important; margin: 0; cursor: pointer; }
.lc-dept input { position: absolute; opacity: 0; pointer-events: none; }
.lc-dept span { border: 1px solid #bfdccf; border-radius: 999px; padding: .32rem .75rem; font-size: .8rem; font-weight: 500; color: var(--lc-green); background: #fff; transition: background-color .15s, color .15s; }
.lc-dept:hover span { border-color: var(--lc-green); }
.lc-dept input:checked + span { background: var(--lc-green); color: #fff; border-color: var(--lc-green); }
.lc-dept input:focus-visible + span { outline: 2px solid var(--lc-green); outline-offset: 2px; }
.lc-form-err { color: #b02a37; font-size: .78rem; }
.lc-form-note { font-size: .7rem; color: var(--lc-muted); }
.lc-again { display: block; margin: .3rem auto 1rem; border: 1px solid var(--lc-green); background: #fff; color: var(--lc-green); border-radius: 999px;
            padding: .4rem 1rem; font-weight: 600; font-size: .82rem; }

.lc-typing { display: inline-flex; gap: 4px; padding: .65rem .8rem; margin-bottom: .7rem; background: #fff; border: 1px solid var(--lc-line); border-radius: 14px; border-top-left-radius: 4px; }
.lc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9fb3aa; animation: lc-dot 1.2s infinite ease-in-out; }
.lc-typing span:nth-child(2) { animation-delay: .15s; } .lc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lc-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.lc-input { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem .7rem; border-top: 1px solid var(--lc-line); background: #fff; }
.lc-input[hidden] { display: none; }
.lc-input textarea { flex: 1; resize: none; border: 1px solid #d5ded9; border-radius: 12px; padding: .5rem .7rem; font-size: .9rem; line-height: 1.4; max-height: 110px; }
.lc-input textarea:focus { outline: none; border-color: var(--lc-green); box-shadow: 0 0 0 3px rgba(11, 110, 79, .12); }
.lc-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--lc-green); color: #fff; display: grid; place-items: center; }
.lc-send:hover { background: var(--lc-green-dark); }

/* Phones: a smaller button; the panel fills the screen. */
@media (max-width: 576px) {
    #tfChat { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
    .lc-fab { padding: .75rem 1.05rem .75rem .9rem; font-size: .9rem; }
    .lc-open .lc-fab { display: none; }
    .lc-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; transform: translateY(24px); }
    .lc-head { padding-top: calc(.85rem + env(safe-area-inset-top)); }
    .lc-input { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
    .lc-input textarea, .lc-form input, .lc-form textarea { font-size: 16px; }
}
@media print { #tfChat { display: none; } }
@media (prefers-reduced-motion: reduce) { .lc-panel, .lc-fab { transition: none; } .lc-has-unread, .lc-typing span { animation: none; } }