// ============================================================
// Chat — Steampunk theme for Ecryme
// Uses .ecryme-chat-body (custom class) so Foundry CSS never interferes.
// Header = brass plate. Body = aged parchment + dark ink.
// ============================================================

// ---- Mixin: rivet ornament (corner box-shadow bolts) ----
.riveted-border() {
  box-shadow:
    inset  4px  4px 0 1px @steam-rivet,
    inset -4px  4px 0 1px @steam-rivet,
    inset  4px -4px 0 1px @steam-rivet,
    inset -4px -4px 0 1px @steam-rivet,
    0 3px 10px rgba(0, 0, 0, 0.55);
}

// ---- Mixin: brass gradient ----
.brass-gradient() {
  background: linear-gradient(
    135deg,
    @steam-brass-dark  0%,
    @steam-brass       30%,
    @steam-brass-light 50%,
    @steam-brass       70%,
    @steam-brass-dark  100%
  );
}

// ============================================================
// Chat message outer frame — brass border + rivets
// ============================================================
#chat-log .chat-message,
.chat-popout .chat-message {
  border: 2px solid @steam-brass-dark;
  border-radius: 3px;
  .riveted-border();
  margin-bottom: 6px;
  overflow: hidden;

  // Whisper: acid-tinted border
  &.whisper {
    border-color: @steam-acid-dark;
    box-shadow:
      inset  4px  4px 0 1px @steam-acid-dark,
      inset -4px  4px 0 1px @steam-acid-dark,
      inset  4px -4px 0 1px @steam-acid-dark,
      inset -4px -4px 0 1px @steam-acid-dark,
      0 3px 10px rgba(0, 0, 0, 0.4);

    .ecryme-chat-body {
      background: mix(@steam-parchment, @steam-acid, 82%);
    }
  }
}

// ============================================================
// Message header — brass plate
// ============================================================
.chat-message-header {
  .brass-gradient();
  border-bottom: 2px solid @steam-brass-dark;
  font-size: 1rem;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;

  img.actor-icon,
  .actor-icon {
    border:        2px solid @steam-brass-dark;
    border-radius: 2px;
    box-shadow:    0 0 4px rgba(0, 0, 0, 0.4);
    width:  38px;
    height: 38px;
    padding: 1px;
    background: @steam-parchment-dk;
    flex-shrink: 0;
  }
}

.chat-actor-name {
  font-family:    @font-primary;
  font-size:      1.1rem;
  font-weight:    bold;
  color:          @steam-dark;
  text-shadow:    0 1px 1px rgba(255, 210, 60, 0.5);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
}

.chat-actor-subtitle {
  font-family:    @font-primary;
  font-size:      0.78rem;
  font-weight:    normal;
  color:          @steam-dark;
  opacity:        0.75;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

// ============================================================
// Body — aged parchment panel (our class = Foundry never overrides)
// ============================================================
.ecryme-chat-body {
  background:  @steam-parchment;
  color:       @steam-dark;
  padding:     6px 8px 8px;
  font-size:   0.88rem;

  // Skill / ability icon
  .ecryme-chat-icon-row {
    overflow: hidden;
    margin-bottom: 4px;

    img.chat-icon {
      border:        2px solid @steam-brass-dark;
      border-radius: 3px;
      box-shadow:    0 0 5px rgba(0, 0, 0, 0.25);
      background:    @steam-parchment-dk;
      width:  52px;
      height: 52px;
      padding: 2px;
      float: left;
      margin: 0 8px 4px 0;
    }
  }

  // Brass wire separator
  hr {
    border: none;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent       0%,
      @steam-brass-dark 10%,
      @steam-brass      50%,
      @steam-brass-dark 90%,
      transparent      100%
    );
    margin: 6px 4px;
    position: relative;

    &::after {
      content:   "⚙";
      position:  absolute;
      top:       -0.6em;
      left:      50%;
      transform: translateX(-50%);
      color:     @steam-brass-dark;
      font-size: 0.8rem;
      background: @steam-parchment;
      padding:   0 4px;
      line-height: 1.2;
    }
  }

  // Detail list — dark sepia ink on parchment
  ul {
    list-style: none;
    margin:  0;
    padding: 0;

    li {
      color:         @steam-rust;
      font-size:     0.87rem;
      padding:       3px 2px 3px 20px;
      border-bottom: 1px solid rgba(@steam-brass-dark, 0.2);
      position:      relative;
      line-height:   1.4;

      &:last-child { border-bottom: none; }

      // Brass arrow bullet
      &::before {
        content:   "▸";
        position:  absolute;
        left:      4px;
        top:       4px;
        color:     @steam-brass-dark;
        font-size: 0.75rem;
      }

      strong {
        color:       @steam-brass-dark;
        font-weight: bold;
      }
    }

    // Result line (success/failure) — no bullet, centered
    li.ecryme-result-line {
      padding-left: 4px;
      text-align:   center;
      border-bottom: none;
      margin-top:   2px;

      &::before { content: none; }
    }
  }

  // GM row with difficulty select
  .ecryme-chat-gm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    color: @steam-dark;
    font-size: 0.85rem;

    select {
      background:    @steam-parchment-dk;
      color:         @steam-dark;
      border:        1px solid @steam-brass-dark;
      border-radius: 2px;
      padding:       2px 4px;
      font-size:     0.85rem;
    }
  }

  // "Sent to GM" italic note
  p.ecryme-chat-sent-gm {
    color:      @steam-brass-dark;
    font-style: italic;
    font-size:  0.82rem;
    margin:     4px 0 0;
    text-align: center;
  }
}

// ============================================================
// Success / Failure labels
// ============================================================
.chat-result-success {
  color:       @steam-success;
  font-family: @font-primary;
  font-size:   1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.chat-result-failure {
  color:       @steam-failure;
  font-family: @font-primary;
  font-size:   1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.chat-result-text {
  font-family: @font-primary;
  font-size:   1.15rem;
}

// ============================================================
// Action buttons — brass mechanical style
// ============================================================
.chat-card-button,
.button-apply-impact,
.button-apply-bonus,
.button-select-confront,
.button-apply-cephaly-difficulty {
  display:     block;
  width:       calc(100% - 8px);
  margin:      4px 4px 2px;
  padding:     5px 10px;
  cursor:      pointer;
  font-size:   0.8rem;
  font-family: @font-primary;
  letter-spacing: 0.05em;
  text-align:  center;
  border-radius: 2px;
  border:      1px solid @steam-brass-dark;
  color:       @steam-parchment;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  position:    relative;
  background: linear-gradient(180deg,
    mix(@steam-brass, @steam-dark, 50%) 0%,
    mix(@steam-brass-dark, @steam-dark, 65%) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 80, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.15s;

  &:hover {
    background: linear-gradient(180deg,
      mix(@steam-brass-light, @steam-dark, 60%) 0%,
      mix(@steam-brass, @steam-dark, 50%) 100%
    );
    color: @steam-cream;
  }
  &:active { top: 1px; }
}

.plus-minus-button {
  background: linear-gradient(180deg,
    mix(@steam-brass, @steam-dark, 40%) 0%,
    mix(@steam-brass-dark, @steam-dark, 55%) 100%
  );
  border:        1px solid @steam-brass-dark;
  border-radius: 2px;
  color:         @steam-parchment;
  padding:       2px 5px;
  cursor:        pointer;
  font-size:     0.9rem;
  font-weight:   bold;

  &:hover { color: @steam-cream; }
  &:active { position: relative; top: 1px; }
}

// ============================================================
// Dice images
// ============================================================
.dice-image {
  border:        1px solid @steam-brass-dark;
  border-radius: 2px;
  box-shadow:    0 0 3px rgba(0, 0, 0, 0.25);
}

.dice-image-reroll {
  border:           2px solid @steam-acid;
  border-radius:    2px;
  background-color: rgba(@steam-acid-dark, 0.15);
  box-shadow:       0 0 5px rgba(@steam-acid, 0.5);
}


// ---- Mixin: rivet ornament (corner box-shadow bolts) ----
.riveted-border() {
  box-shadow:
    inset  4px  4px 0 1px @steam-rivet,
    inset -4px  4px 0 1px @steam-rivet,
    inset  4px -4px 0 1px @steam-rivet,
    inset -4px -4px 0 1px @steam-rivet,
    0 3px 10px rgba(0, 0, 0, 0.55);
}

// ---- Mixin: brass gradient ----
.brass-gradient() {
  background: linear-gradient(
    135deg,
    @steam-brass-dark  0%,
    @steam-brass       30%,
    @steam-brass-light 50%,
    @steam-brass       70%,
    @steam-brass-dark  100%
  );
}

// ============================================================
// Chat message container — parchment panel + brass frame
// ============================================================
#chat-log .chat-message,
.chat-popout .chat-message {
  border: 2px solid @steam-brass-dark;
  border-radius: 3px;
  .riveted-border();
  // Parchment background applied at all levels
  background:       @steam-parchment !important;
  background-color: @steam-parchment !important;
  color:            @steam-dark;
  margin-bottom:    6px;

  // Cover Foundry's inner wrappers
  .message-content {
    background:       @steam-parchment !important;
    background-color: @steam-parchment !important;
    color:            @steam-dark;
    padding:          4px 6px;
  }

  // All text descendants default to dark ink
  p, span, div, label, li, ul, h1, h2, h3, h4, h5 {
    color: @steam-dark;
  }

  // Whisper: acid-tinted parchment
  &.whisper {
    border-color:     @steam-acid-dark;
    background:       mix(@steam-parchment, @steam-acid, 85%) !important;
    background-color: mix(@steam-parchment, @steam-acid, 85%) !important;
    box-shadow:
      inset  4px  4px 0 1px @steam-acid-dark,
      inset -4px  4px 0 1px @steam-acid-dark,
      inset  4px -4px 0 1px @steam-acid-dark,
      inset -4px -4px 0 1px @steam-acid-dark,
      0 3px 10px rgba(0, 0, 0, 0.4);

    .message-content {
      background:       mix(@steam-parchment, @steam-acid, 85%) !important;
      background-color: mix(@steam-parchment, @steam-acid, 85%) !important;
    }
  }
}

// ============================================================
// Message header — brass plate with dark name
// ============================================================
.chat-message-header {
  .brass-gradient();
  border-bottom: 2px solid @steam-brass-dark;
  border-radius: 2px 2px 0 0;
  font-size: 1rem;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 6px;

  // Force brass bg even inside message-content parchment
  background:       linear-gradient(135deg, @steam-brass-dark 0%, @steam-brass 30%, @steam-brass-light 50%, @steam-brass 70%, @steam-brass-dark 100%) !important;
  background-color: @steam-brass !important;

  img.actor-icon,
  .actor-icon {
    border:       2px solid @steam-brass-dark;
    border-radius: 2px;
    box-shadow:   0 0 4px rgba(0,0,0,0.4);
    width:  40px;
    height: 40px;
    padding: 1px;
    background: @steam-parchment;
    flex-shrink: 0;
  }
}

.chat-actor-name {
  font-family:    @font-primary;
  font-size:      1.1rem;
  font-weight:    bold;
  color:          @steam-dark !important;
  text-shadow:    0 1px 1px rgba(255, 220, 80, 0.4);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
}

// ============================================================
// Separator — brass wire with central gear
// ============================================================
#chat-log .chat-message hr,
.chat-popout .chat-message hr {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent        0%,
    @steam-brass-dark  10%,
    @steam-brass       50%,
    @steam-brass-dark  90%,
    transparent       100%
  );
  margin: 5px 4px;
  position: relative;

  &::after {
    content:   "⚙";
    position:  absolute;
    top:       -0.6em;
    left:      50%;
    transform: translateX(-50%);
    color:     @steam-brass;
    font-size: 0.8rem;
    background: @steam-parchment;
    padding:   0 4px;
    line-height: 1.2;
  }
}

// ============================================================
// Detail list — dark ink on parchment
// ============================================================
#chat-log .chat-message ul,
.chat-popout .chat-message ul {
  list-style: none;
  margin:  4px 0;
  padding: 0 4px;

  li {
    color:         @steam-rust !important;   // dark sepia/brown ink — readable on parchment
    font-size:     0.88rem;
    padding:       2px 0 2px 18px;
    border-bottom: 1px solid rgba(@steam-brass-dark, 0.2);
    position:      relative;
    line-height:   1.4;

    &:last-child { border-bottom: none; }

    // Arrow bullet in brass
    &::before {
      content:  "▸";
      position: absolute;
      left:     2px;
      color:    @steam-brass-dark;
      font-size: 0.75rem;
      top: 3px;
    }

    strong { color: @steam-brass-dark !important; }
  }
}

// ============================================================
// Skill / ability icon
// ============================================================
.chat-icon {
  border:       2px solid @steam-brass-dark;
  border-radius: 3px;
  box-shadow:   0 0 5px rgba(0,0,0,0.3);
  background:   @steam-parchment-dk;
  width:  52px;
  height: 52px;
  padding: 2px;
  margin: 4px 6px 4px 4px;
  float: left;
}

// ============================================================
// Result labels (success / failure)
// ============================================================
.chat-result-success {
  color:       @steam-success !important;
  font-family: @font-primary;
  font-size:   1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.chat-result-failure {
  color:       @steam-failure !important;
  font-family: @font-primary;
  font-size:   1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.chat-result-text {
  font-family: @font-primary;
  font-size:   1.1rem;
  color:       @steam-dark !important;
}

// ============================================================
// Action buttons — brass mechanical style
// ============================================================
.chat-card-button,
.button-apply-impact,
.button-apply-bonus,
.button-select-confront,
.button-apply-cephaly-difficulty {
  display:    block;
  width:      calc(100% - 8px);
  margin:     4px;
  padding:    5px 10px;
  cursor:     pointer;
  font-size:  0.8rem;
  font-family: @font-primary;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 2px;
  border:     1px solid @steam-brass-dark;
  color:      @steam-parchment !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position:   relative;
  background: linear-gradient(180deg,
    mix(@steam-brass, @steam-dark, 50%) 0%,
    mix(@steam-brass-dark, @steam-dark, 65%) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 80, 0.2),
    0 2px 4px rgba(0,0,0,0.4);
  transition: background 0.15s;

  &:hover {
    background: linear-gradient(180deg,
      mix(@steam-brass-light, @steam-dark, 60%) 0%,
      mix(@steam-brass, @steam-dark, 50%) 100%
    );
    color: @steam-cream !important;
  }
  &:active { top: 1px; }
}

.plus-minus-button {
  background: linear-gradient(180deg,
    mix(@steam-brass, @steam-dark, 40%) 0%,
    mix(@steam-brass-dark, @steam-dark, 55%) 100%
  );
  border:  1px solid @steam-brass-dark;
  border-radius: 2px;
  color:   @steam-parchment !important;
  padding: 2px 5px;
  cursor:  pointer;
  font-size: 0.9rem;
  font-weight: bold;

  &:hover { color: @steam-cream !important; }
  &:active { position: relative; top: 1px; }
}

// ============================================================
// Dice images — brass frame
// ============================================================
.dice-image {
  border:        1px solid @steam-brass-dark;
  border-radius: 2px;
  box-shadow:    0 0 3px rgba(0,0,0,0.3);
}

.dice-image-reroll {
  border:           2px solid @steam-acid;
  border-radius:    2px;
  background-color: rgba(@steam-acid-dark, 0.15);
  box-shadow:       0 0 5px rgba(@steam-acid, 0.5);
}

// ============================================================
// GM difficulty select
// ============================================================
#chat-log .chat-message,
.chat-popout .chat-message {
  select[name="cephaly-difficulty"] {
    background: @steam-parchment-dk;
    color:      @steam-dark;
    border:     1px solid @steam-brass-dark;
    border-radius: 2px;
    padding:    2px 4px;
    font-size:  0.85rem;
  }
}


// ============================================================
// Welcome message — sections & footer
// ============================================================
.ecryme-chat-body {

  // Title
  .welcome-message-h3 {
    font-family:    @font-primary;
    font-size:      1.1rem;
    font-weight:    bold;
    color:          @steam-brass-dark;
    text-align:     center;
    text-shadow:    0 1px 1px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.06em;
    margin:         0 0 8px;
    padding-bottom: 4px;
    border-bottom:  1px solid rgba(@steam-brass-dark, 0.35);
  }

  // Content sections
  .welcome-section {
    color:         @steam-dark;
    font-size:     0.86rem;
    line-height:   1.5;
    margin-bottom: 8px;
    padding:       5px 6px;
    background:    rgba(@steam-parchment-dk, 0.55);
    border-left:   3px solid @steam-brass;
    border-radius: 0 2px 2px 0;

    strong { color: @steam-rust; }

    a {
      color:           @steam-brass-dark;
      font-weight:     bold;
      text-decoration: underline;
      &:hover { color: @steam-brass; }
    }
  }

  // Footer signature
  .welcome-footer {
    font-family:  @font-primary;
    font-size:    0.82rem;
    color:        @steam-rust;
    text-align:   center;
    font-style:   italic;
    margin-top:   8px;
    padding-top:  6px;
    border-top:   1px solid rgba(@steam-brass-dark, 0.3);
    letter-spacing: 0.03em;
  }
}