#tf-stylist-bubble{position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:linear-gradient(135deg,#2f4b53,#bccb5e);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99999;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.2s;-webkit-tap-highlight-color:transparent}
#tf-stylist-bubble:hover{transform:scale(1.08)}
#tf-stylist-bubble:active{transform:scale(0.95)}
.tf-stylist-badge{position:absolute;top:-4px;right:-4px;background:#e74c3c;color:#fff;font-size:11px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
#tf-stylist-chat{position:fixed;bottom:100px;right:24px;width:380px;height:580px;background:#fff;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,0.18);z-index:99998;display:none;flex-direction:column;overflow:hidden;font-family:'Space Grotesk',-apple-system,sans-serif}
#tf-stylist-chat.open{display:flex;animation:tfSlideUp 0.25s ease}
@keyframes tfSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#tf-stylist-header{background:linear-gradient(135deg,#2f4b53,#3d6470);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;color:#fff;flex-shrink:0}
.tf-stylist-header-info{display:flex;align-items:center;gap:11px}
.tf-stylist-avatar{width:38px;height:38px;background:rgba(255,255,255,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
#tf-stylist-header strong{display:block;font-size:14px;line-height:1.3}
#tf-stylist-header small{font-size:11px;opacity:0.8}
#tf-stylist-close{background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:16px;cursor:pointer;padding:6px 10px;border-radius:8px;-webkit-tap-highlight-color:transparent}
#tf-stylist-messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
#tf-stylist-messages::-webkit-scrollbar{width:3px}
#tf-stylist-messages::-webkit-scrollbar-thumb{background:#bccb5e;border-radius:4px}
.tf-msg{display:flex;gap:6px;align-items:flex-end}
.tf-msg-bot{flex-direction:row}
.tf-msg-user{flex-direction:row-reverse}
.tf-msg-bubble{max-width:82%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;word-break:break-word}
.tf-msg-bot .tf-msg-bubble{background:#f2f3f5;color:#2f4b53;border-bottom-left-radius:4px}
.tf-msg-user .tf-msg-bubble{background:linear-gradient(135deg,#2f4b53,#3d6470);color:#fff;border-bottom-right-radius:4px}
.tf-msg-bubble a.tf-product-link{color:#bccb5e;font-weight:600;text-decoration:none}
.tf-msg-user .tf-msg-bubble a.tf-product-link{color:#d4e88a}
.tf-msg-bubble img{max-width:100%;border-radius:8px;margin-bottom:5px;display:block}
.tf-typing{display:flex;gap:4px;padding:12px 14px;background:#f2f3f5;border-radius:16px;border-bottom-left-radius:4px}
.tf-typing span{width:7px;height:7px;background:#2f4b53;border-radius:50%;animation:tfBounce 1.2s infinite}
.tf-typing span:nth-child(2){animation-delay:0.2s}
.tf-typing span:nth-child(3){animation-delay:0.4s}
@keyframes tfBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
#tf-stylist-upload-area{padding:8px 14px;border-top:1px solid #f0f0f0;flex-shrink:0}
#tf-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#f4f4f4;border-radius:20px;font-size:13px;cursor:pointer;color:#2f4b53;font-weight:500;border:1.5px dashed #ccc;transition:all 0.2s;-webkit-tap-highlight-color:transparent}
#tf-upload-btn:hover,#tf-upload-btn:active{background:#e8f0d0;border-color:#bccb5e}
#tf-photo-preview{position:relative;display:inline-block}
#tf-preview-img{height:48px;width:48px;border-radius:8px;object-fit:cover}
#tf-remove-photo{position:absolute;top:-6px;right:-6px;background:#e74c3c;color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#tf-stylist-input-area{padding:10px 14px 14px;align-items:center;display:flex;gap:8px;align-items:center;border-top:1px solid #f0f0f0;background:#fff;flex-shrink:0}
#tf-stylist-input{flex:1;border:1.5px solid #e0e0e0;border-radius:24px;padding:10px 15px;font-size:14px;outline:none;font-family:inherit;background:#fafafa;transition:border-color 0.2s;min-width:0}
#tf-stylist-input:focus{border-color:#bccb5e;background:#fff}
#tf-stylist-send{width:48px;height:48px;background:linear-gradient(135deg,#2f4b53,#bccb5e);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;flex-shrink:0;transition:transform 0.15s,opacity 0.2s;-webkit-tap-highlight-color:transparent;padding:0}
#tf-stylist-send:hover{transform:scale(1.06)}
#tf-stylist-send:active{transform:scale(0.94)}
#tf-stylist-send:disabled{opacity:0.45;cursor:not-allowed}
@media(max-width:600px){
#tf-stylist-bubble{bottom:16px;right:16px;width:56px;height:56px}
#tf-stylist-chat{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;border-radius:0!important;position:fixed}
#tf-stylist-input{font-size:16px}
#tf-stylist-input-area{padding:8px 12px max(12px,env(safe-area-inset-bottom))}
.tf-msg-bubble{font-size:14px;max-width:86%}
}

/* ── Product Cards ── */
.tf-msg-cards { width: 100%; }

.tf-product-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
}

.tf-product-card {
    display: flex;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.tf-product-card:hover {
    box-shadow: 0 4px 16px rgba(47,75,83,0.12);
    border-color: #bccb5e;
}

.tf-card-img {
    width: 85px;
    min-width: 85px;
    height: 100px;
    overflow: hidden;
    background: #f8f8f8;
}

.tf-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-card-body {
    flex: 1;
    padding: 8px 10px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tf-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #2f4b53;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-card-price {
    font-size: 13px;
    font-weight: 700;
    color: #2f4b53;
}

.tf-card-reason {
    font-size: 11.5px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tf-card-colors {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.tf-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: 1px solid rgba(0,0,0,0.1);
    display: inline-block;
}

.tf-card-btn {
    font-size: 11px;
    color: #bccb5e;
    font-weight: 600;
    margin-top: auto;
}

@media (max-width: 600px) {
    .tf-product-cards { max-width: 100%; }
    .tf-card-img { width: 80px; min-width: 80px; height: 90px; }
}