/* Stitch 15077369925222454862：照片留言面板；查閱／填寫固定等寬。 */
.album-viewer-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:48px; padding:0 0 12px; color:#61464d; font-size:.8rem; border-bottom:1px solid #eadcda; }
body[data-page="wedding-album"] #photo-dialog { width:calc(100% - 32px); max-width:1440px; height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); padding:16px 24px; background:#faf7f5; border-radius:20px; overflow:auto; }
#photo-dialog .close-photo { position:static; margin:0; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; font-size:.8rem; flex:none; }
#photo-dialog #dialog-photo-host { height:calc(100% - 61px); }
#photo-dialog #slideshow { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); grid-template-rows:auto minmax(0,1fr) auto auto; column-gap:28px; height:100%; margin:0; padding-top:20px; }
#photo-dialog .slide-stage { grid-column:1; grid-row:2; min-width:0; min-height:0; display:flex; justify-content:center; align-items:center; }
#photo-dialog #slide-picture { min-width:0; max-width:100%; }
#photo-dialog #slide-image { border-radius:12px; }
#photo-dialog #slide-caption { grid-column:1; grid-row:1; color:#e9dadd; font-size:.8rem; margin:0; padding:0 12px 12px; }
#photo-dialog #slide-empty { grid-column:1; grid-row:2; align-self:center; text-align:center; }
#photo-dialog .slide-actions { grid-column:1; grid-row:3; padding-top:12px; }
#photo-dialog #viewer-status { grid-column:1; grid-row:4; margin:0; color:#f3dedb; font-size:.85rem; }
#photo-dialog #viewer-status:empty { display:none; }
#photo-dialog #photo-interactions { grid-column:2; grid-row:1/-1; min-height:0; overflow:auto; border-radius:24px; background:#fff8f7; }
#photo-dialog #photo-interactions:empty { display:none; }
#photo-dialog #slideshow:has(#photo-interactions:empty) { grid-template-columns:minmax(0,1fr); }
body[data-page="wedding-album"] #photo-interactions .comments { max-width:none; min-height:100%; box-sizing:border-box; margin:0; padding:24px; border:1px solid #f0dedc; border-radius:24px; background:#fff8f7; color:#493638; box-shadow:none; }
body[data-page="wedding-album"] #photo-interactions .comments h2 { font-family:var(--wedding-heading); font-size:1.2rem; font-weight:500; color:#65232e; margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid #efdddc; }
body[data-page="wedding-album"] #photo-interactions .comment-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; width:100%; }
body[data-page="wedding-album"] #photo-interactions .comment-tabs > button { box-sizing:border-box; width:100%; min-width:0; min-height:44px; margin:0; padding:8px 6px; border:1px solid #ddc2c2; border-radius:999px; background:#fff; color:#752c39; font-size:.85rem; line-height:1.4; display:flex; align-items:center; justify-content:center; gap:6px; }
body[data-page="wedding-album"] #photo-interactions .comment-tabs > button[aria-expanded="true"] { background:#7c2d37; color:#fff; border-color:#7c2d37; }
.album-comment-icon { width:16px; height:16px; flex:none; fill:currentColor; transform:none; rotate:none; }
body[data-page="wedding-album"] #photo-interactions .comment-intro { font-size:.75rem; color:#7b666b; line-height:1.8; margin:8px 0 12px; }
#photo-interactions .comments:has(#photo-comment-form:not([hidden]),#photo-comment-panel:not([hidden])) > .comment-intro { display:none; }
body[data-page="wedding-album"] #photo-interactions .comment-form { margin:12px 0 0; gap:10px; }
body[data-page="wedding-album"] #photo-interactions .comment-form label { font-size:.8rem; color:#61464d; font-weight:500; }
body[data-page="wedding-album"] #photo-interactions .comment-form :is(input,textarea,select) { width:100%; box-sizing:border-box; background:#fff; color:#493638; border:1px solid #e0cdcf; border-radius:12px; padding:12px 14px; font-size:1rem; }
body[data-page="wedding-album"] #photo-interactions .comment-form textarea { min-height:140px; resize:vertical; line-height:1.7; }
body[data-page="wedding-album"] #photo-interactions .comment-form-actions { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px; margin:16px 0 0; }
body[data-page="wedding-album"] #photo-interactions .comment-form-actions > button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:44px; padding:10px 8px; border:1px solid #ddc2c2; border-radius:999px; background:transparent; color:#7c2d37; font-size:.85rem; }
body[data-page="wedding-album"] #photo-interactions .comment-form-actions > .comment-send { background:#7c2d37; color:#fff; border-color:#7c2d37; }
body[data-page="wedding-album"] #photo-interactions .comment-list { margin:16px 0 0; gap:12px; }
body[data-page="wedding-album"] #photo-interactions .comment { position:relative; padding:16px 16px 16px 52px; border:1px solid #efdfdf; border-radius:18px; background:#fff; color:#614d51; font-size:.9rem; line-height:1.75; }
body[data-page="wedding-album"] #photo-interactions .comment-avatar { position:absolute; top:16px; left:14px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#f1e3e4; color:#925563; font-size:.8rem; }
body[data-page="wedding-album"] #photo-interactions .comment strong { color:#713340; font-family:var(--wedding-heading); font-size:.9rem; font-weight:500; }
#photo-interactions .comment-status { font-size:.8rem; line-height:1.8; overflow-wrap:anywhere; }
#photo-interactions .comment-status:empty { display:none; }
#photo-interactions .reactions { margin-top:0; }
#photo-interactions .reactions button { flex:1; font-size:.75rem; padding:6px; }
@media(min-width:900px) {
 #photo-dialog #photo-interactions .comments { display:flex; flex-direction:column; }
 #photo-dialog #photo-comment-form { flex:1; display:flex; flex-direction:column; }
 #photo-dialog #photo-comment-form .comment-form-actions { margin-top:auto; padding-top:24px; }
 #photo-dialog #photo-comment-form textarea { flex:none; }
}
@media(max-width:899px) {
 body[data-page="wedding-album"] #photo-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:max(12px,env(safe-area-inset-top)) 0 0; border-radius:0; }
 #photo-dialog .album-viewer-bar { margin:0 16px; padding-bottom:10px; font-size:.7rem; }
 #photo-dialog #dialog-photo-host { height:auto; }
 #photo-dialog #slideshow { display:flex; flex-direction:column; height:auto; padding-top:12px; gap:0; }
 #photo-dialog #slide-caption { order:0; font-size:.75rem; padding:0 16px 8px; }
 #photo-dialog .slide-stage { order:1; min-height:42dvh; padding:0 12px; }
 #photo-dialog #slide-empty { order:1; }
 #photo-dialog .slide-actions { order:2; padding:8px 0; }
 #photo-dialog #viewer-status { order:3; padding:0 12px; }
 #photo-dialog #photo-interactions { order:4; overflow:visible; border-radius:24px 24px 0 0; margin-top:14px; }
 body[data-page="wedding-album"] #photo-dialog #photo-interactions .comments { position:relative; border-radius:24px 24px 0 0; padding:26px 16px max(20px,env(safe-area-inset-bottom)); min-height:0; }
 #photo-dialog #photo-interactions .comments::before { content:""; position:absolute; top:10px; left:calc(50% - 18px); width:36px; height:4px; border-radius:99px; background:#ddcfcf; }
 body[data-page="wedding-album"] #photo-dialog #photo-interactions .comments h2 { font-size:1.1rem; margin-bottom:10px; padding-bottom:12px; }
 body[data-page="wedding-album"] #photo-interactions .comment { font-size:.85rem; }
}

/* 相簿照片優先：預設僅保留可操作的收合列，資訊由來賓主動展開。 */
#photo-details-sheet, #photo-details-content { display:contents; }
#photo-quick-comments, #photo-quick-write { display:none; }
.photo-details-toolbar { display:contents; }
body[data-page="wedding-album"] #photo-dialog { overflow:hidden; display:none; }
body[data-page="wedding-album"] #photo-dialog[open] { display:flex; flex-direction:column; }
#photo-dialog .album-viewer-bar { flex:none; }
#photo-dialog #dialog-photo-host { flex:1; min-height:0; height:auto; }
#photo-dialog #slideshow { display:flex; flex-direction:column; gap:0; height:100%; padding-top:8px; justify-content:center; }
#photo-dialog .slide-stage { order:0; flex:none; height:var(--photo-stage-height, 100%); min-height:0; padding:0; overflow:hidden; }
#photo-dialog #slide-picture { max-height:100%; }
#photo-dialog #slide-empty { order:0; }
#photo-dialog #photo-details-sheet { display:flex; flex-direction:column; order:1; flex:none; min-height:0; max-height:60%; width:100%; background:#fff8f7; color:#493638; border-radius:20px 20px 0 0; margin-top:8px; overflow:hidden; }
#photo-dialog #photo-details-content { display:none; min-height:0; overflow:auto; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
#photo-dialog #photo-details-sheet[data-expanded="true"] #photo-details-content { display:block; }
#photo-dialog #slide-caption { color:#61464d; padding:8px 16px; }
#photo-dialog .slide-actions { padding:0 16px 8px; }
#photo-dialog .slide-actions button { background:#fff; color:#752c39; border-color:#ddc2c2; }
#photo-dialog #photo-interactions { overflow:visible; margin:0; border-radius:0; }
body[data-page="wedding-album"] #photo-dialog #photo-interactions .comments { min-height:0; border-radius:0; padding:12px 16px 20px; }
#photo-dialog #photo-interactions .comments::before { content:none; }
#photo-dialog #viewer-status { order:2; flex:none; }


/* 照片下方只留一列入口；留言與表單由來賓主動開啟。 */
#photo-dialog .photo-details-toolbar { display:flex; flex:none; align-items:center; gap:4px; padding:0 8px; }
#photo-dialog :is(#photo-quick-comments,#photo-quick-write):not([hidden]) { display:block; flex:1; min-width:0; min-height:44px; margin:0; padding:6px 4px; border:0; border-radius:12px; background:transparent; color:#752c39; font-size:.8rem; }
#photo-dialog .close-photo { background:#fff8f7; color:#752c39; border-color:#ddc2c2; }
#photo-dialog #viewer-status { color:#752c39; }
#photo-dialog #photo-details-sheet { padding-bottom:env(safe-area-inset-bottom); }
#photo-dialog #photo-details-content { padding-bottom:0; }
@media(max-width:899px) {
 #photo-dialog .album-viewer-bar { min-height:44px; padding-bottom:4px; }
 #photo-dialog #slideshow { padding-top:4px; }
}

#photo-dialog :is(#photo-quick-comments,#photo-quick-write)[aria-expanded="true"] { background:#f2e3e2; font-weight:600; }

/* 大圖已有第一層留言入口，展開內容不重複顯示第二組按鈕。 */
body[data-page="wedding-album"] #photo-dialog #photo-interactions .comment-tabs { display:none; }
#photo-dialog #photo-quick-write:not([hidden]) { display:flex; align-items:center; justify-content:center; gap:6px; }

/* 2026-10-03：照片編號位於照片與唯一留言操作列之間。 */
#photo-dialog #slide-caption { flex:none; order:0; min-height:0; padding:8px 16px; text-align:center; }
#photo-dialog .photo-details-toolbar { order:1; }
#photo-dialog #photo-details-content { order:2; }
@media(min-width:900px) {
 #photo-dialog #slideshow { width:100%; max-width:820px; margin-inline:auto; }
 #photo-dialog .slide-stage .photo-arrow { opacity:1; background:#302526; color:#fff; }
 #photo-dialog .slide-stage .photo-arrow:focus-visible { opacity:1; }
}

#photo-dialog :is(#photo-comment-panel,#photo-comment-form) > .comment-intro { text-align:center; }