/* Anexos do recado: alvo de arrastar-e-soltar, cartao do arquivo e o visualizador de imagem. */

/* visualizador de imagem do recado */
.lupa{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
      padding:48px 32px;background:hsl(var(--scrimRaw)/.86);backdrop-filter:blur(calc(var(--vidro) * .3))}
.lupa img{max-width:100%;max-height:100%;border-radius:var(--r);display:block;
          box-shadow:var(--sombra3);cursor:default}
.lupaTopo{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;
          gap:10px;padding:0 14px;color:var(--tx2);font-size:12.5px}
.lupaTopo .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* alvo de arrastar-e-soltar */
.soltando{position:absolute;inset:6px;z-index:30;border-radius:var(--rlg);pointer-events:none;
          display:grid;place-items:center;gap:8px;text-align:center;
          background:hsl(var(--vidroPRaw)/calc(var(--opq) + .14));border:2px dashed var(--ac);color:var(--tx)}
.soltando .tt{font-size:14px;font-weight:500}
.soltando .sb{font-size:12px;color:var(--tx3)}

/* anexos no recado */
.anexo{display:flex;gap:10px;align-items:center;margin-top:5px;padding:8px 10px;border-radius:var(--r);
       background:var(--campo);box-shadow:0 0 0 1px var(--linha)}
.anexo .aico{color:var(--tx3);flex:none}
.anexo .ai{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.anexo .an{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo .as{font-size:11px;color:var(--tx4)}
.anexo a{font-size:12px}
.abarra{display:block;height:4px;border-radius:2px;background:var(--sup3);overflow:hidden}
.abarra i{display:block;height:100%;background:var(--ac);border-radius:2px;transition:width .15s}
.apr{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.aimg{display:block;margin-top:5px}
.aimg{cursor:zoom-in;border:0;background:none;padding:0}
.aimg img{max-width:100%;max-height:180px;border-radius:var(--r);display:block;
          box-shadow:0 0 0 1px var(--linha)}
.aimg:hover img{box-shadow:0 0 0 1px var(--ac)}