/* =======================================================================

GLOBAL NOTES:
---------------------------------------
this stylesheet controls layout, typography, sidebar, music player, etc.


TABLE OF CONTENTS:
---------------------------------------
1. reset/base rules
2. layout grid 
3. sidebar styling
4. main content styling
5. music player
6. mobile adjustments

======================================================================= */

/* -------------------------------------------------------------------- */
/* -------------------   RESET / BASE CODE   -------------------------- */
/* -------------------------------------------------------------------- */

/* apply border-box sizing everywhere */
* {
  box-sizing: border-box;
}

/* make page fill full browser height */
html, body {
  height: 100%;
}

/* base body styling */
body {
  margin: 0;
  font-family: system-ui, -apple-system,
              Segoe UI, Arial, sans-serif;
  line-height: 1.6;
  background: #ffffff;                         /* page background color */
  color: #111;                                       /* main text color */
  
  overflow: hidden;                        /* prevents double scrollbars*/
}

/* -------------------------------------------------------------------- */
/* ------------------------   GRID LAYOUT   --------------------------- */
/* -------------------------------------------------------------------- */

/* main page grid */
/* left side = sidebar; right side = content */

.layout {
  display: grid;                               /* enable CSS grid layout*/
  grid-template-columns: 260px 1fr 260px;     /* sidebar, main, updates */
  height: 100vh;                         /* fill entire viewport height */
}


/* -------------------------------------------------------------------- */
/* --------------------------   SIDEBAR   ----------------------------- */
/* -------------------------------------------------------------------- */

/* sidebar container styling */
.sidebar {
  padding: 24px 20px;                                   /*inner spacing */
  border-right: 1px solid #ddd;                /* vertical divider line */
  background: #fafafa;                              /* background color */
  overflow-y: auto;                       /* independent sidebar scroll */
}

/* sidebar section heading */
.sidebar h2 {
  margin-top: 0;                                      /* remove top gap */
  font-size: 1.2rem;                            /* slightly larger text */
  font-weight: 600;                                        /* semi-bold */
}

/* navigation links */
.nav a {
  display: block;                          /* each link on its own line */
  padding: 2px 0;                                   /* vertical spacing */
  text-decoration: none;                            /* remove underline */
  line-height: 1.7;                             /* tighter text spacing */
  color: #111;                                       /* match body text */
}

/* hover effect for navigation */
.nav a:hover {
  text-decoration: underline;                /* show underline on hover */
}

.sidebar-xatu {
  display: block;        /* lets margin + alignment behave predictably */
  margin-left: auto;     /* pushes it to the right */
  margin-bottom: -20px;   /* pulls it down closer to the <hr> */
}

/* small quote text in sidebar */
.sidebar-quote {
  margin-top: 16px;                              /* spacing above quote */
  font-size: 0.9rem;                 /* slightly smaller than body text */
  opacity: 0.8;                                 /* soften text visually */
}

/* -------------------------------------------------------------------- */
/* ------------------ SIDEBAR "SYSTEM NOTICE" DIALOG ------------------ */
/* -------------------------------------------------------------------- */

.windialog{
  width: 100%;
  background: #d4d0c8;

  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff; /* same outer bevel as player */

  font-family: Tahoma, Verdana, sans-serif;
  color: #000;
}

.windialog.is-hidden{
  display: none;
}

/* keep titlebar the same; just ensure it fits */
.windialog__titlebar{
  height: 20px;
}

/* dialog body */
.windialog__body{
  padding: 10px 10px 8px;
}

/* quote text */
.windialog__text{
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
}

/* buttons row */
.windialog__actions{
  display: flex;
  justify-content: center;   /* center like classic dialogs */
  gap: 12px;                 /* more breathing room */
  margin-top: 12px;
}

/* Override winbtn heaviness for dialog buttons */
.windialog__btn{
  min-width: 88px;            /* classic dialog button width */
  height: 24px;

  padding: 0 10px;
  margin: 0;

  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  font-weight: 400;           /* not bold */
  text-decoration: none;      /* just in case */
  color: #000;

  background: #d4d0c8;

  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff; /* bevel */

  border-radius: 0;           /* no rounding */
  box-shadow: none;

  cursor: pointer;

  /* prevents weird default button look in some browsers */
  -webkit-appearance: none;
  appearance: none;
}

.windialog__btn:active{
  border-color: #404040 #ffffff #ffffff #404040; /* pressed */
}

/* pressed state */
.windialog__btn{
  min-width: 70px;
  height: 22px;
  padding: 0 12px;

  font-size: 12px;
  font-weight: 400;   /* ← THIS ensures not bold */
  line-height: 20px;

  background: #d4d0c8;

  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;

  cursor: pointer;
}

/* mailbox-ish icon (CSS-only) */
.windialog__icon{
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.35);
  background: radial-gradient(circle at 30% 30%, #fff, #bbb);
  position: relative;
}

.windialog__text{
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;   /* ← explicitly normal weight */
}

/* little "envelope flap" hint */
.windialog__icon::before{
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  top: 4px;
  height: 0;
  border-top: 6px solid rgba(0,0,0,.25);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.35;
}


/* -------------------------------------------------------------------- */
/* ------------------------   MAIN CONTENT   -------------------------- */
/* -------------------------------------------------------------------- */

/* main content image */
.wrap-right {
  float: right;
  max-width: 250px;
  width: 100%;
  margin: 4px 0 12px 20px;              /* space between text and image */
  border: 1px solid #bbb;
  padding: 4px;
  background: white;
}

/* formatting clear */
.clear {
  clear: both;
}

/* right-hand content column */
.content {
  position: relative;
  padding: 32px;                                    /* interior spacing */
  max-width: 900px;                             /* prevent wide margins */
  height: 100vh;                               /* match viewport height */
  overflow-y: auto;                    /* independent content scrollbar */
  
  font-size: 0.72rem;
  line-height: 1.6;
}

/* keep images responsive */
img {
  max-width: 100%;                          /* never overflow container */
  height: auto;                                /* maintain aspect ratio */
}

/* clean horizontal divider styling */
hr {
  border: none;                             /* remove default hr border */
  border-top: 1px solid #ddd;                 /* use subtle custom line */
  margin: 24px 0;                           /* spacing above/below line */
} 

/* -------------------------------------------------------------------- */
/* -------------------------   MP3 PLAYER   --------------------------- */
/* -------------------------------------------------------------------- */

/* music widget container box */
.mini-player{
  width: 100%;                               /* inset from sidebar edge */
  margin-top: 14px;                               /* space above player */
  padding: 6px 8px;                                    /* inner spacing */
  border: 1px solid #ddd;                               /* light border */
  border-radius: 12px;                               /* rounded corners */
  background: #fff;                                 /* background color */
  box-sizing: border-box; 
}

/* "now playing" label */
.mini-player__title{  
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;                                /* small label text */
  opacity: 0.6;                                         /* lighter text */
  margin-bottom: 1px;                            /* spacing below label */
}

/* ⓘ label on the right */
.mini-player__count{
  margin-left: auto;
}

/* info button styling */
.mini-player__info{
  display: none;
  margin-left: auto;
  
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  
  font-size: 0.8rem;
  opacity: 0.7;
  cursor: help;
}

.mini-player__info:hover{
  opacity: 1;
}

.mini-player__info:hover .mini-player__tooltip,
.mini-player__info:focus-visible .mini-player__tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* inside winplayer controls, don't let ⓘ push away */
.winplayer .controls-row .mini-player__info{
  margin-left: 0;
}

/* song title text */
.mini-player__track{
  font-size: 0.75rem;                                      /* text size */
  margin-bottom: 4px;                        /* spacing before controls */
}

/* marquee container */
.mini-player__track-wrap{
  margin-bottom: 3px;         
  overflow: hidden;            /* hides scrolling text outside the box */
  white-space: nowrap;                       /* keep title on one line */
  max-width: 100%;
}

/* scrolling text */
.mini-player__track-text{
  display: inline-block;
  font-size: 0.7rem;
  padding-left: 100%;                 /* start off-screen to the right */
  animation: track-marquee 9s linear infinite;
}

/* pause scrolling on hover */
.mini-player__track-wrap:hover .mini-player__track-text{
  animation-play-state: paused;
}

/* container for play/skip buttons */
.mini-player__controls{
  display: flex;                                  /* horizontal buttons */
  gap: 8px;                                   /* space between controls */
  margin-bottom: 4px;                           /* space below controls */
  justify-content: center;                           /* center controls */
}

/* windows-style playback buttons */
.winplayer .mini-player__btn{
  width: 26px;
  height: 22px;
  padding: 0;

  background: #d4d0c8;

  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;      /* classic bevel */

  border-radius: 0;                               /* no rounded corners */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* button hover effect */
.winplayer .mini-player__btn:hover{
  background: #dcd8cf;                            /* subtle light shift */
}

/* pressed state */
.winplayer .mini-player__btn:active{
  border-color: #404040 #ffffff #ffffff #404040;
}

/* primary button (play + pause) */
.mini-player__btn--primary{
  font-weight: 600;                            /* slightly heavier text */
}

/* time display row */
.mini-player__meta{
  font-size: 0.7rem;                             /* small metadata text */
  opacity: 0.6;                                        /* softened text */
  display: flex;                          /* place time elements inline */
  gap: 8px;                                /* space between time values */
  justify-content: space-between;
  align-items: baseline;
}

/* ---- Progress bar (default) ---- */
.mini-player__progress{
  height: 5px;                                             /* keep thin */
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #f6f6f6;
  overflow: visible;                       /* allow knob to sit outside */
  margin: 4px 0 2px;

  cursor: pointer;
  position: relative;
}

/* create a larger invisible hit area WITHOUT changing visible height */
.mini-player__progress::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -8px; bottom: -8px;                         /* bigger grab zone */
}

/* fill bar (always visible, normal color) */
.mini-player__progress-fill{
  height: 100%;
  width: 0%;
  background: #111;                                    /* default fill */
  border-radius: 999px;
  position: relative;
  pointer-events: none;                        /* clicks go to the bar */
}

/* On hover/focus, change fill color */
.mini-player:hover .mini-player__progress-fill,
.mini-player__progress:focus-visible .mini-player__progress-fill{
  background: #444;            /* interactive color */
}

/* Knob: hidden by default */
.mini-player__progress-fill::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);

  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: #444;            /* match interactive fill */
  border: 1px solid #fff;
  box-shadow: none;

  opacity: 0;                  /* <-- hidden */
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

/* Knob appears only on interaction */
.mini-player:hover .mini-player__progress-fill::after,
.mini-player__progress:focus-visible .mini-player__progress-fill::after{
  opacity: 1;
}

/* Slight knob “pop” on hover/active */
.mini-player:hover .mini-player__progress-fill::after{
  transform: translate(50%, -50%) scale(1.08);
}

.mini-player__progress:active .mini-player__progress-fill::after{
  transform: translate(50%, -50%) scale(1.12);
}

/* marquee animation */
@keyframes track-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* keep progress bar aligned to the panel column */
.winplayer .progress-row{
  width: 100%;
}

.winplayer .mini-player__progress{
  width: 100%;
}

/* ---------------- Tracklist Panel ---------------- */

.mini-player__list{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

/* Each track row (we will render them as buttons) */
.mini-player__item{
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: baseline;

  padding: 6px 0;

  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;

  font-size: 0.75rem;
  font-family: inherit;
  color: inherit;
}

/* Subtle hover effect */
.mini-player__item:hover .mini-player__name{
  text-decoration: underline;
}

/* Track number */
.mini-player__num{
  width: 2ch;
  opacity: 0.5;
  flex: 0 0 auto;
}

/* Track title */
.mini-player__name{
  flex: 1 1 auto;
  opacity: 0.85;
}

/* Highlight currently playing track */
.mini-player__item.is-current .mini-player__name{
  font-weight: 600;
  opacity: 1;
}

/* -------------------------------------------------------------------- */

.winplayer{
  width: 100%;                                                /* adjust */
  max-width: 240px;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;         /* bevel frame */
  font-family: Tahoma, Verdana, sans-serif;
  color: #000;
}

.winplayer__body{
  display: grid;
  grid-template-columns: 64px 1fr; /* album art left, meta right */
  gap: 8px;
  padding: 8px;
  align-items: center; /* <-- centers album art vertically vs panel */
}

/* ---------- title bar ---------- */
.titlebar{
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  
  background: linear-gradient(to right, #1eb5ae 0%, #0b6f6a 100%);
  color: #fff;
  border-bottom: 1px solid #063f3c;
  position: relative;
}

/* subtle 1px highlight at top (Win98 feel) */
.titlebar::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.35);
}

.titlebar::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;   /* darken near buttons */
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 100%
  );
  pointer-events: none;
}

/* title text inside teal bar */
.titlebar .app-title{
  font-size: 12px;   /* try 11px if you want smaller */
  line-height: 1;
}

.title-gif{
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.title-left{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.app-icon{
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,.35);
  background: radial-gradient(circle at 30% 30%, #9cf, #46c);
  display: inline-block;
}

.title-controls{
  display: flex;
  gap: 4px;
}

.winbtn{
  width: 18px;
  height: 16px;
  line-height: 14px;
  padding: 0;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.winbtn:active{
  border-color: #404040 #ffffff #ffffff #404040;
}

/* ---------- menu bar ---------- */
.menubar{
  display: flex;
  gap: 18px;
  padding: 4px 8px;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #ffffff;
  background: #d4d0c8;
  font-size: 12px;
}
.menubar a{
  color: #000;
  text-decoration: underline;
}
.menubar a:hover{ text-decoration: none; }

/* ---------- main content ---------- */

/* left album art “well” */
.winplayer .art-well{
  width: 64px;
  height: 64px;
  padding: 4px;
  background: #cfcabf;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040; /* inset well */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .winplayer .album-art{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  } */

/* right panel */
.winplayer .panel{
  display: grid;
  gap: 6px;
  align-content: start;
}

.winplayer .track-title{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}

.winplayer .track-artist{
  font-size: 11px;
  margin: 0;
  opacity: 0.85;
}

/* time box row */
.winplayer .time-box{
  width: 100%;
  padding: 3px 6px;
  font-size: 11px;

  text-align: center;
  background: #cfcabf;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040;
  font-weight: 700;
}

/* controls like old UI */
.winplayer .controls-row{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;                                        /* slightly tighter */
  margin-top: 2px;                        /* was 6px — now ~4px closer */
}

.ctrlbtn{
  min-width: 120px;
  height: 34px;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  cursor: pointer;
  font-weight: 600;
}
.ctrlbtn.small{
  min-width: 70px;
}
.ctrlbtn:active{
  border-color: #404040 #ffffff #ffffff #404040;
}

/* volume row */
.volume-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.vol{
  width: 260px;
}

/* ---------- status bar ---------- */
.statusbar{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px;
  border-top: 2px solid #ffffff;
  background: #d4d0c8;
  font-size: 12px;
}

.status-left, .status-right{
  padding: 2px 6px;
  background: #cfcabf;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040;
  font-size: 12px;
}

/* increase/decrease right panel */
.winplayer .panel{
  gap: 6px;             
}

/* --- Minimize behavior --- */
.winplayer.is-minimized .winplayer__body,
.winplayer.is-minimized .statusbar{
  display: none;
}

/* make titlebar feel clickable when minimized */
.winplayer.is-minimized .titlebar{
  cursor: pointer;
}

/* optional: slightly tighter titlebar when minimized */
.winplayer.is-minimized .titlebar{
  cursor: pointer;
}





/* -------------------------------------------------------------------- */
/* -----------------------   WINDOWS TASKBAR   ------------------------ */
/* -------------------------------------------------------------------- */

.taskbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: #d4d0c8;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #808080;
  display: flex;
  align-items: center;
  padding: 4px 6px;
  gap: 6px;
  z-index: 9999;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 14px;
}

.task{
  height: 26px;
  padding: 0 12px 0 8px;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff; /* bevel */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.task.active{
  border-color: #404040 #ffffff #ffffff #404040; /* “pressed” */
}

.task-icon{
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #8af, #36c);
  border: 1px solid #404040;
  display: inline-block;
}

.taskbar-spacer{ flex: 1; }

.tray{
  height: 26px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff; /* tray bevel */
  background: #d4d0c8;
}


/* -------------------------------------------------------------------- */
/* ----------------------   MICROBLOG CONTENT   ----------------------- */
/* -------------------------------------------------------------------- */

.micro {
  padding: 24px 20px;
  border-left: 1px solid #ddd;
  background: #fafafa;
  overflow-y: auto;
}

.micro h2 {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.micro-toggle{
  margin-left: 8px;
  
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  
  padding: 2px 8px;
  
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.micro-toggle:hover{
  opacity: 1;
  background: #f5f5f5;
}

.micro-toggle--floating{
  position: absolute;
  top: 24px;       
  right: 24px;     
  z-index: 50;
}

/* one “tweet” */
.micro-post {
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 10px 0;
  border-bottom: 1px solid #e6e6e6;
}

.micro-post:last-child {
  border-bottom: none;
}

.micro-meta {
  font-size: 0.70rem;
  opacity: 0.65;
  margin-top: 6px;
}

.layout.micro-collapsed{
  grid-template-columns: 260px 1fr;              /* hide updates column */
}

.layout.micro-collapsed .micro{
  display: none;
}



/* optional: monospace vibe for the timestamp */
.micro-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* -------------------------------------------------------------------- */
/* -------------------------  MOBILE LAYOUT  -------------------------- */
/* -------------------------------------------------------------------- */

/* applies when screen width <= 750px */
@media (max-width: 750px) {

/* enable normal page scrolling on mobile */
  body { overflow: auto; }

/* collapse grid into single column */
  .layout {
    grid-template-columns: 1fr;         /* sidebar stacks above content */
    height: auto;
  }

/* sidebar becomes top section instead of left column */
  .sidebar {
    border-right: none;                      /* remove vertical divider */
    border-bottom: 1px solid #ddd;            /* add horizontal divider */
    overflow: visible;                       /* prevent clipping issues */
  }

/* content area adjusts for stacked layout */
  .content {
    padding: 24px 20px;                     /* slightly reduced padding */
    height: auto;
    overflow: visible;
  }

}