/* ================= Messages ================= */
.messages-hero{ padding:40px 0 24px; }
.messages-hero h1{ font-size:2rem; margin:0; }
.messages-shell{
display:grid;
grid-template-columns:300px minmax(0, 1fr);
gap:22px;
min-height:560px;
margin-bottom:60px;
}
/* ---- conversation list ---- */
.conv-list{
background:var(--white);
border:1.5px solid var(--ink);
border-radius:var(--radius);
box-shadow:5px 5px 0 var(--gold);
overflow:hidden;
height:fit-content;
}
.conv-empty{
padding:32px 20px;
text-align:center;
}
.conv-empty .icon{ font-size:1.8rem; margin-bottom:8px; }
.conv-empty p{ font-size:.86rem; color:var(--ink-soft); margin:0; }
/* ---- search + tabs toolbar, pinned above the scrollable item list ---- */
.conv-toolbar{
padding:12px 14px 10px;
border-bottom:1.5px solid var(--line);
background:var(--white);
}
.conv-search{
display:flex;
align-items:center;
gap:8px;
padding:8px 12px;
border:1.5px solid var(--line);
border-radius:999px;
margin-bottom:10px;
color:var(--ink-soft);
}
.conv-search input{
border:none;
outline:none;
background:none;
font-family:inherit;
font-size:.85rem;
width:100%;
color:var(--ink);
}
.conv-tabs{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.conv-tab{
display:inline-flex;
align-items:center;
gap:5px;
border:1.5px solid var(--line);
background:var(--paper);
color:var(--ink-soft);
border-radius:999px;
padding:5px 12px;
font-size:.76rem;
font-weight:700;
cursor:pointer;
text-decoration:none;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.conv-tab:hover{ border-color:var(--ink); color:var(--ink); }
.conv-tab.active{
background:var(--ink);
border-color:var(--ink);
color:var(--gold);
}
.conv-tab-badge{
background:var(--clay);
color:var(--white);
border-radius:999px;
min-width:16px;
height:16px;
padding:0 4px;
font-size:.66rem;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.conv-tab.active .conv-tab-badge{ background:var(--gold); color:var(--ink); }
.conv-items-wrap{ overflow-y:auto; }
.conv-item{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
text-decoration:none;
color:inherit;
border-bottom:1px solid var(--line);
transition:background .15s ease, padding-left .15s var(--bounce);
}
.conv-item:last-child{ border-bottom:none; }
.conv-item:hover{ background:var(--paper-deep); padding-left:20px; }
.conv-item.active{ background:#FDECC8; }
.conv-avatar{
width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
border:2px solid var(--white);
box-shadow:0 0 0 2px var(--gold);
}
.conv-avatar-link{ flex:none; line-height:0; } /* avatar is now its own link (separate from the row link, so tapping it goes to the profile instead of opening the thread) — needs its own reset since it's no longer just an sitting directly in the flex row */
.conv-info{ flex:1; min-width:0; text-decoration:none; color:inherit; display:block; }
.conv-top-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.conv-name{ font-weight:800; font-size:.92rem; font-family:'Fraunces',serif; }
.conv-preview{
font-size:.8rem; color:var(--ink-soft);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
margin-top:2px;
}
.unread-pill{
background:var(--clay); color:var(--white);
border-radius:999px; font-size:.7rem; font-weight:800;
padding:2px 8px; flex:none;
}
/* ---- thread panel ---- */
.thread-panel{
background:var(--white);
border:1.5px solid var(--ink);
border-radius:var(--radius);
box-shadow:5px 5px 0 var(--leaf);
display:flex;
flex-direction:column;
overflow:hidden;
}
.thread-empty{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:40px 20px; color:var(--ink-soft);
}
.thread-empty .icon{ font-size:2.2rem; margin-bottom:10px; }
.thread-empty p{ margin:0; font-size:.92rem; }
.thread-header{
padding:16px 22px;
border-bottom:1.5px solid var(--ink);
display:flex; align-items:center; gap:12px;
background:var(--paper-deep);
}
.thread-back{ display:none; font-size:1.3rem; color:var(--ink); text-decoration:none; line-height:1; flex:none; }
.thread-header img{
width:38px; height:38px; border-radius:50%; object-fit:cover;
border:2px solid var(--white); box-shadow:0 0 0 2px var(--clay);
flex:none;
}
/* min-width:0 is the actual fix here — a flex item's default min-width
is auto (≈ its content's natural width), so without this a long name
was refusing to shrink or wrap inside the row at all and just pushed
the Delete button straight off the edge of the screen instead. */
.thread-header .name{
font-family:'Fraunces',serif; font-weight:800; font-size:1.05rem;
flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.thread-messages{
flex:1;
padding:22px;
overflow-y:auto;
max-height:440px;
background:
radial-gradient(var(--line) 1px, transparent 1px);
background-size:16px 16px;
background-position:-8px -8px;
position:relative; /* positioning context for the shared .emoji-picker */
}
.msg-row{ display:flex; margin-bottom:16px; gap:8px; align-items:flex-end; }
.msg-row.mine{ justify-content:flex-end; }
.msg-row.theirs{ justify-content:flex-start; }
.msg-avatar-link{
display:block; flex:none;
margin-bottom:4px; /* lines up with the bottom of the bubble, not its vertical center */
}
.msg-avatar{
width:22px; height:22px; border-radius:50%; object-fit:cover; display:block;
}
.msg-row.mine .msg-avatar-link{ order:2; }
.msg-row.mine .msg-bubble-wrap{ order:1; }
.msg-bubble-wrap{ max-width:65%; display:flex; flex-direction:column; position:relative; }
.msg-row.mine .msg-bubble-wrap{ align-items:flex-end; }
.msg-row.theirs .msg-bubble-wrap{ align-items:flex-start; }
/* Reply + react buttons — hidden until the message is hovered
(desktop) so the thread doesn't look cluttered with two extra icons
on every single bubble at rest; always-visible on touch devices
below, where "hover" doesn't really exist. */
.msg-hover-actions{
position:absolute; top:-2px; display:flex; gap:2px;
opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.msg-row.mine .msg-hover-actions{ right:calc(100% + 4px); }
.msg-row.theirs .msg-hover-actions{ left:calc(100% + 4px); }
.msg-row:hover .msg-hover-actions{ opacity:1; pointer-events:auto; }
.msg-action-btn{
width:26px; height:26px; border-radius:50%; flex:none;
display:flex; align-items:center; justify-content:center;
background:var(--white); border:1px solid var(--line); color:var(--ink-soft);
font-size:.85rem; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.msg-action-btn:hover{ background:var(--paper-deep); color:var(--ink); }
.msg-reply-quote{
display:block; margin-bottom:6px; padding:6px 10px;
border-left:3px solid currentColor; border-radius:6px;
background:rgba(0,0,0,.06); font-size:.8rem; opacity:.85;
text-decoration:none; color:inherit;
}
.msg-reply-quote strong{ display:block; font-size:.72rem; margin-bottom:1px; }
.msg-bubble{
padding:11px 16px;
border-radius:18px;
font-size:.9rem;
line-height:1.45;
box-shadow:2px 2px 0 rgba(18,10,8,.08);
}
.msg-bubble.has-photo{ padding:0; overflow:hidden; } /* was 6px padding — with the bubble's own background color (blue for sent messages), that padding showed as a colored frame around the photo. overflow:hidden + the photo filling the bubble exactly (below) clips it to the bubble's own rounded corners instead. */
.msg-photo{
display:block;
max-width:220px;
width:100%;
}
.msg-bubble.has-photo .msg-text{ padding:8px 12px 4px; }
/* Links only ever appear in the system welcome message (see the
sender-check in wn_render_message_row(), functions.php) — regular
messages are always plain-escaped text with no markup at all, so
this can't accidentally style anything a user typed. Without this,
an tag just inherits the bubble's own text color with no
underline, which is exactly why it looked identical to plain text. */
.msg-text a{ color:var(--sky); font-weight:700; text-decoration:underline; }
.msg-row.mine .msg-text a{ color:var(--white); text-decoration-color:rgba(255,255,255,.6); }
/* 4.19.2 — message no key can open: quiet, italic, not alarming */
.msg-text.msg-text-locked{ font-style:italic; opacity:.7; font-size:.92em; }
.msg-row.mine .msg-bubble{
background:var(--sky);
color:var(--white);
border-bottom-right-radius:5px;
}
.msg-row.theirs .msg-bubble{
background:var(--paper-deep);
color:var(--ink);
border:1px solid var(--line);
border-bottom-left-radius:5px;
}
.msg-time{
font-size:.7rem;
color:var(--ink-soft);
margin-top:4px;
padding:0 4px;
}
.msg-reactions{
display:flex; gap:4px; flex-wrap:wrap;
position:relative; z-index:2;
/* Pulls the bubble below UP underneath the pill by this much —
rather than just sitting in a separate row above the bubble
(ambiguous which of two stacked messages a reaction belonged to,
especially with back-to-back photos — see the message this was
reported in), the pill now visibly overlaps the top corner of its
OWN bubble, the same "badge" convention WhatsApp/Messenger use, so
there's no doubt which message it's reacting to. */
margin-bottom:-11px;
}
/* Reaction sits at the bubble's INNER-facing top corner — the side
toward the center of the thread, not the side toward the avatar —
for "mine" (bubble docked right, near your own avatar) that's the
LEFT corner; for "theirs" (bubble docked left, near their avatar)
that's the RIGHT corner. */
.msg-row.mine .msg-reactions{ justify-content:flex-start; }
.msg-row.theirs .msg-reactions{ justify-content:flex-end; }
.msg-reaction-pill{
display:inline-flex; align-items:center; justify-content:center;
width:27px; height:27px; border-radius:50%;
background:linear-gradient(180deg, #ffffff 0%, #f0ece0 100%);
border:1px solid rgba(18,10,8,.12);
font-size:.94rem; line-height:1; cursor:pointer;
/* Embossed/stamped look — an outer shadow to lift it off the bubble,
plus a soft inner highlight along the top (light catching a raised
surface) and a faint inner shadow along the bottom (where that
surface curves away) — reads as a small physical button/sticker
rather than a flat outlined pill. No count number anymore either;
just the emoji itself, kept small and simple. */
box-shadow:
0 1px 3px rgba(18,10,8,.18),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 1px rgba(18,10,8,.08);
transition:transform .12s ease, box-shadow .12s ease;
}
.msg-reaction-pill.mine{
background:linear-gradient(180deg, #fff1e8 0%, #f5d9c4 100%);
border-color:rgba(232,106,51,.35);
}
.msg-reaction-pill:hover{ transform:translateY(-1px); }
.msg-reaction-pill:active{
transform:translateY(0);
box-shadow:inset 0 1px 3px rgba(18,10,8,.25); /* pressed-in on click/tap, instead of the raised shadow above */
}
/* Shared emoji picker — repositioned via JS to sit above whichever
message's react button was tapped, rather than one instance per
message (see the messages page JS). */
.emoji-picker{
position:absolute; z-index:30;
background:var(--white); border:1.5px solid var(--ink); border-radius:999px;
box-shadow:2px 2px 0 var(--gold);
padding:6px 8px; gap:4px; align-items:center;
}
.emoji-picker-choice{
font-size:1.15rem; line-height:1; padding:4px; border-radius:50%;
transition:transform .15s var(--bounce), background .15s ease;
}
.emoji-picker-choice:hover{ background:var(--paper-deep); transform:scale(1.2); }
/* Reply banner — sits between the thread and the composer input,
showing what's about to be quoted, with a way to back out of it. */
.reply-banner{
align-items:center; justify-content:space-between; gap:10px;
padding:8px 16px; background:var(--paper-deep); border-top:1px solid var(--line);
font-size:.82rem;
}
.reply-banner-label{ font-weight:700; color:var(--clay-deep); margin-right:6px; }
.reply-banner-preview{ color:var(--ink-soft); }
#replyBannerCancel{
border:none; background:none; font-size:1.2rem; line-height:1; color:var(--ink-soft);
cursor:pointer; flex:none; padding:2px 6px;
}
#replyBannerCancel:hover{ color:var(--ink); }
.msg-status.seen{ color:var(--sky-deep,#2E6FA3); font-weight:700; }
.msg-status.delivered{ color:var(--ink-soft); }
.thread-composer{
display:flex;
flex-direction:column;
gap:0;
padding:14px 18px;
border-top:1.5px solid var(--ink);
background:var(--paper-deep);
}
.composer-row{ display:flex; gap:10px; align-items:center; }
.photo-btn{
flex:none;
width:42px; height:42px;
border-radius:50%;
border:1.5px solid var(--ink);
background:var(--white);
color:var(--ink-soft);
display:flex; align-items:center; justify-content:center;
transition:transform .18s var(--bounce), background .15s ease, color .15s ease;
}
.photo-btn:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px) rotate(-4deg); }
.photo-preview-wrap{
display:none;
align-items:center;
gap:10px;
padding:0 0 10px;
}
.photo-preview-wrap img{
width:56px; height:56px; object-fit:cover; border-radius:10px;
border:1.5px solid var(--ink);
-webkit-tap-highlight-color:transparent; /* Android Chrome's default blue tap-flash on the image — not an actual coded border, just a browser default worth suppressing here */
outline:none;
}
.photo-preview-wrap button{
width:24px; height:24px; border-radius:50%;
background:var(--ink); color:var(--white);
border:none; font-size:1rem; line-height:1; cursor:pointer;
}
.thread-composer input{
flex:1;
border:1.5px solid var(--ink);
border-radius:999px;
padding:11px 18px;
font-family:inherit;
font-size:.9rem;
background:var(--white);
}
.thread-composer input:focus{ outline:none; border-color:var(--sky); }
/* 4.98.2: message box is a textarea (keeps paragraphs) — same look as the old pill input, grows up to ~6 lines */
.thread-composer textarea#messageInput{
flex:1; min-width:0;
border:1.5px solid var(--ink);
border-radius:22px;
padding:11px 18px;
font-family:inherit;
font-size:.9rem;
line-height:1.4;
background:var(--white);
resize:none;
overflow-y:auto;
max-height:160px;
display:block;
}
.thread-composer textarea#messageInput:focus{ outline:none; border-color:var(--sky); }
.composer-row:has(textarea){ align-items:flex-end; }
/* sent text keeps its line breaks and blank lines */
.msg-text.msg-pre{ white-space:pre-wrap; overflow-wrap:anywhere; }
.thread-composer .btn{
transition:transform .18s var(--bounce);
}
.thread-composer .btn:hover{ transform:translateY(-2px) rotate(-1deg); }
@media (max-width:820px){
.messages-shell{ grid-template-columns:minmax(0, 1fr); }
.conv-items-wrap{ max-height:260px; overflow-y:auto; }
/* Hover doesn't really exist on touch, so reply/react need to just
always be visible on mobile rather than requiring a hover state
that a tap can't reliably trigger. */
.msg-hover-actions{ opacity:1; pointer-events:auto; position:static; margin-bottom:4px; }
.msg-row.mine .msg-hover-actions{ justify-content:flex-end; }
}
@media (max-width:640px){
/* List-only or thread-only, never both stacked (see the JS that
adds one of these two classes based on the real URL). */
.messages-shell.no-active-thread .thread-panel{ display:none; }
.messages-shell.has-active-thread .conv-list{ display:none; }
.messages-shell.no-active-thread .conv-items-wrap{ max-height:none; } /* full height when it's the only pane showing, instead of the capped 260px meant for the stacked-with-thread-below view */
.thread-back{ display:inline-flex; }
/* "Delete conversation" as a full text button was the other half of
the overflow — even with the name now truncating, the button's own
content width plus its margin-left:auto (from the inline style in
page-messages.php) still didn't leave room next to back-arrow +
avatar + name on a real phone. Icon-only here, same pattern as
other secondary actions collapsing to icon-only on mobile
elsewhere in this theme (Save, Push, etc). */
#wnDeleteConvoBtn{
width:34px; height:34px; padding:0 !important; flex:none;
border-radius:50%; position:relative;
font-size:0 !important; /* collapses the text node without touching the PHP-rendered label; !important needed since the inline style="font-size:.8rem" on this button (page-messages.php) otherwise wins over an external stylesheet rule */
}
#wnDeleteConvoBtn::after{
content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
width:16px; height:16px;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center/contain no-repeat;
background:var(--ink);
}
/* The thread was capped at max-height:440px sitewide — a reasonable
size for a widget sitting next to a conversation list on desktop,
but on a phone (where the thread is the ONLY thing on screen once
a conversation is open) that left most of the actual screen height
unused below a cramped little scrolling box. Letting the thread
panel fill the real available height, and dropping the fixed cap
entirely, is what "not good on phone" was actually pointing at. */
.messages-hero{ display:none; } /* the big page title is redundant once you're inside an open conversation, and reclaiming that space matters much more on a phone than on desktop */
.messages-shell{ margin-bottom:0; min-height:0; }
/* Now that the footer is hidden on this page, main's own sitewide
32px bottom padding (style.css) has nothing after it to visually
justify — it just became dead scrollable space below the composer,
which is exactly the gap this was about. messages.css only loads
on this page, so this rule can't affect main anywhere else. */
main{ padding-bottom:0; }
.messages-shell.has-active-thread{
/* Was "- 24px", a leftover guess from when a footer used to follow
this panel. The real obstacle at the bottom of the screen is the
fixed .mobile-tabbar (style.css reserves matching padding for
it) — mirroring that reservation here is what actually makes the
composer land flush just above the tab bar instead of leaving a
gap (too small a reservation) or sliding underneath it (too
little / none at all). Matches body's own safe-area-aware
calc() above so a phone with a home-indicator inset doesn't end
up a few px short here either. */
height:calc(100vh - var(--header-h) - 66px - env(safe-area-inset-bottom));
/* 100vh on mobile Chrome/Safari measures the TALLEST possible
viewport (address bar hidden), not what's actually visible right
now — when the address bar or keyboard shows, the real visible
area shrinks but this calc doesn't, so the sticky header/composer
below can end up pinned outside the part of the screen you can
actually see ("hiding sometimes"). 100dvh is the modern fix: it
tracks the real, current visible viewport and updates live as
browser chrome shows/hides. Kept the 100vh line above as a
fallback for older browsers that don't understand dvh — an
unsupported unit makes the whole declaration invalid, so old
browsers just ignore this line and keep using the one above;
anything modern enough to understand dvh uses this one instead. */
height:calc(100dvh - var(--header-h) - 66px - env(safe-area-inset-bottom));
}
.messages-shell.has-active-thread .thread-panel{
height:100%;
}
/* Sticky header + composer — belt-and-braces alongside the height
math above. If that calc is ever a few px off on some device/
browser combination (dynamic mobile toolbars resizing the real
viewport are a known source of exactly this kind of drift),
sticky positioning keeps the header pinned to the top and the
composer pinned to the bottom of whatever actually ends up
scrolling, rather than both silently scrolling away with the
message content the way plain in-flow elements would. */
.thread-header{ position:sticky; top:0; z-index:5; }
.reply-banner, .thread-composer{ position:sticky; bottom:0; z-index:5; }
.thread-messages{ max-height:none; }
.msg-bubble-wrap{ max-width:80%; } /* 65% (a desktop sizing, tuned for a much wider column) left a lot of dead space on either side of every bubble on a narrow phone */
/* Edge-to-edge on phone — the bordered/shadowed "card" look works
well as one box sitting on a wide desktop page, but on a phone it
just eats ~30px of width on each side for a border that adds
nothing once the panel already fills the whole screen. Cancels out
.wrap's own 28px side padding with a matching negative margin, and
drops the border/shadow so it reads as part of the page instead of
a box floating on it. Only applies to whichever pane is actually
full-screen right now (conv-list when no thread is open, thread-
panel when one is) — the other stays untouched since it's hidden. */
.messages-shell.no-active-thread .conv-list,
.messages-shell.has-active-thread .thread-panel{
margin:0 -28px;
border:none;
border-radius:0;
box-shadow:none;
}
}
/* "Sending…" state on the message Send button — a small paper-plane
icon slides in before the text and drifts, giving a lightweight
"this is actually moving" cue instead of the button just going
quiet between tap and page reload. */
#sendMessageBtn.is-sending{ opacity:.85; cursor:progress; position:relative; padding-left:34px; }
#sendMessageBtn.is-sending::before{
content:''; position:absolute; left:12px; top:50%; width:15px; height:15px;
transform:translateY(-50%);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat;
background:var(--paper);
animation:wnMsgSendDrift .9s ease-in-out infinite;
}
@keyframes wnMsgSendDrift{
0%, 100%{ transform:translateY(-50%) translateX(0); }
50%{ transform:translateY(-50%) translateX(3px); }
}
/* End-to-end encryption setup/unlock modals — see assets/js/e2e-crypto.js
and the script block at the bottom of page-messages.php. Reuses the
site's existing .modal-overlay open/close mechanics (see style.css)
rather than inventing a new one. */
.e2e-modal{
background:var(--white);
border:2px solid var(--ink);
border-radius:var(--radius-lg);
box-shadow:8px 8px 0 var(--gold);
width:100%;
max-width:440px;
}
.e2e-modal .modal-body{ padding:28px 30px; }
.e2e-modal h3{ margin:0 0 8px; }
.e2e-modal-sub{ font-size:.88rem; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }
.e2e-warning{
font-size:.83rem;
background:var(--paper-deep);
border:1.5px dashed var(--gold-deep);
border-radius:12px;
padding:10px 14px;
margin-bottom:14px;
line-height:1.5;
}
.e2e-recovery-code{
font-family:monospace;
font-size:1.15rem;
letter-spacing:1px;
background:var(--paper);
border:1.5px solid var(--line);
border-radius:10px;
padding:16px;
text-align:center;
margin-bottom:12px;
word-break:break-all;
}
.e2e-confirm-row{
display:flex;
align-items:center;
gap:8px;
font-size:.85rem;
margin:16px 0;
cursor:pointer;
}
#e2eSetupContinueBtn, #e2eUnlockBtn{ width:100%; padding:11px; }
#e2eSetupContinueBtn:disabled{ opacity:.5; cursor:not-allowed; }
#e2eRecoveryCodeInput{
width:100%;
padding:11px 12px;
border:1.5px solid var(--line);
border-radius:10px;
font-family:monospace;
font-size:1rem;
margin-bottom:10px;
text-align:center;
text-transform:uppercase;
box-sizing:border-box;
}
.e2e-error{ color:var(--clay-deep); font-size:.82rem; margin-bottom:10px; }
.btn-link{
background:none;
border:none;
color:var(--ink-soft);
font-size:.8rem;
text-decoration:underline;
margin-top:12px;
display:block;
width:100%;
text-align:center;
cursor:pointer;
}
/* Placeholder for an E2E photo before wnDecryptRow() has fetched and
decrypted it (see page-messages.php) — an with no src yet
would otherwise render as a jarring broken-image icon at zero size
for a moment while that request is in flight. */
.msg-photo.e2e-photo{
display:block;
min-width:160px;
min-height:160px;
background:var(--paper-deep);
border-radius:14px;
}
/* One-time "this conversation is encrypted" notice — see #e2eThreadBanner
in page-messages.php. Shown once per thread load, not per message. */
.e2e-thread-banner{
font-size:.76rem;
color:var(--ink-soft);
text-align:center;
background:var(--paper-deep);
border-bottom:1px solid var(--line);
padding:7px 12px;
}
/* 4.19.3 — "Key check" link inside the encryption banner */
.e2e-keycheck-link{ background:none; border:0; padding:0 0 0 4px; font:inherit; font-size:.9em; color:inherit; opacity:.75; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.e2e-keycheck-link:hover{ opacity:1; }
Madan Gyawali — लेखक | WritingNepal
|
Catch feed
Madan Gyawali commented on this ☁ Catch Free 🔥 Most Popular पुस्तक समीक्षा
पुस्तक : गुलाबी उमेर
लेखक : अमर न्यौपाने
प्रकाशक : फाइनप्रिन्ट
विधा : सामाजिक तथा मनोवैज्ञानिक उपन्यास
प्रकाशन मिति : २०७६ भदौ २१
यस उपन्यास गुलाबी उमेर ले किशोरावस्थाको मनोविज्ञान…
☁ Catch Free 🔥 Most Popular पुस्तक समीक्षा
पुस्तक : गुलाबी उमेर
लेखक : अमर न्यौपाने
प्रकाशक : फाइनप्रिन्ट
विधा : सामाजिक तथा मनोवैज्ञानिक उपन्यास
प्रकाशन मिति : २०७६ भदौ २१
यस उपन्यास गुलाबी उमेर ले किशोरावस्थाको मनोविज्ञान…
Madan Gyawali commented on this ☁ Catch Free म प्रायः चिन्तन गर्छु—हाम्रो नेपाली साहित्यको आधुनिक चेतना-प्रवाह सुदीर्घकालदेखि किन लोक-वार्ता, सतही सामाजिक-यथार्थवाद र इतिवृत्तात्मक आख्यानको एउटा सुदृढ प्राचीरभित्र मात्र आबद्ध भइरह्यो? म जब मानव-अस्तित्त्वको आन्तरिक-गह्वरमा प्रवेश गर्छु, त्यहाँ मैले…
🔖 Readers saved these Catches 1 time
☁ Catch Free 🔥 Most Popular पुस्तक समीक्षा
पुस्तक : गुलाबी उमेर
लेखक : अमर न्यौपाने
प्रकाशक : फाइनप्रिन्ट
विधा : सामाजिक तथा मनोवैज्ञानिक उपन्यास
प्रकाशन मिति : २०७६ भदौ २१
यस उपन्यास गुलाबी उमेर ले किशोरावस्थाको मनोविज्ञान…
Madan Gyawali hasn't added any books yet.
☁ Catch Free म प्रायः चिन्तन गर्छु—हाम्रो नेपाली साहित्यको आधुनिक चेतना-प्रवाह सुदीर्घकालदेखि किन लोक-वार्ता, सतही सामाजिक-यथार्थवाद र इतिवृत्तात्मक आख्यानको एउटा सुदृढ प्राचीरभित्र मात्र आबद्ध भइरह्यो? म जब मानव-अस्तित्त्वको आन्तरिक-गह्वरमा प्रवेश गर्छु, त्यहाँ मैले…
×
Send praise to Madan Gyawali
A quick note of appreciation — it'll show up in their Praise list, and count toward their public praise total.
Send
× मन पर्यो? यहाँ अझै धेरै छ
WritingNepal मा निःशुल्क खाता खोल्नुहोस् लेख्नुहोस् कविता, कथा, मनको कुराकिताब खोज्नुहोस् हजारौं नेपाली किताबपाठक भेट्नुहोस् फलो, सब्स्क्राइबप्रतियोगिता हरेक महिना इनामसँगै पढ्नुहोस् बुक क्लब, मौन पढाइलेखेर कमाउनुहोस् बिक्रीको ९०% तपाईंलाई🎁 खाता खोलेपछि ७०० अक्षर स्वागत उपहार
खाता खोल्नुहोस् — २ मिनेट, निःशुल्क ४,५००+ पाठक र लेखक · २०१० देखि
Send an inquiry
To Madan Gyawali. Sign in first to send one.
Cancel
Send inquiry