/* Demo-only containment: preserve the native components and readable text. */
#root main{min-width:0}
#root span.inline-flex.rounded{white-space:nowrap;flex-shrink:0}
#root table th,#root table td{vertical-align:middle}
#root table th:not(:first-child),#root table td:not(:first-child){padding-left:10px;padding-right:10px}
#root table td:last-child{min-width:100px}
@media(max-width:1100px){
 #root>div>aside.w-\[244px\]{width:184px}
 #root main.p-8{padding:20px}
 #root main>div>header h1{font-size:28px;line-height:1.2}
 #root [data-tour="kb-folders"]{max-width:180px}
 .demo-tour-hint{left:12px!important;width:160px!important;bottom:132px!important}
}
@media(max-width:900px){
 #root main.p-8{padding:16px}
 #root [data-tour="kb-folders"]{max-width:none;width:100%;max-height:220px;overflow:auto;border-bottom:1px solid #dedbd4}
 #root [data-tour="kb-folders"]>div{width:100%}
 #root main div:has(>[data-tour="kb-folders"]){flex-direction:column}
 #root main table{font-size:12px}
 #root main table th,#root main table td{padding-left:8px;padding-right:8px}
 #root main table td:first-child{overflow-wrap:anywhere}
 #root main .cv-header{flex-wrap:wrap;height:auto;min-height:48px}
 .cv-chat__composer{padding:12px}
}
body:has(#root>div>aside.w-\[60px\]) .demo-tour-hint{display:none}
@media(max-width:1100px){
 #root main>.max-w-4xl>.flex.items-start{flex-wrap:wrap;gap:12px}
 #root main>.max-w-4xl>.flex.items-start>.flex-1{min-width:240px}
 #root main>.max-w-4xl .flex.items-center.gap-4{flex-wrap:wrap}
}
/* At tablet widths the native folder tree moves above its scrollable table. */
@media(max-width:1100px){
 #root main div:has(>[data-tour="kb-folders"]){flex-direction:column}
 #root [data-tour="kb-folders"]{width:100%;max-width:none;max-height:none;border-bottom:1px solid #dedbd4}
 #root [data-tour="kb-folders"]>nav{width:100%;border-right:0}
 #root [data-tour="kb-folders"]>nav>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 #root [data-tour="kb-cards"]{overflow-x:auto}
 #root [data-tour="kb-cards"] table{min-width:880px}
}
@media(max-width:900px){
 #root [data-tour="kb-folders"]>nav>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Visible native scroll rails, independent of the operating system setting. */
#root *{scrollbar-width:auto;scrollbar-color:#68748a #eeece6}
#root *::-webkit-scrollbar{width:14px;height:14px}
#root *::-webkit-scrollbar-track{background:#eeece6;border-radius:7px}
#root *::-webkit-scrollbar-thumb{background:#68748a;border:3px solid #eeece6;border-radius:7px;min-height:44px}
#root *::-webkit-scrollbar-thumb:hover{background:#34425d}
#root .overflow-y-auto,#root .overflow-auto,.cv-chat__messages,.cv-canvas__body{scrollbar-gutter:stable}

.demo-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:32px;box-sizing:border-box;background:#faf9f6;color:#1d2b50;text-align:center;font:14px/1.5 Inter,system-ui,sans-serif}
.demo-loading__logo{display:grid;place-items:center;width:44px;height:44px;background:#1d2b50;color:white;border-radius:8px;font:600 26px Georgia,serif}
.demo-loading h1{font-size:18px;line-height:1.4;font-weight:600;margin:4px 0 0}
.demo-loading p{max-width:340px;margin:0;color:#596376}
.demo-loading__track{margin-top:8px;width:min(240px,80%);height:5px;border-radius:8px;background:#e0e3e9;overflow:hidden}
.demo-loading__track span{display:block;width:45%;height:100%;border-radius:8px;background:#1d2b50;animation:demo-loading-slide 1.3s ease-in-out infinite alternate}
@keyframes demo-loading-slide{from{transform:translateX(-80%)}to{transform:translateX(210%)}}
@media(prefers-reduced-motion:reduce){.demo-loading__track span{animation:none;width:65%}}

.demo-loading--transition{position:fixed;inset:0;z-index:2147483647}

/* Keep the explicit track on WebKit/Chromium even with OS overlay scrollbars. */
@supports selector(::-webkit-scrollbar){#root *{scrollbar-color:auto}}