/**
 * Samtrygg Design System — Chat Component
 * Version: 1.2 · April 2026
 *
 * Depends on: _tokens.css, _avatar.css
 *
 * Usage:
 *   <div class="chat-layout">
 *     <div class="chat-sidebar">
 *       <div class="chat-sidebar__head">Konversationer</div>
 *       <div class="chat-thread is-active">
 *         <div class="avatar avatar--sm">MJ</div>
 *         <div class="chat-thread__info">
 *           <div class="chat-thread__name">Maria Johansson</div>
 *           <div class="chat-thread__preview">Okej, låter bra!</div>
 *           <div class="chat-thread__time">09:14</div>
 *         </div>
 *         <div class="chat-thread__unread"></div>
 *       </div>
 *     </div>
 *     <div class="chat-main">
 *       <div class="chat-header">…</div>
 *       <div class="chat-messages">
 *         <div class="bubble bubble--in">Hej, är lägenheten fortfarande ledig?</div>
 *         <div class="bubble-time">09:10</div>
 *         <div class="bubble bubble--out">Ja, absolut!</div>
 *         <div class="bubble-time bubble-time--out">09:12</div>
 *       </div>
 *       <div class="chat-input">
 *         <input type="text" placeholder="Skriv ett meddelande…"/>
 *         <button class="btn btn--primary btn--sm">Skicka</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Rules:
 *   - Incoming bubble: white bg, dark text, left-anchored
 *   - Outgoing bubble: dark bg, white text, right-anchored
 *   - Max bubble width: 75% of container
 *   - Unread dot: 8px coral red, top-right of thread item
 *   - Do not use chat-layout inside a modal
 */


/* ── Layout shell ── */

.chat-layout {
  display:       grid;
  grid-template-columns: 300px 1fr;
  border:        1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  background:    var(--surface-raised);
}


/* ── Thread sidebar ── */

.chat-sidebar {
  border-right:   1px solid var(--border-default);
  display:        flex;
  flex-direction: column;
  overflow-y:     auto;
}

.chat-sidebar__head {
  padding:       14px var(--s-3);
  border-bottom: 1px solid var(--border-default);
  font-size:     var(--text-sm);
  font-weight:   700;
  color:         var(--text-primary);
  flex-shrink:   0;
}

.chat-thread {
  display:     flex;
  gap:         var(--s-2);
  padding:     var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-default);
  cursor:      pointer;
  align-items: flex-start;
  transition:  background var(--transition-fast);
}

.chat-thread:hover,
.chat-thread.is-active {
  background: var(--surface-warm);
}

.chat-thread__info {
  flex:      1;
  min-width: 0;
}

.chat-thread__name {
  font-size:   var(--text-sm);
  font-weight: 700;
  margin-bottom: 2px;
  color:       var(--text-primary);
}

.chat-thread__preview {
  font-size:     var(--text-xs);
  color:         var(--text-secondary);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.chat-thread__time {
  font-size: var(--text-xs);
  color:     var(--text-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}

.chat-thread__unread {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-action);
  flex-shrink:   0;
  margin-top:    6px;
}


/* ── Main chat area ── */

.chat-main {
  display:        flex;
  flex-direction: column;
  min-height:     0;
}

.chat-header {
  padding:       14px var(--s-4);
  border-bottom: 1px solid var(--border-default);
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  flex-shrink:   0;
}

.chat-header__title {
  font-size:   var(--text-base);
  font-weight: 700;
  margin:      0;
}

.chat-messages {
  flex:            1;
  padding:         var(--s-4);
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  gap:             var(--s-1);
  background:      #fafaf8;
}


/* ── Message bubbles ── */

.bubble {
  max-width:   75%;
  padding:     10px var(--s-3);
  font-size:   var(--text-sm);
  line-height: 1.55;
  word-break:  break-word;
}

/* Incoming — left */
.bubble--in {
  background:    var(--surface-raised);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  align-self:    flex-start;
  color:         var(--text-primary);
}

/* Outgoing — right */
.bubble--out {
  background:    var(--surface-inverse);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  align-self:    flex-end;
  color:         var(--text-inverse);
}

.bubble-time {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  margin-top: 2px;
  line-height: 1;
}

.bubble-time--out {
  align-self:  flex-end;
  color:       rgba(255, 255, 255, 0.45);
}

/* Typing indicator */
.bubble--typing {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  padding:     10px 14px;
}

.bubble--typing span {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--text-secondary);
  animation:     chat-bounce 1.4s ease infinite;
}

.bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble--typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-bounce {
  0%, 60%, 100% { opacity: .3; transform: scale(.8); }
  30%           { opacity: 1;  transform: scale(1); }
}


/* ── Input bar ── */

.chat-input {
  padding:       var(--s-2) var(--s-3);
  border-top:    1px solid var(--border-default);
  display:       flex;
  gap:           var(--s-2);
  align-items:   center;
  flex-shrink:   0;
  background:    var(--surface-raised);
}

.chat-input__field {
  flex:          1;
  padding:       10px var(--s-3);
  border:        1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  background:    var(--surface-raised);
  color:         var(--text-primary);
  outline:       none;
  transition:    border-color var(--transition-fast);
}

.chat-input__field:focus {
  border-color: var(--border-focus);
  box-shadow:   0 0 0 3px color-mix(in oklab, var(--border-focus) 10%, transparent);
}

.chat-input__field::placeholder {
  color: var(--text-secondary);
}


/* ── Responsive ── */

@media (max-width: 768px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }
  .chat-sidebar {
    display: none;
  }
}