/* hide the extension's single-photo uploader + preview in the composer; ours replaces them */
body .um-activity-new-post .um-activity-insert .ajax-upload-dragdrop,
body .um-activity-new-post .um-activity-preview{display:none!important}
/* our Foto button only in the composer */
.ag-photo-btn{display:none!important}
body .um-activity-new-post .um-activity-insert a.ag-photo-btn{
  display:inline-flex!important;align-items:center;gap:6px;height:32px;padding:0 10px!important;margin:0!important;
  border-radius:8px;background:transparent!important;color:#5b6172!important;font-size:13px;line-height:1;text-decoration:none;cursor:pointer}
body .um-activity-new-post .um-activity-insert a.ag-photo-btn:hover{background:#f6f7f9!important;color:#1f2430!important}

/* ===== dropzone ===== */
.ag-drop{flex:0 0 calc(100% - 46px);width:calc(100% - 46px);margin:0 0 0 46px;box-sizing:border-box;
  border:1.5px dashed #cfd5df;border-radius:12px;background:#fafbfc;padding:16px;text-align:center;transition:border-color .15s,background .15s}
.ag-drop[hidden]{display:none}
.um-activity-new-post.is-drag .ag-drop{border-color:#4a90d9;background:#eff6ff}

.ag-drop-empty{display:flex;flex-direction:column;align-items:center;gap:4px}
.ag-drop.has-items .ag-drop-empty{display:none}
.ag-drop-empty i{font-size:34px;line-height:1;color:#8a90a0}
.ag-drop-title{font-size:14px;font-weight:600;color:#1f2430}
.ag-drop-or{font-size:12px;color:#8a90a0}
.ag-drop-hint{font-size:12px;color:#8a90a0;margin-top:2px}
.ag-drop-pick{margin:2px 0;height:34px;padding:0 16px;border:1px solid #4a90d9;border-radius:999px;background:#fff;color:#4a90d9;font-size:13px;font-weight:600;cursor:pointer}
.ag-drop-pick:hover{background:#4a90d9;color:#fff}

.ag-drop-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.ag-drop:not(.has-items) .ag-drop-list{display:none}
.ag-thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid #eceef2;background:#fff}
.ag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ag-thumb-x{position:absolute;top:4px;right:4px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:22px;text-align:center;cursor:pointer}
.ag-thumb.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #cfd5df;border-top-color:#4a90d9;border-radius:50%;animation:ag-spin .7s linear infinite}
@keyframes ag-spin{to{transform:rotate(360deg)}}

.ag-add-more{flex:1 0 100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;margin-top:2px;
  border:1px dashed #cfd5df;border-radius:10px;background:#fff;color:#4a90d9;font-size:13px;font-weight:600;cursor:pointer}
.ag-add-more:hover{background:#eff6ff;border-color:#4a90d9}
.ag-add-more i{font-size:18px}
.ag-add-more em{font-style:normal;font-weight:500;color:#8a90a0}

.um-activity-new-post .um-error-block{flex:1 0 100%;font-size:12px;color:#ef4444}

/* rendered posts: 2-4 photos as a grid */
body .um-activity-bodyinner-photo:has(a.ag-ph){display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:12px;overflow:hidden}
body .um-activity-bodyinner-photo a.ag-ph{display:block;margin:0;line-height:0;aspect-ratio:1/1;overflow:hidden}
body .um-activity-bodyinner-photo a.ag-ph.ag-span{grid-column:1/-1;aspect-ratio:2/1}
body .um-activity-bodyinner-photo a.ag-ph img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}

/* 5+ photos: 3 columns (first photo spans the row for 7 and 10 so the last row is full) */
body .um-activity-bodyinner-photo:has(a.ag-c3){grid-template-columns:repeat(3,1fr)}
body .um-activity-bodyinner-photo a.ag-c3.ag-span{grid-column:1/-1;aspect-ratio:2/1}

/* ===== edit form: same dropzone UI ===== */
html body .um-activity-widget.editing .um-activity-bodyinner-edit .ajax-upload-dragdrop,
html body .um-activity-widget.editing .um-activity-bodyinner-edit .um-activity-preview{display:none!important}
body .um-activity-bodyinner-edit .um-activity-insert a.ag-photo-btn{
  display:inline-flex!important;align-items:center;gap:6px;height:32px;padding:0 10px!important;margin:0!important;
  border-radius:8px;background:transparent!important;color:#5b6172!important;font-size:13px;line-height:1;text-decoration:none;cursor:pointer}
body .um-activity-bodyinner-edit .um-activity-insert a.ag-photo-btn:hover{background:#f6f7f9!important;color:#1f2430!important}
body .um-activity-bodyinner-edit .ag-drop{flex:none!important;width:100%!important;margin:0!important}
.ag-extras-data{display:none!important}

/* ===== tools row: stop the extension's fixed widths from squeezing / overlapping the buttons ===== */
body .um-activity-new-post .um-activity-insert{flex-wrap:nowrap!important;gap:4px}
body .um-activity-new-post .um-activity-insert > a,
body .um-activity-bodyinner-edit .um-activity-insert > a{
  float:none!important;position:static!important;width:auto!important;min-width:0;max-width:none!important;
  flex:0 0 auto!important;overflow:visible!important;white-space:nowrap;margin:0!important;transform:none!important}
body .um-activity-insert a.um-activity-insert-link.is-active{color:#4a90d9!important;background:#eff6ff!important}

/* ===== link row + share menu (self-contained) ===== */
.um-activity-linkrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.um-activity-linkrow[hidden],.um-activity-link-msg[hidden]{display:none}
.um-activity-link-input{flex:1;min-width:0;height:34px;font-size:13px;border-radius:8px}
.um-activity-link-input.is-invalid{border-color:#ef4444;background:#fff7f7}
.um-activity-link-msg{flex:1 0 100%;font-size:12px;color:#ef4444}
.um-act-link-add{height:34px;padding:0 14px;border:0;border-radius:8px;background:#4a90d9;color:#fff;font-size:13px;font-weight:600;cursor:pointer}

.ag-share-menu{position:absolute;z-index:99999;display:flex;gap:4px;padding:6px;background:#fff;border:1px solid #eceef2;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.ag-share-menu a,.ag-share-menu button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#1f2430;font-size:13px;text-decoration:none;cursor:pointer}
.ag-share-menu a:hover,.ag-share-menu button:hover{background:#f6f7f9}