/* 3D Molecule Studio - only the molecule-specific layout. The dialog shell,
   sections, rows, selects, checks, buttons and colour swatches all come from
   the shared editor UI kit (bridge.ui / dsm-*). */

#wpie-root .wpie-mol-body {
	display: flex; gap: 14px; min-height: 0;
	height: min(660px, 74vh);
}
#wpie-root .wpie-mol-left,
#wpie-root .wpie-mol-side {
	width: 300px; flex: 0 0 300px; overflow-y: auto; overflow-x: hidden;
}
#wpie-root .wpie-mol-view {
	flex: 1; min-width: 0; position: relative; border-radius: 12px; overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #171b26, #0b0e15);
}
#wpie-root .wpie-mol-view canvas { width: 100% !important; height: 100% !important; display: block; }

/* Section-card headers: the shared ui.section (.dsm-card-head) defaults to
   --text-muted, but the other 3D studios (3D Gallery) head their cards with
   --ed-text-dim. Match them so icon + label colour is identical. */
#wpie-root .wpie-mol-left .dsm-card-head,
#wpie-root .wpie-mol-side .dsm-card-head { color: var( --ed-text-dim, #b9c0cc ); }
#wpie-root .wpie-mol-left .dsm-card-head svg,
#wpie-root .wpie-mol-side .dsm-card-head svg { opacity: 0.85; }

#wpie-root .wpie-mol-src { margin-bottom: 12px; }
#wpie-root .wpie-mol-panel { display: block; }
#wpie-root .wpie-mol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#wpie-root .wpie-mol-surprise,
#wpie-root .wpie-mol-poster,
#wpie-root .wpie-mol-buildbtn { width: 100%; margin-bottom: 10px; justify-content: center; }

#wpie-root .wpie-mol-libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#wpie-root .wpie-mol-libcard {
	display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
	padding: 8px 10px; text-align: left; cursor: pointer;
	border: 1px solid var(--dsm-border, #2a3040); background: rgba(255, 255, 255, 0.02);
	border-radius: 9px; color: inherit; transition: border-color 0.12s, transform 0.12s;
}
#wpie-root .wpie-mol-libcard:hover { border-color: #3b66ff; transform: translateY(-1px); }
#wpie-root .wpie-mol-libcard.active { border-color: #3b66ff; background: rgba(59, 102, 255, 0.14); }
#wpie-root .wpie-mol-libcard .n { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
#wpie-root .wpie-mol-libcard .f { font-size: 10.5px; opacity: 0.6; }

#wpie-root .wpie-mol-ptable { display: flex; flex-wrap: wrap; gap: 3px; }
#wpie-root .wpie-mol-pt {
	width: 30px; height: 30px; font-size: 11px; font-weight: 700; cursor: pointer;
	color: #10131b; border: 0; border-radius: 5px; padding: 0;
}
#wpie-root .wpie-mol-pt:hover { outline: 2px solid #fff; outline-offset: -1px; }

#wpie-root .wpie-mol-input { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; }
#wpie-root .wpie-mol-examples { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
#wpie-root .wpie-mol-ex { font-family: ui-monospace, monospace; font-size: 10.5px; }
#wpie-root .wpie-mol-error { color: #ff8a8a; font-size: 12px; margin-top: 8px; min-height: 14px; }
#wpie-root .wpie-mol-import { margin-top: 12px; padding-top: 12px; border-top: 1px solid var( --ed-border, #2a2f36 ); }
#wpie-root .wpie-mol-importbtn { width: 100%; justify-content: center; margin-top: 4px; }

#wpie-root .wpie-mol-atomcolors { display: flex; flex-wrap: wrap; gap: 10px; }

/* Library search field (icon inside a padded input). */
#wpie-root .wpie-mol-search { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
#wpie-root .wpie-mol-search svg { position: absolute; left: 9px; width: 15px; height: 15px; opacity: 0.5; pointer-events: none; }
#wpie-root .wpie-mol-search input { width: 100%; box-sizing: border-box; padding-left: 30px; }
#wpie-root .wpie-mol-empty { grid-column: 1 / -1; padding: 14px 4px; font-size: 12px; opacity: 0.6; text-align: center; }

/* About / molecule info box. */
#wpie-root .wpie-mol-info { display: flex; flex-direction: column; gap: 6px; }
#wpie-root .wpie-mol-info-name { font-size: 13px; font-weight: 600; }
#wpie-root .wpie-mol-info-stats { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11.5px; color: var( --ed-text-muted, #9aa1ab ); }
#wpie-root .wpie-mol-info-formula { font-weight: 600; color: var( --ed-text, #e8ebf0 ); }
#wpie-root .wpie-mol-info-desc { margin: 2px 0 0; font-size: 12px; line-height: 1.4; opacity: 0.85; }
#wpie-root .wpie-mol-ac { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }

/* Source switch fills the width and distributes evenly. */
#wpie-root .wpie-mol-src { display: flex; width: 100%; }
#wpie-root .wpie-mol-src button { flex: 1; }

/* View overlays - matched 1:1 to the other 3D studios (3D Gallery Studio):
   orbit hint as a centred pill at the bottom, "Show document" as a pill top
   right whose pressed state is signalled via [aria-pressed], not a class. */
#wpie-root .wpie-mol-hint {
	position: absolute; bottom: 10px; left: 50%; z-index: 2;
	padding: 3px 10px; font-size: 10px; color: rgba(255, 255, 255, 0.82);
	pointer-events: none; background: rgba(10, 12, 16, 0.55); border-radius: 20px;
	transform: translateX(-50%); white-space: nowrap;
}
#wpie-root .wpie-mol-docbtn {
	position: absolute; top: 10px; right: 12px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; font-size: 11px; color: var(--ed-text-muted, #9aa1ab);
	cursor: pointer; background: var(--ed-panel, #1d2126);
	border: 1px solid var(--ed-border, #2a2f36); border-radius: 20px;
}
#wpie-root .wpie-mol-docbtn svg { width: 14px; height: 14px; }
#wpie-root .wpie-mol-docbtn:hover { color: var(--ed-text, #e8ebf0); }
#wpie-root .wpie-mol-docbtn[aria-pressed='true'] { color: var(--ed-text, #e8ebf0); border-color: var(--accent, #3b66ff); }
#wpie-root .wpie-mol-view.is-doc { background-color: #05060a; background-size: contain; background-position: center; background-repeat: no-repeat; }

/* Measure read-out pill (bottom-left) + crosshair while measuring. */
#wpie-root .wpie-mol-measure { position: absolute; left: 12px; bottom: 10px; z-index: 3; padding: 4px 11px; font-size: 12px; font-weight: 600; color: #fff; background: rgba( 59, 102, 255, 0.92 ); border-radius: 20px; pointer-events: none; white-space: nowrap; }
#wpie-root .wpie-mol-measuring canvas { cursor: crosshair; }

/* Footer status: keep the shared .dsm-hint colour (the blue-grey --text-muted
   every other studio uses) and only add the gallery's ellipsis guard so a long
   name + formula can't push the footer around. */
#wpie-root .wpie-mol-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }