/* Match the desktop client's template browser without changing other dialogs. */
#template-picker {
  width: min(800px, calc(100vw - 48px));
  max-width: none;
  max-height: 82vh;
  max-height: 82dvh;
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid #e1e8f4;
  border-radius: 20px;
  background: #fff;
  color: #355795;
  box-shadow: 0 26px 80px #23437012;
}
#template-picker::backdrop { background: #20365745; backdrop-filter: blur(3px); }
#template-picker .template-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#template-picker .template-picker-heading h2 { margin: 0; color: #355795; font-size: 22px; font-weight: 650; }
#template-picker-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: #f6f8fc; color: #355795; }
#template-picker-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#template-picker-search { width: 100%; min-height: 40px; margin: 0 0 18px; padding: 10px 13px; border: 1px solid #e1e8f4; border-radius: 11px; background: #fff; color: #355795; font: inherit; font-size: 12px; }
#template-picker-search::placeholder { color: #8291aa; }
#template-picker-search:focus-visible { outline: 2px solid #344ee7; outline-offset: 3px; }
#template-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#template-picker .template-picker-card { display: flex; flex-direction: column; min-width: 0; gap: 10px; padding: 16px; border: 1px solid transparent; border-radius: 14px; background: #f6f8fc; }
#template-picker .template-picker-card.is-selected { border-color: #344ee7; background: #eaf0fd; }
#template-picker .template-picker-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#template-picker .template-picker-card-head h3 { min-width: 0; margin: 0; color: #355795; font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
#template-picker .template-picker-card-head > span { flex: none; padding: 3px 6px; border-radius: 5px; background: #fff; color: #8291aa; font-size: 10px; }
#template-picker .template-picker-card > p { margin: 0; color: #8291aa; font-size: 11px; line-height: 1.65; }
#template-picker .template-picker-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 3px; }
#template-picker .template-picker-actions :is(a, button) { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 6px 9px; border: 0; border-radius: 7px; background: #fff; color: #355795; font-size: 10px; line-height: 1.4; text-decoration: none; }
#template-picker .template-picker-actions button { margin-left: auto; background: #344ee7; color: #fff; font-weight: 600; }
#template-picker .template-picker-actions button:hover { background: #2941cb; }
#template-picker .template-picker-actions a:hover { background: #edf2fc; }
#template-picker .template-picker-actions button:disabled { opacity: .45; cursor: default; }
#template-picker .template-picker-empty { grid-column: 1 / -1; margin: 0; padding: 25px; text-align: center; color: #8291aa; font-size: 12px; }
@media (max-width: 600px) {
  #template-picker { width: calc(100vw - 24px); max-height: 90dvh; padding: 17px; border-radius: 15px; }
  #template-picker-list { grid-template-columns: minmax(0, 1fr); }
}