/* Floating Message Feed */
#message-feed {
width: 100%;
max-width: var(--feed-max-width);
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: var(--feed-gap);
min-height: 20px;
justify-content: flex-end;
transition: all 0.3s ease;
}

.msg-line {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 500;
letter-spacing: 0.015em;
transition: opacity 0.3s ease, transform 0.3s ease;
animation: msg-appear 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Outgoing messages: RIGHT side */
.msg-line.msg-outgoing {
align-items: flex-end;
align-self: flex-end;
}

/* Incoming messages: LEFT side */
.msg-line.msg-incoming {
align-items: flex-start;
align-self: flex-start;
}

/* Chat Card / Bubble Frame */
.msg-card {
position: relative;
display: inline-flex;
flex-direction: column;
gap: 4px;
max-width: min(var(--bubble-max-pct), var(--bubble-max-width));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: var(--bubble-pad-y) var(--bubble-pad-x);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
transition: all 0.25s ease;
}

.msg-outgoing .msg-card {
border-radius: var(--bubble-radius) var(--bubble-radius) 4px var(--bubble-radius);
border: 1px solid rgba(168, 85, 247, 0.45);
background: rgba(22, 12, 42, 0.9);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.2);
margin-left: auto;
margin-right: 0;
}

.msg-incoming .msg-card {
border-radius: var(--bubble-radius) var(--bubble-radius) var(--bubble-radius) 4px;
border: 1px solid rgba(52, 211, 153, 0.45);
background: rgba(4, 26, 18, 0.9);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.22);
margin-left: 0;
margin-right: auto;
}

/* Text Content Row */
.msg-content-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
}

.msg-text {
font-size: 1.02rem;
line-height: 1.5;
word-break: break-word;
flex: 1;
white-space: pre-wrap;
}

.msg-text strong {
font-weight: 700;
color: #f5d0fe;
text-shadow: 0 0 8px rgba(192, 132, 252, 0.45);
}

.msg-text em {
font-style: italic;
color: inherit;
}

.msg-text .md-strike {
opacity: 0.75;
}

.msg-text .md-underline {
text-decoration: underline;
text-underline-offset: 0.15em;
}

.md-inline-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.88em;
padding: 0.1em 0.4em;
border-radius: 6px;
background: rgba(15, 6, 32, 0.85);
border: 1px solid rgba(168, 85, 247, 0.35);
color: #c4b5fd;
white-space: pre-wrap;
}

.md-quote {
margin: 6px 0;
padding: 6px 10px;
border-left: 3px solid #34d399;
background: rgba(6, 24, 18, 0.45);
border-radius: 0 8px 8px 0;
color: #a7f3d0;
white-space: pre-wrap;
}

.md-list {
margin: 4px 0 4px 1.1em;
padding: 0;
list-style: disc;
}

.md-list li {
margin: 2px 0;
white-space: pre-wrap;
}

.md-heading {
font-weight: 700;
letter-spacing: 0.02em;
margin: 4px 0;
color: #e9d5ff;
}

.md-h1 { font-size: 1.15em; }
.md-h2 { font-size: 1.08em; }
.md-h3 { font-size: 1.02em; }

.md-spoiler {
background: rgba(88, 28, 135, 0.85);
color: transparent;
text-shadow: none;
border-radius: 4px;
cursor: pointer;
padding: 0 0.15em;
transition: color 0.15s ease, background 0.15s ease;
}

.md-spoiler.revealed {
background: rgba(88, 28, 135, 0.25);
color: inherit;
}

.msg-outgoing .msg-text {
color: #f3e8ff;
text-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}

.msg-incoming .msg-text {
color: #d1fae5;
text-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

/* Meta & Status Receipts */
.msg-status-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
user-select: none;
font-size: 0.70rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
padding: 1px 3px;
border-radius: 4px;
transition: all 0.2s ease;
}

.msg-time {
font-size: 0.68rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #a78bfa;
opacity: 0.65;
letter-spacing: -0.02em;
cursor: help;
transition: opacity 0.2s ease;
}

.msg-incoming .msg-time {
color: #6ee7b7;
opacity: 0.65;
}

.msg-card:hover .msg-time {
opacity: 0.95;
}

.msg-receipt {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: -0.05em;
line-height: 1;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
cursor: help;
}

/* 1. Sent: Single lavender / muted tick */
.msg-receipt.receipt-sent {
color: #c084fc;
opacity: 0.65;
text-shadow: none;
}

/* 2. Received / Delivered: Double slate/muted tick */
.msg-receipt.receipt-delivered {
color: #94a3b8;
opacity: 0.8;
text-shadow: none;
}

/* 3. Read / Seen: Double glowing emerald green tick */
.msg-receipt.receipt-read {
color: #34d399;
opacity: 1;
text-shadow: 0 0 8px rgba(52, 211, 153, 0.95), 0 0 16px rgba(16, 185, 129, 0.6);
animation: receipt-read-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.msg-receipt.receipt-failed {
  color: #f43f5e;
  opacity: 0.95;
  cursor: pointer;
  animation: receipt-failed-pulse 1.8s infinite ease-in-out;
}

.msg-receipt.receipt-failed:hover {
  transform: scale(1.2);
  opacity: 1;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
}

.msg-receipt.receipt-retrying {
  color: #fbbf24;
  opacity: 0.9;
  display: inline-block;
  cursor: wait;
  animation: receipt-spin 1s infinite linear;
}

.msg-card:hover .msg-receipt.receipt-sent {
opacity: 0.9;
}

.msg-card:hover .msg-receipt.receipt-delivered {
opacity: 1;
}

@keyframes receipt-read-pop {
0% { transform: scale(0.8); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}

@keyframes receipt-failed-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 6px rgba(244, 63, 94, 0.7); }
}

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


/* Typewriter Caret */
.typewriter-caret {
display: inline-block;
width: 2px;
height: 1.1em;
background: #34d399;
box-shadow: 0 0 8px #34d399;
vertical-align: middle;
margin-left: 2px;
animation: caret-blink 0.7s infinite alternate;
}

@keyframes caret-blink {
0% { opacity: 0.1; }
100% { opacity: 1; }
}

.media-file-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.95rem;
margin-top: 0.25rem;
border-radius: 8px;
background: rgba(14, 8, 28, 0.9);
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
}

.msg-outgoing .media-file-chip {
border: 1px solid rgba(192, 132, 252, 0.5);
color: #e9d5ff;
}

.msg-incoming .media-file-chip {
border: 1px solid rgba(52, 211, 153, 0.6);
color: #6ee7b7;
}

/* Reactions Dock */
.msg-reactions-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: -6px;
z-index: 5;
position: relative;
}

.msg-outgoing .msg-reactions-bar {
justify-content: flex-end;
margin-right: 8px;
margin-left: auto;
}

.msg-incoming .msg-reactions-bar {
justify-content: flex-start;
margin-left: 8px;
margin-right: auto;
}

/* ─── 1. Docked Reply Bar above Omnibox (#1) ─── */
.reply-dock-bar {
position: absolute;
top: -46px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 14px;
background: rgba(14, 8, 28, 0.96);
border: 1px solid rgba(168, 85, 247, 0.6);
border-left: 3.5px solid #34d399;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 12px rgba(52, 211, 153, 0.3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 20;
animation: msg-appear 0.2s ease-out;
font-family: ui-monospace, monospace;
}
.reply-dock-bar.hidden { display: none !important; }
.reply-dock-close {
background: transparent;
border: 1px solid transparent;
color: #c084fc;
cursor: pointer;
width: 24px;
height: 24px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
line-height: 1;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}
.reply-dock-close:hover {
background: rgba(244, 63, 94, 0.15);
border-color: rgba(244, 63, 94, 0.4);
color: #f43f5e;
transform: scale(1.1);
}