﻿/* v483: a small rounded bookmark bar; WID creates only the dialog. */
.for314-bookmark-bar[hidden]{display:none!important}
.for314-bookmark-bar{position:fixed;z-index:7150;display:grid;align-items:center;gap:2px;height:28px;box-sizing:border-box;padding:1px 5px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01)),rgba(15,23,34,.68);box-shadow:0 5px 13px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
.for314-bookmark-bar button{min-width:0;height:24px;padding:0 4px;border:0;border-radius:999px;background:transparent;color:#dce6f3;-webkit-text-fill-color:#dce6f3;font:500 10px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation}
.for314-bookmark-bar button:hover,.for314-bookmark-bar button[aria-current="page"]{background:rgba(135,181,243,.13);color:#a9ccff;-webkit-text-fill-color:#a9ccff}
.for314-bookmark-bar button:focus-visible{outline:2px solid #80b8ff;outline-offset:-2px}
body.local-light .for314-bookmark-bar{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.35)),rgba(237,243,250,.8);border-color:rgba(80,100,126,.2);box-shadow:0 4px 12px rgba(34,60,85,.08),inset 0 1px 0 #fff}
body.local-light .for314-bookmark-bar button{color:#364a63;-webkit-text-fill-color:#364a63}
body.local-light .for314-bookmark-bar button:hover,body.local-light .for314-bookmark-bar button[aria-current="page"]{background:rgba(62,118,190,.1);color:#1e5eaa;-webkit-text-fill-color:#1e5eaa}
.for314-bookmark-backdrop{position:fixed;inset:0;z-index:2147482900;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;background:rgba(2,8,18,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.for314-bookmark-modal{--bm-bg:#182332;--bm-text:#eef4fc;--bm-muted:#a9b8cb;--bm-border:rgba(175,196,225,.2);box-sizing:border-box;width:min(440px,100%);max-height:calc(100dvh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--bm-border);border-radius:23px;background:var(--bm-bg);color:var(--bm-text);-webkit-text-fill-color:var(--bm-text);box-shadow:0 24px 70px rgba(0,0,0,.38);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif}
body.local-light .for314-bookmark-modal{--bm-bg:#f8fafc;--bm-text:#17283d;--bm-muted:#596d82;--bm-border:rgba(76,100,132,.2)}
.for314-bookmark-modal *{box-sizing:border-box}
.for314-bookmark-modal-head{display:flex;align-items:center;gap:6px;flex:none;padding:10px 12px;border-bottom:1px solid var(--bm-border)}
.for314-bookmark-modal-head h2{flex:1;min-width:0;margin:0;font-size:16px;font-weight:700;color:var(--bm-text);-webkit-text-fill-color:var(--bm-text)}
.for314-bookmark-modal button{font-family:inherit;color:var(--bm-text);-webkit-text-fill-color:var(--bm-text);cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation}
.for314-bookmark-modal .for314-bookmark-icon{width:38px;height:38px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(127,155,195,.1);font-size:22px;line-height:1}
.for314-bookmark-modal-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px 13px 12px;-webkit-overflow-scrolling:touch}
.for314-bookmark-row{display:flex;align-items:center;gap:8px;min-width:0;border-bottom:1px solid var(--bm-border)}
.for314-bookmark-modal .for314-bookmark-open{display:grid;gap:4px;flex:1;min-width:0;padding:12px 1px;text-align:left;border:0;background:transparent;font-size:14px}
.for314-bookmark-name{font-weight:650;overflow-wrap:anywhere}
.for314-bookmark-id{font-size:11px;color:var(--bm-muted);-webkit-text-fill-color:var(--bm-muted);overflow-wrap:anywhere}
.for314-bookmark-modal .for314-bookmark-trash{font-size:18px;background:transparent}
.for314-bookmark-note,.for314-bookmark-empty{margin:12px 0 2px;font-size:12px;color:var(--bm-muted);-webkit-text-fill-color:var(--bm-muted);line-height:1.5}
.for314-bookmark-empty{padding:15px 0}
.for314-bookmark-form{display:grid;gap:15px;padding-top:15px}
.for314-bookmark-field{display:grid;gap:7px;min-width:0;font-size:13px;color:var(--bm-text);-webkit-text-fill-color:var(--bm-text)}
.for314-bookmark-field input{box-sizing:border-box;min-width:0;width:100%;height:44px;padding:8px 11px;border:1px solid var(--bm-border);border-radius:12px;background:rgba(127,155,195,.07);color:var(--bm-text);-webkit-text-fill-color:var(--bm-text);font:inherit;font-family:inherit;font-size:16px;line-height:1.35}
.for314-bookmark-hint{margin:-8px 0 0;font-size:11px;line-height:1.5;color:var(--bm-muted);-webkit-text-fill-color:var(--bm-muted)}
.for314-bookmark-field input[readonly]{color:var(--bm-muted);-webkit-text-fill-color:var(--bm-muted);cursor:default}
.for314-bookmark-field input::placeholder{color:var(--bm-muted);-webkit-text-fill-color:var(--bm-muted);opacity:1}
.for314-bookmark-error{margin:0;font-size:12px;color:#ffadb6;-webkit-text-fill-color:#ffadb6;line-height:1.4;overflow-wrap:anywhere}
body.local-light .for314-bookmark-error{color:#a32035;-webkit-text-fill-color:#a32035}
.for314-bookmark-confirm{font-size:14px;margin:20px 0;overflow-wrap:anywhere}
.for314-bookmark-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:7px;flex-wrap:wrap}
.for314-bookmark-actions button{min-height:40px;padding:8px 15px;border:1px solid var(--bm-border);border-radius:12px;background:rgba(127,155,195,.08);font-size:13px;font-weight:650}
.for314-bookmark-actions .for314-bookmark-primary{background:#376cae;border-color:#376cae;color:#fff;-webkit-text-fill-color:#fff}
.for314-bookmark-actions .for314-bookmark-delete{color:#ffadb6;-webkit-text-fill-color:#ffadb6}
body.local-light .for314-bookmark-actions .for314-bookmark-delete{color:#a32035;-webkit-text-fill-color:#a32035}
@media(min-width:760px){.for314-bookmark-bar button{font-size:11px}}
@media(max-width:300px){.for314-bookmark-backdrop{padding:5px}.for314-bookmark-modal{border-radius:16px;max-height:calc(100dvh - 10px)}.for314-bookmark-modal-head{padding:7px;gap:3px}.for314-bookmark-modal-head h2{font-size:13px}.for314-bookmark-modal .for314-bookmark-icon{width:30px;height:32px;font-size:19px}.for314-bookmark-modal-body{padding:3px 8px 10px}.for314-bookmark-modal .for314-bookmark-open{font-size:12px}.for314-bookmark-id{font-size:10px}.for314-bookmark-actions button{padding:8px 11px;font-size:12px}.for314-bookmark-bar button{font-size:10px}}

/* v485: isolate bookmark controls from the global light-mode white-button rule.
   Dark mode keeps the v483 design. */
body.local-light .for314-bookmark-bar button{
  background:transparent!important;border-color:transparent!important;
  color:#364a63!important;-webkit-text-fill-color:#364a63!important;
  box-shadow:none!important;text-shadow:none!important;
}
body.local-light .for314-bookmark-bar button:hover,
body.local-light .for314-bookmark-bar button[aria-current="page"]{
  background:rgba(62,118,190,.10)!important;
  color:#1e5eaa!important;-webkit-text-fill-color:#1e5eaa!important;
}
body.local-light .for314-bookmark-modal button{
  color:var(--bm-text)!important;-webkit-text-fill-color:var(--bm-text)!important;
  text-shadow:none!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-open{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:12px;
}
body.local-light .for314-bookmark-modal .for314-bookmark-open:hover{
  background:rgba(64,105,158,.06)!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-icon{
  background:rgba(72,109,155,.08)!important;border:0!important;box-shadow:none!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-trash{
  background:transparent!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-icon:hover{
  background:rgba(72,109,155,.14)!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-actions button{
  background:rgba(72,109,155,.07)!important;border:1px solid var(--bm-border)!important;
  box-shadow:none!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-actions .for314-bookmark-primary{
  background:#376cae!important;border-color:#376cae!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-actions .for314-bookmark-primary:hover{
  background:#2d5d98!important;border-color:#2d5d98!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-delete{
  color:#a32035!important;-webkit-text-fill-color:#a32035!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-field input{
  background:rgba(255,255,255,.58)!important;border-color:var(--bm-border)!important;
  color:var(--bm-text)!important;-webkit-text-fill-color:var(--bm-text)!important;
  box-shadow:none!important;
}
body.local-light .for314-bookmark-modal .for314-bookmark-field input[readonly]{
  background:rgba(72,109,155,.055)!important;
  color:var(--bm-muted)!important;-webkit-text-fill-color:var(--bm-muted)!important;
}

/* v516: bookmark bar follows the multiroom tab-strip interaction.
   Up to six bookmarks keep the equal-width glass bar; seven or more scroll horizontally. */
.for314-bookmark-bar.is-overflowing{
  display:flex;
  grid-template-columns:none!important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
}
.for314-bookmark-bar.is-overflowing::-webkit-scrollbar{display:none}
.for314-bookmark-bar.is-overflowing .for314-bookmark-link{
  flex:0 0 clamp(82px,20vw,132px);
  max-width:132px;
  padding-inline:7px;
}

