/* Preserve phase-2 authentication and modal controls; v55 owns the signed-in diary. */
html,body{overscroll-behavior:none}
#app.app{height:100dvh;max-width:488px;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;min-height:100dvh}
#app.app .trialtag{flex:0 0 auto}
#app.app:not(.category-active) #authView{margin:13px 24px 30px;width:calc(100% - 48px);max-height:calc(100dvh - 155px);overflow-y:auto;flex-shrink:1;min-height:0}
#app.app.category-active{background:#0b223b;}
#app.app.category-active #authHeader{display:none!important}
#app.app.category-active #trialTag{position:relative;z-index:1;padding:0 22px;margin:0 0 2px;color:#f8deaa;font-size:10px;letter-spacing:.05em}
#app.app.category-active #diaryHeader{display:block;position:relative;z-index:2;flex:0 0 auto}
#app.app.category-active #bookView{display:flex;flex:1 1 auto;min-height:0;width:100%;min-width:0;overflow:hidden;position:relative}
#app.app.category-active #bookView .diary-category-shell{flex:1 1 auto;min-height:0;min-width:0;width:auto;height:auto;display:flex;overflow:hidden;position:relative;justify-content:stretch;align-items:stretch}
#app.app.category-active #bookView .diary-stage{min-height:0;max-height:none;flex:1;height:100%;width:100%}
#app.app.category-active #bookView .diary-tab{height:calc(96% / var(--tab-total,7));max-height:none;min-height:0}
#app.app.category-active #bookView .diary-tab-name{overflow-wrap:anywhere}
#app.app.category-active .diary-main-top .bar{display:flex;align-items:center}
#app.app.category-active .diary-main-brand .diary-app-heading{flex:1;min-width:0}
#app.app.category-active .diary-top-close{flex:none}
#app.app .shade{position:absolute;z-index:6000}
#app.app .shade[hidden]{display:none!important}
#app.app.category-active #shade .modal{max-width:440px}
#app.app #shade .modal-body{overscroll-behavior:contain}
#app.app #toast{z-index:6500}
#app.app .button-record-list{border:1px solid #d5e2ee;border-radius:13px;background:#fff;padding:13px 10px;text-align:left;width:100%;margin-bottom:8px;color:#1b3353;font-weight:700}
#app.app .button-record-list small{display:block;font-weight:400;color:#71839b;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app.app .modal-record-scroll{max-height:45dvh;overflow-y:auto;padding:4px 2px 14px}
@media(max-width:375px){#app.app.category-active #trialTag{padding-left:17px;font-size:9px}}

/* Phase 4: larger readable detail, without modifying the established diary geometry. */
#app.app .detail-view{display:flex;flex-direction:column;gap:8px;min-width:0;overflow-wrap:anywhere;padding:3px 1px 9px;}
#app.app .detail-label{font-size:12px;font-weight:800;color:#74849b;margin:7px 0 0;}
#app.app .detail-title{font-size:clamp(17px,4.5vw,21px);color:#112c4d;line-height:1.4;margin:0;font-weight:850;}
#app.app .detail-content{border:1px solid #dde7f2;border-radius:14px;background:#f8fbff;color:#243e5a;font-size:15px;line-height:1.65;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;}
#app.app .detail-tools{display:flex;gap:8px;justify-content:flex-end;margin:4px 0 3px;}
#app.app .detail-copy-button{border:1px solid #cbddee;color:#1c5b9d;background:#edf6ff;border-radius:12px;padding:8px 13px;font-size:13px;font-weight:800;}
#app.app .detail-files{display:flex;flex-direction:column;gap:7px;min-width:0;}
#app.app .detail-file-row{display:flex;align-items:center;gap:8px;border:1px solid #dce7f2;border-radius:12px;padding:10px;background:#fff;min-width:0;}
#app.app .detail-file-name{flex:1;min-width:0;color:#24415d;overflow-wrap:anywhere;font-size:12px;}
#app.app .detail-download{flex:none;border:0;color:#fff;background:#1e659f;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:800;}
#app.app .detail-no-files{font-size:12px;color:#94a0ae;margin:2px 0 6px;}
/* Phase 4 list legibility: maintain ring clearance; remove placeholder-like dot-only subtitle. */
#app.app.category-active .diary-inline-copy small:empty{display:none}
#app.app.category-active .diary-inline-items .diary-inline-item{max-width:100%;min-width:0}
#app.app.category-active .diary-inline-copy b{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){
 #app.app.category-active .diary-stage.diary-page-switching > *{animation:none!important}
}


/* Phase 5: only the read-only detail dialog is more content-sized.
   Keep edit/auth/recovery dialogs, font sizes, diary tabs and page-turn intact. */
#app.app #shade .modal.detail-modal{height:auto;max-height:88dvh;}
#app.app #shade .modal.detail-modal .modal-title{padding:16px 18px 4px;flex:0 0 auto;}
#app.app #shade .modal.detail-modal .modal-note{padding:2px 18px 8px;flex:0 0 auto;}
#app.app #shade .modal.detail-modal .modal-body{flex:0 1 auto;overflow-y:auto;padding:0 18px 8px;overscroll-behavior:contain;}
#app.app #shade .modal.detail-modal .modal-footer{flex:0 0 auto;padding:11px 18px 11px;}
#app.app #shade .modal.detail-modal .modal-error{margin:0;min-height:0;}
#app.app #shade .modal.detail-modal .modal-error:empty{display:none;}
#app.app #shade .modal.detail-modal .modal-error:not(:empty){padding:5px 18px 12px;}
#app.app #shade .modal.detail-modal .detail-view{gap:5px;padding:0 1px 4px;}
#app.app #shade .modal.detail-modal .detail-label{margin:5px 0 0;}
#app.app #shade .modal.detail-modal .detail-content{padding:10px 12px;}
#app.app #shade .modal.detail-modal .detail-tools{margin:2px 0 1px;}
#app.app #shade .modal.detail-modal .detail-file-row{padding:9px 10px;}
@media(max-height:630px){
 #app.app #shade .modal.detail-modal{max-height:92dvh;}
}

/* Phase 6: remembered account name; the passkey is still verified by the device. */
#app.app #authView .remembered-login{border:1px solid #c8d8ed;border-radius:15px;background:#f5f9ff;padding:14px;margin:10px 0 14px;}
#app.app #authView .remembered-heading{font-size:13px;color:#657c94;font-weight:700;margin-bottom:7px;}
#app.app #authView .remembered-name{font-size:21px;color:#123f72;font-weight:850;overflow-wrap:anywhere;}
#app.app #authView .remembered-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px;}
#app.app #authView .remembered-actions .linklike{display:inline-flex;margin:0;font-size:13px;padding:8px 0;}
#app.app #authView .remembered-actions .linklike.muted{color:#677b94;}
#app.app #authView .remember-nickname-preference{display:flex;align-items:center;gap:8px;margin:12px 0 10px;color:#38516c;font-size:14px;font-weight:650;line-height:1.4;}
#app.app #authView .remember-nickname-preference input{width:19px;height:19px;flex:none;accent-color:#2467af;margin:0;}

/* Phase 7: attachment previews are authenticated; PDFs still use download. */
#app.app .attachment-thumb{display:block;flex:none;width:72px;height:72px;object-fit:cover;object-position:center;border-radius:10px;background:#e9eff6;border:1px solid #d5e0eb;}
#app.app .attachment-thumb[hidden]{display:none;}
#app.app .selected-file-preview{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;color:#435c74;overflow-wrap:anywhere;margin:8px 0;}
#app.app .detail-file-row{align-items:center;}
#app.app .fileline{justify-content:initial;}
#app.app .fileline span{flex:1;}
@media(max-width:360px){#app.app .attachment-thumb{width:58px;height:58px}}

/* Phase8: tap thumbnail to view the original image without downloading */
#app.app .attachment-thumb[role="button"]{cursor:zoom-in;}
#app.app .attachment-thumb[role="button"]:focus-visible{outline:3px solid #c69b56;outline-offset:3px;}
.attachment-lightbox{position:fixed;inset:0;z-index:2147483640;background:rgba(4,10,22,.93);display:flex;justify-content:center;align-items:center;padding:18px;box-sizing:border-box;}
.attachment-lightbox-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:1200px;max-height:100%;}
.attachment-lightbox-close{position:absolute;right:0;top:0;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:white;font-size:32px;line-height:1;cursor:pointer;z-index:2;}
.attachment-lightbox-image{display:block;max-width:100%;max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain;border-radius:5px;}
.attachment-lightbox-caption{color:#fff;font-size:14px;text-align:center;overflow-wrap:anywhere;max-width:90%;margin-top:12px;padding-bottom:8px;}

/* Phase9: close controls pinned to the actual viewport, outside the image panel. */
.attachment-lightbox{padding:72px 16px 80px;overflow:hidden;isolation:isolate;}
.attachment-lightbox-panel{max-height:100%;min-height:0;}
.attachment-lightbox-image{max-height:calc(100dvh - 195px);max-height:calc(100svh - 195px);}
.attachment-lightbox-close{position:fixed!important;top:calc(14px + env(safe-area-inset-top, 0px))!important;right:calc(14px + env(safe-area-inset-right, 0px))!important;left:auto!important;width:52px!important;height:52px!important;min-height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;color:#10243e!important;border:2px solid #ccad70!important;box-shadow:0 3px 18px #0009!important;border-radius:50%!important;z-index:2147483647!important;font:700 32px/1 sans-serif!important;visibility:visible!important;opacity:1!important;}
.attachment-lightbox-bottom-close{position:fixed!important;bottom:calc(14px + env(safe-area-inset-bottom, 0px))!important;left:50%!important;transform:translateX(-50%)!important;min-height:46px!important;min-width:138px!important;padding:9px 20px!important;border-radius:24px!important;border:1px solid #c3a166!important;background:#fff!important;color:#15273b!important;font-size:16px!important;font-weight:700!important;box-shadow:0 4px 15px #0007!important;z-index:2147483647!important;cursor:pointer;}