/* Karofi Workspace — premium light layer (15/10/2026)
   Live on Omni Centre and Project (approved 15/10/2026). Everything is scoped to html.kp, so pages without the class are untouched.
   Direction: Refined Light — floating rounded panes, more air, softer surfaces, one cyan accent, calm motion.
   Brand: Karofi cyan #00AEEF, navy #061746, royal #2766C4 (docs/brand/README.md). Cool greys only. */

html.kp{
  --kp-canvas:#EEF3F8;
  --kp-card:#FFFFFF;
  --kp-soft:#F5F8FB;
  --kp-line:rgb(6 23 70 / .07);
  --kp-ink:#061746;
  --kp-text:#24344D;
  --kp-muted:#6B7C93;
  --kp-accent:#00AEEF;
  --kp-accent-deep:#0089C7;
  --kp-water:linear-gradient(135deg,#21BDF3 0%,#0090CF 100%);
  --kp-r-xl:24px; --kp-r-lg:18px; --kp-r-md:14px; --kp-r-sm:10px;
  --kp-shadow:0 1px 2px rgb(6 23 70 / .04),0 10px 30px -14px rgb(6 23 70 / .16);
  --kp-shadow-hi:0 2px 4px rgb(6 23 70 / .05),0 18px 40px -16px rgb(6 23 70 / .26);
  --kp-ring:0 0 0 1px rgb(0 174 239 / .35),0 10px 26px -14px rgb(0 137 199 / .55);
  --kp-ease:cubic-bezier(.22,.8,.24,1);
}
html.kp[data-theme="dark"]{
  --kp-canvas:#0A1016; --kp-card:#111A23; --kp-soft:#16212C; --kp-line:rgb(255 255 255 / .07);
  --kp-ink:#E8F1F8; --kp-text:#C9D6E2; --kp-muted:#8597A8;
  --kp-shadow:0 1px 0 rgb(255 255 255 / .03) inset,0 12px 30px -14px rgb(0 0 0 / .6);
  --kp-shadow-hi:0 1px 0 rgb(255 255 255 / .04) inset,0 20px 44px -16px rgb(0 0 0 / .7);
}

/* ---------- Canvas: a quiet cool backdrop with one soft cyan light ---------- */
html.kp, html.kp body{background:var(--kp-canvas)!important}
html.kp [data-scroot]{background:
  radial-gradient(1100px 520px at 85% -10%,rgb(0 174 239 / .10),transparent 60%),
  radial-gradient(900px 480px at -10% 110%,rgb(39 102 196 / .07),transparent 60%),
  var(--kp-canvas)!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.005em}
/* Omni Centre desktop (html.kp-chat): zoom .86 instead of .8 for more air; the page sizes itself with 125vh (= 100vh at .8), so re-solve it for .86 */
@media (min-width:761px){
  html.kp.kp-chat{zoom:.86}
  html.kp.kp-chat [style*="height: 125vh"]{height:116.3vh!important}
}

/* ---------- Sidebar: deep navy, soft light, pill navigation ---------- */
html.kp [data-scside]{background:
  radial-gradient(140% 60% at 0% 0%,rgb(0 174 239 / .22),transparent 55%),
  linear-gradient(180deg,#071A4E 0%,#061746 55%,#050F33 100%)!important;
  border-right:0!important;box-shadow:12px 0 40px -28px rgb(6 23 70 / .6);position:relative;z-index:5}
html.kp [data-scside] nav{gap:4px!important;padding-left:14px!important;padding-right:14px!important}
html.kp [data-kp-nav]{position:relative;height:44px;border-radius:14px!important;padding-left:14px!important;font-size:14.5px!important;letter-spacing:.01em;
  transition:background-color .2s var(--kp-ease),color .2s var(--kp-ease),transform .2s var(--kp-ease)!important}
html.kp [data-kp-nav]:hover{background:rgb(255 255 255 / .06)!important;color:#fff!important;transform:translateX(2px)}
html.kp [data-kp-nav][data-on="1"]{background:linear-gradient(135deg,rgb(0 174 239 / .26),rgb(0 174 239 / .10))!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgb(120 215 255 / .22),0 10px 24px -14px rgb(0 174 239 / .9)}
html.kp [data-kp-nav][data-on="1"]::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;border-radius:0 4px 4px 0;background:#3FCBFF;box-shadow:0 0 12px #00AEEF}

/* ---------- Top bar: airy glass, larger title, pill filters ---------- */
html.kp [data-schdr]{background:rgb(255 255 255 / .62)!important;border-bottom:0!important;padding-top:16px!important;padding-bottom:16px!important;
  box-shadow:0 1px 0 var(--kp-line);backdrop-filter:saturate(1.8) blur(18px)!important;-webkit-backdrop-filter:saturate(1.8) blur(18px)!important}
html.kp[data-theme="dark"] [data-schdr]{background:rgb(17 26 35 / .72)!important}
html.kp [data-schdr] [role="heading"]{font-size:22px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--kp-ink)!important}
html.kp [data-hdrf]{border-left:0!important;gap:8px!important}
html.kp [data-hdrf] > div:first-child{height:38px!important;border:0!important;border-radius:999px!important;background:var(--kp-soft)!important;padding:0 16px!important;
  box-shadow:inset 0 0 0 1px var(--kp-line);transition:box-shadow .2s var(--kp-ease),background-color .2s}
html.kp [data-hdrf] > div:first-child:focus-within{background:var(--kp-card)!important;box-shadow:0 0 0 4px rgb(0 174 239 / .14),inset 0 0 0 1px rgb(0 174 239 / .5)}
html.kp [data-hdrf] select{height:38px!important;border:0!important;border-radius:999px!important;padding:0 6px 0 12px!important;background-color:var(--kp-soft)!important;
  box-shadow:inset 0 0 0 1px var(--kp-line);font-weight:600!important;color:var(--kp-text)!important;cursor:pointer}
html.kp [data-hdrf] select:hover{background-color:var(--kp-card)!important;box-shadow:inset 0 0 0 1px rgb(0 174 239 / .35)}

/* ---------- Inbox: three floating panes ---------- */
html.kp [data-kp-inbox]{gap:16px;padding:16px 18px 18px}
html.kp [data-kp-inbox] > [data-pane], html.kp [data-kp-inbox] > .sc-host-x > [data-pane]{border-radius:var(--kp-r-xl)!important;border:0!important;
  box-shadow:var(--kp-shadow);overflow:hidden;background:var(--kp-card)!important;animation:kp-rise .5s var(--kp-ease) both}
html.kp [data-pane="conv"]{animation-delay:.05s!important}
html.kp [data-pane="info"]{animation-delay:.1s!important;background:var(--kp-card)!important}

/* list: tabs as a segmented pill, rows as soft cards */
html.kp [data-kw-list] > div:first-child{border-bottom:0!important;margin:14px 14px 4px;padding:4px!important;gap:4px!important;background:var(--kp-soft);border-radius:999px}
html.kp [data-kw-list] > div:first-child > button{flex:1!important;border:0!important;border-radius:999px!important;padding:8px 10px!important;margin:0!important;transition:background-color .2s,box-shadow .2s,color .2s}
html.kp [data-kw-list] > div:first-child > button[style*="--c-00AEEF"]{background:var(--kp-card)!important;box-shadow:0 1px 2px rgb(6 23 70 / .08),0 6px 14px -8px rgb(6 23 70 / .25);color:var(--kp-ink)!important}
html.kp [data-kw-list] [style*="position: sticky"]{background:rgb(255 255 255 / .9)!important;backdrop-filter:blur(8px);border-bottom:0!important;padding:12px 20px 6px!important;font-size:11.5px!important;letter-spacing:.14em!important}
html.kp [data-kw-crow]{margin:4px 10px;padding:12px 14px!important;border-radius:var(--kp-r-lg)!important;border-bottom:0!important;box-shadow:none!important;background:transparent!important;gap:12px!important;
  transition:background-color .22s var(--kp-ease),box-shadow .25s var(--kp-ease),transform .22s var(--kp-ease)!important}
html.kp [data-kw-crow]::before{display:none}
html.kp [data-kw-crow]:hover{background:var(--kp-soft)!important;transform:translateY(-1px)}
html.kp [data-kw-crow][data-st="sel"]{background:var(--kp-card)!important;box-shadow:var(--kp-ring)!important}
html.kp [data-kw-crow][data-st="unread"]{background:linear-gradient(135deg,rgb(0 174 239 / .10),rgb(0 174 239 / .03))!important}
html.kp [data-kw-crow][data-st="await"]{background:linear-gradient(135deg,rgb(245 165 36 / .10),rgb(245 165 36 / .02))!important}
html.kp [data-kw-crow][data-st="await"]::after{content:"";position:absolute;left:6px;top:18px;width:6px;height:6px;border-radius:99px;background:#F5A524;box-shadow:0 0 0 3px rgb(245 165 36 / .18)}
html.kp [data-kw-crow] > span:first-child{width:44px!important;height:44px!important;border-radius:15px!important;font-size:14px!important;font-weight:700!important;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6),0 6px 14px -8px rgb(6 23 70 / .35)}
html.kp [data-kw-crow] [data-kw-tag]{border:0!important;padding:2px 9px!important;font-weight:600!important}

/* conversation */
html.kp [data-kw-conv]{background:var(--kp-card)!important}
html.kp [data-convh]{padding:16px 22px!important;border-bottom:0!important;box-shadow:0 1px 0 var(--kp-line);background:rgb(255 255 255 / .8)!important}
html.kp[data-theme="dark"] [data-convh]{background:rgb(17 26 35 / .8)!important}
html.kp [data-convname]{font-size:18px!important;font-weight:800!important;letter-spacing:-.01em;color:var(--kp-ink)!important}
html.kp [data-kw-thread]{padding:24px 30px!important;background:
  radial-gradient(800px 360px at 100% 0%,rgb(0 174 239 / .06),transparent 60%),var(--kp-soft)!important}
html.kp [data-kw-bin]{border:0!important;border-radius:6px 20px 20px 20px!important;padding:12px 16px!important;box-shadow:0 1px 2px rgb(6 23 70 / .05),0 10px 24px -14px rgb(6 23 70 / .25)!important}
html.kp [data-kw-bout]{border-radius:20px 6px 20px 20px!important;padding:12px 16px!important;background:var(--kp-water)!important;box-shadow:0 14px 28px -14px rgb(0 137 199 / .8)!important}
html.kp [data-kw-composer]{border-radius:var(--kp-r-lg)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--kp-line),0 10px 30px -18px rgb(6 23 70 / .3)!important}
html.kp [data-kw-composer]:focus-within{box-shadow:0 0 0 4px rgb(0 174 239 / .14),inset 0 0 0 1px rgb(0 174 239 / .5),0 16px 34px -18px rgb(0 137 199 / .55)!important}

/* info pane: grouped cards with room */
html.kp [data-pane="info"] > div{border-bottom:0!important}
html.kp [data-pane="info"] > div[style*="border-radius"]{border-radius:var(--kp-r-lg)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--kp-line)}

/* ---------- Shared controls ---------- */
html.kp button{border-radius:12px}
html.kp [data-kw-crow] [data-kw-tag], html.kp [data-kw-crow] span[style*="999px"]{border-radius:999px!important}
html.kp .sc-host-x button[class], html.kp [data-pane] button[style*="background: var(--c-00A7E2"], html.kp [data-pane] button[style*="background: var(--c-00AEEF"]{transition:transform .2s var(--kp-ease),box-shadow .25s var(--kp-ease)!important}
html.kp [data-pane] button:hover:not(:disabled){transform:translateY(-1px)}
html.kp [data-pane] button[style*="border: 1px solid var(--c-E4ECF3"]{border-color:transparent!important;background:var(--kp-soft)!important;box-shadow:inset 0 0 0 1px var(--kp-line)}
html.kp [data-pane] button[style*="border: 1px solid var(--c-E4ECF3"]:hover{background:var(--kp-card)!important;box-shadow:inset 0 0 0 1px rgb(0 174 239 / .4),0 8px 18px -12px rgb(0 137 199 / .6)}

/* Settings / dashboard cards: one radius, softer edges */
html.kp main [style*="border-radius: 14px"], html.kp main [style*="border-radius: 16px"]{border-radius:var(--kp-r-xl)!important;border-color:transparent!important;box-shadow:var(--kp-shadow)!important}
html.kp main{animation:kp-rise .45s var(--kp-ease) both}

/* ---------- Shared DS tokens: rounder corners everywhere the design system is used ---------- */
html.kp{--radius-md:12px;--radius-lg:16px;--radius-card:22px;--radius-button:12px;--radius-input:12px}

/* ---------- Project ---------- */
html.kp [data-kw-root]{background:
  radial-gradient(1100px 520px at 85% -10%,rgb(0 174 239 / .09),transparent 60%),
  radial-gradient(900px 480px at -10% 110%,rgb(39 102 196 / .06),transparent 60%),var(--kp-canvas)!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.kp [data-kw-main]{background:transparent!important}
/* Project sidebar: same deep navy as Omni Centre and Cockpit (15 Oct 2026). Light DS tokens are re-pointed inside the rail. */
html.kp [data-kw-side]{background:
  radial-gradient(140% 60% at 0% 0%,rgb(0 174 239 / .22),transparent 55%),
  linear-gradient(180deg,#071A4E 0%,#061746 55%,#050F33 100%)!important;
  border-right:0!important;box-shadow:12px 0 40px -28px rgb(6 23 70 / .6);
  --text-heading:#FFFFFF;--text-body:#C9D6E6;--text-muted:#8FA3BC;--text-subtle:#7089A0;--text-brand:#3FCBFF;
  --surface-card:rgb(255 255 255 / .05);--surface-subtle:transparent;--surface-sunken:rgb(255 255 255 / .06);
  --surface-brand-soft:rgb(0 174 239 / .18);--border-subtle:rgb(255 255 255 / .08);--border-default:rgb(255 255 255 / .12);
  --k-grey-200:rgb(255 255 255 / .10);--k-cyan-700:#7FDBFF;--k-cyan-800:#06263A;--k-cyan-100:#BDEBFC;color:#C9D6E6}
html.kp[data-theme="dark"] [data-kw-side]{background:
  radial-gradient(140% 60% at 0% 0%,rgb(0 174 239 / .16),transparent 55%),linear-gradient(180deg,#0B1726 0%,#081220 100%)!important}
html.kp [data-kw-side] a[href]:hover{border-color:rgb(255 255 255 / .2)!important;background:rgb(255 255 255 / .09)!important}
html.kp [data-kw-nav]{position:relative;height:42px!important;border-radius:14px!important;padding:0 12px!important;color:#C9D6E6!important;background:transparent!important;
  transition:background-color .2s var(--kp-ease),color .2s var(--kp-ease),transform .2s var(--kp-ease)!important}
html.kp [data-kw-nav]:hover{background:rgb(255 255 255 / .06)!important;color:#fff!important;transform:translateX(2px)}
html.kp [data-kw-nav][data-on="1"]{background:linear-gradient(135deg,rgb(0 174 239 / .26),rgb(0 174 239 / .10))!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgb(120 215 255 / .22),0 10px 24px -14px rgb(0 174 239 / .9)!important}
html.kp [data-kw-nav][data-on="1"]::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:3px;border-radius:0 4px 4px 0;background:#3FCBFF;box-shadow:0 0 12px #00AEEF}
html.kp [data-kw-sbrow]:hover{background:rgb(255 255 255 / .06)!important}
html.kp [data-kw-sbrow]{border-radius:12px!important;transition:background-color .2s var(--kp-ease),transform .2s var(--kp-ease)}
html.kp [data-kw-sbrow]:hover{transform:translateX(2px)}
html.kp [data-pjhdr]{background:rgb(255 255 255 / .6)!important;border-bottom:0!important;box-shadow:0 1px 0 var(--kp-line)}
html.kp[data-theme="dark"] [data-pjhdr]{background:rgb(17 26 35 / .7)!important}
html.kp [data-pjhdr] h1{font-size:28px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--kp-ink)!important}
html.kp [data-pjtb]{background:transparent!important;border-bottom:0!important;padding-top:16px!important;padding-bottom:6px!important;gap:10px!important}
html.kp [data-pjtb] input, html.kp [data-pjtb] select, html.kp [data-pjtb] button{border-radius:999px!important}
html.kp [data-pjtb] > *{border-radius:999px}
html.kp [data-kw-card]{border:0!important;border-radius:var(--kp-r-xl)!important;box-shadow:var(--kp-shadow)!important;background:var(--kp-card)}
html.kp [data-kw-card] > div[style*="height: 32px"]{border-top:0!important;background:var(--kp-soft)!important}
html.kp [data-kw-row]{min-height:56px!important;border-top-color:var(--kp-line)!important;transition:background-color .2s var(--kp-ease)!important}
html.kp [data-kw-row]:hover{background:var(--kp-soft)!important}
html.kp [data-kw-kcard]{border:0!important;border-radius:var(--kp-r-lg)!important;padding:16px!important;box-shadow:0 1px 2px rgb(6 23 70 / .05),0 8px 22px -14px rgb(6 23 70 / .28)!important;
  transition:transform .22s var(--kp-ease),box-shadow .25s var(--kp-ease)!important}
html.kp [data-kw-kcard]:hover{transform:translateY(-2px);box-shadow:var(--kp-shadow-hi)!important}
html.kp [data-kw-bhead]{padding-top:16px!important}
html.kp [data-kw-bhead] + *, html.kp [data-kw-bhead]{border-radius:0}
html.kp [data-kw-kpi]{border:0!important;border-radius:var(--kp-r-xl)!important;box-shadow:var(--kp-shadow)!important;padding:20px 22px!important}
html.kp [data-kw-kpi] > span:nth-child(2){font-weight:800!important;letter-spacing:-.02em}
html.kp [data-kw-mgrid] > *{border-radius:var(--kp-r-xl)!important}
html.kp [data-kw-stagger] > *, html.kp [data-kw-kcard]{animation:kp-rise .42s var(--kp-ease) both}

/* ---------- Dark mode fixes ---------- */
html.kp[data-theme="dark"] [data-kw-list] [style*="position: sticky"]{background:rgb(17 26 35 / .92)!important}
html.kp[data-theme="dark"] [data-kw-kcard]{background:#1A2632!important;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06),0 10px 24px -14px rgb(0 0 0 / .8)!important}
html.kp[data-theme="dark"] [data-kw-kcard]:hover{background:#1E2C39!important}
html.kp[data-theme="dark"] [data-kw-crow][data-st="sel"]{background:#16222E!important}
html.kp[data-theme="dark"] [data-kw-crow] > span:first-child{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08)}
html.kp[data-theme="dark"] [data-kw-bin]{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06)!important}

/* ---------- Motion ---------- */
@keyframes kp-rise{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
html.kp [data-kw-crow]{animation:kp-rise .4s var(--kp-ease) both}
html.kp [data-kw-crow]:nth-of-type(2){animation-delay:.02s}
html.kp [data-kw-crow]:nth-of-type(3){animation-delay:.04s}
html.kp [data-kw-crow]:nth-of-type(4){animation-delay:.06s}
html.kp [data-kw-crow]:nth-of-type(5){animation-delay:.08s}
html.kp [data-kw-crow]:nth-of-type(n+6){animation-delay:.1s}
@media (prefers-reduced-motion:reduce){ html.kp *{animation:none!important;transition:none!important} }

/* ---------- Phone: panes go edge to edge again, keep the softer rows ---------- */
@media (max-width:760px){
  html.kp [data-kp-inbox]{gap:0;padding:0}
  html.kp [data-kp-inbox] > [data-pane], html.kp [data-kp-inbox] > .sc-host-x > [data-pane]{border-radius:0!important;box-shadow:none}
  html.kp [data-schdr]{padding-top:10px!important;padding-bottom:10px!important}
  html.kp [data-schdr] [role="heading"]{font-size:19px!important}
  html.kp [data-kw-crow]{margin:3px 8px}
  html.kp [data-kw-thread]{padding:16px 14px!important}
}