/* Shortcut buttons above the message box and the window that manages them. */
.shortcut-bar {
  order:-1; flex:1 0 100%; display:flex; gap:7px; min-width:0; overflow-x:auto;
  padding:1px 1px 3px; scrollbar-width:none;
}
.shortcut-bar::-webkit-scrollbar { display:none; }
.shortcut-chip, .shortcut-manage {
  flex:0 0 auto; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:6px 13px; border-radius:99px; font-size:12px; line-height:1.3; cursor:pointer;
}
.shortcut-chip {
  border:1px solid #e2c48a80; background:linear-gradient(135deg,#5b4632d9,#3d2f3ce6); color:#f6e3c2;
  box-shadow:0 2px 8px #140d2433;
}
.shortcut-chip::before { content:'⚡'; margin-right:5px; color:#f0c97c; }
.shortcut-chip:hover { border-color:#f0cf8fcc; color:#fff3dc; }
.shortcut-chip:disabled { opacity:.55; cursor:wait; }
.shortcut-manage { border:1px dashed #d9bbdc66; background:transparent; color:#cdb6d4; }
.shortcut-manage:hover { border-color:#e6cdf0aa; color:#f2e3f7; }

.shortcuts-dialog[open] { display:flex; flex-direction:column; }
.shortcuts-dialog { width:min(620px,100vw); overflow:hidden; }
.shortcuts-intro { margin:0; padding:12px 18px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.shortcuts-list {
  list-style:none; margin:0; padding:12px 18px; display:grid; gap:9px;
  overflow:auto; min-height:0; flex:1 1 auto;
}
.shortcuts-list li {
  display:flex; gap:12px; align-items:flex-start; padding:11px 13px;
  border:1px solid var(--border); border-radius:12px; background:#ffffff08;
}
.shortcuts-list li > div:first-child { flex:1; min-width:0; }
.shortcuts-list strong { font-size:13px; }
.shortcuts-list small { margin-left:8px; color:#9a6b2a; font-size:11px; }
.shortcuts-list p {
  margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap;
}
.shortcuts-list .shortcuts-empty { display:block; border-style:dashed; color:var(--muted); font-size:12px; background:none; }
.shortcut-row-actions { display:flex; gap:6px; flex-shrink:0; }
.shortcut-row-actions button { padding:5px 10px; font-size:11px; }
.shortcut-form {
  display:grid; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--border); flex-shrink:0;
}
.shortcut-form h3 { margin:0; font-size:13px; }
.shortcut-form label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.shortcut-form input, .shortcut-form select, .shortcut-form textarea {
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:10px;
  background:#ffffff0d; font:inherit; font-size:13px; color:inherit;
}
.shortcut-form input:focus, .shortcut-form select:focus, .shortcut-form textarea:focus { outline:2px solid #b49bd466; outline-offset:1px; }
.shortcut-form textarea { resize:vertical; min-height:96px; }
.shortcut-msg { margin:0; min-height:1.2em; color:#8a5f8f; font-size:12px; }
.shortcut-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:600px) {
  .shortcut-chip, .shortcut-manage { padding:5px 11px; font-size:11px; }
  .shortcuts-list li { flex-direction:column; }
  .shortcut-row-actions { align-self:flex-end; }
}

/* 단축 기능이 하나도 없으면 '만들기' 버튼 줄은 빼서 입력창 높이를 아낀다(메뉴 › 단축 기능에서 만들 수 있다) */
.shortcut-bar:has(> .shortcut-manage:only-child) { display:none; }