.gallery-app{display:flex;flex-direction:column;overflow:hidden;background:#080808;color:#eee}.gallery-header{display:flex;align-items:center;min-height:48px;flex:none;background:linear-gradient(#333e,#151515ee);border-bottom:1px solid #444}.gallery-header h2{font-size:18px;font-weight:400;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-header button{width:42px;min-height:48px;flex:none;padding:8px;border:0;background:none}.gallery-header img{width:28px;height:28px;object-fit:contain}.gallery-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.media-photo{display:block;width:100%;height:100%;object-fit:cover}.gallery-albums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;align-content:start}.gallery-album{position:relative;aspect-ratio:1;border:1px solid #444;background:#222;padding:0;box-shadow:3px 3px #303030,5px 5px #111;overflow:hidden}.gallery-album>span{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;padding:8px 5px;background:#000b;text-align:left;font-size:14px}.gallery-album>span img{width:20px;height:20px;object-fit:contain}.gallery-album small{margin-left:auto;color:#ccc}.gallery-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;align-content:start}.gallery-photo-grid button{aspect-ratio:1;border:0;padding:0;overflow:hidden;background:#222}.gallery-stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;touch-action:none}.gallery-image{width:100%;height:100%;padding:0;border:0;background:#000;overflow:hidden}.gallery-image .media-photo{object-fit:contain;transition:transform .2s ease-out}.gallery-image.zoomed .media-photo{transform:scale(1.8)}.gallery-previous,.gallery-next{position:absolute;top:calc(50% - 24px);width:32px;height:48px;font-size:28px;border:0;background:#0005;color:#fffa}.gallery-previous{left:0}.gallery-next{right:0}.gallery-filmstrip{display:flex;gap:3px;flex:none;overflow-x:auto;height:64px;padding:6px;background:linear-gradient(#333d,#111);overscroll-behavior:contain}.gallery-filmstrip button{width:62px;min-width:62px;height:48px;background:#222;border:2px solid transparent;padding:0;overflow:hidden}.gallery-filmstrip button.selected{border-color:#33b5e5}.gallery-stop{position:absolute;bottom:10px;border:1px solid #777;background:#222c;padding:8px}.gallery-slideshow .gallery-header,.gallery-slideshow .gallery-filmstrip{display:none}.media-menu{max-height:calc(100% - 70px);overflow:auto}.media-details dd{margin:3px 0 14px;color:#aaa;overflow-wrap:anywhere}.gallery-app .empty-note{color:#bbb;grid-column:1/-1}.camera-app{display:flex;flex-direction:column;background:#000;overflow:hidden}.camera-preview{position:relative;flex:1;min-height:0;overflow:hidden;background:#121b21}.camera-focus-area{display:block;width:100%;height:100%;border:0;padding:0;background:none;position:relative}.camera-preview .media-photo{object-fit:cover}.camera-facing{position:absolute;top:10px;left:10px;font-size:11px;text-shadow:0 1px 3px #000;pointer-events:none}.camera-focus-ring{position:absolute;left:calc(50% - 35px);top:calc(50% - 35px);width:70px;height:70px;border:2px solid transparent}.camera-focus-area.focusing .camera-focus-ring{animation:camera-focus .8s ease-out}@keyframes camera-focus{0%{border-color:#fff;transform:scale(1.3)}70%,100%{border-color:#75bd48;transform:scale(1)}}.camera-indicators{position:absolute;bottom:0;left:0;right:0;height:48px;display:flex;background:#0008;align-items:center;justify-content:space-around}.camera-indicators button{border:0;background:none;padding:8px;width:48px;height:48px}.camera-indicators img{width:30px;height:30px;object-fit:contain}.camera-bottom{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#222 url('assets/camera-bg_camera_pattern.png') repeat}.camera-bottom .camera-shutter{height:70px;width:70px;border:0;background:transparent url('assets/camera-btn_camera_shutter_holo.png') center/contain no-repeat}.camera-bottom .camera-shutter:active{background-image:url('assets/camera-btn_camera_shutter_pressed_holo.png')}.camera-thumbnail{width:48px;height:48px;border:2px solid #999;padding:2px;background:#111}.camera-photo-mode{width:48px;text-align:center}.camera-photo-mode img{width:32px;height:32px;object-fit:contain}.camera-zoom{position:absolute;right:5px;top:45px;display:flex;flex-direction:column;align-items:center;gap:5px;max-height:calc(100% - 108px);font-size:11px;text-shadow:0 1px 2px #000}.camera-zoom img{width:22px;height:22px}.camera-zoom input{writing-mode:vertical-lr;direction:rtl;width:24px;height:120px;min-height:40px;accent-color:#33b5e5}.camera-setting-title{padding:12px 16px;color:#33b5e5;border-bottom:1px solid #555}.mms-photo.media-attachment{height:135px;position:relative;overflow:hidden}.media-attachment>span{position:absolute;bottom:0;background:#0008;color:white;width:100%;padding:5px;font-size:12px}
.camera-thumbnail>img{width:100%;height:100%;object-fit:contain}
.screen:has(>#viewport>.camera-app):not(:has(>#overlay-root>.recent-panel)) #status-bar{display:none}
.screen:has(>#viewport>.camera-app):not(:has(>#overlay-root>.recent-panel)) #viewport{top:0}
.gallery-pick-cancel{flex:none;min-height:48px;padding:0 12px;border:0;border-left:1px solid #ffffff26;background:none;color:#fff;font-size:12px;text-transform:uppercase}
.gallery-header .gallery-pick-cancel{width:auto}
/* CropImage: the overlay action bar over the CropView, the picture fitted to the view, HighlightRectangle's 3 px #008aff
   outline over the #a0000000 shade and camera_crop_holo (22 dp) on the edges' midpoints. */
.gallery-crop{position:relative}
.gallery-crop .gallery-header{position:absolute;top:0;left:0;right:0;z-index:2}
.gallery-crop-stage{position:absolute;inset:0;overflow:hidden;background:#000;container-type:size;touch-action:none;user-select:none}
.gallery-crop-frame{position:absolute;inset:0;margin:auto;width:min(100cqw,100cqh * var(--ar));height:min(100cqh,100cqw / var(--ar))}
.gallery-crop-frame>img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.gallery-crop-hl{position:absolute;outline:1.28px solid #008aff;outline-offset:-.64px;box-shadow:0 0 0 200vmax #000000a0}
.gallery-crop-hl i{position:absolute;width:18.7px;height:18.7px;margin:-9.35px 0 0 -9.35px;background:url('assets/gallery-camera_crop_holo.png') center/100% 100% no-repeat;pointer-events:none}
.gallery-crop-hl .l{left:0;top:50%}.gallery-crop-hl .r{left:100%;top:50%}.gallery-crop-hl .t{left:50%;top:0}.gallery-crop-hl .b{left:50%;top:100%}
.gallery-crop-hl.moving i,.gallery-crop-hl.resizing i{display:none}
.gallery-crop-hl.resizing.l i.l,.gallery-crop-hl.resizing.r i.r,.gallery-crop-hl.resizing.t i.t,.gallery-crop-hl.resizing.b i.b{display:block}
