/* note.css — フローティング手書きノート */
#bio-note-root{
  --n-bg1:#0a1a2f; --n-border:rgba(255,255,255,.14); --n-accent:#4ea1ff;
  --n-text:#eef6ff; --n-muted:#9fc0e2; --n-panel:#13243d;
}
#bio-note-root *{box-sizing:border-box;}
/* iPad などで描画中に文字選択の青オーバーレイ/コールアウトが出るのを防ぐ */
#bio-note-root,#note-panel,#note-canvas{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
#bio-note-root .material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;line-height:1;
}

/* フローティングボタン */
#note-fab{
  position:fixed;right:22px;bottom:22px;z-index:9000;
  width:58px;height:58px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#4ea1ff,#2d6fd1);color:#fff;
  box-shadow:0 8px 22px rgba(78,161,255,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, box-shadow .2s;
}
#note-fab .material-symbols-outlined{font-size:28px;}
#note-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(78,161,255,.55);}
#note-fab:active{transform:translateY(0) scale(.98);}
#note-fab.open{background:linear-gradient(135deg,#ff7e7e,#d94646);box-shadow:0 8px 22px rgba(217,70,70,.45);}

/* パネル */
#note-panel{
  position:fixed;right:22px;bottom:92px;z-index:9001;
  width:min(760px,94vw);height:min(82vh,920px);
  min-width:380px;min-height:340px;
  background:var(--n-panel);border:1px solid var(--n-border);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:none;flex-direction:column;overflow:hidden;
  font-family:'Segoe UI',-apple-system,system-ui,'Hiragino Sans','Yu Gothic UI',sans-serif;
  color:var(--n-text);
}
#note-panel.open{display:flex;}

/* リサイズグリップ (右下) */
.note-resize{
  position:absolute;right:0;bottom:0;width:26px;height:26px;z-index:3;
  display:flex;align-items:flex-end;justify-content:flex-end;
  cursor:nwse-resize;color:var(--n-muted);touch-action:none;
}
.note-resize .material-symbols-outlined{font-size:18px;transform:rotate(-45deg);opacity:.7;}
.note-resize:hover{color:var(--n-text);}

.note-head{
  display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
  background:rgba(0,0,0,.28);border-bottom:1px solid var(--n-border);
  cursor:move;user-select:none;touch-action:none;
}
.note-head .nh-ico{color:var(--n-accent);font-size:22px;}
.note-head .nh-title{font-weight:600;}
.note-head .nh-file{font-size:.78rem;color:var(--n-muted);max-width:34%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.25);padding:.1rem .5rem;border-radius:6px;}
.note-head .nh-spacer{flex:1;}
.nh-btn{width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--n-muted);display:flex;align-items:center;justify-content:center;transition:.12s;}
.nh-btn:hover{background:rgba(78,161,255,.16);color:var(--n-text);}
.nh-btn .material-symbols-outlined{font-size:20px;}

.note-tools{
  display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;flex-wrap:wrap;
  background:rgba(0,0,0,.16);border-bottom:1px solid var(--n-border);
}
.note-tools .sep{width:1px;height:22px;background:var(--n-border);margin:0 .25rem;}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  background:var(--sw);cursor:pointer;padding:0;transition:transform .1s,border-color .12s;}
.swatch:hover{transform:scale(1.12);}
.swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--sw),0 0 8px var(--sw);transform:scale(1.12);}
.tbtn{width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--n-muted);display:flex;align-items:center;justify-content:center;transition:.12s;}
.tbtn:hover{background:rgba(78,161,255,.16);color:var(--n-text);}
.tbtn.active{background:rgba(78,161,255,.28);color:#fff;}
.tbtn .material-symbols-outlined{font-size:20px;}
.page-label{font-size:.85rem;color:var(--n-muted);min-width:48px;text-align:center;}
.note-status{font-size:.78rem;color:var(--n-accent);}

/* ペン太さ */
.note-wrap{display:inline-flex;align-items:center;gap:.35rem;}
.note-wrap .wico{color:var(--n-muted);font-size:20px;}
.note-range{-webkit-appearance:none;appearance:none;width:96px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.18);outline:none;cursor:pointer;}
.note-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--n-accent);border:2px solid #fff;cursor:pointer;}
.note-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--n-accent);
  border:2px solid #fff;cursor:pointer;}

.note-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:.7rem;background:repeating-linear-gradient(45deg,#0e1d33,#0e1d33 10px,#102138 10px,#102138 20px);}
#note-canvas{
  background:#fff;aspect-ratio:1200/1700;
  max-width:100%;max-height:100%;border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);touch-action:none;cursor:crosshair;
}

@media (max-width:560px){
  #note-panel{right:3vw;left:3vw;width:auto;bottom:84px;height:80vh;}
  #note-fab{right:16px;bottom:16px;width:52px;height:52px;}
}