/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("/assets/utilities-583f5dcf.css");

:root,
:host {
  --pico-form-element-spacing-vertical: 0.3rem !important;
  --pico-form-element-spacing-horizontal: 0.5rem !important;
}

h1 {
  margin-top: 10px !important;
}

a.unstyled {
  text-decoration: none;
  color: inherit;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.icon {
  width: 1em;
  height: 1em;
}

.word {
  font-size: 1.1em;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  color: black;
  line-height: 1.8rem;

  &:not(.selected):hover {
    border: 1px solid #ccc;
  }

  &.selected {
    background-color: red !important;
    color: white;

    &:not(.first-selected) {
      margin-left: -10px;
      padding-left: 14px;
    }
  }

  &.unknown {
    background-color: #64b5f6;
    &:hover {
      background-color: #42a5f5;
    }
  }

  &.learning {
    background-color: #ffe58a;
    &:hover {
      background-color: #ffd75a;
    }
  }

  &.familiar {
    background-color: #fff0c2;
    &:hover {
      background-color: #ffe0a2;
    }
  }

  &.strong {
    background-color: #fff8e6;
    &:hover {
      background-color: #fff0d6;
    }
  }
}

.chatbox {
  display: flex;
  flex-direction: column;

  height: 80vh;
  width: 100%;
  border: 1px solid #ccc;

  .titlebar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 5px;

    .title {
      font-size: 1.1em;
      font-weight: bold;
      flex-grow: 1;
    }

    .meta {
      flex-grow: 0;
      color: rgba(0, 0, 0, 0.5);
      font-size: 0.85rem;
    }
  }

  .messages {
    flex-grow: 1;
    padding: 0 10px 10px;
    overflow-y: auto;

    .message {
      max-width: 90%;

      &.self {
        justify-self: baseline;
        margin-left: auto;
      }

      .content {
        background-color: #eee;
        border-radius: 4px;
        margin: 15px 0;
        padding: 15px;

        p {
          margin: 0;
        }
      }

      .meta {
        margin-top: -15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.85rem;
      }
    }
  }
}

.tooltip-dialog {
  position: absolute;
  z-index: 1000;

  width: 320px;
  max-width: calc(100vw - 32px);

  /* Positioned below the trigger with room for the arrow */
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-60%);

  /* Appearance */
  background: white;
  color: rgb(55, 60, 68);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  padding: 0;

  /* ---- Arrow ---- */
  &::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: white;
  }

  p {
    font-size: 1em;
    padding: 10px;
    overflow: auto;
  }

  header {
    padding: 14px 16px 10px;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  footer {
    padding: 10px 16px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
  }
}