.essay-actions {
  display: flex;
  gap: 10px;    

    justify-content: center;
    align-items: center;
    
   
    width: 100%; 
    margin-bottom: 1rem;
}

.btn-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .85rem;
  border-radius:999px;
  border:1px solid var(--chip-border);
  background:
    linear-gradient(to bottom right,
      color-mix(in srgb, var(--chip-bg) 92%, #fff),
      color-mix(in srgb, var(--chip-bg) 78%, #fff)
    ),
    var(--chip-bg);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  color:var(--chip-fg);
  font:500 .98rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 6px rgba(0,0,0,.06),
    var(--shadow-s);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.btn-chip i{
  font-size:.95rem;
  opacity:.9;
  transition: transform .18s ease, opacity .18s ease;
}

.btn-chip:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 8px 18px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--chip-border) 70%, var(--accent) 30%);
  background:
    linear-gradient(to bottom right,
      color-mix(in srgb, var(--chip-bg) 96%, #fff),
      color-mix(in srgb, var(--chip-bg) 86%, #fff)
    ),
    var(--chip-bg-hover);
}

.btn-chip:hover i.fa-share{ transform: translateX(2px) rotate(-6deg); opacity:1; }
.btn-chip:hover i.fa-quote-right{ transform: translateY(-1px); opacity:1; }

.btn-chip:active{ transform: translateY(0) scale(.985); }
.btn-chip:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent),
    0 6px 14px rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce){
  .btn-chip, .btn-chip i{ transition:none }
}

.cite-modal{
  width:min(640px, calc(100vw - 48px));
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:18px 18px 14px;
  background: var(--panel-gradient);
  color:var(--ink);
  box-shadow: var(--shadow-l);
  position: relative; 
}

.cite-modal::backdrop{
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}

.cite-title{
  margin:0 0 .5rem 0;
  font-family: var(--font-serif);
  font-size:1.05rem;
  color:var(--ink);
}

.cite-pre{
  margin:0 0 .9rem 0;
  padding:.75rem .9rem;
  border:1px dashed var(--border-2);
  border-radius:10px;
  background: var(--muted);
  color: var(--ink-2);
  font: 500 .95rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  word-break: break-word;
}

.cite-actions{ display:flex; gap:.5rem; justify-content:flex-end; }

.essay-actions .btn-chip {
  opacity: 0;
  transform: translateY(8px);
  animation: chipFadeIn 0.6s ease-out forwards;
}

.essay-actions .btn-chip:nth-of-type(1) {
  animation-delay: 0.4s;
}

.essay-actions .btn-chip:nth-of-type(2) {
  animation-delay: 0.55s;
}

@keyframes chipFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cite-x{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  border:1px solid var(--hairline);
  background: var(--muted);
  color: var(--ink);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.cite-x:hover{ transform: translateY(-1px); box-shadow: var(--shadow-s); }
.cite-x:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

.cite-modal .btn-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.48rem .8rem;
  border-radius:999px;
  border:1px solid var(--hairline);
  background: var(--muted);
  color: var(--ink);
  font:500 .96rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.01em;
  box-shadow: var(--shadow-s);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cite-modal .btn-chip i{ font-size:.95rem; opacity:.9; transition: transform .14s ease, opacity .14s ease; }

.cite-modal .btn-chip:hover{ transform: translateY(-0.5px); box-shadow: 0 6px 14px rgba(0,0,0,.10); }
.cite-modal .btn-chip:active{ transform: translateY(0); }

.cite-modal .copy-cite.copied{
  color: rgba(16, 185, 129, 0.9);                              
  border-color: color-mix(rgba(16, 185, 129, 0.9), var(--hairline));
  background: color-mix(in srgb, var(--muted) 85%, #e8f5e9 15%);
}

.cite-modal .copy-cite.copied i{ transform:scale(1.06); }

@media (prefers-reduced-motion: reduce){
  .cite-modal .btn-chip, .cite-modal .btn-chip i, .cite-x{ transition:none }
}

@media (max-width: 768px) {
  .essay-actions {
    gap: 4px;    
  }
}