:root {
  --home-grid-size: 16px;

  --home-grid:
    linear-gradient(
      rgba(93, 126, 148, 0.23) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93, 126, 148, 0.23) 1px,
      transparent 1px
    );
}


/* global */

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
}

body {
  overflow: hidden;

  background-color: #dcecf7;

  background-image: var(--home-grid);
  background-size:
    var(--home-grid-size)
    var(--home-grid-size);
}


/* main page */

.site {
  width: 100vw;
  height: 100vh;

  min-height: 600px;

  display: grid;

  grid-template-rows:
    42px
    minmax(0, 1fr)
    46px;

  overflow: hidden;
}


/* top mhm so gay */

.top-bar {
  width: 100%;

  box-sizing: border-box;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    0 17px;
}

.top-title {
  font-size: 16px;

  letter-spacing: 0.5px;
}

.system-info {
  display: flex;

  align-items: center;

  gap: 13px;

  font-size: 14px;
}


/* wifi bar */

.wifi {
  position: relative;

  display: inline-block;

  width: 22px;
  height: 18px;
}

.wifi__dot {
  position: absolute;

  width: 4px;
  height: 4px;

  left: 9px;
  bottom: 0;

  background: #111;
}

.wifi__arc {
  position: absolute;

  left: 50%;
  bottom: 2px;

  transform: translateX(-50%);

  border:
    2px solid #111;

  border-bottom: 0;
  border-left-color: transparent;
  border-right-color: transparent;

  border-radius:
    50% 50% 0 0;
}

.wifi__arc--1 {
  width: 9px;
  height: 6px;
}

.wifi__arc--2 {
  width: 15px;
  height: 11px;
}

.wifi__arc--3 {
  width: 22px;
  height: 16px;
}


/* battery */

.battery {
  position: relative;

  width: 25px;
  height: 12px;

  box-sizing: border-box;

  padding: 1px;

  border: 2px solid #111;
}

.battery::after {
  content: "";

  position: absolute;

  right: -5px;
  top: 3px;

  width: 3px;
  height: 6px;

  background: #111;
}

.battery__level {
  display: block;

  width: 100%;
  height: 100%;

  background: #111;
}


/* grid */

.home {
  width: 100%;
  height: 100%;

  min-height: 0;

  box-sizing: border-box;

  padding:
    10px 14px;

  display: grid;

  grid-template-columns:
    1.28fr
    1fr
    1fr
    1fr;

  grid-template-rows:
    1.05fr
    1fr
    0.72fr;

  gap: 10px;
}

.home-cell {
  min-width: 0;
  min-height: 0;

  overflow: hidden;

  display: flex;
}


/* chat fix border */


.pictochat-window {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  box-sizing: border-box;

  overflow: hidden;

  border:
    2px solid #4c4c4c;
}

.pictochat-message {
  box-sizing: border-box;

  min-width: 0;
  max-width: 100%;

  overflow: hidden;
}

.pictochat-message header {
  box-sizing: border-box;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;
}

.pictochat-message > span {
  display: block;

  min-width: 0;

  font-size:
    clamp(13px, 0.9vw, 16px);

  line-height: 1.35;

  overflow-wrap: break-word;
}


/* bout me */

.about-cell {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.about-content {
  min-width: 0;
  min-height: 0;

  height: calc(100% - 30px);

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    minmax(135px, 0.85fr)
    minmax(0, 1.7fr);

  gap: 14px;

  padding: 13px;

  background-color: #eef7fc;

  background-image:
    linear-gradient(
      rgba(93, 126, 148, 0.20) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93, 126, 148, 0.20) 1px,
      transparent 1px
    );

  background-size:
    16px 16px;
}

.about-photo {
  min-width: 0;
  min-height: 0;

  display: flex;

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

  overflow: hidden;
}

.about-photo img {
  display: block;

  width: min(100%, 220px);

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border:
    2px solid #494949;
}

.about-copy {
  min-width: 0;

  align-self: center;

  color: #111;

  font-size:
    clamp(14px, 1vw, 18px);

  line-height: 1.4;
}

.about-copy h1 {
  margin:
    0 0 8px;

  font-size:
    clamp(28px, 2.8vw, 44px);

  line-height: 1;
}

.about-copy p {
  margin:
    7px 0;
}

.about-meta {
  display: inline-block;

  margin-top: 5px;

  padding:
    4px 7px;

  border:
    1px solid rgba(73, 73, 73, 0.55);

  background:
    rgba(255, 255, 255, 0.65);

  font-size:
    clamp(11px, 0.8vw, 14px);
}


/* top~ info */

.currently-cell {
  grid-column: 3;
  grid-row: 1;
}

.likes-cell {
  grid-column: 4;
  grid-row: 1;
}

.favorites-cell {
  grid-column: 3;
  grid-row: 2;
}

.faq-cell {
  grid-column: 4;
  grid-row: 2;
}

.currently-cell .pictochat-message:not(:first-child),
.likes-cell .pictochat-message:not(:first-child),
.favorites-cell .pictochat-message:not(:first-child) {
  margin-bottom: 3px;
}


/* questions */

.faq-window {
  display: flex;

  flex-direction: column;

  min-height: 0;
}

.faq-content {
  flex: 1;

  min-height: 0;

  box-sizing: border-box;

  padding:
    5px;

  overflow-y: auto;
  overflow-x: hidden;

  display: flex;

  flex-direction: column;

  gap: 4px;

  /* keep the expanded answer inside the window */
  scrollbar-width: thin;
}

.faq-content details {
  flex: 0 0 auto;

  min-width: 0;

  width: 100%;

  box-sizing: border-box;

  margin: 0;

  overflow: hidden;
}

.faq-content summary {
  width: 100%;

  min-width: 0;

  box-sizing: border-box;

  padding:
    6px 8px;

  font-size:
    clamp(12px, 0.82vw, 15px);

  line-height: 1.25;

  white-space: normal;

  overflow-wrap: break-word;

  cursor: pointer;
}

.faq-content p {
  width: 100%;

  min-width: 0;

  box-sizing: border-box;

  margin: 0;

  padding:
    7px 8px;

  font-size:
    clamp(11px, 0.75vw, 13px);

  line-height: 1.35;

  overflow-wrap: break-word;
}


/* socials */

.socials-cell {
  grid-column: 1 / 3;
  grid-row: 3;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

.social-windows {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 5px;
}

.social-picto {
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

.social-picto .pictochat-window {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


/* social window */

.social-picto
  .pictochat-window
  > .pictochat-message:first-child {

  flex:
    0 0 30px;

  width: 100%;

  min-width: 0;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  padding:
    15px 8px;

  font-size:
    clamp(12px, 0.85vw, 16px);

  line-height: 1;

  font-weight: bold;

  letter-spacing: 0.25px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* social message*/

.social-message {
  min-width: 0;
  min-height: 0;

  flex: 1;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    1px;
}



.social-message header {
  width: 100%;

  min-width: 0;

  box-sizing: border-box;

  padding:
    5px 7px;

  font-size:
    clamp(11px, 0.75vw, 14px);

  line-height: 1.15;

  font-weight: bold;

  text-align: left;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/*socials*/

.social-message a {
  display: block;

  width: 100%;

  min-width: 0;

  margin-top: 6px;

  text-decoration: none;
}



.social-button {
  display: block;

  width: 100%;

  height: 60px;

  min-height: 24px;

  box-sizing: border-box;

  padding:
    2px 7px;

  font-size:
    clamp(10px, 0.7vw, 13px);

  line-height: 1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* bottom~ */

.bottom-bar {
  width: 100%;

  box-sizing: border-box;

  padding:
    0 18px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  font-size:
    clamp(10px, 0.75vw, 14px);
}

.bottom-left {
  justify-self: start;

  text-align: left;
}

.bottom-center {
  justify-self: center;

  padding:
    3px 9px;

  border:
    1px solid rgba(0, 0, 0, 0.4);

  background:
    rgba(255, 255, 255, 0.22);

  text-align: center;
}

.bottom-right {
  display: none;
}

/* note */

.note-cell {
  grid-column: 3 / 5;
  grid-row: 3;

  min-height: 0;
}

.note-alert {
  width: 100%;
  height: 100%;

  min-height: 0;

  box-sizing: border-box;

  margin: 0 !important;

  display: flex;

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

  gap: 10px;

  padding:
    6px 10px !important;
}

.note-text {
  min-width: 0;

  display: flex;

  flex-direction: column;

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

  gap: 3px;

  text-align: center;

  font-size:
    clamp(11px, 0.75vw, 14px);

  line-height: 1.2;
}

.note-text strong {
  font-size:
    clamp(13px, 0.9vw, 16px);
}

.note-text span {
  max-width: 100%;

  overflow-wrap: break-word;
}


/* more bottom bar~ */

.bottom-bar {
  width: 100%;

  box-sizing: border-box;

  padding:
    0 18px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  font-size:
    clamp(10px, 0.75vw, 14px);
}

.bottom-left {
  justify-self: start;

  text-align: left;
}

.bottom-center {
  justify-self: center;

  padding:
    3px 9px;

  border:
    1px solid rgba(0, 0, 0, 0.4);

  background:
    rgba(255, 255, 255, 0.22);

  text-align: center;
}

.bottom-right {
  justify-self: end;

  text-align: right;
}


/* desk small*/

@media (max-width: 1100px) {

  .home {
    gap: 7px;

    padding:
      7px 9px;
  }

  .about-content {
    grid-template-columns:
      120px
      minmax(0, 1fr);

    gap: 9px;

    padding: 9px;
  }

  .about-copy {
    font-size: 13px;
  }

  .about-copy h1 {
    font-size: 29px;
  }

  .pictochat-message > span {
    font-size: 12px;
  }

  .social-windows {
    gap: 3px;
  }

  .social-button {
    height: 22px;
    min-height: 22px;
  }

}


/* ipad */

@media (max-width: 800px) {

  .site {
    min-height: 500px;

    grid-template-rows:
      36px
      minmax(0, 1fr)
      38px;
  }

  .home {
    grid-template-columns:
      1.3fr
      1fr
      1fr;

    grid-template-rows:
      1fr
      1fr
      0.8fr;

    gap: 5px;
  }

  .about-cell {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .currently-cell {
    grid-column: 3;
    grid-row: 1;
  }

  .likes-cell {
    grid-column: 3;
    grid-row: 2;
  }

  .favorites-cell {
    display: none;
  }

  .faq-cell {
    grid-column: 1;
    grid-row: 3;
  }

  .socials-cell {
    grid-column: 2;
    grid-row: 3;
  }

  .note-cell {
    grid-column: 3;
    grid-row: 3;
  }

  .social-windows {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 3px;
  }

  .social-picto:last-child {
    display: none;
  }

}


/* phone */

@media (max-width: 600px) {

  .top-title {
    display: none;
  }

  .system-info {
    margin-left: auto;

    gap: 8px;

    font-size: 11px;
  }

  .home {
    padding: 4px;

    gap: 4px;
  }

  .about-content {
    grid-template-columns:
      80px
      minmax(0, 1fr);

    gap: 7px;

    padding: 7px;
  }

  .about-photo img {
    width: 80px;
  }

  .about-copy {
    font-size: 10px;

    line-height: 1.25;
  }

  .about-copy h1 {
    font-size: 22px;
  }

  .about-copy p {
    margin: 3px 0;
  }

  .about-meta {
    font-size: 8px;
  }

  .pictochat-message > span {
    font-size: 9px;
  }

  .faq-content summary {
    font-size: 10px;
  }

  .faq-content p {
    font-size: 9px;
  }

  .social-button {
    height: 19px;
    min-height: 19px;

    padding:
      1px 4px;

    font-size: 8px;
  }

  .note-alert {
    gap: 5px;

    padding:
      4px !important;
  }

  .bottom-bar {
    padding:
      0 8px;

    font-size: 8px;
  }

}


/* ============================================================
   VERY SMALL PORTRAIT
   ============================================================ */

@media (max-width: 450px) {

  .site {
    min-height: 420px;
  }

  .home {
    grid-template-columns:
      1fr
      1fr;

    grid-template-rows:
      1.2fr
      0.95fr
      0.75fr;
  }

  .about-cell {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .currently-cell {
    grid-column: 1;
    grid-row: 2;
  }

  .likes-cell {
    grid-column: 2;
    grid-row: 2;
  }

  .faq-cell {
    grid-column: 1;
    grid-row: 3;
  }

  .note-cell {
    grid-column: 2;
    grid-row: 3;
  }

  .socials-cell,
  .favorites-cell {
    display: none;
  }

  .about-content {
    grid-template-columns:
      65px
      minmax(0, 1fr);

    gap: 6px;
  }

  .about-photo img {
    width: 65px;
  }

  .about-copy {
    font-size: 8px;
  }

  .about-copy h1 {
    font-size: 18px;
  }

  .about-meta {
    display: none;
  }

  .pictochat-message > span {
    font-size: 8px;
  }

  .faq-content {
    padding: 3px;
  }

  .faq-content summary {
    padding: 4px;

    font-size: 8px;
  }

  .faq-content p {
    padding: 4px;

    font-size: 7px;
  }

  .note-text {
    font-size: 8px;
  }

  .note-text strong {
    font-size: 9px;
  }

  .bottom-bar {
    padding:
      0 6px;

    font-size: 7px;
  }

}