:root{
  --zoom: 1;
}

.window{
    background:var(--map-window-background);
    color:var(--map-window-text-color);
    border: var(--map-window-border);
}
#map-toolbar {
    background:var(--map-toolbar-background);
    border-right:var(--map-toolbar-border);
    color:var(--map-toolbar-text-color);
    overflow: scroll;
}
.toolbar-column-1,
.toolbar-column-2 {
    border-bottom:var(--map-toolbar-border);
    padding-bottom:var(--space-3);
    margin-bottom:var(--space-3);
}
.toolbar-section-label {
    display:block;
    opacity:0.6;
    font-size:0.7em;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-top:var(--space-2);
    margin-bottom:var(--space-1);
}
.toolbar-section-label:first-child {
    margin-top:0;
}
.manage-danger-zone {
    border-top:var(--map-toolbar-border);
    margin-top:var(--space-4);
    padding-top:var(--space-4);
}
.btn-danger {
    background:var(--notif-error-background) !important;
    color:#fff !important;
    border:1px solid var(--notif-error-background) !important;
}
.btn-danger:hover {
    background:color-mix(in oklab, var(--notif-error-background) 82%, black) !important;
    color:#fff !important;
}
#ManageKnowledgeListDisplay,
#ManageBlackboardDisplay,
#ManageMapChatDisplay {
    min-width:180px;
}
#ManageBlackboardBackground {
    min-width:220px;
}
.board-clear {
    margin-left:var(--space-2);
}
button, input[type="submit"] {
  background:var(--map-toolbar-background);
  color:var(--map-toolbar-button-text-color);
}
.KnowledgeBar button {
  border:var(--knowledge-bar-button-border) !important;;
  background:var(--knowledge-bar-button-background) !important;;
  color:var(--knowledge-bar-button-text-color) !important;
}
button:hover, input[type="submit"]:hover {
  background:var(--map-toolbar-button-hover-background)!important;
  color:var(--map-toolbar-button-hover-text-color)!important;
}
.window button, .window input[type="submit"] {
  background:var(--map-window-button-background);
  color:var(--map-window-button-text-color);
}
.window button:hover, .window input[type="submit"]:hover {
  background:var(--map-window-button-hover-background);
  color:var(--map-window-button-hover-text-color);
}
.titlebar{
  background:var(--map-window-bar-background) !important;
	border-bottom:var(--map-window-bar-border) !important;
  color:var(--map-window-bar-text-color) !important;
}
.titlebar  button{
  background:var(--map-window-bar-button-background) !important;
  color:var(--map-window-bar-btton-text-color) !important;
}
.titlebar  button:hover{
  background:var(--map-window-bar-button-hover-background) !important;
  color:var(--map-window-bar-btton-hover-text-color) !important;
}
input[type="text"], input[type="email"], input[type="password"], textarea, input[type="number"] {
  background: var(--map-toolbar-text-input-background) !important;
  border:var(--map-toolbar-text-input-border) !important;
  color: var(--map-toolbar-text-input-text-color) !important;
}
.KnowledgeInMap{
  background:var(--knowledge-background);
  border: 1px solid rgba(220, 227, 240, 0.12);
  color:var(--knowledge-text-color);

  position: absolute;
  box-sizing: border-box;

  min-width: 60px;
  min-height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  font-family:auto;
  font-size:auto;

  touch-action: auto;
  cursor: pointer;
  z-index:auto;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.KnowledgeInMap:hover {
  border-color: rgba(220, 227, 240, 0.3);
}

.KnowledgeInMap:hover {
  z-index: 10;         /* brings hovered card + its tools above others */
}

.KnowledgeInMap.knowledge-focused {
  background: color-mix(in srgb, var(--accent) 12%, var(--knowledge-background)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), 0 6px 28px 4px var(--relation-line-color);
  z-index: 15;
}

.KnowledgeInMap .KnowledgeSubject {
  cursor: pointer;
}

.KnowledgeSubjectLabel{
    position:fixed;
    bottom:-10px;
    transform: translateY(100%);
    left:0px;
    font-size: var(--label-size, 12px);
    color:var(--primary-contrast);
    z-index:99;

    overflow:hidden;
    max-height: calc( 1.2 * var(--label-size, 12px) );
  
    letter-spacing: -1px;
    font-family: "Inter", sans-serif;
  
    word-break: normal !important;
    overflow-wrap: normal !important;
    background:var(--primary-color);
}


.KnowledgeInMap .KnowledgeContent{
  height: fit-content;
  max-height: calc(100% - 75px);
  overflow: auto;
  width:calc( 100% - 9px );
  padding:0px;
  margin: var(--space-1);
  margin-top: var(--space-5);
}

.KnowledgeInList .KnowledgeTools{
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  overflow: hidden;
  white-space: nowrap;
}
.KnowledgeTools button{
  width:auto;
  height:auto;
  display:inline-block;
  padding: var(--space-1);
  margin:1px;
}
.KnowledgeInMap .KnowledgeTools{
  position:fixed;
  transform-origin: top left;
  top:0px;
  z-index:9999;
  left:calc( 100% );
  background:var(--close-7-4);
  transition:0s;
  transform: scale( calc( max(1 / var(--zoom), 1) ) );
  opacity: 0;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.KnowledgeInMap .KnowledgeTools::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  width: calc( max(1 / var(--zoom), 1) * 5px );
}
.KnowledgeInMap:hover .KnowledgeTools{
  opacity: 1;
  transition:0s;
  pointer-events: auto;
  margin-left:calc( max(1 / var(--zoom), 1) * 5px );
}
.KnowledgeInMap .KnowledgeTools button{
  margin-bottom: 0;
}
.KnowledgeInMap:hover .KnowledgeTools button{
}



.KnowledgeInList{
    background:var(--knowledge-background);
    border: var(--knowledge-border);
    color:var(--knowledge-text-color);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    min-height:100px;
    width:calc( 100% - 7px);
}
div.KnowledgeBar {
    background:var(--knowledge-bar-background);
    border-bottom: var(--knowledge-bar-border);
    color:var(--knowledge-bar-text-color);
    padding-top: var(--space-1);
    padding-left: var(--space-3);
    padding-bottom:0px;
    padding-right: var(--space-3);
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}
div.KnowledgeBar > .KnowledgeSubject{
  font-weight: bold;
  padding-top: var(--space-1);
  margin-right:0px;
}
div > .KnowledgeContent{
  overflow:scroll;
  width:calc( 100% - 19px);
  height:calc( 100% - 25px);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  padding-bottom: var(--space-1);
  display:block;
}
div.KnowledgeBar > .KnowledgeTools svg{
  width:20px;
  height:16px;
}




#KnowledgesListWindow{
    display:block;
    flex-direction: column-reverse;
}
#KnowledgesListWindow.active{ z-index: 49999 !important; }








#EditKnowledgeWindow{
  width:900px;
  height:370px;

  min-width:704px;
  min-height:370px;
}
#EditKnowledgeWindow .window-content{
    display:flex;
}
#EditKnowledgeWindow .window-content .left{
  border-right:solid 1px var(--hr-color);
  flex:1;
}
#EditKnowledgeWindow .window-content .right{
  flex:1;
}
#EditKnowledgeWindow .KnowledgeInMap{
  margin-left: var(--space-6);
  resize: both !important;
  overflow: hidden !important;

}
#EditKnowledgeWindow .window-content .left>*{
  margin: var(--space-1);
}
#EditKnowledgeWindow #EditKnowledgeWidth, #EditKnowledgeWindow #EditKnowledgeHeight{
  width:70px;
}
#EditKnowledgeWindow #EditKnowledgeContent {
  width:calc( 100% - 30px );
  height:calc( 100% - 150px );
}
#EditKnowledgeWindow #EditKnowledgeSubject {
  width:calc( min( 50%, 300px ) );
}
#EditKnowledgeWindow .WidthAndHeightInputs>* {
  height:24px;
}
#EditKnowledgeWindow .WidthAndHeightInputs #EditKnowledgeHeight {
  margin-top: var(--space-1);
}
#EditKnowledgeWindow .WidthAndHeightInputs{
  display:inline-block;
}
#EditKnowledgeWindow #EditKnowledgeRender{
  vertical-align:bottom;
  width:100px;
  height:56px;
}
#EditKnowledgeWindow #EditKnowledgeId{
  width:50px;
  border:none !important;
  cursor: not-allowed;
}







#KnowledgeWindow .KnowledgeInMap {
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#KnowledgeWindow .KnowledgeContent {
    max-height: none;
    height: auto;
    overflow: visible;
}

#map-container {
  position: fixed;
  top: 0; left: 0;
  width: 105vw;
  height: 100%;
  overflow: hidden;
  cursor: crosshair;
  /*border: solid 1px yellow;*/
  /* transition: transform 0.25s ease; // facultatif */


  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}
#map-container:active{
  cursor: grabbing;
}
#map-content {
  position:absolute;
}
.map-smooth { transition: transform 0.5s ease-in-out !important; }



/*pour selection de texte dans content - start*/
#map-container{
  -webkit-user-select: none;
  user-select: none;
}

/* MAIS: dans une connaissance, le contenu doit être sélectionnable */
.KnowledgeInMap .KnowledgeContent,
.KnowledgeInMap .KnowledgeContent *{
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text;
}

/* En vue d'ensemble (zoom trop petit), le texte n'est pas lisible : désactiver la sélection */
#map-container.zoom-overview .KnowledgeInMap .KnowledgeContent,
#map-container.zoom-overview .KnowledgeInMap .KnowledgeContent * {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: pointer !important;
}

/* Sur mobile/touch: autorise le geste natif dans le contenu */
.KnowledgeInMap .KnowledgeContent{
  touch-action: auto;      /* autorise sélection/scroll natif dans la box */
  -webkit-touch-callout: default;
}
/*pour selection de texte dans content - fin*/




#svg-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#svg-container * {
  vector-effect: non-scaling-stroke;
}
#svg-container line {
    stroke: color-mix(in srgb, var(--primary-contrast) 38%, transparent);
    stroke-width: 1px;
    pointer-events: none;
}
#svg-container line:hover {
    stroke: color-mix(in srgb, var(--primary-contrast) 68%, transparent);
    stroke-width: 1.5px;
}
#svg-container line.invisibleLine {
    stroke-width: 20px;
    pointer-events: all;
    stroke: transparent;
    transition:0.3s ease;
}
#svg-container line.invisibleLine:hover {
    stroke: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
}







#searchKnowledges {
  margin-top:-48px;
  padding-left: var(--space-1);
  position:absolute;
  width:calc( 100% - 32px );
  border:none !important;
}

#KnowledgesListWindow .window-content{
  margin-top:50px;
  height : calc( 100% - 100px);
}



/* ===== Map export dropdown ===== */
#map-export-menu {
    display: none;
    position: fixed;
    z-index: 1000;
    min-width: 120px;
    background: var(--primary-color);
    border: 1px solid rgba(220, 227, 240, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    overflow: hidden;
}
#map-export-menu.open { display: block; }
.mexp-item {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--primary-contrast);
}
.mexp-item:hover { background: rgba(255,255,255,0.08); }

.toolbar{
  z-index: 100;
  position:absolute;
}




input[type="range"] {
  background:none;
  height:0px;
  border:var(--map-toolbar-button-border);
}

input[type="range"]::-moz-range-thumb {
  background:var(--map-toolbar-button-background);
  border:none;
  border-radius: var(--radius-md);
  width: 16px;
  height: 16px;
}





#WhiteBoardWindow{
  display:block;
}
#WhiteBoardWindow.active{ z-index: 50000 !important; }
#WhiteBoardWindow .window-content{
  padding:0px;
  margin:0px;
  width:100%;
  height:calc( 100% - 24px );
  overflow:hidden;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

#WhiteBoardWindow .window-content button{
  width:32px;
  padding:0px;
  height:32px;
  margin:0px;
}


#WhiteBoardWindow .window-content input[type="color"]{
  width:32px;
  height:32px;
  border:none;
}

#WhiteBoardWindow .window-content button svg{
  height:24px;
  width:12px;
  padding:0px;
  left:0px;
  top:0px;
}

#PdfViewerWindow .window-content {
  margin: 0;
  padding: 0;
  height: calc(100% - 32px);
  overflow: hidden;
}

.board-ui{position:absolute; gap: var(--space-2); align-items:center; flex-wrap:wrap; z-index:10;}
#top-board-ui {left: var(--space-2); top:40px; display:flex;}
#bottom-board-ui{bottom: var(--space-3); left: var(--space-3);}
#board{
    position:relative;
    transform-origin: 0px 0px;
    border:1px solid var(--map-toolbar-border);
    background:var(--blackboard-bg, var(--back-1));
    cursor:crosshair;
    width:fit-content;
    height:fit-content;
}
#board textarea.board-text-input{
    position:absolute;
    resize:none;
    border:1px dashed var(--map-toolbar-border);
    background:transparent;
    outline:none;
    padding:0;
    line-height:1.15;
    font-family:sans-serif;
    white-space:pre;
    overflow:hidden;
    z-index:20;
}
input[type=range]{width:120px}
button{padding:.35rem .6rem}
.active{outline:2px solid #0002}
#c{
    touch-action:none;
    display:block;
    width:2480px;
    height:3508px;
}
#board-container{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    touch-action:none;
}

#relation-box {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 256px;
  width: fit-content;
  height: fit-content;
  min-width: fit-content;
  min-height: fit-content;
  resize: none;
  /* No fixed z-index here: like every other .window, its stacking is driven
     by bringToFront() (see read_utils.js / desktop.js) so it only jumps to
     the top when it's shown or updated, and later loses that spot to whatever
     window the user clicks next. */
}

#relation-box .titlebar {
  display: none;
}

#relation-box.pinned .titlebar {
  display: flex;
}

#relation-box-content {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
}

.relation-nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.relation-nav button {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: var(--relation-border);
  background: transparent;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.1s;
}

.relation-nav button:hover {
  opacity: 1;
}









/* =========================
   CUBE 3D – VERSION SAINE
   ========================= */

:root {
  --scene-size: 150px;   /* taille du cadre */
  --cube-size: 80px;     /* taille du cube */
  --cube-line-color: var(--map-window-text-color);
}

/* --- SCÈNE --- */
#scene {
  width: var(--scene-size);
  height: var(--scene-size);
  position: relative;

  /* caméra */
  perspective: calc(var(--scene-size) * 1.4);
  perspective-origin: 50% 50%;

  /* interaction */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* --- WRAPPER DE CENTRAGE --- */
#cube-wrap {
  width: var(--cube-size);
  height: var(--cube-size);

  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;

  pointer-events: none; /* laisse passer vers #cube */
}

/* --- CUBE --- */
#cube {
  width: 100%;
  height: 100%;
  position: relative;

  transform-style: preserve-3d;
  transform-origin: 50% 50%;

  cursor: grab;
  pointer-events: auto;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#cube:active {
  cursor: grabbing;
}

/* --- FACES --- */
#cube .face {
  position: absolute;
  width: 100%;
  height: 100%;

  border: 1px solid var(--cube-line-color);

  /* surface légère */
  background: rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, var(--cube-line-color) 18%, transparent);

  /* voir à travers */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* --- POSITION DES FACES --- */
.cubefront  { transform: translateZ(calc(var(--cube-size) / 2)); }
.cubeback   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cuberight  { transform: rotateY(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.cubeleft   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cubetop    { transform: rotateX(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.cubebottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }



/* ========================= Inline style migrations ========================= */

#StandardEditKnowledgeWindow .window-content {
  padding-top: 0;
  margin: var(--space-1);
  margin-top: 0;
  padding-bottom:100px;
}

#manage_user_suggestion {
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.members-scroll {
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--space-2);
}

.member-item {
  padding: var(--space-1) 0;
}

#send-knowledge-maps-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

#send-knowledge-maps-list .mapsmenu {
  text-align: left;
  width: 100%;
  border: none;
  border-bottom: solid 2px var(--close-5-1);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: none;
  color: var(--far-5-6);
  cursor: pointer;
}

#send-knowledge-maps-list .mapsmenu.active-map {
  background: var(--secondary-color);
  color: var(--secondary-contrast);
}

.send-maps-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  padding: var(--space-3) 0 var(--space-1);
}

#send-knowledge-selection {
  font-size: 0.82rem;
  opacity: 0.55;
  margin-bottom: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#send-knowledge-selection.has-selection {
  opacity: 1;
  font-weight: 600;
}

/* ── Source chips (Add from Web) ──────────────────────────────────
   Same component as Alexandrie Search's source picker (see
   alexandrie_search.css) — reused here rather than duplicated with new
   class names, so the two source-selection UIs stay visually identical. */
.source-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  cursor: pointer;
  user-select: none;
  opacity: 0.38;
  border: 1px solid currentColor;
  transition: opacity var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

.source-chip:has(input:checked) {
  opacity: 1;
  background: var(--accent-dim);
}

.source-chip input[type="checkbox"] {
  display: none;
}

#ManageMapName{
  width:calc( 100% - 110px ) !important;
  max-width:500px;
  min-width:150px;
  padding-left:5px;
}