/* Shared compact input and confirmation dialogs. Keep larger tool dialogs independent. */
#input-modal, #confirm-modal {
  background: rgb(22 29 36 / 42%);
  backdrop-filter: blur(5px);
  padding: 20px;
}
#workspace #input-modal .compact-dialog, #workspace #confirm-modal .compact-dialog {
  width: min(540px, 100%);
  padding: 0;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 72px rgb(17 24 39 / 24%), 0 4px 12px rgb(17 24 39 / 8%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  letter-spacing: 0;
}
.compact-dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 62px 0 28px;
}
.compact-dialog-header > div { min-width: 0; }
.compact-dialog .compact-dialog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid #d5e7de;
  border-radius: 8px;
  background: #eef7f2;
  color: #176b4e;
}
.compact-dialog-icon .ws-icon { width: 24px; height: 24px; }
#input-modal .eyebrow, #confirm-modal .eyebrow {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: #6b7680;
}
#input-modal h2, #confirm-modal h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #202a32;
  overflow-wrap: anywhere;
}
.compact-dialog-body { padding: 26px 28px 30px; }
#input-modal .modal-field { margin: 0; gap: 10px; font-size: 13px; font-weight: 550; color: #394651; }
#input-modal #input-value {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #cbd3db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #202a32;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#input-value::placeholder { color: #8b959e; opacity: 1; }
#input-modal #input-value:focus {
  outline: none;
  border-color: #318360;
  box-shadow: 0 0 0 3px rgb(49 131 96 / 12%);
}
#confirm-modal #confirm-body { margin: 0; font-size: 14px; line-height: 1.75; color: #5b6771; overflow-wrap: anywhere; white-space: pre-line; }
#input-modal .modal-actions, #confirm-modal .modal-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 18px 28px;
  border-top: 1px solid #e7ebee;
  background: #f7f9fa;
}
#input-modal .modal-actions > button, #confirm-modal .modal-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  width: auto;
  min-width: 86px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background .15s, box-shadow .15s;
}
.compact-dialog .modal-actions .ws-icon { flex: 0 0 16px; width: 16px; height: 16px; }
#input-modal .primary, #confirm-modal .primary { background: #176b4e; border: 1px solid #176b4e; color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 12%); }
#input-modal .primary:hover:not(:disabled), #confirm-modal .primary:hover:not(:disabled) { background: #10543c; }
#input-modal .primary:disabled { background: #e1e7e4; border-color: #dce3df; color: #718278; box-shadow: none; opacity: 1; cursor: not-allowed; }
#input-modal .ghost, #confirm-modal .ghost { border: 1px solid #d4dce2; background: #fff; color: #43505b; }
#input-modal .ghost:hover, #confirm-modal .ghost:hover { background: #eef2f5; }
.compact-dialog .modal-close { top: 20px; right: 18px; display: grid; place-items: center; padding: 8px; width: 32px; height: 32px; color: #7c8791; }
.compact-dialog .modal-close .ws-icon { width: 18px; height: 18px; }
.compact-dialog button:focus-visible { outline: 2px solid #318360; outline-offset: 3px; }
.dialog-danger .compact-dialog-icon { color: #b33134; background: #fff1f0; border-color: #f2d7d4; }
@media (max-width: 480px) {
  #input-modal, #confirm-modal { padding: 16px; }
  .compact-dialog-header { padding: 26px 48px 0 20px; gap: 12px; }
  .compact-dialog .compact-dialog-icon { width: 40px; height: 40px; flex-basis: 40px; }
  #input-modal h2, #confirm-modal h2 { font-size: 20px; }
  .compact-dialog-body { padding: 24px 20px; }
  #input-modal .modal-actions, #confirm-modal .modal-actions { padding: 16px 20px; }
  #input-modal .modal-actions > button, #confirm-modal .modal-actions > button { min-width: 72px; padding: 10px 12px; }
  .compact-dialog .modal-close { right: 12px; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #input-modal .compact-dialog, #confirm-modal .compact-dialog { animation: none; }
  .compact-dialog button, #input-modal #input-value { transition: none; }
}