/* ===== RESET ===== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  cursor: none; /* hide system cursor */
  /* Stop iOS long-press from selecting text / showing the blue highlight,
     callout menu, and magnifier when press-and-holding to lock a box. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* But real text fields (the hidden typing input) must allow selection */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* cat cursor */
#catCursor {
  width: 32px;
  height: 32px;
}

/* canvas */
#canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1;
  touch-action: none; /* key for pointer drawing */
}

/* header */
.tn-header {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3000;
}

.tn-logo {
  max-width: 80px;
  opacity: 1;
}

/* smaller logo on phones only */
@media (max-width: 600px) {
  .tn-logo {
    max-width: 64px;
  }
}

/* toolbar */
.tools {
  position: fixed;
  bottom: 50px;          /* below logo */
  right: 45px;         /* align with logo */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
}

/* buttons */
.tool {
  width: 30px;
  height: 30px;
  font-size: 18px;
  border: 1px solid #fff; /* white outline */
  background: #000;       /* black box */
  color: #fff;            /* white icon text */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.tool:hover {
  background: #111;
}

.tool.active {
  background: #222;
  border-color: #ff7a00;          /* obvious accent so you can see the current tool */
  box-shadow: 0 0 0 2px #ff7a00;
}

/* pan / hand tool — Material Design "pan_tool" open-hand glyph */
.tool-pan {
  background:
    center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z'/%3E%3C/svg%3E"),
    #000;
}

/* camera / photo tool */
.tool-photo {
  background:
    center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='5' width='16' height='11' rx='1' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='11' r='3' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M6 5V4h6v1' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"),
    #000;
}

/* eraser */
.eraser-tool {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  background:
    center / 18px 18px no-repeat url("./eraser.webp"),
    #000;
  position: relative;
  cursor: pointer;
}

/* Big visual eraser ONLY — does not block canvas */
.eraser-tool::after {
  content: "";
  position: absolute;
  left: 40px;
  top: -10px;
  width: 200px;
  height: 350px;
  background: center / contain no-repeat url("./eraser.webp");
  pointer-events: none;
}

/* rgb */
.color-tool {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #fff;
  background: #000;
}

/* remove default picker chrome */
.color-tool::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-tool::-webkit-color-swatch {
  border: none;
}

.color-tool::-moz-color-swatch {
  border: none;
}

/* text size buttons (S/M/L) — plain text, so the active one inverts to white */
.size-btn {
  font-size: 14px;
  font-weight: 600;
  font-family: sans-serif;
}

/* active size button uses the same orange ring as the active tool — a white
   fill would vanish against the white page (that's why "L" looked boxless) */

/* Folder button — top of the toolbar, above the box tool. Pinned to the same
   30px width as the tool chips so the column stays aligned; the label is allowed
   to overflow, centered, so it doesn't widen the column. */
.folder-btn {
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;      /* a touch of separation from the box tool */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: sans-serif;
}

.folder-ico {
  width: 30px;
  height: 30px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

.folder-text {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.3px;
  white-space: nowrap;     /* keep "Folder" on one line; overflow stays centered */
}

/* Folder panel — slides over the right edge, lists the user's own creations */
.folder-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 82vw;
  height: 100vh;
  background: #000;
  color: #fff;
  z-index: 4000;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.folder-panel[hidden] {
  display: none;
}

.folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #333;
}

.folder-close {
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.folder-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
}

.folder-item:hover {
  background: #1a1a1a;
}

.folder-item canvas {
  flex: none;
  border-radius: 4px;
}

.folder-label {
  font-size: 13px;
  color: #ddd;
}

.folder-empty {
  padding: 10px;
  font-size: 13px;
  color: #888;
  line-height: 1.4;
}

#photoPickerLabel {
  display: none;
  position: fixed;
  z-index: 200;
  background: #000;
  color: #fff;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 15px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}