/* General */
:root {
    --entry-highlighted-bg: rgb(100,149,237) ;
    --track-filled-color: #000 ; --track-empty-color: #e0e0e0 ; --thumb-color: #000 ; --thumb-border: #fff
}
html { height: fit-content ; min-height: 89px }
body {
    width: 268px ; margin: 0 ; font-size: .905rem ;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif ;
    background-image: linear-gradient(180deg, #b6ebff -96px, white 65px)
}

/* Color/fade mods */
.highlight-on-hover:hover { background: var(--entry-highlighted-bg) }
.highlight-on-hover:hover :where(span:not(.track), svg) { filter: invert(1) } /* invert setting labels on hover */
.disabled { opacity: 0.3 !important ; pointer-events: none }

/* Loader */
.loading-bg {
    background: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111 ;
    display: inline-grid ; align-content: center ; justify-content: center /* center spinner */
}
.loading-spinner {
    width: 19px ; aspect-ratio: 1 ; border-radius: 50% ; border: 3px solid #000 ;
    animation: loader-move-head-tail 0.8s infinite linear alternate, loader-rotate 1.6s infinite linear
}
@keyframes loader-move-head-tail {
    0% { clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0) }
    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0) }
    25% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) }
    50% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%) }
    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%) }
    75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%) }
    100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%) }
}
@keyframes loader-rotate { 
    0% { transform: scaleY(1) rotate(0deg) } 49.99% { transform: scaleY(1) rotate(135deg) }
    50% { transform: scaleY(-1) rotate(0deg) } 100% { transform: scaleY(-1) rotate(-135deg) }
}

/* Header */
header {
    border-bottom: solid 1px lightgrey ; padding: 5px 5px 5px 0 ; margin: 0 ;
    height: 38px ; display: flex ; align-items: center }
.logo { margin: 0 8px 0 12px ; position: relative ; top: 3px }
.menu-title { font-size: 1rem ; font-weight: 600 ; padding: 4px }
.master-toggle { margin-left: auto ; display: flex }

/* Menu item elements */
.menu-entry {
    position: relative ; align-items: center ; border-bottom: 1px solid lightgrey ;
    display: flex ; min-height: 2rem ; padding: 0 14px 0 2px ; white-space: nowrap ; font-size: 91%
}
.menu-icon { padding: 8px ; justify-content: center }
.menu-entry > label > .track { transform: scale(0.95) ; top: 1px } /* make child toggles smaller */
.menu-right-elem { display: flex ; height: 33px ; align-items: center ; padding: 0 11.5px ; margin-right: -14px }
.menu-caret { position: absolute ; right: 14px ; transform: rotate(-90deg) }
.menu-right-elem, .menu-caret { filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1)) }
.categorized-entries { /* add left-stripe + bg */
    border-left: 5px solid transparent ; height: 0 ;
    overflow: hidden ; /* for y-pos calc */
    border-image: linear-gradient(transparent, rgb(161,161,161)) 30 100% ;
  --border-transition: border-image 0.35s ease-in
}
.anchored { pointer-events: none } /* disable collapse */
.expanded > span { font-weight: 600 ; transform: scale(1.05) ; margin-left: 5px }

/* Slider */
div.menu-entry > input.slider {
  --track-fill-percent: 100% ; width: 100% ; margin: -2px -5px 7px 8px ; padding: 3px 2px ; cursor: pointer ;
   -webkit-appearance: none ; appearance: none ; background: none
}
.slider::-moz-range-track {
    height: 5px ; border-radius: 10px ;
    background: linear-gradient(to right,
        var(--track-filled-color) 0%, var(--track-filled-color) var(--track-fill-percent),
        var(--track-empty-color) var(--track-fill-percent), var(--track-empty-color) 100%
    )
}
.slider::-moz-range-thumb {
    width: 4.5px ; height: 14px ; background: var(--thumb-color) ; margin-top: -11px ;
    border: 4px solid var(--thumb-border) ; border-radius: 16px ; cursor: ew-resize ; transition: transform 0.05s ease
}
.slider::-moz-range-thumb:hover { transform: scaleX(1.325) }
.edit-link { text-transform: uppercase ; font-size: 0.65em ; margin-left: 0.75em ; opacity: 0.5 ; cursor: pointer }
.edit-link:hover { transition: opacity 0.1s ease-in-out ; opacity: 1 }

/* Toggle elements */
.toggle .track {
    display: block ; border-radius: 45% ; position: relative ; transform: scale(0.95) ; background: white ; 
    border: 1px solid black ; top: 1px ; height: 10px ; width: 18px ; transition: background 0.08s ease-in-out
}
.toggle.on .track { background: black ; transition: background 0.15s ease-in-out }
.toggle .track::before { /* knob */
    content: "" ; position: absolute ; height: 0.625rem ; width: 0.625rem ; left: -0.04rem ; top: -0.05rem ;
    border: 1px solid black ; border-radius: 50% ; background: white ; transition: transform 0.08s ease-in-out
}
.toggle.on .track::before { transform: translateX(9px) ; transition: transform 0.15s ease-in-out }

/* About entry */
div#about > div.menu-icon { padding: 8px 10px 8px 11px }
.ticker {
    align-content: center ; overflow: hidden ; font-size: 10px ; width: 105px ;
  --mask: linear-gradient(to right, transparent, black 20%, black 89%, transparent) ;
    mask-image: var(--mask) ; -webkit-mask-image: var(--mask) /* eslint-disable-line */
}
.ticker-em { color: green } .highlight-on-hover:hover .ticker-em { color: #28ee28 }
.ticker > div { animation: ticker linear 85s infinite } 
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
  
/* Footer */
footer { display: flex ; align-items: center ; background: #f5f5f5 ; height: 40px ; padding: 0 7px }
.chatgptjs-logo { opacity: 0.5 } .chatgptjs-logo:hover { opacity: 1 ; transition: 0.25s }
footer > .menu-icon {
    display: flex ; opacity: 0.7 ; align-items: center ; padding: 8px 5px ;
    box-sizing: border-box ; height: 96% ; width: 26px
}
footer img[src*=question-mark] { position: relative ; top: 1px }

/* Dark styles */
html.dark {
    --entry-highlighted-bg: white ;
    --track-filled-color: white ; --track-empty-color: #b2b2b2 ; --thumb-color: white ; --thumb-border: black
}
html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
html.dark .toggle .track {
    background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
html.dark .toggle.on .track { background: var(--track-filled-color) }
html.dark .toggle .track::before { top: -3px ; left: -2px ; border: 2px solid black } /* toggle knob */
html.dark .master-toggle .toggle .track::before { border-color: #444343 } /* master toggle knob */
html.dark .master-toggle:hover .toggle .track { background: #444343 }
html.dark .toggle.on .track::before { transform: translateX(11px) }
html.dark .highlight-on-hover:hover .track { background: black }
html.dark .menu-icon, html.dark .chatgptjs-logo { opacity: 1 }
html.dark .menu-icon svg, html.dark .menu-right-elem, html.dark .menu-right-elem > svg { fill: white }
html.dark .menu-icon img { filter: brightness(0) invert(1) }
html.dark .menu-icon:hover img { filter: none }
html.dark .ticker-em { color: #28ee28 } html.dark .highlight-on-hover:hover .ticker-em { color: green }
html.dark #chatgptEntry:hover img { filter: invert(1) } /* to white favicon for legibility */

/* Non-baseline features */
@supports (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .chatgptjs-logo { cursor: pointer }}
@supports (overflow: clip) { body { overflow: clip }}
@supports selector(:has(> input.slider)) { div.menu-entry:has(> input.slider) { flex-wrap: wrap ; padding-top: 2px }}
@supports selector(:has(> .chatgptjs-logo)) {
    footer > span:has(> .chatgptjs-logo) { display: flex ; align-items: center ; flex-grow: 1 ; padding-left: 2px }}
@supports (user-select: none) { body, button, input, select, textarea { user-select: none }}