/* ======================================================
LINKWORLD EXPRESS
LINKWORLD CARE - FLOATING SUPPORT WIDGET
Reuses the site's own design tokens (css/style.css) -
navy/orange/paper palette, stencil + IBM Plex type,
sharp corners, dashed-line "waybill" details - so this
reads as part of LinkWorld Express, not a bolted-on
generic chat widget.
====================================================== */

.lw-care-widget,
.lw-care-widget *{
    box-sizing:border-box;
}

.lw-care-widget{
    font-family:var(--body, 'IBM Plex Sans', sans-serif);
}

.lw-care-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;
}


/* ======================================================
LAUNCHER BUTTON
====================================================== */

.lw-care-fab{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:99998;
    width:60px;
    height:60px;
    border-radius:50%;
    border:none;
    background:var(--navy, #0D1A2B);
    color:var(--orange, #FF5A1F);
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 14px 32px rgba(0,0,0,.28);
    transition:background .2s ease, transform .2s ease;
}

.lw-care-fab:hover{
    background:var(--orange, #FF5A1F);
    color:var(--navy, #0D1A2B);
    transform:translateY(-3px);
}

.lw-care-fab:focus-visible{
    outline:2px solid var(--orange, #FF5A1F);
    outline-offset:3px;
}

.lw-care-fab i{ pointer-events:none; }


/* ======================================================
GREETING BUBBLE
====================================================== */

.lw-care-greeting{
    position:fixed;
    right:24px;
    bottom:96px;
    z-index:99997;
    max-width:260px;
    background:var(--white, #fff);
    border:1px solid var(--line, #CDD1C3);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    padding:16px 34px 16px 18px;
    animation:lwCareGreetingIn .35s ease;
}

.lw-care-greeting p{
    font-size:13.5px;
    line-height:1.5;
    color:var(--ink, #10161F);
    font-weight:500;
}

.lw-care-greeting-close{
    position:absolute;
    top:8px; right:8px;
    width:22px; height:22px;
    border:none;
    background:transparent;
    color:var(--muted, #57626C);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
}

.lw-care-greeting-close:hover{ color:var(--orange-dk, #C8410C); }

@keyframes lwCareGreetingIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}


/* ======================================================
CHAT PANEL
====================================================== */

.lw-care-panel{
    position:fixed;
    right:24px;
    bottom:98px;
    z-index:99997;
    width:380px;
    max-width:calc(100vw - 32px);
    height:600px;
    max-height:calc(100dvh - 130px);
    background:var(--paper, #F2F3EC);
    border:1px solid var(--line, #CDD1C3);
    box-shadow:0 30px 70px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:lwCarePanelIn .25s ease;
}

/* the [hidden] attribute loses to the class selector above
   (same specificity, later in the cascade) unless restated here */
.lw-care-panel[hidden]{
    display:none;
}

@keyframes lwCarePanelIn{
    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}


/* ---------- Header ---------- */

.lw-care-header{
    background:var(--navy, #0D1A2B);
    color:#fff;
    padding:16px 16px 16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}

.lw-care-header::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:36px 36px;
    pointer-events:none;
}

.lw-care-header-brand{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    z-index:1;
    min-width:0;
}

.lw-care-logo{
    width:38px;
    height:38px;
    flex-shrink:0;
    background:var(--orange, #FF5A1F);
    color:var(--navy, #0D1A2B);
    font-family:var(--display, 'Big Shoulders Stencil Text', sans-serif);
    font-size:17px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lw-care-header-text{ min-width:0; }

.lw-care-header-text h2{
    font-family:var(--display, 'Big Shoulders Stencil Text', sans-serif);
    font-size:19px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1.1;
    color:#fff;
}

.lw-care-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono, 'IBM Plex Mono', monospace);
    font-size:10.5px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.lw-care-live-dot{
    position:relative;
    width:7px; height:7px;
    border-radius:50%;
    background:#34D399;
    flex-shrink:0;
}

.lw-care-live-dot::after{
    content:"";
    position:absolute; inset:-3px;
    border-radius:50%;
    border:1px solid #34D399;
    animation:lwCareLiveDotPulse 1.8s ease-out infinite;
}

@keyframes lwCareLiveDotPulse{
    0%{ transform:scale(.6); opacity:.9; }
    100%{ transform:scale(2); opacity:0; }
}

.lw-care-header-actions{
    display:flex;
    gap:4px;
    position:relative;
    z-index:1;
    flex-shrink:0;
}

.lw-care-header-actions button{
    width:30px; height:30px;
    border:none;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    transition:background .15s ease;
}

.lw-care-header-actions button:hover{ background:var(--orange, #FF5A1F); }

.lw-care-header-actions button:focus-visible{
    outline:2px solid var(--orange, #FF5A1F);
    outline-offset:2px;
}


/* ---------- Messages ---------- */

.lw-care-messages{
    flex:1;
    overflow-y:auto;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:var(--paper, #F2F3EC);
}

.lw-care-row{
    display:flex;
    flex-direction:column;
    max-width:86%;
}

.lw-care-row.user{ align-self:flex-end; align-items:flex-end; }
.lw-care-row.assistant{ align-self:flex-start; align-items:flex-start; }

.lw-care-bubble{
    padding:11px 14px;
    font-size:14px;
    line-height:1.55;
    word-wrap:break-word;
    white-space:pre-wrap;
}

.lw-care-row.user .lw-care-bubble{
    background:var(--orange, #FF5A1F);
    color:#fff;
}

.lw-care-row.assistant .lw-care-bubble{
    background:var(--white, #fff);
    border:1px solid var(--line, #CDD1C3);
    color:var(--ink, #10161F);
}

.lw-care-timestamp{
    font-family:var(--mono, 'IBM Plex Mono', monospace);
    font-size:10px;
    letter-spacing:.03em;
    color:var(--muted, #57626C);
    margin-top:4px;
    padding:0 2px;
}


/* ---------- Typing indicator ---------- */

.lw-care-row.typing .lw-care-bubble{
    display:flex;
    align-items:center;
    gap:5px;
    padding:13px 16px;
}

.lw-care-typing-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--muted, #57626C);
    animation:lwCareTypingBounce 1.1s ease-in-out infinite;
}

.lw-care-typing-dot:nth-child(2){ animation-delay:.15s; }
.lw-care-typing-dot:nth-child(3){ animation-delay:.3s; }

@keyframes lwCareTypingBounce{
    0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
    30%{ transform:translateY(-4px); opacity:1; }
}


/* ---------- Quick actions ---------- */

.lw-care-quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    max-width:100%;
    width:100%;
    margin-top:2px;
}

.lw-care-quick-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:var(--white, #fff);
    border:1px solid var(--line, #CDD1C3);
    color:var(--ink, #10161F);
    font-family:var(--body, 'IBM Plex Sans', sans-serif);
    font-size:12.5px;
    font-weight:500;
    text-align:left;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}

.lw-care-quick-btn:hover{
    border-color:var(--orange, #FF5A1F);
    color:var(--orange-dk, #C8410C);
}

.lw-care-quick-btn:focus-visible{
    outline:2px solid var(--orange, #FF5A1F);
    outline-offset:2px;
}


/* ---------- Contact card ---------- */

.lw-care-contact-card{
    background:var(--white, #fff);
    border:1px solid var(--line, #CDD1C3);
    padding:12px 14px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.lw-care-contact-row{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    color:var(--ink, #10161F);
}

.lw-care-contact-row i{
    color:var(--orange, #FF5A1F);
    width:14px;
    flex-shrink:0;
}

.lw-care-contact-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:2px;
    padding:9px 14px;
    background:var(--navy, #0D1A2B);
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
}

.lw-care-contact-link:hover{ background:var(--orange, #FF5A1F); }


/* ---------- Shipment result card ---------- */

.lw-care-shipment-card{
    background:var(--white, #fff);
    border:1px solid var(--line, #CDD1C3);
    width:100%;
    overflow:hidden;
}

.lw-care-shipment-head{
    background:var(--navy, #0D1A2B);
    color:#fff;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.lw-care-shipment-head span{
    font-family:var(--mono, 'IBM Plex Mono', monospace);
    font-size:11.5px;
    letter-spacing:.03em;
}

.lw-care-shipment-status{
    font-family:var(--body, 'IBM Plex Sans', sans-serif);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--orange, #FF5A1F);
}

.lw-care-shipment-body{
    padding:12px 14px;
    display:grid;
    gap:8px;
}

.lw-care-shipment-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:12.5px;
    border-bottom:1px dashed var(--line, #CDD1C3);
    padding-bottom:7px;
}

.lw-care-shipment-row:last-child{ border-bottom:none; padding-bottom:0; }

.lw-care-shipment-row span:first-child{
    color:var(--muted, #57626C);
    font-family:var(--mono, 'IBM Plex Mono', monospace);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.lw-care-shipment-row span:last-child{
    color:var(--ink, #10161F);
    font-weight:600;
    text-align:right;
}

.lw-care-shipment-link{
    display:block;
    text-align:center;
    padding:9px;
    background:var(--paper-2, #E7E9DE);
    color:var(--navy, #0D1A2B);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    border-top:1px solid var(--line, #CDD1C3);
}

.lw-care-shipment-link:hover{ color:var(--orange-dk, #C8410C); }


/* ---------- Input row ---------- */

.lw-care-input-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    background:var(--white, #fff);
    border-top:1px solid var(--line, #CDD1C3);
    flex-shrink:0;
}

.lw-care-input-row input{
    flex:1;
    min-width:0;
    border:1px solid var(--line, #CDD1C3);
    background:var(--paper, #F2F3EC);
    padding:11px 13px;
    font-family:var(--body, 'IBM Plex Sans', sans-serif);
    font-size:14px;
    color:var(--ink, #10161F);
}

.lw-care-input-row input:focus{
    outline:none;
    border-color:var(--orange, #FF5A1F);
}

.lw-care-input-row input:disabled{ opacity:.6; }

.lw-care-input-row button{
    width:42px; height:42px;
    flex-shrink:0;
    border:none;
    background:var(--orange, #FF5A1F);
    color:#fff;
    font-size:15px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
}

.lw-care-input-row button:hover{ background:var(--orange-dk, #C8410C); }

.lw-care-input-row button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.lw-care-input-row button:focus-visible{
    outline:2px solid var(--navy, #0D1A2B);
    outline-offset:2px;
}

.lw-care-disclaimer{
    font-size:10.5px;
    line-height:1.5;
    color:var(--muted, #57626C);
    text-align:center;
    padding:0 14px 12px;
    background:var(--white, #fff);
    flex-shrink:0;
}


/* ======================================================
SCROLLBAR (messages panel)
====================================================== */

.lw-care-messages::-webkit-scrollbar{ width:8px; }
.lw-care-messages::-webkit-scrollbar-track{ background:var(--paper-2, #E7E9DE); }
.lw-care-messages::-webkit-scrollbar-thumb{ background:var(--line, #CDD1C3); }
.lw-care-messages::-webkit-scrollbar-thumb:hover{ background:var(--orange, #FF5A1F); }


/* ======================================================
REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce){
    .lw-care-panel, .lw-care-greeting, .lw-care-fab{ animation:none !important; transition:none !important; }
    .lw-care-typing-dot, .lw-care-live-dot::after{ animation:none !important; }
}


/* ======================================================
MOBILE
====================================================== */

@media (max-width:600px){

    .lw-care-fab{
        right:16px;
        bottom:16px;
        width:54px;
        height:54px;
        font-size:20px;
    }

    .lw-care-greeting{
        right:14px;
        left:14px;
        bottom:84px;
        max-width:none;
    }

    .lw-care-panel{
        right:10px;
        left:10px;
        bottom:80px;
        width:auto;
        max-width:none;
        height:auto;
        max-height:calc(100dvh - 100px);
    }

    .lw-care-quick-actions{
        grid-template-columns:1fr;
    }

    .lw-care-status{
        font-size:9.5px;
        letter-spacing:.01em;
    }

    .lw-care-header-text h2{
        font-size:17px;
    }

}