/* Message Actions Dock — knobs in config.css */
.msg-actions-dock {
position: absolute;
top: var(--dock-top, auto);
bottom: var(--dock-bottom, calc(100% + 5px));
right: var(--dock-outgoing-side, 2px);
left: auto;
display: none;
align-items: center;
gap: var(--dock-gap, 3px);
background: var(--dock-bg, rgba(10, 4, 24, 0.96));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--dock-border, rgba(168, 85, 247, 0.45));
border-radius: var(--dock-radius, 20px);
padding: var(--dock-pad-y, 2px) var(--dock-pad-x, 5px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 12px var(--dock-glow, rgba(168, 85, 247, 0.35));
z-index: var(--dock-z, 50);
}

.msg-incoming .msg-actions-dock {
left: var(--dock-incoming-side, 2px);
right: auto;
}

/* Invisible hover bridge connecting dock to message bubble */
.msg-actions-dock::after {
content: '';
position: absolute;
top: 100%;
bottom: auto;
left: 0;
right: 0;
height: 12px;
background: transparent;
pointer-events: auto;
}

.msg-line:hover .msg-actions-dock,
.msg-line.has-open-popover .msg-actions-dock,
.msg-actions-dock.has-open-popover,
.msg-actions-dock:has(.reaction-picker-popover),
.msg-actions-dock:focus-within {
display: flex !important;
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}

@media (hover: none) {
.msg-line .msg-actions-dock {
display: flex;
}
}

.msg-line:hover,
.msg-line.has-open-popover {
z-index: var(--dock-line-z) !important;
}

.msg-action-btn {
background: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 4px 5px;
border-radius: 6px;
color: #c084fc;
transition: all 0.18s ease;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}

.msg-action-btn svg {
display: block;
width: 17px;
height: 17px;
pointer-events: none;
transition: transform 0.18s ease, stroke 0.18s ease, fill 0.18s ease, filter 0.18s ease;
}

.msg-action-btn:hover {
color: #34d399;
background: rgba(192, 132, 252, 0.14);
transform: scale(1.15);
}

.msg-action-btn:hover svg {
filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.75));
}

.msg-action-btn.star-active {
color: #fbbf24;
text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

.msg-action-btn.star-active svg {
filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}

.msg-action-btn.delete-btn {
color: rgba(244, 63, 94, 0.82);
}

.msg-action-btn.delete-btn:hover {
color: #f43f5e;
background: rgba(244, 63, 94, 0.15);
transform: scale(1.15);
}

.msg-action-btn.delete-btn:hover svg {
filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.85));
}

.msg-edited-tag {
font-size: 0.72rem;
font-family: ui-monospace, monospace;
color: #34d399;
opacity: 0.8;
margin-left: 6px;
font-style: italic;
}

/* Inline Edit Box (#12) */
.msg-edit-box {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}

.msg-edit-input {
flex: 1;
background: rgba(7, 3, 16, 0.9);
border: 1px solid #34d399;
border-radius: 8px;
color: #ffffff;
padding: 4px 8px;
font-family: inherit;
font-size: 0.95rem;
outline: none;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.msg-edit-buttons {
display: flex;
gap: 4px;
}

.msg-edit-btn {
background: rgba(52, 211, 153, 0.2);
border: 1px solid #34d399;
border-radius: 6px;
color: #34d399;
font-size: 0.75rem;
font-family: ui-monospace, monospace;
font-weight: 700;
padding: 4px 8px;
cursor: pointer;
transition: all 0.2s;
}

.msg-edit-btn:hover {
background: #34d399;
color: #051a10;
}

.msg-edit-btn.cancel {
background: rgba(244, 63, 94, 0.2);
border-color: #f43f5e;
color: #f43f5e;
}

.msg-edit-btn.cancel:hover {
background: #f43f5e;
color: #fff;
}

/* Delete confirm popover — sits on the actions dock, message bubble stays intact */
.msg-delete-confirm-popover {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
left: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
min-width: 168px;
padding: 10px 12px;
background: rgba(12, 6, 24, 0.98);
border: 1.5px solid rgba(244, 63, 94, 0.65);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(244, 63, 94, 0.25);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 14px;
z-index: 1000;
animation: reactionPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
font-family: ui-monospace, monospace;
}

.msg-incoming .msg-delete-confirm-popover {
left: 0;
right: auto;
}

.msg-delete-confirm-popover::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 16px;
background: transparent;
pointer-events: auto;
}

.msg-delete-confirm-label {
font-size: 0.78rem;
color: #f43f5e;
font-weight: 700;
letter-spacing: 0.02em;
}

.msg-delete-confirm-buttons {
display: flex;
gap: 6px;
}

.msg-delete-confirm-buttons .msg-edit-btn:not(.cancel) {
background: rgba(168, 85, 247, 0.15);
border-color: rgba(168, 85, 247, 0.5);
color: #c084fc;
}

.msg-delete-confirm-buttons .msg-edit-btn:not(.cancel):hover {
background: #a855f7;
color: #fff;
}

/* Glitch delete animation */
.msg-line.msg-deleting {
animation: msg-glitch-delete 0.28s ease-in forwards;
}

@keyframes msg-glitch-delete {
0% { transform: scale(1); opacity: 1; filter: hue-rotate(0deg); }
50% { transform: scale(1.05) skewX(10deg); opacity: 0.7; filter: hue-rotate(90deg) invert(0.8); }
100% { transform: scale(0.3) translateY(-20px); opacity: 0; filter: blur(8px); }
}