:root{
      --bg:#fff;
      --panel:#fafafa;
      --line:#e6e6e6;
      --text:#111;
      --muted:#666;

      --btn:#f3f3f3;
      --btn-border:#e0e0e0;

      --highlight:#e0e0ce; /* required highlight color */
      --drop:#9fb9ff;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; margin:0; background:var(--bg); color:var(--text);
      font:14px/1.35 "Noto Sans", Helvetica, Arial, sans-serif;
    }
    button,input,textarea{ font:inherit; }

    /* Default state for unauthenticated users to prevent UI flicker on load */
    body.unauthenticated #topbar,
    body.unauthenticated #treePane,
    body.unauthenticated #detailPaneHeader,
    body.unauthenticated #treePaneHeader {
        display: none;
    }
    body.unauthenticated #detailPane {
        width: 100%;
        background: var(--panel);
    }

    #app{ height:100%; display:flex; flex-direction:column; }

    /* General actions (60px) */
    #topbar{
      height:60px; min-height:60px;
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      background:var(--panel);
    }
    .btn{
      padding:8px 10px;
      border:0px solid var(--btn-border);
      border-radius:4px;
      background:var(--btn);
      cursor:pointer;
      white-space:nowrap;
      color:var(--text);
    }
    .btn:hover{ background-color:#ff003c; color: #fff; }
    .btn:disabled{ opacity:.55; cursor:default; }

    /* File dropdown (CSS-only toggle: hover or focus-within) */
    .fileDropdown{ position:relative; display:inline-flex; align-items:center; }
    .fileDropdown .menu{
      position:absolute;
      top:calc(100% + 6px);
      left:0;
      min-width:160px;
      padding:6px;
      background:#fff;
      border:1px solid var(--btn-border);
      border-radius:4px;
      box-shadow:0 10px 24px rgba(0,0,0,.08);
      z-index:50;
    }
    /* Hidden by default; revealed by JS by adding the .open class */
    .fileDropdown .menu { display: none; }
    .fileDropdown.open .menu { display: block; }
    .menuItem{
      width:100%;
      text-align:left;
      padding:8px 10px;
      border:0;
      border-radius:4px;
      background:#fff;
      cursor:pointer;
      font:inherit;
      color:var(--text);
    }
    .menuItem:hover{ background:#f4f4f4; }
    .menuItem:disabled { opacity: .55; cursor: default; }
    .menuItem:focus{ outline:2px solid rgba(159,185,255,.55); outline-offset:2px; }

    #searchField{
      flex:1;
      min-width:160px;
      padding:8px 10px;
      border:1px solid var(--btn-border);
      border-radius:4px;
      background:#fff;
    }

    /* Layout */
    #main{ flex:1; min-height:0; display:flex; }
    #treePane{
      width:60%;
      min-width:280px;
      border-right:1px solid var(--line);
      display:flex; flex-direction:column; min-height:0;
    }
    #detailPane{
      width:40%;
      display:flex; flex-direction:column; min-height:0;
      background-color: #FFF;
    }
    .paneHeader{
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      background:#fff;
      height:60px; min-height:60px;
      /* font-weight:700; */
    }
    .paneBody{ padding:12px; overflow:auto; min-height:0; }

    .logTitleHeader {
      font-size: 28px; /* Twice the base font size of 14px */
      font-weight: 400;
      line-height: 1.2;
    }

    /* Tree */
    #rootDrop{
      border:1px dashed var(--btn-border);
      border-radius:4px;
      padding:8px 10px;
      color:var(--muted);
      margin-bottom:10px;
      background:#fff;
      user-select:none;
    }
    #rootDrop.dropOn{ outline:2px solid rgba(159,185,255,.45); color:var(--text); }

    ul.tree{ list-style:none; margin:0; padding-left:0; }
    ul.tree.children{ padding-left:22px; } /* indent */
    li.node{ margin:0; }

    .nodeRow{
      display:flex; align-items:flex-start; gap:8px;
      padding:6px 8px;
      border:1px solid transparent;
      border-radius:4px;
      user-select:none;
      background:#fff;
    }
    .nodeRow:hover{ background:#f7f7f7; }
    .nodeRow.selected{ border-color:#b9c9ef; background:#f2f7ff; }

    /* while dragging, show containers around all other decisions */
    body.dragging .nodeRow{ border-color:#d1d5db; }
    body.dragging, body.dragging *{ cursor:grabbing !important; } /* required grabbing cursor */

    .toggle{
      width:18px; flex:0 0 18px;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      color:var(--muted);
      margin-top:1px;
    }
    .toggle.inactive{ opacity:.25; cursor:default; }

    .nodeTextWrap{
      flex:1; min-width:0;
      cursor:pointer;
      white-space:normal; /* wrap */
      overflow-wrap:anywhere;
      padding:2px 4px;
      border-radius:4px;
    }
    .nodeTextWrap.highlight{ background:var(--highlight); }
    .idSuffix{ color:var(--muted); font-size:12px; margin-left:6px; }

    /* highlight parent candidate while dragging */
    .dropInside{ outline:2px solid rgba(159,185,255,.55); outline-offset:2px; }
    .dropBefore{ border-top:2px solid var(--drop); }
    .dropAfter{ border-bottom:2px solid var(--drop); }

    /* Detail */
    textarea#decisionText{
      width:100%;
      min-height:180px;
      resize:vertical;
      padding:10px;
      border:1px solid var(--btn-border);
      border-radius:4px;
      background:#fff;
    }
    .buttonRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

    .section{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
    .sectionTitle{ font-weight:800; margin-bottom:8px; }

    .mdPreview p{ margin:0; padding:0; }
    .mdPreview h1,.mdPreview h2,.mdPreview h3{ margin:0 0 6px; line-height:1.25; }
    .mdPreview ul{ margin:0 0 0 18px; padding-left:16px; list-style:disc; list-style-position: outside; }
    .mdPreview ol{ margin:0 0 0 18px; padding-left:16px; list-style:decimal; list-style-position: outside; }
    .mdPreview li{ margin:0; padding:0; }
    .mdPreview code{ background:#f4f4f4; padding:1px 4px; border-radius:6px; font-size:12px; }

    /* Similar decisions (detail pane) */
    .similarDecisionItem{
      cursor:pointer;
      display:inline-block;
      padding:2px 8px;
      border-radius:4px;
    }
    .similarDecisionItem.highlight{ background:#FFF1C2; }

    /* Concepts */
    .conceptList{ display:flex; flex-wrap:wrap; gap:8px; }
    .conceptChip{
      border:1px solid var(--btn-border);
      border-radius:16px;
      padding:6px 10px;
      background:#fff;
      cursor:pointer;
      font-size:13px;
      user-select:none;
    }
    .conceptChip:hover{ background:#D8EEFD; }
    .conceptChip.selected{ background-image: linear-gradient(90deg, #89CBFA, #D8EEFD); }

    /* Change log */
    .logItem{
      padding:8px 10px;
      border:1px solid var(--btn-border);
      border-radius:4px;
      background:#fff;
      cursor:pointer;
      margin:8px 0;
      user-select:none;
    }
    .logItem:hover{ border-color:#bfbfbf; }
    .logMeta{ color:var(--muted); font-size:12px; margin-top:2px; }
    .logDetail{ margin-top:8px; color:var(--text); }
    .logDetail ul{ margin:6px 0 0 18px; }
    .logDetail li{ margin:4px 0; }

    @media (max-width: 900px){
      #main{ flex-direction:column; }
      #treePane,#detailPane{ width:100%; }
      #treePane{ border-right:none; border-bottom:1px solid var(--line); }
    }

/* Modal (Sharing) */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.22);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:999;
}
.modalOverlay.show{ display:flex; }
.modalCard{
  width:min(720px, 100%);
  background:#fff;
  border:1px solid var(--btn-border);
  border-radius:4px;
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.modalHeader{
  padding:12px 14px;
  background:#fafafa;
  border-bottom:1px solid var(--btn-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}
.modalBody{ padding:14px; }
.modalFooter{
  padding:12px 14px;
  border-top:1px solid var(--btn-border);
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.fieldLabel{ font-weight:800; margin:10px 0 6px; }
.fieldHelp{ color:var(--muted); font-size:12px; margin-top:6px; }
textarea.modalTextarea{
  width:100%;
  min-height:92px;
  resize:vertical;
  padding:10px;
  border:1px solid var(--btn-border);
  border-radius:4px;
  background:#fff;
}
select.modalSelect{
  padding:8px 10px;
  border:1px solid var(--btn-border);
  border-radius:4px;
  background:#fff;
}
.memberRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--btn-border);
  border-radius:4px;
  background:#fff;
  margin:8px 0;
  align-items:center;
  flex-wrap:wrap;
}
.userPhoto {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.userMenuBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 2px 6px;
}
.userMenuBtn:hover {
  background-color: var(--btn);
}
.memberMeta{ color:var(--muted); font-size:12px; }
.pill{ padding:2px 8px; border:1px solid var(--btn-border); border-radius:4px; background:#fff; font-size:12px; font-weight:800; }