/*
  base.css
  - Socle global: variables, thèmes, reset, typographie shell, layout.
  - Point d'entrée CSS du workspace.
*/

:root{
  /* Backgrounds */
  --bg:#eff3f9;
  --panel:#ffffff;
  --border:rgba(216,226,239,.92);

  /* Text */
  --text:#344050;
  --muted:#748194;
  --muted2:#9da9bb;
  --title:#1c2635;

  /* Accents */
  --accent:#2c7be5;
  --accent2:#69a7ff;

  /* Status */
  --danger:#e63757;
  --ok:#00d27a;
  --warn:#f5803e;

  /* UI */
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:14px;
  --gap:10px;
  --focus: 0 0 0 3px rgba(44,123,229,.18);

  /* Tabs + split system */
  --tabH: 32px;
  --minPane: 240px;
  --divider: 10px;

  /* Sidebar rail */
  --sideW:109px;

  /* Typography */
  --font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Theme tokens shared with shell/components */
  --surface-1: rgba(255,255,255,.94);
  --surface-2: rgba(255,255,255,.82);
  --surface-3: rgba(226,233,244,.88);
  --surface-4: rgba(226,233,244,.64);
  --surface-inset: rgba(52,64,80,.04);
  --scroll-thumb: rgba(116,129,148,.22);

  --shell-rail-grad: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,243,249,.97));
  --shell-workspace-grad: linear-gradient(180deg, rgba(255,255,255,.84), rgba(226,233,244,.68));

  --rail-hover-bg: rgba(44,123,229,.06);
  --rail-hover-border: rgba(216,226,239,.92);
  --rail-active-bg: rgba(44,123,229,.10);
  --rail-active-border: rgba(44,123,229,.28);
  --rail-label: #5e6e82;

  --divider-bar: rgba(116,129,148,.20);
  --divider-drag: rgba(44,123,229,.28);

  --pane-bg: rgba(255,255,255,.82);
  --pane-border: rgba(216,226,239,.92);
  --pane-active-outline: rgba(44,123,229,.22);
  --pane-header-bg: var(--surface-4);
  --pane-header-border: rgba(216,226,239,.92);

  --tab-bg: var(--surface-3);
  --tab-border: rgba(216,226,239,.92);
  --tab-hover-bg: rgba(44,123,229,.06);
  --tab-hover-border: rgba(116,129,148,.22);
  --tab-active-bg: rgba(44,123,229,.12);
  --tab-active-border: rgba(44,123,229,.45);
  --tab-x-bg: rgba(52,64,80,.05);
  --tab-x-border: rgba(216,226,239,.92);

  --pc-text: #5e6e82;

  --dock-zone-border: rgba(44,123,229,.18);
  --dock-zone-bg: rgba(44,123,229,.06);
  --dock-zone-glow: rgba(44,123,229,.08);
  --dock-zone-border-active: rgba(44,123,229,.36);
  --dock-zone-bg-active: rgba(44,123,229,.12);
  --dock-center-border: rgba(44,123,229,.24);
  --dock-center-bg: rgba(44,123,229,.08);
  --dock-center-glow: rgba(44,123,229,.10);

  --ghost-bg: rgba(255,255,255,.98);
  --ghost-border: rgba(216,226,239,.92);
  --ghost-shadow: 0 12px 26px rgba(15,23,42,.12);

  --logo-shadow: 0 8px 18px rgba(44,123,229,.18);
  --logo-border: rgba(216,226,239,.92);

  /* Theme customization layer */
  --theme-column: #e2e9f4;
  --theme-border: #cfd8e6;
  --field-bg: #ffffff;
  --field-text: #344050;
  --field-radius: 14px;

  /* Shuttle Surface System - inspired by the local knowledge UI */
  --shuttle-surface: color-mix(in srgb, var(--panel) 94%, transparent);
  --shuttle-surface-soft: color-mix(in srgb, var(--theme-column) 54%, var(--panel));
  --shuttle-surface-warm: color-mix(in srgb, var(--accent2) 10%, var(--panel));
  --shuttle-line: color-mix(in srgb, var(--theme-border) 62%, transparent);
  --shuttle-line-strong: color-mix(in srgb, var(--theme-border) 82%, transparent);
  --shuttle-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --shuttle-accent-strong: color-mix(in srgb, var(--accent) 82%, var(--title));
  --shuttle-card-shadow: 0 8px 22px color-mix(in srgb, var(--title) 8%, transparent);
  --shuttle-card-shadow-hover: 0 12px 28px color-mix(in srgb, var(--title) 10%, transparent);
  --shuttle-control-h: 40px;
  --shuttle-radius-sm: 10px;
  --shuttle-radius-md: 14px;
  --shuttle-radius-lg: var(--radius);
}

html[data-theme="light"]{
  --bg:#eff3f9;
  --panel:#ffffff;
  --border:rgba(207,216,230,.94);

  --text:#344050;
  --muted:#748194;
  --muted2:#9da9bb;
  --title:#1c2635;

  --accent:#2c7be5;
  --accent2:#69a7ff;

  --danger:#e63757;
  --ok:#00d27a;
  --warn:#f5803e;

  --shadow:0 14px 36px rgba(15,23,42,.10);
  --focus: 0 0 0 3px rgba(44,123,229,.18);

  --surface-1: rgba(255,255,255,.94);
  --surface-2: rgba(255,255,255,.82);
  --surface-3: rgba(226,233,244,.88);
  --surface-4: rgba(226,233,244,.64);
  --surface-inset: rgba(52,64,80,.04);

  --scroll-thumb: rgba(116,129,148,.22);
  --shell-rail-grad: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,243,249,.97));
  --shell-workspace-grad: linear-gradient(180deg, rgba(255,255,255,.84), rgba(226,233,244,.68));

  --rail-hover-bg: rgba(44,123,229,.06);
  --rail-hover-border: rgba(207,216,230,.94);
  --rail-active-bg: rgba(44,123,229,.10);
  --rail-active-border: rgba(44,123,229,.28);
  --rail-label: #5e6e82;

  --divider-bar: rgba(116,129,148,.20);
  --divider-drag: rgba(44,123,229,.28);

  --pane-bg: rgba(255,255,255,.82);
  --pane-border: rgba(207,216,230,.94);
  --pane-active-outline: rgba(44,123,229,.22);
  --pane-header-bg: rgba(226,233,244,.64);
  --pane-header-border: rgba(207,216,230,.94);

  --tab-bg: rgba(226,233,244,.88);
  --tab-border: rgba(207,216,230,.94);
  --tab-hover-bg: rgba(44,123,229,.06);
  --tab-hover-border: rgba(116,129,148,.22);
  --tab-active-bg: rgba(44,123,229,.12);
  --tab-active-border: rgba(44,123,229,.45);
  --tab-x-bg: rgba(52,64,80,.05);
  --tab-x-border: rgba(207,216,230,.94);

  --pc-text: #5e6e82;

  --dock-zone-border: rgba(44,123,229,.18);
  --dock-zone-bg: rgba(44,123,229,.06);
  --dock-zone-glow: rgba(44,123,229,.08);
  --dock-zone-border-active: rgba(44,123,229,.36);
  --dock-zone-bg-active: rgba(44,123,229,.12);
  --dock-center-border: rgba(44,123,229,.24);
  --dock-center-bg: rgba(44,123,229,.08);
  --dock-center-glow: rgba(44,123,229,.10);

  --ghost-bg: rgba(255,255,255,.98);
  --ghost-border: rgba(207,216,230,.94);
  --ghost-shadow: 0 12px 26px rgba(15,23,42,.12);

  --logo-shadow: 0 8px 18px rgba(44,123,229,.18);
  --logo-border: rgba(207,216,230,.94);
}

html[data-theme="dark"]{
  --bg:#0b1727;
  --panel:#101826;
  --border:rgba(52,64,80,.92);

  --text:#edf2f9;
  --muted:#9da9bb;
  --muted2:#7b8797;
  --title:#ffffff;

  --accent:#2c7be5;
  --accent2:#69a7ff;

  --danger:#f25f7a;
  --ok:#00d27a;
  --warn:#f5803e;

  --shadow:0 18px 42px rgba(2,6,23,.42);
  --focus: 0 0 0 3px rgba(44,123,229,.24);

  --surface-1: rgba(16,24,38,.94);
  --surface-2: rgba(16,24,38,.82);
  --surface-3: rgba(24,33,50,.84);
  --surface-4: rgba(24,33,50,.56);
  --surface-inset: rgba(237,242,249,.04);
  --scroll-thumb: rgba(116,129,148,.26);

  --shell-rail-grad: linear-gradient(180deg, rgba(16,24,38,.98), rgba(11,23,39,.96));
  --shell-workspace-grad: linear-gradient(180deg, rgba(16,24,38,.74), rgba(11,23,39,.90));

  --rail-hover-bg: rgba(44,123,229,.08);
  --rail-hover-border: rgba(52,64,80,.92);
  --rail-active-bg: rgba(44,123,229,.14);
  --rail-active-border: rgba(44,123,229,.36);
  --rail-label: #c5d0df;

  --divider-bar: rgba(116,129,148,.26);
  --divider-drag: rgba(44,123,229,.34);

  --pane-bg: rgba(16,24,38,.82);
  --pane-border: rgba(52,64,80,.92);
  --pane-active-outline: rgba(44,123,229,.26);
  --pane-header-bg: rgba(24,33,50,.56);
  --pane-header-border: rgba(52,64,80,.92);

  --tab-bg: rgba(24,33,50,.84);
  --tab-border: rgba(52,64,80,.92);
  --tab-hover-bg: rgba(44,123,229,.08);
  --tab-hover-border: rgba(116,129,148,.28);
  --tab-active-bg: rgba(44,123,229,.16);
  --tab-active-border: rgba(44,123,229,.46);
  --tab-x-bg: rgba(237,242,249,.05);
  --tab-x-border: rgba(52,64,80,.92);

  --pc-text: #c5d0df;

  --dock-zone-border: rgba(44,123,229,.20);
  --dock-zone-bg: rgba(44,123,229,.08);
  --dock-zone-glow: rgba(44,123,229,.12);
  --dock-zone-border-active: rgba(44,123,229,.40);
  --dock-zone-bg-active: rgba(44,123,229,.16);
  --dock-center-border: rgba(44,123,229,.30);
  --dock-center-bg: rgba(44,123,229,.12);
  --dock-center-glow: rgba(44,123,229,.16);

  --ghost-bg: rgba(16,24,38,.98);
  --ghost-border: rgba(52,64,80,.92);
  --ghost-shadow: 0 14px 34px rgba(2,6,23,.42);

  --logo-shadow: 0 10px 22px rgba(44,123,229,.24);
  --logo-border: rgba(52,64,80,.92);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  background:
    radial-gradient(1100px 640px at 12% 14%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
    radial-gradient(820px 560px at 78% 10%, color-mix(in srgb, var(--accent2) 7%, transparent), transparent 54%),
    var(--bg);
  color:var(--text);
  overflow:hidden;
  transition: background .24s ease, color .18s ease;
}

body,
button,
input,
select,
textarea{
  font-family: var(--font);
}

h1, h2, h3, h4, h5, h6,
.brand-text strong,
.card h2{
  color: var(--title);
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}


/* =========================
   Layout global
   ========================= */

.app{
  height:100%;
  display:grid;
  grid-template-columns: var(--sideW) 1fr;
  gap: 4px;
  padding: 4px;
  min-height:0;
}

/* Sidebar (rail) — inspiré du layout IDE-like */
.sidebar{
  background: var(--shell-rail-grad);
  border:1px solid var(--shuttle-line);
  border-radius: var(--radius);
  box-shadow: var(--shuttle-card-shadow);
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  overflow:hidden;
  min-width:95px;
  min-height:0;
}

.side-header{
  padding:6px 6px 4px;
  border-bottom:1px solid var(--shuttle-line);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--shuttle-surface);
}

.sidebar__quick,
.sidebar__search,
.sidebar__menu,
.sidebar__footer{
  padding: 6px;
}

.sidebar__quick{
  padding-top: 8px;
  padding-bottom: 4px;
  border-bottom:1px solid var(--shuttle-line);
}

.sidebar__search{
  padding-top: 0;
  padding-bottom: 6px;
  border-bottom:1px solid var(--shuttle-line);
}

.sidebar__menu{
  display:none;
  padding-top: 0;
  padding-bottom: 6px;
}

.sidebar__footer{
  border-top: 1px solid var(--shuttle-line);
  background: var(--shuttle-surface);
  display:grid;
  gap:4px;
}

.sidebar__logoutForm{
  display:block;
  margin:0;
}

.logo{
  width:29px;
  height:29px;
  border-radius:10px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow: var(--logo-shadow);
  border:1px solid var(--logo-border);
  display:block;
}

.rail{
  padding:4px 5px 6px;
  overflow:auto;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar{ width:0; height:0; }
.rail::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}

.rail-item{
  width:100%;
  border:1px solid transparent;
  border-radius:14px;
  padding:7px 3px 6px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  position:relative;
  text-decoration:none;
}
.rail-item:hover{
  background: var(--rail-hover-bg);
  border-color: var(--rail-hover-border);
}
.rail-item.active{
  background: var(--rail-active-bg);
  border-color: var(--rail-active-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.rail-item--disabled,
.rail-item--disabled:hover{
  opacity:.42;
  filter:saturate(.45);
  cursor:not-allowed;
  pointer-events:none;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.rail-item--disabled .rail-icon{
  box-shadow:none;
}
.rail-icon{
  width:37px;
  height:37px;
  border-radius:13px;
  background: var(--shuttle-surface-soft);
  border:1px solid color-mix(in srgb, var(--theme-border) 32%, transparent);
  display:grid;
  place-items:center;
  font-size:25px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--title) 8%, transparent);
}
.rail-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

.rail-label{
  font-size:11.5px;
  line-height:1.1;
  font-weight:650;
  color: var(--rail-label);
  text-align:center;
  max-width: 68px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Workspace */
.workspace{
  border-radius: var(--radius);
  border:1px solid var(--shuttle-line);
  box-shadow: var(--shuttle-card-shadow);
  background: var(--shell-workspace-grad);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  position: relative;
}

/* 2 parties */
.topbar-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-leftActions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-right{
  flex: 1 1 auto;
  display: flex;
  justify-content: center; /* centre la search dans la partie droite */
  min-width: 0;
}


.ws-body{
  flex:1 1 auto;
  overflow:hidden;     /* <- important: le split gère son scroll interne */
  padding:4px;
  min-height:0;
}

.dock-root{
  width:100%;
  height:100%;
  min-height:100%;
}


/* =========================
   Tabs + Split + Docking (IDE-like)
   ========================= */

/* Nodes */
.node{
  min-width: var(--minPane);
  min-height: var(--minPane);
  height:100%;
}

/* Split containers */
.split{
  display:grid;
  width:100%;
  height:100%;
}

/* Permettre le dépassement (beaucoup de splits) */
.split.row{ grid-auto-flow: column; min-width:max-content; min-height:100%; }
.split.col{ grid-auto-flow: row;    min-height:max-content; min-width:100%; }

/* Divider (resize bar) */
.divider{
  position:relative;
  background:transparent;
  z-index:2;
}
.divider.row{ width: var(--divider); cursor: col-resize; }
.divider.col{ height: var(--divider); cursor: row-resize; }

.divider::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:4px;
  height:60%;
  border-radius:999px;
  background: var(--divider-bar);
}
.divider.col::before{
  width:60%;
  height:4px;
}
.divider.dragging::before{
  background: var(--divider-drag);
}

/* Leaf pane */
.pane{
  border:1px solid var(--shuttle-line);
  height:100%;
  border-radius: var(--radius);
  background: var(--pane-bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  min-width: var(--minPane);
  min-height: var(--minPane);
}
.pane.active{
  outline: 0;
}

/* Pane header (tabs row) */
.ph{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 7px;
  border-bottom:1px solid var(--shuttle-line);
  background: var(--pane-header-bg);
  min-height: calc(var(--tabH) + 4px);
}

.tabs{
  display:flex;
  gap:5px;
  overflow:auto;
  min-width:0;
  flex:1 1 auto;
  padding:1px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ width:0; height:0; }
.tabs::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}

.tab{
  height: var(--tabH);
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  border-radius: var(--shuttle-radius-sm);
  border:1px solid var(--shuttle-line);
  background: var(--shuttle-surface-soft);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  flex:0 0 auto;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.tab.active{
  background: var(--shuttle-accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.tab:hover{
  background: color-mix(in srgb, var(--accent) 7%, var(--shuttle-surface-soft));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}
.tab .t{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px;
}
.tab .x{
  width:17px;height:17px;border-radius:7px;
  display:grid;place-items:center;
  border:1px solid var(--tab-x-border);
  background: var(--tab-x-bg);
  font-size:12px;
}

/* Pane content */
.pc{
  flex:1 1 auto;
  overflow:auto;
  padding:0;
  min-height:0;
  color: var(--rail-label);
  font-size:13px;
  scrollbar-width: none;
}
.pc::-webkit-scrollbar{ width:0; height:0; }

.pc.is-pane-compact,
.pc.is-pane-narrow,
.pc.is-pane-xs{
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.pc.is-pane-compact::-webkit-scrollbar,
.pc.is-pane-narrow::-webkit-scrollbar,
.pc.is-pane-xs::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.pc.is-pane-compact::-webkit-scrollbar-thumb,
.pc.is-pane-narrow::-webkit-scrollbar-thumb,
.pc.is-pane-xs::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}

/* Dock overlay */
.dock{
  position:absolute;
  inset:10px;
  display:none;
  pointer-events:none;
  border-radius: 14px;
}
.dock.show{ display:block; }

.zone{
  position:absolute;
  border-radius: 12px;
  border:1px solid var(--dock-zone-border);
  background: var(--dock-zone-bg);
  box-shadow: 0 0 0 3px var(--dock-zone-glow) inset;
  opacity:0;
  transform: scale(.985);
  transition: opacity .10s ease, transform .10s ease;
  display:grid;
  place-items:center;
  font-size:12px;
}
.zone.active{
  opacity:1;
  transform: scale(1);
  border-color: var(--dock-zone-border-active);
  background: var(--dock-zone-bg-active);
}

.zone.center{
  left:22%; top:22%; right:22%; bottom:22%;
  border-color: var(--dock-center-border);
  background: var(--dock-center-bg);
  box-shadow: 0 0 0 3px var(--dock-center-glow) inset;
}
.zone.left{ left:0; top:0; bottom:0; width:28%; }
.zone.right{ right:0; top:0; bottom:0; width:28%; }
.zone.top{ left:0; top:0; right:0; height:28%; }
.zone.bottom{ left:0; bottom:0; right:0; height:28%; }

/* Drag ghost */
.ghost{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform: translate(-50%,-50%);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid var(--ghost-border);
  background: var(--ghost-bg);
  box-shadow: var(--ghost-shadow);
  display:none;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  font-size:13px;
}
.ghost.show{ display:flex; }

.sidebar__quickButton{
  width:100%;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  min-height: 54px;
  padding: 7px 6px 6px;
  border-radius: 16px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.sidebar__quickButton .rail-icon{
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.sidebar__quickButton .sidebar__quickLabel{
  color: color-mix(in srgb, var(--accent) 78%, var(--rail-label));
  font-weight: 650;
}

.sidebar__quickButton:hover{
  background: var(--rail-hover-bg);
  border-color: var(--rail-hover-border);
}

.sidebar__quickButton.is-open{
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: none;
}

.sidebar__quickButton.is-open .rail-icon{
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.sidebar__quickButton.is-open .sidebar__quickLabel{
  color: color-mix(in srgb, var(--accent) 78%, var(--rail-label));
}

.sidebar__quickButton:focus-visible{
  box-shadow: var(--focus);
}

.sidebar__quickButton .rail-icon{
  width:42px;
  height:42px;
  box-shadow:none;
}

.sidebar__quickLabel{
  font-size:11px;
  line-height:1.1;
  color: var(--rail-label);
}

.side-header .rail-icon,
.rail-item--sidebar-search .rail-icon,
.rail-item--sidebar-menu .rail-icon{
  width:40px;
  height:40px;
  border-radius:14px;
}

.side-header .rail-item,
.rail-item--sidebar-search,
.rail-item--sidebar-menu{
  padding:7px 4px 6px;
}

.rail-item--sidebar-search,
.rail-item--sidebar-menu{
  justify-content:center;
  gap:3px;
}

.rail-item--sidebar-search .rail-label,
.rail-item--sidebar-menu .rail-label{
  font-size:10.5px;
}


/* =========================================================
   Shell Layout Variants (rail position + density)
   Ajoute ce bloc À LA FIN du fichier base.css
   ========================================================= */

/* Le JS injecte #dockRoot dans #wsBody */
#dockRoot{
  width:100%;
  height:100%;
  min-height:100%;
}

/* ---------- Density (compact/normal) ---------- */
/* Par défaut, tu es en normal via :root variables. */
.app[data-density="compact"]{
  --sideW: 73px;
  --tabH: 32px;
  --divider: 9px;
  --radius: 14px;
  --gap: 8px;
}

/* Ajustements rail en compact */
.app[data-density="compact"] .rail-item{
  padding: 6px 4px 5px;
  border-radius: 14px;
  gap: 3px;
}
.app[data-density="compact"] .rail-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 23px;
}
.app[data-density="compact"] .rail-label{
  font-size: 10.6px;
  font-weight: 650;
}

/* Ajustements tabs en compact */
.app[data-density="compact"] .ph{ padding: 6px 7px; }
.app[data-density="compact"] .tabs{ gap: 5px; }
.app[data-density="compact"] .tab{
  padding: 0 9px;
  border-radius: 11px;
}
.app[data-density="compact"] .tab .t{ font-size: 12.5px; }


/* ---------- Rail position: LEFT (default) ---------- */
.app[data-rail="left"]{
  grid-template-columns: var(--sideW) 1fr;
  grid-template-rows: 1fr;
}
.app[data-rail="left"] .sidebar{ grid-column: 1; grid-row: 1; }
.app[data-rail="left"] .workspace{ grid-column: 2; grid-row: 1; }

/* ---------- Rail position: RIGHT ---------- */
.app[data-rail="right"]{
  grid-template-columns: 1fr var(--sideW);
  grid-template-rows: 1fr;
}
.app[data-rail="right"] .sidebar{ grid-column: 2; grid-row: 1; }
.app[data-rail="right"] .workspace{ grid-column: 1; grid-row: 1; }

/* ---------- Rail position: TOP ---------- */
.app[data-rail="top"]{
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  height: 100%;
  min-height: 0;
}

.app[data-rail="top"] .sidebar{
  grid-column: 1;
  grid-row: 1;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  border-radius: var(--radius);
}

.app[data-rail="top"] .side-header{
  border-bottom: 0;
  border-right: 1px solid var(--border);
  padding: 10px;
  min-width: calc(var(--sideW) - 12px);
}

.app[data-rail="top"] .rail{
  flex-direction: row;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  scrollbar-width: thin;
}

.app[data-rail="top"] .rail::-webkit-scrollbar{ height: 10px; width: auto; }
.app[data-rail="top"] .rail::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}

.app[data-rail="top"] .rail-item{
  width: auto;
  min-width: 74px;
  padding: 8px 8px 7px;
}

.app[data-rail="top"] .rail-label{
  max-width: 120px;
}

.app[data-rail="top"] .workspace{
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  margin: 5px;
}

.app[data-rail="top"] .ws-topbar{
  display: none !important;
}

.app[data-rail="top"] .ws-body{
  padding: 10px;
}

.app[data-rail="top"] .rail-top-extras{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
  padding: 0 10px 0 6px;
  margin-right: 6px;
  border-right: 1px solid var(--border);
}

.app[data-rail="top"] .rail-top-extras .leftActions,
.app[data-rail="top"] .rail-top-extras .rightActions{
  min-width: 0;
}

.app[data-rail="top"] .rail-top-extras .universal{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(560px, 42vw);
  padding: 8px 10px;
}

.app[data-rail="top"] .rail-top-extras .kbd{
  display:none;
}