:root{
    /* ===== JESUSWW BRAND ===== */
    --jw-bg1:#070A12;
    --jw-bg2:#0B1020;
    --jw-surface:rgba(255,255,255,.08);
    --jw-border:rgba(255,255,255,.14);
    --jw-border2:rgba(255,255,255,.18);
    --jw-text:#fff;
    --jw-muted:rgba(255,255,255,.66);
    --jw-accent:#7C3AED;
    --jw-accent2:#3B82F6;
    --jw-gold:#F6C453;
    --jw-glass:saturate(160%) blur(14px);
    --jw-shadow:0 12px 34px rgba(0,0,0,.38);
    --jw-ai:rgba(34,197,94,.14);
    --jw-me:rgba(124,58,237,.18);

    /* Layout */
    --hdrH:58px;
    --sidebarW:320px;
    --radius:22px;

    /* Fallback header vars */
    --hdrBg:rgba(255,255,255,.92);
    --hdrBorder:rgba(0,0,0,.08);
    --hdrText:#0b0f17;
    --hdrMuted:rgba(11,15,23,.64);
    --hdrBtnHover:rgba(0,0,0,.06);
    --hdrBtnActive:rgba(0,0,0,.10);

    /* Composer */
    --composerMax:980px;
    --cmpH:76px;
    --vvBottom:0px;
    --cmpTotal:calc(var(--cmpH) + 28px + env(safe-area-inset-bottom) + var(--vvBottom));

    /* Pills */
    --jw-purpleA:#7C3AED;
    --jw-purpleB:#3B82F6;
    --jw-goldA:#F6C453;
    --jw-goldB:#F59E0B;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }

  html{
    -webkit-text-size-adjust:100%;
  }

  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--jw-text);
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.35), transparent 55%),
      radial-gradient(1000px 560px at 90% 0%, rgba(59,130,246,.28), transparent 55%),
      linear-gradient(180deg,var(--jw-bg2),var(--jw-bg1));
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  button,
  textarea,
  input,
  select{
    font:inherit;
  }

  /* =========================
     ACCESSIBILITY / HELPERS
     ========================= */
  .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;
  }

  /* =========================
     HEADER
     ========================= */
  .app-header{
    position:sticky;
    top:0;
    z-index:9999;
    height:calc(var(--hdrH) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    background:linear-gradient(180deg, rgba(11,16,32,.88), rgba(7,10,18,.92));
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:saturate(180%) blur(16px);
  }

  .app-header .row{
    position:relative;
    z-index:2;
    height:var(--hdrH);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 14px;
  }

  .hdr-left,
  .hdr-mid,
  .hdr-right{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .hdr-mid{
    min-width:0;
    flex:1;
  }

  .hdr-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    max-width:min(640px, 64vw);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:20px;
    font-weight:900;
    letter-spacing:-.02em;
    color:#fff;
  }

  .hdr-title small{
    font-weight:800;
    font-size:.88em;
    color:rgba(255,255,255,.65);
  }

  .brand-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(59,130,246,.18));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
    font-weight:950;
    overflow:hidden;
    isolation:isolate;
    background-clip:padding-box;
  }

  .brand-dot{
    position:relative;
    width:10px;
    height:10px;
    border-radius:999px;
    background:conic-gradient(from 180deg, var(--jw-gold), var(--jw-accent), var(--jw-accent2), var(--jw-gold));
    box-shadow:0 0 0 3px rgba(246,196,83,.18);
    will-change:transform, filter;
    animation:jwDotBreath 2.6s ease-in-out infinite;
  }

  .brand-dot::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(246,196,83,.28), transparent 60%);
    filter:blur(2px);
    opacity:.55;
    transform:scale(.92);
    animation:jwDotGlow 2.6s ease-in-out infinite;
    pointer-events:none;
  }

  body.is-devotion .brand-dot{
    background:linear-gradient(135deg, #93C5FD, #A5B4FC, #67E8F9);
    box-shadow:0 0 0 3px rgba(147,197,253,.22);
    animation:jwDotDevotion 2.9s ease-in-out infinite;
  }

  body.is-devotion .brand-dot::after{
    background:radial-gradient(circle, rgba(147,197,253,.30), transparent 62%);
    opacity:.45;
  }

  .icon-btn{
    appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    width:38px;
    height:38px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .12s ease, transform .12s ease;
    touch-action:manipulation;
    flex:0 0 auto;
  }

  .icon-btn:hover{ background:rgba(255,255,255,.08); }
  .icon-btn:active{
    background:rgba(255,255,255,.14);
    transform:translateY(1px);
  }

  .hdr-action{
    appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    font-weight:900;
    padding:8px 10px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:background .12s ease, transform .12s ease;
    touch-action:manipulation;
  }

  .hdr-action:hover{ background:rgba(255,255,255,.08); }
  .hdr-action:active{
    background:rgba(255,255,255,.14);
    transform:translateY(1px);
  }

  .icon{
    width:20px;
    height:20px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .goldline{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(246,196,83,.85), transparent);
    opacity:.7;
  }

  /* =========================
     APP LAYOUT
     ========================= */
  .app{
    height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top)));
    display:flex;
    min-height:0;
  }

  /* =========================
     SIDEBAR
     ========================= */
  .sidebar{
    width:var(--sidebarW);
    max-width:92vw;
    background:rgba(0,0,0,.22);
    border-right:1px solid rgba(255,255,255,.10);
    backdrop-filter:var(--jw-glass);
    padding:14px;
    padding-bottom:96px;
    overflow:auto;
    transition:transform .18s ease, width .18s ease, padding .18s ease, border-color .18s ease;
    z-index:70;
  }

  .sidebar.closed{
    width:0 !important;
    padding:0 !important;
    border-right:0 !important;
    overflow:hidden !important;
  }

  .sidebar.closed *{
    pointer-events:none;
  }

  .side-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:6px 0 12px;
  }

  .side-title h2{
    margin:0;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    font-weight:950;
    font-size:12px;
    cursor:pointer;
    transition:transform .12s ease;
    touch-action:manipulation;
  }

  .pill:active{ transform:translateY(1px); }

  .pill .dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--jw-gold);
    box-shadow:0 0 0 3px rgba(246,196,83,.18);
  }

  #closeMenuBtn.pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    height:36px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(59,130,246,.14));
    color:#fff;
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:saturate(160%) blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.28);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  }

  #closeMenuBtn .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--jw-gold);
    box-shadow:0 0 0 3px rgba(246,196,83,.18), 0 0 10px rgba(246,196,83,.55);
  }

  #closeMenuBtn:hover{
    filter:brightness(1.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 26px rgba(0,0,0,.38);
  }

  #closeMenuBtn:active{
    transform:translateY(1px) scale(.98);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.28);
  }

  #closeMenuBtn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(124,58,237,.55), 0 10px 26px rgba(0,0,0,.35);
  }

  .mode-list{
    display:grid;
    gap:10px;
  }

  .mode-card{
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    overflow:hidden;
    cursor:pointer;
    transition:transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
    touch-action:manipulation;
    user-select:none;
    scroll-margin-bottom:80px;
  }

  .mode-card:active{ transform:translateY(1px); }

  .mode-card .thumb{
    position:relative;
    height:78px;
    background:
      radial-gradient(520px 180px at 20% 0%, rgba(124,58,237,.42), transparent 60%),
      radial-gradient(520px 180px at 90% 0%, rgba(59,130,246,.32), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  }

  .mode-card .thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.32));
  }

  .mode-card .meta{
    padding:10px 12px 12px;
  }

  .mode-card .name{
    margin:0 0 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:950;
    font-size:14px;
    letter-spacing:-.01em;
  }

  .mode-card .name span{
    opacity:.92;
    font-size:12px;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:rgba(255,255,255,.70);
  }

  .mode-card .desc{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.35;
  }

  .mode-card.active{
    border-color:rgba(246,196,83,.55);
    box-shadow:0 16px 38px rgba(0,0,0,.42);
    background:linear-gradient(135deg, rgba(124,58,237,.20), rgba(59,130,246,.14));
  }

  .mode-card.active .thumb{
    background:
      radial-gradient(520px 180px at 20% 0%, rgba(246,196,83,.22), transparent 62%),
      radial-gradient(520px 180px at 70% 0%, rgba(124,58,237,.46), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  }

  .side-section{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.10);
  }

  .side-section .side-title-mini{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 10px;
  }

  .side-section .side-title-mini h3{
    margin:0;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.70);
  }

  .side-ghost{
    appearance:none;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#fff;
    border-radius:12px;
    padding:8px 10px;
    font-weight:900;
    cursor:pointer;
  }

  .side-ghost:hover{ background:rgba(255,255,255,.10); }

  .side-chats{
    display:grid;
    gap:8px;
    margin-bottom:8px;
  }

  .side-chat-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    cursor:pointer;
    user-select:none;
    transition:transform .12s ease, background .12s ease, border-color .12s ease;
  }

  .side-chat-item:active{ transform:translateY(1px); }
  .side-chat-item:hover{ background:rgba(255,255,255,.08); }

  .side-chat-item.current{
    border-color:rgba(246,196,83,.55);
    background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(59,130,246,.12));
  }

  .side-chat-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    margin-top:4px;
    background:rgba(255,255,255,.38);
    box-shadow:0 0 0 3px rgba(255,255,255,.08);
    flex:0 0 auto;
  }

  .side-chat-item.current .side-chat-dot{
    background:var(--jw-gold);
    box-shadow:0 0 0 3px rgba(246,196,83,.18);
  }

  .side-chat-meta{
    min-width:0;
    flex:1;
  }

  .side-chat-title{
    font-weight:950;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .side-chat-sub{
    margin-top:2px;
    font-size:11.5px;
    color:rgba(255,255,255,.62);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .side-chat-actions{
    display:flex;
    gap:6px;
    flex:0 0 auto;
  }

  .side-mini{
    appearance:none;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.16);
    color:#fff;
    border-radius:12px;
    padding:8px 10px;
    font-weight:900;
    cursor:pointer;
  }

  .side-mini:hover{ background:rgba(255,255,255,.08); }

  .side-mini.danger{
    border-color:rgba(255,80,80,.35);
    background:rgba(255,80,80,.10);
  }

  .side-empty{
    padding:10px 6px;
    color:rgba(255,255,255,.70);
  }

  .side-overlay{
    display:none;
    z-index:65;
  }

  /* =========================
     MAIN / PANEL / CHAT
     ========================= */
  .main{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:14px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom) + 110px);
  }

  .panel{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--jw-surface);
    border:1px solid var(--jw-border);
    box-shadow:var(--jw-shadow);
    backdrop-filter:var(--jw-glass);
  }

  .top{
    padding:14px 16px;
    border-bottom:1px solid var(--jw-border);
    background:rgba(0,0,0,.18);
    backdrop-filter:var(--jw-glass);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }

  .hint{
    color:var(--jw-muted);
    font-size:12px;
  }

  .chat{
    flex:1;
    min-height:0;
    overflow:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:14px;
    padding-bottom:calc(var(--cmpTotal) + 14px);
    background:rgba(0,0,0,.14);
  }

  .msg{
    display:flex;
    flex-direction:column;
    margin:10px 0;
  }

  .msg.me{ align-items:flex-end; }
  .msg.ai{ align-items:flex-start; }

  .bubble{
    margin:0;
    max-width:min(86%, 720px);
    white-space:pre-wrap;
    word-break:break-word;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid var(--jw-border);
    line-height:1.45;
  }

  .me .bubble{
    background:var(--jw-me);
    border-color:rgba(124,58,237,.35);
  }

  .ai .bubble{
    background:var(--jw-ai);
    border-color:rgba(34,197,94,.25);
  }

  .msg-actions{
    display:flex;
    gap:14px;
    margin-top:6px;
    padding-left:6px;
    font-size:13px;
    opacity:.75;
  }

  .msg-actions button{
    display:flex;
    align-items:center;
    gap:6px;
    background:none;
    border:0;
    color:var(--jw-muted);
    cursor:pointer;
    padding:4px 6px;
    border-radius:8px;
    font-weight:600;
  }

  .msg-actions button:hover{
    background:rgba(255,255,255,.08);
    color:var(--jw-text);
  }

  .msg-actions svg{
    width:16px;
    height:16px;
    fill:currentColor;
    stroke:none;
    opacity:.85;
  }

  .msg-actions .lbl{
    line-height:1;
  }

  /* =========================
     COMPOSER
     ========================= */
  .composer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    padding:12px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom) + var(--vvBottom));
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.38) 40%, rgba(0,0,0,.52));
    pointer-events:none;
  }

  .composer-inner{
    pointer-events:auto;
    max-width:var(--composerMax);
    margin:0 auto;
    display:flex;
    gap:10px;
    align-items:flex-end;
    padding:10px;
    border-radius:18px;
    background:rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:var(--jw-glass);
    box-shadow:0 16px 40px rgba(0,0,0,.38);
  }

  textarea{
    flex:1;
    min-height:46px;
    height:46px;
    max-height:180px;
    resize:none;
    overflow:hidden;
    border-radius:14px;
    padding:12px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:15px;
    line-height:1.35;
    outline:none;
    box-sizing:border-box;
  }

  textarea:focus{
    border-color:rgba(124,58,237,.85);
    box-shadow:0 0 0 3px rgba(124,58,237,.22);
  }

  .btn{
    border:0;
    border-radius:14px;
    padding:12px 14px;
    font-weight:950;
    color:#fff;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .12s ease, filter .12s ease;
    user-select:none;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }

  .btn-send{
    min-width:92px;
    min-height:46px;
    border-radius:999px !important;
    padding:12px 18px !important;
    background:
      radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.18), transparent 55%),
      linear-gradient(90deg, var(--jw-purpleA), var(--jw-purpleB)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 14px 34px rgba(0,0,0,.45) !important;
    font-weight:950 !important;
    font-size:16px !important;
  }

  .btn-send:hover{ filter:brightness(1.06); }
  .btn-send:active{ transform:translateY(1px) scale(.99); }

  .btn-clear{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:none;
  }

  /* =========================
     HISTORY MODAL
     ========================= */
  .jw-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
    z-index:18000;
  }

  .jw-modal.open{
    opacity:1;
    pointer-events:auto;
  }

  .jw-modal-card{
    width:min(720px, calc(100vw - 28px));
    max-height:min(80vh, 720px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    backdrop-filter:saturate(160%) blur(16px);
  }

  .jw-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .jw-modal-body{
    min-height:120px;
    overflow:auto;
    padding:12px 12px 14px;
  }

  .jw-modal-foot{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .jw-history-list{
    display:grid;
    gap:10px;
  }

  .jw-history-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
  }

  .jw-history-item .meta{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .jw-history-item .title{
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .jw-history-item .sub{
    font-size:12px;
    color:rgba(255,255,255,.62);
  }

  .jw-history-actions{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .jw-mini{
    appearance:none;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.15);
    color:#fff;
    border-radius:12px;
    padding:8px 10px;
    font-weight:900;
    cursor:pointer;
  }

  .jw-mini:hover{ background:rgba(255,255,255,.08); }

  .jw-mini.danger{
    border-color:rgba(255,80,80,.35);
    background:rgba(255,80,80,.10);
  }

  /* =========================
     MORE MENU
     ========================= */
  .more-wrap{
    position:relative;
    z-index:17000;
  }

  .more-menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    min-width:190px;
    padding:8px;
    border-radius:16px;
    background:rgba(10,14,26,.92);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 50px rgba(0,0,0,.55);
    backdrop-filter:saturate(160%) blur(14px);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
    z-index:17000;
  }

  .more-menu.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .more-item{
    width:100%;
    appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:12px;
    font-weight:900;
    cursor:pointer;
    text-align:left;
  }

  .more-item:hover{ background:rgba(255,255,255,.08); }
  .more-item:active{ background:rgba(255,255,255,.14); }

  .mi-ic{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
  }

  
  /* =========================
     DEVOTION
     ========================= */
  .dev-card-one{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px;
    padding:10px 12px;
    line-height:1.15;
  }

  .dev-card-one,
  .dev-card-one *{
    margin:0 !important;
    padding:0 !important;
  }

  .dev-k{
    opacity:.75;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .dev-topic{
    font-weight:900;
    font-size:1.02rem;
  }

  .dev-gap{ margin-left:6px; }

  .dev-link{
    color:#A78BFA !important;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:2px;
  }

  .dev-link:hover{ opacity:.92; }

  .dev-verse{
    font-weight:800;
    opacity:.95;
  }

  .dev-app{
    opacity:.96;
    font-weight:500;
  }

  .dev-hazard{
    font-size:.9rem;
    opacity:.95;
    white-space:nowrap;
  }

  .dev-score-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    font-size:.78rem;
    font-weight:900;
    white-space:nowrap;
  }

  .dev-score-icon{
    width:8px;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    box-shadow:0 0 0 3px rgba(255,255,255,.10);
  }

  .tone-neutral{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    color:rgba(255,255,255,.88);
  }
  .tone-neutral .dev-score-icon{
    background:rgba(255,255,255,.55);
    box-shadow:0 0 0 3px rgba(255,255,255,.10);
  }

  .tone-low{
    background:rgba(59,130,246,.12);
    border-color:rgba(59,130,246,.28);
    color:#BFDBFE;
  }
  .tone-low .dev-score-icon{
    background:#60A5FA;
    box-shadow:0 0 0 3px rgba(59,130,246,.18);
  }

  .tone-mid{
    background:rgba(245,158,11,.12);
    border-color:rgba(245,158,11,.28);
    color:#FDE68A;
  }
  .tone-mid .dev-score-icon{
    background:#FBBF24;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
  }

  .tone-high{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.28);
    color:#BBF7D0;
  }
  .tone-high .dev-score-icon{
    background:#22C55E;
    box-shadow:0 0 0 3px rgba(34,197,94,.18);
  }

  .tone-danger{
    background:rgba(239,68,68,.14);
    border-color:rgba(239,68,68,.32);
    color:#FECACA;
  }
  .tone-danger .dev-score-icon{
    background:#EF4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.18);
  }

  .bubble.devotion-bubble{
    white-space:normal !important;
    padding:14px !important;
  }

  .msg.ai.devotion-row .bubble.devotion-bubble{
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(15,20,30,.85) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.45) !important;
    padding:16px !important;
    line-height:1.5;
  }

  .msg.ai.devotion-row .bubble.devotion-bubble *{
    line-height:inherit !important;
  }

  .jw-devocard{
    width:100%;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.16);
    background:
      radial-gradient(900px 300px at 20% 0%, rgba(246,196,83,.08), transparent 60%),
      radial-gradient(900px 300px at 80% 0%, rgba(124,58,237,.12), transparent 60%),
      rgba(0,0,0,.18);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 14px 40px rgba(0,0,0,.35);
    padding:16px 16px 14px;
    margin:0;
  }

  .msg.ai.devotion-row .jw-devocard{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  .jw-devocard .k{
    margin:0 0 6px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    font-weight:950;
  }

  .jw-devocard .topic{
    margin:0 0 6px;
    font-size:22px;
    font-weight:980;
    letter-spacing:-.02em;
    line-height:1.12;
  }

  .jw-devocard .blk-title{
    margin:2px 0 6px;
    font-weight:950;
    font-size:14px;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.94);
  }

  .jw-devocard .verse,
  .jw-devocard .blk{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:rgba(255,255,255,.90);
  }

  .jw-devocard .blk{
    color:rgba(255,255,255,.88);
  }

  .jw-devocard .ref{
    margin:8px 0 0;
    font-size:13px;
    color:rgba(255,255,255,.70);
    font-weight:900;
    opacity:.95;
  }

  .jw-devocard .rule,
  .msg.ai.devotion-row .rule{
    display:block;
    height:1px;
    margin:8px 0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    opacity:.9;
  }

  .jw-devocard .continue{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }

  .msg.ai.devotion-row .sp{
    display:block;
    height:12px;
  }

  .msg.ai.devotion-row .sp.sm{
    height:6px;
  }

  .jw-pillbtn{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:12px 18px;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-weight:950;
    font-size:16px;
    letter-spacing:-.01em;
    color:#fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 14px 34px rgba(0,0,0,.45);
    transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
    user-select:none;
    cursor:pointer;
    white-space:nowrap;
  }

  .jw-pillbtn:hover{
    filter:brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 18px 44px rgba(0,0,0,.52);
  }

  .jw-pillbtn:active{
    transform:translateY(1px) scale(.99);
    filter:brightness(.99);
    box-shadow:
      inset 0 3px 10px rgba(0,0,0,.26),
      0 12px 30px rgba(0,0,0,.44);
  }

  .jw-pillbtn:focus-visible{
    outline:none;
    box-shadow:
      0 0 0 3px rgba(255,255,255,.18),
      0 0 0 6px rgba(124,58,237,.35),
      0 18px 44px rgba(0,0,0,.52);
  }

  .jw-pillbtn.purple{
    background:
      radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.18), transparent 55%),
      linear-gradient(90deg, var(--jw-purpleA), var(--jw-purpleB));
  }

  .jw-pillbtn.gold{
    background:
      radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.22), transparent 55%),
      linear-gradient(90deg, var(--jw-goldA), var(--jw-goldB));
    color:#1b1405;
    text-shadow:none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 16px 36px rgba(0,0,0,.48);
  }

  .msg.ai.devotion-row .jw-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .msg.ai.devotion-row .jw-actions .jw-pillbtn{
    min-height:44px;
    padding:10px 18px;
    font-size:15px;
    line-height:1;
    border-radius:999px;
    flex:0 0 auto;
  }

  .msg.ai.devotion-row .jw-actions .jw-pillbtn.gold,
  .msg.ai.devotion-row .jw-actions .jw-pillbtn.purple:not([data-action="devotion-next"]){
    width:92px;
    justify-content:center;
  }

  .msg.ai.devotion-row .jw-actions .jw-pillbtn[data-action="devotion-next"]{
    width:220px;
    justify-content:center;
    white-space:nowrap;
  }

  .msg.ai.devotion-row .jw-nf{
    width:100%;
    border-radius:22px;
    padding:14px 14px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-color:transparent !important;
    box-shadow:0 14px 40px rgba(0,0,0,.35) !important;
  }

  .msg.ai.devotion-row .jw-nf .k{
    margin:0 0 6px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    font-weight:950;
  }

  .msg.ai.devotion-row .jw-nf .h{
    margin:0 0 8px;
    font-size:18px;
    font-weight:980;
    letter-spacing:-.02em;
    line-height:1.15;
  }

  .msg.ai.devotion-row .jw-nf .sub{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:13.5px;
    line-height:1.45;
  }

  .msg.ai.devotion-row .jw-nf-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:flex-start;
  }

  .msg.ai.devotion-row .jw-nf-sugs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
    flex:0 0 auto;
    min-width:unset;
    padding-left:0;
    padding-right:0;
  }

  .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
    width:160px;
    min-height:46px;
    padding:12px 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
    border-radius:999px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 0 auto;
  }

  .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:disabled,
  .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn[aria-disabled="true"]{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none !important;
    filter:none !important;
  }

  .msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
    order:2;
    margin-left:10px;
    flex:0 0 auto;
    width:auto !important;
    padding:12px 18px !important;
  }

  .jw-quiet{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    max-width:100%;
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
  }

  .jw-quiet-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(246,196,83,.95), rgba(245,158,11,.95));
    box-shadow:0 0 0 4px rgba(246,196,83,.16);
    flex:0 0 auto;
  }

  .jw-quiet-text{
    font-weight:950;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.92);
  }

  /* =========================
     LIGHT THEME
     ========================= */
  body[data-theme="light"]{
    --jw-text:#0b0f17;
    --jw-muted:rgba(11,15,23,.62);
    --jw-bg1:#F7F8FC;
    --jw-bg2:#EEF1FB;
    --jw-surface:rgba(255,255,255,.78);
    --jw-border:rgba(15,23,42,.10);
    --jw-border2:rgba(15,23,42,.14);
    --jw-shadow:0 14px 38px rgba(15,23,42,.12);
    --jw-ai:rgba(34,197,94,.10);
    --jw-me:rgba(124,58,237,.12);
    --jw-glass:saturate(180%) blur(16px);
  }

  body[data-theme="light"]{
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.18), transparent 55%),
      radial-gradient(1000px 560px at 90% 0%, rgba(59,130,246,.16), transparent 55%),
      linear-gradient(180deg,var(--jw-bg2),var(--jw-bg1));
  }

  body[data-theme="light"] .app-header{
    background:rgba(255,255,255,.88);
    border-bottom:1px solid rgba(15,23,42,.10);
    backdrop-filter:saturate(180%) blur(16px);
  }

  body[data-theme="light"] .app-header,
  body[data-theme="light"] .app-header .hdr-title,
  body[data-theme="light"] .app-header .hdr-action,
  body[data-theme="light"] .app-header .icon-btn{
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .hdr-title small{
    color:rgba(11,15,23,.62) !important;
  }

  body[data-theme="light"] .icon-btn:hover,
  body[data-theme="light"] .hdr-action:hover{
    background:rgba(15,23,42,.06) !important;
  }

  body[data-theme="light"] .icon-btn:active,
  body[data-theme="light"] .hdr-action:active{
    background:rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .brand-badge{
    background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(59,130,246,.10)) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 20px rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .sidebar{
    background:rgba(255,255,255,.68) !important;
    border-right:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .side-title h2,
  body[data-theme="light"] .side-section .side-title-mini h3{
    color:rgba(11,15,23,.70) !important;
  }

  body[data-theme="light"] .pill,
  body[data-theme="light"] #closeMenuBtn.pill,
  body[data-theme="light"] .side-ghost{
    color:#0b0f17 !important;
    border:1px solid rgba(15,23,42,.14) !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:0 10px 26px rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .mode-card{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 10px 26px rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .mode-card .desc,
  body[data-theme="light"] .mode-card .name span{
    color:rgba(11,15,23,.62) !important;
  }

  body[data-theme="light"] .mode-card.active{
    border-color:rgba(246,196,83,.55) !important;
    background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(59,130,246,.08)) !important;
  }

  body[data-theme="light"] .side-chat-item{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .side-chat-title{ color:#0b0f17 !important; }
  body[data-theme="light"] .side-chat-sub,
  body[data-theme="light"] .side-empty{ color:rgba(11,15,23,.58) !important; }

  body[data-theme="light"] .side-mini{
    background:rgba(255,255,255,.60) !important;
    color:#0b0f17 !important;
    border:1px solid rgba(15,23,42,.12) !important;
  }

  body[data-theme="light"] .panel{
    background:rgba(255,255,255,.60) !important;
    border:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .top{
    background:rgba(255,255,255,.55) !important;
    border-bottom:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .hint{
    color:rgba(11,15,23,.58) !important;
  }

  body[data-theme="light"] .chat{
    background:rgba(255,255,255,.35) !important;
  }

  body[data-theme="light"] .bubble{
    color:#0b0f17 !important;
    border:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .me .bubble{
    background:rgba(124,58,237,.12) !important;
    border-color:rgba(124,58,237,.22) !important;
  }

  body[data-theme="light"] .ai .bubble{
    background:rgba(34,197,94,.10) !important;
    border-color:rgba(34,197,94,.18) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .bubble.devotion-bubble{
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 12px 30px rgba(15,23,42,.12) !important;
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .composer{
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(247,248,252,.72) 40%, rgba(238,241,251,.88)) !important;
  }

  body[data-theme="light"] .composer-inner{
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    box-shadow:0 16px 40px rgba(15,23,42,.12) !important;
  }

  body[data-theme="light"] textarea{
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:#0b0f17 !important;
  }

  body[data-theme="light"] textarea::placeholder{
    color:rgba(11,15,23,.52) !important;
  }

  body[data-theme="light"] .btn-clear{
    background:rgba(255,255,255,.70) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .jw-modal{
    background:rgba(15,23,42,.40) !important;
  }

  body[data-theme="light"] .jw-modal-card{
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(15,23,42,.12) !important;
  }

  body[data-theme="light"] .jw-history-item{
    background:rgba(255,255,255,.70) !important;
    border:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .jw-history-item .sub{
    color:rgba(11,15,23,.58) !important;
  }

  body[data-theme="light"] .jw-mini{
    background:rgba(255,255,255,.72) !important;
    color:#0b0f17 !important;
    border:1px solid rgba(15,23,42,.12) !important;
  }

  body[data-theme="light"] .more-menu{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    box-shadow:0 18px 50px rgba(15,23,42,.14) !important;
  }

  body[data-theme="light"] .more-item{
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .more-item:hover{
    background:rgba(15,23,42,.06) !important;
  }

  body[data-theme="light"] .mi-ic{
    background:rgba(15,23,42,.06) !important;
    border:1px solid rgba(15,23,42,.10) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard{
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .k{
    color:rgba(11,15,23,.62) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .topic{
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .blk-title{
    color:rgba(11,15,23,.92) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .verse,
  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .blk{
    color:rgba(11,15,23,.86) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .ref{
    color:rgba(11,15,23,.62) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-devocard .rule,
  body[data-theme="light"] .msg.ai.devotion-row .rule{
    background:linear-gradient(90deg, transparent, rgba(15,23,42,.16), transparent) !important;
    opacity:1 !important;
  }

  body[data-theme="light"] .dev-k{ color:rgba(11,15,23,.62) !important; }
  body[data-theme="light"] .dev-topic{ color:#0b0f17 !important; }
  body[data-theme="light"] .dev-verse,
  body[data-theme="light"] .dev-app,
  body[data-theme="light"] .dev-hazard{ color:rgba(11,15,23,.82) !important; }

  body[data-theme="light"] .dev-link{ color:#5b21b6 !important; }
  body[data-theme="light"] .dev-link:hover{ color:#4c1d95 !important; }

  body[data-theme="light"] .dev-score-badge{
    background:rgba(15,23,42,.05) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:rgba(11,15,23,.78) !important;
  }

  body[data-theme="light"] .dev-score-icon{
    background:rgba(15,23,42,.35) !important;
    box-shadow:0 0 0 3px rgba(15,23,42,.08) !important;
  }

  body[data-theme="light"] .jw-quiet{
    background:rgba(15,23,42,.05) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:rgba(11,15,23,.72) !important;
    box-shadow:none !important;
  }

  body[data-theme="light"] .jw-quiet-dot{
    background:linear-gradient(135deg, var(--jw-gold), var(--jw-accent)) !important;
    box-shadow:0 0 0 3px rgba(246,196,83,.18) !important;
  }

  body[data-theme="light"] .jw-quiet-text{
    color:rgba(11,15,23,.72) !important;
    font-weight:800;
    font-size:13.5px;
    line-height:1.25;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .k{
    color:rgba(11,15,23,.55) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .h{
    color:#0b0f17 !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .sub{
    color:rgba(11,15,23,.72) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn{
    background:rgba(255,255,255,.78) !important;
    border:none !important;
    box-shadow:0 12px 26px rgba(15,23,42,.12) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn[disabled],
  body[data-theme="light"] .msg.ai.devotion-row .jw-nf .jw-pillbtn[aria-disabled="true"]{
    background:rgba(15,23,42,.04) !important;
    color:rgba(11,15,23,.40) !important;
    box-shadow:none !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
    background:linear-gradient(135deg, var(--jw-gold), #f2b94b) !important;
    color:#1b1405 !important;
    box-shadow:0 14px 34px rgba(246,196,83,.35) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
    background:
      radial-gradient(320px 120px at 18% 18%, rgba(255,255,255,.18), transparent 55%),
      linear-gradient(90deg, var(--jw-purpleA), var(--jw-purpleB)) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 14px 34px rgba(0,0,0,.45) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):hover{
    filter:brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 18px 44px rgba(0,0,0,.52) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):active{
    transform:translateY(1px) scale(.99);
    filter:brightness(.99);
    box-shadow:
      inset 0 3px 10px rgba(0,0,0,.26),
      0 12px 30px rgba(0,0,0,.44) !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):disabled,
  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold)[aria-disabled="true"]{
    background:rgba(255,255,255,.10) !important;
    color:rgba(255,255,255,.45) !important;
    box-shadow:none !important;
    filter:none !important;
  }

  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):not(.purple):disabled,
  body[data-theme="light"] .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold):not(.purple)[aria-disabled="true"]{
    background:rgba(148,163,184,.42) !important;
    color:rgba(255,255,255,.88) !important;
    border:0 !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
    cursor:not-allowed !important;
  }

  /* =========================
     TABLET / MOBILE
     ========================= */
  @media (max-width:860px){
    .sidebar{
      position:fixed;
      top:calc(var(--hdrH) + env(safe-area-inset-top));
      left:0;
      height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top)));
      transform:translateX(-110%);
      z-index:70;
      padding-bottom:calc(96px + env(safe-area-inset-bottom));
    }

    .sidebar.open{
      transform:translateX(0);
    }

    .side-overlay{
      display:block;
      position:fixed;
      top:calc(var(--hdrH) + env(safe-area-inset-top));
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,.45);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
    }

    .side-overlay.open{
      opacity:1;
      pointer-events:auto;
    }
  }

  @media (max-width:520px){
    :root{
      --hdrH:54px;
      --sidebarW:86vw;
    }

    html,body{
      height:100%;
      overflow:hidden;
    }

    .app-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
    }

    .app{
      height:calc(100dvh - (var(--hdrH) + env(safe-area-inset-top))) !important;
      margin-top:calc(var(--hdrH) + env(safe-area-inset-top));
    }

    .hdr-desktop-only{
      display:none !important;
    }

    .hdr-left{
      gap:10px !important;
      z-index:3;
    }

    .hdr-right{
      display:flex !important;
      align-items:center;
      gap:8px;
      z-index:3;
    }

    .hdr-mid{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      justify-content:center;
      pointer-events:none;
    }

    .hdr-mid *{
      pointer-events:auto;
    }

    .hdr-title{
      max-width:70vw;
      justify-content:center;
      text-align:center;
      font-size:18px;
    }

    .hdr-title small{
      display:none !important;
    }

    #historyBtn,
    #shareBtn,
    .profile-btn{
      display:none !important;
    }

    .more-wrap,
    #moreBtn{
      display:inline-flex !important;
    }

    .main{
      padding:0 !important;
      padding-bottom:calc(env(safe-area-inset-bottom) + 110px) !important;
    }

    .panel{
      height:100% !important;
      border-radius:0 !important;
      border:0 !important;
      box-shadow:none !important;
      background:transparent !important;
      backdrop-filter:none !important;
    }

    .panel .top{
      display:none !important;
    }

    .chat{
      height:100% !important;
      padding:14px 12px !important;
      padding-bottom:calc(var(--cmpTotal) + 14px) !important;
      background:transparent !important;
      border-radius:0 !important;
    }

    .bubble{
      max-width:92% !important;
    }

    .composer{
      left:0;
      right:0;
      bottom:0;
      padding-left:10px !important;
      padding-right:10px !important;
    }

    .composer-inner{
      max-width:none !important;
      width:100% !important;
      margin:0 !important;
    }

    textarea,
    input,
    select{
      font-size:16px !important;
    }

    .jw-devocard{
      padding:14px 14px 12px;
      border-radius:20px;
    }

    .jw-devocard .topic{
      font-size:20px;
    }

    .jw-devocard .continue{
      justify-content:flex-start;
    }

    .jw-devocard .nextbtn{
      width:100%;
      text-align:center;
      white-space:normal !important;
    }

    .msg.ai.devotion-row .sp{
      height:10px;
    }

    .msg.ai.devotion-row .rule{
      margin:6px 0;
    }

    .msg.ai.devotion-row .jw-actions{
      flex-direction:column;
      align-items:stretch;
    }

    .msg.ai.devotion-row .jw-actions .jw-pillbtn{
      width:100% !important;
      justify-content:center;
    }

    .msg.ai.devotion-row .jw-nf-actions{
      flex-direction:column;
      align-items:stretch;
    }

    .msg.ai.devotion-row .jw-nf-sugs{
      flex-direction:column;
      align-items:stretch;
    }

    .msg.ai.devotion-row .jw-nf-sugs .jw-pillbtn:not(.gold){
      width:100%;
      white-space:normal;
    }

    .msg.ai.devotion-row .jw-nf-actions .jw-pillbtn.gold{
      margin-left:0;
      margin-top:6px;
      width:100%;
    }

    .msg.ai.devotion-row .jw-quiet,
    body[data-theme="light"] .msg.ai.devotion-row .jw-quiet{
      display:flex !important;
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box;
      padding:12px 14px !important;
      align-items:center;
    }

    .msg.ai.devotion-row .jw-quiet-text,
    body[data-theme="light"] .msg.ai.devotion-row .jw-quiet-text{
      flex:1 !important;
      white-space:normal !important;
      text-align:left !important;
    }
  }

  @media (max-width:420px){
    .main{
      padding:12px;
      padding-bottom:calc(12px + env(safe-area-inset-bottom) + 110px);
    }

    .top{
      padding:12px;
    }

    .composer{
      padding:10px;
      padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--vvBottom));
    }

    .composer-inner{
      padding:10px;
    }

    .btn-send{
      min-width:78px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .brand-dot,
    .brand-dot::after{
      animation:none !important;
    }
  }

  @keyframes jwDotBreath{
    0%,100%{
      transform:scale(1);
      filter:brightness(1);
    }
    50%{
      transform:scale(1.16);
      filter:brightness(1.08);
    }
  }

  @keyframes jwDotGlow{
    0%,100%{
      opacity:.45;
      transform:scale(.92);
    }
    50%{
      opacity:.80;
      transform:scale(1.05);
    }
  }

  @keyframes jwDotDevotion{
    0%,100%{
      transform:scale(1);
      filter:saturate(1.05) brightness(1.02);
    }
    50%{
      transform:scale(1.14);
      filter:saturate(1.18) brightness(1.06);
    }
  }

  /* =========================
     PRAYER CARD
     ========================= */

.prayer-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,10,24,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:17050;
}

.prayer-overlay.show{
  display:flex;
}

.prayer-card{
  width:min(100%,560px);
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.28), transparent 34%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.18), transparent 34%),
    linear-gradient(180deg, rgba(12,18,34,.98), rgba(8,12,24,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.prayer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 10px;
}

.prayer-title .kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:6px;
}

.prayer-title .h{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
}

.prayer-title .sub{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:.96rem;
}

.prayer-body{
  padding:8px 20px 20px;
}

.prayer-verse{
  margin:0 0 14px;
  color:#f6c453;
  font-weight:800;
  line-height:1.5;
}

.prayer-text{
  margin:0;
  color:rgba(255,255,255,.92);
  line-height:1.75;
  font-size:1rem;
  white-space:pre-line;
}

.prayer-foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 20px 20px;
}

.prayer-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
}

.prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  border-color:transparent;
}

.prayer-btn:hover,
.prayer-btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

body.prayer-open{
  overflow:hidden;
}

@media (max-width:640px){
  .prayer-card{
    border-radius:24px;
  }

  .prayer-head,
  .prayer-body,
  .prayer-foot{
    padding-left:16px;
    padding-right:16px;
  }
}

/* =========================
   PRAYER CARD
   ========================= */

.prayer-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,10,24,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:17050;
}

.prayer-overlay.show{
  display:flex;
}

.prayer-card{
  width:min(100%,560px);
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.28), transparent 34%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.18), transparent 34%),
    linear-gradient(180deg, rgba(12,18,34,.98), rgba(8,12,24,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.prayer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 10px;
}

.prayer-title .kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:6px;
}

.prayer-title .h{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
}

.prayer-title .sub{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:.96rem;
}

.prayer-body{
  padding:8px 20px 20px;
}

.prayer-verse{
  margin:0 0 14px;
  color:#f6c453;
  font-weight:800;
  line-height:1.5;
}

.prayer-text{
  margin:0;
  color:rgba(255,255,255,.92);
  line-height:1.75;
  font-size:1rem;
  white-space:pre-line;
}

.prayer-foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 20px 20px;
}

.prayer-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
}

.prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  border-color:transparent;
}

.prayer-btn:hover,
.prayer-btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

body.prayer-open{
  overflow:hidden;
}

@media (max-width:640px){
  .prayer-card{
    border-radius:24px;
  }

  .prayer-head,
  .prayer-body,
  .prayer-foot{
    padding-left:16px;
    padding-right:16px;
  }
}

/* =========================
   LIGHT THEME
   ========================= */

body[data-theme="light"] .prayer-overlay{
  background:rgba(240,245,255,.6);
}

body[data-theme="light"] .prayer-card{
  color:#0f172a;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.15), transparent 40%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.12), transparent 40%),
    linear-gradient(180deg,#ffffff,#f5f7fb);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

body[data-theme="light"] .prayer-title .kicker{
  color:rgba(0,0,0,.55);
}

body[data-theme="light"] .prayer-title .sub{
  color:rgba(0,0,0,.65);
}

body[data-theme="light"] .prayer-verse{
  color:#a16207;
}

body[data-theme="light"] .prayer-text{
  color:#1e293b;
}

body[data-theme="light"] .prayer-btn{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  color:#0f172a;
}

body[data-theme="light"] .prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  color:#fff;
}
/* =========================
   SMART HEADER STATUS VISIBILITY
   ========================= */

/* Default: show status */
.hdr-title small{
  display:inline !important;
}

/* Hide ONLY when space is tight */
@media (max-width:720px){
  .hdr-title small{
    display:none !important;
  }
}

/* Extra safety: if header gets crowded (buttons present) */
@media (max-width:860px){
  .hdr-title{
    max-width:65vw !important;
  }
}

/* Keep logo centered and protected */
.hdr-mid{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  justify-content:center !important;
  pointer-events:none;
}

.hdr-mid *{
  pointer-events:auto;
}

/* Prevent side controls from breaking center */
.hdr-left,
.hdr-right{
  flex:0 0 auto;
}

/* =========================
   PRAYER CARD — SCROLL FIX
   Works with: .prayer-foot / .prayer-btn
   ========================= */

.prayer-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,10,24,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:17050;
}

.prayer-overlay.show{
  display:flex;
}

.prayer-card{
  width:min(100%,560px);
  max-height:min(90dvh, 760px);
  display:flex;
  flex-direction:column;
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.28), transparent 34%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.18), transparent 34%),
    linear-gradient(180deg, rgba(12,18,34,.98), rgba(8,12,24,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.prayer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 20px 10px;
  flex:0 0 auto;
}

.prayer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 20px 20px;
}

.prayer-foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 20px 20px;
  flex:0 0 auto;
}

.prayer-title .kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:6px;
}

.prayer-title .h{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
}

.prayer-title .sub{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:.96rem;
}

.prayer-verse{
  margin:0 0 14px;
  color:#f6c453;
  font-weight:800;
  line-height:1.5;
}

.prayer-text{
  margin:0;
  color:rgba(255,255,255,.92);
  line-height:1.75;
  font-size:1rem;
  white-space:pre-line;
}

.prayer-btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
}

.prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  border-color:transparent;
}

.prayer-btn:hover,
.prayer-btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

body.prayer-open{
  overflow:hidden;
}

/* MOBILE */
@media (max-width:640px){
  .prayer-overlay{
    padding:12px;
    align-items:flex-end;
  }

  .prayer-card{
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:24px;
  }

  .prayer-head,
  .prayer-body,
  .prayer-foot{
    padding-left:16px;
    padding-right:16px;
  }
}

/* VERY SMALL SCREENS */
@media (max-width:480px){
  .prayer-card{
    max-height:calc(100dvh - 20px);
  }

  .prayer-body{
    padding-bottom:16px;
  }

  .prayer-foot{
    gap:8px;
  }

  .prayer-btn{
    flex:1 1 100%;
    width:100%;
    text-align:center;
  }
}

/* LIGHT THEME */
body[data-theme="light"] .prayer-overlay{
  background:rgba(240,245,255,.6);
}

body[data-theme="light"] .prayer-card{
  color:#0f172a;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.15), transparent 40%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.12), transparent 40%),
    linear-gradient(180deg,#ffffff,#f5f7fb);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

body[data-theme="light"] .prayer-title .kicker{
  color:rgba(0,0,0,.55);
}

body[data-theme="light"] .prayer-title .sub{
  color:rgba(0,0,0,.65);
}

body[data-theme="light"] .prayer-verse{
  color:#a16207;
}

body[data-theme="light"] .prayer-text{
  color:#1e293b;
}

body[data-theme="light"] .prayer-btn{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  color:#0f172a;
}

body[data-theme="light"] .prayer-btn.primary{
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  color:#fff;
}

/* =========================
   SIDEBAR SEARCH BUTTON
   ========================= */
.side-search-wrap{
  margin:0 0 12px;
}

.side-search-btn{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#fff;
  border-radius:16px;
  min-height:46px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.side-search-btn:hover{
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.10));
  border-color:rgba(255,255,255,.22);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}

.side-search-btn:active{
  transform:translateY(1px) scale(.995);
}

.side-search-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.45), 0 14px 28px rgba(0,0,0,.28);
}

/* =========================
   CONVERSATION SEARCH MODAL
   ========================= */
.jw-search-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:78px 18px 18px;
  background:rgba(0,0,0,.44);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:19000;
}

.jw-search-modal.open{
  opacity:1;
  pointer-events:auto;
}

.jw-search-card{
  width:min(1000px, calc(100vw - 36px));
  max-height:min(76vh, 760px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:rgba(13,18,30,.94);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 64px rgba(0,0,0,.52);
  backdrop-filter:saturate(160%) blur(16px);
}

.jw-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.jw-search-head-left{
  min-width:0;
}

.jw-search-title{
  font-size:15px;
  font-weight:950;
  letter-spacing:-.01em;
}

.jw-search-sub{
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.jw-search-input-wrap{
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.jw-search-input{
  width:100%;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:0 16px;
  outline:none;
  font-size:17px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.jw-search-input::placeholder{
  color:rgba(255,255,255,.48);
}

.jw-search-input:focus{
  border-color:rgba(124,58,237,.82);
  box-shadow:0 0 0 3px rgba(124,58,237,.20);
}

.jw-search-body{
  overflow:auto;
  padding:8px 10px 12px;
}

.jw-search-results{
  display:grid;
  gap:8px;
}

.jw-search-empty{
  padding:18px 12px;
  color:rgba(255,255,255,.68);
}

.jw-search-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

.jw-search-item:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.jw-search-item.current{
  border-color:rgba(246,196,83,.42);
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(59,130,246,.10));
}

.jw-search-meta{
  min-width:0;
}

.jw-search-name{
  font-weight:950;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.jw-search-time{
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,.60);
}

.jw-search-snippet{
  margin-top:7px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.jw-search-snippet mark{
  background:rgba(246,196,83,.24);
  color:#fff;
  border-radius:6px;
  padding:0 .12em;
}

.jw-search-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.jw-search-open{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.jw-search-open:hover{
  background:rgba(255,255,255,.10);
}

body.search-open{
  overflow:hidden;
}

/* light theme */
body[data-theme="light"] .side-search-btn{
  color:#0b0f17;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,247,251,.92));
}

body[data-theme="light"] .jw-search-modal{
  background:rgba(15,23,42,.38);
}

body[data-theme="light"] .jw-search-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
}

body[data-theme="light"] .jw-search-title{
  color:#0b0f17;
}

body[data-theme="light"] .jw-search-sub,
body[data-theme="light"] .jw-search-time{
  color:rgba(11,15,23,.58);
}

body[data-theme="light"] .jw-search-input{
  color:#0b0f17;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}

body[data-theme="light"] .jw-search-input::placeholder{
  color:rgba(11,15,23,.42);
}

body[data-theme="light"] .jw-search-item{
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}

body[data-theme="light"] .jw-search-item.current{
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(59,130,246,.08));
  border-color:rgba(124,58,237,.20);
}

body[data-theme="light"] .jw-search-name,
body[data-theme="light"] .jw-search-snippet{
  color:#0b0f17;
}

body[data-theme="light"] .jw-search-open{
  color:#0b0f17;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}

body[data-theme="light"] .jw-search-empty{
  color:rgba(11,15,23,.62);
}

@media (max-width:640px){
  .jw-search-modal{
    padding:72px 10px 10px;
  }

  .jw-search-card{
    width:calc(100vw - 20px);
    max-height:82vh;
    border-radius:22px;
  }

  .jw-search-item{
    grid-template-columns:1fr;
  }

  .jw-search-actions{
    justify-content:flex-start;
  }
}