/*
* notes.css — Multi-note Saved Notes feature.
*
* Plan: /root/.cursor/plans/multi-note_saved_notes_v3_reconciled.plan.md (§3)
* Mockups: /opt/teams-portal/public/mockups/multi-note-saved-notes/
*
* This file is loaded only when the Notes view is in use. Cache buster lives
* on the in index.html. CACHE_VERSION in sw.js is
* bumped at the same time.
*
* IMPORTANT — deviations from mockup _mockup-frame.css:
* DEV-2 (Q4): .notes-sidebar uses flex sizing, NOT fixed 320px.
* DEV-3 (Q5): No .note-glyph (cards have title + preview only).
* DEV-4 (Q8): Pin / Share / Version-history menu items not present.
* DEV-5 (Q9): No .diff-modal* rules.
* DEV-6 (Q10): Delete-only swipe (single 80px reveal); no .swipe-archive.
*/
/* ---------------------------------------------------------- 3.1 Keyframe */
@keyframes notes-pulse-dot {
50% { opacity: .4; }
}
/* ------------------------------------------------ 3.0 View root container */
/* #notesView is a sibling of inside #centerContentArea.
When active, it covers the full main area (its own sidebar + editor in a
horizontal flex). Hidden via .hidden utility class. */
#notesView {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
min-height: 0;
background: var(--bg-secondary, #fff);
}
.dark #notesView { background: #1f2937; }
#notesView.hidden { display: none !important; }
/* When notes is the active view, hide the message area sibling so the
previously-visible thread header / compose area doesn't bleed through
beneath the notes pane. (NotesModule.show()/close() toggle .notes-active
on ; that's the canonical signal that notes owns the center area.)
#callBannersContainer is intentionally LEFT visible so an active call
stays surfaced while the user takes notes. */
body.notes-active #messageArea { display: none !important; }
body.notes-active #conversationsSidebar { display: none !important; }
/* ----------------------------------------------- 3.2 Notes Sidebar Shell */
/* Width + edge treatment mirror .conversations-sidebar across every
breakpoint defined in /css/styles.css and /css/tablet.css. Using
`flex: 0 0 ` + matching `width` pins the sidebar at the exact same
px values so it lines up perfectly with the chat sidebar at any viewport.
Source rules: styles.css:2015 and tablet.css:34/65/247/255/262/269. */
/* Mirrors `.conversations-sidebar` exactly: no hard right border, just the
subtle rightward shadow with clip-path so only the right edge bleeds.
`position: relative; z-index: 1;` is what makes the shadow visible — without
it, the sibling `.notes-editor-pane` (which has a solid white background and
paints later in DOM order) covers the shadow. Raising the sidebar's
stacking context lets its shadow render above the editor pane. */
.notes-sidebar {
flex: 0 0 450px;
width: 450px;
display: flex;
flex-direction: column;
background: var(--bg-secondary, #fff);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
clip-path: inset(0 -10px 0 0);
min-height: 0;
position: relative;
z-index: 1;
}
.dark .notes-sidebar {
background: #1f2937;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
}
/* Small tablet (850–1023px) — mirrors tablet.css:34 */
@media (min-width: 850px) and (max-width: 1023px) {
.notes-sidebar {
flex: 0 0 320px;
width: 320px;
min-width: 280px;
max-width: 350px;
}
}
/* iPad / iPad Air (810–900px) — mirrors tablet.css:255 */
@media (min-width: 810px) and (max-width: 900px) {
.notes-sidebar {
flex: 0 0 340px;
width: 340px;
}
}
/* iPad Pro 11" (834–1024px) — mirrors tablet.css:262 */
@media (min-width: 834px) and (max-width: 1024px) {
.notes-sidebar {
flex: 0 0 360px;
width: 360px;
}
}
/* iPad Pro 12.9" / large tablet (1024–1199px) — mirrors tablet.css:269 */
@media (min-width: 1024px) and (max-width: 1199px) {
.notes-sidebar {
flex: 0 0 400px;
width: 400px;
min-width: 320px;
max-width: 420px;
}
}
/* ------------------------------------------------- 3.5 Sidebar Header */
/* Header padding mirrors .fav-header-row in styles.css so the Notes title
sits at the same baseline as the Chat / SMS / Contacts titles. */
.notes-sidebar-header {
padding: 0;
flex-shrink: 0;
}
.notes-sidebar-header .nh-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
}
.notes-sidebar-header .nh-actions {
display: flex;
align-items: center;
gap: 4px;
}
/* Icon-only header action button — mirrors .fav-search-toggle from styles.css
(the search/filter icon-button pattern used in #conversationsHeaderRow). */
.notes-sidebar-header .new-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
@media (hover: hover) {
.notes-sidebar-header .new-btn:hover {
background: #f3f4f6;
color: #111827;
}
}
.dark .notes-sidebar-header .new-btn { color: #9ca3af; }
@media (hover: hover) {
.dark .notes-sidebar-header .new-btn:hover {
background: #374151;
color: #f9fafb;
}
}
/* Mobile: bump to 44×48 for a comfortable tap target, matching the
mobile-only override on .fav-search-toggle. */
@media (max-width: 767px) {
.notes-sidebar-header .new-btn {
min-height: 44px;
min-width: 48px;
width: 48px;
background: #f1f3f5;
}
.dark .notes-sidebar-header .new-btn { background: #374151; }
}
/* Collapsible search input lives in #notesSearchInputWrap (a sibling of
.notes-sidebar-header that reuses .fav-search-input-wrap from styles.css
for the open/close animation). The .search-wrap inside it is the inner
row that holds the icon + input. */
#notesSearchInputWrap .search-wrap { position: relative; }
#notesSearchInputWrap input {
width: 100%;
border: 1px solid #e5e7eb;
background: #f9fafb;
border-radius: 8px;
padding: 8px 12px 8px 34px;
font: 400 14px Inter;
color: #1f2937;
outline: none;
}
#notesSearchInputWrap input:focus {
border-color: #6366f1;
background: #fff;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.dark #notesSearchInputWrap input {
background: #374151;
border-color: #4b5563;
color: #f3f4f6;
}
#notesSearchInputWrap i.fa-search {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 13px;
}
#notesSearchInputWrap mark {
background: #fde047;
border-radius: 2px;
padding: 0 1px;
}
/* ------------------------------------------------- 3.6 Sidebar List */
.notes-sidebar-list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* --------------------------------------------- 3.3 Group Header (sticky) */
.notes-group-header {
font: 600 11px/1 Inter, system-ui, sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b7280;
padding: 14px 16px 6px;
position: sticky;
top: 0;
background: var(--bg-secondary, #fff);
z-index: 1;
}
.dark .notes-group-header {
color: #9ca3af;
background: #1f2937;
}
/* --------------------------------------- 3.4 Note Card (no leading glyph) */
/* IMPORTANT: .note-card MUST be opaque (solid background + z-index above the
absolutely-positioned .notes-swipe-delete sibling). Without this the red
delete button bleeds through the card at rest on mobile, mirroring the
conversation-item fix in styles.css:383. */
.note-card {
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
background: #ffffff;
padding: 12px 16px;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 0.15s;
}
.dark .note-card { background: #1f2937; }
/* Mirrors `.conversation-item:hover` (styles.css:271). The hover guard is
essential on iOS Safari, where `:hover` "sticks" after a tap until another
tap clears it — without the guard every tap leaves the previously-tapped
note frozen in the hover state, which exactly reproduces the "constant
touch highlight" bug. */
@media (hover: hover) and (pointer: fine) {
.note-card:hover { background: #f1f3f5; }
.dark .note-card:hover { background: #374151; }
}
.note-card.active {
background: #eff6ff;
border-left-color: #2563eb;
}
/* IMPORTANT: solid color (not rgba) so the absolutely-positioned
.notes-swipe-delete behind .swipe-inner doesn't bleed through the active
card on mobile. The original rgba(37,99,235,0.15) on the dark sidebar bg
(#1f2937) blended to roughly #203252 — the value used here. */
.dark .note-card.active {
background: #203252;
border-left-color: #60a5fa;
}
.note-card .note-title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.note-card .note-title {
font: 600 14px Inter;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.dark .note-card .note-title { color: #f3f4f6; }
.note-card .note-time {
font: 400 11px Inter;
color: #9ca3af;
flex-shrink: 0;
}
.note-card .note-preview {
font: 400 13px/1.4 Inter;
color: #6b7280;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.dark .note-card .note-preview { color: #9ca3af; }
.note-card .note-title mark,
.note-card .note-preview mark {
background: #fde047;
border-radius: 2px;
padding: 0 1px;
}
.note-card.no-results {
cursor: default;
text-align: center;
color: #9ca3af;
padding: 24px 16px;
font: 400 13px Inter;
}
.note-card.no-results:hover { background: transparent; }
/* ─── Mobile tap-down affordance ──────────────────────────────────────────
Mirrors the conversation-item behavior in styles.css:412-426. The note
list wraps each card in `.swipe-outer-wrapper > .swipe-inner > .note-card`
for the swipe-to-delete gesture. notes-module.js adds `.is-grabbing` to
the wrapper on touchstart and removes it on touchend / touchcancel /
vertical-scroll, so the row visually responds the instant the finger
lands — same "attached" feel as the conversation list. */
@media (max-width: 849px) {
.swipe-outer-wrapper > .swipe-inner > .note-card {
transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}
.swipe-outer-wrapper.is-grabbing > .swipe-inner > .note-card {
background: #eef2f6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.dark .swipe-outer-wrapper.is-grabbing > .swipe-inner > .note-card {
background: #2b3544;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}
}
/* ----------------------------------------------- 3.7 Editor Pane */
.notes-editor-pane {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg-secondary, #fff);
min-width: 0;
min-height: 0;
position: relative;
}
.dark .notes-editor-pane { background: #1f2937; }
/* ----------------------------------------------- 3.8 Editor Toolbar
No bottom border — same downward elevation shadow as the chat thread-header
so the toolbar feels like a hovering chrome strip. */
.notes-editor-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark .notes-editor-toolbar,
.dark .notes-editor-toolbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.notes-editor-toolbar button {
width: 32px;
height: 32px;
border-radius: 6px;
background: transparent;
border: none;
color: #4b5563;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
cursor: pointer;
}
.notes-editor-toolbar button:hover { background: #f3f4f6; }
.dark .notes-editor-toolbar button { color: #d1d5db; }
.dark .notes-editor-toolbar button:hover { background: #374151; }
.notes-editor-toolbar button.active {
background: #eff6ff;
color: #2563eb;
}
.dark .notes-editor-toolbar button.active {
background: rgba(37, 99, 235, 0.2);
color: #60a5fa;
}
.notes-editor-toolbar .tb-divider {
width: 1px;
height: 18px;
background: #e5e7eb;
margin: 0 6px;
}
.dark .notes-editor-toolbar .tb-divider { background: #4b5563; }
.notes-editor-toolbar .tb-spacer { flex: 1; }
.notes-editor-toolbar .tb-hint {
font: 400 12px Inter;
color: #9ca3af;
padding: 0 8px;
}
@media (max-width: 767px) {
.notes-editor-toolbar {
overflow-x: auto;
padding: 6px 8px;
gap: 2px;
}
.notes-editor-toolbar .tb-hint { display: none; }
}
/* --------------------------------------------- 3.9 Editor Title Wrap
Mirrors `#messageThread .thread-header` from styles.css line 9429+ exactly:
the Tailwind `bg-[#ffffff] dark:bg-gray-800` classes on the element are red
herrings — the chat overrides them with #f8f9fa / #111827 !important and
adds the elevation shadow + relative/z-index. We apply the same treatment
here so the notes title bar is pixel-identical to the chat header. */
.notes-editor-titlewrap {
background: #f8f9fa !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
position: relative;
z-index: 1;
/* Pin to the same outer height as #messageThread .thread-header (72px:
22px padding-top + 28px content + 22px padding-bottom). The HTML carries
the same inline `padding-top:22; padding-bottom:22` as thread-header, so
all we need is to clamp the content row to 28px. items-center on the
wrapper centers the children inside that band. */
min-height: 72px;
height: 72px;
box-sizing: border-box;
}
html.dark .notes-editor-titlewrap,
.dark .notes-editor-titlewrap {
background: #111827 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.notes-editor-title {
flex: 1;
width: 100%;
border: none;
outline: none;
background: transparent;
/* Match thread-header content row height (28px) so the wrap stays at 72px
instead of expanding to ~84px from the input's default ~40px box. */
height: 28px;
line-height: 28px;
padding: 0;
}
.notes-editor-title::placeholder { color: #d1d5db; }
.notes-editor-title:read-only { cursor: default; }
.notes-editor-title:focus,
.notes-editor-title:focus-visible {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------- 3.10 Editor Body */
.notes-editor-body {
flex: 1;
width: 100%;
border: 0 !important;
outline: none;
resize: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none !important;
font: 400 15px/1.6 Inter, ui-sans-serif, system-ui;
color: #111827;
/* Exact same gradient as #messagesContainer in styles.css:9019 — a subtle
135° three-stop indigo wash that gives the writing surface depth. */
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
padding: 8px 32px 32px;
min-height: 0;
white-space: pre-wrap;
}
.dark .notes-editor-body,
html.dark .notes-editor-body {
color: #e5e7eb;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
@media (max-width: 767px) {
.notes-editor-body { padding: 4px 16px 12px; font: 400 14.5px/1.55 Inter; }
}
/* Suppress the global `textarea/input:focus-visible` blue outline applied by
styles.css. Notes are a chrome-free writing surface; the cursor itself is
the only focus affordance we need. */
.notes-editor-body:focus,
.notes-editor-body:focus-visible,
.notes-editor-title:focus,
.notes-editor-title:focus-visible {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* --------------------------------------------------- 3.11 Editor Footer */
.notes-editor-footer {
display: flex;
justify-content: space-between;
align-items: center;
/* Honor the iOS home-indicator safe area, mirroring how the SMS compose
bar and other docked footers across the app handle it (e.g.
styles.css:2086, :5551, :5780). On devices without an inset (desktop /
Android with no nav-bar gesture area) `env()` resolves to 0 so this
adds nothing visible. */
padding: 8px 24px calc(8px + env(safe-area-inset-bottom, 0px)) 24px;
flex-shrink: 0;
background: #fafafa;
font: 400 12px Inter;
color: #6b7280;
gap: 16px;
}
.dark .notes-editor-footer {
background: #111827;
color: #9ca3af;
}
/* ----------------------------------------- 3.12 Save Indicator (3 states) */
.save-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12px Inter;
padding: 4px 10px;
border-radius: 12px;
background: #f3f4f6;
color: #6b7280;
}
.dark .save-indicator { background: #374151; color: #9ca3af; }
.save-indicator--saving { color: #6366f1; }
.save-indicator--saving .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: notes-pulse-dot 1s ease-in-out infinite;
}
.save-indicator--saved { color: #16a34a; }
.save-indicator--failed {
background: #fee2e2;
color: #b91c1c;
}
.dark .save-indicator--failed {
background: rgba(185, 28, 28, 0.18);
color: #fca5a5;
}
.save-indicator a {
margin-left: 4px;
font-weight: 600;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
.mobile-app-header .save-indicator {
font-size: 11px;
padding: 3px 8px;
}
/* ---------------------------------------- 3.13 Conflict Banner (no diff) */
.conflict-banner {
background: #fef3c7;
border-bottom: 1px solid #fbbf24;
color: #78350f;
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.dark .conflict-banner {
background: rgba(217, 119, 6, 0.15);
border-color: #b45309;
color: #fde68a;
}
.conflict-banner .cb-icon { font-size: 18px; color: #d97706; flex-shrink: 0; }
.dark .conflict-banner .cb-icon { color: #fbbf24; }
.conflict-banner .cb-text { flex: 1; font: 500 14px Inter; }
.conflict-banner .cb-text small {
display: block;
font-weight: 400;
font-size: 12px;
opacity: 0.85;
margin-top: 2px;
}
.conflict-banner button {
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 6px 12px;
font: 600 13px Inter;
color: #1f2937;
cursor: pointer;
}
.conflict-banner button:hover { background: #f9fafb; }
.conflict-banner button.primary {
background: #2563eb;
color: white;
border-color: #2563eb;
}
.conflict-banner button.primary:hover { background: #1d4ed8; }
.dark .conflict-banner button {
background: #1f2937;
color: #f3f4f6;
border-color: #4b5563;
}
.dark .conflict-banner button.primary {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
@media (max-width: 767px) {
.conflict-banner {
flex-wrap: wrap;
padding: 12px 16px;
}
.conflict-banner .cb-text { width: 100%; }
.conflict-banner button { flex: 1; }
}
/* Draft-restored variant — green-tinted */
.conflict-banner.conflict-banner--info {
background: #ecfdf5;
border-color: #6ee7b7;
color: #065f46;
}
.dark .conflict-banner.conflict-banner--info {
background: rgba(16, 185, 129, 0.12);
border-color: #059669;
color: #6ee7b7;
}
.conflict-banner.conflict-banner--info .cb-icon { color: #059669; }
.dark .conflict-banner.conflict-banner--info .cb-icon { color: #6ee7b7; }
/* ---------------------------------------- 3.14 Popover Menu (v1 only) */
.popover-menu {
position: absolute;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.18);
min-width: 180px;
padding: 4px 0;
z-index: 25;
font: 400 14px Inter;
}
.dark .popover-menu {
background: #1f2937;
border-color: #374151;
color: #f3f4f6;
}
.popover-menu button {
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 8px 14px;
font: inherit;
color: inherit;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
.popover-menu button:hover { background: #f3f4f6; }
.dark .popover-menu button:hover { background: #374151; }
.popover-menu button.danger { color: #dc2626; }
.dark .popover-menu button.danger { color: #f87171; }
.popover-menu .menu-divider {
height: 1px;
background: #e5e7eb;
margin: 4px 0;
}
.dark .popover-menu .menu-divider { background: #374151; }
/* ---------------------------------------------------- 3.15 Empty State */
.empty-state {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
text-align: center;
color: #6b7280;
}
.dark .empty-state { color: #9ca3af; }
.empty-state .es-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: #f1f3f5;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 16px;
}
.dark .empty-state .es-icon { background: #374151; }
.empty-state h3 {
font: 600 16px Inter;
color: #1f2937;
margin: 0 0 4px 0;
}
.dark .empty-state h3 { color: #f3f4f6; }
.empty-state p {
font: 400 14px Inter;
max-width: 30ch;
margin: 0 0 16px 0;
}
.empty-state .es-btn {
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
padding: 8px 16px;
font: 600 13px Inter;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.empty-state .es-btn:hover { background: #1d4ed8; }
.empty-state kbd {
background: #e5e7eb;
color: #1f2937;
padding: 2px 6px;
border-radius: 4px;
font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dark .empty-state kbd { background: #4b5563; color: #f3f4f6; }
/* -------------------------------------------------- 3.16 Notes Preview */
.notes-preview {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px 32px 32px;
font: 400 15px/1.65 Inter;
color: #111827;
}
.dark .notes-preview { color: #e5e7eb; }
.notes-preview h1 { font: 700 28px/1.3 Inter; margin: 16px 0 8px; }
.notes-preview h2 { font: 700 22px/1.3 Inter; margin: 16px 0 8px; }
.notes-preview h3 { font: 700 18px/1.3 Inter; margin: 14px 0 6px; }
.notes-preview ul,
.notes-preview ol { margin: 8px 0 8px 24px; }
.notes-preview li { margin: 4px 0; }
.notes-preview p { margin: 8px 0; }
.notes-preview blockquote {
border-left: 3px solid #e5e7eb;
margin: 8px 0;
padding-left: 12px;
color: #6b7280;
}
.dark .notes-preview blockquote { border-left-color: #4b5563; color: #9ca3af; }
.notes-preview code {
background: #f1f3f5;
padding: 1px 6px;
border-radius: 4px;
font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
color: #be185d;
}
.dark .notes-preview code { background: #374151; color: #f9a8d4; }
.notes-preview pre {
background: #f1f3f5;
padding: 12px;
border-radius: 8px;
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
overflow-x: auto;
}
.notes-preview pre code {
background: transparent;
padding: 0;
color: inherit;
}
.dark .notes-preview pre { background: #111827; color: #e5e7eb; }
.notes-preview a { color: #2563eb; text-decoration: underline; }
.dark .notes-preview a { color: #60a5fa; }
.notes-preview img {
max-width: 100%;
border-radius: 8px;
margin: 12px 0;
border: 1px solid #e5e7eb;
}
.notes-preview table {
border-collapse: collapse;
margin: 8px 0;
}
.notes-preview th,
.notes-preview td {
border: 1px solid #e5e7eb;
padding: 6px 10px;
text-align: left;
}
.dark .notes-preview th,
.dark .notes-preview td { border-color: #4b5563; }
.notes-preview th { background: #f9fafb; font-weight: 600; }
.dark .notes-preview th { background: #374151; }
/* ---------------------------------------- 3.17 Drag-drop & Upload Chip */
.notes-editor-pane.dropzone-hover {
outline: 3px dashed #6366f1;
outline-offset: -10px;
background: rgba(99, 102, 241, 0.06);
}
.dropzone-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 16px 24px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #6366f1;
border-radius: 12px;
font: 600 14px Inter;
color: #4338ca;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 12px 30px -8px rgba(99, 102, 241, 0.4);
pointer-events: none;
z-index: 30;
}
.dark .dropzone-message {
background: rgba(31, 41, 55, 0.96);
color: #c7d2fe;
}
.upload-progress {
display: inline-flex;
align-items: center;
gap: 10px;
background: #eef2ff;
color: #4338ca;
border-radius: 8px;
padding: 6px 12px;
margin: 8px 0;
font: 500 13px Inter;
}
.dark .upload-progress {
background: rgba(79, 70, 229, 0.15);
color: #c7d2fe;
}
.upload-progress .bar {
width: 120px;
height: 4px;
background: #c7d2fe;
border-radius: 2px;
overflow: hidden;
position: relative;
}
.upload-progress .bar > span {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #6366f1;
transition: width 0.2s ease-out;
}
/* ---------------------------------- 3.18 / 3.19 Mobile (<768px) */
@media (max-width: 767px) {
/* Mobile mode: when the user is in the editor we add .notes-mobile-editing
to #notesView; sidebar slides out, editor takes over. */
.notes-sidebar {
flex: 0 0 100%;
max-width: none;
min-width: 0;
border-right: none;
}
.notes-editor-pane { display: none; }
#notesView.notes-mobile-editing .notes-sidebar { display: none; }
#notesView.notes-mobile-editing .notes-editor-pane {
display: flex;
flex: 1 1 100%;
}
/* ─── Slide-in / slide-out transition ──────────────────────────────────
Mirrors the chat list ↔ thread transition at app.js:41714 and
styles.css:579 .message-area.is-entering-thread. While
.notes-mobile-animating is on #notesView, both panes are forced
visible and overlaid full-bleed so JS can drive opposing transforms
on them. The class is added before the slide, removed at the end.
During the animation the editor sits above the sidebar so its
translateX is what the user actually sees moving (matches iOS
Messages where the thread reveals the underlying list). */
#notesView.notes-mobile-animating {
position: relative;
overflow: hidden;
}
#notesView.notes-mobile-animating .notes-sidebar,
#notesView.notes-mobile-animating .notes-editor-pane {
display: flex !important;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
flex: 0 0 100% !important;
will-change: transform;
}
#notesView.notes-mobile-animating .notes-editor-pane { z-index: 2; }
#notesView.notes-mobile-animating .notes-sidebar { z-index: 1; }
}
/* Notes-specific mobile swipe action — Delete only (DEV-6).
Reuses .swipe-outer-wrapper from app.js (~line 12700). */
.notes-swipe-delete {
background: #dc2626;
width: 80px;
border: none;
font: 600 13px Inter;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
}
.notes-swipe-delete i { font-size: 16px; }