/* Container */
#content div[name="codeshare"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
  color: var(--fg);
}

/* Topbar circular icon button (inherits .tab colors/hover) */
#content div[name="codeshare"] > div[lid="topbar"] .tab.icon {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 999px;             /* circular */
  display: grid; place-items: center;
}

/* Plus icon uses currentColor so it matches .tab text + hover color */
#content div[name="codeshare"] > div[lid="topbar"] .tab.icon svg {
  width: 18px; height: 18px;
  /* stroke set in SVG path; keep fill transparent */
}

/* Tabs (40px) */
#content div[name="codeshare"] > div[lid="topbar"] {
  flex: 0 0 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  overflow-x: auto; scrollbar-width: thin;
}
#content div[name="codeshare"] > div[lid="topbar"] .tab {
  flex: 0 0 auto; padding: 6px 12px; white-space: nowrap;
  border-radius: 10px; border: 1px solid var(--border);
  background: #0f172a; color: var(--fg); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
#content div[name="codeshare"] > div[lid="topbar"] .tab:hover {
  color: var(--ac); border-color: var(--ac); background: rgba(124,77,255,.10);
  transform: translateY(-0.4px);
}
#content div[name="codeshare"] > div[lid="topbar"] .tab.active {
  color: var(--ac); border-color: var(--ac); background: rgba(124,77,255,.12);
}

/* Editor wrap: flat, no margins/radius/padding */
#content div[name="codeshare"] > div[lid="editorWrap"] {
  position: relative; flex: 1 1 auto; min-height: 0;
  background: var(--bg-sec);
  border: 0; border-radius: 0; margin: 0;
  overflow: auto;  /* single scroll container for gutter + code */
}

/* Two columns: gutter + code */
#content div[name="codeshare"] > div[lid="editorWrap"] > div[lid="editorInner"] {
  display: grid; grid-template-columns: auto 1fr;
  align-items: start;
  min-height: 100%;
  width: max-content;
  min-width: 100%; 
}

/* Gutter (line numbers) */
#content div[name="codeshare"] div[lid="gutter"] {
  position: sticky; left: 0; top: 0;
  background: var(--panel);
  color: #9ca3af;
  user-select: none;
  text-align: right;
  padding: 8px 10px 8px 12px;
  border-right: 1px solid var(--border);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  min-width: 3ch;
  white-space: pre;
}

/* Code area (no extra padding, flat) */
#content div[name="codeshare"] pre[lid="pre"] {
  margin: 0;
  overflow: visible; /* participates in the parent scroll; keeps HLJS overflow behavior */
  min-height: 100%;
}
#content div[name="codeshare"] pre[lid="pre"] > code[lid="editor"] {
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
  outline: none;
  white-space: pre;         /* keep hard lines, horizontal scroll if needed */
  word-wrap: normal;        /* no soft wrap */
  tab-size: 2;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #fff;              /* base text color white */
}

/* Force HLJS background + base color here; theme still colors tokens */
#content div[name="codeshare"] .hljs {
  background: var(--bg-sec) !important;
  color: #fff;
}

/* Bottom bar (45px) */
#content div[name="codeshare"] > div[lid="bottombar"] {
  flex: 0 0 45px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
#content div[name="codeshare"] > div[lid="bottombar"] .left,
#content div[name="codeshare"] > div[lid="bottombar"] .right {
  display: flex; align-items: center; gap: 8px;
}
#content div[name="codeshare"] > div[lid="bottombar"] .round {
  width: 36px; height: 36px; border-radius: 999px;
  background: #0f172a; border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s;
  color: var(--fg);
}
#content div[name="codeshare"] > div[lid="bottombar"] .round:hover {
  color: var(--ac); border-color: var(--ac); background: rgba(124,77,255,.10);
  box-shadow: 0 6px 18px rgba(124,77,255,.22); transform: translateY(-0.4px);
}
#content div[name="codeshare"] > div[lid="bottombar"] .round svg {
  width: 18px; height: 18px; fill: currentColor;
}


/* 1) Fixed gutter width (matches: 3ch + 12px L + 10px R + 1px border ≈ 62px) */
#content div[name="codeshare"] { --gutterW: calc(3ch + 23px); }

/* 2) Make the inner grid fill the container (no always-on overflow) */
#content div[name="codeshare"] > div[lid="editorWrap"] > div[lid="editorInner"] {
  width: 100%; /* overrides the earlier width:max-content; */
}

/* 3) Code column: no overflow when short; overflow only when a line is longer */
#content div[name="codeshare"] pre[lid="pre"] > code[lid="editor"] {
  min-width: calc(100% - var(--gutterW)); /* replaces min-width:100% */
}