:root {
  --bg: #f1f1f1;
  --grid: rgba(0,0,0,.04);
  --text: #222;
  --note-shadow: 0 18px 35px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.12);

  /* mobile safe-area insets */
  --inset-left: env(safe-area-inset-left, 0px);
  --inset-right: env(safe-area-inset-right, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

/* header */
header {
  position: fixed; inset: 12px auto auto 12px; z-index: 10;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
header h1 { margin: 0 0 4px 0; font-size: 18px; }
header p  { margin: 0; font-size: 12px; opacity: .85; }

/* world */
#viewport {
  position: fixed; inset: 0; overflow: hidden; cursor: grab;
  touch-action: none; /* enable touch pan/pinch via JS */
}
#canvas {
  position: absolute;
  width: 60000px; height: 40000px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  transform: translate(0px, 0px);
}

/* sticky notes (text containment on) */
.note {
  position: absolute;
  width: 200px;
  min-height: 160px;
  max-height: 240px;                 /* tall notes scroll inside */
  padding: 16px 14px 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--note-shadow);
  display: grid;
  align-content: start;
  overflow: auto;                    /* <-- containment */
  opacity: .95;                      /* show edges of note below */
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(20px 14px at 20px -6px, rgba(0,0,0,.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,.12) 2px, transparent 2px, transparent 6px);
  transform-origin: 50% 10%;
  scrollbar-width: thin;
  transition: transform .12s ease, box-shadow .12s ease;
}
.note:hover {
  transform: rotate(var(--rot, 0deg)) scale(1.015);
  box-shadow: 0 22px 45px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14);
}
.note p {
  margin: 0;
  white-space: pre-wrap;             /* preserve newlines */
  overflow-wrap: anywhere;           /* break very long words (aaaaaaaa…) */
  word-break: break-word;            /* extra safety */
  max-width: 100%;
  font-size: 14px;
  line-height: 1.25;
}

/* hover 3-dots menu */
.note .menu {
  position: absolute; right: 6px; top: 28px; background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.15); border-radius: 8px; display: none; padding: 4px; z-index: 5;
}
.note .menu button {
  background: none; border: none; padding: 4px 8px; cursor: pointer; font-size: 11px;
}
.note:hover .dots { opacity: 1; }
.dots {
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(0,0,0,.08);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .15s ease;
}
.dots::before { content: "⋯"; font-size: 18px; line-height: 1; color: rgba(0,0,0,.65); }

/* dialogs */
dialog { border: none; border-radius: 12px; padding: 16px; width: min(720px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
#noteForm textarea { width: 100%; height: 160px; resize: vertical; padding: 10px; font-size: 14px; }
.row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
button { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: white; cursor: pointer; }
button#submitBtn { background: #111; color: white; }
.error { color: #b00020; margin: 8px 0 0; }

/* bottom-left controls */
#adminBtn,
#bmcBtn {
  position: fixed;
  bottom: calc(12px + var(--inset-bottom));
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  z-index: 12;
}

/* cog */
#adminBtn {
  left: calc(12px + var(--inset-left));
  width: 40px; height: 40px;
  cursor: pointer;
}
#adminBtn img { width: 22px; height: 22px; display: block; }

/* rectangular Buy-Me-A-Coffee banner */
#bmcBtn {
  left: calc(60px + var(--inset-left));   /* sits just right of the cog */
  width: 140px;                           /* readable */
  height: 40px;
  text-decoration: none;
}
#bmcBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;                    /* preserve banner aspect ratio */
  display: block;
}

/* optional + Add FAB (only shows on small screens via media query) */
#addBtn {
  position: fixed;
  right: calc(12px + var(--inset-right));
  bottom: calc(12px + var(--inset-bottom));
  width: 56px; height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.15);
  background: #111; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  display: none; /* hidden on desktop; enabled in media query */
  align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; cursor: pointer; z-index: 12;
}

/* admin dialog */
#adminDialog { position: relative; }
#adminDialog .x {
  position: absolute; right: 8px; top: 8px; border: none; background: transparent; font-size: 22px; cursor: pointer;
}
.login .grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.tabs .spacer { flex: 1; }
.tabs button { padding: 6px 10px; border-radius: 8px; }
.tabs .active { background: #111; color: white; }
.tabs .ghost { background: transparent; }
.tab { display: none; }
.tab.active { display: block; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid rgba(0,0,0,.1); padding: 8px; text-align: left; vertical-align: top; }

/* welcome dialog */
#welcomeDialog h3 { margin: 0 0 8px 0; }
#welcomeDialog .muted { margin: 6px 0; opacity: .85; font-size: 14px; }
#welcomeDialog a { color: inherit; text-decoration: underline; }
#welcomeEnterBtn { background: #111; color: #fff; }

/* mobile sizing tweaks */
@media (max-width: 680px) {
  #adminBtn { width: 48px; height: 48px; }
  #adminBtn img { width: 24px; height: 24px; }
  #bmcBtn   { width: 120px; height: 48px; left: calc(68px + var(--inset-left)); }
  #addBtn   { display: flex; }
}