/* --- App Drawer for Mobile --- */
.show-on-mobile {
  display: none !important;
}
.hide-on-mobile {
  display: flex;
}
.app-drawer {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  min-width: 300px;
  padding: 15px;
  border: 2px solid #000;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  z-index: 4999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s, bottom 0.2s ease;
}

.app-drawer.show {
  display: block;
  opacity: 1;
  visibility: visible;
  bottom: 85px;
  transition: opacity 0.2s ease, visibility 0s 0s, bottom 0.2s ease;
}
.app-drawer-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 15px;
  justify-items: center;
}
.app-drawer .dock-icon {
  width: 70px;
  height: auto;
  flex-direction: column;
}
.app-drawer .dock-icon::before {
  display: none;
}
.app-drawer .dock-icon img {
  width: 50px;
  height: 50px;
}
.app-drawer .dock-icon .label {
  position: static;
  opacity: 1;
  transform: none;
  background: none;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  text-shadow: none;
  margin-top: 5px;
}

/* --- Tablet Breakpoint --- */
@media (max-width: 768px) {
  .window {
    width: 85%;
    left: 7.5%;
    top: 60px;
    max-height: 80vh;
  }
  .dock {
    width: auto;
    max-width: 95%;
    padding: 8px;
    gap: 4px;
    border-radius: 14px;
  }
  .dock-icon {
    width: 64px;
    height: 64px;
  }
  .dock-icon::before {
    width: 58px;
    height: 58px;
  }
  .dock-icon img,
  .dock-icon svg {
    width: 48px;
    height: 48px;
  }
  .dock-icon:hover img,
  .dock-icon:hover svg {
    transform: scale(1.2) translateY(-1px);
  }
  .top-bar {
    padding: 6px 10px;
    gap: 12px;
  }

  /* Still portrait, just narrower and taller relative to the screen. The
     single-pane layout itself is the base behavior, so there is nothing
     structural left to override here.

     The height clears the dock rather than merely fitting the viewport: the
     dock is 80px tall here and sits 24px off the bottom, so anything taller
     than 100vh - 170px puts the compose bar under it, and the dock wins on
     z-index. */
  #messages {
    left: 6%;
    top: 60px;
    width: 88%;
    max-width: none;
    height: calc(100vh - 170px);
  }

  .msg-thread-name {
    font-size: 21px;
  }

  .msg-transcript {
    padding: 0 16px 18px;
  }

  .msg-bubble {
    max-width: 84%;
  }

  /* The desktop rule in css/main.css outranks .window here, so the shared
     placement has to be restored by id. There is no room for the comment
     prompt at this width anyway, and it suppresses itself. */
  #community,
  #community.creator-open {
    left: 7.5%;
    top: 60px;
    width: 85%;
  }

  /* Same story as #guestbook: the bare `#internet` rule in css/main.css beats
     `.window` inside a media query, so the browser shell was left at its desktop
     width 150px from the left edge with most of itself off screen. */
  #internet {
    left: 7.5%;
    top: 60px;
    width: 85%;
    height: calc(100vh - 150px);
  }

  /* Every one of these carries an id rule in css/main.css too, so each was
     still sitting at its desktop size and offset here with part of itself off
     the side. Restated by id so the shared placement actually lands. No height
     in the list: #music is deliberately content-sized, and the rest already fit
     under .window's max-height. */
  #settings,
  #music,
  #finder {
    left: 7.5%;
    top: 60px;
    width: 85%;
  }

  /* Deliberately no top for either, because each is answered at the phone
     breakpoint instead: a top set here would leak down, and the two windows
     want different ones. At this width both are already fully on screen. The
     terminal only overflowed between 601px and 609px, but that is the same bug
     as the rest. */
  #trash,
  #terminal {
    left: 7.5%;
    width: 85%;
  }

  /* Same reason as the block above: the bare #journal rule in css/main.css
     outranks .window inside a media query, so without this the window keeps
     its 520px desktop width at left: 360px and hangs off the side. */
  #journal {
    left: 7.5%;
    top: 60px;
    width: 85%;
    height: calc(100vh - 150px);
  }

  /* The two window kinds that are created from JavaScript rather than declared
     in index.html, so their geometry is class-based instead of an id. Both
     would already inherit .window's placement from the top of this block, but
     it is restated so the result does not depend on which stylesheet happens to
     be linked first. */
  .photo-viewer-window,
  .message-window {
    left: 7.5%;
    top: 60px;
    width: 85%;
  }
}

.finder-toggle-btn {
  display: none;
}

/* --- Mobile Breakpoint --- */
@media (max-width: 600px) {
  :root {
    --file-icon-size: var(--file-icon-size-sm);
  }
  .hide-on-mobile {
    display: none !important;
  }
  .show-on-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .window {
    width: 94%;
    left: 3%;
    top: 50px;
    min-height: 200px;
  }
  .dock {
    width: auto;
    max-width: 95%;
    padding: 6px;
    gap: 8px;
  }
  .top-bar .left {
    gap: 5px;
  }
  .top-bar .icon {
    padding: 4px 6px;
    font-size: 14px;
  }
  .top-bar .right-icons {
    gap: 10px;
  }
  .top-bar .clock {
    font-size: 16px;
    padding: 4px 8px;
  }
  .top-bar .icon[data-menu="fileMenu"],
  .top-bar .icon[data-menu="editMenu"],
  .top-bar .icon[data-menu="viewMenu"] {
    display: none;
  }
  #readme.window {
    width: 90%;
    left: 5%;
    top: 60px;
    max-height: 75vh;
  }
  #readme .content {
    font-size: 14px !important;
  }
  #readme .content h2 {
    font-size: 24px !important;
  }
  /* --- Finder Sidebar Toggle --- */
  .finder-toggle-btn {
    display: block;
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 5;
    background: var(--panel);
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    color: #000;
    font-size: 20px;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }
  .finder-toggle-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000;
  }

  #finder {
    top: 55px;
    height: 70vh;
    max-height: 600px;
    width: 90%;
    left: 5%;
  }

  /* Height stays content-driven here too, so the guardian scene is never cut
     off by a viewport fraction that is shorter than the dog.

     Width is 94% rather than the 80% it used to be, which is simply what every
     other window at this breakpoint takes. The 14% it was giving away was the
     dialogue's whole margin: this panel clips its lines instead of wrapping
     them, so at 320px the copy had 210px to land in and the widest shipped line
     needs 260. See the phone block in css/trash.css, which counts the rest.

     And the top comes down off the 140px #trash carries in css/main.css, which
     no `.window` media query can outrank. The scenes are content-sized and the
     pill scene is the tallest of them, so starting 90px lower was the
     difference between the choice sitting above the dock and sitting behind
     it. */
  #trash {
    width: 94%;
    left: 3%;
    top: 50px;
  }
  #community,
  #community.creator-open {
    left: 3%;
    top: 50px;
    width: 94%;
  }
  #internet {
    left: 3%;
    top: 50px;
    width: 94%;
    height: calc(100vh - 130px);
  }

  /* Same set as the tablet block, narrowed. #finder is absent because it
     already has its own rule above. */
  #settings,
  #music {
    left: 3%;
    top: 50px;
    width: 94%;
  }
  #journal {
    left: 3%;
    top: 50px;
    width: 94%;
    height: calc(100vh - 130px);
  }
  /* Width comes from css/terminal.css's own mobile block, which is why only the
     left is pinned here: without it the tablet rule above would leak down. */
  #terminal {
    left: 3%;
  }
  .photo-viewer-window,
  .message-window {
    left: 3%;
    top: 50px;
    width: 94%;
  }
  /* --- Finder Mobile Styles --- */
  .finder-content {
    position: relative;
    overflow: hidden;
  }
  .finder-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #e0e0e0;
    border-right: none;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  .finder-content.sidebar-visible .finder-sidebar {
    transform: translateX(0);
  }

  /* Messages App Responsive Design. On a phone the portrait window fills
     almost the whole screen; the single-pane flow needs no override because it
     is the base layout at every width. The height stops above the dock for the
     reason the tablet rule records — the dock is 76px tall and 24px up, so a
     taller window hides the compose bar behind it. */
  #messages {
    left: 3%;
    top: 55px;
    width: 94%;
    max-width: none;
    height: calc(100vh - 160px);
  }

  .msg-conversation-head {
    padding: 14px 52px 14px;
  }

  /* Narrower gutters than the desktop, because the same 52px portrait has to
     leave the name room to ellipsize instead of the stamp running out of it. */
  .msg-search {
    padding: 12px 14px;
  }

  .msg-count {
    padding: 6px 14px;
  }

  .msg-thread-row {
    gap: 11px;
    padding: 11px 14px 11px 11px;
  }

  .msg-thread-stamp {
    font-size: 15px;
  }

  .msg-avatar {
    width: 46px;
    height: 46px;
  }

  .msg-avatar-lg {
    width: 64px;
    height: 64px;
  }

  .msg-contact-photo {
    width: 120px;
    height: 120px;
  }

  .msg-conversation-name {
    font-size: 20px;
  }

  .msg-conversation-handle {
    font-size: 14px;
  }

  .msg-transcript {
    padding: 0 14px 18px;
  }

  .msg-bubble {
    max-width: 88%;
    font-size: 20px;
  }

  .msg-compose {
    padding: 8px 12px;
  }

  .msg-compose-field {
    font-size: 18px;
  }
}