/*
 * Base styling derived from the original landing page.  It defines the
 * global styles, toolbar, progress bar, settings icons, and button
 * appearance.  All custom notification styles are appended at the
 * bottom of this file to keep overrides scoped and easy to find.
 */

body {
  background: #000;
}

.body {
  display: block;
  height: 100vh;
  font-family: -apple-system, Roboto, Helvetica, sans-serif;
  cursor: pointer;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.body * {
  box-sizing: border-box;
}

/* Toolbar at the bottom of the player */
.toolbar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: 40px;
  color: #fff;
  font-size: 19px;
}

/* Progress bar */
.progress {
  background: rgba(255, 255, 255, 0.2);
  height: 3px;
  width: 100%;
  position: absolute;
  top: -3px;
}

.bar {
  width: 19%;
  height: 100%;
  background-color: red;
}

/* Settings icons */
.settings {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.settings:hover {
  cursor: pointer;
}
@media (max-width: 480px) {
  .settings {
    gap: 3px;
  }
}

/* Timer text */
.time {
  white-space: nowrap;
}

/* Overlay element for the notification */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Video controls */
.control-img {
  width: auto;
  height: 100%;
}

.controls {
  display: flex;
  height: 100%;
  align-items: center;
}

/* Default text styling inside the notification */
.modal__text {
  margin-left: 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: left;
  font-weight: 400;
}
@media (min-width: 480px) {
  .modal__text {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* Button appearance */
.button {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(59, 130, 246);
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid rgb(228, 228, 231);
  border-radius: 8px;
  cursor: pointer;
}

.button--primary {
  background-color: rgb(59, 130, 246);
  color: #fff;
}

/*
 * ============================================================
 *  Simplified Android notification styling
 *
 *  The following rules override the default modal styling to produce
 *  a cleaner notification dialog.  The modal covers the full
 *  viewport using flexbox to center the alert.  The alert box has
 *  its own header, body, and button section, with a close button in
 *  the top‑right corner.  Random backgrounds are supported via
 *  bg-rotate.js; a default image and color are set here as fallbacks.
 */

/* Ensure the document occupies the full height and remove default body margins */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* Solid fallback colour; the script applies the actual image */
body,
.body {
  background: #000;
}

.body {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Darkened overlay behind the modal */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* Modal container: full‑screen flexbox for centering */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin: 0;
  padding: 0;
  transform: none;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-size: inherit;
  text-align: inherit;
}

/* Make children inside the modal interactive */
.modal > * {
  pointer-events: auto;
}

/* Alert box container */
.modal__content {
  position: relative;
  width: min(92vw, 420px);
  max-width: 420px;
  background: #fff;
  color: #000;
  border-radius: 12px;
  padding: 16px 16px 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

/* Close button: circle with an X icon */
.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.modal__close img {
  width: 16px;
  height: 16px;
}

/*
 * Removed earlier duplicate definitions of modal header, body and buttons.  See
 * the refined definitions later in this file for the final layout.
 */

/* Ensure all buttons remain clickable */
.button {
  cursor: pointer;
}

/* ===== Refined Android notification styling ===== */

/* Ensure full-height layout and remove default margins */
html,
body {
  height: 100%;
  margin: 0;
}

/* Semi-transparent backdrop behind the modal */
.overlay {
  background: rgba(0, 0, 0, 0.55);
}

/* Center the modal container within the viewport */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Allow interactions within the modal contents */
.modal > * {
  pointer-events: auto;
}

/* Notification card styling */
.modal__content {
  position: relative;
  width: min(92vw, 420px);
  max-width: 420px;
  background: #fff;
  color: #000;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

/* Close button (cross) */
.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.modal__close img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Header: icon and title centred horizontally */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px;
}
.modal__header .modal__img.bell {
  width: 20px;
  height: 20px;
}
.modal__header .modal__title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}

/* Body: centre the message both vertically and horizontally */
.modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 0 16px;
  min-height: 88px;
}
.modal__body .modal__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* Buttons: align centrally */
.modal__btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 16px 16px;
}

/* =====================================================================
 *  Final Android notification tweaks
 *
 *  These overrides refine the layout of the Android notification.  The
 *  close icon is placed within the header row rather than as a floating
 *  button, and its circular background is removed.  The header now
 *  aligns its items on a single horizontal line, with the bell icon and
 *  title on the left and the close icon on the right.  The body text
 *  aligns with the header's left margin for visual consistency.
 */

/* Header adjustments: maintain padding and align items */
.modal__header {
  padding: 16px;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

/* Close icon inside the header */
.modal__header .modal__close {
  position: static;
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.modal__header .modal__close img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Body text aligned with header */
.modal__body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px 4px 16px;
  min-height: 72px;
}

.modal__body .modal__text {
  text-align: left;
  font-size: 15px;
  line-height: 22px;
}

/*
 * -----------------------------------------------------------------
 *  Cross‑icon adjustments and scroll prevention
 *
 *  The default .modal__close style in earlier definitions created a circular
 *  background and positioned the cross absolutely.  To match the design
 *  requirement where the cross sits on the same line as the notification
 *  heading (without a circle), we override .modal__close here.  We also
 *  prevent page scrolling by setting overflow:hidden on the root elements.
 */

/* Remove the circle and absolute positioning from the close icon and
   align it to the right of the header.  This definition has higher
   specificity because it appears later in the file. */
.modal__close {
  position: static;
  margin-left: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.modal__close img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Disable scrolling on the landing page */
html,
body {
  height: 100%;
  overflow: hidden;
}