/* The few things that are awkward as Tailwind classes. Everything else lives in the templates.
   Colours here match the theme in templates/all.html ("tailwind" block). */

/* Soft colour wash behind every page. */
body {
    background:
        radial-gradient(900px 380px at -10% -8%, rgb(47 91 234 / .13), transparent 70%),
        radial-gradient(700px 320px at 110% -6%, rgb(255 106 77 / .11), transparent 70%),
        #f4f6fb;
    background-repeat: no-repeat;
    -webkit-tap-highlight-color: transparent;
}

button,
a,
label,
summary {
    touch-action: manipulation
}

/* Thin loading bar at the top while a page is on its way (app.js adds .busy to <html>). */
#progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 3px;
    background: linear-gradient(90deg, #2f5bea, #ff6a4d);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
}

html.busy #progress {
    opacity: 1;
    animation: wh-progress 1.6s cubic-bezier(.2, .8, .2, 1) forwards
}

@keyframes wh-progress {
    30% {
        transform: scaleX(.45)
    }

    100% {
        transform: scaleX(.9)
    }
}

/* Empty states show only when their list has nothing in it (also after the last item is deleted). */
.empty-note {
    display: none
}

#grid:not(:has(.card))+#empty,
#comments:not(:has(li))+#no-comments,
#friend-list:not(:has(a))+#fempty,
#notes:not(:has(li))+#nempty {
    display: block
}

.xsec:not(:has(.card)) {
    display: none
}

/* Rows that arrive live slide in; removed ones fade out. */
.pop {
    animation: wh-pop .4s cubic-bezier(.2, .8, .2, 1)
}

.gone {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .18s, transform .18s
}

@keyframes wh-pop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98)
    }
}

/* Voice-note waveform: one <i> per bar, its height from data-h (0-9) or an inline style. */
.vn-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    flex: 1;
    min-width: 80px
}

.vn-wave i {
    flex: 1;
    max-width: 4px;
    min-height: 3px;
    border-radius: 2px;
    background: #9fbfa6;
    transition: height .1s, background .1s
}

.vn-wave i.on {
    background: #10a37f
}

.live-wave i {
    background: #2f5bea
}

.vn-wave i[data-h="0"] {
    height: 12%
}

.vn-wave i[data-h="1"] {
    height: 21%
}

.vn-wave i[data-h="2"] {
    height: 31%
}

.vn-wave i[data-h="3"] {
    height: 41%
}

.vn-wave i[data-h="4"] {
    height: 51%
}

.vn-wave i[data-h="5"] {
    height: 60%
}

.vn-wave i[data-h="6"] {
    height: 70%
}

.vn-wave i[data-h="7"] {
    height: 80%
}

.vn-wave i[data-h="8"] {
    height: 90%
}

.vn-wave i[data-h="9"] {
    height: 100%
}

/* Bottom sheet (profile cards, confirmations): slides up on phones, pops in on larger screens. */
#sheet[open] {
    animation: wh-sheet-in .32s cubic-bezier(.2, .8, .2, 1)
}

#sheet.closing {
    animation: wh-sheet-out .2s ease-in forwards
}

#sheet::backdrop {
    animation: wh-fade .25s
}

#sheet.closing::backdrop {
    animation: wh-fade .2s reverse forwards
}

@keyframes wh-sheet-in {
    from {
        transform: translateY(100%)
    }
}

@keyframes wh-sheet-out {
    to {
        transform: translateY(100%)
    }
}

@keyframes wh-fade {
    from {
        opacity: 0
    }
}

@media (min-width: 640px) {
    #sheet[open] {
        animation: wh-pop .22s cubic-bezier(.2, .8, .2, 1)
    }

    #sheet.closing {
        animation: wh-fade .15s reverse forwards
    }
}

/* Page changes (browsers with View Transitions; others just swap): slide for in/out, fade for tabs. */
.top {
    view-transition-name: topbar
}

.tabbar {
    view-transition-name: tabbar
}

::view-transition-group(topbar),
::view-transition-group(tabbar) {
    animation: none
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .22s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1)
}

html[data-dir=fwd]::view-transition-old(root) {
    animation-name: wh-out-l
}

html[data-dir=fwd]::view-transition-new(root) {
    animation-name: wh-in-r
}

html[data-dir=back]::view-transition-old(root) {
    animation-name: wh-out-r
}

html[data-dir=back]::view-transition-new(root) {
    animation-name: wh-in-l
}

@keyframes wh-out-l {
    to {
        opacity: 0;
        transform: translateX(-28px)
    }
}

@keyframes wh-in-r {
    from {
        opacity: 0;
        transform: translateX(36px)
    }
}

@keyframes wh-out-r {
    to {
        opacity: 0;
        transform: translateX(28px)
    }
}

@keyframes wh-in-l {
    from {
        opacity: 0;
        transform: translateX(-36px)
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important
    }
}