/* Rail trái: danh sách màn cố định trên, thư viện chiếm phần còn lại và tự cuộn */
#left-rail { display: flex; flex-direction: column; overflow: hidden; }
#left-rail > .section { flex: none; }
#left-rail > .section .section-body { max-height: 22vh; overflow-y: auto; }

.rail-lib { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rail-tabs { display: flex; gap: 4px; padding: 8px 10px 6px; flex: none; }
.rail-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-0); border: 1px solid var(--line); color: var(--fg-1);
  font-size: 12px; font-weight: 600;
}
.rail-tab:hover { color: var(--fg-0); border-color: #3a4552; }
.rail-tab.on { background: var(--bg-3); border-color: var(--accent); color: var(--fg-0); }
.rail-tab-n { font-size: 10px; font-weight: 500; color: var(--fg-2); }
.lib-expand { flex: none; width: 28px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-0); color: var(--fg-1); cursor: pointer; }
.lib-expand[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.library-wide { --rail-l: 360px; }
.library-wide #left-rail > .section .section-body { max-height: 16vh; }

/* Library controls stay fixed; only the result list scrolls. Colours reuse editor tokens. */
.lib-browser { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lib-tools { flex: none; display: flex; flex-direction: column; gap: 7px; padding: 3px 10px 8px; border-bottom: 1px solid var(--line-soft); }
.lib-search-wrap { position: relative; }
.lib-search { padding: 8px 29px 8px 10px !important; font-size: 12px; }
.lib-search::-webkit-search-cancel-button { display: none; }
.lib-clear { position: absolute; right: 4px; top: 3px; width: 26px; height: 26px; border: 0; border-radius: 4px; background: transparent; color: var(--fg-2); cursor: pointer; font-size: 18px; }
.lib-clear:hover { background: var(--bg-3); color: var(--fg-0); }
.lib-scopes { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: var(--bg-0); }
.lib-scope { flex: 1; border: 0; border-radius: 4px; padding: 5px 3px; background: transparent; color: var(--fg-2); font-size: 11px; cursor: pointer; white-space: nowrap; }
.lib-scope:hover { color: var(--fg-0); }
.lib-scope.on { color: var(--fg-0); background: var(--bg-3); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lib-filters { display: flex; gap: 5px; }
.lib-filters select { width: 50%; flex: 1; font-size: 11px; padding: 5px; }
.lib-compatible { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-1); cursor: pointer; }
.lib-compatible input { accent-color: var(--accent); margin: 0; }
.lib-summary { display: flex; justify-content: space-between; align-items: center; min-height: 17px; font-size: 10px; }
.lib-count { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.lib-reset { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 10px; padding: 0; }
.lib-results { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 9px 16px; display: flex; flex-direction: column; gap: 7px; overflow-anchor: none; }
.lib-results > * { flex-shrink: 0; }
.lib-group { display: flex; flex-direction: column; gap: 5px; }
.lib-group + .lib-group { margin-top: 9px; }
.lib-group-title { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; color: var(--fg-1); font-size: 10px; font-weight: 650; letter-spacing: .025em; }
.lib-group-title > span { color: var(--fg-2); font-weight: 400; }
.lib-family-head { display: flex; gap: 7px; align-items: center; width: 100%; padding: 9px 7px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; text-align: left; cursor: pointer; }
.lib-family-head:hover { background: var(--bg-3); border-color: var(--line); }
.lib-family-caret { color: var(--fg-2); font-size: 19px; transition: transform .15s; }
.lib-family-head[aria-expanded="true"] .lib-family-caret { transform: rotate(90deg); color: var(--accent); }
.lib-family-head[aria-expanded="true"] { border-color: var(--line); }
.lib-family-count { background: var(--bg-0); border-radius: 4px; padding: 3px 5px; font-size: 10px; color: var(--fg-1); }
.lib-family-body { display: flex; flex-direction: column; gap: 5px; margin: 5px 0 8px; padding-left: 6px; border-left: 2px solid var(--line); }
.lib-family-body[hidden] { display: none; }
.lib-card { position: relative; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-0); }
.lib-card:hover, .lib-card:focus-within { border-color: var(--accent); background: var(--bg-2); }
.lib-insert { width: 100%; display: flex; gap: 8px; align-items: center; border: 0; border-radius: inherit; background: transparent; padding: 8px 30px 8px 7px; text-align: left; cursor: pointer; min-height: 84px; }
.lib-insert[aria-disabled="true"] { cursor: help; opacity: .55; }
.lib-thumb { width: 50px; height: 64px; flex: none; background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lib-thumb svg { display: block; width: 100%; height: 100%; }
.lib-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lib-card-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; color: var(--fg-0); font-weight: 550; }
.lib-card-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: 10px; line-height: 1.4; }
.lib-add { position: absolute; right: 10px; bottom: 10px; font-size: 16px; color: var(--accent); }
.lib-save { position: absolute; right: 3px; top: 3px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 17px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--fg-2); cursor: pointer; }
.lib-save:hover { color: var(--warn); background: var(--bg-3); }
.lib-save.on { color: var(--warn); }
.lib-insert.inserted { box-shadow: inset 0 0 0 2px var(--ok); }
.lib-block-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lib-block-card { position: relative; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-0); }
.lib-block-card:hover, .lib-block-card:focus-within { border-color: var(--accent); background: var(--bg-2); }
.lib-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; border-radius: inherit; background: transparent; padding: 25px 5px 10px; user-select: none; cursor: grab; }
.lib-block svg { width: 64px; height: 38px; pointer-events: none; }
.lib-block-name { font-size: 12px; font-weight: 550; }
.lib-block-hint { color: var(--fg-2); font-size: 9px; }
.lib-block.dragging { cursor: grabbing; opacity: .65; }
.lib-more { justify-content: center; margin-top: 4px; }
.lib-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 22px 12px; color: var(--fg-1); font-size: 12px; line-height: 1.5; }
.lib-empty-icon { color: var(--fg-2); font-size: 28px; }
.lib-empty p { margin: 0 0 4px; color: var(--fg-2); }
.rail-lib button:focus-visible, .rail-lib select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail-lib [hidden] { display: none !important; }