@use '../../styles/variables' as *;

.panel {
  width: 340px;
  border-left: 1px solid var(--color-gray-20);
  background: var(--island-bg-color);
  display: flex;
  flex-direction: column;
  height: 100%;

  @media (max-width: 768px) {
    position: fixed;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    width: 100%;
    z-index: 90;
    border-left: none;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-gray-20);
}

.title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-gray-85);
}

.closeBtn {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--border-radius-md);

  &:hover {
    background: var(--color-surface-low);
    color: var(--color-on-surface);
  }
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.message {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.user {
  flex-direction: row-reverse;

  .bubble {
    background: var(--color-surface-primary-container);
    color: var(--color-primary-darkest);
  }
}

.assistant .bubble {
  background: var(--color-surface-low);
  color: var(--color-on-surface);
}

.avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-20);
  color: var(--color-muted);
  flex-shrink: 0;
}

.bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 260px;
  word-wrap: break-word;
}

.inputRow {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-gray-20);
  align-items: center;
}

.chatInput {
  flex: 1;

  input {
    font-size: var(--text-sm);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
