/* ── Variables (light theme — default) ─────────────────────────────── */
:root, [data-theme="light"] {
--cream: #FAF6F0;
--bg: #FAF6F0;
--surface: #FFFFFF;
--surface-alt: #F5EFE6;
--primary: #C4714F;
--primary-l: #E8A882;
--primary-d: #9A5538;
--text: #2C2420;
--text-pri: #2C2420; /* alias used by newer components */
--text-sec: #7A6259;
--text-ter: #B09A8E;
--line: rgba(196,113,79,0.12);
--line-strong: rgba(196,113,79,0.22);
--radius-card: 16px;
--radius-btn: 12px;
--shadow-card: 0 2px 12px rgba(44,36,32,0.06);
--outside-bg: #1a1a1a;
}
/* Dark theme tokens — applied via data-theme="dark" or system preference */
[data-theme="dark"] {
--cream: #14100c;
--bg: #14100c;
--surface: #1f1a16;
--surface-alt: #2a221c;
--primary: #d68763; /* slightly lighter for contrast */
--primary-l: #e9a785;
--primary-d: #b86643;
--text: #f1e8df;
--text-pri: #f1e8df;
--text-sec: #c2b3a5;
--text-ter: #8a7d71;
--line: rgba(255,255,255,0.06);
--line-strong: rgba(255,255,255,0.12);
--shadow-card: 0 2px 16px rgba(0,0,0,0.4);
--outside-bg: #050403;
}
/* Auto follow system if no explicit theme chosen */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--cream: #14100c;
--bg: #14100c;
--surface: #1f1a16;
--surface-alt: #2a221c;
--primary: #d68763;
--primary-l: #e9a785;
--primary-d: #b86643;
--text: #f1e8df;
--text-pri: #f1e8df;
--text-sec: #c2b3a5;
--text-ter: #8a7d71;
--line: rgba(255,255,255,0.06);
--line-strong: rgba(255,255,255,0.12);
--shadow-card: 0 2px 16px rgba(0,0,0,0.4);
--outside-bg: #050403;
}
}
/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
background: var(--outside-bg);
color: var(--text);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 15px; }
/* ── Phone shell ────────────────────────────────────────────────────── */
.phone-shell {
width: 100%;
max-width: 430px;
min-height: 100vh;
background: var(--cream);
display: flex;
flex-direction: column;
position: relative;
}
/* ── Status bar ─────────────────────────────────────────────────────── */
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 24px 8px;
background: var(--cream);
flex-shrink: 0;
}
.status-time { font-size: 15px; font-weight: 600; color: var(--text); }
.status-icons { display: flex; align-items: center; gap: 6px; color: var(--text); }
/* ── Flash ──────────────────────────────────────────────────────────── */
.flash-container { padding: 0 16px 8px; }
.flash {
padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
}
.flash-success { background: #D1FAE5; color: #065F46; }
.flash-error { background: #FEE2E2; color: #991B1B; }
.flash-info { background: #DBEAFE; color: #1E40AF; }
/* ── Page content ───────────────────────────────────────────────────── */
.page-content {
flex: 1; overflow-y: auto;
/* leave room for the fixed tab bar (≈ 56px content + 24px safe area) */
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* ── Tab bar (fixed at viewport bottom) ───────────────────────────── */
.tab-bar {
position: fixed;
left: 50%; transform: translateX(-50%);
bottom: 0;
width: 100%; max-width: 430px;
display: flex;
justify-content: space-around;
background: var(--bg);
backdrop-filter: blur(20px);
border-top: 1px solid var(--line);
padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 50;
}
[data-theme="dark"] .tab-bar { background: rgba(20, 16, 12, 0.95); }
.tab-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 10px; font-weight: 500; color: var(--text-ter);
flex: 1; padding: 4px 6px; transition: color 0.15s;
}
.tab-item.active { color: var(--primary); }
.tab-item svg { width: 22px; height: 22px; }
/* ── Avatars ────────────────────────────────────────────────────────── */
.avatar {
display: flex; align-items: center; justify-content: center;
border-radius: 50%; color: #fff; font-weight: 700;
flex-shrink: 0; letter-spacing: -0.5px;
}
.avatar-sm { width: 40px; height: 40px; font-size: 14px; }
.avatar-md { width: 50px; height: 50px; font-size: 18px; }
.avatar-lg { width: 80px; height: 80px; font-size: 28px; border-radius: 50%; box-shadow: 0 8px 24px rgba(196,113,79,0.25); }
.avatar-xl { width: 72px; height: 72px; font-size: 26px; border-radius: 20px; }
/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 11px 18px; border-radius: var(--radius-btn);
font-size: 14px; font-weight: 600; transition: all 0.15s; cursor: pointer;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); }
.btn-ghost { background: rgba(255,255,255,0.7); color: var(--text-sec); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-full { width: 100%; }
/* ── Section / page labels ──────────────────────────────────────────── */
.section-label {
font-size: 11px; font-weight: 700; color: var(--text-ter);
letter-spacing: 1px; text-transform: uppercase;
padding: 16px 24px 8px;
}
.page-header { padding: 16px 24px 8px; }
.greeting-sub { font-size: 13px; color: var(--text-sec); margin-bottom: 4px; }
.greeting-title { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.25; }
.wave { display: inline-block; }
.page-header-row {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px 8px;
}
.page-title { font-size: 24px; font-weight: 800; color: var(--text); }
.page-action { font-size: 26px; color: var(--primary); font-weight: 300; }
/* ── Home: reminder card ────────────────────────────────────────────── */
.reminder-card {
margin: 0 16px 12px;
background: linear-gradient(135deg, #FDEEE6, #F5E4D6);
border-radius: 20px; padding: 16px 18px;
border: 1px solid rgba(196,113,79,0.15);
box-shadow: var(--shadow-card);
}
.reminder-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reminder-info { flex: 1; }
.reminder-name { font-size: 16px; font-weight: 700; color: var(--text); }
.reminder-meta { font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 2px; }
.badge {
background: var(--primary); color: #fff;
font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
padding: 3px 8px; border-radius: 20px;
}
.reminder-preview {
font-size: 13px; color: var(--text-sec); font-style: italic;
background: rgba(255,255,255,0.6); border-radius: 10px;
padding: 8px 12px; margin-bottom: 12px; line-height: 1.45;
}
.reminder-preview::before { content: '"'; }
.reminder-preview::after { content: '"'; }
.reminder-actions { display: flex; gap: 8px; }
.reminder-actions .btn { flex: 1; padding: 9px 12px; font-size: 13px; border-radius: 11px; }
/* ── Home: recent rows ──────────────────────────────────────────────── */
.recent-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 24px; transition: background 0.15s;
}
.recent-row:hover { background: rgba(196,113,79,0.04); }
.recent-info { flex: 1; }
.recent-name { font-size: 15px; font-weight: 600; color: var(--text); }
.recent-detail { font-size: 12px; color: var(--text-ter); margin-top: 2px; }
.recent-date { font-size: 18px; color: var(--text-ter); }
.divider-line { height: 1px; background: var(--line); margin: 0 24px; }
/* ── FAB ────────────────────────────────────────────────────────────── */
.fab {
/* On a phone (50vw < 215px) the old `calc(50vw - 215px + 20px)` formula
went negative and pushed the FAB to the absolute edge / off-screen.
`max(28px, ...)` floors that to a comfortable inset on every viewport
while still respecting the centered-content alignment on tablets/
desktops where 50vw > 215px. */
position: fixed; bottom: 88px;
right: max(28px, calc(50vw - 215px + 28px));
width: 52px; height: 52px;
background: var(--primary); color: #fff;
border-radius: 50%; font-size: 26px; font-weight: 300;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(196,113,79,0.45);
transition: transform 0.2s, box-shadow 0.2s;
z-index: 20;
}
.fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(196,113,79,0.5); }
/* ── People list ────────────────────────────────────────────────────── */
.search-form { padding: 4px 16px 0; }
.search-bar {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.85); border: 1px solid var(--line);
border-radius: 14px; padding: 11px 14px; color: var(--text-ter);
}
.search-input {
flex: 1; border: none; outline: none; background: transparent;
font-size: 15px; color: var(--text);
}
.search-input::placeholder { color: var(--text-ter); }
.search-clear { font-size: 14px; color: var(--text-ter); padding: 2px 4px; }
.filter-row {
display: flex; gap: 6px; padding: 10px 16px 8px;
overflow-x: auto; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
display: flex; align-items: center; gap: 4px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 20px; padding: 5px 13px;
font-size: 12px; font-weight: 500; color: var(--text-sec);
white-space: nowrap; flex-shrink: 0; transition: all 0.15s;
}
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-count { font-size: 10px; opacity: 0.7; }
.person-row {
display: flex; align-items: center; gap: 14px;
padding: 13px 20px; transition: background 0.15s;
}
.person-row:hover { background: rgba(196,113,79,0.04); }
.person-info { flex: 1; min-width: 0; }
.person-name { font-size: 16px; font-weight: 600; color: var(--text); }
.person-role { font-size: 12px; color: var(--text-sec); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-row { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tag {
background: var(--surface-alt); color: var(--text-sec);
font-size: 10px; padding: 2px 8px; border-radius: 10px;
}
.tag-mba { background: #E8F0FE; color: #4A6CF7; }
.tag-work { background: #D1FAE5; color: #065F46; }
.tag-friends { background: #FEF3C7; color: #92400E; }
.tag-family { background: #FCE7F3; color: #9D174D; }
.tag-accent { background: #FEF3E8; color: var(--primary); font-weight: 600; }
.person-meta { text-align: right; flex-shrink: 0; }
.depth-dots { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #E0D5CF; }
.dot.filled { background: var(--primary); }
.last-seen { font-size: 11px; color: var(--text-ter); }
/* ── Empty state ────────────────────────────────────────────────────── */
.empty-state {
display: flex; flex-direction: column; align-items: center;
padding: 48px 32px; text-align: center;
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-desc { font-size: 14px; color: var(--text-sec); line-height: 1.5; }
/* ── Person detail ──────────────────────────────────────────────────── */
.detail-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px 4px;
}
.back-btn { font-size: 15px; font-weight: 500; color: var(--primary); }
.icon-btn { font-size: 20px; color: var(--text-sec); padding: 4px 8px; border-radius: 8px; }
.context-menu {
position: absolute; right: 16px; top: 60px; z-index: 50;
background: var(--surface); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
border: 1px solid var(--line); overflow: hidden; min-width: 180px;
}
.context-menu.hidden { display: none; }
.ctx-item {
display: block; padding: 13px 16px;
font-size: 14px; color: var(--text); cursor: pointer;
border-bottom: 1px solid var(--line); width: 100%; text-align: left;
}
.ctx-item:last-child { border-bottom: none; }
.ctx-item:hover { background: var(--surface-alt); }
.ctx-danger { color: #DC2626; }
.detail-profile {
display: flex; align-items: flex-end; gap: 16px;
padding: 12px 24px 0;
}
.detail-name-block { flex: 1; padding-bottom: 4px; }
.detail-name { font-size: 26px; font-weight: 800; color: var(--text); }
.detail-role { font-size: 14px; color: var(--text-sec); margin-top: 3px; }
.detail-company {
font-size: 12px; color: var(--primary); font-weight: 600;
background: #FDEEE6; padding: 2px 10px; border-radius: 8px;
display: inline-block; margin-top: 5px;
}
.detail-location { font-size: 13px; color: var(--text-sec); margin-top: 6px; }
.detail-birthday { font-size: 13px; color: var(--text-sec); margin-top: 3px; }
.action-row { display: flex; gap: 8px; padding: 14px 16px; }
.action-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
background: var(--surface); border-radius: 14px; padding: 11px 6px;
border: 1px solid var(--line); font-size: 11px; font-weight: 600;
color: var(--text-sec); transition: all 0.15s; cursor: pointer;
}
.action-btn:hover { background: var(--surface-alt); }
.action-primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.action-icon { font-size: 20px; }
.context-card {
margin: 0 16px 12px;
background: var(--surface); border-radius: var(--radius-card);
padding: 14px 16px; border: 1px solid var(--line);
}
.context-title { font-size: 11px; font-weight: 700; color: var(--text-ter);
letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; }
.context-note { font-size: 13px; color: var(--text-sec); line-height: 1.55; }
.timeline-header {
display: flex; align-items: center; gap: 10px;
padding: 4px 24px 10px;
}
.timeline-label { font-size: 13px; font-weight: 700; color: var(--text-sec); }
.timeline-count {
background: var(--primary); color: #fff;
font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.timeline-wrap { padding: 0 16px 0 32px; position: relative; }
.timeline-line {
position: absolute; left: 40px; top: 12px; bottom: 40px;
width: 2px; background: linear-gradient(to bottom, var(--primary-l), transparent);
}
.memory-card {
background: var(--surface); border-radius: var(--radius-card);
padding: 14px 16px; margin-bottom: 10px;
border: 1px solid var(--line); position: relative;
box-shadow: var(--shadow-card);
}
.memory-dot {
position: absolute; left: -23px; top: 18px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--primary-l); border: 2px solid var(--cream);
}
.memory-date-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
.memory-date { font-size: 11px; color: var(--text-ter); font-weight: 600; }
.memory-type {
font-size: 11px; color: var(--primary); font-weight: 600;
background: #FDEEE6; padding: 2px 8px; border-radius: 10px;
}
.memory-location { font-size: 12px; color: var(--text-ter); margin-bottom: 8px; }
.clip-card {
background: #FFF8F4; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px;
border-left: 3px solid var(--primary-l);
}
.clip-card:last-of-type { margin-bottom: 0; }
.clip-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.clip-num {
width: 20px; height: 20px; background: var(--primary);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.clip-dur { font-size: 10px; color: var(--text-ter); }
.clip-text { font-size: 13px; color: var(--text); line-height: 1.55; }
.add-memory-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 8px 16px 24px;
background: transparent;
border: 2px dashed rgba(196,113,79,0.3); border-radius: var(--radius-card);
padding: 14px; font-size: 14px; font-weight: 600; color: var(--primary);
cursor: pointer; transition: all 0.15s;
}
.add-memory-btn:hover { background: rgba(196,113,79,0.05); border-color: var(--primary); }
/* ── Modal (add person / log meeting) ───────────────────────────────── */
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 14px; border-bottom: 1px solid var(--line);
}
.modal-cancel { font-size: 15px; color: var(--text-sec); }
.modal-title { font-size: 17px; font-weight: 700; color: var(--text); }
.modal-save { font-size: 15px; font-weight: 700; color: var(--primary); }
.form-body { padding-bottom: 32px; }
.form-section { padding: 14px 16px 0; }
.form-label {
font-size: 11px; font-weight: 700; color: var(--text-ter);
letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; display: block;
}
.form-input, .form-textarea, .form-select {
width: 100%; background: var(--surface); border: 1px solid var(--line);
border-radius: 13px; padding: 12px 14px;
font-size: 15px; color: var(--text); outline: none; transition: border-color 0.15s;
}
.form-input:focus, .form-textarea:focus { border-color: var(--primary); }
.form-textarea { resize: vertical; line-height: 1.5; }
/* Segmented control */
.segmented {
display: flex; background: var(--surface-alt);
border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap;
}
.segmented input[type=radio] { display: none; }
.segmented label {
flex: 1; text-align: center; padding: 7px 4px;
font-size: 12px; font-weight: 600; color: var(--text-sec);
border-radius: 9px; cursor: pointer; transition: all 0.15s;
white-space: nowrap;
}
.segmented input[type=radio]:checked + label {
background: var(--surface); color: var(--primary);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Color picker */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-picker input[type=radio] { display: none; }
.color-picker label {
width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
border: 3px solid transparent;
}
.color-picker input[type=radio]:checked + label {
transform: scale(1.15); box-shadow: 0 0 0 3px white, 0 0 0 5px var(--primary);
}
/* ── Log meeting ────────────────────────────────────────────────────── */
.log-who-row {
display: flex; align-items: center; gap: 10px;
background: var(--surface-alt); border-radius: 14px;
margin: 10px 16px 0; padding: 11px 14px;
}
.log-who-info { flex: 1; }
.log-who-name { font-size: 15px; font-weight: 600; color: var(--text); }
.log-who-sub { font-size: 12px; color: var(--text-ter); margin-left: 6px; }
.log-meta-row { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.form-group-inline { display: flex; flex-direction: column; gap: 6px; }
.date-chips { display: flex; gap: 8px; }
.date-chip {
padding: 7px 14px; border-radius: 12px; font-size: 13px; font-weight: 600;
color: var(--text-sec); background: var(--surface-alt); cursor: pointer;
transition: all 0.15s; border: none;
}
.date-chip.active { background: var(--primary); color: #fff; }
.date-input { padding: 7px 10px; font-size: 12px; }
/* ── Voice section ──────────────────────────────────────────────────── */
.voice-section {
display: flex; flex-direction: column; align-items: center;
padding: 20px 24px 16px;
}
.voice-label { font-size: 14px; font-weight: 700; color: var(--text-sec); margin-bottom: 4px; }
.voice-sublabel { font-size: 12px; color: var(--text-ter); margin-bottom: 12px; text-align: center; }
/* Language picker */
.lang-picker {
display: flex; gap: 6px; justify-content: center;
flex-wrap: wrap; margin-bottom: 20px;
}
.lang-chip {
padding: 4px 10px; border-radius: 20px;
font-size: 12px; font-weight: 600;
background: var(--surface-alt); color: var(--text-sec);
cursor: pointer; transition: all 0.15s; border: 1.5px solid transparent;
}
.lang-chip.active {
background: var(--primary); color: #fff;
border-color: var(--primary);
}
.mic-wrap {
position: relative; width: 120px; height: 120px; margin-bottom: 16px;
}
.ring-svg { position: absolute; top: 0; left: 0; width: 120px; height: 120px; }
.ring-bg { fill: none; stroke: #F5EFE6; stroke-width: 6; }
.ring-fill {
fill: none; stroke: var(--primary-l); stroke-width: 6;
stroke-dasharray: 339.29; stroke-dashoffset: 339.29;
stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px;
transition: stroke-dashoffset 0.9s linear, stroke 0.3s;
}
.ring-fill.recording { stroke: var(--primary); }
.mic-btn {
position: absolute; inset: 10px;
background: linear-gradient(135deg, var(--primary), var(--primary-l));
border-radius: 50%; display: flex; flex-direction: column;
align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(196,113,79,0.35);
transition: all 0.2s; cursor: pointer;
}
.mic-btn:hover { transform: scale(1.04); }
.mic-btn.recording {
background: linear-gradient(135deg, var(--primary-d), var(--primary));
box-shadow: 0 8px 32px rgba(196,113,79,0.5);
animation: pulse 1.5s ease-in-out infinite;
}
.mic-icon { font-size: 38px; }
.mic-timer { font-size: 14px; font-weight: 800; color: #fff; }
.mic-hint { font-size: 12px; color: var(--text-ter); }
@keyframes pulse {
0%, 100% { box-shadow: 0 8px 32px rgba(196,113,79,0.5); }
50% { box-shadow: 0 8px 40px rgba(196,113,79,0.7); }
}
.live-transcript {
width: 100%; background: #FFF8F4;
border: 1px solid rgba(196,113,79,0.2); border-radius: 14px;
padding: 12px 14px; margin-bottom: 12px;
}
.live-label { font-size: 10px; font-weight: 700; color: var(--primary);
letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 6px; }
.live-text { font-size: 14px; color: var(--text); line-height: 1.5; min-height: 20px; }
.interim-text { color: var(--text-ter); }
.cursor-blink {
display: inline-block; width: 2px; height: 14px; background: var(--primary);
margin-left: 1px; vertical-align: middle;
animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
/* Recorded clips display -->*/
.clips-list { padding: 0 16px; }
.clip-item {
background: #FFF8F4; border-radius: 14px; padding: 12px 14px;
margin-bottom: 8px; border: 1px solid rgba(196,113,79,0.15);
}
.clip-item-header {
display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.clip-badge {
width: 22px; height: 22px; background: var(--primary); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.clip-meta { font-size: 11px; color: var(--text-ter); flex: 1; }
.clip-del { font-size: 16px; color: var(--text-ter); padding: 2px 6px; cursor: pointer; }
.clip-del:hover { color: #DC2626; }
.clip-edit-btn { font-size: 14px; color: var(--text-ter); padding: 2px 6px; cursor: pointer; user-select: none; }
.clip-edit-btn:hover { color: var(--accent); }
.clip-body { font-size: 14px; color: var(--text); line-height: 1.55; }
.clip-body.editing {
outline: 2px solid var(--accent);
border-radius: 8px;
padding: 6px 8px;
min-height: 40px;
background: rgba(196,113,79,0.05);
white-space: pre-wrap;
word-break: break-word;
}
.add-clip-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 0 16px 12px; background: transparent;
border: 2px dashed rgba(196,113,79,0.3); border-radius: 14px;
padding: 12px; font-size: 14px; font-weight: 600; color: var(--primary);
cursor: pointer; transition: all 0.15s;
}
.add-clip-btn:hover { background: rgba(196,113,79,0.05); border-color: var(--primary); }
/* Auto-tags */
.auto-tags-section {
margin: 0 16px 10px;
background: linear-gradient(135deg, #F0F4FF, #EAF0FF);
border-radius: 14px; padding: 12px 14px;
border: 1px solid rgba(74,108,247,0.15);
}
.auto-tags-label {
font-size: 11px; font-weight: 700; color: #4A6CF7;
letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px;
}
.auto-tags-row { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-tag {
background: var(--surface); color: #4A6CF7; font-size: 12px;
padding: 4px 10px; border-radius: 20px;
border: 1px solid rgba(74,108,247,0.2); cursor: pointer;
}
.auto-tag.selected { background: #4A6CF7; color: white; }
/* Manual quick tags */
.quick-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-tag {
background: var(--surface-alt); color: var(--text-sec);
font-size: 12px; padding: 5px 12px; border-radius: 20px;
cursor: pointer; transition: all 0.15s; border: 1px solid transparent;
}
.quick-tag:hover { border-color: var(--primary); color: var(--primary); }
.quick-tag.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Reminder options */
.remind-section {
margin: 8px 16px 16px;
background: linear-gradient(135deg, #FDEEE6, #FAF0E8);
border-radius: 16px; padding: 14px 16px;
border: 1px solid rgba(196,113,79,0.15);
}
.remind-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.remind-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.remind-chip {
background: var(--surface); color: var(--text-sec); font-size: 12px; font-weight: 600;
padding: 5px 12px; border-radius: 20px; cursor: pointer;
border: 1px solid rgba(196,113,79,0.2); transition: all 0.15s;
}
.remind-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Text fallback */
.text-fallback { padding: 0 16px 16px; }
/* ── Settings ───────────────────────────────────────────────────────── */
.settings-group-label {
font-size: 11px; font-weight: 700; color: var(--text-ter);
letter-spacing: 1px; text-transform: uppercase;
padding: 14px 24px 8px;
}
.settings-card {
margin: 0 16px 8px; background: var(--surface);
border-radius: 18px; border: 1px solid var(--line); overflow: hidden;
}
.settings-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; min-height: 60px;
}
.settings-icon {
font-size: 20px; flex-shrink: 0; width: 28px;
display: flex; align-items: center; justify-content: center;
}
.settings-info { flex: 1; min-width: 0; }
.settings-name { font-size: 15px; font-weight: 600; color: var(--text); }
.settings-desc { font-size: 12px; color: var(--text-ter); margin-top: 2px; }
.settings-select {
background: var(--surface-alt); border: none; border-radius: 20px;
padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--text);
cursor: pointer; outline: none; flex-shrink: 0;
min-width: 118px; text-align: center;
}
.settings-divider { height: 1px; background: var(--line); margin: 0 16px; }
/* Toggle switch — fixed: thumb positioned relative to track */
.toggle { display: inline-block; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
display: block; width: 51px; height: 31px;
background: #D1C4BC; border-radius: 16px;
cursor: pointer; transition: background 0.25s;
position: relative;
}
.toggle input:checked ~ .toggle-track { background: var(--primary); }
.toggle-thumb {
position: absolute; top: 3px; left: 3px;
width: 25px; height: 25px; border-radius: 50%;
background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,0.22);
transition: left 0.25s cubic-bezier(.4,0,.2,1);
}
.toggle input:checked ~ .toggle-track .toggle-thumb { left: 23px; }
.info-box {
margin: 0 16px 8px;
background: linear-gradient(135deg, #F0F4FF, #EAF0FF);
border-radius: 14px; padding: 14px 16px;
border: 1px solid rgba(74,108,247,0.12);
}
.info-title { font-size: 12px; font-weight: 700; color: #4A6CF7; margin-bottom: 6px; }
.info-body { font-size: 12px; color: #4A6CF7; line-height: 1.6; opacity: 0.85; }
/* ── Top 10 ─────────────────────────────────────────────────────────── */
.top10-header {
padding: 20px 20px 4px;
}
.top10-title {
font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px;
}
.top10-subtitle {
font-size: 13px; color: var(--text-ter); margin-top: 3px;
}
.top10-count-badge {
display: inline-flex; align-items: center; gap: 4px;
background: var(--primary); color: white;
font-size: 11px; font-weight: 700;
padding: 2px 10px; border-radius: 20px; margin-top: 8px;
}
.top10-list {
padding: 12px 16px 24px;
display: flex; flex-direction: column; gap: 10px;
}
.top10-card {
display: flex; align-items: center; gap: 14px;
background: var(--surface); border-radius: 18px;
padding: 14px 16px;
box-shadow: var(--shadow-card);
border: 1px solid var(--line);
transition: transform 0.12s;
}
.top10-card:active { transform: scale(0.98); }
.top10-rank {
font-size: 18px; font-weight: 800; color: var(--primary);
width: 24px; text-align: center; flex-shrink: 0;
line-height: 1;
}
.top10-rank.gold { color: #F59E0B; }
.top10-rank.silver { color: #94A3B8; }
.top10-rank.bronze { color: #CD7C45; }
.top10-info { flex: 1; min-width: 0; }
.top10-name { font-size: 15px; font-weight: 700; color: var(--text); }
.top10-role { font-size: 12px; color: var(--text-ter); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top10-meta {
display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.top10-days { font-size: 11px; color: var(--text-ter); }
.top10-meet-count {
font-size: 11px; color: var(--primary); font-weight: 600;
background: rgba(196,113,79,0.1); padding: 1px 7px; border-radius: 10px;
}
.top10-action {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.top10-reach-btn {
background: var(--primary); color: white;
font-size: 11px; font-weight: 700;
padding: 5px 12px; border-radius: 20px;
white-space: nowrap;
}
.top10-slot {
display: flex; align-items: center; gap: 14px;
background: transparent;
border: 2px dashed rgba(196,113,79,0.25); border-radius: 18px;
padding: 12px 16px;
color: var(--text-ter); font-size: 13px;
}
.top10-slot-num {
font-size: 18px; font-weight: 800; color: rgba(196,113,79,0.25);
width: 24px; text-align: center; flex-shrink: 0;
}
.top10-empty-state {
text-align: center; padding: 48px 32px;
}
.top10-empty-icon { font-size: 52px; margin-bottom: 16px; }
.top10-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.top10-empty-desc { font-size: 14px; color: var(--text-ter); line-height: 1.5; }
/* Star button on person detail */
.star-btn {
position: absolute; top: 14px; right: 56px;
font-size: 24px; color: var(--text-ter); line-height: 1;
transition: color 0.15s, transform 0.15s;
background: none; border: none; cursor: pointer;
padding: 4px;
}
.star-btn.starred { color: #F59E0B; transform: scale(1.15); }
.star-btn:active { transform: scale(0.9); }
/* ── Contact card ─────────────────────────────────────────────────── */
.contact-card {
margin: 0 16px 12px;
background: var(--surface);
border-radius: 18px;
padding: 16px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.contact-title {
font-size: 11px; font-weight: 700; color: var(--text-ter);
text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;
}
.contact-links { display: flex; flex-direction: column; gap: 10px; }
.contact-row {
display: flex; align-items: center; gap: 10px;
}
.contact-icon { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.contact-detail { flex: 1; min-width: 0; }
.contact-label { font-size: 10px; color: var(--text-ter); }
.contact-value { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-actions { display: flex; gap: 4px; }
.contact-action-btn {
font-size: 11px; font-weight: 600; color: var(--primary);
background: rgba(196,113,79,0.1); border-radius: 8px;
padding: 4px 8px; white-space: nowrap; text-decoration: none;
}
.contact-wa { color: #25D366; background: rgba(37,211,102,0.1); }
/* Tappable contact rows */
.contact-row {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left; background: none; border: none;
padding: 8px 0; cursor: pointer; text-decoration: none; color: inherit;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.contact-row:last-child { border-bottom: none; }
.contact-row:active { background: var(--surface-alt); border-radius: 8px; }
.contact-row-btn { cursor: pointer; }
.contact-chevron {
font-size: 13px; color: var(--text-ter); margin-left: auto;
font-weight: 600; flex-shrink: 0;
}
/* Action sheet buttons */
.action-sheet-label {
font-size: 13px; color: var(--text-ter); text-align: center;
margin-bottom: 14px; font-weight: 500;
}
.action-sheet-btn {
display: block; width: 100%;
padding: 14px 16px; margin-bottom: 2px;
background: var(--surface-alt); border-radius: 14px;
font-size: 15px; font-weight: 500; color: var(--text-main);
text-decoration: none; text-align: left;
transition: background 0.12s;
}
.action-sheet-btn:active { background: var(--border); }
.action-sheet-cancel {
display: block; width: 100%; margin-top: 10px;
padding: 14px; border-radius: 14px;
background: var(--surface); font-size: 15px; font-weight: 600;
color: var(--primary); border: none; cursor: pointer;
}
.contact-edit-link {
float: right; font-size: 11px; font-weight: 600;
color: var(--primary); text-decoration: none;
}
/* Contact pills in add_person form */
.contact-pills-area { padding: 0 16px 16px; }
.contact-pills-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.contact-pill {
display: inline-flex; align-items: center; gap: 5px;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 20px; padding: 6px 12px;
font-size: 13px; color: var(--text-main);
cursor: pointer;
}
.contact-add-btn {
display: flex; align-items: center; gap: 6px;
background: none; border: 1.5px dashed var(--text-ter);
border-radius: 12px; padding: 10px 14px;
font-size: 13px; color: var(--text-ter);
cursor: pointer; width: 100%;
}
/* Contact sheet fields */
.contact-sheet { max-height: 85vh; overflow-y: auto; }
.contact-sheet-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
}
.contact-sheet-title { font-size: 17px; font-weight: 700; color: var(--text-main); }
.contact-sheet-done {
font-size: 15px; font-weight: 600; color: var(--primary);
background: none; border: none; cursor: pointer; padding: 4px 0;
}
.contact-sheet-fields { display: flex; flex-direction: column; gap: 0; }
.cfield {
display: flex; align-items: center; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.cfield:last-child { border-bottom: none; }
.cfield-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.cfield-body { flex: 1; min-width: 0; }
.cfield-label { font-size: 10px; color: var(--text-ter); margin-bottom: 2px; }
.cfield-input {
width: 100%; border: none; background: none;
font-size: 14px; color: var(--text-main);
outline: none; padding: 0;
}
.cfield-input::placeholder { color: var(--text-ter); }
/* ── Notes card ───────────────────────────────────────────────────── */
.notes-card {
margin: 0 16px 12px;
background: var(--surface);
border-radius: 18px;
padding: 16px;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.notes-card-title {
font-size: 11px; font-weight: 700; color: var(--text-ter);
text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;
}
.notes-section { margin-bottom: 10px; }
.notes-section:last-child { margin-bottom: 0; }
.notes-section-label {
font-size: 11px; font-weight: 600; color: var(--text-sec);
margin-bottom: 3px;
}
.notes-section-body {
font-size: 13px; color: var(--text-main); line-height: 1.5;
white-space: pre-wrap;
}
/* ── People filter — custom groups ───────────────────────────────── */
.filter-chip-new {
background: transparent;
border: 1.5px dashed var(--text-ter);
color: var(--text-ter);
font-size: 12px;
}
.filter-chip-group-wrap { display: inline-flex; align-items: center; gap: 2px; }
.group-del-btn {
font-size: 9px; color: var(--text-ter); line-height: 1;
padding: 0 2px; background: none; border: none; cursor: pointer;
margin-left: -2px;
}
/* ── Form improvements ───────────────────────────────────────────── */
.form-section-header {
font-size: 11px; font-weight: 700; color: var(--text-ter);
text-transform: uppercase; letter-spacing: 0.8px;
padding: 16px 16px 4px;
}
/* Notes tabs in add_person */
.notes-tabs {
display: flex; gap: 0; margin: 0 16px 0;
border-bottom: 1.5px solid var(--border);
}
.notes-tab {
flex: 1; padding: 8px 4px; font-size: 12px; font-weight: 600;
color: var(--text-ter); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -1.5px;
cursor: pointer; transition: all 0.15s;
}
.notes-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.notes-panel { display: none; padding-top: 8px; }
.notes-panel.active { display: block; }
/* form select */
select.form-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
/* Modal sheet (for Create Group) */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.45);
display: flex; align-items: flex-end; justify-content: center;
}
.modal-sheet {
width: 100%; max-width: 430px;
background: #FAF6F0; border-radius: 24px 24px 0 0;
padding: 12px 20px 36px;
}
.modal-sheet-handle {
width: 36px; height: 4px; border-radius: 2px;
background: #ccc; margin: 0 auto 16px;
}
.modal-sheet-title {
font-size: 17px; font-weight: 700; color: var(--text-main);
margin-bottom: 14px;
}
/* Top-10 star next to name */
.detail-name-row { display: flex; align-items: center; gap: 6px; }
.top10-star {
font-size: 18px; background: none; border: none; cursor: pointer;
color: var(--text-ter); padding: 0; line-height: 1;
transition: transform 0.2s;
}
.top10-star.starred { color: #F59E0B; transform: scale(1.15); }
/* Configurable action row */
.action-row-wrap { position: relative; }
.action-row-pencil {
position: absolute; top: 6px; right: 10px;
font-size: 13px; background: none; border: none; cursor: pointer;
color: var(--text-ter); padding: 4px;
}
.action-btn-inactive {
opacity: 0.4;
position: relative;
}
.action-btn-plus {
position: absolute; top: 5px; right: 5px;
font-size: 10px; font-weight: 700; color: var(--primary);
background: var(--cream); border-radius: 50%;
width: 14px; height: 14px;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
/* Action row customization sheet */
.action-row-sheet-hint {
font-size: 12px; color: var(--text-ter); text-align: center; padding: 4px 16px 12px;
}
.action-type-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 10px; padding: 0 16px 24px;
}
.action-type-chip {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 4px; border-radius: 14px; cursor: pointer;
border: 2px solid transparent; background: var(--surface-alt);
transition: all 0.15s;
}
.action-type-chip.selected {
border-color: var(--primary); background: rgba(196,113,79,0.1);
}
.atc-icon { font-size: 22px; }
.atc-label { font-size: 10px; font-weight: 600; color: var(--text-sec); text-align: center; }
/* Memory card edit button */
.memory-edit-btn {
margin-left: auto; font-size: 13px; color: var(--text-ter);
text-decoration: none; padding: 2px 4px;
}
/* AI summary translate button + menu */
.ai-translate-wrap { position: relative; display: inline-block; }
.ai-translate-btn { padding: 4px 8px; font-size: 14px; }
.ai-translate-menu {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
background: var(--surface); border-radius: 10px; min-width: 160px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px 0;
border: 1px solid var(--line);
}
.ai-translate-item {
display: block; width: 100%; text-align: left;
padding: 8px 12px; font-size: 13px; color: var(--text-pri);
background: none; border: none; cursor: pointer;
}
.ai-translate-item:hover { background: var(--surface-alt); }
.ai-translate-original { color: var(--text-sec); font-weight: 500; }
.ai-translate-divider { height: 1px; background: var(--line); margin: 4px 0; }
.ai-translated-banner {
display: flex; align-items: center; justify-content: space-between;
margin: 8px 0 4px; padding: 6px 10px;
background: #eff6ff; color: #1e40af; border-radius: 8px;
font-size: 12px;
}
.ai-translate-original-btn {
background: none; border: none; color: #1e40af; cursor: pointer;
font-size: 12px; font-weight: 600; padding: 2px 6px;
}
.ai-summary-error {
margin-top: 8px; padding: 8px 12px;
background: #fef2f2; color: #b91c1c;
border-radius: 8px; font-size: 13px;
}
/* Unsaved-changes confirm modal */
.confirm-card {
background: var(--surface); border-radius: 16px;
width: min(360px, 92vw); padding: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
margin: auto;
}
.confirm-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.confirm-body { color: var(--text-sec); font-size: 14px; margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.confirm-btn {
padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px;
border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.confirm-btn-ghost { color: var(--text-sec); }
.confirm-btn-danger { color: #b91c1c; border-color: #fee2e2; background: #fef2f2; }
.confirm-btn-primary { color: white; background: var(--accent, #C4714F); border-color: transparent; }
/* AI summary status badges */
.summary-badge {
font-size: 11px; padding: 2px 8px; border-radius: 10px;
font-weight: 500; line-height: 1.4;
}
.summary-badge-pending {
background: var(--surface-alt); color: var(--text-ter);
position: relative; padding-left: 18px;
}
.summary-badge-pending::before {
content: ''; position: absolute; left: 6px; top: 50%;
width: 8px; height: 8px; margin-top: -4px;
border: 1.5px solid var(--text-ter); border-top-color: transparent;
border-radius: 50%; animation: badge-spin 0.9s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
.summary-badge-failed {
background: #fef2f2; color: #b91c1c;
}
.summary-retry-btn {
font-size: 11px; padding: 2px 8px; border-radius: 10px;
border: 1px solid var(--line); background: var(--surface); color: var(--text-sec);
cursor: pointer; margin-left: 4px;
}
.summary-retry-btn:disabled { opacity: 0.5; cursor: default; }
/* Note input hint */
.write-hint {
font-size: 12px; color: var(--text-ter);
margin-top: 6px; padding: 0 2px;
}
/* Time chips (scrollable, 30-min intervals) */
.time-chips {
display: flex; gap: 8px; overflow-x: auto; padding: 4px 0;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.time-chips::-webkit-scrollbar { display: none; }
.time-chip {
flex-shrink: 0; padding: 8px 14px; border-radius: 20px;
font-size: 13px; font-weight: 600; cursor: pointer;
background: var(--surface-alt); color: var(--text-sec);
border: 1.5px solid transparent; scroll-snap-align: start;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.time-chip.active {
background: var(--surface); color: var(--text-pri);
border-color: var(--accent, #C4714F);
}
/* Freshness dot on avatars (green/amber/cold) */
.freshness-dot {
position: absolute; right: -2px; bottom: -2px;
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid white;
}
.freshness-dot.fresh-green { background: #16a34a; }
.freshness-dot.fresh-amber { background: #f59e0b; }
.freshness-dot.fresh-cold { background: #9ca3af; }
.recent-row .avatar { position: relative; }
/* Moments badge: '+N more' on home recent list */
.recent-name-row { display: flex; align-items: center; gap: 8px; }
.moments-badge {
font-size: 11px; padding: 2px 8px; border-radius: 10px;
background: rgba(196,113,79,0.12); color: var(--accent, #C4714F);
font-weight: 600;
}
/* ── Smart suggestions (today's reach-outs) ────────────────────── */
.suggest-section {
margin: 8px 16px 12px; padding: 14px 14px 8px;
background: linear-gradient(180deg, #fffaf6 0%, #fdf2e8 100%);
border-radius: 16px;
border: 1px solid rgba(196, 113, 79, 0.18);
}
.suggest-header { margin-bottom: 8px; }
.suggest-title {
font-size: 14px; font-weight: 800; color: var(--text-pri);
}
.suggest-sub {
display: block; font-size: 11px; color: var(--text-ter);
margin-top: 2px;
}
.suggest-card {
display: flex; align-items: center; gap: 12px;
padding: 10px 6px; text-decoration: none; color: inherit;
border-radius: 10px;
}
.suggest-card + .suggest-card { border-top: 1px solid rgba(0,0,0,0.06); }
.suggest-info { flex: 1; min-width: 0; }
.suggest-name {
font-size: 14px; font-weight: 700; color: var(--text-pri);
}
.suggest-star { margin-left: 4px; font-size: 12px; }
/* Reason badge on the unified Reach-out queue. Color hints at urgency:
red-ish for overdue, amber for cold, neutral for AI suggestions. */
.reach-reason {
display: inline-block;
margin-left: 6px;
font-size: 10px; font-weight: 600;
padding: 1px 7px; border-radius: 999px;
letter-spacing: 0.2px;
vertical-align: middle;
}
.reach-reason-overdue { background: rgba(220, 38, 38, 0.10); color: #C83030; }
.reach-reason-suggested { background: rgba(196, 113, 79, 0.12); color: var(--primary, #C4714F); }
.reach-reason-cold { background: rgba(217, 119, 6, 0.10); color: #B86200; }
/* Connected calendar account emails — keep them visually subdued so the
long address doesn't dominate the row. */
.integration-email {
font-size: 12px;
font-weight: 500;
color: var(--text-sec, #6B5D52);
word-break: break-all;
}
/* Business card OCR — sits above the Add Person form fields, dashed
outline so it reads as an optional shortcut, not the primary path. */
.ocr-card-row { padding: 8px 16px 0; }
.btn-ocr-scan {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px;
background: rgba(196, 113, 79, 0.06);
border: 1.5px dashed rgba(196, 113, 79, 0.35);
border-radius: 12px;
color: var(--primary, #C4714F);
font-size: 14px; font-weight: 600;
cursor: pointer; transition: background 0.15s;
}
.btn-ocr-scan:hover:not(:disabled) { background: rgba(196, 113, 79, 0.12); }
.btn-ocr-scan:disabled { opacity: 0.6; cursor: wait; }
.ocr-status {
margin: 8px 16px 0;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
background: rgba(34, 139, 34, 0.08);
color: #1f7a1f;
}
.ocr-status-loading { background: rgba(196, 113, 79, 0.10); color: var(--primary, #C4714F); }
.ocr-status-error { background: rgba(220, 38, 38, 0.10); color: #C83030; }
@media (prefers-color-scheme: dark) {
.ocr-status { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.ocr-status-loading{ background: rgba(196, 113, 79, 0.18); color: #fbcfb6; }
.ocr-status-error { background: rgba(252, 165, 165, 0.18); color: #fca5a5; }
}
/* ── Favorite contact CTA on person card ────────────────────────── */
.favorite-cta {
display: flex; align-items: center; gap: 14px;
margin: 14px 16px 8px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(196, 113, 79, 0.16), rgba(196, 113, 79, 0.06));
border: 1.5px solid rgba(196, 113, 79, 0.32);
border-radius: 16px;
color: var(--text);
text-decoration: none;
cursor: pointer;
width: calc(100% - 32px);
text-align: left;
font-family: inherit;
transition: transform 0.1s, box-shadow 0.15s;
}
.favorite-cta:hover { box-shadow: 0 4px 16px rgba(196, 113, 79, 0.25); }
.favorite-cta:active { transform: scale(0.98); }
.favorite-cta-icon { font-size: 28px; flex: 0 0 auto; }
.favorite-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.favorite-cta-label {
font-size: 14px; font-weight: 700; color: var(--primary, #C4714F);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.favorite-cta-sub {
font-size: 11px; color: var(--text-sec);
}
.favorite-cta-chevron { color: var(--primary, #C4714F); font-size: 22px; flex: 0 0 auto; }
/* ── Share form: "Best way to reach me" picker ─────────────────── */
.share-favorite-block {
margin: 16px 0 4px;
padding: 14px;
background: rgba(196, 113, 79, 0.06);
border: 1px solid rgba(196, 113, 79, 0.20);
border-radius: 14px;
}
.share-favorite-title {
font-size: 14px; font-weight: 700; color: var(--text);
margin-bottom: 4px;
}
.share-favorite-desc {
font-size: 12px; color: var(--text-sec);
margin-bottom: 10px;
line-height: 1.4;
}
.share-favorite-options {
display: flex; flex-direction: column; gap: 6px;
}
.share-favorite-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--surface, #fff);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
font-size: 14px;
transition: background 0.12s, border-color 0.12s;
}
.share-favorite-row:has(.share-favorite-radio:checked) {
background: rgba(196, 113, 79, 0.10);
border-color: rgba(196, 113, 79, 0.50);
}
.share-favorite-radio { accent-color: var(--primary, #C4714F); cursor: pointer; }
.share-favorite-row-icon { font-size: 18px; }
.share-favorite-row-text { font-weight: 500; }
/* ── User-defined tags ──────────────────────────────────────────── */
.tag.tag-user {
background: rgba(124, 58, 237, 0.10);
color: #6b21a8;
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.tag.tag-user { background: rgba(196, 181, 253, 0.18); color: #ddd6fe; }
}
.detail-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 8px;
}
.detail-tag {
background: rgba(124, 58, 237, 0.10);
color: #6b21a8;
font-size: 12px; font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.detail-tag { background: rgba(196, 181, 253, 0.18); color: #ddd6fe; }
}
.tag-filter-row { padding-top: 4px; }
.filter-chip-tag {
border-color: rgba(124, 58, 237, 0.30);
color: #6b21a8;
}
.filter-chip-tag.active {
background: rgba(124, 58, 237, 0.15);
border-color: rgba(124, 58, 237, 0.45);
}
.filter-chip-tag-clear {
border-style: dashed;
color: var(--text-ter);
}
@media (prefers-color-scheme: dark) {
.filter-chip-tag { color: #ddd6fe; border-color: rgba(196, 181, 253, 0.30); }
.filter-chip-tag.active{ background: rgba(196, 181, 253, 0.20); }
}
.form-hint {
font-size: 12px; color: var(--text-ter);
margin-top: 4px;
}
/* ── Follow-up action sheet (post-save in log) ──────────────────── */
.follow-up-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.follow-up-action {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 8px;
background: rgba(196, 113, 79, 0.06);
border: 1px solid rgba(196, 113, 79, 0.18);
border-radius: 12px;
text-decoration: none;
color: var(--text);
font-size: 13px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.follow-up-action:hover { background: rgba(196, 113, 79, 0.12); }
.follow-up-action:active { transform: scale(0.97); }
.follow-up-icon { font-size: 22px; }
.follow-up-label { font-weight: 600; text-align: center; line-height: 1.2; }
.follow-up-disabled { opacity: 0.4; pointer-events: none; }
.follow-up-done {
width: 100%;
padding: 12px;
background: var(--primary, #C4714F);
color: #fff;
border: none; border-radius: 12px;
font-size: 14px; font-weight: 600;
cursor: pointer;
}
/* ── Today's people — top-of-home roster ────────────────────────── */
.today-people-card {
background: var(--card, var(--surface));
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px 14px;
margin: 12px 16px 4px;
}
.today-people-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
}
.today-people-title { font-size: 15px; font-weight: 700; color: var(--text); }
.today-people-sub { font-size: 11px; color: var(--text-ter); }
.today-people-row {
display: flex; gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.today-people-row::-webkit-scrollbar { display: none; }
.today-people-chip {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center;
width: 64px;
text-decoration: none; color: var(--text);
}
.today-people-chip .avatar { position: relative; margin-bottom: 4px; }
.today-people-icon {
position: absolute;
bottom: -2px; right: -2px;
background: var(--surface, #fff);
border-radius: 50%;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
border: 2px solid var(--surface, #fff);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.today-people-name {
font-size: 11px; font-weight: 600; color: var(--text);
text-align: center;
max-width: 64px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.today-people-reason {
font-size: 10px; color: var(--text-ter);
text-align: center;
max-width: 64px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 1px;
}
/* ── TOTP / 2FA setup screens ────────────────────────────────────── */
.totp-step {
display: flex; gap: 14px;
padding: 16px;
margin: 12px 16px;
background: var(--card, var(--surface));
border-radius: 14px;
border: 1px solid var(--line);
}
.totp-step-num {
flex: 0 0 28px;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--primary, #C4714F); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.totp-step-body { flex: 1; min-width: 0; }
.totp-step-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.totp-step-desc { font-size: 13px; color: var(--text-sec); line-height: 1.4; }
.totp-qr-wrap {
display: flex; justify-content: center; padding: 16px 0 8px;
}
.totp-qr {
width: 200px; height: 200px;
background: #fff; padding: 8px; border-radius: 8px;
border: 1px solid var(--line);
}
.totp-secret-btn {
display: flex; flex-direction: column; align-items: center; gap: 4px;
width: 100%;
padding: 10px 14px;
background: rgba(196, 113, 79, 0.06);
border: 1px dashed rgba(196, 113, 79, 0.30);
border-radius: 10px;
cursor: pointer;
margin-top: 4px;
}
.totp-secret-label { font-size: 11px; color: var(--text-ter); font-weight: 600; }
.totp-secret-value {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 13px; font-weight: 600;
color: var(--text);
word-break: break-all;
letter-spacing: 0.5px;
}
.totp-secret-copy { font-size: 11px; color: var(--primary, #C4714F); }
.totp-confirm-form { margin-top: 10px; }
.totp-code-input {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 28px; font-weight: 700;
letter-spacing: 8px;
text-align: center;
width: 100%;
padding: 14px;
border: 1px solid var(--line);
background: var(--card, var(--surface));
color: var(--text);
border-radius: 12px;
}
/* "2FA enabled" success card + recovery codes */
.totp-done-card {
text-align: center;
padding: 32px 16px 16px;
}
.totp-done-icon { font-size: 56px; }
.totp-done-title { font-size: 24px; font-weight: 800; margin: 8px 0 6px; color: var(--text); }
.totp-done-sub { color: var(--text-sec); font-size: 14px; line-height: 1.5; }
.totp-backup-card {
margin: 16px;
padding: 16px;
background: rgba(217, 119, 6, 0.06);
border: 1px solid rgba(217, 119, 6, 0.25);
border-radius: 14px;
}
.totp-backup-title { font-weight: 700; font-size: 15px; color: #B86200; margin-bottom: 6px; }
.totp-backup-desc { font-size: 13px; color: var(--text-sec); line-height: 1.5; margin-bottom: 14px; }
.totp-backup-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
margin-bottom: 12px;
}
.totp-backup-code {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 14px; font-weight: 600; letter-spacing: 1px;
background: rgba(255, 255, 255, 0.6);
padding: 8px 10px;
border-radius: 6px;
text-align: center;
color: var(--text);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.totp-backup-actions {
display: flex; gap: 8px;
}
.totp-backup-actions .btn { flex: 1; }
@media (prefers-color-scheme: dark) {
.totp-backup-card { background: rgba(252, 211, 77, 0.10); border-color: rgba(252, 211, 77, 0.25); }
.totp-backup-title { color: #fde68a; }
.totp-backup-code { background: rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.06); }
.totp-qr { background: #fff; } /* QR must stay light for scanner contrast */
}
@media (prefers-color-scheme: dark) {
.reach-reason-overdue { background: rgba(252, 165, 165, 0.18); color: #fca5a5; }
.reach-reason-suggested { background: rgba(251, 191, 36, 0.12); color: #fcd34d; }
.reach-reason-cold { background: rgba(252, 211, 77, 0.12); color: #fde68a; }
}
.suggest-meta {
font-size: 12px; color: var(--text-sec);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-arrow {
color: var(--text-ter); font-size: 18px;
}
/* ── Page transitions (View Transitions API, Chromium 126+) ───── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: pp-fade-out 180ms ease forwards;
}
::view-transition-new(root) {
animation: pp-fade-in 220ms ease forwards;
}
@keyframes pp-fade-out { to { opacity: 0; } }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none !important; }
}
/* Mic-button first-use tooltip */
.big-mic-wrap { position: relative; }
.mic-firsttime-tip {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: calc(100% + 10px); z-index: 5;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: #1f2937; color: #fff; border-radius: 12px;
font-size: 13px; max-width: 90%;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
animation: mic-tip-bob 1.6s ease-in-out infinite;
}
.mic-firsttime-tip .mic-tip-arrow {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: -6px; width: 12px; height: 12px;
background: #1f2937; rotate: 45deg;
}
.mic-tip-close {
background: none; border: none; color: rgba(255,255,255,0.7);
cursor: pointer; padding: 0 2px; font-size: 14px;
}
@keyframes mic-tip-bob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
/* Big record button below textarea (new layout) */
.big-mic-btn {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 88px; margin-top: 12px;
border-radius: 16px; cursor: pointer; user-select: none;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
border: 2px dashed var(--line);
transition: background 0.15s, border-color 0.15s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.big-mic-btn:hover { background: var(--surface-alt); border-color: var(--text-ter); }
.big-mic-btn:active { transform: scale(0.985); }
.big-mic-btn.disabled { opacity: 0.5; pointer-events: none; }
.big-mic-icon { font-size: 40px; line-height: 1; }
/* Transcription status (spinner + label) */
.note-status {
display: flex; align-items: center; gap: 8px;
margin-top: 8px; padding: 8px 12px;
background: var(--surface-alt); border-radius: 8px;
font-size: 13px; color: var(--text-sec);
}
.note-status-spinner {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid var(--text-ter); border-top-color: transparent;
animation: note-spin 0.9s linear infinite;
flex-shrink: 0;
}
@keyframes note-spin { to { transform: rotate(360deg); } }
/* Edit meeting form */
.em-type-row { display: flex; gap: 8px; flex-wrap: wrap; }
.em-type-chip {
padding: 8px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
background: var(--surface-alt); color: var(--text-sec); cursor: pointer;
border: 2px solid transparent; transition: all 0.15s;
}
.em-type-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.edit-clip { margin: 0 16px 10px; }
.edit-clip-header {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
/* Star action button in action-row (kept for backward compat) */
.star-action { color: var(--text-sec); }
.star-action.starred { color: #F59E0B; }
.star-action .action-icon { transition: transform 0.2s; }
.star-action.starred .action-icon { transform: scale(1.2); }
/* Page subtitle */
.page-subtitle {
margin: -8px 16px 12px;
font-size: 13px;
color: var(--text-ter);
line-height: 1.4;
}
/* ── Utilities ──────────────────────────────────────────────────────── */
.hidden { display: none !important; }
/* ── Recording pulse ─────────────────────────────────────────────── */
.recording-pulse {
display: inline-block;
color: #ef4444;
animation: blink 0.8s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
/* ── Processing card ─────────────────────────────────────────────── */
.processing-card {
margin: 12px 16px;
padding: 20px;
background: var(--surface);
border-radius: var(--radius-card);
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--shadow-card);
}
.processing-spinner {
width: 22px; height: 22px; flex-shrink: 0;
border: 2.5px solid var(--line);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-text { font-size: 14px; color: var(--text-sec); }
/* ── Summary confirmation card ───────────────────────────────────── */
.summary-card {
margin: 12px 16px;
background: var(--surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
border: 1.5px solid rgba(196,113,79,0.2);
}
.summary-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--line);
}
.summary-card-title {
font-size: 13px; font-weight: 700;
color: var(--primary); letter-spacing: 0.3px;
}
.summary-duration { font-size: 12px; color: var(--text-ter); }
.summary-bullets { padding: 12px 16px 8px; }
.summary-bullet {
display: flex; gap: 8px; align-items: flex-start;
padding: 5px 0;
}
.bullet-dot { color: var(--primary); font-size: 15px; flex-shrink: 0; line-height: 1.5; }
.bullet-text {
font-size: 14px; color: var(--text); line-height: 1.5;
flex: 1; outline: none;
border-bottom: 1px solid transparent;
}
.bullet-text:focus { border-bottom-color: var(--primary); }
.summary-full-toggle {
padding: 8px 16px;
font-size: 12px; color: var(--primary);
cursor: pointer; font-weight: 600;
}
.summary-full-text {
padding: 8px 16px 12px;
font-size: 13px; color: var(--text-sec);
line-height: 1.6; white-space: pre-wrap;
background: var(--surface-alt);
}
.summary-actions {
display: flex; gap: 8px;
padding: 12px 16px 16px;
border-top: 1px solid var(--line);
}
.summary-btn-primary {
flex: 1; padding: 12px;
background: var(--primary); color: #fff;
border-radius: var(--radius-btn);
font-size: 15px; font-weight: 600;
border: none; cursor: pointer;
}
.summary-btn-secondary {
padding: 12px 18px;
background: var(--surface-alt); color: var(--text-sec);
border-radius: var(--radius-btn);
font-size: 15px; font-weight: 500;
border: none; cursor: pointer;
}
/* ── Clip card updates (summary + full toggle) ───────────────────── */
.clip-bullet { font-size: 13px; color: var(--text); line-height: 1.6; padding: 2px 0; }
.clip-summary { padding: 6px 0; }
.clip-toggle-full {
font-size: 12px; color: var(--primary);
font-weight: 600; cursor: pointer; padding: 4px 0 2px;
}
.clip-full-text {
font-size: 12px; color: var(--text-sec);
white-space: pre-wrap; line-height: 1.5;
padding: 8px 0 4px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.clip-bullet-view { font-size: 13px; color: var(--text); line-height: 1.6; }
/* ── Input mode toggle (Record / Write) ─────────────────────────── */
.input-mode-toggle {
display: flex; gap: 0; margin: 0 16px 0;
background: var(--card); border-radius: var(--radius-btn);
padding: 3px; border: 1px solid var(--line);
}
.input-mode-btn {
flex: 1; padding: 8px 0; font-size: 14px; font-weight: 600;
background: transparent; border: none; border-radius: calc(var(--radius-btn) - 2px);
color: var(--text-sec); cursor: pointer; transition: all .2s;
}
.input-mode-btn.active {
background: var(--primary); color: #fff;
}
/* ── Write mode panel ───────────────────────────────────────────── */
.write-section {
padding: 16px 16px 4px;
}
.write-textarea {
width: 100%; min-height: 140px; resize: vertical;
font-size: 15px; line-height: 1.6;
}
.write-add-btn {
display: block; width: 100%; margin-top: 10px;
padding: 12px; border-radius: var(--radius-btn);
background: var(--primary); color: #fff;
font-size: 15px; font-weight: 600;
border: none; cursor: pointer;
}
/* ── Weekly stats banner ────────────────────────────────────────── */
.weekly-stats-banner {
margin: 0 16px 16px;
background: linear-gradient(135deg, var(--primary) 0%, #a0522d 100%);
color: #fff;
border-radius: var(--radius-card);
padding: 14px 16px;
font-size: 15px;
line-height: 1.6;
}
/* ── AI Summary card ────────────────────────────────────────────── */
.ai-summary-card {
margin: 0 16px 16px;
background: var(--card);
border-radius: var(--radius-card);
padding: 14px 16px;
border: 1px solid var(--line);
}
.ai-summary-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.ai-summary-title {
font-size: 13px; font-weight: 700;
color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em;
}
.ai-summary-actions { display: flex; gap: 6px; }
.ai-summary-btn {
font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 20px;
border: 1px solid var(--line); background: transparent;
color: var(--text-sec); cursor: pointer;
}
.ai-summary-gen-btn {
background: var(--primary); color: #fff; border-color: var(--primary);
}
.ai-summary-text { font-size: 14px; color: var(--text); }
.ai-summary-bullet {
display: flex; gap: 6px; line-height: 1.6;
padding: 3px 0; font-size: 14px; color: var(--text);
}
.ai-summary-empty {
font-size: 13px; color: var(--text-sec); font-style: italic;
}
.ai-summary-textarea {
width: 100%; font-size: 14px; line-height: 1.6;
border: 1px solid var(--line); border-radius: 8px;
padding: 10px; background: var(--bg); color: var(--text);
resize: vertical;
}
.ai-summary-edit-btns {
display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.ai-summary-save-btn {
background: var(--primary); color: #fff; border-color: var(--primary);
}
/* ── Log meeting section button ──────────────────────────────────── */
.log-meeting-section { padding: 4px 16px 16px; }
.log-meeting-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 14px;
background: var(--primary); color: #fff;
border-radius: var(--radius-card); font-size: 15px; font-weight: 600;
text-decoration: none;
}
/* ── See-all meetings button ─────────────────────────────────────── */
.see-all-btn {
display: block; width: calc(100% - 32px); margin: 4px 16px 16px;
padding: 12px; text-align: center;
background: var(--surface-alt); border-radius: var(--radius-btn);
font-size: 14px; font-weight: 600; color: var(--text-sec); cursor: pointer;
}
/* ── Select person page ─────────────────────────────────────────── */
/* Recent contacts as quick-tap chips at the top — 1 tap to log a meeting
with someone you saw within the last few weeks (the common case). */
.sp-recent-row { padding: 12px 16px 4px; }
.sp-recent-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text-ter);
margin-bottom: 8px;
}
.sp-recent-chips {
display: flex; gap: 12px; overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.sp-recent-chips::-webkit-scrollbar { display: none; }
.sp-recent-chip {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-decoration: none; color: var(--text);
padding: 4px;
width: 64px;
}
.sp-recent-name {
font-size: 11px; font-weight: 500; color: var(--text-sec);
text-align: center;
max-width: 64px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-search-wrap { padding: 12px 16px 8px; }
.sp-search {
width: 100%; padding: 10px 14px; border-radius: var(--radius-btn);
border: 1px solid var(--line); background: var(--card); color: var(--text);
font-size: 15px;
}
.sp-new-person-btn {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; color: var(--primary);
font-size: 15px; font-weight: 600; text-decoration: none;
border-bottom: 1px solid var(--line);
}
.sp-new-icon { font-size: 20px; }
.sp-list { padding-bottom: 80px; }
.sp-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none; color: var(--text);
border-bottom: 1px solid var(--line);
}
.sp-info { flex: 1; min-width: 0; }
.sp-name { font-size: 15px; font-weight: 600; }
.sp-sub { font-size: 12px; color: var(--text-sec); margin-top: 1px; }
.sp-last { font-size: 12px; color: var(--text-sec); white-space: nowrap; }
/* ── Birthday section ───────────────────────────────────────────── */
.birthday-section { padding: 8px 16px 4px; display: flex; flex-direction: column; gap: 8px; }
.birthday-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; background: #fff8f0;
border-radius: var(--radius-card); border: 1px solid #f5c896;
text-decoration: none; color: var(--text);
}
.birthday-info { flex: 1; min-width: 0; }
.birthday-name { font-size: 15px; font-weight: 600; }
.birthday-sub { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.birthday-badge { font-size: 22px; }
/* ── Cold contacts badge ─────────────────────────────────────────── */
.cold-badge {
font-size: 11px; font-weight: 600; color: var(--text-sec);
background: var(--surface-alt); border-radius: 20px;
padding: 3px 9px; white-space: nowrap;
}
/* ── Reminder context line ───────────────────────────────────────── */
.reminder-context {
font-size: 13px; color: var(--text-sec);
padding: 6px 0 4px; line-height: 1.5;
}
/* ── Push permission banner ──────────────────────────────────────── */
.push-banner {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; background: #e8f4fd;
border-radius: var(--radius-card); margin: 8px 16px;
font-size: 13px;
}
.push-banner-btn {
margin-left: auto; padding: 5px 14px;
background: var(--primary); color: #fff;
border-radius: 20px; font-size: 13px; font-weight: 600; border: none; cursor: pointer;
}
.push-banner-dismiss {
padding: 4px 8px; background: none; border: none;
color: var(--text-sec); font-size: 15px; cursor: pointer;
}
/* ── Notes match tag ─────────────────────────────────────────────── */
.tag-notes-match { background: #e8f4fd; color: #0284C7; }
/* ── AI suggestions card ─────────────────────────────────────────── */
.ai-suggestions-card {
margin: 0 16px 12px;
background: var(--card); border-radius: var(--radius-card);
padding: 14px; border: 1px solid var(--line);
}
.ai-suggestions-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px;
}
.ai-suggestions-title {
font-size: 13px; font-weight: 700;
color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em;
}
.ai-suggestions-body { margin-top: 4px; }
/* ── Log previous summary card ───────────────────────────────────── */
.log-prev-summary {
margin: 0 16px 8px;
background: var(--surface-alt); border-radius: var(--radius-card);
border: 1px solid var(--line); overflow: hidden;
}
.log-prev-header {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 11px 14px;
background: none; border: none; cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text-sec);
text-align: left;
}
.prev-chevron {
font-size: 10px; transition: transform .2s;
}
.log-prev-summary.open .prev-chevron { transform: rotate(180deg); }
.log-prev-body {
display: none; padding: 0 14px 12px;
}
.log-prev-summary.open .log-prev-body { display: block; }
.log-prev-bullet {
font-size: 13px; color: var(--text); line-height: 1.6; padding: 2px 0;
}
.log-prev-date {
font-size: 11px; color: var(--text-sec); margin-top: 6px;
}
/* ── Relation meta row (depth score + category chips) ────────── */
.relation-meta-row {
padding: 6px 16px 10px;
display: flex; flex-direction: column; gap: 8px;
}
.depth-score-wrap {
display: flex; align-items: center; gap: 8px;
}
.depth-score-label {
font-size: 11px; font-weight: 700; color: var(--text-sec);
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.depth-score-bar {
flex: 1; height: 5px; background: var(--line);
border-radius: 99px; overflow: hidden;
}
.depth-score-fill {
height: 100%; background: var(--primary); border-radius: 99px;
transition: width .4s ease;
}
.depth-score-pct {
font-size: 11px; font-weight: 600; color: var(--text-sec); white-space: nowrap;
}
.category-chips {
display: flex; gap: 4px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.category-chips::-webkit-scrollbar { display: none; }
.cat-chip {
flex-shrink: 0; white-space: nowrap;
font-size: 11px; font-weight: 600; padding: 4px 9px;
border-radius: 18px; border: 1px solid var(--line);
background: transparent; color: var(--text-sec); cursor: pointer;
transition: background .15s, color .15s;
}
.cat-chip.active {
background: var(--primary); color: #fff; border-color: var(--primary);
}
/* ── Meeting templates row ──────────────────────────────────── */
.template-row {
display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 4px;
scrollbar-width: none;
}
.template-row::-webkit-scrollbar { display: none; }
.template-chip {
flex: 0 0 auto; font-size: 12px; font-weight: 600;
padding: 6px 12px; border-radius: 20px;
border: 1px solid var(--line); background: var(--surface-alt);
color: var(--text-sec); cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
.template-chip.active {
background: var(--primary); color: #fff; border-color: var(--primary);
}
/* ── Smart remind hint ──────────────────────────────────────── */
.smart-remind-hint {
font-size: 11px; color: var(--text-sec); padding: 4px 0 0 2px;
}
/* ── Edit meeting delete button ─────────────────────────────── */
.em-delete-btn {
display: block; width: calc(100% - 32px); margin: 8px 16px 0;
padding: 11px; text-align: center;
background: #fff0f0; color: #dc2626;
border: 1px solid #fca5a5; border-radius: var(--radius-btn);
font-size: 14px; font-weight: 600; cursor: pointer;
}
/* ── My Card edit page ───────────────────────────────────────── */
.mycard-profile-row {
display: flex; align-items: center; gap: 16px;
padding: 16px; background: var(--card); margin: 0 0 0;
border-bottom: 1px solid var(--line);
}
.mycard-photo-wrap {
position: relative; cursor: pointer; flex: 0 0 auto;
}
.mycard-photo {
width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
}
.mycard-photo-placeholder {
width: 72px; height: 72px; font-size: 26px;
}
.mycard-photo-edit {
position: absolute; bottom: 0; right: 0;
background: var(--primary); color: #fff;
border-radius: 50%; width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.mycard-name-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mycard-name-input {
font-size: 18px; font-weight: 700; border: none; border-bottom: 1px solid var(--line);
background: transparent; color: var(--text); padding: 2px 0; width: 100%;
}
.mycard-title-input {
font-size: 13px; color: var(--text-sec); border: none; border-bottom: 1px dashed var(--line);
background: transparent; padding: 2px 0; width: 100%;
}
.mycard-field-input {
flex: 1; border: none; background: transparent; color: var(--text);
font-size: 14px; padding: 0; min-width: 0;
}
.mycard-field-input::placeholder { color: var(--text-sec); }
.mycard-bio-input {
flex: 1; border: none; background: transparent; color: var(--text);
font-size: 14px; resize: none; padding: 0; min-width: 0;
}
.mycard-share-url {
flex: 1; font-size: 12px; color: var(--text-sec);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mycard-copy-btn {
font-size: 12px; font-weight: 600; color: var(--primary);
background: none; border: none; cursor: pointer; white-space: nowrap;
}
/* ── Public card page ────────────────────────────────────────── */
.card-page-header {
display: flex; flex-direction: column; align-items: center;
padding: 32px 24px 20px; text-align: center;
}
.card-page-avatar { margin-bottom: 14px; }
.card-page-photo {
width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--line);
}
.card-page-name { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.card-page-title { font-size: 15px; color: var(--text-sec); margin-bottom: 8px; }
.card-page-bio { font-size: 14px; color: var(--text-sec); max-width: 280px; line-height: 1.5; }
.card-page-footer {
text-align: center; font-size: 11px; color: var(--text-sec);
padding: 16px 0 8px;
}
/* ── Settings chevron ────────────────────────────────────────── */
.settings-chevron { font-size: 18px; color: var(--text-sec); }
/* ── Phone row with MAIN selector ───────────────────────────── */
.mycard-phone-row { gap: 6px; }
.mycard-main-label {
display: flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; color: var(--text-sec);
white-space: nowrap; cursor: pointer;
}
.mycard-main-label input { accent-color: var(--primary); }
.main-badge {
display: inline-block; font-size: 9px; font-weight: 800;
background: var(--primary); color: #fff;
border-radius: 4px; padding: 1px 5px; margin-left: 4px;
vertical-align: middle; letter-spacing: .04em;
}
/* ── Post-record action row (between textarea and mic) ───────── */
.post-rec-actions {
display: flex; gap: 8px; margin-top: 10px;
}
.post-rec-btn {
flex: 1; padding: 12px 14px; border-radius: 12px;
font-size: 15px; font-weight: 700; cursor: pointer;
border: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
}
.post-rec-btn-primary {
background: var(--primary, #C4714F); color: white; border-color: transparent;
}
.post-rec-btn-primary:active { transform: scale(0.985); }
.post-rec-btn-ghost {
background: var(--surface-alt); color: var(--text-pri);
border-color: var(--line);
}
.post-rec-btn-ghost:active { transform: scale(0.985); }
/* ── Clickable avatar (person photo upload) ──────────────────── */
.avatar-clickable, .avatar-photo { position: relative; }
.avatar-clickable { cursor: pointer; }
.avatar-clickable img,
.avatar-photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar-edit-hint {
position: absolute; right: 0; bottom: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--surface); color: var(--text-pri);
display: flex; align-items: center; justify-content: center;
font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: 1.5px solid white;
}
/* ── Depth info button + pulse on increase ────────────────────── */
.depth-info-btn {
background: none; border: none; cursor: pointer;
font-size: 11px; color: var(--text-ter);
padding: 0 4px; line-height: 1;
}
.depth-info-btn:hover { color: var(--text-pri); }
.depth-pulse {
animation: depth-pulse 1.1s ease-out 0.3s 1;
box-shadow: 0 0 0 0 rgba(196,113,79,0.55);
}
@keyframes depth-pulse {
0% { box-shadow: 0 0 0 0 rgba(196,113,79,0.55); }
60% { box-shadow: 0 0 0 10px rgba(196,113,79,0); }
100% { box-shadow: 0 0 0 0 rgba(196,113,79,0); }
}
/* ── Rich empty state (welcoming, multi-action) ───────────────── */
.empty-state-rich {
text-align: center; padding: 40px 24px;
}
.empty-state-rich .empty-icon {
font-size: 64px; margin-bottom: 16px; line-height: 1;
}
.empty-state-rich .empty-title {
font-size: 18px; font-weight: 800; margin-bottom: 8px;
}
.empty-state-rich .empty-desc {
font-size: 14px; color: var(--text-sec);
margin-bottom: 4px; line-height: 1.5;
}
.empty-secondary-row {
display: flex; gap: 8px; justify-content: center;
margin-top: 20px; flex-wrap: wrap;
}
.empty-link-btn {
font-size: 13px; padding: 6px 14px;
background: var(--surface-alt); color: var(--text-sec);
border-radius: 100px; text-decoration: none;
border: 1px solid var(--line);
}
.empty-link-btn:hover { background: var(--surface); }
/* ── Progressive-disclosure summary (collapsible form sections) ── */
.form-disclose {
margin: 4px 16px 8px; border-radius: 12px;
background: var(--surface-alt);
}
.form-disclose-summary {
padding: 12px 16px; cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text-sec);
user-select: none; list-style: none;
display: flex; align-items: center; gap: 6px;
}
.form-disclose-summary::-webkit-details-marker { display: none; }
.form-disclose-summary::after {
content: '▾'; margin-left: auto; transition: transform 0.18s;
}
.form-disclose[open] .form-disclose-summary::after {
transform: rotate(180deg);
}
.form-disclose .form-section { padding-bottom: 12px; }
/* Generic collapsible card (Suggestions, Notes) */
.collapsible-card { padding: 0; }
.collapsible-card > .collapsible-summary {
list-style: none; cursor: pointer; user-select: none;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
}
.collapsible-card > .collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-chevron {
font-size: 14px; color: var(--text-ter);
transition: transform 0.18s;
}
.collapsible-card[open] .collapsible-chevron { transform: rotate(180deg); }
.ai-suggestions-inner { padding: 0 16px 14px; }
.notes-card-body { padding: 0 16px 14px; }
/* Invite friends — link row */
.invite-link-row {
display: flex; gap: 8px; margin-top: 6px;
}
.invite-link-row input {
flex: 1; min-width: 0; padding: 9px 12px;
border: 1px solid var(--line); border-radius: 10px;
font-size: 13px; background: var(--surface-alt);
color: var(--text-pri); outline: none;
}
.invite-link-row .confirm-btn { padding: 9px 14px; }
/* Pull-to-refresh indicator (top-of-page) */
.ptr-indicator {
position: fixed; left: 50%; top: 0;
transform: translateY(-40px); margin-left: -16px;
width: 32px; height: 32px;
background: var(--surface); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-pri);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
opacity: 0; pointer-events: none; z-index: 60;
}
/* Home top search */
.home-search { padding: 4px 16px 8px; }
.home-search .search-bar { width: 100%; }
/* People list sort dropdown (sits next to the search bar) */
.search-form {
display: flex; gap: 8px; align-items: center;
padding: 0 16px;
/* Hard width contract — keeps the row from extending past the viewport
when the search input has a long value. min-width:0 below lets the
flex children actually shrink. */
width: 100%;
}
.search-form .search-bar {
flex: 1;
min-width: 0; /* allow shrinking inside the flex parent */
}
.search-form .search-input { min-width: 0; }
.people-sort {
flex-shrink: 0; height: 38px; padding: 0 28px 0 12px;
border-radius: 100px; border: 1px solid var(--line);
background: var(--surface); font-size: 13px; font-weight: 600;
color: var(--text-pri); cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
-webkit-appearance: none; appearance: none;
}
/* Compact variant — sits on the LEFT of the search bar, narrow enough to
keep the search input usable on a 360px-wide phone. Capping at 95px
guarantees ~210px for the search field even on a 360px screen. */
.people-sort.people-sort-compact {
height: 36px; padding: 0 22px 0 10px;
font-size: 12px; font-weight: 600;
max-width: 95px;
background-position: right 6px center;
}
/* ── Standard skeleton + spinner (loading states) ─────────────── */
.pp-skeleton {
display: block; border-radius: 8px;
background: linear-gradient(90deg,
rgba(0,0,0,0.06) 25%,
rgba(0,0,0,0.12) 50%,
rgba(0,0,0,0.06) 75%);
background-size: 200% 100%;
animation: pp-skeleton-pulse 1.4s ease-in-out infinite;
}
.pp-skeleton-line { height: 12px; margin: 6px 0; }
.pp-skeleton-line.short { width: 40%; }
.pp-skeleton-line.med { width: 70%; }
.pp-skeleton-line.long { width: 100%; }
@keyframes pp-skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.pp-spinner {
display: inline-block;
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid currentColor; border-top-color: transparent;
animation: pp-spin 0.85s linear infinite;
vertical-align: middle;
}
.pp-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.pp-spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
/* ── Toast (Snackbar) ──────────────────────────────────────────── */
.pp-toast-container {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
z-index: 9999; pointer-events: none;
display: flex; flex-direction: column-reverse; gap: 8px;
align-items: center; max-width: 92vw;
}
.pp-toast {
pointer-events: auto;
min-width: 220px; max-width: 92vw;
padding: 11px 16px; border-radius: 12px;
font-size: 14px; font-weight: 500; line-height: 1.4;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
opacity: 0; transform: translateY(12px);
transition: opacity 0.2s, transform 0.2s;
display: flex; align-items: center; gap: 10px;
}
.pp-toast.show { opacity: 1; transform: translateY(0); }
.pp-toast.success { background: #16a34a; color: #fff; }
.pp-toast.error { background: #dc2626; color: #fff; }
.pp-toast.info { background: #1f2937; color: #fff; }
.pp-toast.warning { background: #f59e0b; color: #1f1f1f; }
.pp-toast .pp-toast-icon { font-size: 16px; flex-shrink: 0; }
.pp-toast .pp-toast-msg { flex: 1; word-break: break-word; }
/* ── Email verification banner ────────────────────────────────── */
.verify-banner {
display: flex; align-items: center; gap: 8px;
margin: 8px 16px 0; padding: 10px 14px;
background: #fef3c7; color: #92400e;
border-radius: 12px; font-size: 13px;
border: 1px solid #fde68a;
}
.verify-banner span { flex: 1; }
.verify-banner a { color: #92400e; font-weight: 700; text-decoration: underline; }
.verify-banner-dismiss {
background: none; border: none; color: #92400e;
font-size: 16px; cursor: pointer; padding: 0 4px;
}
/* ── Legal pages (privacy, terms) ────────────────────────────── */
.legal-page { padding: 16px 20px 80px; }
.legal-header { margin-bottom: 20px; }
.legal-title {
font-size: 22px; font-weight: 800; margin: 12px 0 4px;
color: var(--text-pri);
}
.legal-updated {
font-size: 12px; color: var(--text-ter);
}
.legal-body {
font-size: 14px; line-height: 1.6; color: var(--text-pri);
}
.legal-body h2 {
font-size: 15px; font-weight: 700;
margin: 22px 0 8px; color: var(--text-pri);
}
.legal-body p, .legal-body ul, .legal-body ol {
margin: 0 0 10px;
}
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin-bottom: 4px; }
.legal-body a {
color: var(--primary, #C4714F); text-decoration: underline;
}
/* ── Danger zone (delete account, etc.) ──────────────────────── */
.settings-row-danger {
background: none; border: none; cursor: pointer;
display: flex; width: 100%; padding: 14px 16px;
align-items: center; gap: 12px;
text-align: left; color: #b91c1c;
}
.settings-row-danger .settings-name { color: #b91c1c; font-weight: 600; }
.settings-row-danger .settings-desc { color: #ef4444; }
.settings-row-danger .settings-chevron { color: #b91c1c; }
.delete-account-error {
background: #fef2f2; color: #b91c1c;
padding: 8px 12px; border-radius: 8px;
font-size: 13px; margin-bottom: 10px;
}
/* ── Quick note card (single-line, ≤30 chars) ────────────────── */
.quick-note-card {
background: var(--surface); border-radius: var(--radius-card, 14px);
margin: 8px 16px; padding: 12px 14px;
border: 1px solid var(--line);
}
.quick-note-header {
display: flex; align-items: center; gap: 6px;
margin-bottom: 6px; font-size: 12px; color: var(--text-sec);
font-weight: 600;
}
.quick-note-icon { font-size: 13px; }
.quick-note-title { flex: 1; }
.quick-note-saved {
color: #16a34a; font-weight: 700;
transition: opacity 0.3s;
}
.quick-note-pencil {
background: none; border: none; cursor: pointer;
font-size: 14px; padding: 2px 6px; line-height: 1;
color: var(--text-sec); border-radius: 6px;
}
.quick-note-pencil:hover { background: var(--surface-alt); }
.quick-note-display {
font-size: 14px; color: var(--text-pri);
padding: 4px 0; min-height: 22px;
word-break: break-word;
}
.quick-note-display.empty { color: var(--text-ter); font-style: italic; }
.quick-note-edit {
display: flex; align-items: center; gap: 8px;
}
.quick-note-input {
flex: 1; border: none; outline: none;
font-size: 14px; color: var(--text-pri);
background: transparent; padding: 4px 0;
border-bottom: 1.5px solid var(--primary, #C4714F);
}
.quick-note-input::placeholder { color: var(--text-ter); }
.quick-note-counter {
font-size: 11px; color: var(--text-ter);
flex-shrink: 0;
}
/* ── Intro slideshow (pre-signup) ─────────────────────────────────────────── */
.intro-body {
margin: 0;
background: linear-gradient(135deg, #FDF8F3 0%, #F5DDC8 60%, #F2C29C 100%);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
overscroll-behavior: none;
}
[data-theme="dark"] .intro-body {
background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 60%, #3a1f12 100%);
}
.intro-container {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 1;
}
.intro-skip {
position: absolute;
top: max(20px, env(safe-area-inset-top, 0px));
right: 20px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(196, 113, 79, 0.2);
color: #2C2420;
padding: 8px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
z-index: 10;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.2s, transform 0.1s;
text-decoration: none;
}
.intro-skip:hover { background: rgba(255,255,255,0.85); }
.intro-skip:active { transform: scale(0.96); }
[data-theme="dark"] .intro-skip {
background: rgba(255,255,255,0.08);
color: #FAF6F0;
border-color: rgba(255,255,255,0.12);
}
.intro-progress {
position: absolute;
top: max(28px, env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 5;
}
.intro-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(44, 36, 32, 0.22);
cursor: pointer;
transition: width 0.4s cubic-bezier(.4,0,.2,1), background 0.4s;
}
.intro-dot.active {
width: 32px;
background: #C4714F;
}
[data-theme="dark"] .intro-dot { background: rgba(255,255,255,0.22); }
[data-theme="dark"] .intro-dot.active { background: #E89B7A; }
.intro-track {
flex: 1;
display: flex;
width: 100%;
transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
touch-action: pan-y;
}
.intro-slide {
flex: 0 0 100%;
padding: max(80px, env(safe-area-inset-top)) 32px max(40px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-width: 100%;
}
.intro-illustration {
width: clamp(180px, 60vw, 260px);
height: clamp(180px, 60vw, 260px);
margin-bottom: 36px;
filter: drop-shadow(0 12px 32px rgba(196, 113, 79, 0.18));
animation: introIllusFloat 4.2s ease-in-out infinite;
}
@keyframes introIllusFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.intro-headline-primary {
font-size: clamp(22px, 5.5vw, 30px);
font-weight: 800;
line-height: 1.35;
color: #2C2420;
letter-spacing: -0.4px;
margin: 0 0 14px;
max-width: 520px;
}
.intro-headline-secondary {
font-size: clamp(13px, 3.5vw, 16px);
font-weight: 400;
line-height: 1.5;
color: rgba(44, 36, 32, 0.65);
margin: 0;
max-width: 480px;
}
[data-theme="dark"] .intro-headline-primary { color: #FAF6F0; }
[data-theme="dark"] .intro-headline-secondary { color: rgba(250, 246, 240, 0.65); }
.intro-cta {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 44px;
width: 100%;
max-width: 320px;
}
.intro-btn-primary {
background: #C4714F;
color: #FFFFFF;
padding: 16px 24px;
border-radius: 14px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
text-align: center;
border: none;
cursor: pointer;
box-shadow: 0 8px 24px rgba(196, 113, 79, 0.35);
transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}
.intro-btn-primary:hover { background: #B25E3D; box-shadow: 0 10px 28px rgba(196,113,79,0.45); }
.intro-btn-primary:active { transform: scale(0.98); }
.intro-btn-secondary {
color: rgba(44, 36, 32, 0.7);
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-align: center;
padding: 10px;
}
.intro-btn-secondary:hover { color: #2C2420; }
[data-theme="dark"] .intro-btn-secondary { color: rgba(250,246,240,0.6); }
[data-theme="dark"] .intro-btn-secondary:hover { color: #FAF6F0; }
@media (prefers-reduced-motion: reduce) {
.intro-track { transition: none; }
.intro-illustration { animation: none; }
.intro-dot { transition: none; }
}
/* ── Share form (friend-side) ────────────────────────────────────────────── */
.share-body {
margin: 0;
background: linear-gradient(180deg, #FDF8F3 0%, #FAF6F0 100%);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
}
[data-theme="dark"] .share-body { background: #1a0f0a; }
.share-shell {
max-width: 560px;
margin: 0 auto;
padding: 24px 20px max(60px, env(safe-area-inset-bottom));
}
.share-header {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 22px;
padding: 16px;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(196,113,79,0.15);
border-radius: 16px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .share-header { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.share-header-icon { flex-shrink: 0; }
.share-header-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 4px;
color: #2C2420;
line-height: 1.35;
}
.share-header-sub {
font-size: 13px;
color: #6B5D52;
margin: 0;
line-height: 1.4;
}
[data-theme="dark"] .share-header-title { color: #FAF6F0; }
[data-theme="dark"] .share-header-sub { color: rgba(250,246,240,0.65); }
.share-progress {
height: 4px;
background: rgba(196,113,79,0.15);
border-radius: 999px;
margin-bottom: 28px;
overflow: hidden;
}
.share-progress-bar {
height: 100%;
background: #C4714F;
border-radius: 999px;
transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.share-step {
display: none;
animation: shareStepIn 0.4s ease;
}
.share-step.active { display: block; }
@keyframes shareStepIn {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.share-step-title {
font-size: 22px;
font-weight: 800;
color: #2C2420;
margin: 0 0 8px;
letter-spacing: -0.4px;
}
.share-step-desc {
font-size: 14px;
color: #6B5D52;
margin: 0 0 24px;
line-height: 1.5;
}
[data-theme="dark"] .share-step-title { color: #FAF6F0; }
[data-theme="dark"] .share-step-desc { color: rgba(250,246,240,0.65); }
.share-field {
display: block;
margin-bottom: 14px;
}
.share-field span {
display: block;
font-size: 13px;
font-weight: 500;
color: #6B5D52;
margin-bottom: 6px;
}
[data-theme="dark"] .share-field span { color: rgba(250,246,240,0.7); }
.share-field input,
.share-field textarea,
.share-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid rgba(196,113,79,0.18);
border-radius: 10px;
font-size: 16px;
font-family: inherit;
background: #FFFFFF;
color: #2C2420;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.share-field input:focus,
.share-field textarea:focus,
.share-input:focus {
outline: none;
border-color: #C4714F;
box-shadow: 0 0 0 3px rgba(196,113,79,0.12);
}
.share-field textarea {
resize: vertical;
min-height: 60px;
}
[data-theme="dark"] .share-field input,
[data-theme="dark"] .share-field textarea,
[data-theme="dark"] .share-input {
background: #2c1810;
color: #FAF6F0;
border-color: rgba(255,255,255,0.12);
}
.share-fieldgroup {
margin-bottom: 22px;
padding: 16px;
background: rgba(255,255,255,0.5);
border-radius: 14px;
border: 1px solid rgba(196,113,79,0.1);
}
[data-theme="dark"] .share-fieldgroup { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.share-fieldgroup-title {
font-size: 14px;
font-weight: 600;
color: #2C2420;
margin: 0 0 12px;
}
[data-theme="dark"] .share-fieldgroup-title { color: #FAF6F0; }
.share-fieldgroup-hint {
font-size: 12px;
color: #6B5D52;
margin: -6px 0 14px;
line-height: 1.45;
padding: 8px 10px;
background: rgba(196,113,79,0.06);
border-radius: 8px;
}
[data-theme="dark"] .share-fieldgroup-hint {
color: rgba(250,246,240,0.7);
background: rgba(196,113,79,0.1);
}
.share-input-row {
display: flex;
gap: 8px;
align-items: stretch;
width: 100%;
}
.share-input-row > input {
flex: 1;
min-width: 0;
}
.share-app-btn {
flex: 0 0 auto;
padding: 0 14px;
background: rgba(196,113,79,0.1);
color: #C4714F;
border: 1px solid rgba(196,113,79,0.22);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, transform 0.1s;
font-family: inherit;
}
.share-phone-row {
display: flex;
gap: 8px;
align-items: stretch;
width: 100%;
}
.share-phone-row > input { flex: 1; min-width: 0; }
.share-country-select {
flex: 0 0 auto;
max-width: 130px;
padding: 12px 8px 12px 10px;
border: 1.5px solid rgba(196,113,79,0.18);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
background: #FFFFFF;
color: #2C2420;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 8px;
padding-right: 22px;
}
[data-theme="dark"] .share-country-select {
background-color: #2c1810;
color: #FAF6F0;
border-color: rgba(255,255,255,0.12);
}
.share-bday-row {
display: flex;
gap: 8px;
width: 100%;
}
.share-bday-row > select {
flex: 1;
min-width: 0;
padding: 12px 10px;
border: 1.5px solid rgba(196,113,79,0.18);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
background: #FFFFFF;
color: #2C2420;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
[data-theme="dark"] .share-bday-row > select {
background: #2c1810;
color: #FAF6F0;
border-color: rgba(255,255,255,0.12);
}
.share-fieldgroup-subhint {
font-size: 12px;
color: #9C8B7E;
margin: -2px 0 8px;
line-height: 1.4;
}
[data-theme="dark"] .share-fieldgroup-subhint { color: rgba(250,246,240,0.55); }
.share-collapsible {
margin-bottom: 22px;
padding: 0;
background: rgba(255,255,255,0.5);
border-radius: 14px;
border: 1px solid rgba(196,113,79,0.1);
overflow: hidden;
}
[data-theme="dark"] .share-collapsible { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.share-collapsible > summary {
cursor: pointer;
list-style: none;
padding: 14px 16px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
-webkit-user-select: none;
}
.share-collapsible > summary::-webkit-details-marker { display: none; }
.share-collapsible > summary::after {
content: '▾';
color: #C4714F;
font-size: 14px;
transition: transform 0.2s;
}
.share-collapsible[open] > summary::after { transform: rotate(180deg); }
.share-collapsible-body {
padding: 0 16px 16px;
}
.share-field-label-spacer { display: block; height: 0; }
/* ── Claim banner + claim review ─────────────────────────────────────────── */
.claim-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
margin: 8px 12px 12px;
background: linear-gradient(135deg, rgba(196,113,79,0.12), rgba(232,155,122,0.08));
border: 1px solid rgba(196,113,79,0.25);
border-radius: 12px;
font-size: 13.5px;
line-height: 1.4;
color: var(--text, #2C2420);
}
.claim-banner span { flex: 1; }
.claim-banner a {
color: #C4714F;
font-weight: 600;
text-decoration: none;
}
.claim-banner a:hover { text-decoration: underline; }
[data-theme="dark"] .claim-banner {
background: linear-gradient(135deg, rgba(196,113,79,0.18), rgba(232,155,122,0.1));
color: #FAF6F0;
}
.claim-card {
padding: 18px 16px 20px;
margin-bottom: 14px;
}
.claim-meta {
font-size: 12px;
color: var(--text-ter, #9C8B7E);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(196,113,79,0.1);
}
.claim-meta-line { line-height: 1.5; }
.claim-meta-line strong { color: var(--text-sec, #6B5D52); margin-right: 6px; }
.claim-fields {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.claim-row {
display: grid;
grid-template-columns: 26px 1fr;
gap: 10px;
align-items: center;
font-size: 14px;
color: var(--text, #2C2420);
}
.claim-row > span:first-child { font-size: 18px; text-align: center; }
.claim-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.claim-decline-link {
background: transparent;
border: none;
color: #C44747;
font-size: 13px;
cursor: pointer;
text-align: center;
padding: 8px;
font-family: inherit;
}
.claim-decline-link:hover { text-decoration: underline; }
/* Profile update diff rows */
.update-diff .diff-row {
display: grid;
grid-template-columns: 100px 1fr 28px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(196,113,79,0.06);
font-size: 13.5px;
}
.update-diff .diff-row:last-child { border-bottom: none; }
.diff-label { color: var(--text-sec, #6B5D52); font-weight: 500; }
.diff-vals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diff-old {
color: #C44747;
text-decoration: line-through;
opacity: 0.7;
}
.diff-new { color: #2C8A4F; font-weight: 500; }
.diff-new.diff-removed { color: #9C8B7E; font-style: italic; font-weight: normal; }
.diff-arrow { color: var(--text-ter, #9C8B7E); }
.diff-pick {
width: 22px;
height: 22px;
cursor: pointer;
accent-color: #C4714F;
}
[data-theme="dark"] .diff-old { color: #E89A9A; }
[data-theme="dark"] .diff-new { color: #98D9B0; }
/* ── Settings v2 — search + collapsible groups ──────────────────────────── */
.settings-search-wrap {
padding: 4px 16px 12px;
}
.settings-search {
width: 100%;
padding: 11px 14px;
border: 1px solid rgba(196,113,79,0.18);
border-radius: 12px;
font-size: 14px;
background: rgba(255,255,255,0.7);
color: var(--text, #2C2420);
-webkit-appearance: none;
appearance: none;
}
.settings-search:focus {
outline: none;
border-color: #C4714F;
box-shadow: 0 0 0 3px rgba(196,113,79,0.12);
background: #FFFFFF;
}
[data-theme="dark"] .settings-search {
background: rgba(255,255,255,0.05);
color: #FAF6F0;
border-color: rgba(255,255,255,0.12);
}
.settings-search-empty {
padding: 24px 20px;
text-align: center;
font-size: 13px;
color: var(--text-ter, #9C8B7E);
}
.settings-stage > .settings-card,
.settings-stage > .settings-collapsible {
margin-left: 16px;
margin-right: 16px;
}
details.settings-collapsible {
margin-top: 10px;
padding: 0;
background: rgba(255,255,255,0.5);
border-radius: 14px;
border: 1px solid rgba(196,113,79,0.1);
overflow: hidden;
}
[data-theme="dark"] details.settings-collapsible {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
}
details.settings-collapsible > summary {
cursor: pointer;
list-style: none;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
-webkit-user-select: none;
}
details.settings-collapsible > summary::-webkit-details-marker { display: none; }
details.settings-collapsible > summary::after {
content: '▾';
margin-left: auto;
color: #C4714F;
font-size: 12px;
transition: transform 0.2s;
}
details.settings-collapsible[open] > summary::after { transform: rotate(180deg); }
.settings-collapsible-icon { font-size: 18px; }
.settings-collapsible-title {
font-size: 14px;
font-weight: 600;
color: var(--text, #2C2420);
}
.settings-collapsible-body {
padding: 0 12px 12px;
}
.settings-collapsible-body > .settings-card {
margin: 0;
}
/* ── Reassurance message above mic ───────────────────────────────────────── */
.rec-reassure {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
margin: 8px 16px 12px;
background: rgba(196,113,79,0.06);
border: 1px solid rgba(196,113,79,0.15);
border-radius: 10px;
font-size: 12.5px;
color: var(--text-sec, #6B5D52);
line-height: 1.45;
}
.rec-reassure-icon { font-size: 16px; line-height: 1; padding-top: 1px; }
.rec-reassure-text { flex: 1; }
.rec-reassure-close {
background: none;
border: none;
color: var(--text-ter, #9C8B7E);
cursor: pointer;
font-size: 14px;
padding: 0 4px;
font-family: inherit;
}
/* ── Browser recording panel (desktop) ───────────────────────────────────── */
.rec-panel {
margin: 10px 16px 16px;
padding: 16px;
background: linear-gradient(135deg, rgba(196,113,79,0.08), rgba(232,155,122,0.05));
border: 1.5px solid rgba(196,113,79,0.25);
border-radius: 14px;
text-align: center;
}
.rec-timer {
font-size: 36px;
font-weight: 800;
color: #C4714F;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
margin-bottom: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', monospace;
}
.rec-timer-warn { color: #C44747; animation: recPulse 1s infinite; }
@keyframes recPulse { 50% { opacity: 0.5; } }
.rec-meter {
width: 100%;
max-width: 280px;
height: 6px;
background: rgba(196,113,79,0.15);
border-radius: 999px;
margin: 0 auto 14px;
overflow: hidden;
}
.rec-meter-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #C4714F, #E89B7A);
transition: width 0.1s linear;
}
.rec-stop-btn {
background: #C44747;
color: white;
border: none;
padding: 12px 28px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 14px rgba(196,71,71,0.3);
transition: transform 0.1s, box-shadow 0.2s;
}
.rec-stop-btn:hover { box-shadow: 0 6px 18px rgba(196,71,71,0.45); }
.rec-stop-btn:active { transform: scale(0.97); }
.rec-hint {
font-size: 11px;
color: var(--text-ter, #9C8B7E);
margin-top: 10px;
}
.big-mic-btn-recording {
background: rgba(196,71,71,0.1);
animation: recMicPulse 1.5s infinite;
}
@keyframes recMicPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(196,71,71,0.4); }
50% { box-shadow: 0 0 0 12px rgba(196,71,71,0); }
}
.share-app-btn:hover { background: rgba(196,113,79,0.18); }
.share-app-btn:active { transform: scale(0.96); }
[data-theme="dark"] .share-app-btn {
background: rgba(196,113,79,0.15);
color: #E89B7A;
border-color: rgba(196,113,79,0.3);
}
.share-actions {
margin-top: 24px;
display: flex;
gap: 12px;
}
.share-actions-split { justify-content: space-between; }
.share-btn-primary {
flex: 1;
padding: 14px 24px;
background: #C4714F;
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
text-align: center;
display: inline-block;
box-shadow: 0 6px 20px rgba(196,113,79,0.3);
transition: transform 0.1s, background 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.share-btn-primary:hover { background: #B25E3D; }
.share-btn-primary:active { transform: scale(0.98); }
.share-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.share-btn-secondary {
padding: 14px 20px;
background: transparent;
color: #6B5D52;
border: 1.5px solid rgba(196,113,79,0.2);
border-radius: 12px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
text-align: center;
}
[data-theme="dark"] .share-btn-secondary {
color: rgba(250,246,240,0.7);
border-color: rgba(255,255,255,0.12);
}
.share-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(196,113,79,0.12);
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.share-toggle-row:hover { background: rgba(255,255,255,0.95); }
[data-theme="dark"] .share-toggle-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .share-toggle-row:hover { background: rgba(255,255,255,0.08); }
.share-toggle-info { display: flex; align-items: center; gap: 12px; }
.share-toggle-icon { font-size: 22px; }
.share-toggle-label { font-size: 13px; font-weight: 600; color: #6B5D52; }
.share-toggle-value { font-size: 15px; color: #2C2420; margin-top: 2px; }
[data-theme="dark"] .share-toggle-label { color: rgba(250,246,240,0.6); }
[data-theme="dark"] .share-toggle-value { color: #FAF6F0; }
.share-toggle-checkbox {
width: 44px;
height: 24px;
appearance: none;
-webkit-appearance: none;
background: rgba(0,0,0,0.15);
border-radius: 999px;
position: relative;
cursor: pointer;
transition: background 0.2s;
}
.share-toggle-checkbox::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.share-toggle-checkbox:checked { background: #C4714F; }
.share-toggle-checkbox:checked::after { transform: translateX(20px); }
.share-empty-msg {
text-align: center;
padding: 24px;
color: #6B5D52;
font-size: 14px;
}
.share-preview-card {
padding: 20px;
background: rgba(255,255,255,0.85);
border: 1.5px solid #C4714F;
border-radius: 16px;
box-shadow: 0 8px 28px rgba(196,113,79,0.15);
}
[data-theme="dark"] .share-preview-card { background: rgba(255,255,255,0.05); }
.share-preview-name {
font-size: 22px;
font-weight: 800;
color: #2C2420;
margin-bottom: 6px;
}
[data-theme="dark"] .share-preview-name { color: #FAF6F0; }
.share-preview-note {
font-size: 14px;
color: #6B5D52;
font-style: italic;
margin-bottom: 18px;
line-height: 1.5;
}
.share-preview-fields {
display: flex;
flex-direction: column;
gap: 10px;
}
.share-preview-row {
display: grid;
grid-template-columns: 28px 90px 1fr;
gap: 10px;
align-items: center;
padding: 6px 0;
font-size: 14px;
}
.share-preview-icon { font-size: 20px; }
.share-preview-label { color: #6B5D52; font-weight: 500; }
.share-preview-value { color: #2C2420; font-weight: 500; word-break: break-all; }
[data-theme="dark"] .share-preview-label { color: rgba(250,246,240,0.6); }
[data-theme="dark"] .share-preview-value { color: #FAF6F0; }
.share-success { text-align: center; padding: 40px 0; }
.share-success-icon { font-size: 64px; margin-bottom: 20px; animation: shareSuccessBounce 0.8s ease; }
@keyframes shareSuccessBounce {
0% { transform: scale(0); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.share-viral-card {
margin-top: 36px;
padding: 24px;
background: linear-gradient(135deg, rgba(196,113,79,0.08), rgba(232,155,122,0.08));
border: 1px solid rgba(196,113,79,0.18);
border-radius: 16px;
text-align: center;
}
/* "What is People Person?" link at the top of share form Step 1 — shown
above the name input so the friend can preview before typing. */
.share-tour-top {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(196, 113, 79, 0.08);
border: 1px solid rgba(196, 113, 79, 0.20);
border-radius: 999px;
color: var(--primary, #C4714F);
font-size: 12px; font-weight: 600;
text-decoration: none;
margin-bottom: 16px;
}
/* Channel picker grid (Step 1) — small toggle chips with icon + label.
Shrunk just enough that a 2-column grid fits comfortably on a 360px
phone with 16px outer padding. */
.channel-pick-block {
margin-top: 18px;
}
.channel-pick-title {
font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.channel-pick-hint {
font-size: 12px; color: var(--text-sec); margin-bottom: 12px;
}
.channel-pick-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.channel-pick-btn {
display: flex; align-items: center; gap: 8px;
padding: 12px 12px;
background: var(--surface, #fff);
border: 1.5px solid var(--line);
border-radius: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 14px; font-weight: 600;
color: var(--text);
transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.channel-pick-btn:hover { border-color: rgba(196, 113, 79, 0.35); }
.channel-pick-btn:active { transform: scale(0.97); }
.channel-pick-btn.selected {
border-color: var(--primary, #C4714F);
background: rgba(196, 113, 79, 0.10);
color: var(--primary, #C4714F);
}
.channel-pick-icon { font-size: 20px; flex: 0 0 auto; }
.channel-pick-label { flex: 1; min-width: 0; }
/* Merge review (share submission duplicate) ─────────────────────── */
.merge-suggest-banner {
display: flex; align-items: center; gap: 12px;
margin: 12px 16px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(74, 158, 196, 0.12), rgba(74, 158, 196, 0.04));
border: 1.5px solid rgba(74, 158, 196, 0.30);
border-radius: 14px;
color: var(--text);
text-decoration: none;
}
.merge-suggest-icon { font-size: 22px; flex: 0 0 auto; }
.merge-suggest-text { flex: 1; min-width: 0; }
.merge-suggest-title { font-size: 14px; font-weight: 700; color: #2563eb; display: block; }
.merge-suggest-sub { font-size: 12px; color: var(--text-sec); display: block; }
.merge-suggest-chev { color: #2563eb; font-size: 22px; flex: 0 0 auto; }
.merge-intro {
margin: 12px 16px;
padding: 12px 14px;
background: rgba(74, 158, 196, 0.06);
border-radius: 10px;
font-size: 13px; line-height: 1.5;
}
.merge-intro p { margin: 0 0 6px; }
.merge-intro-sub { color: var(--text-sec); font-size: 12px; }
.merge-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 0 16px 4px;
}
.merge-col-header {
display: flex; align-items: center; gap: 8px;
padding: 10px;
background: var(--card, var(--surface));
border-radius: 10px;
font-size: 11px;
}
.merge-col-existing { border: 1.5px solid var(--line); }
.merge-col-incoming { border: 1.5px solid rgba(74, 158, 196, 0.30); }
.merge-col-title { font-weight: 700; color: var(--text-ter); text-transform: uppercase; letter-spacing: 0.5px; }
.merge-col-sub { font-size: 12px; font-weight: 600; color: var(--text); }
.merge-form { padding-bottom: 32px; }
.merge-row {
margin: 8px 16px;
padding: 12px;
background: var(--card, var(--surface));
border: 1px solid var(--line);
border-radius: 12px;
}
.merge-row-label {
font-size: 11px; font-weight: 700;
color: var(--text-ter); text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 8px;
}
.merge-row-options {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.merge-option {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px;
background: rgba(0,0,0,0.02);
border: 1.5px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.merge-option:has(input:checked) {
border-color: var(--primary, #C4714F);
background: rgba(196, 113, 79, 0.08);
}
.merge-option-default {
border-color: rgba(196, 113, 79, 0.20);
}
.merge-option input { margin-top: 3px; accent-color: var(--primary, #C4714F); flex: 0 0 auto; }
.merge-option-value {
font-size: 13px; font-weight: 500; color: var(--text);
word-break: break-word; line-height: 1.4;
flex: 1; min-width: 0;
}
.merge-row-same { opacity: 0.6; }
.merge-actions { padding: 16px 16px 8px; }
.merge-footnote {
font-size: 11px; color: var(--text-ter); padding: 0 16px;
text-align: center; line-height: 1.5;
}
.share-viral-card h3 {
font-size: 22px;
font-weight: 800;
color: #2C2420;
margin: 0 0 10px;
letter-spacing: -0.4px;
}
.share-viral-card p {
font-size: 14px;
color: #6B5D52;
margin: 0 0 20px;
line-height: 1.5;
}
.share-optional {
font-size: 12px;
font-weight: 400;
color: #9C8B7E;
margin-left: 4px;
}
[data-theme="dark"] .share-optional { color: rgba(250,246,240,0.5); }
.share-manage-header {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 16px;
}
.share-manage-title {
font-size: 18px;
font-weight: 700;
margin: 0;
color: var(--text, #2C2420);
letter-spacing: -0.2px;
text-align: left;
}
.share-manage-header .page-back {
font-size: 22px;
text-decoration: none;
color: var(--text, #2C2420);
padding: 0 4px;
}
[data-theme="dark"] .share-viral-card h3 { color: #FAF6F0; }
[data-theme="dark"] .share-viral-card p { color: rgba(250,246,240,0.65); }
.share-invalid-shell {
text-align: center;
padding-top: 80px;
}
.share-invalid-icon {
font-size: 64px;
margin-bottom: 24px;
}
/* ── Share manage (Jason-side) ───────────────────────────────────────────── */
.share-manage-intro p {
font-size: 14px;
color: var(--text-sec, #6B5D52);
line-height: 1.5;
margin: 0 0 20px;
padding: 14px 16px;
background: rgba(196,113,79,0.06);
border-radius: 10px;
}
.share-create-card { padding: 16px; }
.share-section-title {
font-size: 15px;
font-weight: 700;
margin: 0 0 14px;
color: var(--text, #2C2420);
}
.share-create-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.share-create-row .share-input { flex: 1; min-width: 200px; }
.share-create-row .share-btn-primary {
flex: 0 0 auto;
padding: 12px 20px;
font-size: 14px;
box-shadow: none;
}
.share-help-text {
font-size: 12px;
color: var(--text-ter, #9C8B7E);
margin-top: 10px;
line-height: 1.45;
}
.share-link-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(196,113,79,0.08);
flex-wrap: wrap;
gap: 12px;
}
.share-link-row:last-child { border-bottom: none; }
.share-link-info { flex: 1; min-width: 0; }
.share-link-label {
font-size: 15px;
font-weight: 600;
color: var(--text, #2C2420);
}
.share-link-meta {
font-size: 12px;
color: var(--text-ter, #9C8B7E);
margin-top: 3px;
}
.share-link-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.share-link-btn {
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
background: rgba(196,113,79,0.08);
color: #C4714F;
border: none;
border-radius: 8px;
cursor: pointer;
}
.share-link-btn:hover { background: rgba(196,113,79,0.16); }
.share-link-btn-danger { color: #C44747; background: rgba(196,71,71,0.08); }
.share-link-btn-danger:hover { background: rgba(196,71,71,0.16); }
.share-empty-state {
padding: 24px 20px;
text-align: center;
}
.share-empty-state p {
font-size: 14px;
color: var(--text-sec, #6B5D52);
margin: 0;
line-height: 1.5;
}
.share-sub-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(196,113,79,0.08);
}
.share-sub-row:last-child { border-bottom: none; }
.share-sub-time { font-size: 14px; font-weight: 500; color: var(--text, #2C2420); }
.share-sub-name { font-size: 15px; font-weight: 600; color: var(--text, #2C2420); }
.share-sub-meta { font-size: 12px; color: var(--text-ter, #9C8B7E); margin-top: 2px; }
/* "New share" indicator on People rows + person detail banner */
.tag-new {
background: #C4714F;
color: #fff;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.2px;
padding: 2px 8px;
border-radius: 999px;
margin-left: 6px;
vertical-align: middle;
}
.person-row-new { background: rgba(196, 113, 79, 0.05); }
.avatar-new-dot {
position: absolute;
top: -2px;
right: -2px;
width: 12px;
height: 12px;
background: #C4714F;
border: 2px solid var(--surface, #fff);
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(196, 113, 79, 0.25);
}
.person-row .avatar { position: relative; }
.new-share-banner {
background: linear-gradient(135deg, rgba(196, 113, 79, 0.12), rgba(196, 113, 79, 0.04));
border: 1px solid rgba(196, 113, 79, 0.25);
color: var(--text, #2C2420);
border-radius: 12px;
padding: 12px 16px;
margin: 12px 0 0;
font-size: 14px;
line-height: 1.4;
}
.new-share-banner strong { color: #C4714F; }
/* ── Today's Calendar widget on home ─────────────────────────────────── */
.cal-today-card {
background: var(--surface, #fff);
border: 1px solid var(--line, rgba(0,0,0,0.08));
border-radius: 16px;
padding: 14px 16px;
margin: 12px 0;
}
.cal-today-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 8px;
}
.cal-today-title { font-size: 15px; font-weight: 700; color: var(--text, #2C2420); }
.cal-today-account {
font-size: 11px; color: var(--text-ter, #9C8B7E);
max-width: 60%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.cal-events-scroll {
/* ~3 rows visible (2/3 of the previous 240px). Keeps the home feed
dominant — long days are one quick flick inside the card. */
max-height: 160px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Soft fade at the bottom edge hints at scrollability when more events
are below the visible area. */
mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
}
.cal-event-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
margin: 2px 0;
border-radius: 10px;
border-top: 1px solid rgba(196,113,79,0.08);
transition: background 0.15s;
}
.cal-event-row:first-of-type { border-top: none; }
/* Faint per-provider tint so users see at a glance which calendar each
event came from. Color matches the header provider bubble. */
.cal-event-row.cal-event-google { background: rgba(34, 139, 34, 0.06); border-top-color: rgba(34, 139, 34, 0.10); }
.cal-event-row.cal-event-outlook { background: rgba(0, 120, 212, 0.06); border-top-color: rgba(0, 120, 212, 0.10); }
@media (prefers-color-scheme: dark) {
.cal-event-row.cal-event-google { background: rgba(34, 197, 94, 0.10); }
.cal-event-row.cal-event-outlook { background: rgba(96, 165, 250, 0.10); }
}
.cal-event-time {
flex: 0 0 52px;
font-size: 13px; font-weight: 700; color: var(--primary, #C4714F);
font-variant-numeric: tabular-nums;
}
.cal-event-info { flex: 1; min-width: 0; }
.cal-event-title {
font-size: 14px; font-weight: 600; color: var(--text, #2C2420);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event-people {
font-size: 12px; color: var(--text-sec, #6B5D52); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-log-btn {
flex: 0 0 auto;
background: var(--primary, #C4714F); color: #fff;
font-size: 12px; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
text-decoration: none;
}
.cal-log-btn-secondary {
background: transparent; color: var(--primary, #C4714F);
border: 1px solid var(--primary, #C4714F);
}
.cal-empty {
padding: 8px 0; font-size: 13px; color: var(--text-sec, #6B5D52);
}
.cal-more {
margin-top: 6px; font-size: 12px; color: var(--text-ter, #9C8B7E);
text-align: center;
}
.cal-connect-banner {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, rgba(196,113,79,0.10), rgba(196,113,79,0.02));
border: 1px solid rgba(196,113,79,0.20);
border-radius: 14px;
padding: 12px 14px;
margin: 12px 0;
font-size: 14px; font-weight: 500;
color: var(--text, #2C2420); text-decoration: none;
}
.cal-connect-chev { color: var(--primary, #C4714F); font-size: 18px; }
.cal-provider-tag {
display: inline-block; margin-left: 4px; font-size: 11px; opacity: 0.8;
vertical-align: middle;
}
.cal-provider-bubble {
display: inline-block;
font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 999px;
margin-left: 4px;
background: rgba(0,0,0,0.05);
color: var(--text-sec, #6B5D52);
white-space: nowrap;
vertical-align: middle;
}
.cal-provider-google { background: rgba(34, 139, 34, 0.10); color: #1f7a1f; }
.cal-provider-outlook { background: rgba(0, 120, 212, 0.10); color: #0567ad; }
@media (prefers-color-scheme: dark) {
.cal-provider-google { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.cal-provider-outlook { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
}
.cal-add-provider {
display: block; margin-top: 8px; padding-top: 10px;
border-top: 1px dashed rgba(196,113,79,0.18);
font-size: 12px; color: var(--primary, #C4714F);
text-align: center; text-decoration: none; font-weight: 600;
}
/* ── Closed Beta — Founding 500 banner ───────────────────────────────
Used on intro / signup / tour / share-form / footer to surface the
500-user cap. Solid background so it pops on white AND on the dark
gradient login page; small enough not to dominate the layout. */
.beta-banner {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: linear-gradient(135deg, #2C2420, #4A3530);
color: #FAF6F0; font-size: 12px; font-weight: 600;
letter-spacing: 0.2px; line-height: 1.2;
box-shadow: 0 2px 8px rgba(0,0,0,0.20);
margin: 0 auto 14px;
}
.beta-banner-tag {
background: #C4714F; color: #fff;
padding: 2px 8px; border-radius: 999px;
font-size: 10px; font-weight: 800;
letter-spacing: 0.8px;
}
.beta-banner-text strong { color: #FFD89E; font-weight: 700; }
.beta-banner.beta-banner-block {
display: flex; max-width: 100%; justify-content: center;
}
/* Subtle footer credit — shown across most pages so the creator is
always reachable. Tiny + low-contrast on purpose. */
.creator-credit {
text-align: center; font-size: 11px; color: var(--text-secondary, #9C8B7E);
padding: 14px 8px 18px; opacity: 0.75;
}
.creator-credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.creator-credit a:hover { opacity: 1; }