/* Capture-only SF Pro faces. These assets are not applied to the live editor;
   capture-v31.js opts the html2canvas clone into "Yappy Capture SF". */
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYREGULAR.OTF") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYMEDIUM.OTF") format("opentype");
  font-style:normal;
  font-weight:500;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYMEDIUM.OTF") format("opentype");
  font-style:normal;
  font-weight:600;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-style:normal;
  font-weight:700;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-style:normal;
  font-weight:800;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-style:normal;
  font-weight:900;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype");
  font-style:italic;
  font-weight:600;
  font-display:block;
}
@font-face{
  font-family:"Yappy Capture SF";
  src:url("/assets/fonts/sf-pro/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype");
  font-style:italic;
  font-weight:700;
  font-display:block;
}

/* Yappy Capture v42 — draggable, responsive room-chat screenshot control. */
:root{
  --yappy-capture-size:42px;
  --yappy-capture-opacity:.48;
}
#yappy-capture-button{
  position:fixed;
  z-index:2147482000;
  width:var(--yappy-capture-size);
  height:var(--yappy-capture-size);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#fff;
  background:rgba(20,20,22,var(--yappy-capture-opacity));
  box-shadow:0 4px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
  transition:background-color .16s ease,transform .14s ease,opacity .16s ease,box-shadow .16s ease;
}
#yappy-capture-button:active{cursor:grabbing;transform:scale(.96)}
#yappy-capture-button svg{width:48%;height:48%;display:block}
#yappy-capture-button.is-capturing{
  background:rgba(255,255,255,.76);
  color:#111;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
}
#yappy-capture-button.is-capturing svg{opacity:0}
#yappy-capture-button.is-capturing::after{
  content:"";
  position:absolute;
  width:42%;
  height:42%;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:yappy-capture-spin .7s linear infinite;
}
@keyframes yappy-capture-spin{to{transform:rotate(360deg)}}
#yappy-capture-button.did-capture{
  background:rgba(52,199,89,.78);
  color:#fff;
}
#yappy-capture-button.capture-error{
  background:rgba(255,69,58,.78);
  color:#fff;
}
#yappy-capture-button[hidden]{display:none!important}

.capture-setting-row{display:flex;align-items:center;gap:12px}
.capture-setting-row select{
  min-height:36px;
  border:0;
  background:transparent;
  color:var(--text-sub);
  font:inherit;
  text-align:right;
  outline:none;
  margin-left:auto;
}
.capture-opacity-wrap{display:flex;align-items:center;gap:10px;margin-left:auto;width:150px}
.capture-opacity-wrap input{width:100%;accent-color:var(--link)}
.capture-opacity-value{font-size:13px;color:var(--text-sub);min-width:34px;text-align:right}

@media (max-width:780px){
  #yappy-capture-button{position:fixed}
}
@media (prefers-reduced-motion:reduce){
  #yappy-capture-button{transition:none}
}

#yappy-capture-button.capture-ready{background:rgba(255,159,10,.82);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.14)}

/* v41 screenshot preview: second explicit tap keeps iOS native save/share reliable. */
.yappy-capture-preview{
  margin:10px 0 14px;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--divider);
  max-height:46vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.yappy-capture-preview img{
  width:100%;
  height:auto;
  max-height:46vh;
  object-fit:contain;
  display:block;
}
.yappy-capture-actions{margin-top:2px}
.yappy-capture-actions .btn{min-height:46px}