/* =============================================================================
   Global tokens + shell. Board-specific styles live with their components
   but use these CSS variables.
   ============================================================================= */
:root{
  --blue:#0073ea;
  --blue-hover:#0060b9;
  --ink:#323338;
  --ink-soft:#676879;
  --ink-mute:#9699a6;
  --line:#e6e9ef;
  --line-soft:#f0f1f4;
  --bg:#ffffff;
  --canvas:#f6f7fb;
  --hover:#f5f6f8;
  --sidebar:#f6f7fb;
  --sidebar-active:#dceaff;
  --radius:8px;
  --rail-active:#0073ea;
}

*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{
  /* Arabic / Kurdish in Noto Kufi Arabic, Latin in the platform's own UI face
     (SF Pro on macOS, Segoe UI on Windows) to match the macOS skin.
     'Noto Kufi Arabic Subset' is declared in mac.css: the same webfont
     restricted by unicode-range to the Arabic block. It has to lead, because
     the system faces cover Arabic themselves and would otherwise win — and it
     has to be the RESTRICTED alias rather than the family Google serves,
     because that one carries a latin subset and would take the whole console
     with it. The plain 'Noto Kufi Arabic' at the end is the backstop for when
     mac.css has not loaded. Everything else in this sheet uses
     font-family:inherit, so it follows automatically. */
  font-family:'Alyamama Arabic','Noto Kufi Arabic Subset',
              -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
              'Segoe UI Variable Text','Segoe UI',system-ui,Roboto,
              'Noto Kufi Arabic',sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
button{font-family:inherit;color:inherit}
input,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}

/* ── SHELL ──────────────────────────────────────────────────────────────── */
.app{
  display:grid;
  grid-template-rows:48px 1fr;
  grid-template-columns:var(--sidebar-width, 230px) 1fr;
  grid-template-areas:
    "top top"
    "side main";
  height:100vh;
  background:#fff;
  transition:grid-template-columns .25s cubic-bezier(0.4,0,0.2,1);
}
.app--side-full{
  --sidebar-width:230px;
}
.app--side-mini{
  --sidebar-width:64px;
}
.app--side-collapsed{
  --sidebar-width:0px;
}
.app--ai{
  grid-template-columns:var(--sidebar-width, 230px) 1fr 380px;
  grid-template-areas:
    "top top top"
    "side main ai";
}
.app__top{grid-area:top}
.app__side{
  grid-area:side;
  position:relative;
  z-index:95;
  transition:width .25s cubic-bezier(0.4,0,0.2,1);
}
.app__side > .side{
  width:100%; height:100%;
  transition:width .25s cubic-bezier(0.4,0,0.2,1), transform .25s cubic-bezier(0.4,0,0.2,1), box-shadow .25s ease, opacity .2s ease;
}

/* Mode 2: Mini Icon Rail + Hover-to-expand */
.app--side-mini .app__side{
  width:64px;
  overflow:visible;
}
.app--side-mini .app__side > .side{
  width:64px;
  min-width:64px;
  position:absolute;
  top:0; bottom:0; left:0;
  background:var(--sidebar,#fff);
  border-right:1px solid var(--line,#e2e8f0);
  box-shadow:none;
  overflow-x:hidden;
  overflow-y:auto;
  z-index:100;
  padding:10px 6px 24px;
}
.app--side-mini .app__side > .side .side__item{
  width:44px;
  min-height:38px;
  margin:3px auto;
  padding:0;
  justify-content:center;
  border-radius:9px;
  transition:all .2s cubic-bezier(0.4,0,0.2,1);
}
.app--side-mini .app__side > .side .side__item svg{
  margin:0;
  width:18px;
  height:18px;
}
.app--side-mini .app__side > .side .side__item span{
  opacity:0;
  width:0;
  max-width:0;
  overflow:hidden;
  transform:translateX(-8px);
  white-space:nowrap;
  transition:opacity .15s ease, transform .15s ease, width .15s ease;
}
.app--side-mini .app__side > .side .side__label{
  opacity:0;
  height:6px;
  padding:0;
  margin:0;
  overflow:hidden;
  transition:opacity .15s ease, height .15s ease;
}

/* Hover over Icon Rail -> smoothly expands out! */
.app--side-mini .app__side:hover > .side,
.app--side-mini .app__side:focus-within > .side{
  width:230px;
  padding:10px 10px 24px;
  box-shadow:10px 0 32px rgba(15,23,42,.12), 2px 0 8px rgba(15,23,42,.04);
}
.app--side-mini .app__side:hover > .side .side__item,
.app--side-mini .app__side:focus-within > .side .side__item{
  width:100%;
  padding:0 10px;
  justify-content:flex-start;
}
.app--side-mini .app__side:hover > .side .side__item span,
.app--side-mini .app__side:focus-within > .side .side__item span{
  opacity:1;
  width:auto;
  max-width:180px;
  transform:translateX(0);
  transition:opacity .2s .05s ease, transform .2s .05s ease;
}
.app--side-mini .app__side:hover > .side .side__label,
.app--side-mini .app__side:focus-within > .side .side__label{
  opacity:1;
  height:auto;
  padding:8px 10px 4px;
  transition:opacity .2s .05s ease;
}

/* Mode 3: Fully Collapsed */
.app--side-collapsed .app__side{
  width:0;
  overflow:hidden;
  border-right:none;
}
.app--side-collapsed .app__side > .side{
  transform:translateX(-100%);
  opacity:0;
}

/* Collapse toggle handle — floats on the seam between sidebar and main */
.side-toggle{
  position:fixed;top:62px;z-index:105;
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:1px solid var(--line,#e2e8f0);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  color:var(--ink-soft,#64748b);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition:left .25s cubic-bezier(0.4,0,0.2,1), background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  left:218px;
}
.side-toggle.is-full{left:218px}
.side-toggle.is-mini{left:51px}
.side-toggle.is-collapsed{left:8px}
.side-toggle.is-collapsed svg{transform:rotate(180deg)}
.side-toggle:hover{
  color:var(--blue,#0073ea);
  background:#fff;
  border-color:var(--blue,#0073ea);
  box-shadow:0 4px 12px rgba(0,115,234,.18);
  transform:scale(1.06);
}
.side-toggle svg{
  width:14px;height:14px;
  display:block;
  margin:auto;
  transition:transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.app__main{grid-area:main; overflow:auto; background:#fff}
.app__ai{grid-area:ai; border-left:1px solid var(--line); background:#fff; overflow:hidden; display:flex; flex-direction:column}

/* ── TOP BAR ────────────────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  background:#fff;
  border-bottom:1px solid var(--line);
  height:48px;
}
.top__left{display:flex;align-items:center;gap:18px}
.top__brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.top__brand-mark{
  width:30px;height:18px;display:inline-grid;grid-template-columns:repeat(3,1fr);gap:2px;
}
.top__brand-mark span{border-radius:50%}
.top__brand-mark span:nth-child(1){background:#fb275d}
.top__brand-mark span:nth-child(2){background:#ffcb00}
.top__brand-mark span:nth-child(3){background:#00c875}
.top__brand small{font-weight:500;font-size:13px;color:var(--ink-soft);margin-left:2px}
.top__seeplans{
  display:flex;align-items:center;gap:6px;
  background:#dde5ff;color:#1f3eb0;font-weight:600;
  border:none;border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;
}
.top__right{display:flex;align-items:center;gap:6px;color:var(--ink-soft)}
.top__iconbtn{
  width:32px;height:32px;display:grid;place-items:center;
  border:none;background:none;border-radius:6px;cursor:pointer;color:var(--ink-soft);
}
.top__iconbtn:hover{background:var(--hover)}
.top__avatar{
  width:30px;height:30px;border-radius:50%;
  background:url('data:image/svg+xml;utf8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 60 60%22%3E%3Crect width%3D%2260%22 height%3D%2260%22 rx%3D%2230%22 fill%3D%22%23ff8a7a%22/%3E%3Ccircle cx%3D%2230%22 cy%3D%2224%22 r%3D%2210%22 fill%3D%22%23fff%22/%3E%3Cpath d%3D%22M10 56 a20 20 0 0 1 40 0 z%22 fill%3D%22%23fff%22/%3E%3C/svg%3E') center/cover, linear-gradient(135deg,#ffb199,#ff6b6b);
  border:1px solid #fff;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.side{
  background:var(--sidebar);
  border-right:1px solid var(--line);
  padding:10px 8px 24px;
  font-size:14px;
  user-select:none;
}
.side__item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink);
  white-space:nowrap;
}
.side__item span{flex:1;overflow:hidden;text-overflow:ellipsis}
.side__item:hover{background:#ecedf2}
.side__item.is-active{background:#dceaff}
.side__item svg{color:var(--ink-soft);flex-shrink:0}
.side__sep{height:14px}
.side__label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink-soft);font-weight:600;
  padding:8px 10px 4px;
}
.side__label-actions{display:flex;gap:4px;align-items:center;color:var(--ink-soft)}
.side__label-actions svg{cursor:pointer}
.side__workspace{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:6px;
  background:#fff;border:1px solid var(--line);
  margin:0 2px 8px;
  font-weight:500;
}
.side__workspace-avatar{
  width:22px;height:22px;border-radius:5px;
  background:linear-gradient(135deg,#ff7eb6,#ffb066);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;position:relative;
}
.side__workspace-avatar::after{
  content:"";position:absolute;right:-2px;bottom:-2px;
  width:8px;height:8px;border-radius:50%;background:#fb275d;border:1.5px solid #fff;
}
.side__workspace-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.side__add{
  width:30px;height:30px;display:grid;place-items:center;
  border:none;border-radius:6px;background:var(--blue);color:#fff;cursor:pointer;
}
.side__row{display:flex;align-items:center;gap:6px}
.side__row .side__workspace{flex:1;margin:0}
.side__group{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;cursor:pointer;color:var(--ink);font-weight:500;
}
.side__group svg.chev{transition:transform .15s}
.side__group.is-collapsed svg.chev{transform:rotate(-90deg)}
.side__sub{margin-left:6px;display:flex;flex-direction:column;gap:1px}
.side__sub .side__item{padding-left:24px;font-size:13.5px}

/* ── BOARD CHROME (header, tabs, toolbar) ───────────────────────────────── */
.board{
  padding:14px 24px 60px;
  background:#fff;
  min-height:100%;
}
.bh{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:4px;
  gap:14px;
}
.bh__actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.bh__title{
  display:flex;align-items:center;gap:6px;
  font-size:22px;font-weight:700;margin:0;
  white-space:nowrap;
}
.bh__title svg{color:var(--ink-soft)}
.bh__star{color:#ffcb00;margin-left:2px}
.bh__actions{display:flex;align-items:center;gap:6px}
.bh__act{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  color:var(--ink-soft);font-size:14px;padding:6px 10px;border-radius:6px;
  white-space:nowrap;
}
.bh__act:hover{background:var(--hover)}
.bh__act--more{
  width:32px;height:32px;padding:0;display:grid;place-items:center;
  border-radius:50%;color:var(--ink-soft);
}
.bh__act--more:hover{background:#eef0f4;color:var(--ink)}
.bh__act--ai{color:var(--ink-soft)}
.bh__act--ai .pill{
  background:#e9f1ff;color:#3258d7;font-weight:600;font-size:11px;
  padding:1px 6px;border-radius:4px;border:1px solid #c8d8f5;
}
.bh__avatar{
  width:30px;height:30px;border-radius:50%;background:#ddd;
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 60 60%22%3E%3Crect width%3D%2260%22 height%3D%2260%22 rx%3D%2230%22 fill%3D%22%23ff8a7a%22/%3E%3Ccircle cx%3D%2230%22 cy%3D%2224%22 r%3D%2210%22 fill%3D%22%23fff%22/%3E%3Cpath d%3D%22M10 56 a20 20 0 0 1 40 0 z%22 fill%3D%22%23fff%22/%3E%3C/svg%3E');background-size:cover;
  margin:0 12px;
  flex-shrink:0;
}
.bh__invite{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:5px 12px;font-size:13.5px;font-weight:500;cursor:pointer;
}

.tabs{
  display:flex;align-items:center;gap:2px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
  padding-top:6px;
}
.tab{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--ink-soft);
  padding:8px 14px 10px;font-size:14px;font-weight:500;cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.tab.is-active{color:var(--blue);border-bottom-color:var(--blue)}
.tab:hover{color:var(--ink)}
.tab.is-active:hover{color:var(--blue)}
.tab--plus{color:var(--ink-soft);padding:8px 10px 10px;font-size:16px;line-height:1}

.toolbar{display:flex;align-items:center;gap:4px;margin:8px 0 14px}
.new-btn{
  position:relative;
  display:flex;align-items:center;
  background:var(--blue);color:#fff;font-weight:500;font-size:14px;
  border-radius:6px;cursor:pointer;overflow:visible;
  flex-shrink:0;
}
.new-btn__caret{cursor:pointer;position:relative}
.new-btn__caret:hover{background:rgba(255,255,255,.12)}
.new-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:50;
  background:#fff;color:var(--ink);border-radius:8px;padding:6px;
  min-width:240px;box-shadow:0 14px 36px rgba(0,0,0,.18);
  transform-origin:top left;
  animation:menuPop .16s cubic-bezier(.34,1.4,.6,1) both;
}
@keyframes menuPop{
  from{opacity:0;transform:scale(.9) translateY(-6px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
.new-menu__item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;font:inherit;font-size:14px;color:var(--ink);
  padding:9px 10px;border-radius:6px;cursor:pointer;text-align:left;
}
.new-menu__item:hover{background:var(--hover)}
.new-menu__icon{display:grid;place-items:center;color:var(--ink-soft);flex-shrink:0}
.new-btn__main{padding:7px 14px;white-space:nowrap}
.new-btn__caret{display:grid;place-items:center;padding:7px 8px;border-left:1px solid rgba(255,255,255,.25)}
.new-btn:hover{background:var(--blue-hover)}
.tbtn{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--ink-soft);
  padding:7px 10px;border-radius:6px;font-size:14px;cursor:pointer;
  white-space:nowrap;
}
.tbtn:hover{background:var(--hover)}
.tbtn--icon{padding:7px}
.toolbar__spacer{flex:1}
.toolbar__collapse{margin-left:auto;color:var(--ink-soft)}

/* ── TABLE (CSS grid; group templates set --grid on the table) ──────────── */
.group{margin:8px 0 22px}
.group__head{
  display:flex;align-items:center;gap:4px;
  font-weight:700;font-size:16px;margin:0 0 4px;
  cursor:pointer;
}
.group__head svg{flex-shrink:0}
.tbl{
  border:1px solid var(--line);
  border-left:6px solid var(--rail,#0073ea);
  border-radius:6px 6px 6px 6px;
  overflow:visible;
  width:max-content;
  min-width:calc(100% - 6px);
  background:#fff;
  /* Parent grid owns the column widths so every row's cells line up like
     Excel. Rows use `grid-template-columns: subgrid` to inherit them.  */
  display:grid;
  grid-template-columns:var(--grid);
}
.tbl__row{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  border-bottom:1px solid var(--line);
}
.tbl__row:last-child{border-bottom:none}
.tbl__row--head{background:#fff;color:var(--ink-soft);font-weight:500}
.tbl__row--head .tbl__cell{justify-content:center;font-size:14px;color:var(--ink-soft)}
.tbl__row--add .tbl__cell{color:var(--ink-soft);font-size:14px;justify-content:flex-start;padding-left:14px;cursor:pointer}
.tbl__row--add:hover .tbl__cell{color:var(--blue)}
.tbl__row--summary{background:#fff}
.tbl__row:not(.tbl__row--head):not(.tbl__row--summary):not(.tbl__row--add):hover{background:var(--hover)}

.tbl__cell{
  display:flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 8px;font-size:14px;
  border-right:1px solid var(--line);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.tbl__cell:last-child{border-right:none}
.tbl__cell--check{padding:0 6px;justify-content:center}
.tbl__cell--check input{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}
.tbl__cell--name{justify-content:flex-start;padding-left:14px;font-weight:400}
.tbl__cell--expand{color:var(--ink-soft);cursor:pointer}
.tbl__cell--expand:hover{color:var(--blue)}
.tbl__cell--num{font-variant-numeric:tabular-nums}
.tbl__cell--label{padding:0}
.tbl__cell--right{justify-content:flex-end;padding-right:14px}
.tbl__cell--left{justify-content:flex-start;padding-left:14px}

.label{
  width:100%;height:100%;min-height:36px;border:none;cursor:pointer;
  color:#fff;font-size:13px;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.label__corner{
  position:absolute;right:0;bottom:0;
  border-style:solid;border-width:0 0 7px 7px;
  border-color:transparent transparent rgba(255,255,255,.4) transparent;
}
.label--empty{background:#c4c4c4;cursor:pointer}
.label--empty:hover{background:#b6b6b6}

.pill-date{
  background:var(--blue);color:#fff;font-size:13px;
  padding:4px 12px;border-radius:14px;white-space:nowrap;
}

.flag{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;
}
.flag__img{width:22px;height:15px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

.avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#ffb199,#ff6b6b);
  border:1.5px solid #fff;
  background-size:cover;
}
.avatar--empty{
  background:#fff;color:#c5c7d0;border:1px dashed #c5c7d0;
  display:grid;place-items:center;
}
.add-icon{
  width:22px;height:22px;border-radius:50%;
  background:#dde5ee;color:#5a6477;
  display:grid;place-items:center;cursor:pointer;
}
.add-icon:hover{background:#cdd6e3}
.chat-icon{
  width:22px;height:22px;border-radius:50%;
  background:#ecedf2;color:#7d8294;
  display:grid;place-items:center;position:relative;cursor:pointer;
}
.chat-icon::after{
  content:"";position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  background:#fb275d;border:1.5px solid #fff;
}

.distro{display:flex;width:100%;height:20px;border-radius:3px;overflow:hidden;margin:8px 6px}
.distro span{display:block;height:100%}

.dash{
  background:var(--canvas);min-height:100%;padding:14px 24px 60px;
}
.dash__bar{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.dash__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;
  box-shadow:0 1px 1px rgba(0,0,0,.02);
}
.card__head{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:14px;gap:6px}
.card__head > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__head svg{color:var(--ink-soft)}
.card__big{font-size:60px;font-weight:600;letter-spacing:-.03em;line-height:1;padding:40px 6px}

/* ── Dropdown picker (status / priority) ─────────────────────────────────*/
.picker{
  position:absolute;top:100%;left:0;z-index:30;min-width:180px;
  background:#fff;border-radius:8px;padding:8px;
  box-shadow:0 10px 32px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:6px;
}
.picker__opt{
  border:none;border-radius:4px;color:#fff;cursor:pointer;
  font-size:13px;padding:8px;font-family:inherit;
}
.picker__opt--empty{
  background:#eceef3;color:var(--ink);
}

/* ── Banners + misc ──────────────────────────────────────────────────── */
.banner{
  background:var(--blue);color:#fff;
  text-align:center;font-size:14px;
  padding:8px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.fab{
  position:fixed;right:22px;bottom:20px;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  cursor:pointer;
}
.fab svg{color:#a358df}

/* progress tracking bar (Leads) */
.progress-bar{
  position:relative;width:100%;height:14px;
  border:1px solid #2bb672;border-radius:2px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ink-soft);
}
.progress-bar__fill{
  position:absolute;left:0;top:0;bottom:0;background:#2bb672;
}
.progress-bar__txt{position:relative;z-index:1}

/* ── AI SIDEKICK ───────────────────────────────────────────────────────── */
.ai{display:flex;flex-direction:column;height:100%;background:#fff;position:relative;overflow:hidden}

/* macOS Finder/genie-like appear/minimise animation.
   The panel scales from the bottom-right corner (where the FAB lives) and
   curves through a transform-origin near the FAB. Floating mode uses a
   slightly tighter origin since the panel sits right above the FAB.        */
.ai--sidebar{
  transform-origin:bottom right;
  animation:aiGenieIn .42s cubic-bezier(.34,1.4,.6,1) both;
}
.ai--floating{
  transform-origin:bottom right;
  animation:aiGenieIn .38s cubic-bezier(.34,1.4,.6,1) both;
}
@keyframes aiGenieIn{
  0%   { opacity:0; transform:scale(.05) translate(40%, 40%); filter:blur(8px); }
  60%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:scale(1) translate(0,0); filter:blur(0); }
}
/* Closing — applied via .is-closing class set just before unmount */
.ai.is-closing{
  animation:aiGenieOut .32s cubic-bezier(.55,.0,.7,.2) both;
}
@keyframes aiGenieOut{
  0%   { opacity:1; transform:scale(1) translate(0,0); }
  100% { opacity:0; transform:scale(.06) translate(45%, 45%); filter:blur(4px); }
}

/* FAB — pulse + scale-up when AI is being opened */
.fab{transition:transform .2s ease, box-shadow .25s ease}
.fab:hover{transform:scale(1.06)}
.fab.is-launching{transform:scale(.55);opacity:0;transition:transform .25s ease, opacity .25s ease}

/* Subtle animated glow — sits behind everything else (z-index:0).
   Made of two big blurred radial blobs that drift on a slow loop.        */
.ai__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.ai__glow::before,.ai__glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  animation:aiglow 14s ease-in-out infinite;
}
.ai__glow::before{
  width:340px;height:340px;left:-90px;top:-110px;
  background:radial-gradient(circle, rgba(163,88,223,.55), rgba(163,88,223,0) 70%);
}
.ai__glow::after{
  width:380px;height:380px;right:-110px;top:34%;
  background:radial-gradient(circle, rgba(0,179,255,.45), rgba(0,179,255,0) 70%);
  animation-delay:-7s;
}
@keyframes aiglow{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(20px,30px) scale(1.08)}
}
/* All children of .ai sit above the glow */
.ai > *:not(.ai__glow):not(.ai__resize){position:relative;z-index:1}

/* Floating mode — fixed pop-out window in bottom-right.
   Width/height come from inline style (resizable).                       */
.ai--floating{
  position:fixed;
  right:22px;bottom:22px;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.20);
  z-index:200;
}

/* RESIZE HANDLES */
.ai__resize{position:absolute;z-index:5}
.ai__resize--w{left:-3px;top:0;bottom:0;width:7px;cursor:ew-resize}
.ai--floating .ai__resize--n{left:8px;right:8px;top:-3px;height:6px;cursor:ns-resize}
.ai--floating .ai__resize--s{left:8px;right:8px;bottom:-3px;height:6px;cursor:ns-resize}
.ai--floating .ai__resize--e{right:-3px;top:8px;bottom:8px;width:6px;cursor:ew-resize}
.ai--floating .ai__resize--w2{left:-3px;top:8px;bottom:8px;width:6px;cursor:ew-resize}
.ai--floating .ai__resize--ne{right:-3px;top:-3px;width:14px;height:14px;cursor:nesw-resize}
.ai--floating .ai__resize--nw{left:-3px;top:-3px;width:14px;height:14px;cursor:nwse-resize}
.ai--floating .ai__resize--se{right:-3px;bottom:-3px;width:14px;height:14px;cursor:nwse-resize}
.ai--floating .ai__resize--sw{left:-3px;bottom:-3px;width:14px;height:14px;cursor:nesw-resize}

/* Title button + mode picker dropdown */
.ai__title-wrap{position:relative;display:inline-block}
.ai__title-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;font-family:inherit;font-weight:600;font-size:14.5px;
  cursor:pointer;color:var(--ink);padding:2px 4px;border-radius:6px;
}
.ai__title-btn:hover{background:var(--hover)}
.ai__menu{
  position:absolute;top:100%;left:0;margin-top:6px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px;
}
.ai__menu button{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;font-family:inherit;font-size:14px;color:var(--ink);
  padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left;
}
.ai__menu button svg{color:var(--ink-soft)}
.ai__menu button:hover{background:var(--hover)}
.ai__menu button.is-active{background:#e9f1ff;color:#0073ea}
.ai__menu button.is-active svg{color:#0073ea}
.ai__head{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--line);
}
.ai__title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px}
.ai__sparkle{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,#ffe5fc,#e7e3ff)}
.ai__ichbtn{
  width:30px;height:30px;display:grid;place-items:center;
  border:none;background:none;border-radius:6px;cursor:pointer;color:var(--ink-soft);
}
.ai__ichbtn:hover{background:var(--hover)}
.ai__body{
  flex:1;overflow-y:auto;padding:16px 14px 6px;
  display:flex;flex-direction:column;gap:14px;
}
.ai__empty{padding:40px 12px;text-align:center}
.ai__empty-orb{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#ffe5fc,#e7e3ff);
  display:grid;place-items:center;margin:0 auto 14px;
}
.ai__empty h3{margin:0 0 6px;font-size:18px}
.ai__empty p{color:var(--ink-soft);margin:0 0 16px;font-size:13.5px}
.ai__suggest{display:flex;flex-direction:column;gap:8px}
.ai__suggest button{
  text-align:left;font-family:inherit;font-size:13.5px;
  padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;color:var(--ink);
}
.ai__suggest button:hover{background:var(--hover)}

.ai__userwrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ai__context-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;font-size:12px;color:var(--ink-soft);
}
.ai__user{display:flex;align-items:flex-start;gap:8px;justify-content:flex-end;width:100%}
.ai__bubble{
  background:#f0f1f4;color:var(--ink);
  padding:10px 14px;border-radius:14px 14px 4px 14px;
  font-size:14px;max-width:calc(100% - 50px);white-space:pre-wrap;
}

.ai__assist{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ai__thinking-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#f7f5ff;color:#6e3fce;font-size:12.5px;font-weight:500;
  padding:5px 10px;border-radius:14px;
}
.ai__thinking-pill--live{background:#f7f5ff;color:#6e3fce}
.ai__dot{
  width:5px;height:5px;border-radius:50%;background:#a358df;display:inline-block;
  animation:aibounce 1.2s infinite ease-in-out;
}
.ai__dot:nth-child(2){animation-delay:.15s}
.ai__dot:nth-child(3){animation-delay:.3s}
@keyframes aibounce{0%,80%,100%{opacity:.3}40%{opacity:1}}
.ai__reply{
  background:#fff;color:var(--ink);font-size:14px;line-height:1.5;
  padding:2px 4px;max-width:100%;white-space:pre-wrap;word-wrap:break-word;
}
.ai__actions{display:flex;gap:4px;margin-top:2px}
.ai__actions button{
  width:26px;height:26px;display:grid;place-items:center;
  border:none;background:none;border-radius:5px;cursor:pointer;color:var(--ink-soft);
}
.ai__actions button:hover{background:var(--hover)}

.ai__compose{
  border-top:1px solid var(--line);
  margin:0 14px;padding:10px 0 6px;
  border-top:none;
}
.ai__chip{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;font-size:12px;color:var(--ink-soft);margin-bottom:8px;
}
.ai__compose textarea{
  display:block;width:100%;font-family:inherit;font-size:14px;
  border:none;outline:none;resize:none;background:#fff;
  padding:4px 0;color:var(--ink);
  min-height:32px;max-height:160px;
}
.ai__compose textarea::placeholder{color:var(--ink-mute)}
.ai__compose-row{display:flex;align-items:center;gap:4px}
.ai__send{
  width:30px;height:30px;display:grid;place-items:center;
  border:none;border-radius:50%;background:#222;color:#fff;cursor:pointer;
}
.ai__send[disabled]{background:#dadbe2;color:#fff;cursor:default}
.ai__foot{
  padding:8px 14px 12px;font-size:11.5px;color:var(--ink-mute);text-align:center;
}
.ai__foot a{color:var(--ink-soft);text-decoration:underline;cursor:pointer}

/* ── IMPORT MODAL ──────────────────────────────────────────────────────── */
.impm__back{
  position:fixed;inset:0;z-index:400;background:rgba(20,22,30,.30);
  display:grid;place-items:stretch;
  animation:lpopIn .14s ease-out;
}
.impm{
  background:#fff;width:100%;height:100%;display:flex;flex-direction:column;
  font-family:inherit;color:var(--ink);
  animation:lpopIn .18s ease-out;
}
.impm__head{
  display:flex;align-items:center;padding:18px 24px;gap:20px;
  border-bottom:1px solid var(--line);
}
.impm__head h2{margin:0;font-size:18px;font-weight:600;white-space:nowrap}
.impm__stepper{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}
.impm__step{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:14px;white-space:nowrap}
.impm__bullet{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--ink-mute);font-size:12px;font-weight:600;color:var(--ink-soft);
  background:#fff;
}
.impm__step--active .impm__bullet{border-color:var(--blue);background:var(--blue);color:#fff}
.impm__step--active{color:var(--ink);font-weight:500}
.impm__step--done .impm__bullet{border-color:var(--blue);background:#fff;color:var(--blue)}
.impm__seg{height:1px;background:var(--line);width:48px;flex-shrink:0}
.impm__seg--done{background:var(--blue)}
.impm__right{display:flex;align-items:center;gap:6px}
.impm__feedback{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--ink-soft);font-family:inherit;font-size:14px;
  padding:6px 10px;border-radius:6px;cursor:pointer;
}
.impm__feedback:hover{background:var(--hover)}
.impm__close{
  width:30px;height:30px;display:grid;place-items:center;
  background:none;border:none;border-radius:6px;cursor:pointer;color:var(--ink-soft);
}
.impm__close:hover{background:var(--hover)}

.impm__body{flex:1;overflow-y:auto;padding:50px 80px;display:flex;flex-direction:column;align-items:center}

.impm__drop{
  width:min(780px,90%);height:300px;
  border:1.5px dashed #c5c7d0;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.impm__drop.is-over{border-color:var(--blue);background:#f4f8ff}
.impm__drop h3{margin:18px 0 6px;font-size:22px;font-weight:600}
.impm__drop p{margin:0;color:var(--ink-soft)}
.impm__browse{
  background:var(--blue);color:#fff;border:none;border-radius:6px;
  padding:10px 22px;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;
}
.impm__browse:hover{background:var(--blue-hover)}

.impm__hint{color:var(--ink-soft);margin:0 0 18px;text-align:center}
.impm__map,.impm__match{width:min(720px,100%)}
.impm__maplist{display:flex;flex-direction:column;gap:10px}
.impm__maprow{
  display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;
}
.impm__maprow:hover{background:#fafbfc}
.impm__maplabel{font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.impm__mapvalue{font-size:14px;color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impm__mapcol select{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:#fff;outline:none;
}
.impm__mapcol select:focus{border-color:var(--blue)}
.impm__maparrow{color:var(--ink-mute);text-align:center}

.impm__matchopts{display:flex;flex-direction:column;gap:10px}
.impm__opt{
  display:flex;align-items:flex-start;gap:12px;
  border:1.5px solid var(--line);border-radius:8px;padding:14px 16px;cursor:pointer;
  background:#fff;
}
.impm__opt input{margin-top:3px;accent-color:var(--blue)}
.impm__opt.is-sel{border-color:var(--blue);background:#f4f8ff}
.impm__opttitle{font-weight:600;font-size:14px}
.impm__optdesc{color:var(--ink-soft);font-size:13px;margin-top:2px}

.impm__progress{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px}
.impm__progress h3{margin:14px 0 6px;font-size:20px}
.impm__progress p{color:var(--ink-soft);margin:0}
.impm__spinner{
  width:48px;height:48px;border-radius:50%;
  border:4px solid #e6e9ef;border-top-color:var(--blue);
  animation:imp-spin .9s linear infinite;
}
@keyframes imp-spin{to{transform:rotate(360deg)}}
.impm__check{
  width:54px;height:54px;border-radius:50%;background:#e6f4ea;color:#2bb672;
  display:grid;place-items:center;font-size:28px;font-weight:700;
}

.impm__foot{
  display:flex;align-items:center;gap:10px;
  padding:14px 24px;border-top:1px solid var(--line);background:#fff;
}
.impm__next{
  background:var(--blue);color:#fff;border:none;border-radius:6px;
  padding:8px 18px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;
}
.impm__next:hover{background:var(--blue-hover)}

/* ── COLUMN PICKER (AddColumnSlot) ─────────────────────────────────────── */
.addcol-btn{
  display:grid;place-items:center;width:32px;height:30px;margin:auto;
  background:none;border:none;color:var(--ink-soft);
  border-radius:6px;cursor:pointer;
}
.addcol-btn:hover{background:var(--hover);color:var(--blue)}
.colpick-back{position:fixed;inset:0;z-index:200}
.colpick{
  position:fixed;width:340px;
  background:#fff;border-radius:10px;padding:16px 16px 8px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);z-index:201;
  font-family:inherit;color:var(--ink);
}
.colpick__x{
  position:absolute;top:10px;right:10px;
  background:none;border:none;color:var(--ink-soft);cursor:pointer;
  width:24px;height:24px;display:grid;place-items:center;border-radius:5px;
}
.colpick__x:hover{background:var(--hover)}
.colpick__search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  color:var(--ink-soft);margin-bottom:14px;
}
.colpick__search input{
  border:none;outline:none;flex:1;font-family:inherit;font-size:14px;background:transparent;
}
.colpick__head{
  font-size:13px;color:var(--ink-soft);font-weight:600;margin:12px 0 8px;
}
.colpick__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.colpick__chip{
  display:flex;align-items:center;gap:10px;
  background:none;border:1px solid transparent;border-radius:6px;
  padding:8px 9px;font-size:14px;cursor:pointer;font-family:inherit;
  color:var(--ink);text-align:left;
}
.colpick__chip:hover{background:var(--hover)}
.colpick__ico{
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.colpick__foot{
  border-top:1px solid var(--line);margin-top:14px;padding:12px 0 8px;
  font-size:14px;color:var(--ink-soft);text-align:center;cursor:pointer;
}
.colpick__foot:hover{color:var(--blue)}

/* The trailing "Add column" column in every Main table — 48px wide. */
.tbl__cell--addcol{padding:0;justify-content:center}
.tbl__cell--addcol .addcol-btn{margin:0}

/* Editable cell shell — click to edit input takes over */
.ec{cursor:text}
.ec--editing{padding:0 4px}
.ec--editing input{
  width:100%;height:100%;min-height:32px;
  border:1.5px solid var(--blue);border-radius:4px;
  font:inherit;color:var(--ink);padding:0 6px;outline:none;background:#fff;
}

/* COLUMN RESIZE — visible handle on hover at the right edge of header cells */
.tbl__row--head .tbl__cell{
  position:relative;
}
.tbl__row--head .tbl__cell::after{
  content:"";position:absolute;right:-2px;top:0;bottom:0;width:8px;
  background:transparent;cursor:col-resize;z-index:2;
}
.tbl__row--head .tbl__cell::before{
  content:"";position:absolute;right:0;top:6px;bottom:6px;width:2px;
  background:transparent;transition:background .12s ease;pointer-events:none;
}
.tbl__row--head .tbl__cell:hover::before{background:rgba(0,115,234,.5)}
.tbl__row{transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, background .2s ease}

/* DRAG-AND-DROP row reorder — clean lift, soft shadow, no shimmer */
.tbl__row[draggable="true"]{cursor:grab}
.tbl__row[draggable="true"]:active{cursor:grabbing}
.tbl__row[data-dragging="true"]{
  position:relative;z-index:50;
  background:#ffffff;
  box-shadow:0 12px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(0,115,234,.45);
  border-radius:6px;
}
/* Whilst something is being dragged, dim the source row very slightly so the
   eye focuses on where it will land. */
.tbl[data-dragging="true"] .tbl__row[data-dragging="true"]{opacity:.92}

/* ── LabelCell PICKER (customizable) ───────────────────────────────────── */
.lpicker{
  position:fixed;z-index:300;
  min-width:200px;background:#fff;border-radius:8px;padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.20);
  display:flex;flex-direction:column;gap:8px;
  transform-origin:top left;
  animation:lpopIn .14s ease-out;
}
@keyframes lpopIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}
.lpicker__list{display:flex;flex-direction:column;gap:6px}
.lpicker__opt{
  position:relative;
  border:none;border-radius:4px;color:#fff;font-family:inherit;
  font-size:13px;padding:9px 12px;cursor:pointer;text-align:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.lpicker__opt:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.16)}
.lpicker__opt:active{transform:translateY(0);box-shadow:none}
.lpicker__opt--empty{background:#c4c4c4;height:30px;padding:0}
.lpicker__actions{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.lpicker__action{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:none;border:none;font-family:inherit;font-size:13px;
  color:var(--ink-soft);padding:7px 8px;border-radius:4px;cursor:pointer;
}
.lpicker__action:hover{background:var(--hover);color:var(--ink)}

/* ── Label editor modal ────────────────────────────────────────────────── */
.lemod__back{
  position:fixed;inset:0;z-index:300;background:rgba(20,22,30,.42);
  display:grid;place-items:center;
  animation:lpopIn .14s ease-out;
}
.lemod{
  width:460px;max-height:80vh;background:#fff;border-radius:10px;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.30);
  animation:lpopIn .16s ease-out;
}
.lemod__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px;border-bottom:1px solid var(--line);
}
.lemod__head h3{margin:0;font-size:16px}
.lemod__body{padding:12px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.lerow{display:flex;align-items:center;gap:10px}
.lerow__swatch{
  position:relative;width:38px;height:30px;border-radius:5px;cursor:pointer;
  flex-shrink:0;
}
.lerow__swatch:hover .lerow__palette{display:grid}
.lerow__palette{
  display:none;
  position:absolute;top:36px;left:0;z-index:10;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px;grid-template-columns:repeat(6,18px);gap:4px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.lerow__palette button{
  width:18px;height:18px;border:none;border-radius:3px;cursor:pointer;padding:0;
}
.lerow__palette button:hover{transform:scale(1.1)}
.lerow__input{
  flex:1;font-family:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:6px;padding:7px 10px;outline:none;
}
.lerow__input:focus{border-color:var(--blue)}
.lerow__del{
  width:30px;height:30px;display:grid;place-items:center;
  background:none;border:none;border-radius:5px;cursor:pointer;color:var(--ink-soft);
}
.lerow__del:hover{background:#fde8eb;color:#d83a52}
.lemod__add{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:none;border:none;color:var(--blue);font-family:inherit;font-size:13.5px;
  padding:8px 6px;cursor:pointer;
}
.lemod__add:hover{text-decoration:underline}
.lemod__foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 14px;border-top:1px solid var(--line);
}
.lemod__save{
  background:var(--blue);color:#fff;border:none;font-family:inherit;font-size:14px;
  padding:7px 16px;border-radius:6px;cursor:pointer;font-weight:500;
}
.lemod__save:hover{background:var(--blue-hover)}

/* Subtle pop animation on the cell button itself when clicked */
.label,.label--empty{transition:filter .14s ease}
.label:hover{filter:brightness(1.05)}
.label:active{filter:brightness(.92) saturate(1.1)}

/* The whole compose block is one bordered container, like the screenshot */
.ai__compose{
  margin:0 14px 0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px 8px;
  background:#fff;
}