/* assets/foto-recorte.css — o quadro de enquadrar uma foto (ver foto-recorte.js).
   Fotos (24/09). Só tokens do shell: segue o tema claro e o escuro sozinho. */

.fr-fundo{
  /* por cima de tudo o que o pode abrir: a folha do grupo novo (1200) e o
     visor de fotos do chat (1400) */
  position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(12,16,22,.48); animation:frEntra .14s ease-out;
}
.fr-caixa{
  width:min(380px, 100%); display:flex; flex-direction:column; gap:10px;
  padding:16px 18px 14px; outline:none;
  background:var(--bg1, #fff); color:var(--text, #1b1b1f);
  border:1px solid var(--line, #e5e5ea); border-radius:18px;
  box-shadow:var(--shadow-lg, 0 18px 48px rgba(0,0,0,.22));
}
.fr-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fr-cab h3{ margin:0; font-size:15px; font-weight:650; letter-spacing:-.005em; }
.fr-x{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:var(--text2, #4a4a51); cursor:pointer;
}
.fr-x:hover{ background:var(--bg, #f3f3f5); }
.fr-ajuda{ margin:0; font-size:12px; line-height:1.4; color:var(--text3, #7a7a82); }

/* o quadro: o que se vê dentro da máscara é exatamente o que fica */
.fr-palco{
  position:relative; width:100%; max-width:300px; aspect-ratio:1; align-self:center;
  overflow:hidden; border-radius:14px; outline:none; cursor:grab; touch-action:none;
  background:#1d2127 repeating-conic-gradient(#262b33 0 25%, #1d2127 0 50%) 0 0 / 20px 20px;
}
.fr-palco.is-a-mover{ cursor:grabbing; }
.fr-palco:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan, #0071e3) 45%, transparent); }
.fr-img{
  position:absolute; left:0; top:0; max-width:none; transform-origin:0 0;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.fr-mascara{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 999px rgba(10,14,20,.55); outline:2px solid rgba(255,255,255,.92);
}
/* a de um grupo tem os cantos do avatar de grupo */
.fr-palco.is-quadrado .fr-mascara{ border-radius:24%; }
.fr-vazio{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; font-size:12px; color:#c9ced6;
}
.fr-vazio[hidden]{ display:none; }

.fr-zoom{ display:flex; align-items:center; gap:6px; padding:0 2px; }
.fr-zoom button{
  width:32px; height:32px; flex:none; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:var(--text2, #4a4a51); cursor:pointer;
}
.fr-zoom button:hover{ background:var(--bg, #f3f3f5); }
.fr-zoom input{ flex:1; min-width:0; accent-color:var(--cyan, #0071e3); }

.fr-erro{
  font-size:12.5px; line-height:1.4; padding:7px 10px; border-radius:9px;
  color:var(--red, #c0392b); background:color-mix(in srgb, var(--red, #c0392b) 9%, transparent);
}
.fr-erro[hidden]{ display:none; }

.fr-acoes{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.fr-esp{ flex:1; }
.fr-bt{
  height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line, #e5e5ea); background:var(--bg1, #fff); color:var(--text, #1b1b1f);
  font:inherit; font-size:13px; font-weight:600;
}
.fr-bt:hover{ background:var(--bg, #f3f3f5); }
.fr-bt-texto{ border-color:transparent; background:transparent; color:var(--cyan, #0071e3); padding:0 6px; }
.fr-bt-texto:hover{ background:transparent; text-decoration:underline; }
.fr-bt-principal{ background:var(--cyan, #0071e3); border-color:var(--cyan, #0071e3); color:var(--on-accent, #fff); }
.fr-bt-principal:hover{ background:var(--cyan, #0071e3); filter:brightness(1.07); }
.fr-bt:disabled{ opacity:.55; cursor:default; filter:none; }
.fr-bt:focus-visible, .fr-x:focus-visible, .fr-zoom button:focus-visible{
  outline:2px solid var(--cyan, #0071e3); outline-offset:2px;
}

/* no telemóvel é uma folha que sobe de baixo, como as outras */
@media (max-width:600px){
  .fr-fundo{ align-items:flex-end; padding:0; }
  .fr-caixa{ width:100%; border-radius:18px 18px 0 0; border-bottom:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}
@keyframes frEntra{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .fr-fundo{ animation:none; } }