.customer-overlay{
    position:fixed;
    inset:0;
    z-index:9990;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(15,23,42,.48);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
}

.customer-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.customer-sheet{
    width:min(100%,620px);
    max-height:92dvh;
    display:flex;
    flex-direction:column;
    background:#f4f5f7;
    border-radius:22px 22px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.18);
    transform:translateY(100%);
    transition:transform .25s ease;
    overflow:hidden;
}

.customer-overlay.is-open .customer-sheet{
    transform:translateY(0);
}

.customer-handle{
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    touch-action:none;
}

.customer-handle span{
    width:42px;
    height:5px;
    border-radius:999px;
    background:#c9ccd1;
}

.customer-sheet-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 16px 14px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
}

.customer-sheet-header h2{
    margin:0;
    font-size:21px;
    font-weight:900;
    color:#111827;
}

.customer-sheet-header p{
    margin:3px 0 0;
    color:#6b7280;
    font-size:12.5px;
}

.customer-close{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#eef0f3;
    color:#374151;
    font-size:28px;
    line-height:1;
}

.customer-sheet-body{
    overflow:auto;
    padding:12px;
    overscroll-behavior:contain;
}

.customer-feed{
    display:grid;
    gap:12px;
}

.customer-state{
    padding:34px 16px;
    text-align:center;
    color:#6b7280;
}

.customer-state button{
    margin-left:6px;
    border:0;
    border-radius:999px;
    padding:8px 14px;
    font-weight:800;
}

.customer-card{
    overflow:hidden;
    background:#fff;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(15,23,42,.08);
}

.customer-card-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px;
}

.customer-card-avatar{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    border-radius:50%;
    background:#fff1e8;
    color:#c2410c;
    font-size:19px;
    font-weight:900;
    border:1px solid #fed7aa;
}

.customer-card-author{
    min-width:0;
}

.customer-card-author strong,
.customer-card-author span,
.customer-card-author small{
    display:block;
}

.customer-card-author strong{
    font-size:16px;
    color:#111827;
}

.customer-card-author span{
    margin-top:2px;
    color:#c2410c;
    font-size:12px;
    font-weight:800;
}

.customer-card-author small{
    margin-top:2px;
    color:#6b7280;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.customer-card-copy{
    padding:0 13px 13px;
    color:#111827;
    font-size:15px;
    line-height:1.5;
}

.customer-card-clamp{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
}

.customer-card-clamp.is-expanded{
    display:block;
}

.customer-card-more{
    padding:0;
    border:0;
    background:none;
    color:#6b7280;
    font:inherit;
    font-weight:800;
}

.customer-card-photo{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#e5e7eb;
}

.customer-card-photo img{
    display:block;
    width:100%;
    max-height:100px;
    aspect-ratio:4/3;
    object-fit:cover;
}

.customer-card-photo span {
    position: absolute;
    right: 0;
    bottom: 0px;
    padding: 6px 9px;
    border-top-left-radius: 12px;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.customer-contact-box{
    padding:14px 12px 16px;
    border-top:1px solid #f1ead8;
    background:linear-gradient(180deg,#fffdf7 0%,#fff8e8 100%);
}

.customer-contact-info{
    display:grid;
    gap:8px;
    margin-bottom:14px;
}

.customer-contact-line{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:start;
    gap:4px;
    color:#20242b;
    font-size:14px;
    line-height:1.35;
}

.customer-contact-line-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    font-size:17px;
    line-height:1;
}

.customer-contact-line strong{
    min-width:0;
    font-weight:850;
    overflow-wrap:anywhere;
}

.customer-contact-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.customer-contact-button{
    min-width:0;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #eef0f2;
    border-radius:999px;
    background:#fff;
    color:#0b73c9;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    line-height:1.15;
    text-align:center;
    box-shadow:0 7px 18px rgba(15,23,42,.10);
    -webkit-tap-highlight-color:transparent;
}

.customer-contact-button:active{
    transform:translateY(1px);
    background:#f8fbff;
}

.customer-contact-button.is-disabled{
    color:#aeb5bf;
    background:#f7f7f7;
    box-shadow:none;
    cursor:not-allowed;
}

@media (max-width:360px){

    .customer-contact-actions{
        gap:8px;
    }

    .customer-contact-button{
        font-size:12px;
        padding:9px 8px;
    }

}

.customer-info-content h3{
    margin:0 0 8px;
    font-size:20px;
}

.customer-info-content p{
    margin:0 0 14px;
    line-height:1.55;
}

.customer-info-business{
    padding:12px;
    border-radius:12px;
    background:#fff7ed;
    color:#9a3412;
    font-weight:800;
}

.customer-photo-body{
    display:grid;
    gap:10px;
}

.customer-photo-body img{
    display:block;
    width:100%;
    border-radius:12px;
    background:#e5e7eb;
}

.customer-lock{
    overflow:hidden!important;
}

@media (min-width:760px){

    .customer-overlay{
        align-items:center;
        padding:20px;
    }

    .customer-sheet{
        border-radius:22px;
        max-height:88vh;
    }

}

@media (prefers-reduced-motion:reduce){

    .customer-overlay,
    .customer-sheet{
        transition:none;
    }

}

.photo-count{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.photo-count-icon{
    width:18px;
    height:18px;
    display:block;
    flex:none;
}