/* TOPBAR OVERFLOW MENU — three-dots at the far right (hover to reveal) holding Screen Snippet + Logout. */
.tb-menu { position: relative; flex: none; display: flex; align-items: center; margin-left: -8px; }   /* snug to the time */
.tb-menu-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: #8ea3ba; font-size: 14px; cursor: pointer; }
.tb-menu-btn:hover { background: rgba(140,190,240,.14); color: #d9ecfb; }
.tb-menu-pop { position: absolute; top: 100%; right: 0; min-width: 184px; z-index: 41000; display: none;   /* above the right rail */
  padding: 6px; background: #0d1420; border: 1px solid #2c445c; border-radius: 9px; box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.tb-menu-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* hover bridge */
.tb-menu.open .tb-menu-pop { display: block; }   /* click to open (toggled in frontdoor.js), not hover */
.tb-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 11px; cursor: pointer;
  border: none; border-radius: 6px; background: transparent; color: #cbd8e6; font-family: var(--font-ui); font-size: 13px; text-align: left; }
.tb-menu-item i { width: 15px; text-align: center; color: #8ea3ba; }
.tb-menu-item:hover { background: rgba(87,182,232,.1); color: #eaf3fb; }
.tb-menu-item:hover i { color: #bfe0f5; }
.tb-menu-logout { margin-top: 4px; border-top: 1px solid #1e2c3e; border-radius: 0 0 6px 6px; }
.tb-menu-logout:hover { background: rgba(150,55,48,.28); color: #ffd9d2; }
.tb-menu-logout:hover i { color: #ff9a8f; }
.snip-overlay { position: fixed; inset: 0; z-index: 41000; background-size: 100% 100%; background-position: center; cursor: crosshair; }
.snip-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border-radius: 9px; background: rgba(13,20,32,.92); border: 1px solid #2c445c; color: #cfe4f5; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .05em; pointer-events: none; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.snip-marquee { position: absolute; border: 1px dashed #7fd0ff; background: rgba(87,182,232,.08); box-shadow: 0 0 0 4000px rgba(4,7,12,.45); }

/* SKETCHBOARD — draw / annotate popup (whiteboard + image-annotate). Neon-dark chrome, light canvas. */
/* a floating, movable window (not a blocking overlay) — the backdrop lets clicks through to the app */
.skb-overlay { position: fixed; inset: 0; z-index: 28000; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .16s ease; }
.skb-overlay.show { opacity: 1; }
.skb-card { pointer-events: auto; position: relative; display: flex; flex-direction: column; max-width: 94vw; max-height: 92vh;
  background: #0d1420; border: 1px solid #2c445c; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.62);
  overflow: hidden; transform: translateY(6px) scale(.99); transition: transform .16s ease; }
.skb-overlay.show .skb-card { transform: none; }
.skb-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px 8px; cursor: move; }
.skb-title { font-family: var(--font-cond, var(--font-ui)); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #dbe7f3; }
.skb-subtitle { font-weight: 400; font-size: 13px; letter-spacing: .02em; color: #6f8299; }   /* room this image will attach to */
.skb-close { margin-left: auto; border: none; background: transparent; color: #7f93ad; font-size: 15px; cursor: pointer; }
.skb-close:hover { color: #d9ecfb; }

.skb-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 6px 14px 12px; }
.skb-tools { display: inline-flex; gap: 4px; }
.skb-tool { width: 34px; height: 30px; display: grid; place-items: center; cursor: pointer; border: 1px solid #24384a; border-radius: 7px;
  background: #0a1017; color: #9fb2c6; font-size: 13px; transition: background .12s, color .12s, border-color .12s; }
.skb-tool:hover { color: #d9ecfb; border-color: #3d6f95; }
.skb-tool.on { background: rgba(87,182,232,.16); border-color: #57b6e8; color: #bfe0f5; }
.skb-tool.off { opacity: .35; pointer-events: none; }
.skb-sep { width: 1px; align-self: stretch; background: #223247; }
.skb-ctl { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .1em; color: #6f8298; }
.skb-ctl.dim { opacity: .4; }
/* color pickers: the swatch fills the whole box (no box-inside-a-box) */
.skb-color, .skb-bg { width: 40px; height: 24px; padding: 0; border: 1px solid #2b3444; border-radius: 6px; background: none; overflow: hidden; cursor: pointer; }
.skb-color::-webkit-color-swatch-wrapper, .skb-bg::-webkit-color-swatch-wrapper { padding: 0; }
.skb-color::-webkit-color-swatch, .skb-bg::-webkit-color-swatch { border: none; border-radius: 5px; }
.skb-color::-moz-color-swatch, .skb-bg::-moz-color-swatch { border: none; border-radius: 5px; }
.skb-size { width: 108px; accent-color: #57b6e8; }
.skb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; cursor: pointer; border: 1px solid #2b3444; border-radius: 7px;
  background: #0a1017; color: #c7d3e0; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: .07em; transition: background .12s, border-color .12s, color .12s; }
.skb-btn:hover { border-color: #3d6f95; color: #eaf3fb; }
.skb-clear:hover { color: #e0788a; border-color: #5a3040; }

.skb-stagewrap { padding: 0 14px; overflow: auto; display: flex; justify-content: safe center; }
.skb-stage { position: relative; flex: none; margin: 0 auto; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #24384a, 0 10px 26px rgba(0,0,0,.4); }
.skb-fill { position: absolute; inset: 0; background: #ffffff; }
.skb-img { position: absolute; left: 0; top: 0; background: center/100% 100% no-repeat; }   /* image at natural size, top-left */
.skb-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.skb-preview { position: absolute; inset: 0; pointer-events: none; opacity: 0; }   /* live highlighter layer */
.skb-preview.on { opacity: .32; }
.skb-marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px dashed #57b6e8; background: rgba(87,182,232,.15); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.skb-cropcatch { position: absolute; inset: 0; z-index: 6; cursor: crosshair; touch-action: none; }
.skb-cropcatch[hidden] { display: none; }
/* resize grip reuses the shared image "folded corner" (.ip-grip in composer.css) — just bump its z-index */
.skb-resize { z-index: 5; }

.skb-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; }
.skb-hint { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 12px; color: #6f7d90; }
.skb-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #8ea3ba; }
.skb-check input { accent-color: #57b6e8; width: 15px; height: 15px; cursor: pointer; }
.skb-check:hover { color: #cbdcec; }
.skb-save.done { color: #7fe0a4; border-color: #2e6b47; }
.skb-attach { position: relative; overflow: hidden; border-color: #7fd0ff; color: #06121e;
  background: linear-gradient(180deg, #57b6e8, #3d8fc4); box-shadow: 0 0 18px rgba(87,182,232,.32); }
.skb-attach:hover { filter: brightness(1.07); color: #06121e; }