/* ==========================================================================
   Notes Views (M3 Expressive Cards & List), Feed, Composer & Chips
   Strict Zero-Emoji Policy
   ========================================================================== */

.composer{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

/* M3 Expressive Composer Box (CornerExtraLarge 28px & Optical Nesting) */
.composer-box{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-extra-large);
  padding:8px;
  gap:8px;
  box-shadow:var(--md-sys-elevation-level1);
  overflow:hidden;
  transition:border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast);
}
.composer-box:focus-within{
  border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 2px var(--accent-subtle);
}
.composer-box.processing{
  border-color:var(--md-sys-color-primary);
}
.composer-progress-track{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2.5px;
  background:transparent;
  overflow:hidden;
  display:none;
  z-index:2;
}
.composer-box.processing .composer-progress-track{
  display:block;
}
.composer-progress-indicator{
  position:absolute;
  top:0;
  height:100%;
  background:var(--md-sys-color-primary);
  animation:composerIndeterminateTrack 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.composer-box textarea{
  flex:1;
  background:transparent;
  border:0;
  border-radius:0;
  padding:8px 6px;
  color:var(--md-sys-color-on-surface);
  font:var(--md-sys-typescale-body-large);
  resize:none;
  min-height:26px;
  max-height:200px;
  outline:none;
  display:block;
}
.composer-box textarea::placeholder{
  color:var(--md-sys-color-on-surface-variant);
  opacity:var(--composer-ph-opacity, 0.8);
  transition:opacity 140ms cubic-bezier(0.2, 0, 0, 1);
  will-change:opacity;
}

.composer-box textarea.ph-fade-out::placeholder{
  opacity:0 !important;
  transition:opacity 130ms cubic-bezier(0.2, 0, 0, 1) !important;
}

.composer-box textarea.ph-fade-in::placeholder{
  opacity:0.8 !important;
  transition:opacity 150ms cubic-bezier(0, 0, 0.2, 1) !important;
}

/* M3 Filled Circular Action Buttons */
.composer-btn,
.composer-attach-btn{
  position:relative;
  width:40px;
  height:40px;
  border-radius:var(--md-sys-shape-corner-full);
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex-shrink:0;
  box-shadow:var(--md-sys-elevation-level1);
  transition:transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}
.composer-btn svg,
.composer-attach-btn svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.composer-btn::after,
.composer-attach-btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  min-width:48px;
  min-height:48px;
  width:100%;
  height:100%;
}
.composer-btn:hover,
.composer-attach-btn:hover{
  opacity:.92;
  transform:scale(1.05);
  box-shadow:var(--md-sys-elevation-level2);
}
.composer-btn:active,
.composer-attach-btn:active{
  transform:scale(.95);
}

.attachment-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 2px;
}

/* M3 Input / Assist Chip */
.attachment-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-small);
  padding:6px 12px;
  font:var(--md-sys-typescale-label-medium);
  color:var(--md-sys-color-on-surface);
  max-width:260px;
  box-shadow:var(--md-sys-elevation-level1);
}
.attachment-chip-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.attachment-chip-del{
  background:none;
  border:0;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  font-size:12px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color var(--md-sys-motion-duration-short2) ease;
}
.attachment-chip-del:hover{
  color:var(--md-sys-color-error);
}

/* M3 Canonical Layout (Notes Content Wrap & Supporting Pane) */
.notes-content-wrap{
  display:flex;
  width:100%;
  height:100%;
  gap:16px;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}

.notes-feed-container{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
  transition:flex var(--md-sys-motion-duration-medium3) var(--md-sys-motion-spring-default);
}

.notes-feed-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}

.notes-scroll-fade{
  position:absolute;
  left:0;
  right:0;
  height:32px;
  pointer-events:none;
  z-index:10;
  opacity:0;
  transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}

.notes-scroll-fade-top{
  top:0;
  background:linear-gradient(to bottom, var(--md-sys-color-surface) 0%, rgba(0,0,0,0) 100%);
}

.notes-scroll-fade-bottom{
  bottom:0;
  background:linear-gradient(to top, var(--md-sys-color-surface) 0%, rgba(0,0,0,0) 100%);
}

.notes-feed-wrap.can-scroll-up .notes-scroll-fade-top{
  opacity:1;
}

.notes-feed-wrap.can-scroll-down .notes-scroll-fade-bottom{
  opacity:1;
}

/* M3 Expressive Filter Chips Row */
.notes-filter-chips-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 4px 10px 4px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  width:100%;
  box-sizing:border-box;
  flex-shrink:0;
}
.notes-filter-chips-row::-webkit-scrollbar{
  display:none;
}

.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 16px;
  border-radius:var(--md-sys-shape-corner-small);
  border:1px solid var(--md-sys-color-outline-variant);
  background:var(--md-sys-color-surface-container-low);
  color:var(--md-sys-color-on-surface-variant);
  font:var(--md-sys-typescale-label-large);
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  box-shadow:var(--md-sys-elevation-level0);
  transition:all var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-fast);
}
.filter-chip svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.filter-chip:hover{
  background:var(--md-sys-color-surface-container-high);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline);
  transform:scale(1.02);
}
.filter-chip:active{
  transform:scale(0.97);
}
.filter-chip.active{
  background:var(--md-sys-color-secondary-container);
  color:var(--md-sys-color-on-secondary-container);
  border-color:transparent;
  font:var(--md-sys-typescale-label-large-emphasized);
  box-shadow:var(--md-sys-elevation-level1);
}
.filter-chip .chip-check{
  display:none;
  width:18px;
  height:18px;
  flex-shrink:0;
}
.filter-chip.active .chip-check{
  display:inline-block;
}

/* M3 Canonical Layout Supporting Pane (Desktop List-Detail) */
.notes-supporting-pane{
  width:420px;
  max-width:44%;
  height:calc(100% - 10px);
  margin-bottom:10px;
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-extra-large);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-sizing:border-box;
  overflow-y:auto;
  box-shadow:var(--md-sys-elevation-level2);
  flex-shrink:0;
  animation:supportingPaneSlideIn var(--md-sys-motion-duration-medium3) var(--md-sys-motion-spring-default) forwards;
}
@keyframes supportingPaneSlideIn{
  0%{
    opacity:0;
    transform:translateX(35px) scale(0.97);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}
@media (max-width:899px){
  .notes-supporting-pane{
    display:none !important;
  }
}
.supporting-pane-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--md-sys-color-outline-variant);
}
.supporting-pane-close{
  background:none;
  border:0;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  padding:6px;
  border-radius:var(--md-sys-shape-corner-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-fast);
}
.supporting-pane-close:hover{
  background:rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  color:var(--md-sys-color-on-surface);
  transform:scale(1.08);
}
.supporting-pane-scroll-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}

.supporting-pane-scroll-fade{
  position:absolute;
  left:0;
  right:0;
  height:28px;
  pointer-events:none;
  z-index:10;
  opacity:0;
  transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}

.supporting-pane-scroll-fade-top{
  top:0;
  background:linear-gradient(to bottom, var(--md-sys-color-surface-container-low) 0%, rgba(0,0,0,0) 100%);
}

.supporting-pane-scroll-fade-bottom{
  bottom:0;
  background:linear-gradient(to top, var(--md-sys-color-surface-container-low) 0%, rgba(0,0,0,0) 100%);
}

.supporting-pane-scroll-wrap.can-scroll-up .supporting-pane-scroll-fade-top{
  opacity:1;
}

.supporting-pane-scroll-wrap.can-scroll-down .supporting-pane-scroll-fade-bottom{
  opacity:1;
}

.supporting-pane-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.supporting-pane-title{
  font:var(--md-sys-typescale-headline-small-emphasized);
  color:var(--md-sys-color-on-surface);
  line-height:1.3;
  margin:0 0 6px 0;
}
.supporting-pane-raw{
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  line-height:1.5;
}
.supporting-pane-processed{
  background:var(--md-sys-color-surface-container);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-medium);
  padding:14px;
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface);
}
.supporting-pane-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--md-sys-color-outline-variant);
}

/* Feed Container */
.feed{
  overflow-y:auto;
  overflow-x:hidden;
  min-height:100px;
  padding:8px 4px;
  margin:-6px 0 0 0;
  width:100%;
  box-sizing:border-box;
}

/* Feed Empty Centered State */
.feed.feed-empty,
.feed:has(.m3-empty-state),
.feed:has(.empty){
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  flex:1 1 0% !important;
  min-height:280px;
  box-sizing:border-box;
  text-align:center;
}

/* Cards View (M3 Adaptive Canonical Feed Grid) */
.feed.cards-view{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  align-content:start;
  width:100%;
  box-sizing:border-box;
}

@media (max-width: 599px){
  .feed.cards-view{
    grid-template-columns:1fr;
    gap:12px;
  }
}

@media (min-width: 600px) and (max-width: 839px){
  .feed.cards-view{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
}

@media (min-width: 840px) and (max-width: 1199px){
  .feed.cards-view{
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
  }
}

@media (min-width: 1200px){
  .feed.cards-view{
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
  }
}
.feed.cards-view > div{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* List View */
.feed.list-view{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}
.feed.list-view > div{
  width:100%;
  box-sizing:border-box;
}

/* M3 Elevated & Outlined Cards (20px CornerLargeIncreased & Asymmetrical Priority) */
.note-card{
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-large-increased);
  padding:16px;
  transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-fast),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects),
              border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-spring-effects);
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  min-height:130px;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  box-shadow:var(--md-sys-elevation-level1);
}
.note-card:hover{
  border-color:var(--md-sys-color-outline);
  transform:translateY(-3px) scale(1.015);
  box-shadow:var(--md-sys-elevation-level2);
}
.note-card.active-selected{
  border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 2px var(--accent-subtle), var(--md-sys-elevation-level2);
}
.note-card.pending,
.note-card.processing,
.note-card.error{
  border-top-left-radius:var(--md-sys-shape-corner-extra-large);
}
.note-card.processing{
  border-color:rgba(249, 115, 22, 0.45) !important;
}
.note-card.error{
  border-color:rgba(239, 68, 68, 0.45) !important;
}
.note-card.menu-open{
  overflow:visible !important;
  z-index:30;
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  position:relative;
}
.card-top-left{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:var(--md-sys-typescale-label-small-emphasized);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--md-sys-color-on-surface-variant);
  white-space:nowrap;
  min-width:0;
  flex-shrink:0;
  border-radius:var(--md-sys-shape-corner-extra-small);
  padding:2px 6px;
}
.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--md-sys-color-on-surface-variant);
}
.status-badge.done{
  background:rgba(34, 197, 94, 0.14) !important;
  color:#16a34a !important;
}
:root[data-theme="dark"] .status-badge.done,
:root:not([data-theme="light"]) .status-badge.done{
  background:rgba(34, 197, 94, 0.16) !important;
  color:#22c55e !important;
}
.status-badge.done .status-dot{
  background:#22c55e !important;
}
.status-badge.processing{
  background:rgba(249, 115, 22, 0.14) !important;
  color:#ea580c !important;
}
:root[data-theme="dark"] .status-badge.processing,
:root:not([data-theme="light"]) .status-badge.processing{
  background:rgba(249, 115, 22, 0.16) !important;
  color:#fb923c !important;
}
.status-badge.processing .status-dot{
  background:#f97316 !important;
  animation:pulse 1.2s infinite;
}
.status-badge.error{
  background:rgba(239, 68, 68, 0.14) !important;
  color:#dc2626 !important;
}
:root[data-theme="dark"] .status-badge.error,
:root:not([data-theme="light"]) .status-badge.error{
  background:rgba(239, 68, 68, 0.16) !important;
  color:#f87171 !important;
}
.status-badge.error .status-dot{
  background:#ef4444 !important;
}
.status-badge.pending{
  background:rgba(156, 163, 175, 0.12) !important;
  color:#6b7280 !important;
}
:root[data-theme="dark"] .status-badge.pending,
:root:not([data-theme="light"]) .status-badge.pending{
  background:rgba(156, 163, 175, 0.14) !important;
  color:#9ca3af !important;
}
.status-badge.pending .status-dot{
  background:#9ca3af !important;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Minimalist dot-only status indicator for note preview cards */
.status-badge.dot-only{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  min-width:14px;
  min-height:14px;
  padding:0;
  border-radius:var(--md-sys-shape-corner-full);
  background:transparent !important;
  border:0;
  flex-shrink:0;
}
.status-badge.dot-only .status-dot{
  width:8px;
  height:8px;
  border-radius:var(--md-sys-shape-corner-full);
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
}
.status-badge.dot-only.done .status-dot{
  background:#22c55e !important;
  box-shadow:0 0 6px rgba(34, 197, 94, 0.6) !important;
}
.status-badge.dot-only.processing .status-dot{
  background:#f97316 !important;
  box-shadow:0 0 8px rgba(249, 115, 22, 0.6) !important;
  animation:pulse 1.2s infinite;
}
.status-badge.dot-only.error .status-dot{
  background:#ef4444 !important;
  box-shadow:0 0 8px rgba(239, 68, 68, 0.6) !important;
}
.status-badge.dot-only.pending .status-dot{
  background:#9ca3af !important;
  box-shadow:none !important;
}

.card-date{
  font:var(--md-sys-typescale-label-small);
  color:var(--md-sys-color-on-surface-variant);
  white-space:nowrap;
  flex-shrink:0;
}

/* 3-dots Overflow Menu on Note Cards */
.card-more-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  flex-shrink:0;
}
.card-more-btn{
  background:transparent;
  border:0;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
  border-radius:var(--md-sys-shape-corner-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
  opacity:0.7;
}
.note-card:hover .card-more-btn,
.card-more-btn:focus,
.card-more-wrap.open .card-more-btn{
  opacity:1;
}
.card-more-btn:hover,
.card-more-wrap.open .card-more-btn{
  background:var(--md-sys-color-surface-container-highest);
  color:var(--md-sys-color-on-surface);
  transform:scale(1.08);
}
.card-more-btn svg{
  width:18px;
  height:18px;
  pointer-events:none;
}
.card-more-btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  min-width:44px;
  min-height:44px;
  width:100%;
  height:100%;
}
.card-dropdown-menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:136px;
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-medium);
  box-shadow:var(--md-sys-elevation-level2);
  padding:4px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:70;
  animation:modalIn .15s var(--md-sys-motion-spring-fast);
}
.card-more-wrap.open .card-dropdown-menu{
  display:flex;
}
.card-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 12px;
  border:0;
  background:none;
  border-radius:var(--md-sys-shape-corner-small);
  color:var(--md-sys-color-on-surface);
  font:var(--md-sys-typescale-label-medium);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  text-align:left;
  transition:all var(--md-sys-motion-duration-short2) ease;
  user-select:none;
  box-sizing:border-box;
}
.card-dropdown-item svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--md-sys-color-on-surface-variant);
  pointer-events:none;
  transition:color var(--md-sys-motion-duration-short2) ease;
}
.card-dropdown-item:hover{
  background:var(--md-sys-color-surface-container-highest);
  color:var(--md-sys-color-on-surface);
}
.card-dropdown-item:hover svg{
  color:var(--md-sys-color-on-surface);
}
.card-dropdown-item.danger:hover{
  background:var(--md-sys-color-error-container);
  color:var(--md-sys-color-on-error-container);
}
.card-dropdown-item.danger:hover svg{
  color:var(--md-sys-color-on-error-container);
}
.card-title{
  font:var(--md-sys-typescale-title-medium-emphasized);
  color:var(--md-sys-color-on-surface);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card-summary{
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  word-break:break-word;
}
.card-att-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font:var(--md-sys-typescale-label-small);
  color:var(--md-sys-color-on-surface-variant);
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  padding:3px 8px;
  border-radius:var(--md-sys-shape-corner-extra-small);
  width:fit-content;
}
.mini-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:auto;
}
.mini-tag, .note-chip{
  font:var(--md-sys-typescale-label-small-emphasized);
  padding:4px 10px;
  border-radius:var(--md-sys-shape-corner-small);
  background:var(--md-sys-color-secondary-container);
  color:var(--md-sys-color-on-secondary-container);
  white-space:nowrap;
  border:1px solid transparent;
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
}
.mini-tag:hover, .note-chip:hover{
  background:var(--md-sys-color-surface-container-highest);
  border-color:var(--md-sys-color-outline-variant);
  transform:translateY(-1px);
}
.note-card .card-actions{
  display:none !important;
}
.card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding-top:8px;
  border-top:1px dashed var(--md-sys-color-outline-variant);
  opacity:.7;
  transition:opacity var(--md-sys-motion-duration-short2) ease;
}
.note-card:hover .card-actions{
  opacity:1;
}
.card-action-btn{
  background:none;
  border:0;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:var(--md-sys-shape-corner-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
}
.card-action-btn:hover{
  color:var(--md-sys-color-on-surface);
  background:rgba(var(--md-sys-color-on-surface-rgb), var(--md-sys-state-hover-layer));
  transform:scale(1.08);
}
.card-action-btn:active{
  transform:scale(0.92);
}
.card-action-btn.del-btn:hover{
  color:var(--md-sys-color-error);
  background:rgba(var(--md-sys-color-error-rgb, 239, 68, 68), 0.1);
}

/* M3 Outlined List View */
.note-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-medium);
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
  box-shadow:var(--md-sys-elevation-level1);
  transition:border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects),
              transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-fast),
              background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-spring-effects);
}
.note-row:hover{
  border-color:var(--md-sys-color-outline);
  background:var(--md-sys-color-surface-container);
  transform:translateY(-1px);
  box-shadow:var(--md-sys-elevation-level2);
}
.note-row .status-badge{
  flex-shrink:0;
}
.note-row .row-main{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.note-row .row-title{
  font:var(--md-sys-typescale-title-small-emphasized);
  color:var(--md-sys-color-on-surface);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}
.note-row .row-summary{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant);
}
.note-row .row-att-badge{
  font:var(--md-sys-typescale-label-small);
  color:var(--md-sys-color-on-surface-variant);
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  padding:3px 8px;
  border-radius:var(--md-sys-shape-corner-extra-small);
  flex-shrink:0;
}
.note-row .row-tags{
  display:flex;
  gap:5px;
  flex-shrink:0;
}
.note-row .row-date{
  font:var(--md-sys-typescale-label-small);
  color:var(--md-sys-color-on-surface-variant);
  white-space:nowrap;
  flex-shrink:0;
}
.note-row .row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  opacity:.6;
  transition:opacity var(--md-sys-motion-duration-short2) ease;
}
.note-row:hover .row-actions{
  opacity:1;
}
.note .processed.empty{display:none}
.note .meta{color:var(--md-sys-color-on-surface-variant); font:var(--md-sys-typescale-body-small);}
.note .actions{display:flex; gap:8px; margin-top:8px;}
.note .actions button{
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  color:var(--md-sys-color-on-surface);
  border-radius:var(--md-sys-shape-corner-full);
  padding:6px 12px;
  font:var(--md-sys-typescale-label-medium);
  cursor:pointer;
  transition:all var(--md-sys-motion-duration-short2) var(--md-sys-motion-spring-effects);
}
.note .actions button:hover{
  background:var(--md-sys-color-surface-container-highest);
  border-color:var(--md-sys-color-outline);
}
.typing{color:var(--md-sys-color-on-surface-variant); font-style:italic}