/* 画像の付箋（アノテーション） */

/* 画像とまったく同じ矩形・変形に重ねる面。
   スライドの矢印やボタンは z-index:10000 なので、それより上に置く。
   下に置くと、端に貼った付箋が矢印に隠れて押せなくなる（実測）。
   レイヤー自体はクリックを拾わないので、優先されるのは付箋の小さな面だけ。 */
.an-layer {
    position: absolute;
    pointer-events: none;      /* 通常は下の画像の操作（拡大・移動）を邪魔しない */
    z-index: 10001;
}
.an-layer.an-placing {
    pointer-events: auto;      /* 貼る場所を選ぶ間だけ受け取る */
    cursor: crosshair;
}

/* 付箋。位置も大きさも文字も、スライドの拡大縮小に合わせて変わる
   （レイヤーに画像と同じ変形を掛けているので、打ち消さなければ追従する） */
.an-pin {
    position: absolute;
    pointer-events: auto;
    transform: translate(-6px, -6px);
    transform-origin: 0 0;
    cursor: pointer;
    /* 指の操作をブラウザのスクロール／ピンチに取られないようにする。
       これがないと touch のドラッグ中に pointercancel が飛んで移動が止まる */
    touch-action: none;
    /* 長押しで文字が選択されたり、端末のメニューが出たりしないように */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.an-note {
    /* つまみ（.an-grip）を中に置くための基準 */
    position: relative;
    max-width: 200px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 8px;
    /* 既定は半透明。下のスライドが透けて見えるようにする。
       マウスを乗せる／タップで開いたときだけ不透明にして読みやすくする */
    background: rgba(255, 230, 128, .55);
    color: #3b3000;
    border: 1px solid rgba(224, 194, 0, .75);
    border-radius: 3px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .2);
    transition: background .12s, box-shadow .12s;
    font-size: .78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    /* 長い付箋は畳んでおく（画像が隠れないように） */
    max-height: 4.6em;
    overflow: hidden;
}
.an-pin.an-out .an-note { background: #e9ecef; border-color: #ced4da; color: #6c757d; }

/* 付箋の中の小さなオーディオコントロール。
   その時刻の録音が voicerec-server にある付箋にだけ出る。 */
.an-note-text { white-space: pre-wrap; word-break: break-word; }
.an-audio {
    /* 普段は隠し、マウスオーバー・タップ・再生中だけ出す。
       常時出すと付箋が縦に伸びてスライドが隠れるため */
    display: none;
    align-items: center;
    gap: 2px;
    /* 右下はリサイズつまみの場所。操作部品をそこへ置かない */
    padding-right: 16px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed #d4b800;
}
.an-a-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, .07);
    color: #3b3000;
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
}
.an-a-btn:hover { background: rgba(0, 0, 0, .16); }
/* つまみ（右下）が重なって押せなくなるのを防ぐ */
.an-a-btn, .an-a-open { position: relative; z-index: 6; }
.an-a-play { font-weight: 700; min-width: 30px; }
.an-a-time {
    font-size: .7rem;
    color: #6b5a00;
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}
.an-a-open {
    margin-left: auto;
    text-decoration: none;
    color: #3b3000;
    font-size: .8rem;
    padding: 0 5px;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.an-a-open:hover { background: rgba(0, 0, 0, .16); }

/* 録音つきの付箋は、閉じている間は 🔊 の印だけ出す。
   コントロール（↺ ▶ ↻ 時間 ↗）はマウスオーバー・タップ・再生中に出す */
.an-pin:has(.an-audio) .an-note { padding-right: 20px; }
.an-pin:has(.an-audio) .an-note::after {
    content: '🔊';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: .6rem;
    line-height: 1;
    opacity: .8;
    pointer-events: none;
}
.an-pin:hover .an-audio,
.an-pin.an-open .an-audio,
.an-pin.an-playing .an-audio { display: flex; }
/* コントロールが出ているときは 🔊 の印は要らない */
.an-pin:hover .an-note::after,
.an-pin.an-open .an-note::after,
.an-pin.an-playing .an-note::after { content: none; }

/* 右下のリサイズつまみ。.an-note の中にあるので、広がった付箋でも
   「見えている右下」に付いてくる */
.an-grip {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    background: #e0c200;
    border: 1px solid #b89e00;
    border-radius: 2px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity .12s;
    /* :hover で .an-note が z-index:2 に持ち上がるため、それより上に置く。
       でないと、つまみの上でマウスを押しても付箋本体に当たってしまう */
    z-index: 5;
}
.an-grip::after { content: ''; position: absolute; inset: -12px; }
.an-pin:hover .an-grip, .an-pin.an-dragging .an-grip { opacity: 1; }
.an-pin.an-dragging { cursor: grabbing; z-index: 3; }

/* 手で大きさを決めた付箋は、その枠いっぱいに広げて中でスクロールさせる。
   .an-note の max-width:200px / min-width / max-height をすべて打ち消す必要がある
   （打ち消さないと、つまみだけ動いて付箋が広がらない） */
.an-pin.an-sized .an-note {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    /* 小さくしすぎて文字が入らなくても、スクロールバーは出さずに切り詰める。
       全文はマウスを乗せる（スマホはタップ）と開いて読める */
    overflow: hidden;
}

/* マウスを乗せる／スマホでタップすると、その付箋だけ全文を出す。
   .an-pin.an-sized .an-note と同じ詳細度なので、必ずこの順番に置く */
/* 大きさ未指定の付箋は、畳んでいた高さの制限を外すだけ。幅をいじると
   「付箋の幅＝本文の幅」なのに「本文の最小幅＝付箋の幅」となって循環し、
   レイアウトが壊れる（実測で付箋が潰れた） */
.an-pin:hover .an-note,
.an-pin.an-open .an-note {
    z-index: 4;
    max-height: none;
    background: #ffe680;                  /* 読むときは不透明にする */
    border-color: #e0c200;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, .35);
}
/* 大きさを決めた付箋は幅が確定しているので、外側へはみ出して全文を出せる。
   外枠（.an-pin）の大きさは変わらないので、右下のつまみは動かない */
.an-pin.an-sized:hover .an-note,
.an-pin.an-sized.an-open .an-note {
    width: max-content;
    min-width: 100%;
    max-width: min(360px, 72vw);
    height: auto;
    min-height: 100%;
    overflow: visible;
}
/* コントロールが出ているときは、大きさ指定した付箋でも切り詰めない */
.an-pin.an-sized:hover:has(.an-audio) .an-note,
.an-pin.an-sized.an-open:has(.an-audio) .an-note,
.an-pin.an-sized.an-playing:has(.an-audio) .an-note {
    height: auto;
    min-height: 100%;
    overflow: visible;
}
/* リサイズ中は、確定する箱をそのまま見せる（全文表示を一時的に止める）。
   止めないと min-width:100% と max-content のせいで文字の自然な幅より
   狭く表示できず、マウスを外した瞬間に縮んで見た目と結果が食い違う。
   上の :hover の規則と詳細度が同じなので、必ずこの順番に置く */
.an-pin.an-resizing .an-note,
.an-pin.an-resizing:hover .an-note {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    overflow: hidden;
}

/* 2a: 入りきらない文字があることを、右下の「…」で知らせる */
.an-pin.an-clipped .an-note::before {
    content: '…';
    position: absolute;
    right: 3px;
    bottom: -2px;
    font-size: .72rem;
    line-height: 1;
    color: #8a7400;
    pointer-events: none;
}
/* 開いて全文が見えているときや、つまみを出しているときは要らない */
.an-pin:hover .an-note::before,
.an-pin.an-open .an-note::before,
.an-pin.an-resizing .an-note::before { content: none; }

/* 3a: 「文字にぴったり合わせる」ときに自然な大きさを測るための一時状態。
   測る瞬間はマウスが乗っている（:hover の規則が詳細度で勝つ）ので、
   ここだけは !important で確実に上書きする */
.an-pin.an-measure .an-note {
    width: max-content !important;
    min-width: 34px !important;
    max-width: min(360px, 72vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.an-note-text { font-size: .78rem; }

/* 空の付箋は文字なしの黄色い横長にする（後からコメントを足す運用）。
   ただし手で大きさを決めたあとは、その大きさを尊重する */
.an-pin.an-empty:not(.an-sized) .an-note {
    min-width: 0;
    min-height: 0;
    width: 60px;
    height: 34px;
    padding: 0;
}

/* 右クリック／長押しのメニュー */
.an-menu {
    position: absolute;
    z-index: 10030;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    padding: 5px;
    min-width: 168px;
}
.an-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    min-height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #212529;
    font-size: .88rem;
    cursor: pointer;
}
.an-menu-item:hover { background: #f1f3f5; }

/* 貼る場所を選んでいる間の案内 */
.an-hint {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    background: rgba(20, 22, 26, .9);
    color: #fff;
    font-size: .84rem;
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 10010;
    pointer-events: none;
}

/* 編集ダイアログ */
.an-ov {
    position: absolute;
    inset: 0;
    z-index: 10020;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.an-box {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.an-h { font-size: .95rem; font-weight: 600; margin-bottom: 10px; }
.an-ta {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;            /* iOSの自動ズーム防止 */
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    resize: vertical;
}
.an-meta { font-size: .76rem; color: #6c757d; margin-top: 10px; line-height: 1.7; }
.an-meta .an-warn { color: #b8860b; }
.an-acts { display: flex; gap: 10px; margin-top: 16px; }
.an-acts button {
    flex: 1;
    min-height: 46px;
    border-radius: 10px;
    font-size: .92rem;
    border: 1px solid #ced4da;
    background: #fff;
    cursor: pointer;
}
/* .an-acts button より詳細度を上げる（同上の理由） */
.an-acts button.an-save { background: #0d6efd; border-color: #0d6efd; color: #fff; font-weight: 600; }
.an-acts button.an-del { color: #dc3545; border-color: #f1aeb5; flex: 0 0 90px; }

/* ツールバーの📌ボタン */
.an-btn.active { background: #ffc107 !important; border-color: #ffc107 !important; color: #3b3000 !important; }
#anCount { font-size: .72rem; margin-left: 3px; }

/* 本文サムネイルのバッジ */
.an-badge {
    position: absolute;
    right: 6px;
    top: 6px;
    background: #ffe680;
    color: #3b3000;
    border: 1px solid #e0c200;
    border-radius: 999px;
    font-size: .72rem;
    padding: 2px 7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 768px) {
    /* スマホでは、閉じている付箋はすべて最小の四角にする。
       付箋が大きいとスライドがまったく見えなくなるため。中身はタップで出す。 */
    /* 大きさ指定（inline style）も外して、外枠を16pxの四角に揃える。
       外枠がずれていると、指の当たり判定も違う場所に出てしまう */
    .an-pin:not(.an-open) { width: auto !important; height: auto !important; }
    .an-pin:not(.an-open) .an-note {
        width: 16px !important;
        height: 16px !important;
        min-width: 0;
        min-height: 0;
        max-width: none;
        padding: 0;
        overflow: hidden;
    }
    .an-pin:not(.an-open) .an-note-text,
    .an-pin:not(.an-open) .an-audio { display: none; }
    /* 閉じている間は 🔊 の印も出さない（16pxの四角に入らない） */
    .an-pin:not(.an-open) .an-note::after { content: none; }
    .an-pin:not(.an-open) .an-note { padding-right: 0 !important; }
    /* 見た目は小さいまま、指の当たり判定だけ広げる */
    .an-pin:not(.an-open)::after { content: ''; position: absolute; inset: -14px; }
    /* タップで開いたときは読みやすい大きさにする */
    .an-pin.an-open .an-note {
        font-size: .82rem;
        padding: 8px 10px;
        min-width: 120px;
        width: max-content;
        height: auto;
    }
    /* スマホではリサイズしない（常に最小表示なので結果が見えない） */
    .an-grip { display: none; }
    .an-audio { padding-right: 0; }        /* つまみが無いので詰めなくてよい */
    .an-a-btn, .an-a-open { min-width: 40px; height: 40px; font-size: .9rem; }
    .an-menu-item { min-height: 48px; font-size: .95rem; }
    .an-menu { min-width: 200px; }
    .an-audio { gap: 4px; }
    .an-box { max-width: none; border-radius: 14px; }
    .an-ov { align-items: flex-end; padding: 0; }
    .an-box { border-radius: 14px 14px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .an-acts button { min-height: 48px; }
    .an-hint { font-size: .8rem; padding: 10px 14px; }
}