/* Shortcuts page and reply-box shortcut menu. Colours come only from the theme variables in styles.css. */
.panel-card.shortcuts-card{width:min(640px,100%);align-self:start}
.shortcut-form{display:grid;gap:6px;margin-top:12px}
.shortcut-form label{font-size:13px;font-weight:700;margin-top:6px}
.shortcut-key-field{display:flex;align-items:center;gap:2px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.shortcut-key-field>span{color:var(--muted);font-weight:600}
.shortcut-key-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px}
.shortcut-form textarea{width:100%;min-height:96px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;resize:vertical}
.shortcut-picture{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shortcut-picture input{min-width:0;max-width:100%}
.shortcut-picture img{width:80px;height:80px;object-fit:cover;border-radius:6px}
.shortcut-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.shortcuts-card :is(button,input,textarea):focus-visible{outline:2px solid var(--green);outline-offset:2px}

.shortcut-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-card .shortcut-heading h3{margin:0}
.shortcut-list{list-style:none;margin:8px 0 0;padding:0}
.shortcut-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:36px;padding:8px 0;border-bottom:1px solid var(--line)}
.shortcut-list li:last-child{border-bottom:0}
.shortcut-list code,.shortcut-option code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--green);background:var(--pale);border-radius:6px;padding:2px 6px;white-space:nowrap}
.shortcut-body{display:grid;gap:2px;min-width:0}
.shortcut-message{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:13px}
.shortcut-meta{font-size:12px;color:var(--muted)}
.shortcut-row-actions{display:flex;gap:2px;align-items:center}

@media (max-width:600px){
  .shortcut-list li{grid-template-columns:minmax(0,1fr) auto}
  .shortcut-list li>code{grid-column:1;grid-row:1;justify-self:start}
  .shortcut-row-actions{grid-column:2;grid-row:1}
  .shortcut-body{grid-column:1/-1;grid-row:2}
}

.shortcut-menu{max-height:220px;overflow:auto;border-bottom:1px solid var(--line);background:var(--surface)}
.shortcut-option{display:flex;align-items:center;gap:10px;min-height:36px;padding:8px 14px;cursor:pointer}
.shortcut-option.active,.shortcut-option[aria-selected="true"]{background:var(--soft)}
.shortcut-preview{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:13px}