.fp-overlay {
position: fixed;
inset: 0;
pointer-events: none;
}
.fp-overlay[hidden] { display: none; }
.fp-panel {
pointer-events: auto;
position: absolute;
display: flex;
flex-direction: column;
background: #ffffff;
color: var(--text, #111318);
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
overflow: hidden;
outline: none;
opacity: 0;
transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-overlay.is-open .fp-panel { opacity: 1; }
.fp-panel.is-dragging {
transition: none;
user-select: none;
-webkit-user-select: none;
}
.fp-panel.is-floating { border-radius: 18px; }
.fp-panel.is-docked {
top: 0;
right: 0;
bottom: 0;
border-width: 0 0 0 1px;
border-radius: 0;
box-shadow: -28px 0 60px rgba(15, 23, 42, 0.16);
}
body.fp-page-pushed {
padding-right: calc(var(--fp-push-width, 0px) + 16px);
}
.fp-panel.is-sheet {
left: 0;
right: 0;
bottom: 0;
height: min(86vh, calc(100vh - 56px));
height: min(86dvh, calc(100dvh - 56px));
height: min(86dvh, calc(100dvh - 56px));
border-radius: 20px 20px 0 0;
border-width: 1px 0 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.22);
transform: translateY(12px);
}
.fp-overlay.is-open .fp-panel.is-sheet:not(.is-dragging) { transform: none; }
.fp-head {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 14px 12px 18px;
border-bottom: 1px solid rgba(15, 23, 42, 0.07);
flex: 0 0 auto;
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.fp-panel.is-dragging .fp-head { cursor: grabbing; }
.fp-panel.is-docked .fp-head { cursor: default; touch-action: auto; }
.fp-grabber {
position: absolute;
top: 6px;
left: 50%;
width: 38px;
height: 4px;
margin-left: -19px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.16);
}
.fp-panel.is-docked .fp-grabber { display: none; }
.fp-head-main {
flex: 1 1 auto;
min-width: 0;
}
.fp-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.fp-icon-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: #f7f9fc;
color: #475467;
cursor: pointer;
font-family: inherit;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.fp-icon-btn:hover {
background: #eef2f7;
color: var(--accent-strong, #0066cc);
border-color: rgba(10, 132, 255, 0.35);
}
}
.fp-icon-btn:focus-visible {
outline: 3px solid rgba(10, 132, 255, 0.35);
outline-offset: 1px;
}
.fp-icon-btn[hidden] { display: none; }
.fp-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.fp-foot {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid rgba(15, 23, 42, 0.07);
background: rgba(248, 250, 252, 0.96);
}
.fp-foot[hidden] { display: none; }
.fp-resize {
position: absolute;
right: 0;
bottom: 0;
width: 28px;
height: 28px;
cursor: nwse-resize;
touch-action: none;
}
.fp-resize span {
position: absolute;
right: 6px;
bottom: 6px;
width: 10px;
height: 10px;
border-right: 2px solid rgba(15, 23, 42, 0.28);
border-bottom: 2px solid rgba(15, 23, 42, 0.28);
border-bottom-right-radius: 3px;
}
.fp-panel:not(.is-floating) .fp-resize { display: none; }
@media (pointer: coarse) {
.fp-icon-btn {
width: 44px;
height: 44px;
border-radius: 12px;
}
.fp-resize {
width: 44px;
height: 44px;
}
.fp-resize span {
right: 9px;
bottom: 9px;
width: 14px;
height: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.fp-panel { transition: none; }
}