/* Messages.css – styling for Messages.js dialogs */

message-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(0.25rem);
  z-index:9999;
}

message-dialog{
  display:block;
  width:min(24rem,92vw);
  background:var(--card,#1d283a);
  border:1px solid var(--border,#2a3a52);
  border-radius:0.5rem;
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.5);
  overflow:hidden;
  color:var(--text,#f0f4ff);
  font-family:var(--font-ui,'Inter',sans-serif);
}

message-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border,#2a3a52);
  font-weight:700;
  font-size:1rem;
  font-family:var(--font-disp,'Rajdhani',sans-serif);
  letter-spacing:.02em;
}

message-body{
  display:block;
  padding:1rem 1.25rem;
  line-height:1.45;
  font-size:0.875rem;
  white-space:pre-wrap;
  color:var(--muted,#94a3b8);
}

message-input-wrap{
  display:block;
  padding:0 1.25rem 1rem;
}

message-input-wrap input{
  width:100%;
  box-sizing:border-box;
  padding:0.5rem 0.625rem;
  font-family:var(--font-ui,'Inter',sans-serif);
  font-size:0.875rem;
  border:1px solid var(--border,#2a3a52);
  border-radius:var(--radius,0.25rem);
  background:var(--bg,#0f1729);
  color:var(--text,#f0f4ff);
  outline:none;
}

message-input-wrap input:focus{
  border-color:var(--primary,#3c83f6);
  box-shadow:0 0 0 2px rgba(60,131,246,.25);
}

message-actions{
  display:flex;
  gap:0.375rem;
  justify-content:flex-end;
  padding:0.75rem 1.25rem;
  border-top:1px solid var(--border,#2a3a52);
}

message-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 0.625rem;
  height:1.875rem;
  border-radius:var(--radius,0.25rem);
  border:1px solid var(--border,#2a3a52);
  background:transparent;
  color:var(--text,#f0f4ff);
  font-family:var(--font-ui,'Inter',sans-serif);
  font-size:0.6875rem;
  font-weight:500;
  cursor:pointer;
  transition:background .15s,color .15s;
  line-height:1;
}

message-actions button:hover{
  background:var(--card2,#253347);
}

message-actions button:focus{
  outline:none;
}

message-actions button:focus-visible{
  outline:2px solid var(--primary,#3c83f6);
  outline-offset:2px;
}

message-actions button[data-primary]{
  background:var(--primary,#3c83f6);
  color:var(--bg,#0f1729);
  border-color:var(--primary,#3c83f6);
  font-weight:600;
}

message-actions button[data-primary]:hover{
  filter:brightness(1.1);
}