/* ==========================================================================
   Message Components - BEM Naming
   ========================================================================== */

/* ========================================================================
   Base Message
   ======================================================================== */
.message {
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
}

.message:hover {
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Static message (no hover effects) */
.message--static {
  transition: none;
}

.message--static:hover {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
  transform: none;
}

/* ========================================================================
   Message Variants
   ======================================================================== */

/* User message - Pink/warm tones */
.message--user {
  background: linear-gradient(to bottom right, var(--color-pink-50), var(--color-surface-solid));
  border-color: var(--color-pink-200);
  box-shadow: 6px 6px 0 rgba(236, 72, 153, 0.1);
}

.message--user:hover {
  box-shadow: 8px 8px 0 rgba(236, 72, 153, 0.15);
}

.dark .message--user,
html.dark .message--user {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.1), var(--color-surface));
  border-color: rgba(236, 72, 153, 0.3);
}

/* AI message - Sky/cool tones */
.message--ai {
  background: linear-gradient(to bottom right, var(--color-sky-50), var(--color-surface-solid));
  border-color: var(--color-sky-200);
  box-shadow: 6px 6px 0 rgba(14, 165, 233, 0.1);
}

.message--ai:hover {
  box-shadow: 8px 8px 0 rgba(14, 165, 233, 0.15);
}

.dark .message--ai,
html.dark .message--ai {
  background: linear-gradient(to bottom right, rgba(14, 165, 233, 0.1), var(--color-surface));
  border-color: rgba(14, 165, 233, 0.3);
}

/* System message */
.message--system {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-200);
  box-shadow: none;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.dark .message--system,
html.dark .message--system {
  background-color: var(--color-slate-900);
  border-color: var(--color-slate-700);
}

.message--system:hover {
  transform: none;
  box-shadow: none;
}

/* Empty state message */
.message--empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-ink-muted);
  border-style: dashed;
}

/* ========================================================================
   Message Structure
   ======================================================================== */
.message__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.message__avatar {
  flex-shrink: 0;
}

.message__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message__sender {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-ink);
}

.message__timestamp {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.message__content {
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

.message__content p:last-child {
  margin-bottom: 0;
}

/* ========================================================================
   Message Footer & Actions
   ======================================================================== */
.message__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-muted);
}

.message__actions {
  display: flex;
  gap: var(--space-xs);
}

.message__action {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.message__action:hover {
  background-color: var(--color-hover-overlay);
  color: var(--color-ink);
}

/* ========================================================================
   Message Location
   ======================================================================== */
.message__location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-sm);
}

.message__location-icon {
  font-size: 0.875em;
}

/* ========================================================================
   Thread Indicator
   ======================================================================== */
.message__thread-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-100);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.dark .message__thread-indicator,
html.dark .message__thread-indicator {
  background-color: var(--color-slate-800);
}

/* ========================================================================
   Message Sizes
   ======================================================================== */

/* Compact */
.message--compact {
  padding: var(--space-sm) 0.625rem;
}

.message--compact .message__header {
  margin-bottom: var(--space-xs);
}

.message--compact .message__content {
  font-size: var(--text-sm);
}

/* Large */
.message--large {
  padding: var(--space-lg);
}

/* ========================================================================
   Message List
   ======================================================================== */
.message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.message-list--compact {
  gap: var(--space-sm);
}

/* ========================================================================
   Tape Message Card (Special diary style)
   ======================================================================== */
.tape-message-card {
  position: relative;
  z-index: 3;
}

/* ========================================================================
   Message Attachments
   ======================================================================== */
.message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.message__attachment {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-100);
  font-size: var(--text-xs);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.message__attachment:hover {
  background-color: var(--color-gray-200);
}

.dark .message__attachment,
html.dark .message__attachment {
  background-color: var(--color-slate-800);
}

.dark .message__attachment:hover,
html.dark .message__attachment:hover {
  background-color: var(--color-slate-700);
}

/* ========================================================================
   Message Reactions
   ======================================================================== */
.message__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.message__reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-100);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.message__reaction:hover {
  background-color: var(--color-gray-200);
}

.message__reaction--active {
  background-color: var(--color-pink-100);
  border-color: var(--color-pink-300);
}

.dark .message__reaction,
html.dark .message__reaction {
  background-color: var(--color-slate-800);
}

.dark .message__reaction:hover,
html.dark .message__reaction:hover {
  background-color: var(--color-slate-700);
}

/* ========================================================================
   New BEM Message Structure (Diary Style)
   ======================================================================== */

.message {
  position: relative;
  margin: 0 auto;
  max-width: 95%;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  background-color: var(--color-surface-solid);
  box-shadow: 6px 6px 0 oklch(70% 0.18 350 / 0.15);
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .message {
    max-width: 85%;
  }
}

.message:hover {
  box-shadow: 8px 8px 0 oklch(70% 0.18 350 / 0.25);
  transform: translateY(-2px);
}

.message--user {
  background: linear-gradient(to bottom right, oklch(97% 0.02 350), var(--color-surface-solid));
  border-color: oklch(82% 0.12 350);
}

.dark .message--user,
html.dark .message--user {
  background: linear-gradient(to bottom right, oklch(35% 0.12 350 / 0.2), var(--color-surface));
  border-color: oklch(58% 0.18 350);
}

.message--ai {
  background: linear-gradient(to bottom right, oklch(97% 0.01 220), var(--color-surface-solid));
  border-color: oklch(82% 0.09 220);
  box-shadow: 6px 6px 0 oklch(65% 0.12 220 / 0.15);
}

.message--ai:hover {
  box-shadow: 8px 8px 0 oklch(65% 0.12 220 / 0.25);
}

.dark .message--ai,
html.dark .message--ai {
  background: linear-gradient(to bottom right, oklch(35% 0.08 220 / 0.2), var(--color-surface));
  border-color: oklch(55% 0.12 220);
}

.message__inner {
  padding: var(--space-sm) var(--space-md);
}

@media (min-width: 640px) {
  .message__inner {
    padding: var(--space-md);
  }
}

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

.message__avatar-wrap {
  flex-shrink: 0;
}

.message__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface-solid);
  box-shadow: 2px 2px 0 oklch(0% 0 0 / 0.15);
}

@media (min-width: 640px) {
  .message__avatar {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.message__avatar--user {
  background: linear-gradient(to bottom right, oklch(72% 0.16 350), oklch(78% 0.16 85), oklch(72% 0.12 220));
}

.message__avatar--ai {
  background: linear-gradient(to bottom right, oklch(72% 0.12 220), oklch(65% 0.16 265), oklch(68% 0.16 285));
}

.dark .message__avatar,
html.dark .message__avatar {
  border-color: var(--color-gray-700);
}

.message__avatar-emoji {
  font-size: var(--text-sm);
}

@media (min-width: 640px) {
  .message__avatar-emoji {
    font-size: var(--text-base);
  }
}

.message__content {
  flex: 1;
  min-width: 0;
}

.message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.message__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.message__author {
  font-weight: var(--font-black);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 640px) {
  .message__author {
    font-size: var(--text-base);
  }
}

.dark .message__author,
html.dark .message__author {
  color: var(--color-gray-100);
}

.message__location {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-gray-100);
  font-size: 0.65rem;
  color: var(--color-gray-500);
}

.dark .message__location,
html.dark .message__location {
  background-color: oklch(37% 0.012 96 / 0.5);
  color: var(--color-gray-400);
}

.message__location-icon {
  width: 10px;
  height: 10px;
  margin-right: 4px;
}

.message__location-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

@media (min-width: 768px) {
  .message__location-text {
    max-width: 200px;
  }
}

 .message__time {
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }

 .message__title {
   max-width: 220px;
   width: 100%;
   margin-left: auto;
 }

 .message__title-input {
   width: 100%;
   border: 1px solid transparent;
   background-color: transparent;
   padding: 0;
   font-size: 0.95rem;
   font-weight: var(--font-black);
   color: var(--color-gray-900);
   letter-spacing: var(--tracking-tight);
   text-align: right;
 }

 .message__title-input::placeholder {
   color: var(--color-gray-500);
 }

 .message__title-input:focus {
   outline: none;
   border-color: var(--color-gray-300);
   border-radius: var(--radius-sm);
   background-color: var(--color-surface-solid);
   padding: 2px var(--space-xs);
 }

 .dark .message__title-input,
 html.dark .message__title-input {
   color: var(--color-gray-100);
 }

 .dark .message__title-input:focus,
 html.dark .message__title-input:focus {
   border-color: var(--color-gray-600);
   background-color: var(--color-surface);
 }


.message__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-800);
  margin-bottom: var(--space-sm);
}

.message__body ul {
  list-style-type: disc;
  padding-inline-start: 2ch;
  margin-block: 0.5em;
}

.message__body ol {
  list-style-type: decimal;
  padding-inline-start: 2ch;
  margin-block: 0.5em;
}

.message__body li {
  margin-block: 0.25em;
}

.dark .message__body,
html.dark .message__body {
  color: var(--color-gray-200);
}

.message__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}

.message__thread-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.message__thread-btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-colors);
}

@media (min-width: 640px) {
  .message__thread-btn {
    font-size: var(--text-sm);
  }
}

.message__thread-btn--user {
  color: oklch(55% 0.18 350);
}

.message__thread-btn--user:hover {
  color: oklch(50% 0.16 350);
}

.dark .message__thread-btn--user,
html.dark .message__thread-btn--user {
  color: oklch(72% 0.16 350);
}

.dark .message__thread-btn--user:hover,
html.dark .message__thread-btn--user:hover {
  color: oklch(82% 0.12 350);
}

.message__thread-btn--ai {
  color: oklch(55% 0.12 220);
}

.message__thread-btn--ai:hover {
  color: oklch(45% 0.10 220);
}

.dark .message__thread-btn--ai,
html.dark .message__thread-btn--ai {
  color: oklch(72% 0.12 220);
}

.dark .message__thread-btn--ai:hover,
html.dark .message__thread-btn--ai:hover {
  color: oklch(82% 0.09 220);
}

.message__thread-btn--muted {
  color: var(--color-gray-400);
  font-weight: var(--font-medium);
}

.message__thread-btn--muted:hover {
  color: var(--color-gray-600);
}

.dark .message__thread-btn--muted:hover,
html.dark .message__thread-btn--muted:hover {
  color: var(--color-gray-300);
}

.message__thread-icon {
  width: 1rem;
  height: 1rem;
}

.message__thread-label {
  display: none;
  margin-left: 4px;
}

@media (min-width: 640px) {
  .message__thread-label {
    display: inline;
  }
}

.message__thread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 4px;
  border-radius: var(--radius-full);
  background-color: oklch(94% 0.04 350);
  color: oklch(50% 0.16 350);
  font-size: var(--text-xs);
  font-weight: var(--font-black);
}

.dark .message__thread-count,
html.dark .message__thread-count {
  background-color: oklch(35% 0.12 350);
  color: oklch(90% 0.08 350);
}

/* ========================================================================
   Message Edit/Delete Actions
   ======================================================================== */

.message__edit-actions {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.message:hover .message__edit-actions,
.message:focus-within .message__edit-actions {
  display: flex;
}

/* On touch devices, always show actions */
@media (hover: none) {
  .message__edit-actions {
    display: flex;
  }
}

.message__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: none;
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-gray-500);
}

.message__action-btn:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.dark .message__action-btn:hover,
html.dark .message__action-btn:hover {
  background-color: var(--color-gray-800);
  color: var(--color-gray-200);
}

.message__action-btn--edit:hover {
  background-color: oklch(95% 0.03 220);
  color: oklch(45% 0.12 220);
  border-color: oklch(85% 0.08 220);
}

.dark .message__action-btn--edit:hover,
html.dark .message__action-btn--edit:hover {
  background-color: oklch(30% 0.08 220 / 0.3);
  color: oklch(75% 0.10 220);
  border-color: oklch(50% 0.10 220);
}

.message__action-btn--delete:hover {
  background-color: oklch(95% 0.03 25);
  color: oklch(50% 0.18 25);
  border-color: oklch(85% 0.10 25);
}

.dark .message__action-btn--delete:hover,
html.dark .message__action-btn--delete:hover {
  background-color: oklch(30% 0.08 25 / 0.3);
  color: oklch(70% 0.15 25);
  border-color: oklch(45% 0.15 25);
}

.message__action-icon {
  width: 14px;
  height: 14px;
}

.message__action-label {
  display: none;
}

@media (min-width: 640px) {
  .message__action-label {
    display: inline;
  }
}

/* ========================================================================
   Message Editing State
   ======================================================================== */

.message--editing {
  position: relative;
  opacity: 0.7;
  border-style: dashed;
  border-color: oklch(65% 0.15 220);
  animation: pulse-editing 2s ease-in-out infinite;
}

.message--editing::before {
  content: "Editing...";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background-color: oklch(55% 0.12 220);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  z-index: 10;
}

.dark .message--editing,
html.dark .message--editing {
  border-color: oklch(60% 0.12 220);
}

.dark .message--editing::before,
html.dark .message--editing::before {
  background-color: oklch(50% 0.15 220);
}

@keyframes pulse-editing {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.85;
  }
}

/* Message input for renaming */
.message__input {
  background-color: var(--color-surface-solid);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-retro-sm);
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-default);
  width: 60px;
}

.dark .message__input,
html.dark .message__input {
  background-color: var(--color-surface-dark-solid);
  border-color: var(--color-border-dark-default);
  color: var(--color-text-dark-default);
}

.message__time-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.message__time-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-fast);
  color: var(--color-gray-500);
}

.message__time-wrap:hover .message__time-edit-btn,
.message:hover .message__time-edit-btn {
  opacity: 1;
}

.message__time-label {
  cursor: pointer;
}

.message__time-edit-btn:hover {
  background-color: oklch(95% 0.03 220);
  color: oklch(45% 0.12 220);
  border-color: oklch(85% 0.08 220);
}

.dark .message__time-edit-btn:hover,
html.dark .message__time-edit-btn:hover {
  background-color: oklch(30% 0.08 220 / 0.3);
  color: oklch(75% 0.10 220);
  border-color: oklch(50% 0.10 220);
}

.message__time-edit-icon {
  width: 0.65rem;
  height: 0.65rem;
}

/* Responsive */
@media (max-width: 768px) {
  .message__input {
    width: 50px;
  }
}

/* ==========================================================================
   Alert / Flash Messages
   ========================================================================== */

.alert {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-lg);
}

.alert--error {
  background-color: var(--color-red-50);
  color: var(--color-red-500);
  border: 1px solid var(--color-red-200);
}

.dark .alert--error,
html.dark .alert--error {
  background-color: oklch(25% 0.08 25 / 0.3);
  color: var(--color-red-300);
  border-color: var(--color-red-700);
}

.alert--success {
  background-color: var(--color-green-50);
  color: var(--color-green-600);
  border: 1px solid var(--color-green-200);
}

.dark .alert--success,
html.dark .alert--success {
  background-color: oklch(25% 0.08 150 / 0.3);
  color: var(--color-green-300);
  border-color: var(--color-green-700);
}

.alert--warning {
  background-color: var(--color-amber-50);
  color: var(--color-amber-600);
  border: 1px solid var(--color-amber-200);
}

.dark .alert--warning,
html.dark .alert--warning {
  background-color: oklch(25% 0.08 80 / 0.3);
  color: var(--color-amber-300);
  border-color: var(--color-amber-700);
}

.alert--info {
  background-color: var(--color-sky-50);
  color: var(--color-sky-600);
  border: 1px solid var(--color-sky-200);
}

.dark .alert--info,
html.dark .alert--info {
  background-color: oklch(25% 0.08 220 / 0.3);
  color: var(--color-sky-300);
  border-color: var(--color-sky-700);
}