/* ============================================================
   協作白板樣式 — 沿用簡報的 Henry broadside 設計語彙
   ============================================================ */
:root{
  --color-ink:#2a2722;
  --color-paper:#fafafa;
  --color-graphite:#8c877e;
  --color-ash:#666666;
  --color-field:#eeeeee;
  --color-line:#ddd9d2;
  --font-text:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",sans-serif;
  --font-serif:'Fraunces','Noto Serif TC',Georgia,serif;
  --font-stamp:'Anton','Noto Sans TC',Impact,sans-serif;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{
  font-family:var(--font-text);font-weight:400;
  color:var(--color-ink);background:#f2efe9;
  overflow:hidden;line-height:1.5;letter-spacing:-0.01em;
}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--color-ink);color:var(--color-paper);}

/* ---------- 頂部工具列 ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:0 16px;background:var(--color-paper);
  border-bottom:1px solid var(--color-ink);
}
.topbar .brand{
  font-family:var(--font-serif);font-size:18px;letter-spacing:-.02em;white-space:nowrap;
}
.topbar .room{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-ash);border:1px solid var(--color-line);
  border-radius:var(--radius);padding:3px 9px;white-space:nowrap;
}
.topbar .spacer{flex:1;}

/* 工具按鈕 */
.tool{
  border:1px solid var(--color-ink);background:transparent;color:var(--color-ink);
  border-radius:var(--radius);padding:8px 12px;font-size:14px;line-height:1;
  min-height:40px;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s;
}
.tool:hover{background:var(--color-ink);color:var(--color-paper);}
.tool.active{background:var(--color-ink);color:var(--color-paper);}
.tool.primary{background:var(--color-ink);color:var(--color-paper);}
.tool.primary:hover{opacity:.85;}
.tool[disabled]{opacity:.4;cursor:not-allowed;}

.toolgroup{display:flex;gap:6px;align-items:center;}
.divider{width:1px;height:26px;background:var(--color-line);}

/* 顏色點 */
.swatches{display:flex;gap:6px;align-items:center;}
.swatch{
  width:24px;height:24px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;
}
.swatch.active{border-color:var(--color-ink);}

/* ---------- 線上名單 ---------- */
.presence{display:flex;align-items:center;gap:-6px;}
.pchip{
  width:30px;height:30px;border-radius:50%;margin-left:-8px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;
  border:2px solid var(--color-paper);box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.pchip:first-child{margin-left:0;}
.pcount{font-size:12px;color:var(--color-ash);margin-left:8px;white-space:nowrap;}

/* ---------- 畫布 ---------- */
.stage{position:absolute;top:56px;left:0;right:0;bottom:0;overflow:hidden;}
.stage.dragover:after{
  content:"放開以貼上圖片";
  position:absolute;inset:16px;border:3px dashed var(--color-ink);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:28px;color:var(--color-ink);
  background:rgba(250,250,250,.6);pointer-events:none;z-index:5;
}
canvas{display:block;}

/* 遠端游標層 */
.cursors{position:absolute;inset:0;pointer-events:none;z-index:6;}
.cursor{position:absolute;transform:translate(-2px,-2px);transition:transform .08s linear;}
.cursor .dot{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.cursor .name{
  position:absolute;left:14px;top:-2px;white-space:nowrap;
  font-size:11px;color:#fff;padding:1px 6px;border-radius:8px;
}

/* 提示 toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--color-ink);color:var(--color-paper);
  padding:10px 18px;border-radius:var(--radius);font-size:14px;z-index:60;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 提示列(底部說明) */
.hint{
  position:fixed;left:16px;bottom:14px;z-index:20;
  font-size:12px;color:var(--color-graphite);letter-spacing:.02em;
  background:rgba(250,250,250,.85);padding:6px 10px;border-radius:var(--radius);
  border:1px solid var(--color-line);max-width:48ch;
}

/* ---------- 登入 modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(42,39,34,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.overlay.hide{display:none;}
.card{
  background:var(--color-paper);border:1px solid var(--color-ink);border-radius:var(--radius);
  padding:40px 36px;max-width:440px;width:100%;text-align:center;
}
.card .eyebrow{
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--color-ash);margin-bottom:18px;
}
.card h1{font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1;margin-bottom:12px;letter-spacing:-.02em;}
.card p{font-size:14px;color:var(--color-ash);margin-bottom:24px;}
.card input{
  width:100%;font-family:inherit;font-size:18px;color:var(--color-ink);
  border:1px solid var(--color-ink);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;text-align:center;background:#fff;
}
.card input:focus{outline:2px solid var(--color-ink);outline-offset:1px;}
.card .colorpick{display:flex;gap:10px;justify-content:center;margin-bottom:24px;}
.card .colorpick .swatch{width:30px;height:30px;}
.card .enter{
  width:100%;background:var(--color-ink);color:var(--color-paper);
  border:1px solid var(--color-ink);border-radius:var(--radius);
  padding:14px;font-size:16px;transition:opacity .15s;
}
.card .enter:hover{opacity:.85;}
.card .status{font-size:12px;color:var(--color-graphite);margin-top:16px;min-height:1em;}

@media (max-width:760px){
  .topbar{gap:6px;padding:0 8px;overflow-x:auto;}
  .topbar .brand{display:none;}
  .tool{padding:8px 9px;}
  .pcount{display:none;}
  .hint{display:none;}
}