.rocodeAiPreview {
    position: fixed; z-index: 1100; inset-inline-end: 20px; top: 76px;
    width: min(356px, calc(100vw - 40px)); max-height: calc(100vh - 100px);
    overflow: auto; box-sizing: border-box; padding: 24px;
    border: 1px solid #ded6ec; border-radius: 16px;
    background: #fff; color: #302a3a;
    box-shadow: 0 12px 42px #31214226;
    font: 14px/1.55 Pretendard, Tahoma, "Leelawadee UI", sans-serif;
}
.rocodeAiPreview[hidden] { display: none; }
.rocodeAiConnectionControl, .rocodeAiConnectionBadge {
    display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box;
    border: 1px solid #d3dfe5; border-radius: 999px;
    background: #edf2f4; color: #526b79;
    font: 700 13px/1.25 Pretendard, Tahoma, "Leelawadee UI", sans-serif;
    padding: 7px 10px;
}
.rocodeAiConnectionControl {
    min-height: 32px; max-width: 190px; flex: 0 1 auto; cursor: pointer;
    text-align: start;
}
.rocodeAiConnectionControl[hidden] { display: none !important; }
.rocodeAiConnectionControl::before, .rocodeAiConnectionBadge::before {
    content: ''; width: 8px; height: 8px; flex: 0 0 8px;
    border-radius: 50%; background: #8297a2;
}
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge)[data-connection-state='connected'] {
    background: #eaf5ee; border-color: #88b99b; color: #286344;
}
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge)[data-connection-state='connected']::before { background: #39a35a; }
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge)[data-connection-state='connecting'] {
    background: #eaf5fa; color: #34657f;
}
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge)[data-connection-state='connecting']::before { background: #4e9fc7; }
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge):is([data-connection-state='unavailable'], [data-connection-state='offline']) {
    background: #fff0ef; border-color: #e2afaa; color: #9b413b;
}
:is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge):is([data-connection-state='unavailable'], [data-connection-state='offline'])::before { background: #c84a42; }
.rocodeAiConnectionControl:hover { box-shadow: 0 0 0 2px #ffffff66; }
.rocodeAiConnectionControl:focus-visible { outline: 3px solid #163d79; outline-offset: 2px; }
.rocodeAiPreview .rocodeAiConnectionBadge { margin: 12px 0 0; }
.rocodeAiExample:disabled { opacity: .5; cursor: not-allowed; }
:root[lang="ar"] :is(.rocodeAiConnectionControl, .rocodeAiConnectionBadge) { font-family: "Noto Sans Arabic", sans-serif; }
@media (max-width: 720px) {
    .rocodeAiConnectionControl { max-width: 130px; padding: 5px 7px; font-size: 11px; }
}
.rocodeAiPreview h2 { margin: 0 0 14px; padding-inline-end: 28px; font-size: 19px; line-height: 1.3; }
.rocodeAiPreview p { margin: 12px 0; }
.rocodeAiPreview .rocodeAiFinePrint { font-size: 12px; color: #62576e; }
.rocodeAiMode { border-radius: 8px; background: #f2edf9; padding: 10px; font-weight: 650; font-size: 12px; }
.rocodeAiDemoLabel { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rocodeAiPreview input[type="checkbox"] {
    appearance: auto; -webkit-appearance: checkbox;
    width: 18px; height: 18px; flex: 0 0 18px;
    margin: 3px 0 0; accent-color: #6732b8;
}
.rocodeAiPreview button { cursor: pointer; font: inherit; }
.rocodeAiClose { position: absolute; top: 14px; inset-inline-end: 14px; border: 0; background: transparent; font-size: 24px !important; color: #62576e; }
.rocodeAiExample { width: 100%; padding: 10px; border: 1px solid #6732b8; border-radius: 8px; color: #6732b8; background: #fff; font-weight: 650 !important; }
.rocodeAiExample + .rocodeAiExample { margin-top: 8px; }
.rocodeAiPreview button:focus-visible, .rocodeAiPreview input:focus-visible { outline: 3px solid #b995f0; outline-offset: 3px; }
.rocodeAiResult { border-top: 1px solid #e8e2ef; padding-top: 12px; font-weight: 650; }
.rocodeAiReply { overflow-wrap: anywhere; }
.rocodeAiOnline { border-top: 1px solid #e8e2ef; padding-top: 14px; margin-top: 14px; }
.rocodeAiOnline [hidden] { display: none !important; }
.rocodeAiOnline form > label { display: block; margin: 12px 0; }
.rocodeAiOnline form > .rocodeAiDemoLabel { display: flex; }
.rocodeAiOnline input[type="password"], .rocodeAiOnline input[type="text"] { display: block; box-sizing: border-box; width: 100%; height: 40px; border: 1px solid #a99bb9; border-radius: 6px; margin-top: 6px; padding: 8px; }
.rocodeAiActivate { width: 100%; border: 0; border-radius: 8px; padding: 12px; background: #6732b8; color: white; font-weight: 650 !important; }
.rocodeAiOnline > button { margin: 4px 8px 4px 0; padding: 8px; border: 1px solid #a99bb9; border-radius: 6px; background: white; color: #302a3a; }
.rocodeAiExpiry { font-weight: 650; color: #276146; }
.rocodeAiOnline details { margin-block: 12px; }
.rocodeAiOnline summary { cursor: pointer; font-weight: 650; }
.rocodeAiOnline details .rocodeAiNotice { font-size: 12px; }
.rocodeAiMode[data-state="ready"] { background: #eaf5ee; color: #245b40; }
.rocodeAiOnline button:disabled { opacity: .6; cursor: wait; }
.rocodeAiPreview [hidden] { display: none !important; }
.rocodeAiSimple { border: 0; margin: 0; padding: 0; }
.rocodeAiSwitchRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 650; }
.rocodeAiPower { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.rocodeAiSwitchTrack { display: block; width: 46px; height: 28px; padding: 3px; box-sizing: border-box; border: 1px solid #86788f; border-radius: 20px; background: #e9e4ee; }
.rocodeAiSwitchTrack::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: #62576e; }
.rocodeAiPower[aria-checked="true"] .rocodeAiSwitchTrack { background: #6732b8; border-color: #6732b8; }
.rocodeAiPower[aria-checked="true"] .rocodeAiSwitchTrack::after { transform: translateX(18px); background: #fff; }
.rocodeAiSimple .rocodeAiExpiry, .rocodeAiFeedback { font-size: 14px; font-weight: 400; }
.rocodeAiHelp { margin-top: 16px; border-top: 1px solid #e8e2ef; padding-top: 12px; }
.rocodeAiHelp > summary { width: fit-content; cursor: pointer; color: #62576e; font-size: 14px; }
.rocodeAiHelp > summary:focus-visible { outline: 3px solid #b995f0; outline-offset: 3px; }
.rocodeAiHelp .rocodeAiFinePrint { font-size: 14px; }
.rocodeAiConsent { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 24px; border: 1px solid #ded6ec; border-radius: 16px; color: #302a3a; background: #fff; font: 16px/1.55 Pretendard, Tahoma, "Leelawadee UI", sans-serif; overflow-y: auto; box-shadow: 0 12px 42px #31214226; }
.rocodeAiConsent::backdrop { background: #21152b80; }
.rocodeAiConsent h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; }
.rocodeAiConsent .rocodeAiNotice h3 { display: none; }
.rocodeAiConsent p { margin: 0 0 14px; }
.rocodeAiConsent a { color: #56249c; text-decoration: underline; overflow-wrap: anywhere; }
.rocodeAiAcceptance { margin-top: 20px !important; font-weight: 650; }
.rocodeAiConsentActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.rocodeAiConsentActions button { min-height: 44px; padding: 10px 16px; border: 1px solid #a99bb9; border-radius: 8px; font: inherit; cursor: pointer; background: #fff; color: #302a3a; }
.rocodeAiConsentActions .rocodeAiActivate { width: auto; border-color: #6732b8; background: #6732b8; color: #fff; }
.rocodeAiConsent :focus-visible { outline: 3px solid #6732b8; outline-offset: 3px; }
@media (max-width: 480px) {
    .rocodeAiConsent { padding: 20px; }
    .rocodeAiConsentActions { flex-direction: column-reverse; }
    .rocodeAiConsentActions button { width: 100%; }
}
:root[lang="ar"] .rocodeAiPreview { font-family: "Noto Sans Arabic", sans-serif; }