/*
* Phase 2: Theme tokens -> CSS variables
* Default values keep the current look unchanged.
*/
:root{
--talkie-primary: #ff9800;
--talkie-primary-hover: #f57c00;
--talkie-primary-contrast: #ffffff;
--talkie-border: #f0f0f0;
--talkie-secondary-text: #777777;
/* Themeable primary text colors (useful for dark themes) */
--talkie-text-color: #222222;
--talkie-text-strong: #111111;
/* Optional: subtle text shadow for themes (default: none) */
--talkie-text-shadow: none;
/* Optional accent color for highlights (default: primary) */
--talkie-accent: var(--talkie-primary);
/* Modals / overlays (profile, new conversation, etc.) */
--talkie-modal-bg-color: #ffffff;
--talkie-modal-border-color: var(--talkie-border, #f0f0f0);
--talkie-modal-header-bg: var(--talkie-primary, #ff9800);
--talkie-modal-header-color: var(--talkie-primary-contrast, #ffffff);
--talkie-modal-text: var(--talkie-text-color, #222222);
--talkie-modal-text-strong: var(--talkie-text-strong, #111111);
--talkie-modal-close-bg: rgba(255,255,255,0.85);
--talkie-modal-close-color: var(--talkie-primary, #ff9800);
--talkie-modal-input-bg: #ffffff;
--talkie-modal-input-border: #dddddd;
--talkie-modal-primary-bg: var(--talkie-primary, #ff9800);
--talkie-modal-primary-color: var(--talkie-primary-contrast, #ffffff);
--talkie-switch-checked-bg: var(--talkie-primary, #ff9800);
--talkie-record-ring: #ff6900;
--talkie-record-pulse: rgba(255, 152, 0, 0.25);
--talkie-record-idle: #ef4444;
--talkie-record-active: #22c55e;
--talkie-avatar-radius: 999px;
--talkie-avatar-size: 40px;
--talkie-avatar-bubble-size: 25px;
--talkie-talk-btn-radius: 999px;
--talkie-talk-btn-size: 64px;
/* Typography */
--talkie-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* App background (body.talkie-centered) */
--talkie-app-bg-color: #000;
--talkie-app-bg-image: radial-gradient(circle at top, #404040 0, #1a1a1a 55%, #000 100%);
--talkie-app-bg-size: cover;
--talkie-app-bg-repeat: no-repeat;
--talkie-app-bg-position: center center;
--talkie-app-bg-attachment: scroll;
/* Main (thread) background shared by header/body/footer */
--talkie-main-bg-color: #ffffff;
--talkie-main-bg-image: none;
--talkie-main-bg-size: cover;
--talkie-main-bg-repeat: no-repeat;
--talkie-main-bg-position: center center;
/* Sidebar (header + list + new conversation wrapper) */
--talkie-sidebar-bg-color: #fafafa;
--talkie-sidebar-bg-image: none;
--talkie-sidebar-bg-size: cover;
--talkie-sidebar-bg-repeat: no-repeat;
--talkie-sidebar-bg-position: center center;
/* Conversation states */
--talkie-conversation-active-bg: #ffe0b2;
--talkie-conversation-hover-bg: #f2f2f2;
/* Online halo */
--talkie-online-halo: #2ecc71;
--talkie-online-halo-shadow: inset 0 0 0 2px #2ecc71, 0 0 10px rgba(46,204,113,0.35);
/* Presence dot colors (avatar status) */
--talkie-presence-online: #00ff88;
--talkie-presence-idle: #ff9800;
--talkie-presence-offline: #6b7280;
--talkie-presence-dot-border: var(--talkie-app-bg-color, #03050a);
/* Chat bubbles */
--talkie-bubble-me-radius: 18px;
--talkie-bubble-me-tail-radius: 6px;
--talkie-bubble-me-bg-color: #e3f2fd;
--talkie-bubble-me-bg-image: none;
--talkie-bubble-me-bg-size: cover;
--talkie-bubble-me-bg-repeat: no-repeat;
--talkie-bubble-me-bg-position: center center;
--talkie-bubble-me-text-color: #0b1220;
--talkie-bubble-them-radius: 18px;
--talkie-bubble-them-tail-radius: 6px;
--talkie-bubble-them-bg-color: rgb(224, 247, 250);
--talkie-bubble-them-bg-image: none;
--talkie-bubble-them-bg-size: cover;
--talkie-bubble-them-bg-repeat: no-repeat;
--talkie-bubble-them-bg-position: center center;
--talkie-bubble-them-border: rgb(128, 222, 234);
--talkie-bubble-them-text-color: #0b1220;
/* System pill (thread informational lines) */
--talkie-system-pill-bg: rgba(0,0,0,0.05);
--talkie-system-pill-text: rgba(0,0,0,0.72);
/* Audio bars + progress */
--talkie-audio-progress-me: rgba(0, 0, 0, 0.07);
--talkie-audio-progress-them: rgba(0, 0, 0, 0.08);
--talkie-audio-bars-me: rgba(21, 101, 192, 0.65);
--talkie-audio-bars-them: rgba(255, 87, 34, 0.65);
/* Play / pause button styling */
--talkie-playpause-bg-me: #f4f8ff;
--talkie-playpause-bg-them: transparent;
--talkie-playpause-border-me: rgba(21, 101, 192, 0.45);
--talkie-playpause-border-them: rgba(255, 87, 34, 0.65);
--talkie-playpause-icon-width: 20px;
--talkie-playpause-icon-height: 25px;
--talkie-playpause-btn-width: 40px;
--talkie-playpause-btn-height: 40px;
/* Group header name pill (themeable) */
--talkie-group-header-name-bg: var(--talkie-primary, #ff9800);
--talkie-group-header-name-color: var(--talkie-primary-contrast, #ffffff);
}
.talkie-new-conversation-wrapper{
margin: var(--talkie-new-conversation-wrapper-margin, 10px 16px 12px);
display:flex;
align-items:center;
gap: 12px;
padding: var(--talkie-new-conversation-wrapper-padding, 0);
background-color: var(--talkie-new-conversation-wrapper-bg-color, var(--talkie-sidebar-bg-color, #fafafa));
background-image: var(--talkie-new-conversation-wrapper-bg-image, none);
background-size: var(--talkie-new-conversation-wrapper-bg-size, cover);
background-repeat: var(--talkie-new-conversation-wrapper-bg-repeat, no-repeat);
background-position: var(--talkie-new-conversation-wrapper-bg-position, center);}
/* Subtle highlight when user clicks "Répondre" from a push notification */
.talkie-attention {
outline: 2px solid rgba(255, 193, 102, 0.9);
box-shadow: 0 0 0 6px rgba(255, 193, 102, 0.25);
transition: box-shadow 180ms ease, outline 180ms ease;
}
/* Fullscreen mode when rendered via the plugin's minimal template */
body.talkie-fullscreen {
margin: 0;
padding: 0;
overflow: hidden;
}
#talkie-root {
width: 100vw;
height: var(--vvh, 100vh);
}
.talkie-fab-label{
font-size: 15px;
font-weight: 500;
color: var(--talkie-text-color, #333);
cursor: pointer;
user-select: none;
}
/* Root card */
#talkie-root {
font-family: var(--talkie-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
background-color: var(--talkie-main-bg-color, #ffffff);
background-image: var(--talkie-main-bg-image, none);
background-size: var(--talkie-main-bg-size, cover);
background-repeat: var(--talkie-main-bg-repeat, no-repeat);
background-position: var(--talkie-main-bg-position, center center);
color: var(--talkie-text-color, #222);
padding: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 960px;
height: 70vh;
max-height: 720px;
border-radius: 24px;
box-shadow: 0 22px 60px rgba(0,0,0,0.6);
overflow: hidden;
box-sizing: border-box;
}
/* ===== Desktop fullscreen toggle (in-page fullscreen layout) ===== */
.talkie-header-actions {
margin-left: auto;
display: flex;
align-items: center;
}
.talkie-icon-button {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(255,255,255,0.7);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.talkie-icon-button:hover {
background: rgba(255,255,255,0.95);
}
.talkie-icon-button:active {
transform: translateY(1px);
}
.talkie-fullscreen-toggle {
display: none;
color: #ff5722;
}
/*
* Desktop fullscreen toggle should remain available on "tablet" widths.
* We keep the desktop/card UI down to 650px, and switch to true mobile layout below.
*/
/*
* Show the toggle on wide layouts (desktop, tablets, foldables).
* Do NOT gate on (hover/pointer) because iPadOS and many foldables report
* (hover: none) / (pointer: coarse) even though they benefit from this control.
*/
@media (min-width: 651px) {
.talkie-fullscreen-toggle {
display: inline-flex;
}
}
@media (min-width: 651px) {
body.talkie-desktop-fullscreen {
overflow: hidden;
}
body.talkie-desktop-fullscreen #talkie-root {
/* As requested */
max-width: unset;
height: -webkit-fill-available;
max-height: fit-content;
/* Ensure it really fills the viewport */
position: fixed;
inset: 0;
width: 100vw;
height: var(--vvh, 100vh);
border-radius: 0;
margin: 0;
box-shadow: var(--talkie-group-bubble-online-shadow, none);
z-index: 999999;
}
}
/* Body centering + dark background */
body.talkie-centered {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--talkie-app-bg-color, #000);
background-image: var(--talkie-app-bg-image, none);
background-size: var(--talkie-app-bg-size, cover);
background-repeat: var(--talkie-app-bg-repeat, no-repeat);
background-position: var(--talkie-app-bg-position, center center);
background-attachment: var(--talkie-app-bg-attachment, scroll);
}
/* Wrapper from theme */
#page {
min-height: 100vh;
width: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* App layout inside card */
.talkie-app {
display: flex;
height: 100%;
width: 100%;
box-sizing: border-box;
}
/* Sidebar */
.talkie-sidebar {
width: 32%;
min-width: 260px;
border-right: 1px solid var(--talkie-border, #f0f0f0);
display: flex;
flex-direction: column;
background-color: var(--talkie-sidebar-bg-color, #fafafa);
background-image: var(--talkie-sidebar-bg-image, none);
background-size: var(--talkie-sidebar-bg-size, cover);
background-repeat: var(--talkie-sidebar-bg-repeat, no-repeat);
background-position: var(--talkie-sidebar-bg-position, center center);
}
.talkie-sidebar-header {
padding: 16px;
border-bottom: 1px solid var(--talkie-border, #f0f0f0);
background-color: var(--talkie-sidebar-header-bg-color, var(--talkie-sidebar-bg-color, #fafafa));
background-image: var(--talkie-sidebar-header-bg-image, none);
background-size: var(--talkie-sidebar-header-bg-size, cover);
background-repeat: var(--talkie-sidebar-header-bg-repeat, no-repeat);
background-position: var(--talkie-sidebar-header-bg-position, center);
display: flex;
align-items: center;
gap: 8px;}
.talkie-sidebar-title {
font-weight: 600;
font-size: 20px;
}
.talkie-user-avatar {
width: var(--talkie-avatar-size, 60px);
height: var(--talkie-avatar-size, 60px);
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
/* Keep the avatar circular via the inner image radius, but allow overlays (edit badge) to extend outside. */
overflow: visible;
background: #ffe0b2;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
flex-shrink: 0;
position: relative;
}
/* Phase 2: stable avatar inner structure (photo + decoration slot) */
.talkie-user-avatar .talkie-avatar-photo{
width: 100%;
height: 100%;
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.talkie-user-avatar .talkie-avatar-photo img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
}
.talkie-user-avatar .talkie-avatar-decoration-slot{
position: absolute;
inset: 0;
pointer-events: none;
}
/* Presence dot (online / idle / offline)
Applied via JS by toggling classes:
- .talkie-presence-online
- .talkie-presence-idle
- .talkie-presence-offline
*/
.talkie-user-avatar::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
background: var(--talkie-presence-offline, #6b7280);
border: 3px solid var(--talkie-presence-dot-border, var(--talkie-app-bg-color, #03050a));
border-radius: 50%;
z-index: 3;
}
.talkie-user-avatar.talkie-presence-online::after { background: var(--talkie-presence-online, #00ff88); }
.talkie-user-avatar.talkie-presence-idle::after { background: var(--talkie-presence-idle, #ff9800); }
.talkie-user-avatar.talkie-presence-offline::after { background: var(--talkie-presence-offline, #6b7280); }
/* Some special "virtual" items should never show presence dots (eg. invitations bell, HA bot). */
.talkie-user-avatar.talkie-invites-bell::after,
.talkie-user-avatar.talkie-no-presence::after {
content: none !important;
display: none !important;
}
/* Ensure decorations anchor to the avatar itself in group message bubbles */
.talkie-message-sender-avatar{
position: relative;
overflow: visible;
}
.talkie-message-sender-avatar .talkie-avatar-decoration-slot{
position: absolute;
inset: 0;
pointer-events: none;
}
/* Profile affordance: small "edit" badge on the avatar (same icon style as mic/headphones) */
.talkie-avatar-edit-badge{
position: absolute;
right: -2px;
bottom: -2px;
width: 22px;
height: 22px;
border-radius: 999px;
/* Keep only the pencil icon; avoid adding a white "ring" around presence dot */
background: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
pointer-events: none; /* do not block avatar click */
color: rgba(0,0,0,0.72);
}
.talkie-avatar-edit-badge .talkie-icon-pencil{
width: 14px;
height: 14px;
display: block;
}
/* One-time hint pulse */
.talkie-user-avatar.talkie-avatar-hint-pulse{
animation: talkieAvatarHintPulse 1200ms ease-in-out infinite;
}
@keyframes talkieAvatarHintPulse{
0%,100%{ transform: scale(1); }
45%{ transform: scale(1.06); }
}
/* Online presence halo */
.talkie-user-avatar.talkie-avatar-online{
/* Deprecated: presence is now represented by the small status dot (::after). */
border: none !important;
box-shadow: none !important;
}
/* Online halo: nice pop-in when the user becomes online */
.talkie-user-avatar.talkie-avatar-online.talkie-avatar-online-bounce{
animation: talkieOnlinePop 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes talkieOnlinePop{
0%{ transform: scale(0.92); }
55%{ transform: scale(1.06); }
100%{ transform: scale(1); }
}
/* Thread edge bounce */
.talkie-thread-bounce-top{ animation: talkieThreadBounceTop 420ms ease-out; }
.talkie-thread-bounce-bottom{ animation: talkieThreadBounceBottom 420ms ease-out; }
@keyframes talkieThreadBounceTop{ 0%{ transform: translateY(0);} 40%{ transform: translateY(10px);} 100%{ transform: translateY(0);} }
@keyframes talkieThreadBounceBottom{ 0%{ transform: translateY(0);} 40%{ transform: translateY(-10px);} 100%{ transform: translateY(0);} }
/* Deleted message placeholder */
.talkie-message-bubble.talkie-message-deleted{
background: #f2f2f2 !important;
color: #aaa !important;
border: 1px dashed rgba(0,0,0,0.12) !important;
/* Keep a consistent "bubble" size across live updates and page refresh. */
display: inline-flex;
align-items: center;
justify-content: center;
/* Use the same corner logic as normal bubbles (from-me / from-them). */
padding: 6px 10px;
/* Smaller, cleaner placeholder size (same in live + refresh). */
min-width: 60px !important;
min-height: 18px !important;
pointer-events: none;
}
.talkie-message-bubble.talkie-message-deleted .talkie-deleted-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
opacity: 0.85;
}
.talkie-message-bubble.talkie-message-deleted .talkie-deleted-icon svg{
width: 18px;
height: 18px;
}
.talkie-bubble-removing{ animation: talkieBubbleRemove 220ms ease-in forwards; }
/* Ultra-light sparkle on delete (theme-safe, no markup changes).
Uses pseudo-elements so it won't interfere with theme layouts. */
.talkie-bubble-removing::after,
.talkie-bubble-removing::before{
content: '✨';
position: absolute;
right: 10px;
top: -6px;
font-size: 14px;
line-height: 1;
opacity: 0;
transform: translateY(6px) scale(0.75) rotate(-8deg);
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
animation: talkieDeleteSparkle 260ms ease-out forwards;
}
.talkie-bubble-removing::before{
right: 26px;
top: -2px;
font-size: 12px;
transform: translateY(8px) scale(0.7) rotate(10deg);
animation-delay: 60ms;
}
@keyframes talkieBubbleRemove{ from{ transform: scale(1); opacity:1;} to{ transform: scale(0.96); opacity:0.2;} }
@keyframes talkieDeleteSparkle{
0%{ opacity: 0; transform: translateY(6px) scale(0.75) rotate(-8deg); }
35%{ opacity: 0.95; }
100%{ opacity: 0; transform: translateY(-10px) scale(1.15) rotate(14deg); }
}
.talkie-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
/* Match the outer avatar radius (themeable). */
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
}
.talkie-new-conversation-btn {
margin: 8px 16px 12px;
padding: 8px 12px;
border-radius: 999px;
border: none;
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
color: #ffffff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.talkie-new-conversation-btn:hover {
background: #f57c00;
}
/* Floating action button (Nouvelle discussion) */
.talkie-fab {
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s ease, box-shadow .15s ease;
}
.talkie-fab:hover {
transform: scale(1.05);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30);
}
.talkie-fab:active {
transform: scale(0.95);
}
.talkie-fab-icon {
width: 26px;
height: 26px;
display: block;
}
.talkie-conversation-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
/* Contain scroll within the list (prevents scroll chaining and works well with our small bounce effect) */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background-color: var(--talkie-sidebar-bg-color, #fafafa);
background-image: var(--talkie-sidebar-bg-image, none);
background-size: var(--talkie-sidebar-bg-size, cover);
background-repeat: var(--talkie-sidebar-bg-repeat, no-repeat);
background-position: var(--talkie-sidebar-bg-position, center center);
}
.talkie-conversation-item {
display: flex;
padding: 10px 12px;
cursor: pointer;
align-items: center;
gap: 10px;
position: relative;
transition: background-color 0.15s ease, transform 0.12s ease;
}
.talkie-conversation-item:active{
transform: scale(0.99);
}
.talkie-conversation-item.is-new{
animation: talkieConvFlash 0.35s ease;
}
@keyframes talkieConvFlash{
0%{ background-color: rgba(255, 193, 102, 0.32); }
100%{ background-color: transparent; }
}
.talkie-conversation-item:hover {
background: var(--talkie-conversation-hover-bg, #f2f2f2);
}
.talkie-conversation-item.active {
background: var(--talkie-conversation-active-bg, #ffe0b2);
}
/* Premium micro-animation when a conversation (re)appears in the list */
.talkie-conversation-item.talkie-conv-enter{
animation: talkieConvEnter 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes talkieConvEnter {
0% { transform: translateY(6px) scale(0.985); opacity: 0.0; box-shadow: 0 0 0 rgba(0,0,0,0.0); }
45% { opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0.0); }
}
.talkie-conversation-info {
flex: 1;
}
.talkie-conversation-name {
font-size: 17px;
font-weight: 500;
}
.talkie-conversation-email {
font-size: 10px;
color: var(--talkie-secondary-text, #777);
}
.talkie-unread-badge {
position: absolute;
right: 12px;
top: 12px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #ff5722;
color: #ffffff;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
transform-origin: center;
transition: transform 180ms ease, opacity 180ms ease;
}
/* Message bubble: subtle pop when a new row is inserted (theme-safe; only a class toggle) */
.talkie-message-row-pop .talkie-message-bubble{
animation: talkie-message-pop 200ms cubic-bezier(0.2, 0.9, 0.2, 1);
transform-origin: 50% 80%;
}
@keyframes talkie-message-pop {
0% { transform: translateY(3px) scale(0.98); opacity: 0.0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* Unread badge: small "pop" + sparkle when it appears/increases */
.talkie-unread-badge.is-pop {
animation: talkie-unread-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.talkie-unread-badge.is-pop::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 36px;
height: 36px;
transform: translate(-50%, -50%) scale(0.5);
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.0) 60%);
opacity: 0;
pointer-events: none;
animation: talkie-unread-sparkle 520ms ease-out;
}
@keyframes talkie-unread-pop {
0% { transform: scale(0.6); }
55% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@keyframes talkie-unread-sparkle {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
35% { opacity: 0.85; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
/* Main */
.talkie-main {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 160ms ease;
will-change: transform;
}
.talkie-main-header {
padding: 16px;
border-bottom: 1px solid var(--talkie-border, #f0f0f0);
background-color: var(--talkie-main-bg-color, #ffffff);
background-image: var(--talkie-main-bg-image, none);
background-size: var(--talkie-main-bg-size, cover);
background-repeat: var(--talkie-main-bg-repeat, no-repeat);
background-position: var(--talkie-main-bg-position, center center);
display: flex;
align-items: center;
gap: 10px;
}
.talkie-main-header-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.talkie-back-button {
display: none;
border: none;
background: var(--talkie-conversation-hover-bg, #fff3e0);
padding: 0;
margin-right: 8px;
width: 32px;
height: 32px;
border-radius: 999px;
cursor: pointer;
color: var(--talkie-modal-close-color, var(--talkie-primary, #ff9800));
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.talkie-back-button:hover {
background: #ffe0b2;
box-shadow: 0 2px 6px rgba(0,0,0,0.16);
transform: translateY(-1px);
}
.talkie-back-button:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
.talkie-back-button:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 2px;
}
.talkie-back-icon {
font-size: 18px;
line-height: 1;
}
/* Liste des contacts utilisés dans le modal "Nouvelle discussion" */
.talkie-used-contacts-toggle {
margin-top: 10px;
width: 100%;
justify-content: center;
}
.talkie-used-contacts-list {
margin-top: 8px;
display: block;
max-height: 220px;
overflow-y: auto;
}
.talkie-used-contact-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
font-size: 13px;
border-radius: 10px;
border: 1px solid var(--talkie-conversation-active-bg, #ffe0b2);
background: var(--talkie-modal-bg-color, #fffaf2);
cursor: pointer;
width: 100%;
box-sizing: border-box;
margin-bottom: 6px;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.talkie-used-contact-pill:hover {
background: var(--talkie-conversation-hover-bg, #fff3e0);
border-color: var(--talkie-primary-hover, #ffcc80);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.talkie-used-contact-pill-label {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.talkie-used-contact-pill-plus {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid var(--talkie-primary-hover, #ffb74d);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
background: var(--talkie-primary, #ff9800);
color: #ffffff;
}
.talkie-used-contact-pill-plus::before {
content: '+';
}
.talkie-used-contact-pill-trash{
flex-shrink:0;
width: 26px;
height: 26px;
border-radius: 999px;
border: none;
background: #e53935;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
opacity: 0;
transform: scale(0.92);
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
}
/* Show delete button only on hover (desktop) / focus-within (keyboard). */
.talkie-used-contact-pill:hover .talkie-used-contact-pill-trash,
.talkie-used-contact-pill:focus-within .talkie-used-contact-pill-trash{
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.talkie-used-contact-pill-trash svg{
display:block;
fill: none;
width: 14px;
height: 14px;
}
.talkie-used-contact-pill-trash:hover{
transform: scale(1.12);
box-shadow: 0 8px 18px rgba(229,57,53,.28);
}
.talkie-used-contact-pill:hover {
background: #efefef;
}
/* Smooth removal animation for contact pills */
.talkie-used-contact-pill.talkie-pill-removing{
opacity: 0;
transform: scale(0.96);
transition: opacity 180ms ease, transform 180ms ease;
}
.talkie-main-body {
flex: 1;
position: relative;
padding: 12px 16px;
display: flex;
flex-direction: column;
overflow-y: auto;
gap: 8px;
min-height: 0;
background-color: var(--talkie-main-bg-color, #ffffff);
background-image: var(--talkie-main-bg-image, none);
background-size: var(--talkie-main-bg-size, cover);
background-repeat: var(--talkie-main-bg-repeat, no-repeat);
background-position: var(--talkie-main-bg-position, center center);
}
.talkie-main-footer {
padding: 10px 16px 14px;
border-top: 1px solid var(--talkie-border, #f0f0f0);
background-color: var(--talkie-main-bg-color, #ffffff);
background-image: var(--talkie-main-bg-image, none);
background-size: var(--talkie-main-bg-size, cover);
background-repeat: var(--talkie-main-bg-repeat, no-repeat);
background-position: var(--talkie-main-bg-position, center center);
}
.talkie-secondary-text {
font-size: 14px;
color: var(--talkie-secondary-text, #777);
}
/* Buttons */
.talkie-primary-button {
width: 100%;
padding: 14px;
border-radius: 999px;
/* Talk bar (themeable): color or image background + shadow */
background-color: var(--talkie-talkbar-bg-color, var(--talkie-primary, #ff9800));
background-image: var(--talkie-talkbar-bg-image, none);
background-size: var(--talkie-talkbar-bg-size, cover);
background-repeat: var(--talkie-talkbar-bg-repeat, no-repeat);
background-position: var(--talkie-talkbar-bg-position, center center);
box-shadow: var(--talkie-talkbar-box-shadow, none);
color: var(--talkie-primary-contrast, #ffffff);
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
/* Danger button (used for destructive confirms like deleting a contact) */
.talkie-danger-button{
padding: 10px 14px;
border-radius: 999px;
font-weight: 700;
border: none;
background: #e53935;
color: #ffffff;
cursor: pointer;
}
.talkie-danger-button:hover{ filter: brightness(0.97); }
.talkie-danger-button:active{ filter: brightness(0.94); transform: translateY(1px); }
.talkie-danger-button:disabled{ opacity: .6; cursor: not-allowed; }
/* Confirm modal meta (avatar + name) */
.talkie-confirm-meta{
display:flex;
align-items:center;
gap: 10px;
margin: 10px 0 6px;
}
.talkie-confirm-avatar{
width: 42px;
height: 42px;
border-radius: 999px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background: #f0f0f0;
flex: 0 0 42px;
}
.talkie-confirm-avatar img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
.talkie-confirm-avatar--fallback{
font-weight: 800;
color: #444;
}
.talkie-confirm-name{
font-weight: 800;
font-size: 14px;
}
.talkie-primary-button:active {
transform: scale(0.98);
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* Recording button UI */
#talkie-record-btn{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: transform 0.12s ease, box-shadow 0.12s ease;
box-shadow: 0px 0px 0px 5px var(--talkie-record-ring, #ff6900);
}
#talkie-record-btn:active{
transform: scale(0.97);
}
#talkie-record-btn.is-recording{
box-shadow: 0 0 0 6px var(--talkie-record-pulse, rgba(255, 152, 0, 0.25));
}
#talkie-record-btn.is-recording::after{
content: "";
position: absolute;
inset: -6px;
border-radius: var(--talkie-talk-btn-radius, 999px);
border: 2px solid rgba(255, 152, 0, 0.6);
animation: talkieRecordPulse 1s ease-in-out infinite;
}
@keyframes talkieRecordPulse{
0%{ transform: scale(0.98); opacity: 0.8; }
100%{ transform: scale(1.06); opacity: 0.2; }
}
.talkie-record-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
/* Red by default (idle) */
color: var(--talkie-record-idle, #ef4444);
}
#talkie-record-btn.is-recording .talkie-record-icon{
/* Green while pressed */
color: var(--talkie-record-active, #22c55e);
}
.talkie-record-icon svg{
width: 18px;
height: 18px;
display: block;
fill: currentColor;
}
.talkie-audio-wave{
display: none;
align-items: flex-end;
height: 16px;
gap: 3px;
}
/* Inline mic icon inside the record button (kept small on non-PRISM themes). */
#talkie-record-btn .talkie-record-mic{
width: 22px;
height: 22px;
display: block;
flex: 0 0 auto;
fill: currentColor;
color: var(--talkie-talklabel-color, currentColor);
}
/* While recording, we hide the mic icon and show the live wave instead. */
#talkie-record-btn.is-recording .talkie-record-mic{ display: none; }
#talkie-record-btn.is-recording .talkie-audio-wave{ display: inline-flex; }
.talkie-audio-wave i{
display: block;
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.9);
transform-origin: bottom;
will-change: height, opacity;
animation: talkieWave 700ms ease-in-out infinite;
}
/* When we are recording we drive the bars from the real mic level (JS),
so disable the canned animation. */
#talkie-record-btn.is-recording .talkie-audio-wave i{
animation: none;
}
.talkie-audio-wave i:nth-child(2){ animation-delay: 90ms; }
.talkie-audio-wave i:nth-child(3){ animation-delay: 180ms; }
.talkie-audio-wave i:nth-child(4){ animation-delay: 270ms; }
.talkie-audio-wave i:nth-child(5){ animation-delay: 360ms; }
@keyframes talkieWave{
0%, 100%{ height: 4px; opacity: 0.7; }
40%{ height: 14px; opacity: 1; }
70%{ height: 8px; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce){
.talkie-audio-wave i{ animation: none; height: 10px; opacity: 0.9; }
}
.talkie-primary-button:hover {
background: var(--talkie-primary-hover, #f57c00);
}
.talkie-primary-button:disabled {
opacity: 0.6;
cursor: default;
}
.talkie-outline-button {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--talkie-primary, #ff9800);
background: #ffffff;
color: var(--talkie-primary, #ff9800);
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.talkie-outline-button:hover {
background: var(--talkie-conversation-hover-bg, #fff3e0);
}
/* Message bubbles */
.talkie-messages-empty {
margin: auto;
text-align: center;
}
.talkie-message-row {
display: flex;
width: 100%;
}
/* Optional side avatar (used by some themes like PRISM). Hidden by default. */
.talkie-message-side-avatar{ display: none; }
.talkie-message-row.from-them {
justify-content: flex-start;
}
.talkie-message-row.from-me {
justify-content: flex-end;
}
.talkie-message-bubble {
position: relative;
max-width: 100%;
padding: 10px 14px;
border-radius: 18px;
margin: 4px 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* Audio playback progress fill aligned with the waveform (left -> right)
This keeps the bubble-level progress and the played (green) waveform bars on the same visual baseline. */
.talkie-audio-waveform .talkie-audio-progress {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 10px;
overflow: hidden;
pointer-events: none;
z-index: 0;
opacity: 1;
transition: opacity 220ms ease;
}
.talkie-audio-waveform .talkie-audio-progress-bar {
height: 100%;
width: 100%;
border-radius: inherit;
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
/* Progress is driven by rAF in JS for maximum smoothness */
transition: none;
background: var(--talkie-wave-played-color);
opacity: 0.14;
}
/* End-of-play polish: smoother reset back to the initial bubble color */
.talkie-message-bubble.talkie-audio-resetting .talkie-audio-progress {
opacity: 0;
}
.talkie-message-bubble.talkie-audio-resetting .talkie-audio-progress-bar {
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.talkie-message-bubble.talkie-audio-resetting {
animation: talkieBubbleResetFlash 320ms ease;
}
@keyframes talkieBubbleResetFlash {
0% { filter: brightness(1); }
45% { filter: brightness(1.07); }
100% { filter: brightness(1); }
}
/* Slightly darker fill depending on side */
/* Waveform progress uses the same played color; side-dependent tint is no longer needed. */
/* Ensure content stays above the progress layer */
.talkie-message-bubble > :not(.talkie-audio-progress):not(.talkie-message-delete):not(.talkie-unread-dot):not(.talkie-reaction-badges):not(.talkie-reaction-badge):not(.talkie-reaction-toast) {
position: relative;
z-index: 1;
}
/* Swap play/pause glyph based on .playing */
.talkie-message-play-icon svg {
width: var(--talkie-playpause-icon-width, 20px);
height: var(--talkie-playpause-icon-height, 25px);
}
/* If a theme provides play/pause icons as ![]()
, size them like the inline SVGs */
.talkie-message-play-icon img.talkie-icon-play,
.talkie-message-play-icon img.talkie-icon-pause{
width: var(--talkie-playpause-icon-width, 20px);
height: var(--talkie-playpause-icon-height, 25px);
display: block;
}
.talkie-message-play-icon .talkie-icon-pause { display: none; }
.talkie-message-bubble.playing .talkie-message-play-icon .talkie-icon-play { display: none; }
.talkie-message-bubble.playing .talkie-message-play-icon .talkie-icon-pause { display: block; }
/* --- Emoji reactions --- */
/* Container for reaction "stickers" (can hold multiple badges side-by-side) */
.talkie-message-bubble .talkie-reaction-badges{
position: absolute;
left: 10px;
bottom: -12px;
display: flex;
gap: 6px;
align-items: center;
z-index: 2;
pointer-events: none; /* stickers are visual only */
}
/* Single badge */
.talkie-message-bubble .talkie-reaction-badge{
position: relative;
width: 25px;
height: 25px;
border-radius: 999px;
background-color: #e3f2fd; /* theme orange */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 25px;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
/* Sticker "pop" effect when a reaction appears/changes */
.talkie-message-bubble .talkie-reaction-badge.talkie-reaction-pop{
animation: talkieStickerPop 420ms cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: 50% 110%;
}
@keyframes talkieStickerPop{
0% { transform: translateY(10px) scale(0.2) rotate(-12deg); opacity: 0.2; }
55% { transform: translateY(-2px) scale(1.18) rotate(4deg); opacity: 1; }
78% { transform: translateY(1px) scale(0.96) rotate(-2deg); }
100% { transform: translateY(0) scale(1) rotate(0deg); }
}
/* Small count (optional) */
.talkie-message-bubble .talkie-reaction-badge .talkie-reaction-count{
position: absolute;
right: -6px;
top: -6px;
width: 16px;
height: 16px;
border-radius: 999px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Reaction picker popover (styled like an onboarding bubble but closer to chat design) */
.talkie-reaction-popover{
position: fixed;
z-index: 1000006;
background: var(--talkie-modal-bg-color, #fff);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
padding: 8px 10px;
display: inline-flex;
gap: 8px;
align-items: center;
}
/* Smooth appearance + staggered emoji "pop" */
.talkie-reaction-popover.talkie-reaction-popover-anim{
opacity: 0;
transform: translateY(8px) scale(0.96);
transform-origin: center;
}
.talkie-reaction-popover.talkie-reaction-popover-anim.is-open{
animation: talkieReactionPopoverIn 180ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes talkieReactionPopoverIn{
0%{ opacity:0; transform: translateY(8px) scale(0.96); }
100%{ opacity:1; transform: translateY(0) scale(1); }
}
.talkie-reaction-popover:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--talkie-modal-bg-color, #fff);
transform: rotate(45deg);
bottom: -6px;
left: var(--tw-after-left-px, 50%);
margin-left: -5px;
}
.talkie-reaction-emoji{
border: none;
background: transparent;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
border-radius: 10px;
}
.talkie-reaction-emoji.talkie-reaction-emoji-pop{
opacity: 0;
transform: translateY(10px) scale(0.75);
will-change: transform, opacity;
}
.talkie-reaction-popover.talkie-reaction-popover-anim.is-open .talkie-reaction-emoji.talkie-reaction-emoji-pop{
animation: talkieEmojiPop 220ms cubic-bezier(.2,1.1,.2,1) forwards;
animation-delay: var(--tw-pop-delay, 0ms);
}
@keyframes talkieEmojiPop{
0%{ opacity:0; transform: translateY(10px) scale(0.75); }
70%{ opacity:1; transform: translateY(-2px) scale(1.06); }
100%{ opacity:1; transform: translateY(0) scale(1); }
}
.talkie-reaction-emoji:hover{
background: rgba(0,0,0,0.06);
}
/* Ensure WordPress emoji images remain nicely aligned when used inside buttons/badges */
img.wp-smiley, img.emoji{
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 0.95em !important;
width: 0.95em !important;
margin: 0 0.05em !important;
vertical-align: -0.05em !important;
background: none !important;
padding: 0 !important;
}
.talkie-message-bubble.from-them {
color: var(--talkie-bubble-them-text-color, #0b1220);
background-color: var(--talkie-bubble-them-bg-color, rgb(224, 247, 250));
background-image: var(--talkie-bubble-them-bg-image, none);
background-size: var(--talkie-bubble-them-bg-size, cover);
background-repeat: var(--talkie-bubble-them-bg-repeat, no-repeat);
background-position: var(--talkie-bubble-them-bg-position, center center);
border: 1px solid var(--talkie-bubble-them-border, rgb(128, 222, 234));
border-radius: var(--talkie-bubble-them-radius, 18px);
border-bottom-left-radius: var(--talkie-bubble-them-tail-radius, 6px);
min-width: 110px;
max-width: var(--talkie-bubble-them-max-width, 210px);
}
.talkie-message-bubble.from-me {
color: var(--talkie-bubble-me-text-color, #0b1220);
background-color: var(--talkie-bubble-me-bg-color, #e3f2fd);
background-image: var(--talkie-bubble-me-bg-image, none);
background-size: var(--talkie-bubble-me-bg-size, cover);
background-repeat: var(--talkie-bubble-me-bg-repeat, no-repeat);
background-position: var(--talkie-bubble-me-bg-position, center center);
border-radius: var(--talkie-bubble-me-radius, 18px);
border-bottom-right-radius: var(--talkie-bubble-me-tail-radius, 6px);
max-width: var(--talkie-bubble-me-max-width, 210px);
/* Fix: some layouts force a width on the "from-me" bubble; keep it flexible.
This is especially important for deleted placeholders which must stay compact. */
width: unset !important;
}
/* Ensure deleted placeholders from me never stretch */
.talkie-message-bubble.from-me.talkie-message-deleted{
width: unset !important;
}
.talkie-message-bubble.playing {
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
transform: scale(1.03);
}
.talkie-message-bubble.from-them.playing {
background-color: rgb(178, 235, 242);
border-color: rgb(128, 222, 234);
}
.talkie-message-bubble.from-me.playing {
background: #bbdefb;
}
.talkie-message-audio-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
/* keep bars tight (talkie-like) */
gap: 1px;
flex: 1 1 auto;
/* Keep the equalizer block visually fixed (no layout jump when bars animate) */
height: 26px;
}
.talkie-message-bar {
flex: 1 1 0;
max-width: 4px;
border-radius: 999px;
background: rgba(0,0,0,0.25);
/* Fixed bar height; the visual amplitude is driven by transform: scaleY(...) */
height: 100%;
transform-origin: 50% 100%;
transform: scaleY(0.35);
}
.talkie-message-bubble.from-them .talkie-message-bar {
background: var(--talkie-audio-bars-them, rgba(255, 87, 34, 0.65));
}
.talkie-message-bubble.from-me .talkie-message-bar {
background: var(--talkie-audio-bars-me, rgba(21, 101, 192, 0.65));
}
.talkie-message-bubble.playing .talkie-message-bar {
animation: talkie-bars 0.8s infinite ease-in-out alternate;
}
/* When WebAudio visualizer is active, bar heights are driven by JS (sound-reactive).
Keep a soft transition and disable the generic oscillating animation. */
.talkie-message-bubble.talkie-audio-viz.playing .talkie-message-bar {
animation: none;
transition: transform 90ms linear;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(2) {
animation-delay: 0.1s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(3) {
animation-delay: 0.2s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(4) {
animation-delay: 0.3s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(5) {
animation-delay: 0.4s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(6) {
animation-delay: 0.5s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(7) {
animation-delay: 0.6s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(8) {
animation-delay: 0.7s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(9) {
animation-delay: 0.8s;
}
.talkie-message-bubble.playing .talkie-message-bar:nth-child(10) {
animation-delay: 0.9s;
}
@keyframes talkie-bars {
0% { transform: scaleY(0.35); }
50% { transform: scaleY(0.95); }
100% { transform: scaleY(0.55); }
}
.talkie-message-time {
font-size: 11px;
opacity: 0.7;
}
.talkie-message-meta {
flex: 0 0 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 4px;
}
/* Ligne du haut : play/pause + barres audio + durée à droite */
.talkie-message-top {
flex: 0 0 100%;
display: flex;
align-items: center;
gap: 8px;
}
.talkie-message-top .talkie-message-audio-bars {
/* Center the bars and prevent them from stretching with the bubble */
flex: 1 1 auto;
max-width: 85px;
margin-left: auto;
margin-right: auto;
/* Ensure the bars container gets a real width in flex layouts (Safari/desktop) */
width: -webkit-fill-available;
width: fill-available;
width: 100%;
min-width: 0;
}
.talkie-message-top .talkie-message-duration {
margin-left: auto;
white-space: nowrap;
}
.talkie-message-meta-left {
display: flex;
align-items: center;
gap: 6px;
min-height: 14px;
}
.talkie-message-status {
display: inline-flex;
align-items: center;
gap: 0px;
}
/* Delivery / read checks (used in outgoing bubbles) */
.talkie-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
color: var(--talkie-status-delivered-off, #cacaca);
position: relative;
transition: color 160ms ease, transform 160ms ease, filter 160ms ease;
}
.talkie-check svg {
width: 15px;
height: 15px;
display: block;
}
.talkie-check img.talkie-check-ico{
width: 15px;
height: 15px;
display: block;
object-fit: contain;
}
.talkie-check.is-on {
animation: talkie-check-pop 260ms ease-out;
}
/* Extra flourish when a receipt turns ON (we toggle .talkie-just-on in JS)
This avoids cases where the element already had .is-on at first paint and
ensures a visible "pop" when state changes. */
.talkie-check.talkie-just-on {
animation: talkie-check-pop 260ms ease-out;
}
.talkie-check.talkie-just-on::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%);
opacity: 0;
/* four little "spark" dots */
box-shadow:
0 -10px 0 0 currentColor,
10px 0 0 0 currentColor,
0 10px 0 0 currentColor,
-10px 0 0 0 currentColor;
animation: talkie-check-spark 520ms ease-out;
pointer-events: none;
}
.talkie-check[data-kind="delivered"] { color: var(--talkie-status-delivered-off, #cacaca); }
.talkie-check.is-on[data-kind="delivered"] {
color: var(--talkie-status-delivered-on, #2bbf5a);
filter: drop-shadow(0 1px 2px rgba(43, 191, 90, 0.35));
}
.talkie-check[data-kind="read"] { color: var(--talkie-status-read-off, #cacaca); }
.talkie-check.is-on[data-kind="read"] {
color: var(--talkie-status-read-on, var(--talkie-status-delivered-on, #2bbf5a));
filter: drop-shadow(0 1px 2px rgba(43, 191, 90, 0.35));
}
@keyframes talkie-check-pop {
0% { transform: scale(0.85); }
55% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@keyframes talkie-check-spark {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
25% { opacity: 0.75; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes talkie-check-spark {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); filter: blur(0px); }
30% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); filter: blur(0.2px); }
}
.talkie-message-check {
width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #9aa0a6;
position: relative;
}
.talkie-message-check svg {
width: 15px;
height: 15px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.talkie-message-check.is-on {
color: #22c55e;
}
.talkie-message-meta-right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.talkie-message-duration {
font-size: 11px;
opacity: 0.7;
white-space: nowrap;
}
/* Modal */
.talkie-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000001;
/* Must stay above the app container even in desktop fullscreen */
}
/* ====== PWA update toast ====== */
.talkie-update-toast {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 1000005;
max-width: min(560px, calc(100vw - 24px));
width: calc(100vw - 24px);
background: rgba(20, 20, 22, 0.94);
color: #fff;
border-radius: 16px;
box-shadow: 0 14px 40px rgba(0,0,0,0.28);
padding: 12px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.talkie-update-toast .talkie-update-toast-text {
font-size: 13px;
line-height: 1.2;
opacity: 0.95;
flex: 1;
}
.talkie-update-toast .talkie-update-toast-actions {
display: flex;
align-items: center;
gap: 8px;
}
.talkie-update-toast .talkie-update-toast-btn {
border: 0;
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
cursor: pointer;
background: var(--talkie-primary, #ffc166);
color: #1a1a1a;
font-size: 13px;
white-space: nowrap;
}
.talkie-update-toast .talkie-update-toast-close {
border: 0;
border-radius: 12px;
padding: 10px 10px;
cursor: pointer;
background: rgba(255,255,255,0.10);
color: #fff;
font-size: 13px;
line-height: 1;
}
.talkie-update-toast[hidden] { display: none !important; }
.talkie-modal {
position: relative;
/* Themeable modal surface */
background: var(--talkie-modal-bg-color, #ffffff);
border-radius: 18px;
padding: 20px 24px 24px;
width: 95%;
max-width: 780px;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
box-sizing: border-box;
}
/* Small modal variant (used for simple confirmations / PIN prompts) */
.talkie-modal-small {
max-width: 420px;
}
/* Labels inside modal forms */
.talkie-modal-label {
display: block;
font-size: 13px;
font-weight: 600;
margin: 10px 0 4px;
}
/* Profile modal plus large */
.talkie-modal-profile {
max-width: 520px;
/* Prevent the profile editor from growing too tall when plugins add options */
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Scrollable body inside profile modal */
.talkie-modal-profile .talkie-modal-scroll{
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding-right: 2px; /* keep scrollbar from overlapping content */
}
/* On mobile, hide the custom scrollbar buttons (arrows) which can appear as an ugly bar */
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button{
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Parental modals should not use the negative-margin title style (it can look clipped) */
.talkie-modal-parental .talkie-modal-title{
margin-top: 0;
margin-left: 0;
margin-right: 0;
border-radius: 16px;
}
/* Profile header with logout top-right */
.talkie-modal-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.talkie-modal-title {
font-size: 18px;
font-weight: 600;
text-align: center;
margin-bottom: 12px;
padding: 10px 16px;
margin-top: -20px;
margin-left: -24px;
margin-right: -24px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
color: #ffffff;
border-bottom: none;
}
.talkie-confirm-avatar--fallback{ font-weight:700; }
.talkie-confirm-name{ font-weight:600; max-width: 85%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.talkie-modal-mode-switch {
display: flex;
justify-content: center;
gap: 8px;
margin: 4px 0 10px;
}
.talkie-mode-button {
border-radius: 999px;
border: 1px solid var(--talkie-conversation-active-bg, #ffe0b2);
background: var(--talkie-conversation-hover-bg, #fff3e0);
font-size: 13px;
padding: 6px 12px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.talkie-mode-button-active {
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
border-color: var(--talkie-modal-close-color, var(--talkie-primary, #ff9800));
color: #ffffff;
box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.18);
}
.talkie-logout-link {
border: none;
background: transparent;
color: #e53935;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.talkie-modal-text {
font-size: 14px;
color: var(--talkie-modal-text-dim, var(--talkie-secondary-text, #555));
margin-bottom: 16px;
}
.talkie-modal-layout {
display: flex;
gap: 16px;
margin-top: 8px;
}
.talkie-modal-left {
flex: 4;
min-width: 0;
}
.talkie-modal-right {
flex: 2;
min-width: 0;
}
.talkie-modal-right {
border-left: 1px solid #f0f0f0;
padding-left: 16px;
}
.talkie-modal-contacts-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}
.talkie-modal-contacts-icon {
font-size: 14px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #ffecb3;
color: #f57c00;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
}
/* Empile les colonnes sur mobile */
@media (max-width: 640px) {
.talkie-modal-layout {
flex-direction: column;
}
.talkie-modal-right {
border-left: none;
border-top: 1px solid #f0f0f0;
padding-left: 0;
padding-top: 12px;
}
}
.talkie-modal-actions {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
margin-top: 24px;
}
/* Theme-aware buttons inside modals */
.talkie-modal .talkie-primary-button{
background-color: var(--talkie-modal-primary-bg, var(--talkie-primary, #ff9800)) !important;
color: var(--talkie-modal-primary-color, var(--talkie-primary-contrast, #fff)) !important;
}
.talkie-modal .talkie-outline-button{
background: transparent !important;
border-color: var(--talkie-modal-border-color, var(--talkie-border, #dddddd)) !important;
color: var(--talkie-modal-text-strong, var(--talkie-text-strong, #111)) !important;
}
/* ===== Accueil (pas encore de discussion) ===== */
.talkie-home-card-wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.talkie-home-card {
width: min(520px, 100%);
background: var(--talkie-modal-bg-color, #fff);
border: 1px solid #eee;
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
position: relative;
overflow: hidden;
}
.talkie-home-card:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0));
}
.talkie-home-hero {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.talkie-home-ico {
width: 44px;
height: 44px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f6f6f6;
border: 1px solid #efefef;
font-size: 20px;
}
.talkie-home-card-subtitle {
font-size: 13px;
color: #6b7280;
line-height: 1.35;
margin-top: 2px;
}
.talkie-home-card-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
}
.talkie-home-card:hover {
box-shadow: 0 12px 34px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.talkie-fade-in {
animation: talkieFadeInUp 180ms ease-out both;
}
@keyframes talkieFadeInUp {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.talkie-fade-in { animation: none; }
.talkie-home-card:hover { transform: none; }
}
.talkie-home-card-text {
font-size: 14px;
line-height: 1.45;
color: var(--talkie-modal-text, var(--talkie-text-color, #333));
margin-bottom: 14px;
}
.talkie-home-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 14px;
}
.talkie-home-badge {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 999px;
background: #fafafa;
border: 1px solid var(--talkie-modal-border-color, var(--talkie-border, #f0f0f0));
font-size: 13px;
line-height: 1.2;
}
.talkie-badge-ico {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-home-card-hint {
font-size: 13px;
color: #666;
}
/* ===== Mini popup contact ===== */
.talkie-contact-modal {
max-width: 420px;
}
.talkie-contact-head {
display: flex;
gap: 14px;
align-items: center;
box-shadow: 0px 0px 0px 5px #ff6900;
margin-bottom: 40px;
padding: 10px;
border-radius: 16px;
}
.talkie-contact-avatar {
width: 120px;
height: 120px;
border-radius: 999px;
overflow: hidden;
background: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #555;
}
.talkie-contact-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.talkie-contact-meta {
min-width: 0;
}
.talkie-contact-name {
font-weight: 700;
font-size: 35px;
color: #ff6900;
}
.talkie-contact-email {
margin-top: 2px;
color: #666;
font-size: 15px;
word-break: break-word;
}
.talkie-contact-actions {
margin-top: 16px;
justify-content: space-between;
}
/* Profile modal extras */
.talkie-profile-preview {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.talkie-profile-preview-avatar {
width: 80px;
height: 80px;
border-radius: 999px;
overflow: hidden;
background: #ffe0b2;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #fff;
}
.talkie-profile-preview-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.talkie-profile-media-buttons {
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.talkie-profile-video {
width: 100%;
max-height: 200px;
border-radius: 12px;
background: #000;
margin-bottom: 8px;
}
/* Login screen inside card */
.talkie-login-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.talkie-login-card {
width: 100%;
max-width: 380px;
margin: 0 auto;
background: #ffffff;
border-radius: 24px;
padding: 24px 24px 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
text-align: center;
}
.talkie-login-logo {
width: 72px;
height: 72px;
margin: 0 auto 12px;
border-radius: 999px;
overflow: hidden;
}
.talkie-login-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.talkie-login-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
.talkie-login-subtitle {
font-size: 13px;
color: #777;
margin-bottom: 18px;
}
.talkie-login-info {
font-size: 12px;
color: #999;
margin-top: 8px;
}
/* Responsive */
@media (max-width: 650px) {
body.talkie-centered {
align-items: stretch;
}
#page {
align-items: stretch;
}
#talkie-root {
width: 100%;
max-width: 100%;
height: var(--vvh, 100vh);
max-height: var(--vvh, 100vh);
border-radius: 0;
box-shadow: var(--talkie-group-bubble-online-shadow, none);
}
.talkie-app {
flex-direction: column;
}
.talkie-sidebar {
width: 100%;
min-width: 100%;
/* Allow inner scroll areas (conversation list) to actually scroll in flex layouts */
min-height: 0;
flex: 1 1 auto;
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
.talkie-conversation-list{
/* iOS + flexbox: without min-height:0, overflow-y:auto may not scroll */
min-height: 0;
-webkit-overflow-scrolling: touch;
}
/* Mobile readability: give each conversation more breathing room */
.talkie-conversation-item{
padding: 14px 14px;
margin: 6px 10px;
border-radius: 12px;
}
}
.talkie-unread-dot {
position: absolute;
top: 5px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
border: 2px solid #ffffff;
z-index: 3;
}
.talkie-modal-input {
width: inherit;
max-width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid var(--talkie-modal-input-border, #ddd);
background: var(--talkie-modal-input-bg, #fff);
color: var(--talkie-modal-text-strong, var(--talkie-text-strong, #111));
margin-bottom: 16px;
font-size: 14px;
}
.talkie-input-error{
border-color: #e53935 !important;
box-shadow: 0 0 0 3px rgba(229,57,53,.16);
animation: talkieShake 220ms ease-in-out;
}
@keyframes talkieShake{
0%{ transform: translateX(0); }
25%{ transform: translateX(-3px); }
50%{ transform: translateX(3px); }
75%{ transform: translateX(-2px); }
100%{ transform: translateX(0); }
}
.talkie-modal-icon {
position: absolute;
top: 5px;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--talkie-conversation-hover-bg, #fff3e0);
color: var(--talkie-modal-close-color, var(--talkie-primary, #ff9800));
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
margin-bottom: 8px;
}
.talkie-modal-actions-split {
justify-content: space-between;
}
.talkie-logout-icon {
position: absolute;
top: 14px;
right: 16px;
width: 28px;
height: 28px;
border-radius: 999px;
border: none;
background: #ffe5e5;
color: #e53935;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
}
.talkie-logout-icon:hover {
background: #ffcdd2;
}
.talkie-unread-dot {
position: absolute;
top: 5px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
border: 2px solid #ffffff;
z-index: 3;
}
/* Apparence spéciale pour l'écran de login */
body.talkie-login-screen #talkie-root {
background: unset !important;
box-shadow: unset !important;
}
.talkie-message-play-icon {
width: var(--talkie-playpause-btn-width, 40px);
height: var(--talkie-playpause-btn-height, 40px);
border-radius: 999px;
border: 2px solid rgba(0,0,0,0.15);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
box-sizing: border-box;
background: var(--talkie-modal-close-bg, rgba(255,255,255,0.8));
/* Allow themes to force icon contrast independently of the bubble text color */
color: var(--talkie-playpause-icon-color, currentColor);
}
.talkie-message-bubble.from-them .talkie-message-play-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--talkie-playpause-btn-width, 40px);
height: var(--talkie-playpause-btn-height, 40px);
border-radius: 999px;
border: 1px solid var(--talkie-playpause-border-them, rgba(255, 87, 34, 0.65));
background: var(--talkie-playpause-bg-them, transparent);
color: var(--talkie-playpause-icon-color-them, var(--talkie-playpause-icon-color, currentColor));
margin-right: 8px;
flex-shrink: 0;
}
.talkie-message-bubble.from-me .talkie-message-play-icon {
border-color: var(--talkie-playpause-border-me, rgba(21, 101, 192, 0.45));
background: var(--talkie-playpause-bg-me, #f4f8ff);
color: var(--talkie-playpause-icon-color-me, var(--talkie-playpause-icon-color, currentColor));
}
.talkie-message-bubble.playing .talkie-message-play-icon {
transform: scale(1.05);
}
.talkie-conversation-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
margin-right: 30px;
opacity: 0;
transform: translateX(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Desktop: keep actions closer to the right edge */
@media (min-width: 1024px) {
.talkie-conversation-actions {
margin-right: 5px;
}
}
/* When a conversation has a "listening" indicator, keep the actions row visible,
but only reveal the delete button on hover (desktop) or swipe (mobile). */
.talkie-conversation-actions.talkie-actions-visible {
opacity: 1;
transform: translateX(0);
}
.talkie-conversation-actions.talkie-actions-visible .talkie-conversation-delete {
opacity: 0;
pointer-events: none;
transform: translateX(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.talkie-conversation-item:hover .talkie-conversation-actions.talkie-actions-visible .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-conversation-item:hover .talkie-conversation-actions {
opacity: 1;
transform: translateX(0);
}
/* Reveal + enable the delete button only when it is visually revealed */
.talkie-conversation-item:hover .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-conversation-delete {
border: none;
background: #ff5252;
color: #fff;
border-radius: 999px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.18);
/* Important: the delete button must not be clickable when hidden (mobile swipe UI) */
opacity: 0;
pointer-events: none;
transform: translateX(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.talkie-conversation-delete:hover {
background: #e53935;
}
/* État swipe sur mobile */
.talkie-conversation-item.swipe-delete {
background: #ffe6e6;
}
.talkie-conversation-item.swipe-delete .talkie-conversation-actions {
opacity: 1;
transform: translateX(0);
}
.talkie-conversation-item.swipe-delete .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-conversation-item.swipe-delete .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-conversation-item.swipe-delete .talkie-conversation-actions.talkie-actions-visible .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Reveal the delete button only when it is actually visible */
.talkie-conversation-item:hover .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-conversation-item.swipe-delete .talkie-conversation-delete {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.talkie-listening-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
color: rgba(0,0,0,0.78);
font-size: 12px;
line-height: 1;
white-space: nowrap;
user-select: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
animation: talkiePulse 1.3s ease-in-out infinite;
}
/* Optional names inside the listening pill (mostly for groups) */
.talkie-listening-names {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.9;
}
.talkie-listening-pill svg.talkie-icon-headphones {
width: 18px;
height: 18px;
display: block;
}
/* Theme-provided icons can be rendered as ![]()
*/
.talkie-icon-img {
width: 18px;
height: 18px;
display: block;
}
/* "Enregistrement en cours" pill (retro mic) */
.talkie-recording-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 193, 102, 0.30);
color: rgba(0,0,0,0.80);
font-size: 12px;
line-height: 1;
white-space: nowrap;
user-select: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
animation: talkiePulse 1.3s ease-in-out infinite;
}
.talkie-recording-pill svg.talkie-icon-mic {
width: 18px;
height: 18px;
display: block;
}
/* Reuse the same nicer SVG icons in header/avatar badges */
.talkie-header-listening-ico svg,
.talkie-header-recording-ico svg,
.talkie-avatar-listening-badge svg,
.talkie-avatar-recording-badge svg{
width: var(--talkie-header-presence-ico-size, 25px);
height: var(--talkie-header-presence-ico-size, 25px);
display: block;
color: rgba(0,0,0,0.78);
}
.talkie-avatar-listening-badge svg *,
.talkie-avatar-recording-badge svg *{
fill: none !important;
stroke: currentColor !important;
}
/* Recording avatars (group) */
.talkie-recording-avatars {
display: inline-flex;
align-items: center;
gap: 0;
}
.talkie-recording-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
background: rgba(0,0,0,0.10);
color: rgba(0,0,0,0.80);
border: 2px solid rgba(255,255,255,0.95);
margin-left: -6px;
}
.talkie-recording-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.talkie-recording-avatar-more {
background: rgba(0,0,0,0.12);
color: rgba(0,0,0,0.74);
font-weight: 700;
}
/* Header presence row (listening + recording on the same line) */
.talkie-header-presence-row {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
/* Header recording indicator */
.talkie-header-recording-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 0;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 193, 102, 0.30);
color: rgba(0,0,0,0.80);
font-size: 12px;
line-height: 1;
white-space: nowrap;
user-select: none;
animation: talkiePulse 1.3s ease-in-out infinite;
}
.talkie-header-recording-ico {
width: var(--talkie-header-presence-ico-size, 25px);
height: var(--talkie-header-presence-ico-size, 25px);
font-size: 16px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-header-recording-avatars {
display: inline-flex;
align-items: center;
gap: 0;
}
.talkie-header-recording-avatar {
width: var(--talkie-header-presence-avatar-size, 25px);
height: var(--talkie-header-presence-avatar-size, 25px);
border-radius: 999px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
background: rgba(0,0,0,0.10);
color: rgba(0,0,0,0.80);
border: 2px solid rgba(255,255,255,0.95);
margin-left: -6px;
}
.talkie-header-recording-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.talkie-header-recording-avatar-more {
background: rgba(0,0,0,0.12);
color: rgba(0,0,0,0.74);
font-weight: 700;
}
/* Badge over avatar in main header (recording) */
.talkie-avatar-recording-badge {
position: absolute;
inset: 0;
margin: auto;
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
pointer-events: none;
animation: talkiePulse 1.3s ease-in-out infinite;
}
.talkie-listening-count {
font-weight: 700;
opacity: 0.9;
}
@keyframes talkiePulse {
0% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.04); opacity: 1; }
100% { transform: scale(1); opacity: 0.85; }
}
/* Header listening indicator (mobile-friendly) */
.talkie-header-listening-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
color: rgba(0,0,0,0.78);
font-size: 12px;
line-height: 1;
white-space: nowrap;
user-select: none;
animation: talkiePulse 1.3s ease-in-out infinite;
}
/* Bigger headphone icon in header badge */
.talkie-header-listening-ico {
width: var(--talkie-header-presence-ico-size, 25px);
height: var(--talkie-header-presence-ico-size, 25px);
font-size: 16px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-header-listening-avatars {
display: inline-flex;
align-items: center;
gap: 4px;
}
.talkie-header-listening-avatar {
width: var(--talkie-header-presence-avatar-size, 25px);
height: var(--talkie-header-presence-avatar-size, 25px);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
background: rgba(0,0,0,0.16);
color: #fff;
overflow: hidden;
}
.talkie-header-listening-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.talkie-header-listening-avatar-more {
background: rgba(0,0,0,0.12);
color: rgba(0,0,0,0.74);
font-weight: 700;
}
.talkie-header-listening-count {
font-weight: 700;
}
/* Conversation list listening avatars (right pill) */
.talkie-listening-avatars {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
}
.talkie-listening-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
line-height: 1;
background: rgba(0,0,0,0.16);
color: #fff;
overflow: hidden;
}
.talkie-listening-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.talkie-listening-avatar-more {
background: rgba(0,0,0,0.12);
color: rgba(0,0,0,0.74);
font-weight: 700;
}
/* Badge over avatar in main header */
/* --- Fix: center avatar activity badges (1-1 + groups) --- */
.talkie-avatar-recording-badge,
.talkie-avatar-listening-badge{
position: absolute;
inset: 0;
margin: auto;
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
pointer-events: none;
line-height: 0;
}
.talkie-avatar-recording-badge{ animation: talkiePulse 1.3s ease-in-out infinite; }
.talkie-avatar-listening-badge{ animation: talkiePulse 1.3s ease-in-out infinite; }
.talkie-avatar-has-badge {
position: relative;
/* Keep the avatar perfectly round. We place the badge *inside* the circle
so we don't need overflow: visible (which would break the radius). */
overflow: hidden;
}
.talkie-avatar-listening-badge {
position: absolute;
inset: 0;
margin: auto;
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
pointer-events: none;
animation: talkiePulse 1.3s ease-in-out infinite;
}
/* Sur les écrans tactiles, on ne montre pas l'action au simple hover */
@media (hover: none) {
.talkie-conversation-actions {
opacity: 0;
}
.talkie-conversation-actions.talkie-actions-visible {
opacity: 1;
transform: translateX(0);
}
}
.talkie-conversation-delete svg.talkie-icon-trash {
width: 16px;
height: 16px;
display: block;
}
/* Bouton d'enregistrement avec icône de talkie */
#talkie-record-btn {
position: relative;
padding-left: 52px;
}
#talkie-record-btn::before {
content: '';
position: absolute;
left: var(--talkie-talkknob-left, 20px);
top: var(--talkie-talkknob-top, 50%);
transform: var(--talkie-talkknob-transform, translateY(-50%));
width: var(--talkie-talkknob-width, 22px);
height: var(--talkie-talkknob-height, 22px);
border-radius: var(--talkie-talkknob-radius, 999px);
/* Idle: red indicator (themeable color or image) */
background-color: var(--talkie-talkknob-bg-idle, #ef4444);
background-image: var(--talkie-talkknob-image-idle, none);
background-size: var(--talkie-talkknob-bg-size, cover);
background-repeat: var(--talkie-talkknob-bg-repeat, no-repeat);
background-position: var(--talkie-talkknob-bg-position, center center);
border: 2px solid rgba(255,255,255,0.9);
box-shadow: var(--talkie-talkknob-box-shadow, 0 0 0 1px rgba(0,0,0,0.06), 0 6px 14px rgba(0,0,0,0.18));
}
/* Pressed: green indicator */
#talkie-record-btn.is-recording::before {
background-color: var(--talkie-talkknob-bg-active, #22c55e);
background-image: var(--talkie-talkknob-image-active, none);
}
.talkie-record-label {
color: var(--talkie-talklabel-color, inherit);
font-size: var(--talkie-talklabel-font-size, 16px);
font-weight: var(--talkie-talklabel-font-weight, 600);
}
/* Tap-to-toggle mode: show a small "tap to stop" hint while recording */
#talkie-record-btn.is-tap-mode{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
#talkie-record-btn.is-tap-mode .talkie-record-label{
font-size: 12px;
opacity: .92;
line-height: 1.1;
}
/* Version mobile : bouton fixé en bas de l'écran */
@media (max-width: 650px) {
.talkie-main-footer {
position: fixed;
bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
left: 0;
right: 0;
max-width: 960px;
margin: 0 auto;
background-color: var(--talkie-main-bg-color, #ffffff);
border-top: 1px solid #f0f0f0;
z-index: 20;
}
.talkie-main-header-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.talkie-back-button {
display: none;
border: none;
background: var(--talkie-conversation-hover-bg, #fff3e0);
padding: 0;
margin-right: 8px;
width: 32px;
height: 32px;
border-radius: 999px;
cursor: pointer;
color: var(--talkie-modal-close-color, var(--talkie-primary, #ff9800));
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.talkie-back-button:hover {
background: #ffe0b2;
box-shadow: 0 2px 6px rgba(0,0,0,0.16);
transform: translateY(-1px);
}
.talkie-back-button:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
.talkie-back-button:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 2px;
}
.talkie-back-icon {
font-size: 18px;
line-height: 1;
}
/* Liste des contacts utilisés dans le modal "Nouvelle discussion" */
.talkie-used-contacts-toggle {
margin-top: 10px;
width: 100%;
justify-content: center;
}
.talkie-used-contacts-list {
margin-top: 8px;
display: block;
max-height: 220px;
overflow-y: auto;
}
.talkie-used-contact-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
font-size: 13px;
border-radius: 10px;
border: 1px solid var(--talkie-conversation-active-bg, #ffe0b2);
background: var(--talkie-modal-bg-color, #fffaf2);
cursor: pointer;
width: 100%;
box-sizing: border-box;
margin-bottom: 6px;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.talkie-used-contact-pill:hover {
background: var(--talkie-conversation-hover-bg, #fff3e0);
border-color: var(--talkie-primary-hover, #ffcc80);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.talkie-used-contact-pill-label {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.talkie-used-contact-pill-plus {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid var(--talkie-primary-hover, #ffb74d);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
background: var(--talkie-primary, #ff9800);
color: #ffffff;
}
.talkie-used-contact-pill-plus::before {
content: '+';
}
.talkie-used-contact-pill:hover {
background: #efefef;
}
.talkie-main-body {
padding-bottom: 90px;
}
}
/* Switch type iOS pour les notifications */
.talkie-switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
flex-shrink: 0;
}
.talkie-switch input {
opacity: 0;
width: 0;
height: 0;
}
.talkie-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--talkie-switch-off-bg, #d0d4dc);
border-radius: 999px;
transition: background 0.2s ease;
}
.talkie-switch-slider:before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 3px;
top: 3px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.20);
transition: transform 0.2s ease;
}
.talkie-switch input:checked + .talkie-switch-slider {
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
}
.talkie-switch input:checked + .talkie-switch-slider:before {
transform: translateX(20px);
}
/* Profil - layout plus aéré */
.talkie-modal-profile {
max-width: 420px;
width: 100%;
padding: 24px 22px 18px;
display: flex;
flex-direction: column;
gap: 18px;
}
.talkie-profile-preview {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.talkie-profile-preview-avatar {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--talkie-modal-input-bg, rgba(0,0,0,0.06));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.talkie-profile-preview-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Champ pseudo */
#talkie-profile-name.talkie-modal-input {
margin-top: 4px;
margin-bottom: 4px;
}
/* Ligne notifications : texte à gauche, switch à droite */
.talkie-profile-notif-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}
.talkie-profile-notif-text {
font-size: 14px;
color: var(--talkie-modal-text, var(--talkie-text-color, #333));
}
/* Small inline action link inside profile modal (e.g. plugin config) */
.talkie-profile-inline-link {
border: none;
background: transparent;
padding: 0;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: #1a73e8;
cursor: pointer;
}
/* Plugin status badge (Profile > Plugins) */
.talkie-plugin-badge{
display: inline-block;
font-size: 12px;
line-height: 1.25;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
/* Keep badge text readable in all themes (badge background is light). */
color: #000;
}
/* Collapsible panel (animated open/close) */
.talkie-collapsible{
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-4px);
transition: max-height 260ms ease, opacity 200ms ease, transform 200ms ease;
will-change: max-height, opacity, transform;
}
.talkie-collapsible.is-open{
max-height: 900px;
opacity: 1;
transform: translateY(0);
}
/* Boutons en bas du popup */
.talkie-modal-profile .talkie-modal-actions {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
margin-top: 24px;
}
/* ===== Profile: section navigation + subpages ===== */
.talkie-modal-profile{
/* The profile editor is rendered inside a white modal.
Keep text readable even when the global theme uses light text colors. */
--talkie-profile-text: #111;
--talkie-profile-subtext: #666;
--talkie-profile-divider: rgba(0,0,0,0.10);
--talkie-profile-muted-bg: rgba(0,0,0,0.06);
}
.talkie-profile-pages{
position: relative;
overflow: hidden;
min-height: 320px; /* fallback if JS cannot measure */
}
.talkie-profile-page{
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 240ms ease;
will-change: transform;
}
/* Page header (Back + title) */
.talkie-profile-page-head{
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0 14px;
margin-bottom: 6px;
}
.talkie-profile-page-back{
border: none;
background: var(--talkie-profile-muted-bg);
border: 1px solid var(--talkie-profile-divider);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 999px;
cursor: pointer;
color: var(--talkie-accent, #ff9800);
}
.talkie-profile-page-back:hover{ filter: brightness(0.97); }
.talkie-profile-page-title{
font-size: 14px;
font-weight: 800;
color: var(--talkie-profile-text);
}
/* Clickable section row */
.talkie-profile-nav-row{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 2px;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
margin: 10px 0;
box-shadow: 0 1px 0 var(--talkie-profile-divider);
}
.talkie-profile-nav-row:hover{ background: rgba(0,0,0,0.02); }
.talkie-profile-nav-text{ display:flex; flex-direction: column; gap: 2px; text-align: left; }
.talkie-profile-nav-title{ font-size: 14px; font-weight: 700; color: var(--talkie-profile-text); }
.talkie-profile-nav-sub{ font-size: 12px; color: var(--talkie-profile-subtext); }
.talkie-profile-nav-chevron{ width: 20px; height: 20px; flex: 0 0 auto; color: var(--talkie-accent, #ff9800); }
/* Chevron/back icons share the same flat modern style as other Talkie icons */
.talkie-profile-icon{ width: 20px; height: 20px; display: inline-block; color: currentColor; }
/* Make the back arrow easier to hit/read */
.talkie-profile-page-back .talkie-profile-icon{ width: 22px; height: 22px; }
/* Override play icon style: rond, sans carré bleu agressif */
.talkie-message-play-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--talkie-playpause-btn-width, 40px);
height: var(--talkie-playpause-btn-height, 40px);
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.14);
background: rgba(255, 255, 255, 0.4);
margin-right: 8px;
font-size: 12px;
flex-shrink: 0;
}
/* Lorsque le message est en lecture, on renforce légèrement la bulle */
.talkie-message-bubble.playing {
transform: scale(1.02);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
@media (max-width: 650px) {
/* On mobile, the app must be true fullscreen, regardless of the page container */
body {
margin: 0;
padding: 0;
}
#talkie-root {
position: fixed;
inset: 0;
width: 100vw;
height: var(--vvh, 100vh);
max-width: none;
max-height: none;
margin: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
.talkie-app {
flex-direction: column;
align-items: stretch;
}
.talkie-sidebar {
width: 100%;
min-width: 0;
max-width: none;
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
.talkie-main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Mobile should be true fullscreen (no centered card) */
max-width: none;
margin: 0;
background-color: var(--talkie-main-bg-color, #ffffff);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s ease-out;
z-index: 30;
border-radius: 0;
/* On mobile, keep the panel clean and avoid any visual "edge" artifacts */
box-shadow: none;
}
.talkie-main.talkie-main-visible {
transform: translateX(0);
}
.talkie-main.talkie-main-hidden {
transform: translateX(100%);
}
.talkie-main-header {
padding-left: 12px;
}
.talkie-back-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-main-body {
padding-bottom: 96px; /* Laisse la place pour le bouton d'enregistrement */
}
.talkie-main-footer {
position: fixed;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom, 0);
max-width: none;
margin: 0;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--talkie-border, #f0f0f0);
background-color: var(--talkie-main-bg-color, #ffffff);
background-image: var(--talkie-main-bg-image, none);
background-size: var(--talkie-main-bg-size, cover);
background-repeat: var(--talkie-main-bg-repeat, no-repeat);
background-position: var(--talkie-main-bg-position, center center);
z-index: 40;
}
.talkie-main-footer button {
width: 100%;
}
}
/* ===== Group conversations ===== */
.talkie-group-toggle {
margin-top: 10px;
width: 100%;
justify-content: center;
}
.talkie-group-config {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(0,0,0,0.06);
display: none;
}
.talkie-group-summary {
margin-top: 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 152, 0, 0.08);
}
.talkie-group-summary-name {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
background: #f57c00;
color: #ffffff;
font-weight: 600;
font-size: 13px;
margin: 0 auto 6px auto;
}
.talkie-group-summary-members {
font-size: 12px;
color: #444;
margin-top: 4px;
display: flex;
flex-wrap: wrap;
}
/* New conversation modal: selected members panel (more explicit + interactive) */
.talkie-group-summary-members-wrap{
position: relative;
padding: 12px;
margin-left: auto;
margin-right: auto;
max-width: 350px;
border-radius: 15px;
background-color: var(--talkie-conversation-hover-bg, #f7f7f6);
}
.talkie-group-summary-members-header{
display:flex;
align-items:center;
gap:8px;
margin-bottom: 10px;
}
.talkie-group-summary-members-header-icon{
width: 35px;
height: 35px;
border-radius: 999px;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
display:flex;
align-items:center;
justify-content:center;
}
.talkie-group-summary-members-header-icon svg{
width:18px;
height:18px;
}
.talkie-group-summary-members-header-text{
font-weight:700;
font-size: 13px;
}
.talkie-group-summary-tag-avatar{
width: 35px;
height: 35px;
border-radius: 999px;
overflow:hidden;
background: rgba(0,0,0,0.08);
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size: 13px;
flex-shrink:0;
}
.talkie-group-summary-tag-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.talkie-group-summary-members-wrap.talkie-appear{
animation: talkie-pop-in .22s ease-out;
}
/* Premium pill animations (add/remove members) */
.talkie-group-summary-tag.talkie-pill-enter{
animation: talkiePillEnter 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.talkie-group-summary-tag.talkie-pill-magic{
position: relative;
animation: talkiePillMagic 520ms ease-out;
}
.talkie-group-summary-tag.talkie-pill-magic::after{
content: '';
position: absolute;
inset: -6px;
border-radius: 999px;
pointer-events: none;
opacity: 0;
animation: talkieSparkleRing 520ms ease-out;
}
.talkie-group-summary-tag.talkie-pill-leave{
opacity: 0;
transform: translateY(4px) scale(0.94);
transition: opacity .26s ease, transform .26s ease;
}
@keyframes talkiePillEnter{
0% { transform: translateY(6px) scale(0.96); opacity: 0.001; box-shadow: 0 0 0 rgba(0,0,0,0); }
55% { opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); }
}
/* "Magic" shimmer when a member is added */
@keyframes talkiePillMagic{
0%{ filter: brightness(1); }
25%{ filter: brightness(1.12); }
55%{ filter: brightness(1.06); }
100%{ filter: brightness(1); }
}
@keyframes talkieSparkleRing{
0%{ opacity: 0; box-shadow: 0 0 0 rgba(255, 193, 102, 0.0); transform: scale(0.94); }
35%{ opacity: 1; box-shadow: 0 0 0 8px rgba(255, 193, 102, 0.22); transform: scale(1.02); }
100%{ opacity: 0; box-shadow: 0 0 0 18px rgba(255, 193, 102, 0.0); transform: scale(1.06); }
}
@keyframes talkie-pop-in{
from{ opacity:0; transform: translateY(4px) scale(0.98); }
to{ opacity:1; transform: translateY(0) scale(1); }
}
.talkie-group-hint {
margin-top: 6px;
font-size: 12px;
color: #777;
}
.talkie-group-avatar {
background: var(--talkie-switch-checked-bg, var(--talkie-primary, #ff9800));
color: #fff;
font-weight: 600;
}
.talkie-group-bubbles,
.talkie-group-bubbles-header {
padding: 2px;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
position: relative;
}
.talkie-group-bubbles::after,
.talkie-group-bubbles-header::after {
content: none;
}
.talkie-group-bubble {
width: var(--talkie-group-bubble-size, 22px);
height: var(--talkie-group-bubble-size, 22px);
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
overflow: hidden;
background: var(--talkie-group-bubble-bg, #ffe0b2);
color: var(--talkie-group-bubble-color, #ff9800) !important;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.talkie-group-bubble .talkie-avatar-photo{
width: 100%;
height: 100%;
display: block;
}
.talkie-main-header .talkie-group-bubble .talkie-avatar-photo{
width: 100%;
height: 100%;
display: block;
}
/* Presence badge on each participant bubble in group header (mic/headphones) */
.talkie-group-bubble-badge{
position: absolute;
right: -4px;
bottom: -4px;
width: 14px;
height: 14px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.talkie-group-bubble-badge svg,
.talkie-group-bubble-badge img{
width: 10px;
height: 10px;
display: block;
}
.talkie-group-bubble.is-online{
box-shadow: var(--talkie-group-bubble-online-shadow, none);
border: var(--talkie-group-bubble-online-border-width, 2px) solid var(--talkie-group-bubble-online-border-color, #2ecc71);
border-radius: var(--talkie-group-bubble-online-radius, 7px);
}
.talkie-group-bubble.is-online.has-photo img{
border-radius: var(--talkie-group-bubble-online-radius, 7px);
}
.talkie-group-bubble.has-photo{background: var(--talkie-modal-bg-color, #fff);}
.talkie-group-bubble.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--talkie-avatar-radius, 999px);
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
}
.talkie-group-header-name {
margin-left: 8px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 17px;
background: var(--talkie-group-header-name-bg, #d39e4a);
color: var(--talkie-group-header-name-color, #ffffff);
cursor: pointer;
padding: 2px 8px;
border-radius: 8px;
}
/* Liste d'emails manquants dans la modale multi-contact */
.talkie-missing-list {
margin: 8px 0 0;
padding-left: 20px;
font-size: 13px;
}
.talkie-modal-actions-split {
display: flex;
justify-content: space-between;
gap: 10px;
}
/* Corbeille sur les messages audio (suppression) */
.talkie-message-delete {
position: absolute;
z-index: 2;
top: 0px;
right: -15px;
opacity: 0;
pointer-events: none;
transform: scale(0.6);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.talkie-message-delete--visible {
width: 50px;
height: 50px;
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
/* Contraste renforcé pour les bulles de groupe dans le header */
.talkie-main-header .talkie-group-bubble {
width: var(--talkie-group-bubble-header-size, var(--talkie-group-bubble-size, 35px));
height: var(--talkie-group-bubble-header-size, var(--talkie-group-bubble-size, 35px));
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
background: var(--talkie-group-bubble-bg, rgba(255, 152, 0, 0.18));
color: var(--talkie-group-bubble-color, var(--talkie-primary, #ff9800));
font-size: 15px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
overflow: hidden;
}
.talkie-main-header .talkie-group-bubble img {
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Pseudo / avatar de l'expéditeur dans les messages de groupe */
.talkie-message-sender-name {
margin-top: 1px;
font-size: 11px;
opacity: 0.8;
flex-basis: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
padding-right: 2px;
padding-right:0px;
}
.talkie-message-sender-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
overflow: hidden;
margin-left: -8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.talkie-message-sender-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.talkie-group-header-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
}
.talkie-group-bubbles-header {
justify-content: center;
}
.talkie-group-header-name {
margin-left: 0;
padding: 6px 12px;
border-radius: 999px;
background: var(--talkie-group-header-name-bg, #fff3e0);
color: var(--talkie-group-header-name-color, #111111);
border: 1px solid rgba(255, 152, 0, 0.35);
font-size: 16px;
font-weight: 600;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
}
.talkie-group-header-edit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
opacity: 1;
transform: translateY(1px);
transition: opacity 160ms ease;
}
.talkie-modal-input-row {
display: flex;
align-items: stretch;
gap: 8px;
}
.talkie-modal-input-row .talkie-modal-input {
flex: 1;
margin-bottom: 0;
}
.talkie-modal-input-row .talkie-add-group-member {
flex-shrink: 0;
white-space: nowrap;
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
.talkie-modal-actions .talkie-primary-button {
width: auto;
padding: 10px 18px;
}
.talkie-modal-actions .talkie-outline-button {
width: auto;
padding: 8px 16px;
}
.talkie-group-summary-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--talkie-primary, #ff9800);
background: var(--talkie-conversation-hover-bg, #fff3e0);
color: var(--talkie-modal-close-color, var(--talkie-primary, #ff9800));
font-size: 12px;
margin: 3px 4px 3px 0;
cursor: pointer;
}
/* Selected members container: center + wrap nicely (used in group creation + add-member modal) */
.talkie-group-summary-tags{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:10px;
margin-top:10px;
}
.talkie-group-summary-tag-remove {
display: none;
margin-left: 4px;
width: 25px;
height: 25px;
border-radius: 999px;
background: #ff5252;
color: #ffffff;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-group-summary-tag-remove::before {
content: '×';
}
.talkie-group-summary-tag.show-remove .talkie-group-summary-tag-remove {
display: inline-flex;
}
.talkie-switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
}
/* ---------------------------------------------
Home / empty state card (premium)
---------------------------------------------- */
.talkie-home-card-wrap{
/* Use available panel height (prevents needing to scroll to see the card) */
flex: 1;
min-height: 0;
height: 100%;
display:flex;
align-items:center;
justify-content:center;
padding: 18px;
}
.talkie-home-card{
width: min(560px, 100%);
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
padding: 20px 18px;
position: relative;
}
.talkie-home-card::before{
/* Removed (user preference): no gradient accent */
content: none;
}
.talkie-home-hero{
display:flex;
gap: 12px;
align-items:center;
padding-left: 10px;
}
.talkie-home-ico{
width: 44px;
height: 44px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,112,192,0.10);
border: 1px solid rgba(0,112,192,0.18);
font-size: 20px;
}
.talkie-home-card-title{
font-size: 18px;
font-weight: 700;
color: #111827;
line-height: 1.25;
}
.talkie-home-card-subtitle{
margin-top: 2px;
font-size: 13px;
color: rgba(17,24,39,0.68);
}
.talkie-home-card-text{
padding-left: 10px;
margin-top: 14px;
font-size: 14px;
color: rgba(17,24,39,0.82);
}
.talkie-home-badges{
padding-left: 10px;
margin-top: 12px;
display:flex;
gap: 10px;
flex-wrap: wrap;
}
.talkie-home-badge{
display:flex;
align-items:center;
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(17,24,39,0.04);
border: 1px solid rgba(17,24,39,0.06);
font-size: 13px;
color: rgba(17,24,39,0.86);
}
.talkie-badge-ico{
width: 28px;
height: 28px;
border-radius: 10px;
display:flex;
align-items:center;
justify-content:center;
background: var(--talkie-invite-row-bg, rgba(0,0,0,0.04));
color: var(--talkie-invite-row-text, inherit);
}
.talkie-home-card-hint{
padding-left: 10px;
margin-top: 14px;
font-size: 13px;
color: rgba(17,24,39,0.66);
}
/* Subtle hover (desktop) */
@media (hover:hover) {
.talkie-home-card{
transition: transform 180ms ease, box-shadow 180ms ease;
}
.talkie-home-card:hover{
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}
}
/* Fade-in animation, respects reduced motion */
.talkie-fade-in{
animation: talkieFadeIn 180ms ease-out both;
}
@keyframes talkieFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.talkie-fade-in{ animation: none; }
.talkie-home-card{ transition: none; }
}
/* Mobile info card (Mode talkie-walkie) */
#talkie-mobile-info-card.talkie-mobile-info-card{
margin-top: 10px;
padding: 12px;
border-radius: 14px;
background: #f6f7f9;
border: 1px solid rgba(0,0,0,0.06);
display: flex;
gap: 10px;
align-items: flex-start;
}
#talkie-mobile-info-card .talkie-mobile-info-ico{
font-size: 16px;
line-height: 1;
margin-top: 2px;
opacity: 0.9;
}
#talkie-mobile-info-card .talkie-mobile-info-title{
font-weight: 700;
font-size: 13px;
margin-bottom: 2px;
}
#talkie-mobile-info-card .talkie-mobile-info-body{
font-size: 12px;
color: #555;
line-height: 1.35;
}
@media (min-width: 769px){
#talkie-mobile-info-card{ display:none; }
}
/* Toast notifications */
.talkie-toast{
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
padding: 10px 14px;
border-radius: 999px;
background: rgba(20,20,20,0.92);
color: #ffffff;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 1000000;
}
.talkie-toast.is-on{
opacity: 1;
}
/* Messages skeleton while loading */
.talkie-messages-skeleton{
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 0;
}
.talkie-skel-bubble{
height: 20px;
border-radius: 16px;
max-width: 75%;
background: linear-gradient(90deg, #eeeeee, #f5f5f5, #eeeeee);
background-size: 200% 100%;
animation: talkieSkel 1.1s ease infinite;
}
.talkie-skel-bubble:nth-child(2n){
margin-left: auto;
max-width: 60%;
}
@keyframes talkieSkel{
0%{ background-position: 0 0; }
100%{ background-position: -200% 0; }
}
/* New incoming message highlight */
.talkie-message-bubble.talkie-new-bubble{
animation: talkieBubbleFlash 0.35s ease;
}
@keyframes talkieBubbleFlash{
0%{
transform: scale(1.02);
box-shadow: 0 0 0 2px rgba(255, 193, 102, 0.75);
}
100%{
transform: scale(1);
box-shadow: var(--talkie-group-bubble-online-shadow, none);
}
}
.talkie-profile-notif-title {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid orange;
width: fit-content;
margin-bottom: 3px;
}
/* Talkie responsive tweaks */
@media (max-width: 520px) {
.talkie-contact-avatar { width: 96px; height: 96px; }
.talkie-contact-name { font-size: 28px; }
.talkie-profile-preview-avatar { width: 64px; height: 64px; }
/* Keep avatar sizing/theme variables on mobile (do not hardcode px) */
.talkie-user-avatar {
width: var(--talkie-avatar-size, 60px);
height: var(--talkie-avatar-size, 60px);
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
font-size: calc(var(--talkie-avatar-size, 60px) * 0.27);
}
.talkie-conversation-name {
font-size: 20px;
font-weight: 500;
}
}
/* Mobile back icon */
.talkie-back-icon {
font-size: 18px;
line-height: 1;
font-weight: bolder;
display: inline-flex;
align-items: center;
justify-content: center;
}
.talkie-back-icon .talkie-icon {
width: 1em;
height: 1em;
display: block;
}
/* === Mobile polish v89 === */
.talkie-back-button:active,
#talkie-record-btn:active,
.talkie-scroll-bottom:active,
.talkie-contact-action-btn:active,
.talkie-primary-btn:active {
transform: scale(0.98);
}
.talkie-scroll-bottom {
position: absolute;
right: 12px;
bottom: 12px;
width: 44px;
height: 44px;
border-radius: 999px;
border: 0;
background: rgba(17,17,17,0.75);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 160ms ease, transform 160ms ease;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.talkie-scroll-bottom.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Skeleton shimmer enhancement */
.talkie-messages-skeleton .talkie-skeleton-row,
.talkie-conversation-skeleton .talkie-skeleton-line {
position: relative;
overflow: hidden;
}
.talkie-messages-skeleton .talkie-skeleton-row::after,
.talkie-conversation-skeleton .talkie-skeleton-line::after {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.08), rgba(255,255,255,0));
animation: talkie-shimmer 1.4s infinite;
}
@keyframes talkie-shimmer {
0% { left: -40%; }
100% { left: 120%; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.talkie-main,
.talkie-scroll-bottom,
.talkie-messages-skeleton .talkie-skeleton-row::after,
.talkie-conversation-skeleton .talkie-skeleton-line::after {
animation: none !important;
transition: none !important;
}
}
/* ===== Talkie UX animations (v91) ===== */
#talkie-root {
transition:
transform 260ms cubic-bezier(.4,0,.2,1),
opacity 220ms ease,
max-width 260ms cubic-bezier(.4,0,.2,1),
height 260ms cubic-bezier(.4,0,.2,1),
max-height 260ms cubic-bezier(.4,0,.2,1);
transform: scale(1);
opacity: 1;
}
/* Enter / exit cues for desktop fullscreen toggle */
body.talkie-desktop-fullscreen.talkie-desktop-enter-fullscreen #talkie-root {
transform: scale(0.985);
opacity: 0.98;
}
body.talkie-desktop-fullscreen.talkie-desktop-exit-fullscreen #talkie-root {
transform: scale(0.985);
opacity: 0.98;
}
/* Modal animations */
.talkie-modal-overlay {
opacity: 0;
transition: opacity 260ms ease;
}
.talkie-modal-overlay.is-open {
opacity: 1;
}
.talkie-modal {
opacity: 0;
transform: translateY(14px) scale(0.96);
transition:
opacity 220ms ease,
transform 260ms cubic-bezier(.4,0,.2,1);
will-change: transform, opacity;
}
.talkie-modal-overlay.is-open .talkie-modal {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
#talkie-root,
.talkie-modal-overlay,
.talkie-modal {
transition: none !important;
}
}
.talkie-group-bubbles-header {
padding: 3px;
}
/* Avatars dans la liste de contacts (popup Nouvelle discussion) */
.talkie-used-contact-pill{justify-content:flex-start;}
.talkie-used-contact-avatar{width:28px;height:28px;border-radius:999px;overflow:hidden;background:#ffe0b2;color:#ff9800;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.talkie-used-contact-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ultra-discrete onboarding bubble */
.talkie-onboard-bubble{
position: fixed;
max-width: 320px;
z-index: 1000005;
background: rgba(20,20,20,0.92);
color: #fff;
padding: 10px 12px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
font-size: 13px;
line-height: 1.3;
}
.talkie-onboard-bubble .talkie-onboard-title{
font-weight: 600;
margin-bottom: 4px;
font-size: 13px;
}
.talkie-onboard-bubble .talkie-onboard-close{
position: absolute;
top: 6px;
right: 8px;
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: rgba(255,255,255,0.85);
font-size: 18px;
line-height: 22px;
cursor: pointer;
}
.talkie-onboard-bubble .talkie-onboard-close:hover{ color: #fff; }
.talkie-onboard-bubble:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: rgba(20,20,20,0.92);
transform: rotate(45deg);
bottom: -5px;
left: var(--tw-after-left-px, 50%);
margin-left: -5px;
}
@media (max-width: 420px){
.talkie-onboard-bubble{ max-width: 92vw; }
}
/* Guided tour (multi-step onboarding) */
.talkie-tour-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1000003;
}
.talkie-tour-highlight{
position: absolute;
border-radius: 18px;
box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
outline: 2px solid rgba(255,193,102,.9);
z-index: 1000004;
pointer-events: none;
}
.talkie-tour-bubble{
position: absolute;
width: min(420px, calc(100vw - 24px));
background: var(--talkie-modal-bg-color, #fff);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(0,0,0,.25);
z-index: 1000005;
padding: 14px 14px 12px;
max-height: calc(100vh - 24px);
overflow: auto;
}
/* Mobile: keep bubbles comfortably inside the viewport (requested) */
@media (max-width: 650px){
.talkie-tour-bubble{
/* Requested: keep the onboarding bubble ~90% wide on mobile */
width: min(420px, 90vw);
}
.talkie-tour-highlight{
/* Requested: highlight should not feel full-width on mobile */
max-width: 97vw;
}
}
.talkie-tour-close{
position:absolute;
top:8px; right:10px;
width: 30px; height: 30px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,.06);
font-size: 18px;
cursor: pointer;
}
.talkie-tour-title{ font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.talkie-tour-text{ font-size: 14px; line-height: 1.35; color: #222; }
.talkie-tour-ico{ font-size: 18px; vertical-align: -2px; margin-right: 4px; }
.talkie-tour-actions{
display:flex;
gap: 8px;
margin-top: 12px;
align-items:center;
}
.talkie-tour-spacer{ flex:1; }
.talkie-tour-btn{
border: 1px solid #ddd;
background: var(--talkie-modal-bg-color, #fff);
border-radius: 12px;
padding: 8px 10px;
font-size: 13px;
cursor: pointer;
}
.talkie-tour-btn.talkie-tour-next{
border-color: #ffc166;
background: var(--talkie-primary, #ffc166);
color: #1a1a1a;
font-weight: 600;
}
.talkie-tour-btn.talkie-tour-skip{
opacity: .85;
}
.talkie-tour-pill-ico{ font-size: 16px; margin-right: 4px; }
.talkie-tour-demo-item{ opacity: .98; }
/* v1.11.40 — group sender meta: avatar placed before name (align nicely) */
.talkie-message-sender-meta {
display: inline-flex;
align-items: center;
gap: 6px;
}
.talkie-message-sender-meta .talkie-message-sender-avatar {
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
overflow: visible;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--talkie-avatar-bubble-border, 1px solid orange);
}
.talkie-message-sender-meta .talkie-message-sender-avatar .talkie-avatar-photo{
width: var(--talkie-avatar-bubble-size, 25px);
height: var(--talkie-avatar-bubble-size, 25px);
border-radius: var(--talkie-group-bubble-radius, var(--talkie-avatar-radius, 999px));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.talkie-message-sender-meta .talkie-message-sender-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.talkie-message-sender-meta .talkie-message-sender-name {
display: inline-block;
line-height: 1.1;
}
/* v1.11.43 — delete bubble “trash toss” animation */
.talkie-message-bubble.talkie-bubble-deleting {
position: relative;
will-change: transform, opacity, filter;
pointer-events: none;
}
.talkie-message-bubble.talkie-bubble-deleting .talkie-trash-hint {
position: absolute;
right: 8px;
bottom: 6px;
font-size: 14px;
line-height: 1;
opacity: 0;
transform: translateY(6px) scale(0.9);
animation: talkieTrashHintIn 220ms ease-out forwards;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
@keyframes talkieTrashHintIn {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.talkie-message-bubble.talkie-bubble-deleting {
animation: talkieBubbleTrashToss 320ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes talkieBubbleTrashToss {
0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
35% { transform: translateY(-2px) scale(0.985); opacity: 0.98; }
100% { transform: translateY(14px) rotate(3deg) scale(0.86); opacity: 0; filter: blur(0.6px); }
}
/* =========================================================
Talkie — Scrollbars (subtle, theme-friendly)
- Removes up/down buttons (where applicable)
- Keeps scrollbar thin and non-intrusive
========================================================= */
:root {
--talkie-scrollbar-thumb: rgba(120, 120, 120, 0.35);
--talkie-scrollbar-thumb-hover: rgba(120, 120, 120, 0.55);
--talkie-scrollbar-track: transparent;
}
/* Firefox */
.talkie-app,
.talkie-app * {
scrollbar-width: thin;
scrollbar-color: var(--talkie-scrollbar-thumb) var(--talkie-scrollbar-track);
}
/* Chromium / Edge / Safari */
.talkie-app ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.talkie-app ::-webkit-scrollbar-track {
background: var(--talkie-scrollbar-track);
}
.talkie-app ::-webkit-scrollbar-thumb {
background-color: var(--talkie-scrollbar-thumb);
border-radius: 999px;
border: 3px solid var(--talkie-scrollbar-track);
}
.talkie-app ::-webkit-scrollbar-thumb:hover {
background-color: var(--talkie-scrollbar-thumb-hover);
}
/* Try to remove scroll arrows/buttons when the UA shows them */
.talkie-app ::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
/*
* Scrollbars
* - Mobile/touch: keep native behavior with no visible scrollbar.
* - Desktop (mouse/trackpad): show a subtle scrollbar that matches the theme,
* and remove any up/down arrow buttons.
*/
/* Default (mobile/touch-first): hide the scrollbar visuals but keep scrolling */
.talkie-conversation-list,
.talkie-main-body,
.talkie-modal-profile .talkie-modal-scroll {
-ms-overflow-style: none; /* IE/old Edge */
scrollbar-width: none; /* Firefox */
}
.talkie-conversation-list::-webkit-scrollbar,
.talkie-main-body::-webkit-scrollbar,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Desktop-only scrollbar styling */
@media (hover: hover) and (pointer: fine) {
:root {
/* Theme-matching scrollbar (orange) */
--talkie-scroll-thumb: rgba(255, 193, 102, 0.55); /* #ffc166 */
--talkie-scroll-thumb-hover: rgba(255, 193, 102, 0.85);
}
.talkie-conversation-list,
.talkie-main-body,
.talkie-modal-profile .talkie-modal-scroll {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--talkie-scroll-thumb) transparent;
}
.talkie-conversation-list::-webkit-scrollbar,
.talkie-main-body::-webkit-scrollbar,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.talkie-conversation-list::-webkit-scrollbar-track,
.talkie-main-body::-webkit-scrollbar-track,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-track {
background: transparent;
}
.talkie-conversation-list::-webkit-scrollbar-thumb,
.talkie-main-body::-webkit-scrollbar-thumb,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-thumb {
background-color: var(--talkie-scroll-thumb);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.talkie-conversation-list::-webkit-scrollbar-thumb:hover,
.talkie-main-body::-webkit-scrollbar-thumb:hover,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--talkie-scroll-thumb-hover);
}
/* Remove scroll arrows/buttons when the UA shows them */
.talkie-conversation-list::-webkit-scrollbar-button,
.talkie-main-body::-webkit-scrollbar-button,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
border: 0 !important;
}
/* Extra hardening for Chromium/Edge variants that still render arrow buttons */
.talkie-conversation-list::-webkit-scrollbar-button:single-button,
.talkie-main-body::-webkit-scrollbar-button:single-button,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:single-button,
.talkie-conversation-list::-webkit-scrollbar-button:increment,
.talkie-main-body::-webkit-scrollbar-button:increment,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:increment,
.talkie-conversation-list::-webkit-scrollbar-button:decrement,
.talkie-main-body::-webkit-scrollbar-button:decrement,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:decrement,
.talkie-conversation-list::-webkit-scrollbar-button:vertical:increment,
.talkie-main-body::-webkit-scrollbar-button:vertical:increment,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:vertical:increment,
.talkie-conversation-list::-webkit-scrollbar-button:vertical:decrement,
.talkie-main-body::-webkit-scrollbar-button:vertical:decrement,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:vertical:decrement,
.talkie-conversation-list::-webkit-scrollbar-button:start:decrement,
.talkie-main-body::-webkit-scrollbar-button:start:decrement,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:start:decrement,
.talkie-conversation-list::-webkit-scrollbar-button:end:increment,
.talkie-main-body::-webkit-scrollbar-button:end:increment,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:end:increment,
.talkie-conversation-list::-webkit-scrollbar-button:start:increment,
.talkie-main-body::-webkit-scrollbar-button:start:increment,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:start:increment,
.talkie-conversation-list::-webkit-scrollbar-button:end:decrement,
.talkie-main-body::-webkit-scrollbar-button:end:decrement,
.talkie-modal-profile .talkie-modal-scroll::-webkit-scrollbar-button:end:decrement {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
}
/* ===== Waveform (UX) ===== */
.talkie-audio-waveform{
position: relative;
display:flex;
align-items:stretch;
width:100%;
max-width:100%;
flex:1 1 auto;
gap: 1px;
/* Slightly taller waveform to make speech undulations more readable */
height: 28px;
margin-top:6px;
margin-bottom:2px;
user-select:none;
cursor:pointer;
opacity:0.98;
/* Theme-aware waveform color (overridden per bubble type below) */
--talkie-wave-color: currentColor;
/* Active/played color should match "message lu" (read receipt) */
--talkie-wave-played-color: var(--talkie-status-read-on, var(--talkie-status-delivered-on, #2bbf5a));
}
/* Waveform should be allowed to use the available bubble width (theme-safe). */
.talkie-audio-waveform .talkie-wave-bar{
flex:1 1 0;
display:block;
position:relative;
height:100%;
z-index: 1;
}
/* Centered waveform bar (WhatsApp-like): draw around a midline */
.talkie-audio-waveform .talkie-wave-bar::before{
content:'';
position:absolute;
left:0;
right:0;
top:50%;
height: var(--talkie-wave-h, 30%);
transform: translateY(-50%);
background: var(--talkie-wave-color);
/* Base opacity kept subtle; played state becomes fully opaque */
opacity: 0.34;
border-radius: 1.5px;
transition: opacity 120ms linear;
}
.talkie-audio-waveform .talkie-wave-bar.is-played::before{
opacity:1;
background: var(--talkie-wave-played-color);
}
/* Playhead (subtle vertical line) */
.talkie-audio-waveform .talkie-wave-playhead{
position: absolute;
top: 0;
bottom: 0;
left: var(--talkie-wave-x, 0%);
width: 2px;
transform: translateX(-1px);
background: var(--talkie-wave-played-color);
opacity: 0.35;
border-radius: 999px;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
transition: opacity 140ms ease;
}
.talkie-message-bubble.playing .talkie-audio-waveform .talkie-wave-playhead{
opacity: 0.85;
}
/* Buffering indicator inside waveform (Safari/slow networks can emit brief waiting/stall) */
.talkie-audio-waveform .talkie-wave-buffering{
position:absolute;
right:6px;
top:50%;
width:14px;
height:14px;
transform: translateY(-50%);
opacity:0;
pointer-events:none;
z-index:3;
}
.talkie-audio-waveform .talkie-wave-buffering::before{
content:'';
position:absolute;
inset:0;
border-radius:50%;
border:2px solid currentColor;
border-top-color: transparent;
opacity:0.55;
animation: talkieSpin 0.7s linear infinite;
}
.talkie-message-bubble.buffering .talkie-audio-waveform .talkie-wave-buffering{
opacity:0.9;
}
@keyframes talkieSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Placeholder (before real peaks are built) */
.talkie-audio-waveform[data-built="0"] .talkie-wave-bar{
/* keep the container visible but subtler before decoding */
}
.talkie-audio-waveform[data-built="0"] .talkie-wave-bar::before{
opacity:0.22;
}
.talkie-message-bubble.from-me .talkie-audio-waveform{
--talkie-wave-color: var(--talkie-audio-bars-me, currentColor);
}
.talkie-message-bubble.from-them .talkie-audio-waveform{
--talkie-wave-color: var(--talkie-audio-bars-them, currentColor);
opacity:0.95;
}
/* Invitations thread (virtual conversation) */
.talkie-invites-thread{
display:flex;
flex-direction:column;
gap:10px;
padding:10px 8px;
}
.talkie-invites-loading,
.talkie-invites-empty{
padding:14px 10px;
opacity:0.85;
font-size:14px;
}
.talkie-invite-row{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border-radius:14px;
background: var(--talkie-invite-row-bg, rgba(0,0,0,0.04));
color: var(--talkie-invite-row-text, inherit);
}
/* Differentiate received vs sent invites (theme-token driven)
- Fallbacks remain the generic invite tokens to avoid breaking older themes.
*/
.talkie-invite-row.is-in{
background: var(--talkie-invite-row-bg-in, var(--talkie-invite-row-bg, rgba(0,0,0,0.04)));
color: var(--talkie-invite-row-text-in, var(--talkie-invite-row-text, inherit));
}
.talkie-invite-row.is-out{
background: var(--talkie-invite-row-bg-out, var(--talkie-invite-row-bg, rgba(0,0,0,0.04)));
color: var(--talkie-invite-row-text-out, var(--talkie-invite-row-text, inherit));
}
.talkie-invite-avatar{
width:40px;
height:40px;
flex:0 0 40px;
border-radius:999px;
overflow:hidden;
background: rgba(0,0,0,0.08);
}
.talkie-invite-avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.talkie-invite-text{
flex:1 1 auto;
min-width:0;
}
.talkie-invite-title{
font-size:14px;
font-weight:600;
line-height:1.2;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.talkie-invite-sub{
margin-top:2px;
font-size:12px;
opacity:0.75;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.talkie-invite-actions{
display:flex;
gap:18px;
flex:0 0 auto;
}
.talkie-invite-btn{
width:46px;
height:38px;
border:0;
border-radius:12px;
cursor:pointer;
font-size:16px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
}
.talkie-invite-btn.accept{
background: var(--talkie-invite-accept-bg, rgba(0, 160, 80, 0.18));
color: var(--talkie-invite-accept-fg, inherit);
}
.talkie-invite-btn.reject{
background: var(--talkie-invite-reject-bg, rgba(220, 40, 40, 0.18));
color: var(--talkie-invite-reject-fg, inherit);
}
/* Outbox: delete (cancel) a pending invite */
.talkie-invite-btn.cancel{
background: rgba(220, 40, 40, 0.95);
color: #ffffff;
border-radius: 999px;
width: 38px;
height: 38px;
}
.talkie-invite-btn.cancel svg{
display:block;
}
.talkie-invite-btn:disabled{
opacity:0.5;
cursor:default;
}
/* Outbox cancel animation */
.talkie-invite-row.talkie-invite-row-removing{
opacity:0;
transform: translateX(14px);
transition: opacity 180ms ease, transform 180ms ease;
}
/* System lines inside a conversation thread */
.talkie-system-row{
display:flex;
justify-content:center;
padding: 10px 8px;
}
.talkie-system-pill{
display:inline-flex;
align-items:center;
gap:10px;
padding: 8px 14px;
border-radius: 999px;
background: var(--talkie-system-pill-bg, rgba(0,0,0,0.05));
color: var(--talkie-system-pill-text, rgba(0,0,0,0.72));
font-size: 13px;
line-height: 1.2;
max-width: 92%;
}
.talkie-system-avatar{
width: 22px;
height: 22px;
border-radius: 999px;
object-fit: cover;
}
.talkie-system-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.talkie-invites-section{
margin-top:6px;
padding:6px 8px 0 8px;
font-size:12px;
font-weight:700;
letter-spacing:0.2px;
opacity:0.75;
}
/* Invitations conversation row in list */
.talkie-conversation-item.talkie-invites-thread-item{
position:relative;
overflow:hidden;
/* Smooth collapse/expand when the virtual thread appears/disappears */
max-height: 96px;
transition: max-height 220ms ease, opacity 220ms ease, transform 220ms ease, margin 220ms ease, padding 220ms ease;
}
.talkie-conversation-item.talkie-invites-thread-item.talkie-invites-hidden{
max-height: 0;
opacity: 0;
transform: translateY(-6px);
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-width: 0 !important;
}
.talkie-conversation-item.talkie-invites-thread-item::before{
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background: var(--talkie-invites-list-band, rgba(120, 90, 240, 0.55));
}
.talkie-user-avatar.talkie-invites-bell{
display:flex;
align-items:center;
justify-content:center;
background: var(--talkie-invites-list-avatar-bg, rgba(120, 90, 240, 0.12));
color: var(--talkie-invites-list-icon, rgba(120, 90, 240, 0.95));
}
.talkie-icon-bell{
width:22px;
height:22px;
}
.talkie-conversation-email.talkie-invites-sub{
opacity:0.78;
}
@keyframes talkieInvitesAppear{
from{ transform: translateY(-6px); opacity: 0; }
to{ transform: translateY(0); opacity: 1; }
}
@keyframes talkieInvitesDisappear{
from{ transform: translateY(0); opacity: 1; }
to{ transform: translateY(-6px); opacity: 0; }
}
.talkie-conversation-item.talkie-invites-thread-item.talkie-anim-enter{
animation: talkieInvitesAppear 220ms ease-out;
}
.talkie-conversation-item.talkie-invites-thread-item.talkie-anim-leave{
animation: talkieInvitesDisappear 220ms ease-out;
}
/* New invite row arrival (subtle flash + slide) */
@keyframes talkieInviteRowNew{
0%{ transform: translateY(6px); opacity: 0.001; }
35%{ transform: translateY(0); opacity: 1; }
100%{ transform: translateY(0); opacity: 1; }
}
.talkie-invite-row.talkie-invite-row-new{
animation: talkieInviteRowNew 620ms ease-out;
}
/* ===== New conversation modal (v2) ===== */
.talkie-modal-newconv-v2{
/* Keep the modal size stable (no "jump" when blocks appear/disappear) */
display:flex;
flex-direction:column;
height: min(760px, 86vh);
max-height: 86vh;
overflow: hidden;
}
.talkie-modal-newconv-v2 .talkie-modal-actions{
margin-top: auto;
}
.talkie-modal-newconv-v2 .talkie-newconv-toprow{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.talkie-modal-newconv-v2 .talkie-newconv-newcontact{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
border: 0 !important; /* override outline button */
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.talkie-modal-newconv-v2 .talkie-newconv-newcontact-icon{
display:inline-flex;
width:42px;
height:42px;
border-radius: 999px;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
align-items:center;
justify-content:center;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.talkie-modal-newconv-v2 .talkie-newconv-newcontact-icon svg{
width:24px;
height:24px;
display:block;
}
/* New contact overlay (inside modal) */
.talkie-modal-newconv-v2 .talkie-newconv-emailrow{
position: fixed;
inset: 0;
z-index: 10010;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(6px);
}
.talkie-modal-newconv-v2 .talkie-newconv-emailcard{
width: min(420px, 100%);
border-radius: 18px;
padding: 16px;
background: var(--talkie-modal-bg-color, #fff);
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.talkie-modal-newconv-v2 .talkie-newconv-emailtitle{
font-weight: 800;
font-size: 16px;
margin-bottom: 10px;
text-align: center;
}
.talkie-modal-newconv-v2 .talkie-newconv-emailactions{
display:flex;
justify-content: center;
gap:10px;
margin-top: 12px;
}
.talkie-modal-newconv-v2 .talkie-newconv-emailactions{
margin-top: 12px;
display:flex;
justify-content: center;
gap: 10px;
}
/* Add-member modal tweaks (button-like group name in header) */
.talkie-modal-add-member .talkie-modal-addmember-title{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.talkie-modal-add-member .talkie-modal-group-chip{
background: var(--talkie-modal-bg-color, #fff);
color: var(--talkie-primary, #f39b11);
border: 2px solid var(--talkie-primary, #ffc166);
border-radius: 999px;
padding: 6px 12px;
font-weight: 800;
font-size: 13px;
line-height: 1;
cursor: default;
opacity: 1;
}
.talkie-modal-add-member .talkie-modal-addmember-subtitle{
text-align: center;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-list{
margin-top: 14px;
padding: 15px;
background-color: var(--talkie-conversation-hover-bg, #f7f7f6);
border-radius: 15px;
/* keep the modal compact: scroll rows instead of growing endlessly */
overflow: hidden;
flex: 1;
min-height: 0;
display:flex;
flex-direction:column;
max-width: 90%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-rows{
/* take remaining height inside the card */
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
overscroll-behavior: contain;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom: 12px;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-header-icon{
width: 35px;
height: 35px;
border-radius: 999px;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
display:flex;
align-items:center;
justify-content:center;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-header-icon svg{
width: 18px;
height: 18px;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-header-title{
font-weight: 800;
font-size: 13px;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-rows{
/* Fill the remaining height inside the list card */
flex: 1;
min-height: 0;
height: 100%;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: 2px; /* keep scrollbar from overlapping content */
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row{
display:flex;
align-items:center;
gap:10px;
padding: 10px 12px;
margin-bottom: 10px;
border: 0;
border-radius: 14px;
background: #ffffff;
cursor:pointer;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row.talkie-row-enter{
animation: talkieRowEnter 260ms ease-out;
}
@keyframes talkieRowEnter{
from{ opacity: 0.001; transform: translateY(6px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row:last-child{
margin-bottom: 0;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-avatar{
width:65px;
height:65px;
border-radius:999px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
background:rgba(0,0,0,0.06);
}
.talkie-modal-newconv-v2 .talkie-contact-pick-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-meta{
flex:1;
min-width:0;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-actions{
display:flex;
align-items:center;
gap:10px;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-trash{
width:26px;
height:26px;
min-width:26px;
min-height:26px;
border-radius:999px;
border:0;
background:#d32f2f;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
opacity:0;
pointer-events:none;
transition: opacity .15s ease, transform .15s ease;
transform: scale(0.95);
}
.talkie-modal-newconv-v2 .talkie-contact-pick-trash svg{
width:14px;
height:14px;
display:block;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row:hover .talkie-contact-pick-trash,
.talkie-modal-newconv-v2 .talkie-contact-pick-row:focus-within .talkie-contact-pick-trash{
opacity:1;
pointer-events:auto;
transform: scale(1);
}
/* Make the trash interaction more obvious when hovering the trash itself */
.talkie-modal-newconv-v2 .talkie-contact-pick-trash:hover,
.talkie-modal-newconv-v2 .talkie-contact-pick-trash:focus{
transform: scale(1.18);
box-shadow: 0 8px 18px rgba(211,47,47,.35);
}
.talkie-modal-newconv-v2 .talkie-contact-pick-name{
font-weight:700;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-add{
width:30px;
height:30px;
border-radius:999px;
border: none;
background: transparent;
color: #ffc166;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-add.is-selected{
opacity:0.75;
}
.talkie-modal-newconv-v2 .talkie-icon-plus{
width:30px;
height:30px;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-add:hover{
transform: scale(1.12);
box-shadow: 0 6px 14px rgba(255, 193, 102, .35);
}
.talkie-modal-newconv-v2 .talkie-contact-pick-add:active{
transform: scale(1.04);
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row.talkie-fade-out{
opacity: 0;
transform: translateY(-4px) scale(0.975);
transition: opacity .26s ease, transform .26s ease;
}
.talkie-modal-newconv-v2 .talkie-contact-pick-row:hover{
background: rgba(0,0,0,0.02);
}
/* Selected members panel reuse */
.talkie-modal-newconv-v2 .talkie-newconv-selected{
margin-top:14px;
margin-bottom:14px;
max-width: 350px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Stable layout + progressive insertion (no modal jump) */
.talkie-modal-newconv-v2 .talkie-newconv-selected.talkie-collapse,
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-collapse{
overflow: hidden;
max-height: 0;
opacity: 0.001;
transform: translateY(-4px);
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: max-height .32s ease, opacity .22s ease, transform .32s ease, margin .32s ease;
will-change: max-height, opacity, transform;
}
.talkie-modal-newconv-v2 .talkie-newconv-selected.talkie-collapse.is-open{
max-height: 280px; /* enough for multiple pills */
opacity: 1;
transform: translateY(0);
margin-top:14px !important;
margin-bottom:14px !important;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-collapse.is-open{
max-height: 220px;
opacity: 1;
transform: translateY(0);
margin-top:14px !important;
margin-bottom:14px !important;
}
/* Smooth, progressive block insertion/removal (no display:none jumps) */
.talkie-modal-newconv-v2 .talkie-newconv-selected.talkie-collapse,
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-collapse{
overflow:hidden;
max-height: 0;
opacity: 0;
transform: translateY(-4px);
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transition: max-height .34s ease, opacity .22s ease, transform .34s ease, margin .34s ease, padding .34s ease;
}
.talkie-modal-newconv-v2 .talkie-newconv-selected.talkie-collapse.is-open{
max-height: 320px;
opacity: 1;
transform: translateY(0);
margin-top: 14px;
margin-bottom: 14px;
padding-top: 0;
padding-bottom: 0;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-collapse.is-open{
max-height: 220px;
opacity: 1;
transform: translateY(0);
margin-top: 14px;
margin-bottom: 14px;
padding-top: 12px;
padding-bottom: 12px;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname{
padding: 12px;
margin-left: auto;
margin-right: auto;
max-width: 350px;
width: 100%;
border-radius: 15px;
background-color: var(--talkie-conversation-hover-bg, #f7f7f6);
display:flex;
flex-direction: column;
align-items: stretch;
margin-top: 14px;
margin-bottom: 14px;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-reveal{
animation: talkieReveal 320ms ease-out;
}
@keyframes talkieReveal{
from{ opacity: 0.001; transform: translateY(8px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Premium reveal when group mode becomes active */
.talkie-modal-newconv-v2 .talkie-newconv-groupname.talkie-reveal{
animation: talkiePopSoft 320ms ease-out;
}
@keyframes talkiePopSoft{
from{ opacity:0.001; transform: translateY(6px) scale(0.98); }
to{ opacity:1; transform: translateY(0) scale(1); }
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname-head{
display:flex;
align-items:flex-start;
gap:10px;
width: 100%;
margin: 0 0 10px 0;
justify-content: flex-start;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname-icon{
width: 35px;
height: 35px;
border-radius: 999px;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
display:flex;
align-items:center;
justify-content:center;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname-icon svg{
width:18px;
height:18px;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname-label{
font-weight: 800;
font-size: 13px;
line-height: 1.15;
text-align: left;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname-help{
font-size: 12px;
color: #777;
text-align: left;
margin-top: 2px;
}
.talkie-modal-newconv-v2 .talkie-newconv-groupname input{
border-radius: 10px;
background: #ffffff;
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
width: 80%;
max-width: 320px;
text-align: center;
}
/* Suboverlay (new contact focus mode) */
.talkie-suboverlay{
position: fixed;
inset: 0;
z-index: 10020;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(6px);
}
.talkie-suboverlay.is-enter{
animation: talkieOverlayIn 260ms ease-out;
}
.talkie-suboverlay.is-enter .talkie-suboverlay-card{
animation: talkieCardPop 260ms ease-out;
}
.talkie-suboverlay.is-leaving{
animation: talkieOverlayOut 170ms ease-in;
}
.talkie-suboverlay.is-leaving .talkie-suboverlay-card{
animation: talkieCardOut 170ms ease-in;
}
@keyframes talkieOverlayIn{ from{ opacity: 0.001; } to{ opacity: 1; } }
@keyframes talkieOverlayOut{ from{ opacity: 1; } to{ opacity: 0.001; } }
@keyframes talkieCardPop{ from{ opacity:0.001; transform: translateY(12px) scale(0.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes talkieCardOut{ from{ opacity:1; transform: translateY(0) scale(1); } to{ opacity:0.001; transform: translateY(8px) scale(0.98); } }
.talkie-suboverlay-card{
width: min(420px, 100%);
border-radius: 18px;
padding: 16px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.talkie-suboverlay-title{
font-weight: 800;
font-size: 16px;
margin-bottom: 10px;
text-align: center;
}
.talkie-suboverlay-actions{
display: flex;
justify-content: center;
gap: 10px;
margin-top: 12px;
}
/* Missing users list (invite by email) */
.talkie-missing-users-list{
margin: 10px 0 0;
padding-left: 18px;
max-height: 120px;
overflow: auto;
}
.talkie-missing-users-list li{
margin: 4px 0;
line-height: 1.25;
}
/* ===== Add member to group modal ===== */
.talkie-modal-add-member .talkie-modal-input-row { display:flex; gap:10px; align-items:center; }
.talkie-modal-add-member .talkie-modal-input-row .talkie-modal-input { flex:1; }
.talkie-modal-add-member .talkie-primary-button.talkie-compact { padding: 10px 14px; min-width: 92px; }
.talkie-modal-add-member .talkie-used-contacts { border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; overflow: hidden; }
.talkie-modal-add-member .talkie-used-contacts-list { max-height: 340px; overflow:auto; }
.talkie-modal-add-member .talkie-contact-pick-row { cursor: default; }
.talkie-modal-add-member .talkie-contact-pick-add { background: transparent; border: none; padding: 8px; border-radius: 999px; cursor: pointer; }
.talkie-modal-add-member .talkie-contact-pick-add:hover { background: rgba(0,0,0,0.05); }
/* Reuse contact-picker layout in add-member modal */
.talkie-modal-add-member .talkie-contact-pick-list{
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
overflow: hidden;
}
.talkie-modal-add-member .talkie-contact-pick-rows{
max-height: 340px;
overflow: auto;
}
/* Header action button */
.talkie-header-actions .talkie-add-member {
margin-right: 4px;
background: var(--talkie-primary, #ffc166);
color: #ffffff;
}
.talkie-header-actions .talkie-add-member:hover {
filter: brightness(0.97);
}
/* Add-member modal polish */
.talkie-modal-addmember-chiprow{display:flex;justify-content:center;margin-top:8px;margin-bottom:2px;}
.talkie-modal-add-member .talkie-modal-title{justify-content:center;text-align:center;}
.talkie-modal-add-member .talkie-modal-group-chip{background:#ffffff;color:#ff8a00;border:1px solid rgba(255,138,0,0.35);padding:8px 14px;border-radius:999px;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,0.03);}