/* SPIKE: a Slack-style look on (almost) unchanged markup. Everything is scoped under body.slack. */

/* Colour themes. The class sits on <body>, and on each swatch of the theme picker. */
.theme-aubergine {
  --sb-bg: #3f0e40;
  --sb-deep: #350d36;
  --sb-text: #cfc3cf;
  --sb-strong: #ffffff;
  --sb-hover: rgb(255 255 255 / 0.1);
  --sb-active-bg: #1164a3;
  --sb-active-text: #ffffff;
  --sb-line: rgb(255 255 255 / 0.13);
  --sb-icon: invert(1);
  --accent: #007a5a;
}

.theme-midnight {
  --sb-bg: #1a1d21;
  --sb-deep: #121417;
  --sb-text: #b9babd;
  --sb-strong: #ffffff;
  --sb-hover: rgb(255 255 255 / 0.08);
  --sb-active-bg: #2b5f8f;
  --sb-active-text: #ffffff;
  --sb-line: rgb(255 255 255 / 0.1);
  --sb-icon: invert(1);
  --accent: #1264a3;
}

.theme-slate {
  --sb-bg: #303e4d;
  --sb-deep: #273442;
  --sb-text: #c3ccd6;
  --sb-strong: #ffffff;
  --sb-hover: rgb(255 255 255 / 0.09);
  --sb-active-bg: #6698c8;
  --sb-active-text: #ffffff;
  --sb-line: rgb(255 255 255 / 0.12);
  --sb-icon: invert(1);
  --accent: #3d6f9e;
}

.theme-lagoon {
  --sb-bg: #0b5f66;
  --sb-deep: #084f55;
  --sb-text: #cfe6e6;
  --sb-strong: #ffffff;
  --sb-hover: rgb(255 255 255 / 0.11);
  --sb-active-bg: #f2a065;
  --sb-active-text: #1f1a14;
  --sb-line: rgb(255 255 255 / 0.15);
  --sb-icon: invert(1);
  --accent: #0b6f76;
}

.theme-snow {
  --sb-bg: #f6f6f8;
  --sb-deep: #ebebef;
  --sb-text: #4b5158;
  --sb-strong: #1d1c1d;
  --sb-hover: rgb(0 0 0 / 0.06);
  --sb-active-bg: #1670b0;
  --sb-active-text: #ffffff;
  --sb-line: rgb(0 0 0 / 0.1);
  --sb-icon: invert(0);
  --accent: #1670b0;
}

.theme-sand {
  --sb-bg: #f5eee3;
  --sb-deep: #ebe1d1;
  --sb-text: #615748;
  --sb-strong: #2b2620;
  --sb-hover: rgb(60 40 10 / 0.07);
  --sb-active-bg: #a85a28;
  --sb-active-text: #ffffff;
  --sb-line: rgb(60 40 10 / 0.13);
  --sb-icon: invert(0);
  --accent: #a85a28;
}

body.slack {
  --navbar-height: 3.25rem;
  --radius: 0.4rem;
  --workspace-height: 3.25rem;

  font-size: 15px;

  /* Layout: sidebar on the left, a solid header bar over the page */
  @media (min-width: 100ch) {
    grid-template-areas:
      "sidebar nav"
      "sidebar main";
    grid-template-columns: var(--sidebar-width) 1fr;

    &.sidebar {
      --sidebar-width: 17rem;
    }

    #app-logo {
      display: none;
    }

    #nav,
    #nav:has(.room--current) {
      align-items: center;
      background-color: var(--color-bg);
      min-block-size: var(--navbar-height);
      border-block-end: 1px solid var(--color-border-dark);
      inset-inline: var(--sidebar-width) 0;
      margin-inline-start: 0;
      padding-block: 0;
      padding-inline: 1rem;

      .room--current,
      .account-logo {
        margin-inline-start: 0;
      }
    }

    &.sidebar #main-content {
      border-inline: 0;
      margin-inline-start: 0;
    }

    .messages {
      padding-block-start: var(--navbar-height);
    }

    .sidebar__tools {
      inset-inline: 0 auto;
    }

    .thread-panel-host:has(.thread-panel) {
      inset-inline: auto 0;
    }
  }

  /* Signed-out pages have nothing to put in the header bar. */
  #nav:not(:has(*)) {
    display: none;
  }

  @media (max-width: 100ch) {
    /* On a phone the sidebar stays with the pages that always had it. */
    &.sidebar-extra #sidebar {
      display: none;
    }

    /* A solid header bar, as on a wide screen */
    &.sidebar #nav {
      align-items: center;
      background-color: var(--color-bg);
      border-block-end: 1px solid var(--color-border-dark);
      min-block-size: var(--navbar-height);
      padding-block: 0;
      padding-inline: 1rem;

      &::before {
        display: none;
      }
    }

    /* Closed, the sidebar is off screen; keep it out of the browser's own tinting too. Its menu button stays. */
    &.sidebar #sidebar {
      transition: transform 300ms ease, visibility 0s 300ms;
      visibility: hidden;

      &.open {
        transition: transform 300ms ease, visibility 0s;
        visibility: visible;
      }
    }

    .sidebar__toggle {
      inset-block-start: calc((var(--navbar-height) - var(--btn-size)) / 2) !important;
      visibility: visible;
    }

    /* Open, the menu button sits at the top left, so the workspace name makes room for it. */
    #sidebar.open {
      .workspace {
        padding-inline-start: calc(var(--btn-size) + var(--sidebar-inline-space) + 0.5rem);
      }

      .directs {
        -webkit-mask-image: none;
        mask-image: none;
        padding-inline: 0.5rem;
      }
    }

    /* The message menu sits at the right of its row instead of taking a line of its own. */
    .message__body-content {
      padding-inline-end: 2.5rem;
    }
  }

  .sidebar__toggle {
    --btn-background: transparent;
    --btn-border-color: transparent;
  }

  #sidebar.open .sidebar__toggle img {
    filter: var(--sb-icon) !important;
  }

  /* A timeline sits at the bottom of the page; everything else starts at the top. */
  &.sidebar #main-content {
    justify-content: start;

    &:has(.messages) {
      justify-content: end;
    }
  }

  /* Shapes: rounded rectangles instead of pills and circles */
  .btn {
    --btn-border-radius: var(--radius);
  }

  .avatar {
    --avatar-border-radius: 22%;
  }

  .btn.avatar {
    --btn-border-radius: var(--avatar-border-radius);
  }

  .input {
    --input-border-radius: var(--radius);
  }

  .border-radius {
    border-radius: 0.6rem;
  }

  .btn--reversed {
    --btn-background: var(--accent);
    --btn-color: #ffffff;

    img:not(.avatar) {
      filter: invert(1);
    }
  }

  .switch__input:checked + .switch__btn {
    background-color: var(--accent);
  }

  /* Header */
  .room--current {
    --btn-background: transparent;
    --btn-color: var(--color-text);

    border: 0;
    padding-inline: 0;

    .room__contents {
      font-size: 1.15rem;
      font-weight: 800;
    }
  }

  #nav .btn:not(.room--current, .btn--reversed, .btn--negative) {
    --btn-border-color: transparent;
  }

  /* Search: recent searches sit in the header, since the sidebar is the usual one */
  &.searches {
    #nav {
      column-gap: 0.5rem;
      padding-inline: 1rem;
    }

    .searches__query {
      padding: 0;
    }

    .searches__recents {
      -webkit-mask-image: none;
      display: flex;
      mask-image: none;
      padding: 0;

      .room {
        --btn-padding: 0.25em 0.7em;

        font-size: 0.9rem;
        margin: 0;
      }
    }

    .searches__results {
      padding-block-start: var(--navbar-height);
    }
  }

  /* Panels: settings, people, room forms */
  .panel {
    margin-block-start: calc(var(--navbar-height) + 1.5rem);

    @media (min-width: 100ch) {
      border: 1px solid var(--color-border-dark);
      border-radius: 0.75rem;
      box-shadow: none;
    }

    + .panel {
      margin-block-start: 0;
    }
  }

  /* Sidebar */
  &.sidebar #sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--sb-bg);
    color: var(--sb-text);
  }

  @media (min-width: 100ch) {
    &.sidebar #sidebar {
      border-inline-end: 1px solid var(--sb-line);
    }
  }

  .sidebar__container {
    display: flex;
    flex-direction: column;
  }

  /* Starting a new ping, in place of the list */
  .directs--new {
    --input-border-color: var(--sb-line);
    --input-color: var(--sb-strong);

    color: var(--sb-text);
    padding-block-end: 0.5rem;

    .btn:not(.btn--reversed) {
      --btn-background: transparent;
      --btn-border-color: var(--sb-line);
    }
  }

  .workspace {
    align-items: center;
    background-color: var(--sb-bg);
    border-block-end: 1px solid var(--sb-line);
    color: var(--sb-strong);
    column-gap: 0.6rem;
    display: flex;
    flex: none;
    font-size: 1.15rem;
    min-block-size: var(--workspace-height);
    inset-block-start: 0;
    padding-inline: 1rem;
    position: sticky;
    text-decoration: none;
    z-index: 4;

    &:hover {
      background-color: var(--sb-deep);
    }
  }

  .workspace__logo {
    border-radius: 0.4rem;
    flex: none;
  }

  .rooms {
    --row-gap: 1px;

    order: 1;
    padding-block-start: 0.75rem;
    padding-inline: 0.5rem;
  }

  .directs {
    order: 2;
  }

  #shared_rooms::before,
  .directs::before {
    color: var(--sb-text);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.8;
    padding: 1rem 0.5rem 0.25rem;
  }

  #shared_rooms::before {
    content: "Channels";
  }

  .directs::before {
    content: "Direct messages";
  }

  .rooms .room,
  .direct {
    --btn-border-color: transparent;
    --hover-size: 0;

    background: none;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--sb-text);
    font-weight: 400;
    inline-size: 100%;
    justify-content: start;
    margin: 0;
    padding: 0.2rem 0.5rem;

    &:hover {
      background-color: var(--sb-hover);
      box-shadow: none;
    }

    &.unread,
    &.unread .direct__author {
      box-shadow: none;
      color: var(--sb-strong);
      font-weight: 800;
    }

    &.current,
    &.current .direct__author {
      background-color: var(--sb-active-bg);
      color: var(--sb-active-text);
    }
  }

  #shared_rooms .room::before {
    content: "#";
    inline-size: 1.25rem;
    opacity: 0.7;
    text-align: center;
  }

  #threads_link::before,
  #memory_link::before {
    inline-size: 1.25rem;
    text-align: center;
  }

  #threads_link::before {
    content: "💬";
  }

  #memory_link::before {
    content: "🧠";
  }

  .rooms__new-btn {
    inset: auto;
    opacity: 0.8;
    position: static;

    &::after {
      content: "Add channel";
    }

    img {
      inline-size: 1.25rem;
    }
  }

  #sidebar .btn:not(.avatar, .sidebar__toggle) img,
  #sidebar .avatar--icon img {
    filter: var(--sb-icon) !important;
  }

  .directs {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    overflow: visible;
    padding: 0 0.5rem;
    position: static;
  }

  .direct {
    --avatar-size: 1.25rem;

    align-items: center;
    column-gap: 0.5em;
    display: flex;

    .avatar,
    .avatar__group {
      flex: none;
      margin: 0;
    }

    .avatar__group {
      --avatar-size: 0.6rem;

      block-size: 1.25rem;
      inline-size: 1.25rem;

      > * {
        margin: 0 !important;
      }
    }

    .avatar--icon {
      background: none;
      border: 0;

      img {
        margin: 0;
      }
    }
  }

  .direct__author {
    background: none !important;
    font-size: 1em;
    margin: 0;
    padding: 0;

    &::after {
      display: none;
    }
  }

  .sidebar__tools {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--sb-deep);
    justify-content: start;
    padding-block: 0.6rem;

    .btn:not(.avatar) {
      --btn-background: transparent;
      --btn-border-color: transparent;
    }
  }

  /* Messages: flat rows, everyone on the left, no bubbles */
  .messages {
    --message-space: 0.5rem;
    --message-column-gap: 0.6rem;
  }

  .message,
  .message--me {
    grid-auto-columns: 2.4rem 1fr min-content;
    grid-template-areas:
      "sep sep sep"
      "avatar body body";
    padding-block: 0.15rem;
    padding-inline: 1.25rem;

    :is(.message__body, .message__meta, .message__heading) {
      justify-self: stretch;
    }

    :is(.message__meta, .message__heading) {
      flex-direction: row;
      justify-content: start;
    }

    .message__meta {
      padding-inline: 0;
    }

    .message__avatar {
      margin-inline: 0;
    }
  }

  .message:hover {
    background-color: var(--color-border);
  }

  .message + .message--threaded {
    margin-block-start: calc(var(--message-space) * -1);
  }

  /* A follow-on message from the same person shows only its text */
  .message--threaded .message__heading {
    display: none;
  }

  .message__avatar {
    --avatar-size: 2.4rem;

    box-shadow: none;
  }

  .message__body,
  .message--me .message__body {
    flex-direction: row;
    max-inline-size: 100%;
  }

  .message__body-content,
  .message--mentioned .message__body-content {
    --message-background: transparent;

    animation: none;
    border-radius: 0;
    inline-size: 100%;
    margin: 0;
    padding: 0;
  }

  .message--mentioned {
    background-color: oklch(90% 0.12 95 / 0.35);
    box-shadow: inset 3px 0 0 oklch(80% 0.16 85);
  }

  .message__author {
    font-size: 1rem;

    strong {
      font-weight: 800;
    }
  }

  .message__permalink {
    font-size: 0.75rem;
  }

  .message__meta .message__actions,
  .message--me .message__meta .message__actions {
    inset: 0 0 auto auto;
    position: absolute;
    transform: none;

    @media (min-width: 100ch) {
      inset-block-start: -0.75rem;
    }
  }

  .message__options-btn {
    @media (min-width: 100ch) {
      box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
    }

    @media (max-width: 100ch) {
      --btn-background: transparent;
      --btn-border-color: transparent;
    }
  }

  /* The options button sits at the message's right edge, so its menu opens leftwards from it */
  .message__actions-menu {
    inset-inline: auto 0;
    transform: none;
    transform-origin: top right;

    &::before,
    &::after {
      inset-inline: auto calc(var(--btn-size) / 2);
      transform: translateX(50%);
    }
  }

  .message__day-separator {
    margin-block: 0.5rem;
    text-transform: none;

    time,
    span {
      background-color: var(--color-bg);
      border: 1px solid var(--color-border-dark);
      padding: 0.3em 1.2ch;
    }

    &::after,
    &::before {
      border-top: 1px solid var(--color-border-dark);
    }
  }

  .message--emoji:not(:has(.composer--edit)) .message__body-content,
  .message--emoji.message--me:not(:has(.composer--edit)) .message__body-content {
    padding: 0;
    text-align: start;
  }

  .message__attachment,
  .message:not(.message--threaded) .message__attachment {
    border-radius: 0.5rem;
    max-inline-size: 28rem;
  }

  /* Composer: a bordered box, not a pill */
  .composer {
    padding: 0 1.25rem 1rem;
  }

  .composer__input,
  .thread-composer__input {
    --input-border-radius: 0.5rem !important;

    border-radius: 0.5rem !important;
  }

  /* Theme picker, on a person's own settings */
  .theme-picker {
    border: 0;
    margin: 0;
    padding: 0;
    text-align: start;

    legend {
      margin-block-end: 0.5rem;
      padding: 0;
    }
  }

  .theme-picker__options {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .theme-picker__option {
    background: none;
    border: 1px solid var(--color-border-darker);
    border-radius: 0.6rem;
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.4rem;
    padding: 0.4rem 0.4rem 0.5rem;

    &:hover {
      border-color: var(--color-text);
    }

    &[aria-pressed="true"] {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent);

      .theme-picker__name::after {
        content: " ✓";
      }
    }
  }

  .theme-picker__preview {
    aspect-ratio: 16 / 9;
    border: 1px solid oklch(0% 0 0 / 0.12);
    border-radius: 0.35rem;
    display: grid;
    grid-template-columns: 38% 1fr;
    overflow: hidden;

    i,
    b {
      border-radius: 2px;
      display: block;
    }
  }

  .theme-picker__sidebar {
    align-content: start;
    background-color: var(--sb-bg);
    display: grid;
    gap: 3px;
    padding: 5px 4px;

    i {
      background-color: var(--sb-text);
      block-size: 4px;
      inline-size: 70%;
      opacity: 0.7;

      &.active {
        background-color: var(--sb-active-bg);
        inline-size: 100%;
        opacity: 1;
      }
    }
  }

  .theme-picker__main {
    align-content: start;
    background-color: #ffffff;
    display: grid;
    gap: 3px;
    padding: 5px;

    i {
      background-color: #d9d9d9;
      block-size: 4px;

      &:first-child {
        inline-size: 60%;
      }
    }

    b {
      background-color: var(--accent);
      block-size: 6px;
      inline-size: 35%;
      justify-self: end;
      margin-block-start: 4px;
    }
  }

  .theme-picker__name {
    font-size: 0.85rem;
    font-weight: 600;
  }
}