/* FutiaSpace — pages/messages.css (messages, chat, search, notifications) */
.messages,.search,.notif{padding:0 0 var(--sp-8)}
.messages__header,.notif__header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.messages__header h1,.notif__header h1{font-size:var(--fs-2xl)}

/* Conversation list */
.conversation-list{display:flex;flex-direction:column;gap:2px;padding:0 var(--sp-2)}
.conversation-row{display:flex;align-items:center;gap:var(--sp-3);padding:12px;border-radius:var(--radius-lg);cursor:pointer;transition:background var(--t-fast)}
.conversation-row:hover{background:var(--bg-surface)}
.conversation-row.is-unread{background:var(--green-tint)}
.conversation-row__avatar{position:relative;flex:none;display:inline-flex}
.conversation-row__active{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--success);border:3px solid var(--bg-base)}
.conversation-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conversation-row__name{font-weight:700;font-size:var(--fs-sm)}
.conversation-row__preview{font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-row.is-unread .conversation-row__name,.conversation-row.is-unread .conversation-row__preview{color:var(--text-primary);font-weight:800}
.conversation-row__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.conversation-row__time{font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted)}
.conversation-row__badge{min-width:22px;height:22px;padding:0 7px;border-radius:var(--radius-pill);background:var(--gradient-story);color:#fff;font-size:var(--fs-2xs);font-weight:800;line-height:22px;text-align:center;box-shadow:0 3px 10px -2px rgba(232,119,34,.6)}

/* Chat */
.chat{position:fixed;inset:0;display:flex;flex-direction:column;max-width:none!important;margin:0!important;background:var(--bg-base)}
.chat__header{display:flex;align-items:center;gap:var(--sp-2);padding:calc(var(--safe-top) + 8px) var(--sp-3) 10px var(--sp-2);background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle)}
.chat__header-avatar{flex:none;display:inline-flex;margin-left:2px}
.chat__header-info{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--sp-1)}
.chat__header-info strong{font-size:var(--fs-sm);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__header-info span{font-size:var(--fs-xs);color:var(--text-muted);font-weight:500}
.chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:var(--sp-4) var(--sp-3);
  background:radial-gradient(60% 40% at 100% 0%,rgba(61,165,67,.06),transparent),radial-gradient(60% 40% at 0% 100%,rgba(232,119,34,.05),transparent),var(--bg-base)}
.chat__loading,.chat__empty{margin:auto;text-align:center;color:var(--text-muted);font-size:var(--fs-sm)}
.chat__scroll-btn{position:absolute;right:var(--sp-4);bottom:calc(var(--safe-bottom) + 84px);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-md);z-index:5;cursor:pointer}
.chat__scroll-badge{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);background:var(--c-orange);color:#fff;font-size:var(--fs-2xs);font-weight:800;line-height:20px;text-align:center}
.chat__bubble-wrap{display:flex;flex-direction:column;max-width:80%}
.chat__bubble-wrap.is-mine{align-self:flex-end;align-items:flex-end}
.chat__bubble-wrap.is-theirs{align-self:flex-start;align-items:flex-start}
.chat__bubble-wrap.is-pending{opacity:.6}
.chat__bubble{padding:10px 14px 7px;border-radius:20px;font-size:.93rem;line-height:1.45;overflow-wrap:anywhere}
.chat__bubble p{margin:0;white-space:pre-wrap}
.is-mine .chat__bubble{background:linear-gradient(135deg,#2D7D32,#3da543);color:#fff;border-bottom-right-radius:6px;box-shadow:0 4px 14px -6px rgba(45,125,50,.7)}
.is-theirs .chat__bubble{background:var(--bg-surface);border:1px solid var(--border-subtle);border-bottom-left-radius:6px}
.chat__bubble-deleted{display:flex;align-items:center;gap:6px;font-style:italic;opacity:.7}
.chat__bubble-time{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;font-size:.64rem;font-weight:600;opacity:.7}
.chat__composer{display:flex;align-items:flex-end;gap:var(--sp-2);padding:10px var(--sp-3) calc(var(--safe-bottom) + 10px);background:var(--glass);backdrop-filter:blur(16px);border-top:1px solid var(--border-subtle)}
.chat__input{flex:1;max-height:120px;min-height:44px;padding:11px 18px;border-radius:22px;background:var(--bg-input);border:1px solid var(--border-input);resize:none;line-height:1.4;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.chat__input:focus{outline:0;border-color:var(--c-green-light);box-shadow:0 0 0 3px var(--green-tint)}
.chat__send{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--gradient-story);color:#fff;box-shadow:0 6px 16px -4px rgba(232,119,34,.55);transition:transform var(--t-fast) var(--spring)}
.chat__send:active{transform:scale(.88)}.chat__send:disabled{opacity:.4;box-shadow:none}
@media (min-width:1024px){body.user-authenticated .chat{left:var(--sidebar-w)}}

/* Search */
.search__header{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4) var(--sp-2) var(--sp-2)}
.search__tabs{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);overflow-x:auto;scrollbar-width:none}
.search__tab{flex:none;padding:8px 18px;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:700;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);transition:all var(--t-fast)}
.search__tab.is-active{background:var(--c-green);color:#fff;border-color:transparent}
.search__results{display:flex;flex-direction:column;gap:var(--section-gap);padding:var(--sp-3) var(--sp-4)}
.search__users{display:flex;flex-direction:column;gap:var(--sp-3)}
.search-block{display:flex;flex-direction:column;gap:var(--sp-3)}
.search-block__title{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-text)}
.search-block .dash-list{padding:var(--sp-2);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}

/* Notifications */
.notif__section{padding:0 var(--sp-4);margin-bottom:var(--section-gap)}
.notif__section-title{margin-bottom:var(--sp-3);font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.notif__cards{display:flex;flex-direction:column;gap:var(--sp-2)}
.notif-card{position:relative;display:flex;align-items:center;gap:var(--sp-3);padding:14px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--highlight),var(--shadow-card);cursor:pointer;transition:border-color var(--t-fast),transform var(--t-fast)}
.notif-card:hover{border-color:var(--border-strong)}
.notif-card.is-unread{background:linear-gradient(90deg,var(--orange-tint),transparent 70%),var(--bg-surface);border-color:color-mix(in srgb,var(--c-orange) 35%,transparent)}
.notif-card.is-unread::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--gradient-story)}
.notif-card__avatar{flex:none;display:inline-flex}
.notif-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-card__text{font-size:var(--fs-sm);line-height:1.45;color:var(--text-secondary)}
.notif-card__text strong{color:var(--text-primary);font-weight:800}
.notif-card__time{font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted)}
.notif-card__dismiss{flex:none;width:34px;height:34px;color:var(--text-muted)}.notif-card__dismiss:hover{color:var(--danger-text);background:var(--danger-tint)}



/* Swipe-to-reply cue — mirrors for own messages */
.chat__bubble-wrap.is-mine .chat__swipe-cue {
  left: auto;
  right: -40px;
}

/* Show the cue when the row is armed (JS adds this class to the parent) */
.chat__bubble-wrap.is-swiping-armed .chat__swipe-cue {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: var(--c-green);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(45, 125, 50, 0.6);
}