/* Widget SiRTA (chat/asisten) + panduan awal */
.sc-hidden { display: none !important; }

.sc-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 1040;
    border: 0; padding: 0; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #198754, #0f6b41);
    box-shadow: 0 6px 18px rgba(15, 37, 69, .35);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    transition: transform .15s ease;
}
.sc-fab:hover { transform: translateY(-2px); }
.sc-fab img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.sc-fab:not(.sc-fab-label-mode) { width: 58px; height: 58px; border-radius: 50%; }
.sc-fab:has(.sc-fab-label) { width: auto; height: 50px; border-radius: 25px; padding: 0 1.1rem; font-weight: 600; }
.sc-fab i { font-size: 1.3rem; }
.sc-fab.sc-fab-open { transform: scale(.92); }
.sc-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: #dc3545; color: #fff; font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

.sc-panel {
    position: fixed; right: 18px; bottom: 88px; z-index: 1040;
    width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 110px);
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 37, 69, .3);
    display: flex; flex-direction: column;
}
.sc-head { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; color: #fff; background: linear-gradient(135deg, #198754, #0f6b41); }
.sc-head > i { font-size: 1.5rem; }
.sc-head-av { width: 38px; height: 38px; border-radius: 50%; background: #fff; object-fit: cover; }
.sc-head-t { flex: 1; line-height: 1.2; display: flex; flex-direction: column; }
.sc-head-t small { opacity: .85; font-size: .72rem; }
.sc-x { border: 0; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; opacity: .85; }

.sc-tabs { display: flex; border-bottom: 1px solid #e3e8ee; }
.sc-tab { flex: 1; border: 0; background: #fff; padding: .55rem; font-size: .85rem; font-weight: 600; color: #6b7785; border-bottom: 3px solid transparent; cursor: pointer; }
.sc-tab.active { color: #198754; border-bottom-color: #198754; }

.sc-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sc-log { flex: 1; overflow-y: auto; padding: .8rem; background: #f6f8fb; display: flex; flex-direction: column; gap: .45rem; }
.sc-msg { max-width: 86%; padding: .5rem .75rem; border-radius: .85rem; font-size: .86rem; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.sc-bot, .sc-admin { align-self: flex-start; background: #fff; border: 1px solid #dde3ea; border-bottom-left-radius: .2rem; }
.sc-admin { border-color: #b7dfc7; background: #eaf7ef; }
.sc-saya { align-self: flex-end; background: #198754; color: #fff; border-bottom-right-radius: .2rem; }
.sc-time { display: block; font-size: .66rem; opacity: .65; margin-top: .15rem; }
.sc-sys { align-self: center; font-size: .75rem; color: #6b7785; text-align: center; padding: .25rem .5rem; }
.sc-link { display: block; margin-top: .5rem; padding: .3rem .6rem; border-radius: 6px; background: #e9f5ee; color: #146c43; font-size: .8rem; font-weight: 600; text-decoration: none; border: 0; text-align: left; cursor: pointer; }
.sc-link:hover { background: #d5ecdf; color: #0f5132; }

.sc-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .8rem; max-height: 128px; overflow-y: auto; background: #f6f8fb; border-top: 1px solid #eef1f5; }
.sc-chips:empty { display: none; }
.sc-chip { border: 1px solid #b7dfc7; background: #fff; color: #146c43; border-radius: 14px; padding: .22rem .65rem; font-size: .76rem; cursor: pointer; text-align: left; }
.sc-chip:hover { background: #e9f5ee; }

.sc-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid #e3e8ee; background: #fff; }
.sc-form input { flex: 1; min-width: 0; border: 1px solid #ced6df; border-radius: 18px; padding: .4rem .8rem; font-size: .86rem; }
.sc-form input:focus { outline: 0; border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .15); }
.sc-form button { border: 0; width: 38px; height: 38px; border-radius: 50%; background: #198754; color: #fff; cursor: pointer; flex-shrink: 0; }
.sc-form button:disabled { background: #a8b3bd; cursor: not-allowed; }
.sc-form-chat { flex-direction: column; gap: .35rem; }
.sc-form-row { display: flex; gap: .4rem; }
.sc-form-row input { flex: 1; }
.sc-form-chat .sc-nama { border-radius: 8px; }

.sc-note { margin: .9rem 1rem .4rem; font-size: .84rem; color: #55606c; }
.sc-cards { padding: .3rem 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; }
.sc-card { display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%; padding: .7rem .85rem; border: 1px solid #dde3ea; border-radius: 12px; background: #fff; color: #212529; text-decoration: none; cursor: pointer; }
.sc-card:hover { border-color: #198754; background: #f3fbf6; color: #212529; }
.sc-card > i { font-size: 1.4rem; color: #198754; }
.sc-card-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sc-card-t strong { font-size: .88rem; }
.sc-card-t small { color: #6b7785; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
.sc-card-off { opacity: .55; cursor: not-allowed; }
.sc-card-off:hover { border-color: #dde3ea; background: #fff; }

.sc-chatbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid #e3e8ee; }
.sc-chatbar-t { font-weight: 600; font-size: .86rem; }
.sc-back { border: 0; background: transparent; color: #198754; font-size: .82rem; cursor: pointer; padding: 0; }
.sc-error { padding: .35rem .8rem; font-size: .78rem; color: #b02a37; background: #fdf0f1; }
.sc-error.sc-ok { color: #146c43; background: #e9f5ee; }
.sc-emailform { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; }
.sc-hint { font-size: .72rem; color: #6b7785; margin-top: -.25rem; }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Panduan awal */
.sc-tour { position: fixed; inset: 0; z-index: 1060; background: rgba(15, 37, 69, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sc-tour-box { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 1.6rem 1.5rem 1.2rem; text-align: center; box-shadow: 0 16px 50px rgba(0, 0, 0, .35); }
.sc-tour-ic { width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 50%; background: #e9f5ee; color: #198754; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }
.sc-tour-box h5 { font-weight: 700; margin-bottom: .5rem; }
.sc-tour-box p { color: #55606c; font-size: .92rem; min-height: 4.2em; }
.sc-dots { display: flex; justify-content: center; gap: .35rem; margin: .8rem 0 1rem; }
.sc-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d5dbe1; }
.sc-dots span.on { background: #198754; width: 22px; border-radius: 4px; }
.sc-tour-act { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 575.98px) {
    .sc-panel { right: 8px; left: 8px; bottom: 80px; width: auto; max-width: none; height: min(560px, calc(100vh - 100px)); }
    .sc-fab { right: 12px; bottom: 12px; }
}
@media print { .sc-fab, .sc-panel, .sc-tour { display: none !important; } }