:root{
      --bg:#f8fafc; --panel:#ffffff; --panel-2:#f8fafc; --text:#0f172a; --muted:#64748b; --accent:#22d3ee; --accent-2:#38bdf8; --ring:rgba(34,211,238,.25);
      --bubble-bg:#f1f5f9; --bubble-border:#cbd5e1; --shadow:0 6px 24px rgba(0,0,0,.12); --radius:16px;
      --border:#e2e8f0;
      --week-min-h: 360px;
    }
    *{ box-sizing:border-box; }
    /* let the document grow */
    html,body{ min-height:100%; overscroll-behavior-y:none; }
    /* SOLID body background (no gradients) */
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      overflow:auto;
    }
    /* Editor page: use internal scroller to avoid viewport overscroll / pull-to-refresh */
    body.editor-page{
      overflow:hidden;
    }
    body.editor-page .app{
      height:100vh;
      height:100dvh;
      overflow-y:auto;
      overscroll-behavior-y:none;
    }
    /* app must not lock the viewport height */
    .app{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:300px 1fr; }

    /* Sidebar */
    aside.sidebar{
      background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
      border-right:1px solid var(--border);
      display:flex;
      flex-direction:column;
      padding:16px 0 16px 16px; /* No right padding so scrollbar can sit at edge */
      gap:16px;
      z-index:10;
      height:100vh;
      max-height:100vh;
      box-sizing:border-box;
      transition:transform .3s ease, box-shadow .3s ease;
    }
    .sidebar header{
      font-weight:700;
      font-size:16px;
      letter-spacing:.05em;
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--text);
      padding-bottom:10px;
      border-bottom:1px solid var(--border);
      position:relative;
    }
    .sidebar .close-btn{
      position:absolute;
      right:0;
      top:0;
      background:none;
      border:none;
      font-size:24px;
      line-height:1;
      cursor:pointer;
      opacity:.5;
      padding:0;
      display:none; /* Only visible on mobile */
    }
    .sidebar .hint{
      font-size:12px;
      color:var(--muted);
      padding:8px;
      background:var(--panel-2);
      border-radius:var(--radius);
      border:1px dashed var(--border);
    }
    .sidebar .bubble-search{
      padding:8px;
      background:var(--panel-2);
      border-radius:var(--radius);
      border:1px solid var(--border);
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .sidebar .bubble-search .search-row{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
    }
    .sidebar .bubble-search .search-input{
      flex:1 1 auto;
      min-width:0;
      width:auto;
      padding:10px 12px;
      border-radius:8px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--text);
      outline:none;
    }
    .sidebar .bubble-search .search-input:focus-visible{
      outline:3px solid var(--ring);
      outline-offset:2px;
    }
    .sidebar .bubble-search .search-clear{
      flex:0 0 auto;
      width:36px;
      height:36px;
      border-radius:8px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--muted);
      cursor:pointer;
      font-size:20px;
      line-height:1;
    }
    .sidebar .bubble-search .search-clear:hover{ opacity:.85; }
    .sidebar .bubble-search .search-status{
      font-size:12px;
      color:var(--muted);
      min-height:16px;
    }
    .sidebar .bubbles-list{
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      padding-right:16px; /* Keep content padded while scrollbar hugs sidebar edge */
    }
    .sidebar .bubbles-list .bubble{
      /* Keep sidebar bubbles at natural height so list scrolls instead of squishing */
      flex:0 0 auto;
    }
    .sidebar .add-btn{
      margin-top:auto;
      padding:10px 16px;
      background-color:var(--accent);
      color:white;
      border:none;
      border-radius:var(--radius);
      font-weight:600;
      cursor:pointer;
      transition:background-color .2s;
      box-shadow:0 4px 12px rgba(34,211,238,.3);
    }
    .sidebar .add-btn:hover{ background-color:var(--accent-2); }
    .sidebar .add-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    /* Main Content & Toolbar */
    main{ position:relative; overflow:hidden; }
    .toolbar{
      padding:10px 16px;
      display:flex;
      align-items:center;
      gap:16px;
      border-bottom:1px solid var(--border);
      background-color:var(--panel);
      position:sticky;
      top:0;
      z-index:5;
    }
    .toolbar .toolbar-title{ margin-right:auto; }
    .toolbar .edit-btn{
      margin-left:auto;
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:8px;
      background-color:var(--panel-2);
      cursor:pointer;
    }
    body.edit-mode .toolbar .edit-btn{
      background-color:#fde68a;
      border-color:#f59e0b;
    }
    .menu-btn{
      padding:8px 10px;
      background-color:var(--panel-2);
      border:1px solid var(--border);
      border-radius:var(--radius);
      cursor:pointer;
      transition:opacity .2s;
      display:none; /* Only visible on mobile */
    }
    .menu-btn:hover{ opacity:.8; }
    .toolbar-title{
      font-weight:700;
      color:var(--text);
      visibility:hidden;
    }
    .toolbar-title-input{
      font-family:inherit;
      font-size:inherit;
      font-weight:700;
      color:var(--text);
      flex:1 1 auto;
      min-width:0;
      max-width:100%;
    }

    /* Week Table Layout */
    .week-container{
      padding:16px;
      overflow-x:auto; /* Ensure the table can scroll if necessary */
    }
    .week-table{
      width:100%;
      border-collapse:collapse; /* Collapse borders for a tight grid look */
      border-spacing:0;
      min-width:768px; /* Minimum width for desktop layout */
      table-layout: fixed; /* Ensures all columns have equal width */
    }
    .week-table th{
      padding:8px 12px;
      text-align:center; /* Centered table field names */
      font-size:12px;
      font-weight:600;
      letter-spacing:.05em;
      text-transform:uppercase;
      color:var(--muted);
      border:1px solid var(--border); /* Clear lines for headers */
    }
    .week-table td{
      border:1px solid var(--border); /* Clear lines for cells */
      padding:0;
      height:100%; /* Important for day flow container to fill */
      position:relative;
      min-height:var(--week-min-h);
      vertical-align:top;
    }
    /* Hide day label on desktop (only needed for mobile accordion) */
    .week-table tbody td::before{
      content:attr(data-day);
      display:none;
    }

    /* --- Accordion Hiding on Desktop (New) --- */
    @media (min-width: 769px){
      .day-accordion__header {
        display: none; /* Hide header completely on desktop */
      }
      .day-accordion__content {
        max-height: none !important; /* Force content open on desktop */
        overflow: visible !important;
      }
    }
    /* ------------------------------------------- */

    /* Day Flow Container */
    .day-flow-container{
      min-height:var(--week-min-h);
      padding:12px;
      position:relative;
      overflow:hidden;
    }
    
    /* Desktop Bubble Stacking */
    .day-flow{
      display:flex;
      flex-direction: column; /* Stack bubbles vertically */
      align-content:flex-start;
      gap:8px; /* Vertical gap between bubbles */
      min-height:calc(var(--week-min-h) - 24px); 
      padding:8px;
      border:1px dashed transparent;
      transition:border-color .2s;
      border-radius:var(--radius);
      flex-wrap: nowrap; /* Prevent horizontal wrapping on desktop */
    }
    
    .day-flow.drop-active{
      border-color:var(--accent);
      background-color:rgba(34,211,238,.05);
    }

    /* Insertion helper line */
    .insert-marker{
      display:block;
      height:2px;
      width:100%;
      background-color:var(--accent);
      opacity:.85;
      border-radius:1px;
      pointer-events:none;
    }

    /* Bubble Styles */
    .bubble{
      padding:6px 10px;
      border-radius:12px;
      border:1px solid;
      font-size:14px;
      font-weight:600;
      cursor:grab;
      max-width:100%;
      overflow:hidden;
      white-space:normal;
      text-overflow:initial;
      box-shadow:0 1px 3px rgba(0,0,0,.05);
      transition:opacity .2s, transform .2s, box-shadow .15s, filter .15s;
      width: 100%; /* Important for vertical stacking to fill container */
      touch-action:none; /* Default: fully capture touch for robust drag */
      user-select:none;              /* Prevent text selection while initiating drag */
      -webkit-user-select:none;
      -webkit-user-drag:none;       /* Prevent native drag ghost on WebKit */
      -webkit-touch-callout:none;   /* Suppress iOS text/callout menu */
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:3px;
      line-height:1.3;
      overflow-wrap:anywhere;
      text-align:center;
    }
    .bubble.prototype{
        width: auto; /* Prototypes should not be full width */
    }
        .bubble:focus-visible{
      outline:3px solid var(--ring);
      outline-offset:2px;
    }
    .bubble:active{
      cursor:grabbing;
    }
    .bubble.dragging{
      opacity:.5;
    }
    .bubble.search-match{
      box-shadow:0 0 0 3px var(--ring), 0 2px 10px rgba(0,0,0,.08);
      filter:brightness(1.04);
    }
    .bubble.search-dim{
      opacity:.22;
      filter:grayscale(.35);
    }
    .bubble.search-hidden{
      display:none !important;
    }
    .bubble.dragging{
      opacity:.5;
      filter:none;
    }
    /* Subtle click pop animation */
    @keyframes bubble-pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.03); }
      100% { transform: scale(1); }
    }
    .bubble.pop-anim{
      animation: bubble-pop .18s ease-out;
    }
    /* In edit mode, make bubbles look non-draggable and clickable */
    body.edit-mode .day-flow .bubble{
      cursor: pointer;
    }
    body.edit-mode .day-flow .bubble:hover{
      box-shadow:0 0 0 3px var(--ring), 0 2px 6px rgba(0,0,0,.08);
      filter:brightness(1.04);
      transform: translateY(-1px);
    }

    /* Inline timestamp after label */
    .bubble .bubble-label{
      width:100%;
      text-align:center;
    }
    .bubble .bubble-time{
      margin-left:0;
      margin-top:2px;
      opacity:.8;
      font-weight:500;
      font-size:12px;
      display:block;
      line-height:1.2;
      width:100%;
      text-align:center;
    }

    /* Trash Zone */
    #trash{
      position:fixed;
      bottom:16px;
      right:16px;
      left:auto;
      background:rgba(239,68,68,.92);
      width:132px;  /* rectangle: slightly larger hit area */
      height:92px;  /* rectangle: slightly larger hit area */
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      z-index:20;
      pointer-events:none; /* Must be pointer-events:none by default */
      opacity:0;
      transition:opacity .2s, transform .2s, box-shadow .2s;
      border:1px solid #dc2626;
      border-radius:16px; /* rounded rectangle */
      box-shadow:0 8px 22px rgba(220,38,38,.35);
      overflow:visible;
    }
    #trash.trash-active{ cursor:pointer; }
    
    /* Pulse animation when hovered or when a dragged item is over it */
    @keyframes trash-pulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    @keyframes trash-ring {
      0%   { opacity:.35; transform: scale(1); }
      100% { opacity:0;   transform: scale(1.25); }
    }
    #trash:hover,
    #trash.drop-active{
      box-shadow:0 10px 26px rgba(185,28,28,.45), 0 6px 18px rgba(185,28,28,.25);
      animation: trash-pulse .7s ease-in-out infinite;
      background:rgba(220,38,38,1);
    }
    #trash:hover::after,
    #trash.drop-active::after{
      content:"";
      position:absolute;
      inset:-6px;
      border:2px solid rgba(248,113,113,.85);
      border-radius:16px; /* follow rounded rectangle */
      animation: trash-ring .7s ease-out infinite;
      pointer-events:none;
    }
    #trash.trash-active{
      opacity:1;
      pointer-events:auto;
    }
    #trash.drop-active svg{
      transform:scale(1.1) rotate(5deg);
    }
    #trash svg{
      width:44px;  /* slightly larger icon */
      height:44px; /* slightly larger icon */
      stroke:#ef4444;
      transition:transform .2s;
    }
    #trash .label{
      display:none; /* Compact bottom-right button: hide inline label */
      font-size:14px;
      font-weight:600;
      color:#ef4444;
      margin-top:8px;
      letter-spacing:.05em;
    }

    /* Mobile Ghost element (custom drag) */
    .drag-ghost{
      position: fixed;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9999;
      opacity: .95;
      box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.12));
    }

    /* Color swatches in modal */
    .color-swatch-group{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:nowrap;
    }
    .color-swatch-group input[type="radio"]{
      position:absolute;
      opacity:0;
      width:1px;
      height:1px;
      pointer-events:none;
    }
    .color-swatch-group label{
      width:28px;
      height:28px;
      border-radius:9999px;
      border:2px solid rgba(0,0,0,.15);
      display:inline-block;
      box-shadow:0 1px 2px rgba(0,0,0,.08) inset;
      cursor:pointer;
    }
    .color-swatch-group input[type="radio"]:checked + label{
      outline:3px solid var(--ring, #bae6fd);
      outline-offset:2px;
      border-color:rgba(0,0,0,.3);
    }
    .color-add-btn{
      width:28px;
      height:28px;
      border-radius:8px;
      border:1px solid #94a3b8;
      color:#475569;
      background:#f8fafc;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      cursor:pointer;
      transition:background .15s, color .15s, border-color .15s;
      flex:0 0 auto;
    }
    .color-add-btn:hover{
      background:#f1f5f9;
      border-color:#64748b;
      color:#0f172a;
    }
    .sr-only-color-picker{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      border:0 !important;
      white-space: nowrap !important;
    }

    /* Confirm popover for custom color */
    .color-confirm-popover{
      position:fixed;
      background:#ffffff;
      border:1px solid #e2e8f0;
      box-shadow:0 8px 24px rgba(0,0,0,.15);
      border-radius:10px;
      padding:10px 12px;
      z-index:999999;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      min-width: 240px;
    }
    .color-confirm-popover .preview{
      width:22px;
      height:22px;
      border-radius:9999px;
      border:2px solid rgba(0,0,0,.15);
      box-shadow:0 1px 2px rgba(0,0,0,.08) inset;
      flex:0 0 auto;
    }
    .color-confirm-popover input[type="text"]{
      width:100px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12px;
      padding:4px 6px;
      border:1px solid #cbd5e1;
      border-radius:6px;
    }
    .color-confirm-popover .actions{ display:flex; gap:6px; align-self:flex-end; }
    .color-confirm-popover button{
      padding:4px 8px;
      font-size:12px;
      border-radius:6px;
      border:1px solid #cbd5e1;
      background:#f8fafc;
      cursor:pointer;
    }
    .color-confirm-popover button.primary{
      border-color:#60a5fa;
      background:#e0f2fe;
    }

    /* Inline color picker UI */
    .color-confirm-popover .picker-inline{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .color-confirm-popover .sv-plane{
      position:relative;
      width:200px;
      height:140px;
      border-radius:8px;
      overflow:hidden;
      border:1px solid #cbd5e1;
      background: linear-gradient(to right, #fff, rgba(255,255,255,0)),
                  linear-gradient(to top, #000, rgba(0,0,0,0));
    }
    .color-confirm-popover .sv-plane::before{
      content:"";
      position:absolute;
      inset:0;
      mix-blend-mode:multiply;
      pointer-events:none;
      border-radius:8px;
    }
    .color-confirm-popover .sv-thumb{
      position:absolute;
      width:14px;
      height:14px;
      border-radius:50%;
      border:2px solid #fff;
      box-shadow:0 0 0 1px rgba(0,0,0,.3);
      transform:translate(-50%, -50%);
      pointer-events:none;
    }
    .color-confirm-popover .hue-bar{
      position:relative;
      width:200px;
      height:12px;
      border-radius:9999px;
      border:1px solid #cbd5e1;
      background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    }
    .color-confirm-popover .hue-thumb{
      position:absolute;
      top:50%;
      width:14px;
      height:14px;
      border-radius:50%;
      border:2px solid #fff;
      box-shadow:0 0 0 1px rgba(0,0,0,.3);
      transform:translate(-50%, -50%);
      pointer-events:none;
    }

    /* --- Mobile accordion styles (screens <= 768px) --- */
    @media (max-width: 768px){
      .app{
        grid-template-columns:1fr; /* Full width for main content */
        position:relative;
        overflow-x:hidden;
      }
      .sidebar .close-btn{
        display:block; /* Show X button on mobile */
      }
      .sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:calc(100vw - 40px);
        max-width:300px;
        transform:translateX(-100%);
        box-shadow:0 0 16px rgba(0,0,0,.2);
        will-change:transform;
      }
      .sidebar.open{
        transform:translateX(0);
      }
      .sidebar-backdrop{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,.5);
        opacity:0;
        visibility:hidden;
        transition:opacity .3s, visibility .3s;
        z-index:9;
      }
      .sidebar.open + .sidebar-backdrop{
        opacity:1;
        visibility:visible;
      }
      /* Fallback when backdrop is not adjacent to sidebar */
      .sidebar-backdrop.open{
        opacity:1;
        visibility:visible;
      }
      .menu-btn{
        display:block;
      }
      .toolbar-title,
      .toolbar-title-input{
        font-size:18px;
      }

      /* Day table adjustments (Mobile: List view) */
      .week-table{
        min-width:unset; /* Allow table to shrink */
        width:100%;
        border-collapse:separate; /* Revert to separate on mobile for list styling */
      }
      .week-table thead, .week-table th{
        display:none; /* Hide original day headers */
      }
      .week-table td{
        display:block; /* Each cell takes full width */
        width:100%;
        min-height:unset;
        border:0; /* Remove borders between cells for clean list look */
        padding:0;
      }
      .week-table tbody tr{
        border-bottom:1px solid var(--border); /* Separate days with a single border */
      }
      
      /* Re-enable Accordion Header on Mobile */
      .day-accordion__header{
        display:flex !important;
        width:100%;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        padding:10px 0;
        font-weight:700;
        color:var(--text);
        background:none;
        border:0;
        cursor:pointer;
        text-align:left; /* Fix text alignment */
      }
      .day-accordion__header .label{
        letter-spacing:.08em;
        text-transform:uppercase;
        font-size:14px;
        color:var(--muted);
      }
      .day-accordion__header .chev{
        width:16px;
        height:16px;
        flex:0 0 auto;
        transition:transform .2s ease;
        opacity:.7;
      }
      .day-accordion__header[aria-expanded="true"] .chev{ transform:rotate(180deg); }

      /* Re-enable Accordion Content Collapse/Expand */
      .day-accordion__content{
        max-height:0;
        overflow:hidden;
        transition:max-height .2s ease-out;
      }
      .day-accordion__content[aria-hidden="false"]{
        max-height:5000px; /* Large value to allow content to show */
      }
      .day-flow-container{
        min-height:unset; /* Allow flow container to shrink on mobile */
        padding:0 12px 12px 12px;
        overflow:visible; /* Let expanded content push layout */
      }
      
      /* Mobile Bubble Vertical Stacking (align like desktop) */
      .day-flow{
        flex-direction: column; /* Stack vertically on mobile accordions */
        flex-wrap: nowrap;
        width: 100%;
        min-height:80px; /* Ensure small drop target when empty */
        border:1px dashed var(--border);
        background-color:var(--panel-2);
      }
      .bubble {
        width: 100%; /* Match desktop full-width stacking */
        font-size:16px; /* Slightly larger text for mobile */
      }
    }

    /* Modal Styles */
    .modal{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background-color:rgba(0,0,0,.5);
      z-index:50;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      visibility:hidden;
      transition:opacity .2s, visibility .2s;
    }
    .modal:not([hidden]){
      opacity:1;
      visibility:visible;
    }
    .dialog{
      background-color:var(--panel);
      padding:24px;
      border-radius:var(--radius);
      box-shadow:0 8px 32px rgba(0,0,0,.2);
      width:90%;
      max-width:400px;
      opacity:0;
      transform:translateY(12px) scale(.98);
      transition:transform .2s ease, opacity .2s ease;
    }
    .modal:not([hidden]) .dialog{
      opacity:1;
      transform:translateY(0) scale(1);
    }
    .dialog h2{
      margin-top:0;
      margin-bottom:16px;
      font-size:20px;
      border-bottom:1px solid var(--border);
      padding-bottom:10px;
    }
    .form-row{
      margin-bottom:16px;
    }
    .form-row label,
    .form-row legend{
      display:block;
      font-weight:600;
      margin-bottom:4px;
      font-size:14px;
    }
    .form-row fieldset{
      border:0;
      margin:0;
      padding:0;
    }
    .form-row input[type="text"],
    .form-row input[type="time"],
    .form-row input[type="number"]{
      width:100%;
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:8px;
      background-color:var(--panel-2);
      font-size:16px;
    }
    .form-row input[type="text"]:focus,
    .form-row input[type="time"]:focus,
    .form-row input[type="number"]:focus{
      outline:2px solid var(--accent);
      outline-offset:0;
      border-color:transparent;
    }
    .time-inputs{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .time-inputs input[type="number"]{
      width:5rem;
    }
    .color-swatch-group{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:8px;
    }
    .color-swatch-group label{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      border-radius:50%;
      border:2px solid transparent;
      cursor:pointer;
      transition:border-color .2s;
    }
    .color-swatch-group input[type="radio"]{
      display:none;
    }
    .color-swatch-group input[type="radio"]:checked + label{
      border-color:var(--text);
      box-shadow:0 0 0 2px var(--panel);
    }
    .modal-actions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      margin-top:20px;
    }
    .modal-actions button{
      padding:10px 16px;
      border-radius:8px;
      font-weight:600;
      cursor:pointer;
    }
    #cancelBtn{
      background-color:var(--panel-2);
      border:1px solid var(--border);
      color:var(--text);
    }
    #submitBtn{
      background-color:var(--accent);
      border:none;
      color:white;
      box-shadow:0 4px 8px rgba(34,211,238,.3);
    }
    .checkbox-group{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .checkbox-group input[type="checkbox"]{
      width:16px;
      height:16px;
    }

    /* --- Mobile DnD hardening --- */
    /* Only on actual draggable (or its handle) so scrolling still works */
    .bubble,
    .bubble [data-drag-handle] {
      /* Default: no native panning while dragging */
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }
    /* But in the sidebar, allow vertical panning on prototype bubbles so the list can scroll */
    .sidebar .bubbles-list .bubble.prototype {
      touch-action: pan-y;
    }

    /* Images/links can spawn native drags on Android */
    .bubble img,
    .bubble a {
      -webkit-user-drag: none;
    }

    /* Let accordion-like containers keep vertical scroll by default */
    .accordion {
      touch-action: pan-y;
    }
    .day-accordion__content {
      touch-action: pan-y;
    }

    /* During an active drag: kill selection & rubber-banding globally */
    .is-dragging * {
      user-select: none !important;
      -webkit-user-select: none !important;
    }
    .is-dragging {
      overscroll-behavior: contain;
    }