@crvouga/mockingbird-notifications 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +304 -2
- package/dist/chunk-GRGR3QZM.js +1066 -0
- package/dist/chunk-GRGR3QZM.js.map +7 -0
- package/dist/chunk-JQ6KPT2C.js +202 -0
- package/dist/chunk-JQ6KPT2C.js.map +7 -0
- package/dist/chunk-LM7R7AR7.js +183 -0
- package/dist/chunk-LM7R7AR7.js.map +7 -0
- package/dist/chunk-QE3TRUI6.js +444 -0
- package/dist/chunk-QE3TRUI6.js.map +7 -0
- package/dist/cli.js +104 -0
- package/dist/cli.js.map +7 -0
- package/dist/index.d.ts +411 -0
- package/dist/index.js +95 -0
- package/dist/index.js.map +7 -0
- package/dist/server.d.ts +177 -0
- package/dist/server.js +13 -0
- package/dist/server.js.map +7 -0
- package/dist/ui.d.ts +445 -0
- package/dist/ui.js +1923 -0
- package/dist/ui.js.map +7 -0
- package/package.json +88 -4
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
// src/ui/scope-css.ts
|
|
2
|
+
var scopeCss = (css, scope) => {
|
|
3
|
+
const source = css.replace(/\/\*[\s\S]*?\*\//g, "");
|
|
4
|
+
let out = "";
|
|
5
|
+
let i = 0;
|
|
6
|
+
while (i < source.length) {
|
|
7
|
+
const open = source.indexOf("{", i);
|
|
8
|
+
if (open < 0) break;
|
|
9
|
+
const head = source.slice(i, open).trim();
|
|
10
|
+
let depth = 1;
|
|
11
|
+
let j = open + 1;
|
|
12
|
+
while (j < source.length && depth > 0) {
|
|
13
|
+
if (source[j] === "{") depth++;
|
|
14
|
+
else if (source[j] === "}") depth--;
|
|
15
|
+
j++;
|
|
16
|
+
}
|
|
17
|
+
const body = source.slice(open + 1, j - 1);
|
|
18
|
+
if (/^@(media|container|supports|layer)\b/.test(head))
|
|
19
|
+
out += `${head} {
|
|
20
|
+
${scopeCss(body, scope)}}
|
|
21
|
+
`;
|
|
22
|
+
else if (head.startsWith("@")) out += `${head} {${body}}
|
|
23
|
+
`;
|
|
24
|
+
else out += `${scopeSelectors(head, scope)} {${body}}
|
|
25
|
+
`;
|
|
26
|
+
i = j;
|
|
27
|
+
}
|
|
28
|
+
return out;
|
|
29
|
+
};
|
|
30
|
+
var scopeSelectors = (selectors, scope) => splitTopLevel(selectors).map((raw) => {
|
|
31
|
+
const sel = raw.trim();
|
|
32
|
+
if (sel === ":root" || sel === "html" || sel === "body") return scope;
|
|
33
|
+
if (sel.startsWith(":root")) return `${scope}${sel.slice(5)}`;
|
|
34
|
+
if (sel.startsWith("&")) return `${scope}${sel.slice(1)}`;
|
|
35
|
+
return `${scope} ${sel}`;
|
|
36
|
+
}).join(", ");
|
|
37
|
+
var splitTopLevel = (value) => {
|
|
38
|
+
const parts = [];
|
|
39
|
+
let depth = 0;
|
|
40
|
+
let start = 0;
|
|
41
|
+
for (let k = 0; k < value.length; k++) {
|
|
42
|
+
const c = value[k];
|
|
43
|
+
if (c === "(") depth++;
|
|
44
|
+
else if (c === ")") depth--;
|
|
45
|
+
else if (c === "," && depth === 0) {
|
|
46
|
+
parts.push(value.slice(start, k));
|
|
47
|
+
start = k + 1;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
parts.push(value.slice(start));
|
|
51
|
+
return parts;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// src/ui/styles.ts
|
|
55
|
+
var ROOT_CLASS = "mb-notifications";
|
|
56
|
+
var RAW = `
|
|
57
|
+
:root {
|
|
58
|
+
--bg: #0e1015; --panel: #161920; --panel-2: #1d212a; --line: #2a2f3a; --text: #e8eaf0;
|
|
59
|
+
--muted: #9aa1b1; --accent: #0a84ff; --ok: #30d158; --bad: #ff453a; --warn: #ffd60a;
|
|
60
|
+
--ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
61
|
+
--android: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", system-ui, sans-serif;
|
|
62
|
+
--mail: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
|
|
63
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
64
|
+
}
|
|
65
|
+
:root { display: block; position: relative; box-sizing: border-box; min-height: 100%; background: var(--bg); color: var(--text);
|
|
66
|
+
font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
|
|
67
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
68
|
+
button, input, select { font: inherit; color: inherit; }
|
|
69
|
+
button { cursor: pointer; }
|
|
70
|
+
[hidden] { display: none !important; }
|
|
71
|
+
&[data-motion="reduce"] *, &[data-motion="reduce"] *::before, &[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
|
|
72
|
+
&.embedded { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
73
|
+
&.embedded .mbn-scroll { flex: 1; min-height: 0; overflow: auto; }
|
|
74
|
+
&.embedded .inspector { position: absolute; }
|
|
75
|
+
[data-gesture]:focus-visible, [role="button"]:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
76
|
+
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
77
|
+
|
|
78
|
+
/* \u2500\u2500 Harness chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
79
|
+
.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
|
|
80
|
+
padding: 10px 18px; background: rgba(14,16,21,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
|
|
81
|
+
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; margin-right: 6px; }
|
|
82
|
+
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#0a84ff,#5e5ce6); display: grid; place-items: center; }
|
|
83
|
+
.brand small { color: var(--muted); font-weight: 500; }
|
|
84
|
+
.field { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; height: 32px; }
|
|
85
|
+
.field label { color: var(--muted); font-size: 12px; }
|
|
86
|
+
.field select, .field input { background: transparent; border: 0; outline: 0; height: 30px; min-width: 0; }
|
|
87
|
+
.field select option { background: var(--panel-2); }
|
|
88
|
+
.field.search { flex: 1 1 220px; max-width: 360px; }
|
|
89
|
+
.field.search input { width: 100%; }
|
|
90
|
+
.tabs { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
|
|
91
|
+
.tabs button { background: none; border: 0; padding: 5px 12px; border-radius: 6px; color: var(--muted); font-weight: 550; }
|
|
92
|
+
.tabs button[aria-pressed="true"] { background: #2c3240; color: var(--text); }
|
|
93
|
+
.toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; user-select: none; }
|
|
94
|
+
.toggle input { accent-color: var(--accent); }
|
|
95
|
+
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
|
|
96
|
+
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); white-space: nowrap; }
|
|
97
|
+
.pill b { color: var(--text); font-weight: 600; }
|
|
98
|
+
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
|
|
99
|
+
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(48,209,88,.15); }
|
|
100
|
+
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(255,69,58,.15); }
|
|
101
|
+
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
|
|
102
|
+
.notice { margin: 14px 18px 0; padding: 10px 14px; border: 1px solid #5a2b2b; background: #2a1517; color: #ffb4ab; border-radius: 10px; font-size: 13px; }
|
|
103
|
+
|
|
104
|
+
.devices { display: flex; flex-wrap: wrap; gap: 28px; padding: 22px 18px 40px; align-items: flex-start; justify-content: center; }
|
|
105
|
+
.devices.solo .device-col.wide { max-width: 1280px; }
|
|
106
|
+
.device-col { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 362px; flex: none; }
|
|
107
|
+
.device-col.wide { flex: 1 1 720px; width: auto; min-width: 0; max-width: 1180px; align-items: stretch; }
|
|
108
|
+
.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; justify-content: space-between; min-height: 32px; }
|
|
109
|
+
.device-head .controls { display: flex; gap: 6px; align-items: center; min-width: 0; }
|
|
110
|
+
.device-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 8px; }
|
|
111
|
+
.device-head h2 .count { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; letter-spacing: 0; line-height: 18px; }
|
|
112
|
+
.device-head .field { height: 30px; max-width: 250px; min-width: 0; }
|
|
113
|
+
.device-head .field select { max-width: 190px; text-overflow: ellipsis; }
|
|
114
|
+
.seg { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
|
|
115
|
+
.seg button { border: 0; background: none; color: var(--muted); padding: 2px 9px; border-radius: 5px; font-size: 12px; }
|
|
116
|
+
.seg button[aria-pressed="true"] { background: #2c3240; color: var(--text); }
|
|
117
|
+
|
|
118
|
+
/* \u2500\u2500 Phone hardware \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
119
|
+
.iphone { position: relative; width: 362px; height: 760px; border-radius: 58px; padding: 12px; background: #0b0b0c;
|
|
120
|
+
box-shadow: 0 0 0 2px #3a3a3c, 0 0 0 6px #1c1c1e, 0 0 0 7px #4a4a4e, 0 40px 80px rgba(0,0,0,.55); }
|
|
121
|
+
.iphone::before, .iphone::after { content: ""; position: absolute; left: -9px; width: 4px; border-radius: 2px; background: #2c2c2e; }
|
|
122
|
+
.iphone::before { top: 150px; height: 60px; }
|
|
123
|
+
.iphone::after { top: 225px; height: 60px; }
|
|
124
|
+
.iphone .screen { position: relative; width: 100%; height: 100%; border-radius: 47px; overflow: hidden; background: #fff; font-family: var(--ios); color: #000; -webkit-font-smoothing: antialiased; }
|
|
125
|
+
.island { position: absolute; z-index: 30; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 33px; border-radius: 20px; background: #000; }
|
|
126
|
+
.statusbar { position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font: 600 16px/1 var(--ios); letter-spacing: -.01em; }
|
|
127
|
+
.statusbar .icons { display: flex; gap: 6px; align-items: center; }
|
|
128
|
+
.statusbar.light { color: #fff; }
|
|
129
|
+
.home-indicator { position: absolute; z-index: 30; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #000; }
|
|
130
|
+
.home-indicator.light { background: rgba(255,255,255,.9); }
|
|
131
|
+
|
|
132
|
+
.pixel { position: relative; width: 352px; height: 760px; border-radius: 44px; padding: 10px; background: #111;
|
|
133
|
+
box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 5px #3c3c41, 0 40px 80px rgba(0,0,0,.55); }
|
|
134
|
+
.pixel::after { content: ""; position: absolute; right: -7px; top: 170px; width: 4px; height: 90px; border-radius: 2px; background: #2c2c2e; }
|
|
135
|
+
.pixel .screen { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden; font-family: var(--android); }
|
|
136
|
+
.punch { position: absolute; z-index: 30; top: 12px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 2px #1a1a1a; }
|
|
137
|
+
|
|
138
|
+
/* \u2500\u2500 Messages (iOS) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
139
|
+
.msgs { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
|
|
140
|
+
.msgs-nav { padding: 54px 16px 0; }
|
|
141
|
+
.msgs-nav .row { display: flex; justify-content: space-between; align-items: center; height: 44px; color: #007aff; font-size: 17px; }
|
|
142
|
+
.msgs-nav h1 { margin: 2px 0 8px; font: 700 34px/41px var(--ios); letter-spacing: .01em; }
|
|
143
|
+
.ios-search { display: flex; align-items: center; gap: 6px; height: 36px; border-radius: 10px; background: rgba(118,118,128,.12); color: rgba(60,60,67,.6); padding: 0 8px; font-size: 17px; margin-bottom: 8px; }
|
|
144
|
+
.ios-search span { flex: 1; }
|
|
145
|
+
.threads { flex: 1; overflow-y: auto; }
|
|
146
|
+
.thread { position: relative; display: flex; gap: 12px; padding: 10px 16px 0 26px; cursor: pointer; }
|
|
147
|
+
.thread:active { background: #e5e5ea; }
|
|
148
|
+
.thread .unread { position: absolute; left: 8px; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: #007aff; }
|
|
149
|
+
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 18px var(--ios); background: linear-gradient(180deg,#a5abb8,#858994); }
|
|
150
|
+
.thread .text { flex: 1; min-width: 0; border-bottom: .5px solid #c6c6c8; padding-bottom: 10px; }
|
|
151
|
+
.thread .top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
|
|
152
|
+
.thread .name { font: 600 17px/22px var(--ios); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
153
|
+
.thread .when { flex: none; color: rgba(60,60,67,.6); font-size: 15px; display: flex; align-items: center; gap: 6px; }
|
|
154
|
+
.thread .preview { color: rgba(60,60,67,.6); font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.01em; }
|
|
155
|
+
.empty-ios { flex: 1; display: grid; place-items: center; color: rgba(60,60,67,.6); font-size: 17px; text-align: center; padding: 40px; }
|
|
156
|
+
|
|
157
|
+
.convo { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
|
|
158
|
+
.convo-nav { position: relative; z-index: 5; padding-top: 50px; background: rgba(249,249,249,.94); backdrop-filter: blur(20px); border-bottom: .5px solid rgba(0,0,0,.18); }
|
|
159
|
+
.convo-nav .bar { position: relative; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
|
|
160
|
+
.convo-nav .back { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; color: #007aff; font-size: 17px; background: none; border: 0; padding: 4px; }
|
|
161
|
+
.convo-nav .back .badge { background: #007aff; color: #fff; border-radius: 10px; font-size: 13px; min-width: 20px; padding: 0 6px; line-height: 20px; margin-left: 2px; }
|
|
162
|
+
.convo-nav .avatar { width: 54px; height: 54px; font-size: 22px; }
|
|
163
|
+
.convo-nav .who { font-size: 12px; display: flex; align-items: center; gap: 2px; }
|
|
164
|
+
.convo-body { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
|
|
165
|
+
.stamp { text-align: center; color: rgba(60,60,67,.6); font-size: 12px; margin: 14px 0 6px; }
|
|
166
|
+
.stamp b { font-weight: 600; }
|
|
167
|
+
.bubble-row { display: flex; padding: 0 14px; margin-top: 2px; }
|
|
168
|
+
.bubble-row.gap { margin-top: 10px; }
|
|
169
|
+
.bubble { position: relative; max-width: 74%; padding: 7px 12px 8px; border-radius: 18px; background: #e9e9eb; color: #000; font-size: 17px; line-height: 22px; letter-spacing: -.02em; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
170
|
+
.bubble.tail::before { content: ""; position: absolute; bottom: 0; left: -7px; width: 20px; height: 20px; background: #e9e9eb; border-bottom-right-radius: 15px; }
|
|
171
|
+
.bubble.tail::after { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: #fff; border-bottom-right-radius: 10px; }
|
|
172
|
+
.bubble a, .bubble .code { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
|
|
173
|
+
.bubble .media { display: block; max-width: 100%; border-radius: 12px; margin: 2px 0 4px; }
|
|
174
|
+
.bubble.arrive { animation: mbn-pop .35s cubic-bezier(.2,.9,.3,1.3); }
|
|
175
|
+
.delivered-note { padding: 2px 16px 0 26px; color: rgba(60,60,67,.6); font-size: 11px; }
|
|
176
|
+
.convo-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 32px; background: #fff; }
|
|
177
|
+
.convo-input .plus { width: 34px; height: 34px; border-radius: 50%; background: #e9e9eb; display: grid; place-items: center; flex: none; }
|
|
178
|
+
.convo-input .field-ios { flex: 1; height: 36px; border: 1px solid #c6c6c8; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 14px; color: #c4c4c6; font-size: 17px; }
|
|
179
|
+
.qt { margin: 0 10px 6px; padding: 8px 12px; border-radius: 10px; background: #d1d3d9; text-align: center; font-size: 15px; color: #000; }
|
|
180
|
+
.qt small { display: block; font-size: 12px; color: #3c3c43; }
|
|
181
|
+
|
|
182
|
+
/* \u2500\u2500 Lock screen (iOS) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
183
|
+
.lock { position: absolute; inset: 0; color: #fff; overflow: hidden;
|
|
184
|
+
background: radial-gradient(120% 70% at 20% 10%, #6f86ff 0%, transparent 55%), radial-gradient(90% 60% at 90% 30%, #ff7eb3 0%, transparent 60%), radial-gradient(120% 80% at 50% 100%, #1d1b4a 0%, transparent 70%), linear-gradient(180deg,#3a3f9f,#141433); }
|
|
185
|
+
.lock .padlock { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); opacity: .95; }
|
|
186
|
+
.lock .date { position: absolute; top: 84px; width: 100%; text-align: center; font: 600 19px var(--ios); letter-spacing: .01em; opacity: .92; }
|
|
187
|
+
.lock .clock { position: absolute; top: 102px; width: 100%; text-align: center; font: 700 92px/1 "SF Pro Rounded", var(--ios); letter-spacing: -.02em; color: rgba(255,255,255,.93); }
|
|
188
|
+
.lock-stack { position: absolute; left: 10px; right: 10px; top: 236px; bottom: 112px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
|
|
189
|
+
.lock-stack::-webkit-scrollbar { display: none; }
|
|
190
|
+
.lock-stack .center-label { text-align: center; font: 600 15px var(--ios); opacity: .85; padding: 4px 0; }
|
|
191
|
+
.ios-note { position: relative; display: flex; gap: 10px; padding: 11px 12px 12px 11px; border-radius: 22px; color: #000; background: rgba(246,246,246,.66); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset; }
|
|
192
|
+
.ios-note.arrive { animation: mbn-drop .45s cubic-bezier(.2,.9,.3,1.15); }
|
|
193
|
+
.ios-note .app-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 700 18px var(--ios); box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
|
|
194
|
+
.ios-note .content { flex: 1; min-width: 0; }
|
|
195
|
+
.ios-note .line1 { display: flex; justify-content: space-between; gap: 8px; }
|
|
196
|
+
.ios-note .title { font: 600 15px/20px var(--ios); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
197
|
+
.ios-note .time { flex: none; font-size: 13px; color: rgba(60,60,67,.62); }
|
|
198
|
+
.ios-note .body { font: 400 15px/20px var(--ios); letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
|
|
199
|
+
.ios-note .thumb { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; align-self: center; }
|
|
200
|
+
.ios-note.expanded .body { -webkit-line-clamp: unset; }
|
|
201
|
+
.ios-note .hero { width: 100%; border-radius: 12px; margin-top: 8px; display: block; }
|
|
202
|
+
.note-data { margin-top: 8px; font: 12px/1.45 var(--mono); background: rgba(255,255,255,.55); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: #1c1c1e; }
|
|
203
|
+
.note-meta { margin-top: 6px; font-size: 12px; color: rgba(60,60,67,.7); }
|
|
204
|
+
.ios-stack-more { position: relative; height: 18px; margin: -14px 14px 0; border-radius: 0 0 18px 18px; background: rgba(246,246,246,.42); backdrop-filter: blur(20px); }
|
|
205
|
+
.ios-stack-more + .ios-stack-more { margin: -10px 26px 0; background: rgba(246,246,246,.28); }
|
|
206
|
+
.lock-buttons { position: absolute; bottom: 46px; left: 46px; right: 46px; display: flex; justify-content: space-between; }
|
|
207
|
+
.lock-buttons span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); backdrop-filter: blur(20px); }
|
|
208
|
+
.lock-empty { text-align: center; font: 500 15px var(--ios); opacity: .7; margin-top: 30px; }
|
|
209
|
+
|
|
210
|
+
/* \u2500\u2500 Notification shade (Android) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
211
|
+
.shade { position: absolute; inset: 0; color: #e6e1e5; background: linear-gradient(180deg, rgba(20,18,24,.94), rgba(20,18,24,.98)), radial-gradient(100% 60% at 30% 0%, #4b3f72, #141218); overflow: hidden; }
|
|
212
|
+
.shade .sb { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0; font: 500 14px var(--android); color: #e6e1e5; }
|
|
213
|
+
.shade .sb .icons { display: flex; gap: 5px; align-items: center; }
|
|
214
|
+
.shade .qs-head { position: absolute; top: 46px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font: 400 15px var(--android); color: #cac4d0; }
|
|
215
|
+
.qs { position: absolute; top: 80px; left: 14px; right: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
216
|
+
.qs .tile { height: 60px; border-radius: 20px; background: #36343b; display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 500 14px var(--android); color: #e6e1e5; min-width: 0; }
|
|
217
|
+
.qs .tile > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
218
|
+
.qs .tile svg { flex: none; }
|
|
219
|
+
.qs .tile.on { background: #d0bcff; color: #381e72; }
|
|
220
|
+
.qs .tile small { display: block; font-weight: 400; font-size: 12px; opacity: .8; }
|
|
221
|
+
.qs-bright { position: absolute; top: 216px; left: 14px; right: 14px; height: 44px; border-radius: 22px; background: #36343b; overflow: hidden; }
|
|
222
|
+
.qs-bright::before { content: ""; position: absolute; inset: 0 44% 0 0; background: #d0bcff; border-radius: 22px; }
|
|
223
|
+
.shade-list { position: absolute; top: 276px; left: 10px; right: 10px; bottom: 92px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
|
|
224
|
+
.shade-list::-webkit-scrollbar { display: none; }
|
|
225
|
+
.a-note { background: #2b2930; border-radius: 6px; padding: 14px 16px 14px 14px; cursor: pointer; display: flex; gap: 12px; }
|
|
226
|
+
.a-note:first-child { border-top-left-radius: 26px; border-top-right-radius: 26px; }
|
|
227
|
+
.a-note:last-child { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; }
|
|
228
|
+
.a-note.arrive { animation: mbn-headsup .5s cubic-bezier(.2,.9,.3,1.12); }
|
|
229
|
+
.a-note .a-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px var(--android); }
|
|
230
|
+
.a-note .a-main { flex: 1; min-width: 0; }
|
|
231
|
+
.a-note .a-head { display: flex; align-items: center; gap: 6px; font: 400 12px var(--android); color: #cac4d0; }
|
|
232
|
+
.a-note .a-head .chev { margin-left: auto; width: 26px; height: 20px; border-radius: 10px; background: #49454f; display: grid; place-items: center; }
|
|
233
|
+
.a-note .a-title { font: 500 15px/20px var(--android); color: #e6e1e5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
234
|
+
.a-note .a-body { font: 400 14px/20px var(--android); color: #cac4d0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
|
235
|
+
.a-note.expanded .a-body { -webkit-line-clamp: unset; }
|
|
236
|
+
.a-note .large-icon { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; align-self: center; }
|
|
237
|
+
.a-note .big-picture { display: block; width: 100%; border-radius: 14px; margin-top: 10px; }
|
|
238
|
+
.a-note .note-data { background: #1d1b20; color: #e6e1e5; }
|
|
239
|
+
.a-note .note-meta { color: #938f99; }
|
|
240
|
+
.shade-actions { position: absolute; bottom: 44px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
|
|
241
|
+
.shade-actions span { padding: 8px 16px; border-radius: 18px; background: #36343b; font: 500 14px var(--android); color: #e6e1e5; }
|
|
242
|
+
.shade-empty { text-align: center; color: #938f99; font: 400 14px var(--android); margin-top: 26px; }
|
|
243
|
+
.gesture { position: absolute; bottom: 12px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: rgba(255,255,255,.75); }
|
|
244
|
+
|
|
245
|
+
/* \u2500\u2500 Mail (web client) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
246
|
+
.window { position: relative; container-type: inline-size; border-radius: 12px; overflow: hidden; background: #f8fafd; box-shadow: 0 0 0 1px #2c313c, 0 30px 70px rgba(0,0,0,.5); height: 760px; display: flex; flex-direction: column; font-family: var(--mail); color: #1f1f1f; }
|
|
247
|
+
.chrome { flex: none; height: 38px; background: #dfe3e9; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
|
|
248
|
+
.lights { display: flex; gap: 7px; }
|
|
249
|
+
.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
|
|
250
|
+
.lights i:nth-child(1) { background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
|
|
251
|
+
.omnibox { flex: 1; max-width: 560px; margin: 0 auto; height: 26px; border-radius: 13px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #5f6368; font: 13px system-ui; }
|
|
252
|
+
.mail-top { flex: none; height: 64px; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; }
|
|
253
|
+
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #444746; border: 0; background: none; flex: none; }
|
|
254
|
+
.icon-btn:hover { background: rgba(68,71,70,.08); }
|
|
255
|
+
.mail-logo { display: flex; align-items: center; gap: 6px; width: 194px; font: 400 22px var(--mail); color: #444746; letter-spacing: -.01em; }
|
|
256
|
+
.mail-search { flex: 1; min-width: 0; max-width: 720px; height: 48px; border-radius: 24px; background: #e9eef6; display: flex; align-items: center; gap: 4px; padding: 0 4px; color: #444746; font-size: 16px; }
|
|
257
|
+
.mail-search .placeholder { flex: 1; padding-left: 4px; }
|
|
258
|
+
.mail-top .right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
|
|
259
|
+
.mail-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 15px var(--mail); margin-left: 8px; }
|
|
260
|
+
.mail-body { flex: 1; min-height: 0; display: flex; }
|
|
261
|
+
.mail-nav { flex: none; width: 236px; padding: 8px 8px 0 0; overflow: hidden; }
|
|
262
|
+
.compose { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 16px; margin: 0 0 16px 8px; border-radius: 16px; background: #c2e7ff; color: #001d35; font: 500 14px var(--mail); border: 0; box-shadow: none; }
|
|
263
|
+
.nav-item { display: flex; align-items: center; gap: 18px; height: 32px; padding: 0 12px 0 26px; border-radius: 0 16px 16px 0; color: #202124; font: 400 14px var(--mail); }
|
|
264
|
+
.nav-item.active { background: #d3e3fd; font-weight: 700; color: #001d35; }
|
|
265
|
+
.nav-item .n { margin-left: auto; font-size: 12px; }
|
|
266
|
+
.mail-main { flex: 1; min-width: 0; margin: 0 16px 16px 0; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
|
|
267
|
+
.mail-toolbar { flex: none; height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 14px; color: #444746; }
|
|
268
|
+
.mail-toolbar .range { margin-left: auto; font-size: 12px; color: #444746; }
|
|
269
|
+
.cat-tabs { flex: none; display: flex; border-bottom: 1px solid #f1f3f4; }
|
|
270
|
+
.cat-tabs div { flex: 0 1 250px; min-width: 0; height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 16px; color: #444746; font: 500 14px var(--mail); position: relative; }
|
|
271
|
+
.cat-tabs div.on { color: #0b57d0; }
|
|
272
|
+
.cat-tabs div.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #0b57d0; }
|
|
273
|
+
.mail-list { flex: 1; overflow-y: auto; }
|
|
274
|
+
.mrow { display: flex; align-items: center; height: 40px; padding: 0 16px 0 12px; border-bottom: 1px solid #f1f3f4; cursor: pointer; font-size: 14px; color: #202124; background: #f2f6fc; }
|
|
275
|
+
.mrow.unread { background: #fff; font-weight: 700; }
|
|
276
|
+
.mrow:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); position: relative; z-index: 1; }
|
|
277
|
+
.mrow.arrive { animation: mbn-rowflash 1.6s ease-out; }
|
|
278
|
+
.mrow .chk, .mrow .star { flex: none; width: 20px; height: 20px; margin-right: 10px; color: #c4c7c5; display: grid; place-items: center; }
|
|
279
|
+
.mrow .from { flex: none; width: 168px; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
280
|
+
.mrow .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
281
|
+
.mrow .snippet { color: #5f6368; font-weight: 400; }
|
|
282
|
+
.mrow .clip { color: #5f6368; margin-left: 8px; flex: none; }
|
|
283
|
+
.mrow .date { flex: none; width: 78px; text-align: right; font-size: 12px; }
|
|
284
|
+
.mrow .svc { flex: none; font: 500 10px var(--mail); color: #5f6368; border: 1px solid #dadce0; border-radius: 4px; padding: 0 4px; margin-left: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
|
|
285
|
+
.mail-empty { padding: 60px 20px; text-align: center; color: #5f6368; font: 400 14px var(--mail); }
|
|
286
|
+
.mail-empty b { display: block; font: 400 22px var(--mail); color: #1f1f1f; margin: 12px 0 4px; }
|
|
287
|
+
.reader { flex: 1; overflow-y: auto; padding: 0 0 24px; }
|
|
288
|
+
.reader .subject-row { display: flex; align-items: center; gap: 10px; padding: 18px 16px 8px 72px; }
|
|
289
|
+
.reader h1 { margin: 0; font: 400 22px/28px var(--mail); color: #1f1f1f; }
|
|
290
|
+
.label-chip { font: 400 12px var(--mail); background: #ddd; border-radius: 4px; padding: 0 6px; color: #444746; display: inline-flex; gap: 4px; align-items: center; }
|
|
291
|
+
.sender-row { display: flex; gap: 14px; padding: 12px 16px 0 16px; }
|
|
292
|
+
.sender-row .mail-avatar { width: 40px; height: 40px; font-size: 18px; margin: 0; }
|
|
293
|
+
.sender-row .who { flex: 1; min-width: 0; }
|
|
294
|
+
.sender-row .who b { font: 700 14px var(--mail); color: #1f1f1f; }
|
|
295
|
+
.sender-row .who .addr { font: 400 12px var(--mail); color: #5e5e5e; }
|
|
296
|
+
.sender-row .who .to { font: 400 12px var(--mail); color: #5e5e5e; display: flex; align-items: center; gap: 2px; margin-top: 2px; }
|
|
297
|
+
.sender-row .meta { display: flex; align-items: center; gap: 4px; color: #5e5e5e; font: 400 12px var(--mail); white-space: nowrap; }
|
|
298
|
+
.details { margin: 8px 16px 0 70px; padding: 10px 14px; border: 1px solid #dadce0; border-radius: 8px; font: 12px/1.6 var(--mail); color: #5e5e5e; display: grid; grid-template-columns: max-content 1fr; gap: 0 12px; }
|
|
299
|
+
.details span:nth-child(odd) { text-align: right; }
|
|
300
|
+
.details span:nth-child(even) { color: #1f1f1f; overflow-wrap: anywhere; }
|
|
301
|
+
.mail-frame { display: block; width: calc(100% - 86px); margin: 16px 16px 0 70px; border: 0; min-height: 120px; background: #fff; }
|
|
302
|
+
.mail-text { margin: 16px 16px 0 70px; white-space: pre-wrap; font: 400 14px/1.55 Arial, sans-serif; color: #222; overflow-wrap: anywhere; }
|
|
303
|
+
.mail-text a { color: #1155cc; }
|
|
304
|
+
.attachments { margin: 18px 16px 0 70px; border-top: 1px solid #e0e0e0; padding-top: 14px; }
|
|
305
|
+
.attachments h3 { margin: 0 0 10px; font: 500 14px var(--mail); color: #1f1f1f; }
|
|
306
|
+
.att-grid { display: flex; flex-wrap: wrap; gap: 12px; }
|
|
307
|
+
.att { width: 180px; height: 104px; border: 1px solid #dadce0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
|
|
308
|
+
.att .att-top { flex: 1; background: #f1f3f4; display: grid; place-items: center; color: #d93025; }
|
|
309
|
+
.att .att-name { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 500 12px var(--mail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
310
|
+
.reply-row { display: flex; gap: 10px; margin: 24px 16px 0 70px; }
|
|
311
|
+
.reply-row span { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px 0 16px; height: 36px; border: 1px solid #747775; border-radius: 18px; font: 500 14px var(--mail); color: #444746; }
|
|
312
|
+
|
|
313
|
+
/* \u2500\u2500 Timeline + inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
314
|
+
.timeline { padding: 18px; overflow-x: auto; }
|
|
315
|
+
.tl td.mono:first-child { white-space: nowrap; }
|
|
316
|
+
.tl { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
|
|
317
|
+
.tl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
|
|
318
|
+
.tl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
|
|
319
|
+
.tl tr:last-child td { border-bottom: 0; }
|
|
320
|
+
.tl tbody tr { cursor: pointer; }
|
|
321
|
+
.tl tbody tr:hover { background: #1b1f28; }
|
|
322
|
+
.tl .content { max-width: 520px; color: var(--muted); }
|
|
323
|
+
.tl .content b { color: var(--text); font-weight: 600; }
|
|
324
|
+
.tl .mono { font-family: var(--mono); font-size: 12px; }
|
|
325
|
+
.chan { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
|
|
326
|
+
.chan.sms { background: rgba(48,209,88,.14); color: #6ee38a; }
|
|
327
|
+
.chan.email { background: rgba(10,132,255,.16); color: #69b0ff; }
|
|
328
|
+
.chan.push { background: rgba(255,159,10,.15); color: #ffc15e; }
|
|
329
|
+
.svc-tag { font-size: 12px; color: var(--muted); }
|
|
330
|
+
.empty-tl { padding: 60px; text-align: center; color: var(--muted); }
|
|
331
|
+
.inspector { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.4); display: flex; flex-direction: column; }
|
|
332
|
+
.inspector header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
|
|
333
|
+
.inspector header h3 { margin: 0; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
334
|
+
.inspector .btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; font-size: 13px; }
|
|
335
|
+
.inspector pre { margin: 0; flex: 1; overflow: auto; padding: 14px 16px; font: 12px/1.55 var(--mono); color: #cdd3df; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
336
|
+
.inspector .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
|
|
337
|
+
.inspector .kv span:nth-child(odd) { color: var(--muted); }
|
|
338
|
+
.inspector .kv span:nth-child(even) { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
/* \u2500\u2500 Sound toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
342
|
+
.icon-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 13px; }
|
|
343
|
+
.icon-toggle[aria-pressed="true"] { color: var(--text); border-color: #3d4a66; }
|
|
344
|
+
|
|
345
|
+
/* \u2500\u2500 Swipe gestures \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
346
|
+
.swipe { position: relative; touch-action: pan-y; }
|
|
347
|
+
.swipe > .swipe-card { position: relative; z-index: 1; will-change: transform; }
|
|
348
|
+
.swipe.settling > .swipe-card, .settling.a-note { transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .32s ease; }
|
|
349
|
+
.swipe-actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: stretch; visibility: hidden; }
|
|
350
|
+
.swipe.swiping > .swipe-actions, .swipe.open > .swipe-actions { visibility: visible; }
|
|
351
|
+
.collapsing { overflow: hidden; transition: height .26s ease, margin .26s ease, padding .26s ease, opacity .2s ease !important; }
|
|
352
|
+
|
|
353
|
+
/* iOS lock screen: Options / Clear behind a card */
|
|
354
|
+
.ios-swipe .swipe-actions { gap: 8px; }
|
|
355
|
+
.ios-swipe .swipe-actions button { width: 72px; border: 0; border-radius: 20px; background: rgba(246,246,246,.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #000; font: 500 14px var(--ios); }
|
|
356
|
+
.push-group { display: flex; flex-direction: column; gap: 8px; }
|
|
357
|
+
.group-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; animation: mbn-fadein .25s ease; }
|
|
358
|
+
.group-head h3 { flex: 1; margin: 0; font: 700 20px/1.2 var(--ios); color: #fff; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
359
|
+
.group-head button { border: 0; border-radius: 15px; background: rgba(246,246,246,.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #000; font: 500 13px var(--ios); padding: 6px 12px; }
|
|
360
|
+
.group-head button.x { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
|
|
361
|
+
.push-group[data-open="true"] .ios-swipe { animation: mbn-unstack .38s cubic-bezier(.2,.9,.3,1.1) backwards; }
|
|
362
|
+
.push-group[data-open="true"] .ios-swipe:nth-child(3) { animation-delay: .03s; } .push-group[data-open="true"] .ios-swipe:nth-child(4) { animation-delay: .06s; }
|
|
363
|
+
.stack-layers { cursor: pointer; border: 0; padding: 0; background: none; display: block; width: 100%; }
|
|
364
|
+
.stack-layers .ios-stack-more:first-child { margin-top: -14px; }
|
|
365
|
+
.lock.wake { animation: mbn-wake 1.1s ease-out; }
|
|
366
|
+
.ios-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14px; background: rgba(255,255,255,.28); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: mbn-fadein .2s ease; }
|
|
367
|
+
.ios-overlay.dark { background: rgba(0,0,0,.28); }
|
|
368
|
+
.ios-overlay .ios-note { animation: mbn-lift .3s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
|
|
369
|
+
.ios-menu { align-self: flex-start; width: 250px; border-radius: 14px; overflow: hidden; background: rgba(237,237,237,.86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 10px 40px rgba(0,0,0,.2); animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.2); }
|
|
370
|
+
.ios-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 16px; border: 0; border-bottom: .5px solid rgba(60,60,67,.29); background: none; color: #000; font: 400 17px var(--ios); letter-spacing: -.02em; text-align: left; }
|
|
371
|
+
.ios-menu button:last-child { border-bottom: 0; }
|
|
372
|
+
.ios-menu button:active { background: rgba(0,0,0,.08); }
|
|
373
|
+
.ios-overlay.dark .ios-menu { align-self: stretch; width: auto; }
|
|
374
|
+
|
|
375
|
+
/* Android shade */
|
|
376
|
+
.a-note { touch-action: pan-y; position: relative; }
|
|
377
|
+
.a-settings { margin-top: 8px; display: grid; gap: 8px; animation: mbn-fadein .2s ease; }
|
|
378
|
+
.a-settings .opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid #49454f; font: 500 14px var(--android); color: #e6e1e5; background: none; text-align: left; }
|
|
379
|
+
.a-settings .opt[aria-pressed="true"] { background: #4a4458; border-color: #d0bcff; }
|
|
380
|
+
.a-settings .opt small { display: block; font-weight: 400; color: #cac4d0; font-size: 12px; }
|
|
381
|
+
.a-settings .row { display: flex; justify-content: space-between; }
|
|
382
|
+
.a-settings .row button { border: 0; background: none; color: #d0bcff; font: 500 14px var(--android); padding: 6px 4px; }
|
|
383
|
+
.shade-actions button { padding: 8px 16px; border: 0; border-radius: 18px; background: #36343b; font: 500 14px var(--android); color: #e6e1e5; }
|
|
384
|
+
|
|
385
|
+
/* Messages: thread swipe actions, page transitions, bubble times, tapbacks */
|
|
386
|
+
.thread-swipe .swipe-actions { justify-content: space-between; }
|
|
387
|
+
.thread-swipe .swipe-actions .side { display: flex; }
|
|
388
|
+
.thread-swipe .swipe-actions button { width: 74px; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 400 13px var(--ios); }
|
|
389
|
+
.act-unread { background: #007aff; } .act-pin { background: #ffcc00; } .act-mute { background: #5856d6; } .act-delete { background: #ff3b30; }
|
|
390
|
+
.thread-swipe .thread { background: #fff; }
|
|
391
|
+
.thread .name-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
|
|
392
|
+
.thread .flag { flex: none; color: rgba(60,60,67,.6); display: inline-flex; }
|
|
393
|
+
.msgs.enter { animation: mbn-back .38s cubic-bezier(.2,.9,.25,1); }
|
|
394
|
+
.convo.enter { animation: mbn-push .4s cubic-bezier(.2,.9,.25,1); box-shadow: -10px 0 30px rgba(0,0,0,.12); }
|
|
395
|
+
.convo-body { --reveal: 0px; overflow-x: hidden; touch-action: pan-y; }
|
|
396
|
+
.convo-body .bubble-row, .convo-body .stamp { transform: translateX(calc(-1 * var(--reveal))); }
|
|
397
|
+
.convo-body.settling .bubble-row, .convo-body.settling .stamp { transition: transform .3s cubic-bezier(.2,.9,.25,1); }
|
|
398
|
+
.bubble-row { position: relative; }
|
|
399
|
+
.bubble-time { position: absolute; right: -66px; top: 50%; transform: translateY(-50%); width: 58px; color: rgba(60,60,67,.6); font-size: 12px; white-space: nowrap; }
|
|
400
|
+
.bubble { touch-action: pan-y; -webkit-user-select: text; user-select: text; }
|
|
401
|
+
.tapback { position: absolute; z-index: 2; top: -16px; right: -12px; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; background: #007aff; color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--ios); box-shadow: 0 0 0 2.5px #fff; animation: mbn-pop .35s cubic-bezier(.2,.9,.3,1.4); }
|
|
402
|
+
.tapback-bar { align-self: flex-start; display: flex; gap: 4px; padding: 6px 8px; border-radius: 26px; background: rgba(233,233,235,.96); box-shadow: 0 8px 30px rgba(0,0,0,.18); animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.3); }
|
|
403
|
+
.tapback-bar button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: #8e8e93; font: 700 16px/1 var(--ios); display: grid; place-items: center; }
|
|
404
|
+
.tapback-bar button[aria-pressed="true"] { background: #007aff; color: #fff; }
|
|
405
|
+
.ios-overlay .bubble { align-self: flex-start; max-width: 80%; animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.2); }
|
|
406
|
+
|
|
407
|
+
/* Mail: hover actions, row swipe, toast */
|
|
408
|
+
.mrow .hover-actions { display: none; flex: none; align-items: center; gap: 2px; margin-left: 8px; }
|
|
409
|
+
.mrow .hover-actions .icon-btn { width: 32px; height: 32px; }
|
|
410
|
+
.mrow:hover .hover-actions, .mrow:focus-within .hover-actions { display: flex; }
|
|
411
|
+
.mrow:hover .date, .mrow:focus-within .date { display: none; }
|
|
412
|
+
.mrow .star { cursor: pointer; }
|
|
413
|
+
.mrow .star[aria-pressed="true"] { color: #f4b400; }
|
|
414
|
+
.mrow-swipe { background: #188038; }
|
|
415
|
+
.mrow-swipe .swipe-actions { justify-content: space-between; align-items: center; padding: 0 22px; color: #fff; }
|
|
416
|
+
.toast { position: absolute; z-index: 20; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 24px; min-width: 288px; max-width: calc(100% - 48px); padding: 14px 16px 14px 24px; border-radius: 4px; background: #303030; color: #f2f2f2; font: 400 14px var(--mail); box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.14); animation: mbn-toast .25s cubic-bezier(0,0,.2,1); }
|
|
417
|
+
.toast button { margin-left: auto; border: 0; background: none; color: #a8c7fa; font: 500 14px var(--mail); padding: 4px 8px; }
|
|
418
|
+
.reader.enter, .mail-list.enter { animation: mbn-fadein .18s ease; }
|
|
419
|
+
|
|
420
|
+
@keyframes mbn-fadein { from { opacity: 0; } to { opacity: 1; } }
|
|
421
|
+
@keyframes mbn-headsup { from { opacity: 0; transform: translateY(-70px) scale(.98); } to { opacity: 1; transform: none; } }
|
|
422
|
+
@keyframes mbn-unstack { from { opacity: 0; transform: translateY(-40px) scale(.94); } to { opacity: 1; transform: none; } }
|
|
423
|
+
@keyframes mbn-wake { from { filter: brightness(.25); } to { filter: none; } }
|
|
424
|
+
@keyframes mbn-lift { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
|
|
425
|
+
@keyframes mbn-push { from { transform: translateX(100%); } to { transform: none; } }
|
|
426
|
+
@keyframes mbn-back { from { transform: translateX(-28%); filter: brightness(.92); } to { transform: none; filter: none; } }
|
|
427
|
+
@keyframes mbn-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
|
|
428
|
+
@keyframes mbn-pop { from { transform: scale(.6) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
|
|
429
|
+
@keyframes mbn-drop { from { transform: translateY(-30px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
|
|
430
|
+
@keyframes mbn-fade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
|
|
431
|
+
@keyframes mbn-rowflash { from { background: #fef7e0; } to { background: #fff; } }
|
|
432
|
+
@container (max-width: 980px) { .mail-nav { width: 72px; } .mail-nav .lbl, .mail-nav .n, .compose .lbl { display: none; } .mail-logo { width: auto; } .compose { padding: 0 16px; } .mrow .svc { display: none; } }
|
|
433
|
+
@container (max-width: 640px) { .mail-nav, .mail-search, .cat-tabs, .mail-logo .lbl, .mail-toolbar .range { display: none; } .mail-main { margin-left: 8px; } .mrow .from { width: 110px; } .reader .subject-row, .sender-row { padding-left: 16px; } .mail-frame, .mail-text, .attachments, .reply-row, .details { margin-left: 16px; } .mail-frame { width: calc(100% - 32px); } .sender-row { flex-wrap: wrap; } .sender-row .who { flex-basis: calc(100% - 54px); } .sender-row .meta { flex-basis: 100%; padding-left: 54px; white-space: normal; } .reader h1 { font-size: 19px; line-height: 24px; } }
|
|
434
|
+
@media (max-width: 760px) { .devices { padding: 16px 8px; } .device-col.wide { flex-basis: 100%; } }
|
|
435
|
+
`;
|
|
436
|
+
var STYLES = scopeCss(RAW, `.${ROOT_CLASS}`);
|
|
437
|
+
var PAGE_STYLES = "html, body { margin: 0; min-height: 100%; background: #0e1015; color-scheme: dark; } #app { min-height: 100vh; } .boot { padding: 48px; color: #9aa1b1; font: 14px/1.4 system-ui, sans-serif; }";
|
|
438
|
+
|
|
439
|
+
export {
|
|
440
|
+
ROOT_CLASS,
|
|
441
|
+
STYLES,
|
|
442
|
+
PAGE_STYLES
|
|
443
|
+
};
|
|
444
|
+
//# sourceMappingURL=chunk-QE3TRUI6.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/ui/scope-css.ts", "../src/ui/styles.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Prefix every selector in a stylesheet with `scope`, so the harness UI can sit inside another\n * application without its rules leaking out. `:root`, `html` and `body` become the scope element\n * itself; `@media`, `@container` and `@supports` blocks are scoped recursively; `@keyframes` and\n * other at-rules are left alone.\n */\nexport const scopeCss = (css: string, scope: string): string => {\n const source = css.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\")\n let out = \"\"\n let i = 0\n while (i < source.length) {\n const open = source.indexOf(\"{\", i)\n if (open < 0) break\n const head = source.slice(i, open).trim()\n let depth = 1\n let j = open + 1\n while (j < source.length && depth > 0) {\n if (source[j] === \"{\") depth++\n else if (source[j] === \"}\") depth--\n j++\n }\n const body = source.slice(open + 1, j - 1)\n if (/^@(media|container|supports|layer)\\b/.test(head))\n out += `${head} {\\n${scopeCss(body, scope)}}\\n`\n else if (head.startsWith(\"@\")) out += `${head} {${body}}\\n`\n else out += `${scopeSelectors(head, scope)} {${body}}\\n`\n i = j\n }\n return out\n}\n\nconst scopeSelectors = (selectors: string, scope: string): string =>\n splitTopLevel(selectors)\n .map((raw) => {\n const sel = raw.trim()\n if (sel === \":root\" || sel === \"html\" || sel === \"body\") return scope\n if (sel.startsWith(\":root\")) return `${scope}${sel.slice(5)}`\n // `&` addresses the scope element itself: `&[data-motion=\"reduce\"] .x`.\n if (sel.startsWith(\"&\")) return `${scope}${sel.slice(1)}`\n return `${scope} ${sel}`\n })\n .join(\", \")\n\n/** Split on commas outside parentheses (`:is(a, b)` stays whole). */\nconst splitTopLevel = (value: string): string[] => {\n const parts: string[] = []\n let depth = 0\n let start = 0\n for (let k = 0; k < value.length; k++) {\n const c = value[k]\n if (c === \"(\") depth++\n else if (c === \")\") depth--\n else if (c === \",\" && depth === 0) {\n parts.push(value.slice(start, k))\n start = k + 1\n }\n }\n parts.push(value.slice(start))\n return parts\n}\n", "import { scopeCss } from \"./scope-css.js\"\n\n/** The class on the UI root. Every rule below is scoped to it. */\nexport const ROOT_CLASS = \"mb-notifications\"\n\n/** Harness chrome plus the three device skins. Device skins use their platform's own type and color. */\nconst RAW = `\n:root {\n --bg: #0e1015; --panel: #161920; --panel-2: #1d212a; --line: #2a2f3a; --text: #e8eaf0;\n --muted: #9aa1b1; --accent: #0a84ff; --ok: #30d158; --bad: #ff453a; --warn: #ffd60a;\n --ios: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --android: \"Google Sans Text\", \"Google Sans\", Roboto, \"Segoe UI\", system-ui, sans-serif;\n --mail: \"Google Sans\", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;\n --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n}\n:root { display: block; position: relative; box-sizing: border-box; min-height: 100%; background: var(--bg); color: var(--text);\n font: 14px/1.4 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\n[hidden] { display: none !important; }\n&[data-motion=\"reduce\"] *, &[data-motion=\"reduce\"] *::before, &[data-motion=\"reduce\"] *::after { animation: none !important; transition: none !important; }\n&.embedded { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }\n&.embedded .mbn-scroll { flex: 1; min-height: 0; overflow: auto; }\n&.embedded .inspector { position: absolute; }\n[data-gesture]:focus-visible, [role=\"button\"]:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* \u2500\u2500 Harness chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n padding: 10px 18px; background: rgba(14,16,21,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }\n.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; margin-right: 6px; }\n.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#0a84ff,#5e5ce6); display: grid; place-items: center; }\n.brand small { color: var(--muted); font-weight: 500; }\n.field { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; height: 32px; }\n.field label { color: var(--muted); font-size: 12px; }\n.field select, .field input { background: transparent; border: 0; outline: 0; height: 30px; min-width: 0; }\n.field select option { background: var(--panel-2); }\n.field.search { flex: 1 1 220px; max-width: 360px; }\n.field.search input { width: 100%; }\n.tabs { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }\n.tabs button { background: none; border: 0; padding: 5px 12px; border-radius: 6px; color: var(--muted); font-weight: 550; }\n.tabs button[aria-pressed=\"true\"] { background: #2c3240; color: var(--text); }\n.toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; user-select: none; }\n.toggle input { accent-color: var(--accent); }\n.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }\n.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); white-space: nowrap; }\n.pill b { color: var(--text); font-weight: 600; }\n.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }\n.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(48,209,88,.15); }\n.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(255,69,58,.15); }\n.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }\n.notice { margin: 14px 18px 0; padding: 10px 14px; border: 1px solid #5a2b2b; background: #2a1517; color: #ffb4ab; border-radius: 10px; font-size: 13px; }\n\n.devices { display: flex; flex-wrap: wrap; gap: 28px; padding: 22px 18px 40px; align-items: flex-start; justify-content: center; }\n.devices.solo .device-col.wide { max-width: 1280px; }\n.device-col { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 362px; flex: none; }\n.device-col.wide { flex: 1 1 720px; width: auto; min-width: 0; max-width: 1180px; align-items: stretch; }\n.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; justify-content: space-between; min-height: 32px; }\n.device-head .controls { display: flex; gap: 6px; align-items: center; min-width: 0; }\n.device-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 8px; }\n.device-head h2 .count { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; letter-spacing: 0; line-height: 18px; }\n.device-head .field { height: 30px; max-width: 250px; min-width: 0; }\n.device-head .field select { max-width: 190px; text-overflow: ellipsis; }\n.seg { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }\n.seg button { border: 0; background: none; color: var(--muted); padding: 2px 9px; border-radius: 5px; font-size: 12px; }\n.seg button[aria-pressed=\"true\"] { background: #2c3240; color: var(--text); }\n\n/* \u2500\u2500 Phone hardware \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.iphone { position: relative; width: 362px; height: 760px; border-radius: 58px; padding: 12px; background: #0b0b0c;\n box-shadow: 0 0 0 2px #3a3a3c, 0 0 0 6px #1c1c1e, 0 0 0 7px #4a4a4e, 0 40px 80px rgba(0,0,0,.55); }\n.iphone::before, .iphone::after { content: \"\"; position: absolute; left: -9px; width: 4px; border-radius: 2px; background: #2c2c2e; }\n.iphone::before { top: 150px; height: 60px; }\n.iphone::after { top: 225px; height: 60px; }\n.iphone .screen { position: relative; width: 100%; height: 100%; border-radius: 47px; overflow: hidden; background: #fff; font-family: var(--ios); color: #000; -webkit-font-smoothing: antialiased; }\n.island { position: absolute; z-index: 30; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 33px; border-radius: 20px; background: #000; }\n.statusbar { position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font: 600 16px/1 var(--ios); letter-spacing: -.01em; }\n.statusbar .icons { display: flex; gap: 6px; align-items: center; }\n.statusbar.light { color: #fff; }\n.home-indicator { position: absolute; z-index: 30; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #000; }\n.home-indicator.light { background: rgba(255,255,255,.9); }\n\n.pixel { position: relative; width: 352px; height: 760px; border-radius: 44px; padding: 10px; background: #111;\n box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 5px #3c3c41, 0 40px 80px rgba(0,0,0,.55); }\n.pixel::after { content: \"\"; position: absolute; right: -7px; top: 170px; width: 4px; height: 90px; border-radius: 2px; background: #2c2c2e; }\n.pixel .screen { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden; font-family: var(--android); }\n.punch { position: absolute; z-index: 30; top: 12px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 2px #1a1a1a; }\n\n/* \u2500\u2500 Messages (iOS) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.msgs { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }\n.msgs-nav { padding: 54px 16px 0; }\n.msgs-nav .row { display: flex; justify-content: space-between; align-items: center; height: 44px; color: #007aff; font-size: 17px; }\n.msgs-nav h1 { margin: 2px 0 8px; font: 700 34px/41px var(--ios); letter-spacing: .01em; }\n.ios-search { display: flex; align-items: center; gap: 6px; height: 36px; border-radius: 10px; background: rgba(118,118,128,.12); color: rgba(60,60,67,.6); padding: 0 8px; font-size: 17px; margin-bottom: 8px; }\n.ios-search span { flex: 1; }\n.threads { flex: 1; overflow-y: auto; }\n.thread { position: relative; display: flex; gap: 12px; padding: 10px 16px 0 26px; cursor: pointer; }\n.thread:active { background: #e5e5ea; }\n.thread .unread { position: absolute; left: 8px; top: 30px; width: 10px; height: 10px; border-radius: 50%; background: #007aff; }\n.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 18px var(--ios); background: linear-gradient(180deg,#a5abb8,#858994); }\n.thread .text { flex: 1; min-width: 0; border-bottom: .5px solid #c6c6c8; padding-bottom: 10px; }\n.thread .top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }\n.thread .name { font: 600 17px/22px var(--ios); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.thread .when { flex: none; color: rgba(60,60,67,.6); font-size: 15px; display: flex; align-items: center; gap: 6px; }\n.thread .preview { color: rgba(60,60,67,.6); font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.01em; }\n.empty-ios { flex: 1; display: grid; place-items: center; color: rgba(60,60,67,.6); font-size: 17px; text-align: center; padding: 40px; }\n\n.convo { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }\n.convo-nav { position: relative; z-index: 5; padding-top: 50px; background: rgba(249,249,249,.94); backdrop-filter: blur(20px); border-bottom: .5px solid rgba(0,0,0,.18); }\n.convo-nav .bar { position: relative; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }\n.convo-nav .back { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; color: #007aff; font-size: 17px; background: none; border: 0; padding: 4px; }\n.convo-nav .back .badge { background: #007aff; color: #fff; border-radius: 10px; font-size: 13px; min-width: 20px; padding: 0 6px; line-height: 20px; margin-left: 2px; }\n.convo-nav .avatar { width: 54px; height: 54px; font-size: 22px; }\n.convo-nav .who { font-size: 12px; display: flex; align-items: center; gap: 2px; }\n.convo-body { flex: 1; overflow-y: auto; padding: 8px 0 12px; }\n.stamp { text-align: center; color: rgba(60,60,67,.6); font-size: 12px; margin: 14px 0 6px; }\n.stamp b { font-weight: 600; }\n.bubble-row { display: flex; padding: 0 14px; margin-top: 2px; }\n.bubble-row.gap { margin-top: 10px; }\n.bubble { position: relative; max-width: 74%; padding: 7px 12px 8px; border-radius: 18px; background: #e9e9eb; color: #000; font-size: 17px; line-height: 22px; letter-spacing: -.02em; white-space: pre-wrap; overflow-wrap: anywhere; }\n.bubble.tail::before { content: \"\"; position: absolute; bottom: 0; left: -7px; width: 20px; height: 20px; background: #e9e9eb; border-bottom-right-radius: 15px; }\n.bubble.tail::after { content: \"\"; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: #fff; border-bottom-right-radius: 10px; }\n.bubble a, .bubble .code { color: inherit; text-decoration: underline; text-underline-offset: 2px; }\n.bubble .media { display: block; max-width: 100%; border-radius: 12px; margin: 2px 0 4px; }\n.bubble.arrive { animation: mbn-pop .35s cubic-bezier(.2,.9,.3,1.3); }\n.delivered-note { padding: 2px 16px 0 26px; color: rgba(60,60,67,.6); font-size: 11px; }\n.convo-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 32px; background: #fff; }\n.convo-input .plus { width: 34px; height: 34px; border-radius: 50%; background: #e9e9eb; display: grid; place-items: center; flex: none; }\n.convo-input .field-ios { flex: 1; height: 36px; border: 1px solid #c6c6c8; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 14px; color: #c4c4c6; font-size: 17px; }\n.qt { margin: 0 10px 6px; padding: 8px 12px; border-radius: 10px; background: #d1d3d9; text-align: center; font-size: 15px; color: #000; }\n.qt small { display: block; font-size: 12px; color: #3c3c43; }\n\n/* \u2500\u2500 Lock screen (iOS) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.lock { position: absolute; inset: 0; color: #fff; overflow: hidden;\n background: radial-gradient(120% 70% at 20% 10%, #6f86ff 0%, transparent 55%), radial-gradient(90% 60% at 90% 30%, #ff7eb3 0%, transparent 60%), radial-gradient(120% 80% at 50% 100%, #1d1b4a 0%, transparent 70%), linear-gradient(180deg,#3a3f9f,#141433); }\n.lock .padlock { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); opacity: .95; }\n.lock .date { position: absolute; top: 84px; width: 100%; text-align: center; font: 600 19px var(--ios); letter-spacing: .01em; opacity: .92; }\n.lock .clock { position: absolute; top: 102px; width: 100%; text-align: center; font: 700 92px/1 \"SF Pro Rounded\", var(--ios); letter-spacing: -.02em; color: rgba(255,255,255,.93); }\n.lock-stack { position: absolute; left: 10px; right: 10px; top: 236px; bottom: 112px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }\n.lock-stack::-webkit-scrollbar { display: none; }\n.lock-stack .center-label { text-align: center; font: 600 15px var(--ios); opacity: .85; padding: 4px 0; }\n.ios-note { position: relative; display: flex; gap: 10px; padding: 11px 12px 12px 11px; border-radius: 22px; color: #000; background: rgba(246,246,246,.66); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset; }\n.ios-note.arrive { animation: mbn-drop .45s cubic-bezier(.2,.9,.3,1.15); }\n.ios-note .app-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 700 18px var(--ios); box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }\n.ios-note .content { flex: 1; min-width: 0; }\n.ios-note .line1 { display: flex; justify-content: space-between; gap: 8px; }\n.ios-note .title { font: 600 15px/20px var(--ios); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ios-note .time { flex: none; font-size: 13px; color: rgba(60,60,67,.62); }\n.ios-note .body { font: 400 15px/20px var(--ios); letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }\n.ios-note .thumb { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; align-self: center; }\n.ios-note.expanded .body { -webkit-line-clamp: unset; }\n.ios-note .hero { width: 100%; border-radius: 12px; margin-top: 8px; display: block; }\n.note-data { margin-top: 8px; font: 12px/1.45 var(--mono); background: rgba(255,255,255,.55); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: #1c1c1e; }\n.note-meta { margin-top: 6px; font-size: 12px; color: rgba(60,60,67,.7); }\n.ios-stack-more { position: relative; height: 18px; margin: -14px 14px 0; border-radius: 0 0 18px 18px; background: rgba(246,246,246,.42); backdrop-filter: blur(20px); }\n.ios-stack-more + .ios-stack-more { margin: -10px 26px 0; background: rgba(246,246,246,.28); }\n.lock-buttons { position: absolute; bottom: 46px; left: 46px; right: 46px; display: flex; justify-content: space-between; }\n.lock-buttons span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); backdrop-filter: blur(20px); }\n.lock-empty { text-align: center; font: 500 15px var(--ios); opacity: .7; margin-top: 30px; }\n\n/* \u2500\u2500 Notification shade (Android) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.shade { position: absolute; inset: 0; color: #e6e1e5; background: linear-gradient(180deg, rgba(20,18,24,.94), rgba(20,18,24,.98)), radial-gradient(100% 60% at 30% 0%, #4b3f72, #141218); overflow: hidden; }\n.shade .sb { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0; font: 500 14px var(--android); color: #e6e1e5; }\n.shade .sb .icons { display: flex; gap: 5px; align-items: center; }\n.shade .qs-head { position: absolute; top: 46px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font: 400 15px var(--android); color: #cac4d0; }\n.qs { position: absolute; top: 80px; left: 14px; right: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.qs .tile { height: 60px; border-radius: 20px; background: #36343b; display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 500 14px var(--android); color: #e6e1e5; min-width: 0; }\n.qs .tile > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.qs .tile svg { flex: none; }\n.qs .tile.on { background: #d0bcff; color: #381e72; }\n.qs .tile small { display: block; font-weight: 400; font-size: 12px; opacity: .8; }\n.qs-bright { position: absolute; top: 216px; left: 14px; right: 14px; height: 44px; border-radius: 22px; background: #36343b; overflow: hidden; }\n.qs-bright::before { content: \"\"; position: absolute; inset: 0 44% 0 0; background: #d0bcff; border-radius: 22px; }\n.shade-list { position: absolute; top: 276px; left: 10px; right: 10px; bottom: 92px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }\n.shade-list::-webkit-scrollbar { display: none; }\n.a-note { background: #2b2930; border-radius: 6px; padding: 14px 16px 14px 14px; cursor: pointer; display: flex; gap: 12px; }\n.a-note:first-child { border-top-left-radius: 26px; border-top-right-radius: 26px; }\n.a-note:last-child { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; }\n.a-note.arrive { animation: mbn-headsup .5s cubic-bezier(.2,.9,.3,1.12); }\n.a-note .a-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px var(--android); }\n.a-note .a-main { flex: 1; min-width: 0; }\n.a-note .a-head { display: flex; align-items: center; gap: 6px; font: 400 12px var(--android); color: #cac4d0; }\n.a-note .a-head .chev { margin-left: auto; width: 26px; height: 20px; border-radius: 10px; background: #49454f; display: grid; place-items: center; }\n.a-note .a-title { font: 500 15px/20px var(--android); color: #e6e1e5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.a-note .a-body { font: 400 14px/20px var(--android); color: #cac4d0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }\n.a-note.expanded .a-body { -webkit-line-clamp: unset; }\n.a-note .large-icon { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; align-self: center; }\n.a-note .big-picture { display: block; width: 100%; border-radius: 14px; margin-top: 10px; }\n.a-note .note-data { background: #1d1b20; color: #e6e1e5; }\n.a-note .note-meta { color: #938f99; }\n.shade-actions { position: absolute; bottom: 44px; left: 14px; right: 14px; display: flex; justify-content: space-between; }\n.shade-actions span { padding: 8px 16px; border-radius: 18px; background: #36343b; font: 500 14px var(--android); color: #e6e1e5; }\n.shade-empty { text-align: center; color: #938f99; font: 400 14px var(--android); margin-top: 26px; }\n.gesture { position: absolute; bottom: 12px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: rgba(255,255,255,.75); }\n\n/* \u2500\u2500 Mail (web client) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.window { position: relative; container-type: inline-size; border-radius: 12px; overflow: hidden; background: #f8fafd; box-shadow: 0 0 0 1px #2c313c, 0 30px 70px rgba(0,0,0,.5); height: 760px; display: flex; flex-direction: column; font-family: var(--mail); color: #1f1f1f; }\n.chrome { flex: none; height: 38px; background: #dfe3e9; display: flex; align-items: center; gap: 12px; padding: 0 12px; }\n.lights { display: flex; gap: 7px; }\n.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }\n.lights i:nth-child(1) { background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }\n.omnibox { flex: 1; max-width: 560px; margin: 0 auto; height: 26px; border-radius: 13px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #5f6368; font: 13px system-ui; }\n.mail-top { flex: none; height: 64px; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; }\n.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #444746; border: 0; background: none; flex: none; }\n.icon-btn:hover { background: rgba(68,71,70,.08); }\n.mail-logo { display: flex; align-items: center; gap: 6px; width: 194px; font: 400 22px var(--mail); color: #444746; letter-spacing: -.01em; }\n.mail-search { flex: 1; min-width: 0; max-width: 720px; height: 48px; border-radius: 24px; background: #e9eef6; display: flex; align-items: center; gap: 4px; padding: 0 4px; color: #444746; font-size: 16px; }\n.mail-search .placeholder { flex: 1; padding-left: 4px; }\n.mail-top .right { margin-left: auto; display: flex; align-items: center; gap: 2px; }\n.mail-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 15px var(--mail); margin-left: 8px; }\n.mail-body { flex: 1; min-height: 0; display: flex; }\n.mail-nav { flex: none; width: 236px; padding: 8px 8px 0 0; overflow: hidden; }\n.compose { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 16px; margin: 0 0 16px 8px; border-radius: 16px; background: #c2e7ff; color: #001d35; font: 500 14px var(--mail); border: 0; box-shadow: none; }\n.nav-item { display: flex; align-items: center; gap: 18px; height: 32px; padding: 0 12px 0 26px; border-radius: 0 16px 16px 0; color: #202124; font: 400 14px var(--mail); }\n.nav-item.active { background: #d3e3fd; font-weight: 700; color: #001d35; }\n.nav-item .n { margin-left: auto; font-size: 12px; }\n.mail-main { flex: 1; min-width: 0; margin: 0 16px 16px 0; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }\n.mail-toolbar { flex: none; height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 14px; color: #444746; }\n.mail-toolbar .range { margin-left: auto; font-size: 12px; color: #444746; }\n.cat-tabs { flex: none; display: flex; border-bottom: 1px solid #f1f3f4; }\n.cat-tabs div { flex: 0 1 250px; min-width: 0; height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 16px; color: #444746; font: 500 14px var(--mail); position: relative; }\n.cat-tabs div.on { color: #0b57d0; }\n.cat-tabs div.on::after { content: \"\"; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #0b57d0; }\n.mail-list { flex: 1; overflow-y: auto; }\n.mrow { display: flex; align-items: center; height: 40px; padding: 0 16px 0 12px; border-bottom: 1px solid #f1f3f4; cursor: pointer; font-size: 14px; color: #202124; background: #f2f6fc; }\n.mrow.unread { background: #fff; font-weight: 700; }\n.mrow:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); position: relative; z-index: 1; }\n.mrow.arrive { animation: mbn-rowflash 1.6s ease-out; }\n.mrow .chk, .mrow .star { flex: none; width: 20px; height: 20px; margin-right: 10px; color: #c4c7c5; display: grid; place-items: center; }\n.mrow .from { flex: none; width: 168px; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.mrow .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.mrow .snippet { color: #5f6368; font-weight: 400; }\n.mrow .clip { color: #5f6368; margin-left: 8px; flex: none; }\n.mrow .date { flex: none; width: 78px; text-align: right; font-size: 12px; }\n.mrow .svc { flex: none; font: 500 10px var(--mail); color: #5f6368; border: 1px solid #dadce0; border-radius: 4px; padding: 0 4px; margin-left: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }\n.mail-empty { padding: 60px 20px; text-align: center; color: #5f6368; font: 400 14px var(--mail); }\n.mail-empty b { display: block; font: 400 22px var(--mail); color: #1f1f1f; margin: 12px 0 4px; }\n.reader { flex: 1; overflow-y: auto; padding: 0 0 24px; }\n.reader .subject-row { display: flex; align-items: center; gap: 10px; padding: 18px 16px 8px 72px; }\n.reader h1 { margin: 0; font: 400 22px/28px var(--mail); color: #1f1f1f; }\n.label-chip { font: 400 12px var(--mail); background: #ddd; border-radius: 4px; padding: 0 6px; color: #444746; display: inline-flex; gap: 4px; align-items: center; }\n.sender-row { display: flex; gap: 14px; padding: 12px 16px 0 16px; }\n.sender-row .mail-avatar { width: 40px; height: 40px; font-size: 18px; margin: 0; }\n.sender-row .who { flex: 1; min-width: 0; }\n.sender-row .who b { font: 700 14px var(--mail); color: #1f1f1f; }\n.sender-row .who .addr { font: 400 12px var(--mail); color: #5e5e5e; }\n.sender-row .who .to { font: 400 12px var(--mail); color: #5e5e5e; display: flex; align-items: center; gap: 2px; margin-top: 2px; }\n.sender-row .meta { display: flex; align-items: center; gap: 4px; color: #5e5e5e; font: 400 12px var(--mail); white-space: nowrap; }\n.details { margin: 8px 16px 0 70px; padding: 10px 14px; border: 1px solid #dadce0; border-radius: 8px; font: 12px/1.6 var(--mail); color: #5e5e5e; display: grid; grid-template-columns: max-content 1fr; gap: 0 12px; }\n.details span:nth-child(odd) { text-align: right; }\n.details span:nth-child(even) { color: #1f1f1f; overflow-wrap: anywhere; }\n.mail-frame { display: block; width: calc(100% - 86px); margin: 16px 16px 0 70px; border: 0; min-height: 120px; background: #fff; }\n.mail-text { margin: 16px 16px 0 70px; white-space: pre-wrap; font: 400 14px/1.55 Arial, sans-serif; color: #222; overflow-wrap: anywhere; }\n.mail-text a { color: #1155cc; }\n.attachments { margin: 18px 16px 0 70px; border-top: 1px solid #e0e0e0; padding-top: 14px; }\n.attachments h3 { margin: 0 0 10px; font: 500 14px var(--mail); color: #1f1f1f; }\n.att-grid { display: flex; flex-wrap: wrap; gap: 12px; }\n.att { width: 180px; height: 104px; border: 1px solid #dadce0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }\n.att .att-top { flex: 1; background: #f1f3f4; display: grid; place-items: center; color: #d93025; }\n.att .att-name { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 500 12px var(--mail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.reply-row { display: flex; gap: 10px; margin: 24px 16px 0 70px; }\n.reply-row span { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px 0 16px; height: 36px; border: 1px solid #747775; border-radius: 18px; font: 500 14px var(--mail); color: #444746; }\n\n/* \u2500\u2500 Timeline + inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.timeline { padding: 18px; overflow-x: auto; }\n.tl td.mono:first-child { white-space: nowrap; }\n.tl { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }\n.tl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }\n.tl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }\n.tl tr:last-child td { border-bottom: 0; }\n.tl tbody tr { cursor: pointer; }\n.tl tbody tr:hover { background: #1b1f28; }\n.tl .content { max-width: 520px; color: var(--muted); }\n.tl .content b { color: var(--text); font-weight: 600; }\n.tl .mono { font-family: var(--mono); font-size: 12px; }\n.chan { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }\n.chan.sms { background: rgba(48,209,88,.14); color: #6ee38a; }\n.chan.email { background: rgba(10,132,255,.16); color: #69b0ff; }\n.chan.push { background: rgba(255,159,10,.15); color: #ffc15e; }\n.svc-tag { font-size: 12px; color: var(--muted); }\n.empty-tl { padding: 60px; text-align: center; color: var(--muted); }\n.inspector { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.4); display: flex; flex-direction: column; }\n.inspector header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }\n.inspector header h3 { margin: 0; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.inspector .btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; font-size: 13px; }\n.inspector pre { margin: 0; flex: 1; overflow: auto; padding: 14px 16px; font: 12px/1.55 var(--mono); color: #cdd3df; white-space: pre-wrap; overflow-wrap: anywhere; }\n.inspector .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }\n.inspector .kv span:nth-child(odd) { color: var(--muted); }\n.inspector .kv span:nth-child(even) { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }\n\n\n/* \u2500\u2500 Sound toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.icon-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 13px; }\n.icon-toggle[aria-pressed=\"true\"] { color: var(--text); border-color: #3d4a66; }\n\n/* \u2500\u2500 Swipe gestures \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.swipe { position: relative; touch-action: pan-y; }\n.swipe > .swipe-card { position: relative; z-index: 1; will-change: transform; }\n.swipe.settling > .swipe-card, .settling.a-note { transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .32s ease; }\n.swipe-actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: stretch; visibility: hidden; }\n.swipe.swiping > .swipe-actions, .swipe.open > .swipe-actions { visibility: visible; }\n.collapsing { overflow: hidden; transition: height .26s ease, margin .26s ease, padding .26s ease, opacity .2s ease !important; }\n\n/* iOS lock screen: Options / Clear behind a card */\n.ios-swipe .swipe-actions { gap: 8px; }\n.ios-swipe .swipe-actions button { width: 72px; border: 0; border-radius: 20px; background: rgba(246,246,246,.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #000; font: 500 14px var(--ios); }\n.push-group { display: flex; flex-direction: column; gap: 8px; }\n.group-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; animation: mbn-fadein .25s ease; }\n.group-head h3 { flex: 1; margin: 0; font: 700 20px/1.2 var(--ios); color: #fff; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.group-head button { border: 0; border-radius: 15px; background: rgba(246,246,246,.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #000; font: 500 13px var(--ios); padding: 6px 12px; }\n.group-head button.x { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; }\n.push-group[data-open=\"true\"] .ios-swipe { animation: mbn-unstack .38s cubic-bezier(.2,.9,.3,1.1) backwards; }\n.push-group[data-open=\"true\"] .ios-swipe:nth-child(3) { animation-delay: .03s; } .push-group[data-open=\"true\"] .ios-swipe:nth-child(4) { animation-delay: .06s; }\n.stack-layers { cursor: pointer; border: 0; padding: 0; background: none; display: block; width: 100%; }\n.stack-layers .ios-stack-more:first-child { margin-top: -14px; }\n.lock.wake { animation: mbn-wake 1.1s ease-out; }\n.ios-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14px; background: rgba(255,255,255,.28); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: mbn-fadein .2s ease; }\n.ios-overlay.dark { background: rgba(0,0,0,.28); }\n.ios-overlay .ios-note { animation: mbn-lift .3s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 20px 40px rgba(0,0,0,.25); }\n.ios-menu { align-self: flex-start; width: 250px; border-radius: 14px; overflow: hidden; background: rgba(237,237,237,.86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 10px 40px rgba(0,0,0,.2); animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.2); }\n.ios-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 16px; border: 0; border-bottom: .5px solid rgba(60,60,67,.29); background: none; color: #000; font: 400 17px var(--ios); letter-spacing: -.02em; text-align: left; }\n.ios-menu button:last-child { border-bottom: 0; }\n.ios-menu button:active { background: rgba(0,0,0,.08); }\n.ios-overlay.dark .ios-menu { align-self: stretch; width: auto; }\n\n/* Android shade */\n.a-note { touch-action: pan-y; position: relative; }\n.a-settings { margin-top: 8px; display: grid; gap: 8px; animation: mbn-fadein .2s ease; }\n.a-settings .opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid #49454f; font: 500 14px var(--android); color: #e6e1e5; background: none; text-align: left; }\n.a-settings .opt[aria-pressed=\"true\"] { background: #4a4458; border-color: #d0bcff; }\n.a-settings .opt small { display: block; font-weight: 400; color: #cac4d0; font-size: 12px; }\n.a-settings .row { display: flex; justify-content: space-between; }\n.a-settings .row button { border: 0; background: none; color: #d0bcff; font: 500 14px var(--android); padding: 6px 4px; }\n.shade-actions button { padding: 8px 16px; border: 0; border-radius: 18px; background: #36343b; font: 500 14px var(--android); color: #e6e1e5; }\n\n/* Messages: thread swipe actions, page transitions, bubble times, tapbacks */\n.thread-swipe .swipe-actions { justify-content: space-between; }\n.thread-swipe .swipe-actions .side { display: flex; }\n.thread-swipe .swipe-actions button { width: 74px; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 400 13px var(--ios); }\n.act-unread { background: #007aff; } .act-pin { background: #ffcc00; } .act-mute { background: #5856d6; } .act-delete { background: #ff3b30; }\n.thread-swipe .thread { background: #fff; }\n.thread .name-line { display: flex; align-items: center; gap: 4px; min-width: 0; }\n.thread .flag { flex: none; color: rgba(60,60,67,.6); display: inline-flex; }\n.msgs.enter { animation: mbn-back .38s cubic-bezier(.2,.9,.25,1); }\n.convo.enter { animation: mbn-push .4s cubic-bezier(.2,.9,.25,1); box-shadow: -10px 0 30px rgba(0,0,0,.12); }\n.convo-body { --reveal: 0px; overflow-x: hidden; touch-action: pan-y; }\n.convo-body .bubble-row, .convo-body .stamp { transform: translateX(calc(-1 * var(--reveal))); }\n.convo-body.settling .bubble-row, .convo-body.settling .stamp { transition: transform .3s cubic-bezier(.2,.9,.25,1); }\n.bubble-row { position: relative; }\n.bubble-time { position: absolute; right: -66px; top: 50%; transform: translateY(-50%); width: 58px; color: rgba(60,60,67,.6); font-size: 12px; white-space: nowrap; }\n.bubble { touch-action: pan-y; -webkit-user-select: text; user-select: text; }\n.tapback { position: absolute; z-index: 2; top: -16px; right: -12px; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; background: #007aff; color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--ios); box-shadow: 0 0 0 2.5px #fff; animation: mbn-pop .35s cubic-bezier(.2,.9,.3,1.4); }\n.tapback-bar { align-self: flex-start; display: flex; gap: 4px; padding: 6px 8px; border-radius: 26px; background: rgba(233,233,235,.96); box-shadow: 0 8px 30px rgba(0,0,0,.18); animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.3); }\n.tapback-bar button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: #8e8e93; font: 700 16px/1 var(--ios); display: grid; place-items: center; }\n.tapback-bar button[aria-pressed=\"true\"] { background: #007aff; color: #fff; }\n.ios-overlay .bubble { align-self: flex-start; max-width: 80%; animation: mbn-lift .28s cubic-bezier(.2,.9,.3,1.2); }\n\n/* Mail: hover actions, row swipe, toast */\n.mrow .hover-actions { display: none; flex: none; align-items: center; gap: 2px; margin-left: 8px; }\n.mrow .hover-actions .icon-btn { width: 32px; height: 32px; }\n.mrow:hover .hover-actions, .mrow:focus-within .hover-actions { display: flex; }\n.mrow:hover .date, .mrow:focus-within .date { display: none; }\n.mrow .star { cursor: pointer; }\n.mrow .star[aria-pressed=\"true\"] { color: #f4b400; }\n.mrow-swipe { background: #188038; }\n.mrow-swipe .swipe-actions { justify-content: space-between; align-items: center; padding: 0 22px; color: #fff; }\n.toast { position: absolute; z-index: 20; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 24px; min-width: 288px; max-width: calc(100% - 48px); padding: 14px 16px 14px 24px; border-radius: 4px; background: #303030; color: #f2f2f2; font: 400 14px var(--mail); box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.14); animation: mbn-toast .25s cubic-bezier(0,0,.2,1); }\n.toast button { margin-left: auto; border: 0; background: none; color: #a8c7fa; font: 500 14px var(--mail); padding: 4px 8px; }\n.reader.enter, .mail-list.enter { animation: mbn-fadein .18s ease; }\n\n@keyframes mbn-fadein { from { opacity: 0; } to { opacity: 1; } }\n@keyframes mbn-headsup { from { opacity: 0; transform: translateY(-70px) scale(.98); } to { opacity: 1; transform: none; } }\n@keyframes mbn-unstack { from { opacity: 0; transform: translateY(-40px) scale(.94); } to { opacity: 1; transform: none; } }\n@keyframes mbn-wake { from { filter: brightness(.25); } to { filter: none; } }\n@keyframes mbn-lift { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }\n@keyframes mbn-push { from { transform: translateX(100%); } to { transform: none; } }\n@keyframes mbn-back { from { transform: translateX(-28%); filter: brightness(.92); } to { transform: none; filter: none; } }\n@keyframes mbn-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }\n@keyframes mbn-pop { from { transform: scale(.6) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }\n@keyframes mbn-drop { from { transform: translateY(-30px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }\n@keyframes mbn-fade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }\n@keyframes mbn-rowflash { from { background: #fef7e0; } to { background: #fff; } }\n@container (max-width: 980px) { .mail-nav { width: 72px; } .mail-nav .lbl, .mail-nav .n, .compose .lbl { display: none; } .mail-logo { width: auto; } .compose { padding: 0 16px; } .mrow .svc { display: none; } }\n@container (max-width: 640px) { .mail-nav, .mail-search, .cat-tabs, .mail-logo .lbl, .mail-toolbar .range { display: none; } .mail-main { margin-left: 8px; } .mrow .from { width: 110px; } .reader .subject-row, .sender-row { padding-left: 16px; } .mail-frame, .mail-text, .attachments, .reply-row, .details { margin-left: 16px; } .mail-frame { width: calc(100% - 32px); } .sender-row { flex-wrap: wrap; } .sender-row .who { flex-basis: calc(100% - 54px); } .sender-row .meta { flex-basis: 100%; padding-left: 54px; white-space: normal; } .reader h1 { font-size: 19px; line-height: 24px; } }\n@media (max-width: 760px) { .devices { padding: 16px 8px; } .device-col.wide { flex-basis: 100%; } }\n`\n\n/** The stylesheet, every rule scoped to `.mb-notifications`. */\nexport const STYLES = scopeCss(RAW, `.${ROOT_CLASS}`)\n\n/** Page-level rules for a document that hosts only the harness (the standalone page, Storybook). */\nexport const PAGE_STYLES =\n \"html, body { margin: 0; min-height: 100%; background: #0e1015; color-scheme: dark; } #app { min-height: 100vh; } .boot { padding: 48px; color: #9aa1b1; font: 14px/1.4 system-ui, sans-serif; }\"\n"],
|
|
5
|
+
"mappings": ";AAMO,IAAM,WAAW,CAAC,KAAa,UAA0B;AAC9D,QAAM,SAAS,IAAI,QAAQ,qBAAqB,EAAE;AAClD,MAAI,MAAM;AACV,MAAI,IAAI;AACR,SAAO,IAAI,OAAO,QAAQ;AACxB,UAAM,OAAO,OAAO,QAAQ,KAAK,CAAC;AAClC,QAAI,OAAO,EAAG;AACd,UAAM,OAAO,OAAO,MAAM,GAAG,IAAI,EAAE,KAAK;AACxC,QAAI,QAAQ;AACZ,QAAI,IAAI,OAAO;AACf,WAAO,IAAI,OAAO,UAAU,QAAQ,GAAG;AACrC,UAAI,OAAO,CAAC,MAAM,IAAK;AAAA,eACd,OAAO,CAAC,MAAM,IAAK;AAC5B;AAAA,IACF;AACA,UAAM,OAAO,OAAO,MAAM,OAAO,GAAG,IAAI,CAAC;AACzC,QAAI,uCAAuC,KAAK,IAAI;AAClD,aAAO,GAAG,IAAI;AAAA,EAAO,SAAS,MAAM,KAAK,CAAC;AAAA;AAAA,aACnC,KAAK,WAAW,GAAG,EAAG,QAAO,GAAG,IAAI,KAAK,IAAI;AAAA;AAAA,QACjD,QAAO,GAAG,eAAe,MAAM,KAAK,CAAC,KAAK,IAAI;AAAA;AACnD,QAAI;AAAA,EACN;AACA,SAAO;AACT;AAEA,IAAM,iBAAiB,CAAC,WAAmB,UACzC,cAAc,SAAS,EACpB,IAAI,CAAC,QAAQ;AACZ,QAAM,MAAM,IAAI,KAAK;AACrB,MAAI,QAAQ,WAAW,QAAQ,UAAU,QAAQ,OAAQ,QAAO;AAChE,MAAI,IAAI,WAAW,OAAO,EAAG,QAAO,GAAG,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC;AAE3D,MAAI,IAAI,WAAW,GAAG,EAAG,QAAO,GAAG,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC;AACvD,SAAO,GAAG,KAAK,IAAI,GAAG;AACxB,CAAC,EACA,KAAK,IAAI;AAGd,IAAM,gBAAgB,CAAC,UAA4B;AACjD,QAAM,QAAkB,CAAC;AACzB,MAAI,QAAQ;AACZ,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,IAAI,MAAM,CAAC;AACjB,QAAI,MAAM,IAAK;AAAA,aACN,MAAM,IAAK;AAAA,aACX,MAAM,OAAO,UAAU,GAAG;AACjC,YAAM,KAAK,MAAM,MAAM,OAAO,CAAC,CAAC;AAChC,cAAQ,IAAI;AAAA,IACd;AAAA,EACF;AACA,QAAM,KAAK,MAAM,MAAM,KAAK,CAAC;AAC7B,SAAO;AACT;;;ACxDO,IAAM,aAAa;AAG1B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8XL,IAAM,SAAS,SAAS,KAAK,IAAI,UAAU,EAAE;AAG7C,IAAM,cACX;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|