popup.css

/* ===== Theme tokens (dark default, matches floating panel) ===== */
:root {
  --panel-alpha: 1;
}
:root, :root[data-theme="dark"] {
  --bg-rgb: 31 31 30;           /* #1F1F1E */
  --bg-alt-rgb: 44 44 42;       /* #2C2C2A */
  --bg: rgb(var(--bg-rgb) / var(--panel-alpha));
  --bg-alt: rgb(var(--bg-alt-rgb) / var(--panel-alpha));
  --bg-elev: #26262480;
  --fg: #e8e6e3;
  --fg-dim: #c1beb8;
  --muted: #8a857e;
  --border: #3a3a37;
  --border-strong: #4a4a46;
  --btn: rgb(var(--bg-alt-rgb) / var(--panel-alpha));
  --btn-hover: #373734;
  --btn-active: #42423e;
  --accent: #d4a85f;
  --accent-soft: #d4a85f22;
  --warn: #e57373;
  --row-hover: #2a2a28;
  --highlight: #fde047;
  --highlight-fg: #111;
  --shadow: 0 12px 32px rgba(0,0,0,0.45);
}
:root[data-theme="light"] {
  --bg-rgb: 250 250 248;        /* #fafaf8 */
  --bg-alt-rgb: 243 242 238;    /* #f3f2ee */
  --bg: rgb(var(--bg-rgb) / var(--panel-alpha));
  --bg-alt: rgb(var(--bg-alt-rgb) / var(--panel-alpha));
  --bg-elev: #ffffff;
  --fg: #1a1a1a;
  --fg-dim: #3a3a3a;
  --muted: #6b7280;
  --border: #e5e4de;
  --border-strong: #cfcec8;
  --btn: #ffffff;
  --btn-hover: #ededea;
  --btn-active: #dcdbd5;
  --accent: #8a5a1a;
  --accent-soft: #8a5a1a1a;
  --warn: #dc2626;
  --row-hover: #f3f2ee;
  --highlight: #fde68a;
  --highlight-fg: #111;
  --shadow: 0 8px 24px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
}

html {
  --w: 460px;
  --h: 560px;
}
body {
  width: var(--w);
  height: var(--h);
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Standalone mode: full viewport, centered, no resize handles */
html.standalone, html.standalone body {
  width: 100vw;
  height: 100vh;
}
html.standalone body {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}
html.standalone #shapeFrame {
  border-radius: 12px;
  box-shadow: var(--shadow);
}
html.standalone .rz { display: none; }

/* Shape frame */
#shapeFrame {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  transition: clip-path 220ms ease, border-radius 220ms ease;
  border: 1px solid var(--border);
}
html.standalone #shapeFrame {
  position: static;
  height: 100%;
  border: 1px solid var(--border);
}

/* ===== Shapes (only shapes that keep all buttons reachable) ===== */
body[data-shape="rectangle"] #shapeFrame { border-radius: 4px; }
body[data-shape="rounded"]   #shapeFrame { border-radius: 18px; }
body[data-shape="circle"]    #shapeFrame { border-radius: 50%; }
body[data-shape="hexagon"]   #shapeFrame { clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%); border-radius: 0; }

/* Inset content for clipped shapes so the edge-of-frame curves/cuts don't eat buttons */
body[data-shape="circle"] #shapeFrame,
body[data-shape="hexagon"] #shapeFrame {
  padding: 6px;
}
body[data-shape="circle"] .header,
body[data-shape="circle"] .toolbar,
body[data-shape="circle"] .footer {
  padding-left: 14%;
  padding-right: 14%;
  flex-wrap: wrap;
  justify-content: center;
}
body[data-shape="hexagon"] .header,
body[data-shape="hexagon"] .toolbar,
body[data-shape="hexagon"] .footer {
  padding-left: 6%;
  padding-right: 6%;
}
body[data-shape="circle"] #editor,
body[data-shape="circle"] .preview {
  padding-left: 12%;
  padding-right: 12%;
}

/* ===== Views ===== */
.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.view[hidden] { display: none !important; }

/* ===== Header ===== */
.header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-height: 38px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  padding: 0 2px;
}
.brand-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

.header select,
#searchScope {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms ease;
}
.header select { flex: 1; min-width: 0; }
.header select:hover { border-color: var(--border-strong); }
.header select:focus { border-color: var(--accent); }

.viewTitle {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-left: 4px;
}
.spacer { flex: 1; }

.sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* ===== Buttons ===== */
.icon-btn, .text-btn {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.icon-btn:hover, .text-btn:hover {
  background: var(--btn-hover);
  color: var(--fg);
}
.icon-btn:active, .text-btn:active {
  background: var(--btn-active);
  transform: translateY(1px);
}
.icon-btn.active, .text-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.text-btn {
  background: var(--bg-elev);
  border-color: var(--border);
  font-size: 11px;
  padding: 4px 8px;
}
.text-btn:hover {
  border-color: var(--border-strong);
}

svg.ico {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ===== Shape menu ===== */
.shapeMenu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.shapeMenu button {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  width: 100%;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.shapeMenu button:hover { background: var(--btn-hover); }
.shapeMenu button.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.tool-group {
  display: flex;
  gap: 2px;
  align-items: center;
}
.tool-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* ===== Editor / preview ===== */
#editor {
  flex: 1;
  min-height: 0;
  border: none;
  outline: none;
  padding: 14px 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  caret-color: var(--accent);
}
#editor::placeholder { color: var(--muted); }

#editor::-webkit-scrollbar,
.preview::-webkit-scrollbar,
.historyList::-webkit-scrollbar { width: 8px; height: 8px; }
#editor::-webkit-scrollbar-thumb,
.preview::-webkit-scrollbar-thumb,
.historyList::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
#editor::-webkit-scrollbar-track,
.preview::-webkit-scrollbar-track,
.historyList::-webkit-scrollbar-track { background: transparent; }

.preview {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.6;
}
.preview h1, .preview h2, .preview h3 {
  margin: 0.9em 0 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.preview h1 { font-size: 18px; }
.preview h2 { font-size: 15px; }
.preview h3 { font-size: 13px; color: var(--fg-dim); }
.preview p { margin: 0.45em 0; }
.preview ul, .preview ol { margin: 0.4em 0; padding-left: 20px; }
.preview li { margin: 2px 0; }
.preview code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  border: 1px solid var(--border);
}
.preview pre {
  background: var(--bg-alt);
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  border: 1px solid var(--border);
  margin: 0.6em 0;
}
.preview pre code { background: transparent; border: 0; padding: 0; font-size: 12px; line-height: 1.55; }
.preview blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.6em 0;
  padding: 2px 12px;
  color: var(--fg-dim);
  font-style: italic;
}
.preview a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.preview a:hover { border-bottom-style: solid; }
.preview hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}
.preview strong { font-weight: 600; color: var(--fg); }
.preview em { font-style: italic; }

.preview .chk-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
  margin: 1px -6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.preview .chk-line:hover { background: var(--row-hover); }
.preview .chk-line input {
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.preview .chk-line.done .txt {
  text-decoration: line-through;
  color: var(--muted);
}
.preview .chk-line .txt { flex: 1; word-break: break-word; }

/* ===== Footer ===== */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
  gap: 8px;
  min-height: 26px;
}
#status { color: var(--fg-dim); }
#status.ok { color: var(--accent); }
.muted { color: var(--muted); }

/* ===== Search input ===== */
#searchInput {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease;
}
#searchInput:focus { border-color: var(--accent); }

/* ===== History / search results list ===== */
.historyList {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}
.historyList li {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: flex-start;
}
.historyList li:hover { background: var(--row-hover); }
.historyList .icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-top: 1px;
  font-size: 13px;
}
.historyList .body { flex: 1; min-width: 0; }
.historyList .preview {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 3.6em;
  overflow: hidden;
  color: var(--fg);
  padding: 0;
  background: transparent;
  flex: initial;
}
.historyList .meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.historyList .del {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 2px 4px;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.historyList .del:hover { color: var(--warn); background: var(--btn-hover); }
.historyList .empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 12px;
  cursor: default;
  display: block;
  font-style: italic;
}
.historyList .empty:hover { background: transparent; }

.hl {
  background: var(--highlight);
  color: var(--highlight-fg);
  padding: 0 1px;
  border-radius: 2px;
}

/* Pinned note highlight in selector */
#pinNote.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== Resize handles ===== */
.rz {
  position: fixed;
  z-index: 9999;
  background: transparent;
}
.rz-n { top: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rz-e { top: 8px; bottom: 8px; right: 0; width: 6px; cursor: ew-resize; }
.rz-w { top: 8px; bottom: 8px; left: 0; width: 6px; cursor: ew-resize; }
.rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-se {
  bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize;
  position: fixed;
}
.rz-se::after {
  content: "";
  position: absolute;
  right: 3px; bottom: 3px;
  width: 8px; height: 8px;
  background:
    linear-gradient(135deg,
      transparent 55%, var(--muted) 55%, var(--muted) 62%,
      transparent 62%, transparent 70%, var(--muted) 70%,
      var(--muted) 77%, transparent 77%);
  opacity: 0.6;
}
body.resizing { user-select: none; }

/* ===== Opacity slider ===== */
.opacity-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--fg-dim);
}
.op-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: 0.7; }
.qn-range, input[type="range"].opacity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  cursor: pointer;
  outline: none;
}
input[type="range"].opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
input[type="range"].opacity-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 0;
}
.op-label {
  font-size: 10px;
  color: var(--muted);
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===== Color tag picker ===== */
.tagMenu {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 30;
  display: flex;
  gap: 6px;
}
.tag-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease;
  padding: 0;
}
.tag-swatch:hover { transform: scale(1.15); }
.tag-swatch.active { border-color: var(--fg); }
.tag-swatch.none {
  background: var(--bg-alt);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.brand-dot { transition: background 200ms ease, box-shadow 200ms ease; }

#tagBtn.active svg { color: inherit; }

/* Inline rename input replacing noteSelect during edit */
.rename-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Pasted image preview images */
.preview .qn-img,
#preview img {
  max-width: 100%;
  max-height: 400px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0.6em 0;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.preview .qn-img-missing,
#preview .qn-img-missing {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, monospace;
}

/* Color picker menu */
.colorMenu {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease;
  padding: 0;
}
.color-swatch:hover { transform: scale(1.15); border-color: var(--fg-dim); }
.color-swatch.none {
  background: var(--bg-alt);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Drag-over highlight for image drops on the editor */
#editor.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
}