/* Load tokens.css before this opt-in component layer. No external imports. */
.cl-theme{font-family:var(--font-sans);color:var(--text-1);background:var(--canvas);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.cl-theme *,.cl-theme *::before,.cl-theme *::after{box-sizing:border-box}
.cl-theme button,.cl-theme input,.cl-theme textarea,.cl-theme select{font-family:inherit}
.cl-theme h1{font-size:var(--fs-large);letter-spacing:-.035em;line-height:1.15;margin:0;font-weight:700}
.cl-theme h2{font-size:var(--fs-headline);margin:0}
.cl-muted{color:var(--text-2)}
.cl-caption{color:var(--text-3);font-size:var(--fs-foot)}
.cl-number{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.cl-card{background:var(--surface);border:var(--panel-border);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-card)}
.cl-row{background:var(--surface-2);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px;min-width:0}
.cl-row>*{min-width:0}
.cl-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);border:var(--panel-border);box-shadow:var(--shadow-lg);isolation:isolate;position:relative}
.cl-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-rim);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.cl-button{font-size:var(--fs-sub);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--accent-fill);color:var(--on-accent);font-weight:600;cursor:pointer;text-decoration:none;transition:transform var(--dur-1) var(--ease-out),filter var(--dur-1) ease}
.cl-button:active{transform:scale(.97)}
.cl-button--ghost{background:var(--bg-hover);color:var(--text-1);border-color:var(--border)}
.cl-button--danger{background:var(--danger-fill);color:#fff}
.cl-button:disabled{opacity:.45;cursor:default;transform:none}
.cl-theme :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cl-input{width:100%;min-height:44px;font-size:16px!important;background:var(--input-bg);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.cl-input::placeholder{color:var(--text-3);opacity:1}
.cl-sheet{background:var(--modal-bg);border-radius:var(--radius-sheet);padding:24px;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);overflow:auto;overscroll-behavior:contain;box-shadow:var(--shadow-xl)}
.cl-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.cl-page-enter>*{animation:cl-page-in 320ms var(--ease-out) both}
@keyframes cl-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* OPTIONAL shell: add cl-shell to body only for a full-screen task app. */
body.cl-shell{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--canvas);-webkit-text-size-adjust:100%}
.cl-shell .cl-app{flex:1;min-height:0;display:flex;flex-direction:column}
.cl-shell .cl-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(96px + env(safe-area-inset-bottom,0px))}
.cl-dock{position:fixed;z-index:100;left:50%;transform:translateX(-50%);bottom:var(--dock-gap);width:calc(100% - 24px);max-width:460px;min-height:var(--dock-h);border-radius:var(--radius-pill);display:flex;gap:4px;padding:6px}
.cl-dock button{flex:1;min-width:0;min-height:48px;background:transparent;color:var(--text-2);border:0;border-radius:var(--radius-pill);font-size:12px;cursor:pointer}
.cl-dock button[aria-current="page"]{background:var(--lg-lens);box-shadow:var(--lg-lens-edge);color:var(--accent)}
.cl-thread{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cl-thread-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.cl-thread-composer{flex-shrink:0;padding:6px 12px calc(90px + env(safe-area-inset-bottom,0px))}
.cl-shell .cl-main:has(.cl-thread){display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top,0px) 0 0}
@media(max-width:767px){
 .cl-page-head{align-items:flex-start;flex-wrap:wrap}
 .cl-sheet{padding:20px;margin:8px;width:calc(100% - 16px)}
 .cl-theme:has(.cl-thread-composer textarea:focus) .cl-dock{visibility:hidden;pointer-events:none}
 .cl-thread:has(.cl-thread-composer textarea:focus) .cl-thread-composer{padding-bottom:10px}
}
@media(min-width:768px){
 .cl-shell .cl-main{padding:28px 32px 32px calc(var(--sidebar-w) + 32px)}
 .cl-dock{left:0;top:0;bottom:0;transform:none;width:var(--sidebar-w);max-width:none;border-radius:0;flex-direction:column;justify-content:flex-start;padding:24px 12px}
 .cl-dock button{flex:0 0 auto;text-align:left;padding:12px 16px;font-size:14px;border-radius:var(--radius)}
 .cl-shell .cl-main:has(.cl-thread){padding:0 0 0 var(--sidebar-w)}
 .cl-thread-composer{padding:12px 20px 20px}
}
@media(prefers-reduced-transparency:reduce){.cl-theme .cl-glass,.cl-theme .cl-sheet{background:var(--bg-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cl-theme .cl-glass,.cl-theme .cl-sheet{background:var(--bg-solid)}}
@media(prefers-reduced-motion:reduce){.cl-theme *,.cl-theme *::before,.cl-theme *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}