:root {
    --surbai-blue: #1677ff;
    --surbai-blue-dark: #0f5fc7;
    --surbai-blue-soft: #eef6ff;
    --surbai-orange: #ff8a1f;
    --surbai-orange-dark: #e97100;
    --surbai-orange-soft: #fff4e8;
    --surbai-accent: var(--surbai-blue);
    --surbai-accent-dark: var(--surbai-blue-dark);
    --surbai-bg: #f8fbff;
    --surbai-line: #dbe9f8;
    --surbai-text: #18324f;
    --surbai-muted: #6d8298;
}

.surbai-fab {
    position: fixed;
    right: 22px;
    bottom: 100px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--surbai-blue), var(--surbai-blue-dark));
    color: #fff;
    padding: 8px 10px 8px 15px;
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    font-family: inherit;
}
.surbai-fab-logo, .surbai-logo {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--surbai-orange), var(--surbai-orange-dark));
    color: #fff;
    font-weight: 800;
}
.surbai-fab-logo { width: 42px; height: 42px; border-radius: 13px; }
.surbai-fab-text strong, .surbai-fab-text small { display:block; text-align:right; }
.surbai-fab-text strong { font-size:12px; }
.surbai-fab-text small { font-size:9px; opacity:.7; margin-top:2px; }

.surbai-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(20,17,18,.28);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: .22s ease;
}
.surbai-backdrop.open { opacity:1; visibility:visible; }

.surbai-panel {
    position: fixed;
    top: 14px;
    bottom: 14px;
    right: 14px;
    z-index: 11000000000;
    width: min(430px, calc(100vw - 28px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--surbai-line);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(22, 83, 145, .20);
    transform: translateX(calc(-100% - 30px));
    transition: transform .25s ease;
    font-family: inherit;
}
.surbai-panel.open { transform: translateX(0); }

.surbai-header {
    min-height: 76px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 15px;
    border-bottom:1px solid var(--surbai-line);
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.surbai-logo { width:46px; height:46px; border-radius:14px; flex:0 0 auto; }
.surbai-title { flex:1; }
.surbai-title strong { display:block; font-size:14px; color:var(--surbai-text); }
.surbai-title small { display:flex; align-items:center; gap:5px; color:var(--surbai-muted); font-size:10px; margin-top:3px; }
.surbai-title small i { width:7px; height:7px; border-radius:50%; background:#2b9d70; }
.surbai-close {
    width:36px; height:36px; border:0; border-radius:11px;
    background:#f2efec; color:#777; font-size:24px; line-height:1;
}

.surbai-messages {
    flex:1;
    overflow-y:auto;
    padding:16px 13px;
    background:
      radial-gradient(circle at 100% 0, rgba(22,119,255,.08), transparent 32%),
      radial-gradient(circle at 0 100%, rgba(255,138,31,.06), transparent 26%),
      var(--surbai-bg);
    overflow-x:hidden;
    min-width:0;
}
.surbai-row { display:flex; gap:7px; margin:10px 0; align-items:flex-start; min-width:0; max-width:100%; }
.surbai-row.user { justify-content:flex-start; }
.surbai-mini-logo {
    width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center;
    border-radius:9px; background:var(--surbai-accent); color:#fff; font-size:9px; font-weight:800;
}
.surbai-message-content { max-width:86%; min-width:0; width:100%; overflow:hidden; }
.surbai-bubble {
    max-width:86%;
    padding:11px 13px;
    border-radius:16px;
    line-height:1.9;
    font-size:12px;
    white-space:normal;
    overflow-wrap:anywhere;
}
.surbai-row.assistant .surbai-bubble {
    max-width:100%; background:#fff; color:var(--surbai-text);
    border:1px solid var(--surbai-line); border-bottom-right-radius:5px;
}
.surbai-row.user .surbai-bubble {
    background:linear-gradient(135deg, var(--surbai-blue), var(--surbai-blue-dark)); color:#fff; border-bottom-left-radius:5px;
}

.surbai-quick { display:flex; flex-wrap:wrap; gap:6px; margin:12px 34px 0 0; }
.surbai-quick button {
    border:1px solid #cfe3fb; border-radius:999px; background:var(--surbai-blue-soft);
    color:var(--surbai-blue-dark); padding:7px 9px; font-size:9px;
}

.surbai-products { display:grid; gap:7px; margin-top:8px; min-width:0; width:100%; overflow:hidden; }
.surbai-product {
    display:flex; align-items:center; gap:9px; width:100%;
    border:1px solid var(--surbai-line); border-radius:13px; background:#fff;
    padding:7px; color:var(--surbai-text); text-decoration:none !important;
    min-width:0; max-width:100%; overflow:hidden;
    box-shadow:0 5px 16px rgba(22,119,255,.045);
}
.surbai-product img { width:48px; height:54px; object-fit:cover; border-radius:9px; flex:0 0 auto; background:#f1efed; }
.surbai-product-info { min-width:0; flex:1 1 0; width:0; overflow:hidden; }
.surbai-product strong {
    display:-webkit-box;
    font-size:10px;
    line-height:1.8;
    white-space:normal;
    overflow:hidden;
    overflow-wrap:anywhere;
    word-break:break-word;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.surbai-product small { display:block; margin-top:3px; color:var(--surbai-orange-dark); font-size:9px; white-space:normal; overflow-wrap:anywhere; }

.surbai-typing {
    display:none; align-items:center; gap:4px; padding:7px 17px;
    border-top:1px solid #f4f1ef; color:var(--surbai-muted); font-size:9px;
}
.surbai-typing.show { display:flex; }
.surbai-typing span { width:5px; height:5px; border-radius:50%; background:var(--surbai-accent); animation:surbai-dot .8s infinite alternate; }
.surbai-typing span:nth-child(2) { animation-delay:.15s; }
.surbai-typing span:nth-child(3) { animation-delay:.3s; }
.surbai-typing em { margin-right:4px; font-style:normal; }
@keyframes surbai-dot { to { opacity:.25; transform:translateY(-2px); } }

.surbai-inputbar {
    display:flex; align-items:flex-end; gap:8px; padding:10px 11px 6px;
    background:#fff; border-top:1px solid var(--surbai-line);
}
.surbai-inputbar textarea {
    flex:1; resize:none; max-height:110px; border:1px solid var(--surbai-line);
    outline:0; border-radius:15px; background:#f8f6f4; padding:10px 11px;
    font-family:inherit; font-size:11px; line-height:1.7;
}
.surbai-inputbar textarea:focus { border-color:var(--surbai-blue); box-shadow:0 0 0 3px rgba(22,119,255,.08); }
.surbai-inputbar button {
    width:42px; height:42px; flex:0 0 auto; border:0; border-radius:14px;
    background:linear-gradient(135deg, var(--surbai-orange), var(--surbai-orange-dark)); color:#fff; transform:rotate(180deg); font-size:17px;
}
.surbai-inputbar button:disabled { opacity:.55; cursor:not-allowed; }
.surbai-note { padding:0 12px 9px; background:#fff; color:#aaa09b; text-align:center; font-size:8px; }

@media(max-width:600px) {
    .surbai-fab { left:12px; bottom:12px; padding:7px; border-radius:15px; }
    .surbai-fab-text { display:none; }
    .surbai-panel { inset:0; width:100%; border-radius:0; transform:translateX(-100%); }
}


/* SurbAI corporate light theme + overflow hardening */
.surbai-panel,
.surbai-header,
.surbai-messages,
.surbai-inputbar,
.surbai-row,
.surbai-message-content,
.surbai-bubble,
.surbai-products,
.surbai-product,
.surbai-product-info {
    box-sizing:border-box;
}

.surbai-panel,
.surbai-messages {
    max-width:100vw;
    overflow-x:hidden;
}

.surbai-header {
    border-bottom-color:#dbe9f8;
}

.surbai-logo,
.surbai-mini-logo {
    background:linear-gradient(135deg, var(--surbai-blue), var(--surbai-blue-dark));
}

.surbai-logo::after,
.surbai-fab-logo::after {
    content:"";
    width:8px;
    height:8px;
    position:absolute;
    border-radius:50%;
    background:var(--surbai-orange);
    border:2px solid #fff;
}
.surbai-logo, .surbai-fab-logo { position:relative; }
.surbai-logo::after { left:-2px; bottom:-2px; }
.surbai-fab-logo::after { left:-2px; bottom:-2px; }

.surbai-row.assistant .surbai-bubble {
    background:#fff;
    border-color:#dbe9f8;
    box-shadow:0 4px 14px rgba(22,119,255,.035);
}

.surbai-product:hover {
    border-color:#bcdcff;
    background:#fbfdff;
}

.surbai-close {
    background:var(--surbai-blue-soft);
    color:var(--surbai-blue-dark);
}

.surbai-typing span {
    background:var(--surbai-orange);
}

.surbai-note {
    color:#8799aa;
}