/* =========================================================
   ITEM SHARE PANEL  (js/itemShare.js)
   ---------------------------------------------------------
   Share panel for Reader, Video and Slideshow item share links. Same
   look as the Front Page panel (front-page.css, #frontSharePanel), but:
     - it is mounted on <body>, or inside the fullscreen viewer while
       #videoViewer / #slideshowViewer is fullscreen, so it is not tied
       to #frontPage;
     - z-index sits above #app.viewerFocus (99999) and the settings
       modal (100000), and below the link-copied cue
       (#skyLinkCopiedFeedback, 2147483647), which must stay on top;
     - wide screens show a centred dialog (there is no share button on
       the page to anchor a popover to); narrow screens a bottom sheet.
   Light and dark themes follow html[data-theme="dark"].
   ========================================================= */

#itemSharePanel{
    --fs-bg:#ffffff;
    --fs-text:#202124;
    --fs-muted:#5f6368;
    --fs-line:rgba(32,33,36,.12);
    --fs-hover:rgba(32,33,36,.07);
    --fs-preview:#f1f3f4;

    position:fixed;
    inset:0;
    z-index:100001;
    visibility:hidden;
    pointer-events:none;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

html[data-theme="dark"] #itemSharePanel{
    --fs-bg:#2b2d30;
    --fs-text:#e8eaed;
    --fs-muted:#a7abb0;
    --fs-line:rgba(232,234,237,.16);
    --fs-hover:rgba(232,234,237,.10);
    --fs-preview:#3a3d41;
}

#itemSharePanel.is-open{
    visibility:visible;
    pointer-events:auto;
}

#itemSharePanel .itemShareBackdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.30);
    opacity:0;
    transition:opacity .2s ease;
}

#itemSharePanel.is-open .itemShareBackdrop{opacity:1;}

#itemSharePanel .itemShareDialog{
    position:absolute;
    box-sizing:border-box;
    background:var(--fs-bg);
    color:var(--fs-text);
    border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.32), 0 0 0 1px var(--fs-line);
    padding:14px 16px 16px;
    overflow:auto;
    overscroll-behavior:contain;
    opacity:0;
    transform:translateY(10px) scale(.98);
    transition:opacity .2s ease, transform .2s ease;
}

#itemSharePanel.is-open .itemShareDialog{
    opacity:1;
    transform:none;
}

/* Wide screens: centred dialog. */
@media (min-width:701px){
    #itemSharePanel .itemShareDialog{
        left:50%;
        top:50%;
        width:380px;
        max-width:calc(100vw - 24px);
        max-height:calc(100dvh - 48px);
        transform:translate(-50%,-50%) translateY(10px) scale(.98);
    }

    #itemSharePanel.is-open .itemShareDialog{
        transform:translate(-50%,-50%);
    }

    #itemSharePanel .itemShareHandle{display:none;}
}

/* Narrow screens: bottom sheet. */
@media (max-width:700px){
    #itemSharePanel .itemShareDialog{
        left:0;
        right:0;
        bottom:0;
        width:100%;
        max-height:min(84dvh,640px);
        border-radius:20px 20px 0 0;
        padding-bottom:calc(18px + env(safe-area-inset-bottom));
        transform:translateY(28px);
    }

    #itemSharePanel .itemShareBackdrop{background:rgba(0,0,0,.42);}
}

#itemSharePanel .itemShareHandle{
    width:38px;
    height:4px;
    margin:0 auto 10px;
    border-radius:2px;
    background:var(--fs-line);
}

#itemSharePanel .itemShareHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

#itemSharePanel .itemShareHeader h2{
    margin:0;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
    color:var(--fs-text);
}

#itemSharePanel .itemShareClose{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:-4px -6px -4px 0;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--fs-muted);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

#itemSharePanel .itemShareClose svg{width:20px;height:20px;display:block;}
#itemSharePanel .itemShareClose:hover{background:var(--fs-hover);color:var(--fs-text);}

#itemSharePanel .itemSharePreview{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    background:var(--fs-preview);
    min-width:0;
}

#itemSharePanel .itemSharePreview img{
    flex:0 0 auto;
    width:44px;
    height:44px;
    object-fit:contain;
    border-radius:10px;
    background:rgba(255,255,255,.65);
    user-select:none;
    -webkit-user-drag:none;
}

#itemSharePanel .itemSharePreviewText{
    display:flex;
    flex-direction:column;
    min-width:0;
    line-height:1.3;
}

#itemSharePanel .itemSharePreviewText strong{
    font-size:14px;
    font-weight:600;
    color:var(--fs-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#itemSharePanel .itemSharePreviewText span{
    font-size:12.5px;
    color:var(--fs-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#itemSharePanel .itemShareGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px 4px;
    margin-top:14px;
}

#itemSharePanel .itemShareTile{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    box-sizing:border-box;
    min-width:0;
    margin:0;
    padding:9px 2px 8px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--fs-text);
    font:inherit;
    text-decoration:none;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
}

#itemSharePanel .itemShareTile:hover{background:var(--fs-hover);}
#itemSharePanel .itemShareTile:active{transform:scale(.97);}

#itemSharePanel .itemShareTile:focus-visible,
#itemSharePanel .itemShareClose:focus-visible{
    outline:2px solid #1a73e8;
    outline-offset:1px;
}

#itemSharePanel .itemShareIcon{
    display:block;
    width:48px;
    height:48px;
    flex:0 0 auto;
}

#itemSharePanel .itemShareIcon svg{
    display:block;
    width:100%;
    height:100%;
}

#itemSharePanel .itemShareLabel{
    max-width:100%;
    font-size:12px;
    line-height:1.2;
    text-align:center;
    color:var(--fs-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
    #itemSharePanel .itemShareBackdrop,
    #itemSharePanel .itemShareDialog{transition:none;}
}