:root { --msg-primary:#2563eb; --msg-ink:#162033; --msg-muted:#667085; --msg-line:#e1e7ef; }
body[data-tool="messages"] { color:var(--msg-ink); background:var(--suite-bg); }
.sidebar-wrapper { position:sticky; top:60px; min-height:calc(100vh - 60px); height:calc(100vh - 60px); overflow-y:auto; padding:22px 18px; border-right:1px solid var(--msg-line)!important; box-shadow:none!important; }
.product-heading { display:flex; align-items:center; gap:11px; margin-bottom:28px; }
.product-heading .product-mark { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:#039855; border-radius:12px; font-weight:800; }
.product-heading strong,.product-heading small { display:block; }
.product-heading strong { font-size:17px; }
.product-heading small { margin-top:2px; color:var(--msg-muted); font-size:12px; }
.sidebar-wrapper h5 { margin-top:18px; color:#475467!important; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.sidebar-wrapper .list-group-item { margin-bottom:3px; padding:9px 11px; color:#475467; font-size:14px; font-weight:600; }
.sidebar-wrapper .list-group-item:hover { color:var(--tool-accent); background:var(--tool-accent-soft); }
.sidebar-wrapper .list-group-item.active { color:var(--tool-accent-dark); background:var(--tool-accent-soft); }
.message-main { min-height:100vh; padding:34px clamp(18px,3vw,42px)!important; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.page-heading .eyebrow { display:block; margin-bottom:5px; color:var(--tool-accent); font-size:11px; font-weight:800; letter-spacing:.12em; }
.page-heading h1 { margin:0; font-size:clamp(28px,4vw,38px); font-weight:780; letter-spacing:-.035em; }
.page-heading p { margin:7px 0 0; color:var(--msg-muted); }
.action-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:#fff; border:1px solid var(--msg-line); border-radius:14px; box-shadow:var(--suite-shadow); }
.search-box { position:relative; width:min(560px,70%); }
.search-box i { position:absolute; left:14px; top:50%; z-index:2; color:#98a2b3; transform:translateY(-50%); }
.search-box .form-control { height:44px; padding-left:42px; border-color:#d5dce6; border-radius:10px; box-shadow:none!important; }
.search-box .form-control:focus { border-color:#84a9f4; box-shadow:0 0 0 3px rgba(37,99,235,.12)!important; }
.action-bar>.btn { min-height:44px; padding-left:18px; padding-right:18px; border-radius:10px; font-weight:700; }
.msg-card { overflow:visible; border:1px solid var(--msg-line)!important; border-radius:14px!important; box-shadow:var(--suite-shadow)!important; transition:transform .16s ease,box-shadow .16s ease!important; }
.tpl-item:has(.more-menu[open]) { position:relative; z-index:25; }
.msg-card:hover { transform:translateY(-2px)!important; box-shadow:0 14px 34px rgba(16,24,40,.09)!important; }
.msg-card .card-header { padding-left:18px; padding-right:18px; }
.msg-card .card-body { padding:12px 18px 18px; }
.msg-card .card-footer { padding:0 18px 18px; }
.card-quick-actions { display:flex; align-items:center; gap:4px; }
.card-quick-actions form { display:flex; }
.card-quick-actions .btn { width:34px; height:34px; padding:0; display:grid; place-items:center; }
.more-menu { position:relative; }
.more-menu summary { list-style:none; cursor:pointer; }
.more-menu summary::-webkit-details-marker { display:none; }
.more-menu__panel { position:absolute; top:39px; right:0; z-index:30; width:190px; padding:6px; background:#fff; border:1px solid var(--msg-line); border-radius:11px; box-shadow:0 14px 36px rgba(16,24,40,.16); }
.more-menu__panel>a,.more-menu__panel>button,.more-menu__panel>form>button { display:flex; align-items:center; gap:9px; width:100%; min-height:38px; padding:8px 10px; color:#344054; background:transparent; border:0; border-radius:7px; text-align:left; text-decoration:none; font-size:13px; }
.more-menu__panel>a:hover,.more-menu__panel>button:hover,.more-menu__panel>form>button:hover { background:#f2f4f7; }
.more-menu__order { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; color:#667085; font-size:13px; }
.more-menu__order form { display:flex; gap:4px; }
.more-menu__order button { display:grid; place-items:center; width:30px; height:30px; padding:0; color:#475467; background:#f8fafc; border:1px solid #e1e7ef; border-radius:6px; }
.copy-primary { min-height:42px; }
.copy-primary i { margin-right:7px; }
.usage-meta { display:flex; justify-content:space-between; gap:10px; color:#98a2b3; font-size:11px; }
.content-pre { min-height:110px!important; max-height:230px; overflow:auto; border:1px solid #e7ebf0; background:#f8fafc!important; line-height:1.65; }
.content-pre mark { padding:0 2px; color:inherit; background:#fef08a; border-radius:3px; }
.msg-card .btn-primary { border-radius:9px; font-weight:700; }
.modal-content { overflow:hidden; border:0; border-radius:16px; box-shadow:0 24px 70px rgba(16,24,40,.2); }
.modal-header { padding:18px 22px; border-bottom-color:#e7ebf0; }
.modal-body { padding:22px; }
.modal-footer { padding:15px 22px; background:#fafbfc; }
.form-control,.form-select { min-height:42px; border-color:#d5dce6; border-radius:9px; }
.mobile-filters { display:flex; flex-wrap:nowrap; gap:7px; margin:0 -18px 18px; padding:0 18px 5px; overflow-x:auto; scrollbar-width:none; }
.mobile-filters::-webkit-scrollbar { display:none; }
.mobile-filters a { flex:none; padding:8px 13px; color:#475467; background:#fff; border:1px solid var(--msg-line); border-radius:99px; font-size:13px; font-weight:700; text-decoration:none; }
.mobile-filters a.active { color:#fff; background:var(--tool-accent); border-color:var(--tool-accent); }
.mobile-manage { display:flex; gap:8px; margin:-8px 0 18px; }
.mobile-manage .btn { flex:1; font-size:13px; }
.view-tabs { display:flex; gap:6px; overflow-x:auto; }
.view-tabs a,.view-tabs button { flex:none; padding:8px 14px; color:#475467; background:#fff; border:1px solid var(--msg-line); border-radius:9px; font-size:13px; font-weight:700; text-decoration:none; }
.view-tabs .active,.view-tabs a:hover,.view-tabs button:hover { color:var(--tool-accent-dark); border-color:var(--tool-accent); background:var(--tool-accent-soft); }
.recent-panel { display:flex; gap:8px; padding:12px; overflow-x:auto; background:#fff; border:1px solid var(--msg-line); border-radius:13px; }
.recent-item { flex:0 0 190px; padding:10px 12px; overflow:hidden; text-align:left; background:#f8fafc; border:1px solid #e1e7ef; border-radius:9px; }
.recent-item span,.recent-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-item span { color:#344054; font-weight:700; }
.recent-item small { margin-top:3px; color:#98a2b3; }
.history-item { padding:14px 0; border-bottom:1px solid #e7ebf0; }
.history-item:first-child { padding-top:0; }
.history-item:last-child { border-bottom:0; }
.history-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.history-head span { color:#98a2b3; font-size:12px; }
.history-content { max-height:180px; overflow:auto; padding:11px; color:#475467; background:#f8fafc; border-radius:8px; font-size:13px; line-height:1.6; }
.empty-state { padding:60px 20px; text-align:center; background:#fff; border:1px dashed #bdc7d5; border-radius:15px; }
.empty-state i { display:block; margin-bottom:14px; color:#98a2b3; font-size:34px; }
.empty-state h2 { margin:0 0 7px; font-size:19px; }
.empty-state p { margin:0 0 18px; color:var(--msg-muted); }
.empty-state[hidden] { display:none; }
#searchEmpty { margin-top:20px; }
.app-toast { position:fixed; right:20px; bottom:20px; z-index:2000; max-width:min(360px,calc(100vw - 24px)); padding:12px 16px; color:#fff; background:#067647; border-radius:11px; box-shadow:0 14px 38px rgba(16,24,40,.22); font-size:14px; font-weight:700; }
.app-toast.error { background:#b42318; }
.app-toast.warning { color:#5f4500; background:#fdb022; }
.app-toast[hidden] { display:none; }
@media(max-width:767.98px) {
  .message-main { padding-top:22px!important; }
  .page-heading { margin-bottom:18px; }
  .page-heading p { font-size:14px; }
  .action-bar { position:sticky; top:0; z-index:20; margin-left:-6px; margin-right:-6px; padding:8px; }
  .search-box { flex:1; width:auto; min-width:0; }
  .action-bar>.btn { padding:0 13px; }
  .action-bar>.btn i { margin-right:0; }
  .modal-dialog { margin:8px; min-height:calc(100% - 16px); }
  .modal-content { max-height:calc(100dvh - 16px); }
  .modal-body { overflow-y:auto; padding:18px; }
  .modal-header { flex:none; }
  .modal-footer { flex:none; padding-bottom:max(15px,env(safe-area-inset-bottom)); }
  .preview-pane { display:none!important; }
  .modal-body .border-end { border-right:0!important; }
  .form-control,.form-select,.btn { min-height:44px; }
  .btn-var-tag { min-height:38px; margin:0 5px 7px 0; }
  .app-toast { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media(max-width:430px) {
  .page-heading .suite-link { width:38px; padding:7px; font-size:0; }
  .page-heading .suite-link__mark { font-size:16px; }
  .action-bar>.btn { font-size:0; width:44px; }
  .action-bar>.btn i { font-size:16px; }
}