/* Settings template catalogue: list + a single live preview. */
#settings-wa-hsm-card [hidden] { display:none!important; }
.hsm-browser { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:24px; padding:20px; align-items:start; scroll-margin-top:12px; }
.hsm-catalogue { min-width:0; }
.hsm-search-row { display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:stretch; gap:8px; }
.hsm-search { display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:0 12px; border:1px solid var(--border-hover); border-radius:10px; background:var(--bg-card); color:var(--text-secondary); }
.hsm-search:focus-within { border-color:var(--accent-neon); }
.hsm-search svg { width:16px; height:16px; flex:none; }
.hsm-search input { width:100%; min-width:0; height:44px; border:0; outline:0!important; background:transparent; color:var(--text-primary); font-size:12px; }
.hsm-search input::placeholder { color:var(--text-secondary); }
.hsm-control { display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid var(--border-hover); border-radius:9px; color:var(--text-secondary); background:var(--bg-card); font-size:11px; font-weight:650; cursor:pointer; }
.hsm-control svg { width:14px; height:14px; flex:none; }
.hsm-control:hover { border-color:var(--accent-neon); color:var(--text-primary); }
.hsm-control:disabled { opacity:.5; cursor:wait; }
.hsm-filter-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.hsm-filter-row button { min-height:32px; padding:5px 9px; border:1px solid var(--border-default); border-radius:8px; font-size:10px; font-weight:650; color:var(--text-secondary); background:var(--bg-card); }
.hsm-filter-row button[aria-pressed="true"] { border-color:var(--accent-neon); color:var(--accent-neon); background:color-mix(in srgb,var(--accent-neon) 10%,var(--bg-card)); }
.hsm-status-filters { padding-bottom:12px; border-bottom:1px solid var(--border-default); }
.hsm-results-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin:10px 0; }
.hsm-results-count { font-size:10px; color:var(--text-secondary); min-height:15px; }
.hsm-result-statuses { display:flex; flex-wrap:wrap; gap:6px; }
.hsm-result-statuses button { min-height:28px; padding:5px 8px; cursor:pointer; }
.hsm-result-statuses button:hover { filter:brightness(1.15); }
.hsm-result-statuses button[aria-pressed="true"] { border-color:currentColor; }
.hsm-control:focus-visible,.hsm-result-statuses button:focus-visible { outline:2px solid var(--accent-neon); outline-offset:3px; }
.hsm-create-control { color:var(--accent-neon); border-color:color-mix(in srgb,var(--accent-neon) 35%,transparent); background:color-mix(in srgb,var(--accent-neon) 10%,var(--bg-card)); }
#settings-wa-hsm-card #settings-wa-off-hsmvend-row { margin:0 20px 20px; }
.hsm-templates-list { max-height:530px; max-height:min(58dvh,530px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; display:flex; flex-direction:column; gap:8px; padding:2px 6px 2px 2px; }
.hsm-template-row { display:flex; align-items:center; gap:10px; flex-shrink:0; width:100%; padding:13px 12px; min-height:76px; text-align:left; background:var(--bg-card); border:1px solid var(--border-default); border-radius:11px; color:var(--text-primary); cursor:pointer; }
.hsm-template-row:hover { border-color:var(--border-hover); }
.hsm-template-row[aria-pressed="true"] { border-color:var(--accent-neon); background:color-mix(in srgb,var(--accent-neon) 8%,var(--bg-card)); }
.hsm-selection-mark { width:14px; height:14px; flex:none; border:1px solid var(--border-hover); border-radius:50%; }
.hsm-template-row[aria-pressed="true"] .hsm-selection-mark { border-color:var(--accent-neon); background:var(--accent-neon); box-shadow:inset 0 0 0 3px var(--bg-card); }
.hsm-row-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.hsm-row-content>strong { font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hsm-row-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:9px; color:var(--text-secondary); }
.hsm-row-category { flex-shrink:0; max-width:35%; }
.hsm-row-category>span { font-size:9px; }
.hsm-template-row>svg { width:13px; height:13px; color:var(--text-secondary); flex:none; }
.hsm-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid var(--border-default); border-radius:5px; font-size:9px; line-height:1.25; font-weight:650; color:var(--text-secondary); }
.hsm-badge svg { width:11px; height:11px; flex:none; }
.hsm-tone-success { color:var(--accent-neon); border-color:color-mix(in srgb,var(--accent-neon) 30%,transparent); background:color-mix(in srgb,var(--accent-neon) 7%,transparent); }
.hsm-tone-warning { color:var(--wa-health-warning,var(--text-primary)); border-color:color-mix(in srgb,var(--wa-health-warning,var(--text-primary)) 30%,transparent); background:color-mix(in srgb,var(--wa-health-warning,var(--text-primary)) 7%,transparent); }
.hsm-tone-danger { color:var(--wa-health-danger,var(--text-primary)); border-color:color-mix(in srgb,var(--wa-health-danger,var(--text-primary)) 30%,transparent); background:color-mix(in srgb,var(--wa-health-danger,var(--text-primary)) 7%,transparent); }
.hsm-template-preview { min-width:0; padding:16px; border:1px solid var(--border-default); border-radius:14px; background:var(--bg-card); }
.hsm-preview-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.hsm-preview-toolbar>span { color:var(--text-secondary); font-size:9px; letter-spacing:1px; font-weight:750; }
#hsm-preview-back,.hsm-preview-back-bottom { display:none; }
#hsm-preview-title { font-size:13px; font-weight:750; line-height:1.5; overflow-wrap:anywhere; margin:0 0 10px; }
.hsm-preview-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.hsm-phone { border:5px solid var(--border-default); border-radius:30px; background:var(--bg-page); overflow:hidden; margin:0 auto; max-width:310px; }
.hsm-phone-head { display:flex; align-items:center; gap:10px; padding:15px 12px; border-bottom:1px solid var(--border-default); background:var(--bg-card); }
.hsm-phone-head>svg { width:30px; height:30px; padding:5px; border-radius:50%; background:var(--bg-page); color:var(--text-secondary); }
.hsm-phone-head>div { display:flex; flex-direction:column; gap:2px; }
.hsm-phone-head strong { font-size:11px; }.hsm-phone-head small { font-size:9px; color:var(--text-secondary); }
.hsm-phone-chat { min-height:250px; padding:18px 12px 30px; background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text-secondary) 12%,transparent) 1px,transparent 0) 0 0/16px 16px; }
.hsm-bubble { border:1px solid var(--border-default); border-radius:0 10px 10px; background:var(--wa-bubble-in,var(--bg-card)); color:var(--text-primary); overflow:hidden; }
.hsm-message-content { padding:10px 10px 6px; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.hsm-message-header { font-weight:750; margin-bottom:8px; }
.hsm-example { color:var(--accent-neon); font-weight:600; }
.hsm-message-footer { display:block; font-size:10px; color:var(--text-secondary); margin-top:8px; }
.hsm-message-time { display:block; text-align:right; font-size:9px; color:var(--text-secondary); margin-top:4px; }
.hsm-message-button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; font-size:11px; color:var(--accent-neon); border-top:1px solid var(--border-default); overflow-wrap:anywhere; }
.hsm-message-button svg { width:13px; height:13px; flex:none; }
.hsm-media { display:flex; min-height:110px; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:8px; background:var(--bg-page); color:var(--text-secondary); margin-bottom:8px; font-size:10px; }.hsm-media svg{width:30px;height:30px}
.hsm-preview-note { font-size:10px; color:var(--text-secondary); line-height:1.5; text-align:center; margin:12px 0; }
.hsm-preview-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--border-default); }
.hsm-feedback { display:flex; gap:8px; padding:10px; margin-bottom:12px; border:1px solid var(--border-default); border-radius:8px; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }.hsm-feedback svg{width:16px;height:16px;flex:none}
.hsm-preview-empty,.hsm-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; min-height:240px; padding:24px 12px; color:var(--text-secondary); font-size:12px; text-align:center; line-height:1.5; }
.hsm-preview-empty>svg,.hsm-empty>svg { width:30px; height:30px; opacity:.6; }
.hsm-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:50px 12px; font-size:12px; color:var(--text-secondary); }.hsm-loading svg { width:18px;height:18px;animation:hsm-spin 1s linear infinite }
@keyframes hsm-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hsm-loading svg{animation:none}}
@media(max-width:1100px) and (min-width:901px){.hsm-browser{gap:14px;padding:14px;grid-template-columns:minmax(0,1fr) 300px}.hsm-row-category{display:none}.hsm-row-content>strong{font-size:11px}}
@media(max-width:900px){
 .hsm-browser{display:block;padding:12px;scroll-margin-top:12px}.hsm-template-preview{display:none;border:0;padding:0;background:transparent}
 .hsm-show-preview .hsm-catalogue,.hsm-show-preview .hsm-search-row,.hsm-show-preview .sw-original-header{display:none!important}.hsm-show-preview .hsm-template-preview{display:block}
 #hsm-preview-back{display:inline-flex}.hsm-preview-back-bottom{display:flex;width:100%;margin-top:16px}.hsm-preview-toolbar{justify-content:space-between}.hsm-control{min-height:44px}.hsm-filter-row button{min-height:40px;flex-shrink:0;white-space:nowrap}
 .hsm-filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.hsm-status-filters{padding-bottom:10px}
 .hsm-search input{font-size:16px}.hsm-search-row{margin-bottom:16px}#hsm-sort-btn{padding:8px}.hsm-search{padding:0 9px;gap:6px}
 .hsm-template-row{padding:12px 10px;gap:8px;flex-wrap:wrap}.hsm-row-content{flex-basis:calc(100% - 55px)}.hsm-row-content>strong{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .hsm-row-category{max-width:100%;margin-left:22px;order:2}.hsm-template-row>svg{margin-left:auto}.hsm-templates-list{max-height:58dvh}
 .hsm-phone{max-width:340px}.hsm-phone-chat{min-height:240px}.hsm-preview-actions{justify-content:center}.hsm-preview-badges{margin-bottom:12px}
 #settings-wa-hsm-card .sw-original-header{padding:12px}#hsm-create-btn,#hsm-refresh-btn{min-height:44px}
}

@media(max-width:600px){
 .hsm-search-row{grid-template-columns:minmax(0,1fr) auto auto}.hsm-search-row .hsm-search{grid-column:1/-1}
 .hsm-create-detail,.hsm-refresh-label{display:none}#hsm-refresh-btn{width:44px;padding:8px}
 .hsm-result-statuses{gap:4px}.hsm-result-statuses button{min-height:40px;padding:6px;font-size:10px}
 #settings-wa-hsm-card #settings-wa-off-hsmvend-row{margin:4px 12px 12px}
}